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.
