My Project is similar to Dynamic Ports.This Sample you have done is actually a good stuff.Loving it.Need some guidance so that I could finish of my client’s requirements.
Double clicking creates a node and each node is provisioned to accept as many ports we add(according to our need).This node concept is linked with panels for creating ports.
My requirement is that once a node is created and say a port is added to it( irrespective of number) and a link goes from that port(fromLinkable:true) then all the ports in that node must act as a source(irrespective of number of ports).The same is valid for accepting Links to.
In a Nutshell:
1.Once a source Node(including all the ports) always a source.
2.Once a Destination Node (including all the ports) always a destination.
Help at the earliest is appreciated as I need to deliver it asap.
You can either implement a “LinkDrawn” DiagramEvent listener or a Node.linkConnected event handler to reset the GraphObject.fromLinkable and .toLinkable properties on all of the Node.ports.
Thanks for the reply…Could you just show an working example and how that could be combined with dynamic ports sample …that would sound better…i’m totally new to this area…
For this task you do not need to walk the visual tree of panels in the node. Just iterate over the Node.ports collection and set those two properties on each port. http://gojs.net/latest/intro/collections.html
Thanks for the motivation.I actually triesd with LinkDrawn Concept and getting it fine.
Now there is a small addition which completes my requirement.
myDiagram.addDiagramListener(“LinkDrawn”,function(e){
var ino = e.subject.data.from;
from_array.push(ino);
var out = e.subject.data.to;
to_array.push(out); //console.log(from_array); //console.log(to_array);
for (var i=0; i< from_array.length;i++){
for(var j=0;j<to_array.length;j++){
if(from_array[i] == to_array[j]){
common_array.push(from_array[i]);
from_array.pop();
to_array.pop();
}
}
}
if (common_array.length != 0){
alert(“Invalid Connection”);
console.log(“here”); Here I need to Incorporate the Undo operation
the Bold portion shows the place where undo needs to be implemented.
Undo must be done automatically by calling the undo function.How exactly it could be done is puzzled.
Tried myDiagram.commandHandler.undo() but not working.
The example briefs with Undo button and makebutton functionalities with inbuilt stuff.
Please guide in calling the Undo function there.
That completes my task actually.
Let’s start over, please, and try to understand your basic requirenents before we assume what should be the implementation.
Did you want to prevent the user from drawing a new link that connects a node with itself?
If that is the case, that is the default behavior already, and you do not need to implement anything.
The connection shown must be restricted.I have did the alert box with the code that I have pasted above.On clicking Ok in the alert box the link is established
This established link can be removed if undo is called.So inorder to undo this connected link I need to call the undo operation.
How Undo function can be called is actually my final puzzle.
myDiagram.addDiagramListener(“LinkDrawn”,function(e){
var ino = e.subject.data.from;
from_array.push(ino);
var out = e.subject.data.to;
to_array.push(out);
for (var i=0; i< from_array.length;i++){
for(var j=0;j<to_array.length;j++){
if(from_array[i] == to_array[j]){
common_array.push(from_array[i]);
from_array.pop();
to_array.pop();
}
}
}
if (common_array.length != 0){
alert(“Invalid Connection”); Here I need to Incorporate the Undo operation
What you have written in a “LinkDrawn” DiagramEvent listener doesn’t make sense to me, other than as a very inefficient way to see if Link.fromNode === Link.toNode for the newly drawn Link. I suppose the from_array and to_array global variables might contain all link connections, in which case you are looking to see if there are any nodes with both a link coming in and a link going out. But it is a bad idea to keep that information copied separately in two Arrays when you already have the original information in the GraphLinksModel.linkDataArray.
In general it is much better for users if you prevent them from making mistakes, than it is to allow them to make a mistake and then have to clean up. What you seem to be doing is error-prone and annoying to users.
First Go: Guide me on how to trigger the undo function automatically without button click.
Second Go:Once a link goes from a node for the first time(be it top or left or right or bottom ports), then that particular node(whatever be the ports) should not accept any link after that..similarly,if a link comes to a node(be it top or left or right or bottom ports) for the first time,then that particular node(whatever be the ports) must not be able to send any connections from it after that.
Always send or Always accept after first link is established…
First: just delete the newly added Link by calling Diagram.remove: e.diagram.remove(e.subject). Or you can rollback the transaction by: e.diagram.currentTool.transactionResult = null. But again I’m cautioning you that this really isn’t the best way.
Second: OK, now I’m starting to understand what you want to do. There is still some ambiguity in my mind, but it seems that what you really want to do is add this linkValidation predicate to your Node template(s):
linkValidation: function(from, fp, to, tp, link) {
if (from !== null && from.findLinksInto().count > 0) return false;
if (to !== null && to.findLinksOutOf().count > 0) return false;
return true;
}
No need for any “LinkDrawn” DiagramEvent listener.
