Search code examples
jointjs

How to make label text in jointjs elements not selectable?

i'm trying to find a solution for the following. When I drag a link between elements the label text inside the elements get selected for some reason.

Lets say I have an element A with the property A.attr("body/magnet", "active"); set and A.attr("label/text", "some text"); When I create a link from that element by clicking and dragging the label text gets selected on elements the link goes through.

This seems a little bit random though as sometimes all the labels in the graph gets selected when dragging the link.

Is there a way to make the label text not to be selectable?

Solution

  • We solved it by adding the following label style to the shapes.

    let element = new joint.shapes.standard.Rectangle();

element.attr(
  "label/style",
  "-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;"
);