Prevent drag and drop and resize of the node without usage of diagram constrants

[Dominique Toussaint]

-For some reason, my overview panel and diagram is bugging when I use ~NodeConstraints.Drag and ~NodeConstraints.Resize constraints. Is there some other way to prevent dragging and resizing of the nodes in diagram?

[Shyam G]

Hi Dominique, 

 

We have created a sample in which we have removed Drag and resize functionality for the nodes using NodeConstraints. Could you please check in the below sample?. Still if you face any issues, please share us more details such as modify the below sample. 

 

Code example: 

let nodes = [ 

  { 

    id: "NewIdea", 

    height: 60, 

    offsetX: 300, 

    offsetY: 80, 

    shape: { type: "Flow", shape: "Terminator" }, 

    //remove drag and resize for nodes 

    constraints: NodeConstraints.Default &~(NodeConstraints.Drag | NodeConstraints.Resize), 

  

  },  

] 

 

 

Sample: https://stackblitz.com/edit/react-pbg3so-ccsxam?file=index.js 

 

Regards, 

Shyam G 

[sample]

Is there any possibilities to restrict the drag and resize option in stamp annotation (rejected) 

[Balasubramanian Manikandan]

Hi Dominique, 

You can set NodeConstraints.Select and NodeConstraints.PointerEvents which allows only selection in node and could not perform any interaction in the node. Please find the code example, documentation link and sample below.

Code Snippet:

    constraints: NodeConstraints.Select | NodeConstraints.PointerEvents,

Documentation :

https://ej2.syncfusion.com/react/documentation/diagram/constraints/#node-constraints

Sample :

https://stackblitz.com/edit/react-pbg3so-4hnvk8?file=index.js

Regards,

Balasubramanian M