2017-05-14 2 views
0

Erweitern der Dynamic Ports Beispiel, ich habe einen Knoten mit einigen Ports im linken Array erstellt. Jeder Port ist durch ein Modell wie folgt definiert:Ändern go.js portId nach der Erstellung

{id: "port1"} 

im Kontextmenü des Hafens ich lassen den Benutzer umbenennen. Zur Zeit wird zu Testzwecken mit einem Rechtsklick auf einen Port ein Kontextmenü mit einer einzigen Schaltfläche geöffnet: "Umbenennen". Ein Klick auf „Umbenennen“ wird das ID-Feld des Modells ändern zu „foo“:

function(e, obj) { 
    obj.part.data.id = "foo"; 
} 

Das id Feld an die portId Eigenschaft gebunden ist mit:

new go.Binding("portId", "id").makeTwoWay() 

Nun, wenn ich einen Link von erstellen ein weiterer Knoten zu diesem umbenannten Port und beobachten Sie das Modell meines Diagramms mit myDiagram.model.toJson() Ich sehe, dass der Link scheint mit dem corrent Port verbunden sein, aber mit der altenportId.

Was vermisse ich hier?

Dank

Antwort

1

Ja, Sie haben die Verbindungsdaten Verweise auf Ports nicht ändern, so bleiben die Links zu den gleichen Port GraphObjects geroutet werden. Wenn Sie jedoch das gespeicherte Modell geladen haben, sehen Sie, dass die Links jetzt anscheinend mit anderen Objekten verbunden sind, abhängig von den Port-IDs, die jetzt verwendet werden.

Ich schlage vor, dass Sie nach der Änderung der Port-ID, die Sie über die verbundenen Links durchlaufen und die Port-Referenzen aktualisieren. So etwas wie dieses zusätzliche Kontextmenü im Beispiel Dynamische Ports:

makeButton("Rename port", function(e, obj) { var port = obj.part.adornedObject; var node = port.part; var data = port.data; var oldpid = data.portId; var linksinto = new go.List().addAll(node.findLinksInto(oldpid)); var linksoutof = new go.List().addAll(node.findLinksOutOf(oldpid)); myDiagram.startTransaction("portId"); // find a new unique port identifier var newpid = Math.floor(Math.random() * 1000000).toString(); while (node.findPort(newpid) !== node.port) { newpid = Math.floor(Math.random() * 1000000).toString(); } // change port identifier myDiagram.model.setDataProperty(data, "portId", newpid); // change connected link references to ports linksinto.each(function(l) { myDiagram.model.setToPortIdForLinkData(l.data, newpid); }); linksoutof.each(function(l) { myDiagram.model.setFromPortIdForLinkData(l.data, newpid); }); myDiagram.commitTransaction("portId"); }),

Verwandte Themen