How to custom event dragging to change coordinate value

Question

Hi Admin, i have a question. By default, diagram displays a tooltip to provide the size, position, and angle related information while dragging, resizing, and rotating. But i want to custom event dragging to change coordinate value. Hope to receiver your support soon.

Aravind Ravi · Answer

Hi PhuND,

On analyzing the provided query we suspect that you want the custom tooltip to change the co-ordinate value to other value, while dragging the node. In the diagram we have support to show the custom tooltip using the SetToolTipTemplate method. In the selectedItems set the tooltip template for the node. So that while you drag the node, instead of showing the coordinates value it shows the custom tooltip value. In the SetToolTipTemplate method you can able to pass the string or HTML element. Please refer to the below code snippet and sample

<DiagramComponent

id="diagram"

ref={(diagram) => (diagramInstance = diagram)}

width={'100%'}

height={'645px'}

nodes={sdlc}

connectors={connections}

snapSettings={{ constraints: SnapConstraints.None }}

selectedItems={{ setTooltipTemplate: setTooltipTemplate }}

>

</DiagramComponent>

function setTooltipTemplate() {

let content = 'Custom Template';

return content;

}

Sample: https://stackblitz.com/edit/react-j44yhz