GoJS/samples/linksToLinks.html at master · james1990/GoJS · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Links to Links</title>
<meta name="description" content="Links can connect with Links by using label Nodes on Links." />
<!-- Copyright 1998-2017 by Northwoods Software Corporation. -->
<meta charset="UTF-8">
<script src="../release/go.js"></script>
<script src="../assets/js/goSamples.js"></script>  <!-- this is only for the GoJS Samples framework -->
<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
        {
          initialContentAlignment: go.Spot.Center,
          "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>