//Defines the connector drawing tool
class DrawingTool extends ConnectorDrawingTool {
mouseDown(args) {
super.mouseDown(args);
//get the selectedNode
this.sourceNode = diagramInstance.selectedItems.nodes[0];
//set the drawing object connector
diagramInstance.drawingObject = { type: 'Orthogonal' };
}
mouseMove(args) {
super.mouseMove(args);
}
mouseUp(args) {
super.mouseUp(args);
if (diagramInstance.selectedItems.connectors.length > 0) {
//set connector sourceId
diagramInstance.selectedItems.connectors[0].sourceID = this.sourceNode.id;
//immediate reflection on DOM
diagramInstance.dataBind();
//clear the node selection
diagramInstance.clearSelection();
diagramInstance.drawingObject = null;
}
}
} |
Query |
Response | |
Is it possible to add image user handle. Instead of creating it by path i want to create it by image. |
Yes, you can set an image to the userhandle by setting image source to the handles source property. Please refer to an code example below.
Code example:
let handles = [
{
name: 'rightHandle', pathColor: 'white', backgroundColor: '#7d7d7d', borderColor: 'white',
//set an image source
source: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQy4NjYquM2re_WmvkwjFe-xbaXWj9rukbvv95AKvcoAcZW0DTY-A&s',
visible: true, offset: 0.5, side: 'Right', horizontalAlignment: 'Center', verticalAlignment: 'Center'
},
]; | |
And also how can i handle the click event? |
We can do the actions in the mouseUp event of a userhandle class instead of a click event. Please refer to an code example and sample below.
Code example:
|