gojs

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Links to Links</title> <meta name="description" content="Links can connect with Links by using label Nodes on Links." /> <meta name="viewport" content="width=device-width, initial-scale=1">  <script src="../release/go.js"></script> <script src="../assets/js/goSamples.js"></script>  <script id="code"> function init() { if (window.goSamples) goSamples(); // init for these samples -- you don't need to call this var $ = go.GraphObject.make; myDiagram = $(go.Diagram, "myDiagramDiv", // create a Diagram for the DIV HTML element { "LinkDrawn": maybeChangeLinkCategory, // these two DiagramEvents call a "LinkRelinked": maybeChangeLinkCategory, // function that is defined below "undoManager.isEnabled": true }); // when the document is modified, add a "*" to the title and enable the "Save" button myDiagram.addDiagramListener("Modified", function(e) { var button = document.getElementById("SaveButton"); if (button) button.disabled = !myDiagram.isModified; var idx = document.title.indexOf("*"); if (myDiagram.isModified) { if (idx < 0) document.title += "*"; } else { if (idx >= 0) document.title = document.title.substr(0, idx); } }); // the regular node template, which supports user-drawn links from the main Shape myDiagram.nodeTemplate = $("Node", "Auto", { locationSpot: go.Spot.Center, layerName: "Background" }, // always have regular nodes behind Links new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify), $("Shape", "RoundedRectangle", { fill: "white", stroke: null, portId: "", fromLinkable: true, toLinkable: true, cursor: "pointer" }, new go.Binding("fill", "color")), $("TextBlock", { margin: 8 }, // make some extra space for the shape around the text new go.Binding("text", "key")) // the label shows the node data's key ); // This is the template for a label node on a link: just an Ellipse. // This node supports user-drawn links to and from the label node. myDiagram.nodeTemplateMap.add("LinkLabel", $("Node", { selectable: false, avoidable: false, layerName: "Foreground" }, // always have link label nodes in front of Links $("Shape", "Ellipse", { width: 5, height: 5, stroke: null, portId: "", fromLinkable: true, toLinkable: true, cursor: "pointer" }) )); // the regular link template, a straight blue arrow myDiagram.linkTemplate = $("Link", { relinkableFrom: true, relinkableTo: true, toShortLength: 2 }, $("Shape", { stroke: "#2E68CC", strokeWidth: 2 }), $("Shape", { fill: "#2E68CC", stroke: null, toArrow: "Standard" }) ); // This template shows links connecting with label nodes as green and arrow-less. myDiagram.linkTemplateMap.add("linkToLink", $("Link", { relinkableFrom: true, relinkableTo: true }, $("Shape", { stroke: "#2D9945", strokeWidth: 2 }) )); // GraphLinksModel support for link label nodes requires specifying two properties. myDiagram.model = $(go.GraphLinksModel, { linkLabelKeysProperty: "labelKeys" }); // Whenever a new Link is drawng by the LinkingTool, it also adds a node data object // that acts as the label node for the link, to allow links to be drawn to/from the link. myDiagram.toolManager.linkingTool.archetypeLabelNodeData = { category: "LinkLabel" }; // this DiagramEvent handler is called during the linking or relinking transactions function maybeChangeLinkCategory(e) { var link = e.subject; var linktolink = (link.fromNode.isLinkLabel || link.toNode.isLinkLabel); e.diagram.model.setCategoryForLinkData(link.data, (linktolink ? "linkToLink" : "")); } load(); } // Show the diagram's model in JSON format function save() { document.getElementById("mySavedModel").value = myDiagram.model.toJson(); myDiagram.isModified = false; } function load() { myDiagram.model = go.Model.fromJson(document.getElementById("mySavedModel").value); } </script> </head> <body onload="init()"> <div id="sample"> <div id="myDiagramDiv" style="border: solid 1px black; width:100%; height:400px;"></div> <p> This demonstrates the ability for a <a>Link</a> to appear to connect with another Link. Regular links are blue. Link-connecting links are green. Try moving a node around to see how the links adapt. Initially the "Alpha" node connects with the link between Gamma and Delta. There is also a link between the two horizontal links. </p> <p> This effect is achieved by using "label nodes" that belong to links. Such "label nodes" are real <a>Node</a>s that are referenced from their owning <a>Link</a>. This sample customizes the "Link Label" Node template to allow the user to draw new links to/from such label nodes. </p> <p> Newly drawn links automatically get a label node by the <a>LinkingTool</a> because this sample initializes the <a>LinkingTool.archetypeLabelNodeData</a> property of the <a>ToolManager.linkingTool</a>. The category (i.e. template) of each link is determined by what kinds of nodes the link is connected with. </p> <div> <div> <button id="SaveButton" onclick="save()">Save</button> <button onclick="load()">Load</button> Diagram.model saved in JSON format:<br /> </div> <textarea id="mySavedModel" style="width:100%;height:400px"> { "class": "go.GraphLinksModel", "linkLabelKeysProperty": "labelKeys", "nodeDataArray": [ {"key":"Alpha", "color":"lightblue", "loc":"29 14"}, {"key":"Beta", "color":"orange", "loc":"129 14"}, {"key":"Gamma", "color":"lightgreen", "loc":"29 106"}, {"key":"Delta", "color":"pink", "loc":"129 106"}, {"key":"A-B", "category":"LinkLabel" }, {"key":"G-D", "category":"LinkLabel" }, {"key":"A-G", "category":"LinkLabel" }, {"key":"A-G-D", "category":"LinkLabel" }, {"key":"A-B-G-D", "category":"LinkLabel" } ], "linkDataArray": [ {"from":"Alpha", "to":"Beta", "labelKeys":[ "A-B" ]}, {"from":"Gamma", "to":"Delta", "labelKeys":[ "G-D" ]}, {"from":"Alpha", "to":"Gamma", "labelKeys":[ "A-G" ]}, {"from":"Alpha", "to":"G-D", "labelKeys":[ "A-G-D" ], "category":"linkToLink"}, {"from":"A-B", "to":"G-D", "labelKeys":[ "A-B-G-D" ], "category":"linkToLink"} ]} </textarea> </div> </div> </body> </html>