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 !!

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 !!

• javascript
• html
• canvas
• html5-canvas
• konvajs

• Can you make a demo? As I can see you are adding a new layer on every button click. I am not sure that is the correct behavior. Also, you need to redraw layer on which the transformer is placed. – lavrton Commented Jun 15, 2020 at 12:38
• Hey thank you for your reply, Link for demo: codepen.io/Tulsani/pen/OJMRQPr Here if I try to add two rectangles using the button on to the stage and delete one the transformer for the remaining one also is removed. Thank you for the help !! – Akshat Tulsani Commented Jun 16, 2020 at 6:42

1 Answer 1

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