@CL.Peter wrote:
Hi walter,
When there is a big group contains two group, the attribute-AvoidsNodes of links in these two groups is invaild.The following is my sample code, open it and you will find that there's a link through a node, but obviously I have set AvoidsNodes:
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>AvoidsNodes is invaild</title> <meta name="description" content="An organization chart editor -- edit details and change relationships." /> <!-- Copyright 1998-2017 by Northwoods Software Corporation. --> <meta charset="UTF-8"> <!--<script type="text/javascript" language="javascript" src="../Test/GoJS.js"></script>--> <script src="https://cdnjs.cloudflare.com/ajax/libs/gojs/1.7.28/go-debug.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; // for conciseness in defining templates myDiagram = $(go.Diagram, "myDiagramDiv", // must be the ID or reference to div { "toolManager.hoverDelay": 1, //tip's disappear 1s left initialContentAlignment: go.Spot.Center, "undoManager.isEnabled": true, //can redo/undo "animationManager.isEnabled": false,//NOT ALLOW animation hasHorizontalScrollbar: false, //cancel scrollbar hasVerticalScrollbar: false, //cancel scrollbar allowCopy: false //NOT ALLOW COPY }); function nodeDoubleClick(e, obj) { var clicked = obj.part; if (clicked !== null) { var thisemp = clicked.data; myDiagram.startTransaction("add employee"); var newNodeList = [{ key: 5, group: 99 }]; var newLinkList = [{ from: 1, to: 5}]; myDiagram.model.addNodeDataCollection(newNodeList); myDiagram.model.addLinkDataCollection(newLinkList); myDiagram.commitTransaction("add employee"); } } // define the Node template myDiagram.nodeTemplate = $(go.Node, "Auto", { doubleClick: nodeDoubleClick }, // define the node's outer shape $(go.Shape, "Rectangle", { name: "SHAPE", fill: "white", stroke: null }), ); // end Node // define the Link template myDiagram.linkTemplate = $(go.Link, go.Link.AvoidsNodes, { corner: 5}, $(go.Shape, { strokeWidth: 4, stroke: "#00a4a4" })); // the link shape myDiagram.model = $(go.GraphLinksModel); myDiagram.model.nodeDataArray = [ { key: 1, group: 66 }, { key: 2, group: 66 }, { key: 3, group: 99 }, { key: 66, isGroup: true, group: 88 }, { key: 99, isGroup: true, group: 88 }, { key: 88, isGroup: true }]; myDiagram.model.linkDataArray = [{ from: 1, to: 2 }, { from: 1, to: 3 }]; myDiagram.groupTemplate = $(go.Group, "Auto", { // define the group's internal layout layout: go.GraphObject.make(go.TreeLayout, { arrangement: go.TreeLayout.ArrangementVertical, isRealtime: false, layerSpacing: 100 }, ), // the group begins unexpanded; // upon expansion, a Diagram Listener will generate contents for the group isSubGraphExpanded: true }, go.GraphObject.make(go.Shape, "Rectangle", { fill: null, stroke: "gray", strokeWidth: 2 }), go.GraphObject.make(go.Panel, "Vertical", { defaultAlignment: go.Spot.Left, margin: 30 }, go.GraphObject.make(go.Panel, "Horizontal", { defaultAlignment: go.Spot.Top }, // the SubGraphExpanderButton is a panel that functions as a button to expand or collapse the subGraph go.GraphObject.make("SubGraphExpanderButton"), go.GraphObject.make(go.TextBlock, { font: "Bold 18px Sans-Serif", margin: 4 } ), // create a placeholder to represent the area where the contents of the group are go.GraphObject.make(go.Placeholder, { padding: new go.Margin(10, 30) }) ) )); } </script> </head> <body onload="init()"> <div id="sample"> <div id="myDiagramDiv" style="background-color: #696969; border: solid 1px black; height: 1000px"></div> </div> </body> </html>
Thank you for your time and I look forward to your reply!
Best Regards.
Posts: 1
Participants: 1