javascriptreactjsjsplumb

JSPLUMB: disable nodes drag and drop after a specific user interaction

I'm using the community edition of jsplumb (version 2.15.5) within a React project.

// Outside the component
plumb = jsPlumb.getInstance(mySetting);

...

useEffect(() => {
  // Handle endpoints

  // Handle connections

  plumb.draggable(document.querySelectorAll('.my-node'));

  // Handle listeners

  plumb.repaintEverything();

  return () => {
        plumb.current.unbind('connection');
        plumb.current.unbind('connectionDetached');
        plumb.current.deleteEveryEndpoint();
        plumb.current.deleteEveryConnection();
  };
}, [deps])

I need to have the nodes draggable and then stop them to be draggable when I click a button. I tried to change the argument of the draggable method using an if statement but when the useEffect is re-executed nothing change. I have to refresh the page to see the changes (i.e. havinvg my node undraggable).

if(buttonIsClicked){
  plumb.draggable([]);
}else{
  plumb.draggable(document.querySelectorAll('.my-node'));
}

It seem that once the draggable method is executed, jsplumb internally save which are the references of the DOM elements that can be draggable, and after that moment those references can't be overridden.

Do anyone know a way to tell jsplumb to stop the nodes to be draggable ? Thanks.

Solution

  • You can use setDraggable() to arbitrarily set a draggable property to a jsplumb node, like:

    const plumb = jsPlumb.getInstance({});
plumb.setDraggable(document.querySelectorAll('.dag-node'), false);

    or switching it ON/OFF with toggleDraggable():

    const plumb = jsPlumb.getInstance({});
jsPlumbNode.toggleDraggable(document.querySelectorAll('.dag-node'))

    I don't think those functions are documented in the offical library website, however you can find some references in the relevant github repository, here and here.