How to hide the dotted selection rectangle around the selected node

[Lakshminarayanan]

If I select any node in the Syncfusion diagram, the rectangular outline with dots is shown. How can I remove those dots in the diagram?

Attachment: syncfusiondiagramtest_35921a9b.rar

[Vivisa Ganesan]

Hi,

To hide all the dots in the selector, you can remove the ResizeAll constraint from the SelectorConstraints. Please refer the below code-snippet and sample:

Code-snippet:

  selectedItems: {

    constraints:

      ej.diagrams.SelectorConstraints.All &

      ~ej.diagrams.SelectorConstraints.ResizeAll,

  },

UG: https://ej2.syncfusion.com/javascript/documentation/diagram/constraints#selector-constraints

Sample:

https://stackblitz.com/edit/k4buij-uqzqgm?file=index.html,index.js

Regards,

Vivisa

[Lakshminarayanan]

I need to change the shape of the node to 'Decision.' How can I achieve this?

[Vivisa Ganesan]

Hi,

We already have a knowledge base article on how to change the shape dynamically. Refer to the below knowledge base and user guide.

UG:

https://ej2.syncfusion.com/javascript/documentation/diagram/shapes#flow-shapes

KB:

https://support.syncfusion.com/kb/article/12644/how-to-change-node-and-connector-shape-of-the-javascript-diagram-dynamically

Regards,

Vivisa

[Lakshminarayanan]

Hi,

thanks for you solution.

If I hold down the left mouse button and drag the page, it shows the pink color dot drag, which I don't want to see. How can I fix this?


Regards 
Lakshmi Narayanan D S

[Vivisa Ganesan]

Hi,

To remove the selector or dotted lines while dragging on the diagram empty page, you should enable zoom pan along with SingleSelect or MultipleSelect in the Diagram tool property which will allow you to pan the diagram while clicking on the empty page. Please refer to the code example and sample below.

Code-snippet:

tool:

    ej.diagrams.DiagramTools.ZoomPan | ej.diagrams.DiagramTools.SingleSelect,

Sample:

https://stackblitz.com/edit/k4buij-sakwxu?file=index.html,index.js

Regards,

Vivisa

[Lakshminarayanan]

Hi,

If I select the note and click the delete button, it will be deleted. How can I prevent it from being deleted, even if I click the delete button?



Regards
lakshminarayanan D S

[Vivisa Ganesan]

Hi,

We already have a KB to restrict the deletion of diagram elements using the delete key. Refer the below KB.

KB link:

https://support.syncfusion.com/kb/article/14779/how-to-prevent-deletion-of-node-or-connector-in-javascript-diagram-using-commandmanager

Sample:

https://stackblitz.com/edit/ftuln3-ucwokk?file=index.js,index.html

Regards,

Vivisa