Removing element by button or Delete key

[che]

Hi there, I draw rect using below code and I want to click any drawing and delete it by pushing delete key or by delete button.

How can i create delete function for this drawing?

````````````````````````````````````````````````````````````````````````````````````````

// HMI Canvas for drawing elements

    let graph = new joint.dia.Graph,

    paper = new joint.dia.Paper({

        el: $('#paper'),

        model: graph

    });

var rect = new joint.shapes.standard.Rectangle();

        rect.position(100, 30);

        rect.resize(105, 25);

        rect.attr({

            label: {

                text: realTimeData[0].value

            }

        });

        rect.addTo(graph);

````````````````````````````````````````````````````````````````````````````````````````

Many thanks.

[Roman Bruckner]

Hi,

here's an example:

let selectedElement = null;
paper.on('element:pointerclick', function(elementView) {
  selectedElement = elementView.model;
});
document.addEventListener('keyup', function(evt) {
    if (!selectedElement) return;
    if (evt.code === 'Backspace' || evt.code === 'Delete') {
        selectedElement.remove();
        selectedElement = null;
    }
}, false);

--

---
You received this message because you are subscribed to the Google Groups "JointJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email to jointjs+u...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/jointjs/4d44095d-0c95-47af-87b4-31b136a6a62dn%40googlegroups.com.

--

Roman Bruckner, CTO

client IO

http://client.io

http://jointjs.com

+420 776 504 406

[che]

Thanks so much for your reply, it is perfectly working, but i need other approach.

When I click element, it is not hovered and I cant check whether it is select or not.

1) is there any way i can show hover statement?

2) is there any way i can give a delete function to button? not just 'delete' key.

I will create <input> or <a> tag. When i select element and click that button, element will be removed.

Many thanks again

[Roman Bruckner]

Hi,

1.

- you can use a highlighter to show a frame around the element - https://resources.jointjs.com/docs/jointjs/v3.5/joint.html#highlighters

- or elementTools.Boundary as shown in the FTA demo: https://resources.jointjs.com/demos/fta

2.

- yes, you can do exactly as you say. JointJS does not restrict this in any way.

document.getElementById('my-button').addEventListener('click', function() {
  if (selectedElement) selectedElement.remove();
}, false);

Best,

Roman

To view this discussion on the web visit https://groups.google.com/d/msgid/jointjs/c19d5495-9cd2-4497-a21e-3b7906bbfd08n%40googlegroups.com.