Allow selecting shapes with constraints

[Eden Zadikove]

Hi,

I have the following diagram constraints:

const viewConstraints = DiagramConstraints.None | DiagramConstraints.Zoom | DiagramConstraints.ApiUpdate | DiagramConstraints.Tooltip & ~  DiagramConstraints.Default

I set this constraints when the diagram is in "view" mode,

In view mode the user is not allowed to edit the diagram (add shapes, change shape positions and so on ..), for this need the constraints is OK,

but I also want to allow him to select specific shapes in the diagram, and for this need the constraints are not OK.

I hope I was clear,

Thanks in advance,

Eden

[Gowtham Gunashekar]

  

Hi Eden, 

 

Please refer to the following sample for how to switch between the view mode and edit mode. In the sample, we have added three buttons, the first one for view mode, the second one for edit mode and the third one for edit specific node. 

• In the first button, we have set the diagram’s constraints as “None”. In this mode, you only able to view the diagram and none of the interaction will work.
• In the second button, we have set the diagram constraints as “Default” and set all node constraints as ”Default”. In this mode all the node's interaction like resize, rotate, drag and drop etc... will work.
• In the third button, we have set the diagram constraints as “Default” and set the node constraints as “None” for all the nodes except the editable node For editable node, we have set the node constraints as “Default”. So the specific node which has the default node constraints can be editable and remaining all the node are not editable.

 

Sample link: https://stackblitz.com/edit/react-cneynb-jw2kx7 

 

Regards, 

Gowtham 

[Eden Zadikove]

Hi,

First of all- thanks for the answer.

Second- I don't want to edit a specific node, I just want to select it without let the user co change the size and the position.

My goal is to call a function when just specific node is selected.

Thanks in advance,

Eden

[Gowtham Gunashekar]

Hi Eden, 

 

Please refer the following sample for how to enable only the node selection using node constraints and call a function using selection change event for a specific node. In the sample we have only enabled the selection of all the nodes and in the selectionChange event we have called a function when a node which has the id as “programming” is clicked. 

 

Code snippet: 

 

selectionChange={arg => { 

                if ( 

                  arg.state == "Changed" && 

                  arg.newValue.length && 

                  arg.newValue[0].id === "programming" 

                ) { 

// call the required function based on the condition. 

                  this.functionCall(); 

                } 

              }} 

 

Sample link: https://stackblitz.com/edit/react-cneynb-vpnnos 

 

Regards, 

Gowtham