I’m new to this tool. As part of the evaluation, I’m trying achieve below scenario.
I have created a palette(in fact used the example that is provided).
Basically whenever the user connects two nodes, I want to open a dialog and capture some information and after the user input, set the link label and few additional attributes on the link.
I tried calling a JS method on mouseDrop event at tool template level, could not succeeded.
Used Custom linking tool method and tried to catch the event, was able to catch the event but did not find a way to set the information back on the link at this time.
Below is my code of custom linking tool:
CustomLinkingTool.prototype.doMouseUp = function() {
if (this.isActive && this.findTargetPort(this.isForwards) === null) {
alert(“No link created”);
this.doCancel();
} else { // TODO: Need to figure out a way to get the source node attributes and current link attributes on relink.
var confirmMsg = window.prompt(“Please enter the label”,"");
console.log(confirmMsg); // TODO: need to set the message back on to the link node
go.LinkingTool.prototype.doMouseUp.call(this);
}
};
I have also tried by adding a listener on diagram to see if i can catch this information with below code, but did not work
diagram.addDiagramListener(“LinkDrawn”, function(e) {
console.log(e);
});
This is a simple case where I’m just trying to see if I can set just label. I will also need to some more complex data on the link(may be an xml or a JS object). Any help to address this issue will be appreciated.
Also, please let me know if I have access to source node attributes and link previous attributes at this level.
Do you have a data Binding of the TextBlock.text property to some property on your link data object?
If so, assuming that link data property is named “text”, to open a dialog for entering label text you could do something like:
myDiagram.addDiagramListener("LinkDrawn", function(e) {
var link = e.subject;
myDiagram.model.setDataProperty(link.data, "text", prompt("Enter label text:", "label"));
});
Alternatively, I suggest starting in-place editing of the text label, assuming you have set TextBlock.editable to true and you have a TwoWay Binding on the “text” property:
myDiagram.addDiagramListener("LinkDrawn", function(e) {
myDiagram.commandHandler.editTextBlock();
});
By the way, if you use GraphObject.make to initialize your Diagram, you could do something like:
myDiagram =
$(go.Diagram, "myDiagramDiv", // must name or refer to the DIV HTML element
{
. . . ,
"LinkDrawn": function(e) { e.diagram.commandHandler.editTextBlock(); },
. . .
});
CustomLinkingTool.prototype.doMouseUp = function() {
if (this.isActive
&& this.findTargetPort(this.isForwards) === null) {
alert(“No link created”);
this.doCancel();
} else {
var confirmMsg = window.prompt(“Please Enter the condition…”,""); this.archetypeLinkData = {
‘text’ : confirmMsg // Similar to this can set as many attributes as I want.
};
console.log(this);
go.LinkingTool.prototype.doMouseUp.call(this) ;
}
};
The reason I’m not making the label as editable because, I want to open a dialog which will capture the conditions on multiple attributes. After the condition defined, I should be able to capture the information in multiple parts and set it on the node(converted string as Label text and the condition in form of xml or a JSON onto a separate attribute on the link);
Awesome, figured out about how to retrieve the source node data with the help of your first input Walter,
Thank you again about that.
below is the way that I achieved, myDiagram.model.findNodeDataForKey(link.data.from)