|
|
@@ -0,0 +1,541 @@
|
|
|
+function initGo() {
|
|
|
+ if(!document.getElementById("myDiagramDiv")
|
|
|
+ ||!document.getElementById("mySavedModel")
|
|
|
+ ||!document.getElementsByName("highlight")){
|
|
|
+ console.error("缺少元素 myDiagramDiv 或 mySavedModel 或 highlight");
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ var $ = go.GraphObject.make; // for conciseness in defining templates
|
|
|
+
|
|
|
+ myDiagram =
|
|
|
+ $(go.Diagram, "myDiagramDiv", // Diagram refers to its DIV HTML element by id
|
|
|
+ {
|
|
|
+ //maxSelectionCount: 1 ,// 一次只能选择一个元素no more than 1 element can be selected at a time
|
|
|
+ isReadOnly: true,
|
|
|
+
|
|
|
+ "toolManager.mouseWheelBehavior":go.ToolManager.WheelNone//鼠标滚轮事件禁止
|
|
|
+ });
|
|
|
+
|
|
|
+ // 为了简化代码，我们定义了一个函数来创建内容目录按钮To simplify this code we define a function for creating a context menu button:
|
|
|
+ function makeButton(text, action, visiblePredicate) {
|
|
|
+ return $("ContextMenuButton",
|
|
|
+ $(go.TextBlock, text),
|
|
|
+ {click: action},
|
|
|
+ // 如果没有断定，不要被捆绑GraphObject.visible所干扰。don't bother with binding GraphObject.visible if there's no predicate
|
|
|
+ visiblePredicate ? new go.Binding("visible", "", function (o, e) {
|
|
|
+ return o.diagram ? visiblePredicate(o, e) : false;
|
|
|
+ }).ofObject() : {});
|
|
|
+ }
|
|
|
+
|
|
|
+ function nodeInfo(d) { // Tooltip info for a node data object
|
|
|
+ var str = "Node " + d.key + ": " + d.text + "\n";
|
|
|
+ if (d.group)
|
|
|
+ str += "member of " + d.group;
|
|
|
+ else
|
|
|
+ str += "top-level node";
|
|
|
+ return str;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 为节点定义外观与行为Define the appearance and behavior for Nodes:
|
|
|
+
|
|
|
+ // 首先定义节点、连线与组群共用的内容目录First, define the shared context menu for all Nodes, Links, and Groups.
|
|
|
+ // define the node template
|
|
|
+ myDiagram.nodeTemplate =
|
|
|
+ $(go.Node, "Auto",
|
|
|
+ new go.Binding("location").makeTwoWay(),
|
|
|
+ {
|
|
|
+ locationSpot: go.Spot.Center,
|
|
|
+ toEndSegmentLength: 30, fromEndSegmentLength: 30
|
|
|
+ },
|
|
|
+ $(go.Shape, "RoundedRectangle",
|
|
|
+ {
|
|
|
+ name: "OBJSHAPE",
|
|
|
+ fill: "white",
|
|
|
+ //desiredSize: new go.Size(30, 30)
|
|
|
+ portId: "", cursor: "pointer", // 轮廓是端口，而不是整个节点the Shape is the port, not the whole Node
|
|
|
+ // 允许出发和指向此端口的各种链接allow all kinds of links from and to this port
|
|
|
+ fromLinkable: true, fromLinkableSelfNode: true, fromLinkableDuplicates: true,
|
|
|
+ toLinkable: true, toLinkableSelfNode: true, toLinkableDuplicates: true
|
|
|
+ }),
|
|
|
+ $("HyperlinkText",
|
|
|
+ function (node) {
|
|
|
+ return node.data.url;
|
|
|
+ },
|
|
|
+ $(go.Panel, "Auto",
|
|
|
+ $(go.TextBlock,
|
|
|
+ {
|
|
|
+ font: "bold 11pt helvetica, bold arial, sans-serif",
|
|
|
+ editable: true // editing the text automatically updates the model data
|
|
|
+ },
|
|
|
+ new go.Binding("text", "text").makeTwoWay()))), // 标签显示节点数据的文本the label shows the node data's text
|
|
|
+ {
|
|
|
+ toolTip: // 为显示其信息的每个节点定义工具提示define a tooltip for each node that displays its information
|
|
|
+ $("ToolTip",
|
|
|
+ $(go.TextBlock, {margin: 4},
|
|
|
+ new go.Binding("text", "", nodeInfo))
|
|
|
+ )
|
|
|
+ }
|
|
|
+ );
|
|
|
+ function linkInfo(d) { // 链接数据对象的工具提示信息Tooltip info for a link data object
|
|
|
+ return "Link:\nfrom " + d.from + " to " + d.to;
|
|
|
+ }
|
|
|
+
|
|
|
+ // define the link template
|
|
|
+ myDiagram.linkTemplate =
|
|
|
+ $(go.Link,
|
|
|
+ {routing: go.Link.AvoidsNodes,corner: 10 },
|
|
|
+ {
|
|
|
+ selectionAdornmentTemplate:
|
|
|
+ $(go.Adornment,
|
|
|
+ $(go.Shape,
|
|
|
+ {isPanelMain: true, stroke: "dodgerblue", strokeWidth: 3}),
|
|
|
+ $(go.Shape,
|
|
|
+ {toArrow: "Standard", fill: "dodgerblue", stroke: null, scale: 1})
|
|
|
+ ),
|
|
|
+ adjusting: go.Link.Stretch,
|
|
|
+ reshapable: true, relinkableFrom: true, relinkableTo: true,
|
|
|
+ toShortLength: 2,
|
|
|
+ relinkableFrom: true,
|
|
|
+ relinkableTo: true
|
|
|
+ },
|
|
|
+ new go.Binding("points").makeTwoWay(),
|
|
|
+ new go.Binding("curviness"),
|
|
|
+ $(go.Shape, // the link shape
|
|
|
+ {name: "OBJSHAPE"}),
|
|
|
+ $(go.Shape, // the arrowhead
|
|
|
+ {name: "ARWSHAPE", toArrow: "Standard"}),
|
|
|
+ $("HyperlinkText",
|
|
|
+ function (node) {
|
|
|
+ return node.data.url;
|
|
|
+ },
|
|
|
+ $(go.Panel, "Auto",
|
|
|
+ $(go.TextBlock,
|
|
|
+ {
|
|
|
+ font: "bold 11pt helvetica, bold arial, sans-serif",
|
|
|
+ editable: true // editing the text automatically updates the model data
|
|
|
+ },
|
|
|
+ new go.Binding("text", "text").makeTwoWay()))), // 标签显示节点数据的文本the label shows the node data's text
|
|
|
+
|
|
|
+ {
|
|
|
+ toolTip: // define a tooltip for each link that displays its information
|
|
|
+ $("ToolTip",
|
|
|
+ $(go.TextBlock, {margin: 4},
|
|
|
+ new go.Binding("text", "", getInfo))
|
|
|
+ )
|
|
|
+ }
|
|
|
+ );
|
|
|
+
|
|
|
+ // define the group template
|
|
|
+ myDiagram.groupTemplate =
|
|
|
+ $(go.Group, "Vertical",
|
|
|
+ {
|
|
|
+ selectionObjectName: "PANEL", // 选择控制柄围绕形状，而不是标签selection handle goes around shape, not label
|
|
|
+ ungroupable: true, // 启用Ctrl-Shift-G以取消选定组的分组enable Ctrl-Shift-G to ungroup a selected Group
|
|
|
+ selectionAdornmentTemplate: // adornment when a group is selected
|
|
|
+ $(go.Adornment, "Auto",
|
|
|
+ $(go.Shape, "Rectangle",
|
|
|
+ {fill: null, stroke: "dodgerblue", strokeWidth: 3}),
|
|
|
+ $(go.Placeholder)
|
|
|
+ ),
|
|
|
+ toSpot: go.Spot.AllSides, // links coming into groups at any side
|
|
|
+ toEndSegmentLength: 30, fromEndSegmentLength: 30
|
|
|
+ },
|
|
|
+ $(go.Panel, "Auto",
|
|
|
+ $(go.Shape, "Rectangle",
|
|
|
+ {
|
|
|
+ name: "OBJSHAPE",
|
|
|
+ parameter1: 14,
|
|
|
+ fill: "rgba(255,0,0,0.10)",
|
|
|
+ // 允许从和到此端口的各种链接allow all kinds of links from and to this port
|
|
|
+ portId: "", cursor: "pointer", // 轮廓是端口，而不是整个节点the Shape is the port, not the whole Node
|
|
|
+ fromLinkable: true, fromLinkableSelfNode: true, fromLinkableDuplicates: true,
|
|
|
+ toLinkable: true, toLinkableSelfNode: true, toLinkableDuplicates: true
|
|
|
+ },
|
|
|
+ new go.Binding("desiredSize", "ds")),
|
|
|
+ $(go.Placeholder,
|
|
|
+ {padding: 16, margin: 10, background: "transparent"}) // 表示成员所在的位置represents where the members are)
|
|
|
+ ),
|
|
|
+ $(go.TextBlock,
|
|
|
+ {
|
|
|
+ name: "GROUPTEXT",
|
|
|
+ alignment: go.Spot.TopLeft,
|
|
|
+ alignmentFocus: new go.Spot(0, 0, -4, -4),
|
|
|
+ font: "Bold 10pt Sans-Serif",
|
|
|
+ isMultiline: false, // 不允许在文本中使用换行符don't allow newlines in text
|
|
|
+ editable: true // 允许用户进行就地编辑allow in-place editing by user
|
|
|
+ },
|
|
|
+ new go.Binding("text", "text")),
|
|
|
+ {
|
|
|
+ toolTip: // define a tooltip for each group that displays its information
|
|
|
+ $("ToolTip",
|
|
|
+ $(go.TextBlock, {margin: 4},
|
|
|
+ new go.Binding("text", "", getInfo))
|
|
|
+ )
|
|
|
+ }
|
|
|
+ );
|
|
|
+
|
|
|
+ // add nodes, including groups, and links to the model
|
|
|
+
|
|
|
+ // whenever selection changes, run updateHighlights
|
|
|
+ myDiagram.addDiagramListener("ChangedSelection",
|
|
|
+ function () {
|
|
|
+ updateHighlights(getRadioButton());
|
|
|
+ });
|
|
|
+
|
|
|
+ myDiagram.select(myDiagram.findNodeForKey('A'));
|
|
|
+ load();
|
|
|
+}
|
|
|
+function load() {
|
|
|
+ myDiagram.model = go.Model.fromJson(document.getElementById("mySavedModel").value);
|
|
|
+}
|
|
|
+// This highlights all graph objects that should be highlighted
|
|
|
+// whenever a radio button is checked or selection changes.
|
|
|
+// Parameter e is the checked radio button.
|
|
|
+function updateHighlights(e) {
|
|
|
+ // Set highlight to 0 for everything before updating
|
|
|
+ myDiagram.nodes.each(function (node) {
|
|
|
+ node.highlight = 0;
|
|
|
+ });
|
|
|
+ myDiagram.links.each(function (link) {
|
|
|
+ link.highlight = 0;
|
|
|
+ });
|
|
|
+
|
|
|
+ // Get the selected GraphObject and run the appropriate method
|
|
|
+ var sel = myDiagram.selection.first();
|
|
|
+ if (sel !== null) {
|
|
|
+ switch (e.id) {
|
|
|
+ case "linksIn":
|
|
|
+ linksTo(sel, 1);
|
|
|
+ break;
|
|
|
+ case "linksOut":
|
|
|
+ linksFrom(sel, 1);
|
|
|
+ break;
|
|
|
+ case "linksAll":
|
|
|
+ linksAll(sel, 1);
|
|
|
+ break;
|
|
|
+ case "nodesIn":
|
|
|
+ nodesTo(sel, 1);
|
|
|
+ break;
|
|
|
+ case "nodesOut":
|
|
|
+ nodesFrom(sel, 1);
|
|
|
+ break;
|
|
|
+ case "nodesConnect":
|
|
|
+ nodesConnect(sel, 1);
|
|
|
+ break;
|
|
|
+ case "nodesReach":
|
|
|
+ nodesReach(sel, 1);
|
|
|
+ break;
|
|
|
+ case "group":
|
|
|
+ containing(sel, 1);
|
|
|
+ break;
|
|
|
+ case "groupsAll":
|
|
|
+ containingAll(sel, 1);
|
|
|
+ break;
|
|
|
+ case "nodesMember":
|
|
|
+ childNodes(sel, 1);
|
|
|
+ break;
|
|
|
+ case "nodesMembersAll":
|
|
|
+ allMemberNodes(sel, 1);
|
|
|
+ break;
|
|
|
+ case "linksMember":
|
|
|
+ childLinks(sel, 1);
|
|
|
+ break;
|
|
|
+ case "linksMembersAll":
|
|
|
+ allMemberLinks(sel, 1);
|
|
|
+ break;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // Give everything the appropriate highlighting ( color and width of stroke )
|
|
|
+ // nodes, including groups
|
|
|
+ myDiagram.nodes.each(function (node) {
|
|
|
+ var shp = node.findObject("OBJSHAPE");
|
|
|
+ var grp = node.findObject("GROUPTEXT");
|
|
|
+ var hl = node.highlight;
|
|
|
+ highlight(shp, grp, hl);
|
|
|
+ });
|
|
|
+ // links
|
|
|
+ myDiagram.links.each(function (link) {
|
|
|
+ var hl = link.highlight;
|
|
|
+ var shp = link.findObject("OBJSHAPE");
|
|
|
+ var arw = link.findObject("ARWSHAPE");
|
|
|
+ highlight(shp, arw, hl);
|
|
|
+ });
|
|
|
+}
|
|
|
+
|
|
|
+// Functions for highlighting, called by updateHighlights.
|
|
|
+// x in each case is the selected object or the object being treated as such.
|
|
|
+// Some have return values for use by each other or for tooltips.
|
|
|
+
|
|
|
+// if the link connects to this node, highlight it
|
|
|
+function linksTo(x, i) {
|
|
|
+ if (x instanceof go.Node) {
|
|
|
+ x.findLinksInto().each(function (link) {
|
|
|
+ link.highlight = i;
|
|
|
+ });
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+// if the link comes from this node, highlight it
|
|
|
+function linksFrom(x, i) {
|
|
|
+ if (x instanceof go.Node) {
|
|
|
+ x.findLinksOutOf().each(function (link) {
|
|
|
+ link.highlight = i;
|
|
|
+ });
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+// highlight all links connected to this node
|
|
|
+function linksAll(x, i) {
|
|
|
+ if (x instanceof go.Node) {
|
|
|
+ x.linksConnected.each(function (link) {
|
|
|
+ link.highlight = i;
|
|
|
+ });
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+// If selected object is a link, highlight its fromNode.
|
|
|
+// Otherwise highlight the fromNode of each link coming into the selected node.
|
|
|
+// Return a List of the keys of the nodes.
|
|
|
+function nodesTo(x, i) {
|
|
|
+ var nodesToList = new go.List(/*"string"*/);
|
|
|
+ if (x instanceof go.Link) {
|
|
|
+ x.fromNode.highlight = i;
|
|
|
+ nodesToList.add(x.data.from);
|
|
|
+ } else {
|
|
|
+ x.findNodesInto().each(function (node) {
|
|
|
+ node.highlight = i;
|
|
|
+ nodesToList.add(node.data.key);
|
|
|
+ });
|
|
|
+ }
|
|
|
+ return nodesToList;
|
|
|
+}
|
|
|
+
|
|
|
+// same as nodesTo, but 'from' instead of 'to'
|
|
|
+function nodesFrom(x, i) {
|
|
|
+ var nodesFromList = new go.List(/*"string"*/);
|
|
|
+ if (x instanceof go.Link) {
|
|
|
+ x.toNode.highlight = i;
|
|
|
+ nodesFromList.add(x.data.to);
|
|
|
+ } else {
|
|
|
+ x.findNodesOutOf().each(function (node) {
|
|
|
+ node.highlight = i;
|
|
|
+ nodesFromList.add(node.data.key);
|
|
|
+ });
|
|
|
+ }
|
|
|
+ return nodesFromList;
|
|
|
+}
|
|
|
+
|
|
|
+// If x is a link, highlight its toNode, or if it is a node, the node(s) it links to,
|
|
|
+// and then call nodesReach on the highlighted node(s), with the next color.
|
|
|
+// Do not highlight any node that has already been highlit with a color
|
|
|
+// indicating a closer relationship to the original node.
|
|
|
+function nodesReach(x, i) {
|
|
|
+ if (x instanceof go.Link) {
|
|
|
+ x.toNode.highlight = i;
|
|
|
+ nodesReach(x.toNode, i + 1);
|
|
|
+ } else {
|
|
|
+ x.findNodesOutOf().each(function (node) {
|
|
|
+ if (node.highlight === 0 || node.highlight > i) {
|
|
|
+ node.highlight = i;
|
|
|
+ nodesReach(node, i + 1);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+// highlight all nodes linked to this one
|
|
|
+function nodesConnect(x, i) {
|
|
|
+ if (x instanceof go.Link) {
|
|
|
+ x.toNode.highlight = i;
|
|
|
+ x.fromNode.highlight = i;
|
|
|
+ } else {
|
|
|
+ x.findNodesConnected().each(function (node) {
|
|
|
+ node.highlight = i;
|
|
|
+ });
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+// highlights the group containing this object, specific method for links
|
|
|
+// returns the containing group of x
|
|
|
+function containing(x, i) {
|
|
|
+ var container = x.containingGroup;
|
|
|
+ if (container !== null)
|
|
|
+ container.highlight = i;
|
|
|
+ return container;
|
|
|
+}
|
|
|
+
|
|
|
+// container is the group that contains this node and
|
|
|
+// will be the parameter x for the next call of this function.
|
|
|
+// Calling containing(x,i) highlights each group the appropriate color
|
|
|
+function containingAll(x, i) {
|
|
|
+ containing(x, i);
|
|
|
+ var container = x.containingGroup;
|
|
|
+ if (container !== null)
|
|
|
+ containingAll(container, i + 1);
|
|
|
+}
|
|
|
+
|
|
|
+// if the Node"s containingGroup is x, highlight it
|
|
|
+function childNodes(x, i) {
|
|
|
+ var childLst = new go.List(/*"string"*/);
|
|
|
+ if (x instanceof go.Group) {
|
|
|
+ myDiagram.nodes.each(function (node) {
|
|
|
+ if (node.containingGroup === x) {
|
|
|
+ node.highlight = i;
|
|
|
+ childLst.add(node.data.key);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ return childLst;
|
|
|
+}
|
|
|
+
|
|
|
+// same as childNodes, then run allMemberNodes for each child Group with the next color
|
|
|
+function allMemberNodes(x, i) {
|
|
|
+ if (x instanceof go.Group) {
|
|
|
+ myDiagram.nodes.each(function (node) {
|
|
|
+ if (node.containingGroup === x) {
|
|
|
+ node.highlight = i;
|
|
|
+ allMemberNodes(node, i + 1);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+// if the link"s containing Group is x, highlight it
|
|
|
+function childLinks(x, i) {
|
|
|
+ var childLst = new go.List(/*go.Link*/);
|
|
|
+ myDiagram.links.each(function (link) {
|
|
|
+ if (link.containingGroup === x) {
|
|
|
+ link.highlight = i;
|
|
|
+ childLst.add(link);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ return childLst;
|
|
|
+}
|
|
|
+
|
|
|
+// same as childLinks, then run allMemberLinks for each child Group with the next color
|
|
|
+function allMemberLinks(x, i) {
|
|
|
+ childLinks(x, i);
|
|
|
+ myDiagram.nodes.each(function (node) {
|
|
|
+ if (node instanceof go.Group && node.containingGroup === x) {
|
|
|
+ allMemberLinks(node, i + 1);
|
|
|
+ }
|
|
|
+ });
|
|
|
+}
|
|
|
+
|
|
|
+// perform the actual highlighting
|
|
|
+function highlight(shp, obj2, hl) {
|
|
|
+ var color;
|
|
|
+ var width = 3;
|
|
|
+ if (hl === 0) {
|
|
|
+ color = "black";
|
|
|
+ width = 1;
|
|
|
+ } else if (hl === 1) {
|
|
|
+ color = "blue";
|
|
|
+ } else if (hl === 2) {
|
|
|
+ color = "green";
|
|
|
+ } else if (hl === 3) {
|
|
|
+ color = "orange";
|
|
|
+ } else if (hl === 4) {
|
|
|
+ color = "red";
|
|
|
+ } else {
|
|
|
+ color = "purple";
|
|
|
+ }
|
|
|
+ shp.stroke = color;
|
|
|
+ shp.strokeWidth = width;
|
|
|
+ if (obj2 !== null) {
|
|
|
+ obj2.stroke = color;
|
|
|
+ obj2.fill = color;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+// return the selected radio button in "highlight"
|
|
|
+function getRadioButton() {
|
|
|
+ var radio = document.getElementsByName("highlight");
|
|
|
+ for (var i = 0; i < radio.length; i++)
|
|
|
+ if (radio[i].checked)
|
|
|
+ return radio[i];
|
|
|
+}
|
|
|
+
|
|
|
+// returns the text for a tooltip, param obj is the text itself
|
|
|
+function getInfo(model, obj) {
|
|
|
+ var x = obj.panel.adornedPart; // the object that the mouse is over
|
|
|
+ var text = ""; // what will be displayed
|
|
|
+ if (x instanceof go.Node) {
|
|
|
+ if (x instanceof go.Group)
|
|
|
+ text += "Group: ";
|
|
|
+ else
|
|
|
+ text += "Node: ";
|
|
|
+ text += x.data.key;
|
|
|
+ var toLst = nodesTo(x, 0); // display names of nodes going into this node
|
|
|
+ if (toLst.count > 0) {
|
|
|
+ toLst.sort(function (a, b) {
|
|
|
+ return a < b ? -1 : 1
|
|
|
+ });
|
|
|
+ text += "\nNodes into: ";
|
|
|
+ toLst.each(function (key) {
|
|
|
+ if (key !== text.substring(text.length - 3, text.length - 2)) {
|
|
|
+ text += key + ", ";
|
|
|
+ }
|
|
|
+ });
|
|
|
+ text = text.substring(0, text.length - 2);
|
|
|
+ }
|
|
|
+ var frLst = nodesFrom(x, 0); // display names of nodes coming out of this node
|
|
|
+ if (frLst.count > 0) {
|
|
|
+ frLst.sort(function (a, b) {
|
|
|
+ return a < b ? -1 : 1
|
|
|
+ });
|
|
|
+ text += "\nNodes out of: ";
|
|
|
+ frLst.each(function (key) {
|
|
|
+ if (key !== text.substring(text.length - 3, text.length - 2)) {
|
|
|
+ text += key + ", ";
|
|
|
+ }
|
|
|
+ });
|
|
|
+ text = text.substring(0, text.length - 2);
|
|
|
+ }
|
|
|
+ var grpC = containing(x, 0); // if the node is in a group, display its name
|
|
|
+ if (grpC !== null)
|
|
|
+ text += "\nContaining SubGraph: " + grpC.data.key;
|
|
|
+ if (x instanceof go.Group) {
|
|
|
+ // if it"s a group, also display nodes and links contained in it
|
|
|
+ text += "\nMember nodes: ";
|
|
|
+ var children = childNodes(x, 0);
|
|
|
+ children.sort(function (a, b) {
|
|
|
+ return a < b ? -1 : 1
|
|
|
+ });
|
|
|
+ children.each(function (key) {
|
|
|
+ if (key !== text.substring(text.length - 3, text.length - 2)) {
|
|
|
+ text += key + ", ";
|
|
|
+ }
|
|
|
+ });
|
|
|
+ text = text.substring(0, text.length - 2);
|
|
|
+
|
|
|
+ var linkChildren = childLinks(x, 0);
|
|
|
+ if (linkChildren.count > 0) {
|
|
|
+ text += "\nMember links: ";
|
|
|
+ var linkStrings = new go.List(/*"string"*/);
|
|
|
+ linkChildren.each(function (link) {
|
|
|
+ linkStrings.add(link.data.from + " --> " + link.data.to);
|
|
|
+ });
|
|
|
+ linkStrings.sort(function (a, b) {
|
|
|
+ return a < b ? -1 : 1
|
|
|
+ });
|
|
|
+ linkStrings.each(function (str) {
|
|
|
+ text += str + ", ";
|
|
|
+ });
|
|
|
+ text = text.substring(0, text.length - 2);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ } else if (x instanceof go.Link) {
|
|
|
+ // if it"s a link, display its to and from nodes
|
|
|
+ text += "Link: " + x.data.from + " --> " + x.data.to +
|
|
|
+ "\nNode To: " + x.data.to + "\nNode From: " + x.data.from;
|
|
|
+ var grp = containing(x, 0); // and containing group, if it has one
|
|
|
+ if (grp !== null)
|
|
|
+ text += "\nContaining SubGraph: " + grp.data.key;
|
|
|
+ }
|
|
|
+ return text;
|
|
|
+}
|
|
|
+
|
|
|
+window.addEventListener('DOMContentLoaded', initGo);
|
bhikkhu-kosalla-china