How to delete a konva shape/image , when using node.destroy()

user_11133536 0
Viewed 5597

While using konva I am using a button to add a shape multiple times on to my Stage using something similar to 

      document.getElementById('Rect').addEventListener( "click" , function () {

        let layer = new Konva.Layer();

        let item = new Konva.Rect({
          x: 20,
          y: 20,
          width: 100,
          height: 50,
          fill: 'green',
          stroke: 'black',
          strokeWidth: 4,
          draggable: true,
        });

This appends a rectangle shape, if clicked multiple times it also appends extra shapes I want to provide user with an option of deleting a particular shape that he wishes to delete with a button. I tried to use context Menu tutorial available at Konva Tutorials but when implementing the delete function available there

        document.getElementById('delete-button').addEventListener('click', () => {

          currentShape.destroy();

          layer.draw();
        });

It is unable to delete the transformer layer added to the shape 

        document.getElementById('delete-button').addEventListener('click', () => {
          tr.detach();
          currentShape.destroy();

          layer.draw();
        });

I tried to detach the transformer / hide it but it removes it from all available instances of the shape

How can I solve this problem, Thanks a lot !!

konvajs html5-canvas canvas html javascript
1 Answers

You are adding a new click event listener for the "delete" button INSIDE click event of "add" button. That means every time you click on "delete" ALL listeners will be triggered. That removes all transformers.

Instead, you need just add a click listener once and find active Transformer manually to delete it.

document.getElementById('delete-button').addEventListener('click', () => {
  const tr = layer.find('Transformer').toArray().find(tr => tr.nodes()[0] === currentShape);
  tr.destroy();
  currentShape.destroy();
  layer.draw();
});

https://codepen.io/lavrton/pen/VweKqrp?editors=0010

user_5120420
Related