UNPKG

gojs/extensionsJSM/LinkLabelDragging.html

Version:

1<!DOCTYPE html>
2<html lang="en">
3<head>
4<meta charset="utf-8"/>
5<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, viewport-fit=cover"/>
6<meta name="description" content="TypeScript: Allow the user to shift link labels; useful when the user wants to adjust the position of the label relative to the link path to avoid overlapping the link path or any nodes."/> 
7<link rel="stylesheet" href="../assets/css/style.css"/> 
8<!-- Copyright 1998-2021 by Northwoods Software Corporation. -->
9<title>State Chart with Draggable Link Labels</title>
10</head>
11
12<body>
<!-- This top nav is not part of the sample code -->
<nav id="navTop" class="w-full z-30 top-0 text-white bg-nwoods-primary">
  <div class="w-full container max-w-screen-lg mx-auto flex flex-wrap sm:flex-nowrap items-center justify-between mt-0 py-2">
    <div class="md:pl-4">
      <a class="text-white hover:text-white no-underline hover:no-underline
      font-bold text-2xl lg:text-4xl rounded-lg hover:bg-nwoods-secondary " href="../">
        <h1 class="mb-0 p-1 ">GoJS</h1>
      </a>
    </div>
    <button id="topnavButton" class="rounded-lg sm:hidden focus:outline-none focus:ring" aria-label="Navigation">
      <svg fill="currentColor" viewBox="0 0 20 20" class="w-6 h-6">
        <path id="topnavOpen" fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM9 15a1 1 0 011-1h6a1 1 0 110 2h-6a1 1 0 01-1-1z" clip-rule="evenodd"></path>
        <path id="topnavClosed" class="hidden" fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path>
      </svg>
    </button>
    <div id="topnavList" class="hidden sm:block items-center w-auto mt-0 text-white p-0 z-20">
      <ul class="list-reset list-none font-semibold flex justify-end flex-wrap sm:flex-nowrap items-center px-0 pb-0">
        <li class="p-1 sm:p-0"><a class="topnav-link" href="../learn/">Learn</a></li>
        <li class="p-1 sm:p-0"><a class="topnav-link" href="../samples/">Samples</a></li>
        <li class="p-1 sm:p-0"><a class="topnav-link" href="../intro/">Intro</a></li>
        <li class="p-1 sm:p-0"><a class="topnav-link" href="../api/">API</a></li>
        <li class="p-1 sm:p-0"><a class="topnav-link" href="https://www.nwoods.com/products/register.html">Register</a></li>
        <li class="p-1 sm:p-0"><a class="topnav-link" href="../download.html">Download</a></li>
        <li class="p-1 sm:p-0"><a class="topnav-link" href="https://forum.nwoods.com/c/gojs/11">Forum</a></li>
        <li class="p-1 sm:p-0"><a class="topnav-link" href="https://www.nwoods.com/contact.html"
         target="_blank" rel="noopener" onclick="getOutboundLink('https://www.nwoods.com/contact.html', 'contact');">Contact</a></li>
        <li class="p-1 sm:p-0"><a class="topnav-link" href="https://www.nwoods.com/sales/index.html"
         target="_blank" rel="noopener" onclick="getOutboundLink('https://www.nwoods.com/sales/index.html', 'buy');">Buy</a></li>
      </ul>
    </div>
  </div>
  <hr class="border-b border-gray-600 opacity-50 my-0 py-0" />
</nav>
<div class="md:flex flex-col md:flex-row md:min-h-screen w-full max-w-screen-xl mx-auto">
  <div id="navSide" class="flex flex-col w-full md:w-48 text-gray-700 bg-white flex-shrink-0"></div>
  <!-- * * * * * * * * * * * * * -->
  <!-- Start of GoJS sample code -->
  
51
  <div class="p-4 w-full">
<div id="sample">
  <div id="myDiagramDiv" style="background-color: whitesmoke; border: solid 1px black; width: 100%; height: 400px"></div>
  <p>
    This sample is a modification of the <a href="../samples/stateChart.html">State Chart</a> sample that makes use of
    the LinkLabelDraggingTool that is defined in its own file, as <a href="LinkLabelDraggingTool.ts">LinkLabelDraggingTool.ts</a>.
  </p>
  <p>
    Note that after dragging a link label you can move a node connected by that link and the label maintains the same position
    relative to the link route. That relative position is specified by the <a>GraphObject.segmentOffset</a> property.
    This sample also saves any changes to that property by means of a TwoWay <a>Binding</a>.
  </p>
  <p>
    See also the similar <a href="LinkLabelOnPathDragging.html" target="_blank">Link Label On Path Dragging sample</a>,
    where the label is constrained to remain on the path of the link.
  </p>
  <button id="SaveButton">Save</button>
  <button id="LoadButton">Load</button> Diagram Model saved in JSON format:
  <br />
  <textarea id="mySavedModel" style="width:100%;height:300px">
72{ "nodeKeyProperty": "id",
"nodeDataArray": [
  { "id": 0, "loc": "120 120", "text": "Initial" },
  { "id": 1, "loc": "330 120", "text": "First down" },
  { "id": 2, "loc": "226 376", "text": "First up" },
  { "id": 3, "loc": "60 276", "text": "Second down" },
  { "id": 4, "loc": "226 226", "text": "Wait" }
],
"linkDataArray": [
  { "from": 0, "to": 0, "text": "up or timer", "curviness": -20 },
  { "from": 0, "to": 1, "text": "down", "curviness": 20 },
  { "from": 1, "to": 0, "text": "up (moved)\nPOST", "curviness": 20 },
  { "from": 1, "to": 1, "text": "down", "curviness": -20 },
  { "from": 1, "to": 2, "text": "up (no move)" },
  { "from": 1, "to": 4, "text": "timer" },
  { "from": 2, "to": 0, "text": "timer\nPOST" },
  { "from": 2, "to": 3, "text": "down" },
  { "from": 3, "to": 0, "text": "up\nPOST\n(dblclick\nif no move)" },
  { "from": 3, "to": 3, "text": "down or timer", "curviness": 20 },
  { "from": 4, "to": 0, "text": "up\nPOST" },
  { "from": 4, "to": 4, "text": "down" }
]
94}
  </textarea>
</div>
97
<script type="module" id="code">
  import * as go from "../release/go-module.js";
  import { LinkLabelDraggingTool } from './LinkLabelDraggingTool.js';
101
  if (window.goSamples) window.goSamples(); // init for these samples -- you don't need to call this
  const $ = go.GraphObject.make; // for conciseness in defining templates
104
  const myDiagram =
    $(go.Diagram, 'myDiagramDiv', // must name or refer to the DIV HTML element
      {
        // have mouse wheel events zoom in and out instead of scroll up and down
        'toolManager.mouseWheelBehavior': go.ToolManager.WheelZoom,
        // support double-click in background creating a new node
        'clickCreatingTool.archetypeNodeData': { text: 'new node' },
        // enable undo & redo
        'undoManager.isEnabled': true
      });
  // install the LinkLabelDraggingTool as a "mouse move" tool
  myDiagram.toolManager.mouseMoveTools.insertAt(0, new LinkLabelDraggingTool());
117
  // when the document is modified, add a "*" to the title and enable the "Save" button
  myDiagram.addDiagramListener('Modified', (e) => {
    const button = document.getElementById('SaveButton');
    if (button) button.disabled = !myDiagram.isModified;
122
    const idx = document.title.indexOf('*');
    if (myDiagram.isModified) {
      if (idx < 0) document.title += '*';
    } else {
      if (idx >= 0) document.title = document.title.substr(0, idx);
    }
  });
130
  // define the Node template
  myDiagram.nodeTemplate =
    $(go.Node, 'Auto',
      new go.Binding('location', 'loc', go.Point.parse).makeTwoWay(go.Point.stringify),
      // define the node's outer shape, which will surround the TextBlock
      $(go.Shape, 'RoundedRectangle',
        {
          parameter1: 20,
          fill: $(go.Brush, 'Linear', { 0: 'rgb(254, 201, 0)', 1: 'rgb(254, 162, 0)' }),
          stroke: 'black',
          portId: '',
          fromLinkable: true,
          fromLinkableSelfNode: true,
          fromLinkableDuplicates: true,
          toLinkable: true,
          toLinkableSelfNode: true,
          toLinkableDuplicates: true,
          cursor: 'pointer'
      }),
      $(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())
    );
157
  // unlike the normal selection Adornment, this one includes a Button
  myDiagram.nodeTemplate.selectionAdornmentTemplate =
    $(go.Adornment, 'Spot',
      $(go.Panel, 'Auto',
        $(go.Shape, { fill: null, stroke: 'blue', strokeWidth: 2 }),
        $(go.Placeholder) // this represents the selected Node
      ),
      // the button to create a "next" node, at the top-right corner
      $('Button',
        {
          alignment: go.Spot.TopRight,
          click: addNodeAndLink // this function is defined below
        },
        $(go.Shape, 'PlusLine',
          { desiredSize: new go.Size(6, 6) })
      ) // end button
    ); // end Adornment
175
  // clicking the button inserts a new node to the right of the selected node,
  // and adds a link to that new node
  function addNodeAndLink(e, obj) {
    const adorn = obj.part;
    const fromNode = adorn.adornedPart;
    if (fromNode === null) return;
    e.handled = true;
    const diagram = e.diagram;
    diagram.startTransaction('Add State');
    // get the node data for which the user clicked the button
    const fromData = fromNode.data;
    // create a new "State" data object, positioned off to the right of the adorned Node
    const toData = { text: 'new' };
    const p = fromNode.location.copy();
    p.x += 200;
    toData.loc = go.Point.stringify(p); // the "loc" property is a string, not a Point object
    // add the new node data to the model
    const model = diagram.model;
    model.addNodeData(toData);
    // create a link data from the old node data to the new node data
    const linkdata = {
        from: model.getKeyForNodeData(fromData),
        to: model.getKeyForNodeData(toData),
        text: 'transition'
    };
    // and add the link data to the model
    model.addLinkData(linkdata);
    // select the new Node
    const newnode = diagram.findNodeForData(toData);
    diagram.select(newnode);
    diagram.commitTransaction('Add State');
    // if the new node is off-screen, scroll the diagram to show the new node
    if (newnode !== null) diagram.scrollToRect(newnode.actualBounds);
  }
210
  // replace the default Link template in the linkTemplateMap
  myDiagram.linkTemplate =
    $(go.Link, // the whole link panel
      { curve: go.Link.Bezier, adjusting: go.Link.Stretch, reshapable: true },
      new go.Binding('points').makeTwoWay(),
      new go.Binding('curviness', 'curviness'),
      $(go.Shape, // the link shape
        { strokeWidth: 1.5 }), $(go.Shape, // the arrowhead
        { toArrow: 'standard', stroke: null }),
      $(go.Panel, 'Auto', { cursor: 'move' }, // visual hint that the user can do something with this link label
        $(go.Shape, // the label background, which becomes transparent around the edges
        {
          fill: $(go.Brush, 'Radial', { 0: 'rgb(240, 240, 240)', 0.3: 'rgb(240, 240, 240)', 1: 'rgba(240, 240, 240, 0)' }),
          stroke: null
        }),
        $(go.TextBlock, 'transition', // the label text
          {
              textAlign: 'center',
              font: '10pt helvetica, arial, sans-serif',
              stroke: 'black',
              margin: 4,
              editable: true // editing the text automatically updates the model data
          },
          new go.Binding('text', 'text').makeTwoWay()),
        // The GraphObject.segmentOffset property is what the LinkLabelDraggingTool modifies.
        // This TwoWay binding saves any changes to the same named property on the link data.
        new go.Binding('segmentOffset', 'segmentOffset', go.Point.parse).makeTwoWay(go.Point.stringify)
      )
    );
240
  // read in the JSON-format data from the "mySavedModel" element
  load();
243
  window.myDiagram = myDiagram; // Attach to the window for console debugging
245
  // 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);
  }
  document.getElementById("SaveButton").onclick = save;
  document.getElementById("LoadButton").onclick = load;
</script>
  </div>
  <!-- * * * * * * * * * * * * * -->
  <!--  End of GoJS sample code  -->
</div>
261</body>
262<!--  This script is part of the gojs.net website, and is not needed to run the sample -->
263<script src="../assets/js/goSamples.js"></script>
264</html>

1	`<!DOCTYPE html>`
2	`<html lang="en">`
3	`<head>`
4	`<meta charset="utf-8"/>`
5	`<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, viewport-fit=cover"/>`
6	`<meta name="description" content="TypeScript: Allow the user to shift link labels; useful when the user wants to adjust the position of the label relative to the link path to avoid overlapping the link path or any nodes."/>`
7	`<link rel="stylesheet" href="../assets/css/style.css"/>`
8	`<!-- Copyright 1998-2021 by Northwoods Software Corporation. -->`
9	`<title>State Chart with Draggable Link Labels</title>`
10	`</head>`
11
12	`<body>`
13	`<!-- This top nav is not part of the sample code -->`
14	`<nav id="navTop" class="w-full z-30 top-0 text-white bg-nwoods-primary">`
15	`<div class="w-full container max-w-screen-lg mx-auto flex flex-wrap sm:flex-nowrap items-center justify-between mt-0 py-2">`
16	`<div class="md:pl-4">`
17	`<a class="text-white hover:text-white no-underline hover:no-underline`
18	`font-bold text-2xl lg:text-4xl rounded-lg hover:bg-nwoods-secondary " href="../">`
19	`<h1 class="mb-0 p-1 ">GoJS</h1>`
20	`</a>`
21	`</div>`
22	`<button id="topnavButton" class="rounded-lg sm:hidden focus:outline-none focus:ring" aria-label="Navigation">`
23	`<svg fill="currentColor" viewBox="0 0 20 20" class="w-6 h-6">`
24	`<path id="topnavOpen" fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM9 15a1 1 0 011-1h6a1 1 0 110 2h-6a1 1 0 01-1-1z" clip-rule="evenodd"></path>`
25	`<path id="topnavClosed" class="hidden" fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path>`
26	`</svg>`
27	`</button>`
28	`<div id="topnavList" class="hidden sm:block items-center w-auto mt-0 text-white p-0 z-20">`
29	`<ul class="list-reset list-none font-semibold flex justify-end flex-wrap sm:flex-nowrap items-center px-0 pb-0">`
30	`<li class="p-1 sm:p-0"><a class="topnav-link" href="../learn/">Learn</a></li>`
31	`<li class="p-1 sm:p-0"><a class="topnav-link" href="../samples/">Samples</a></li>`
32	`<li class="p-1 sm:p-0"><a class="topnav-link" href="../intro/">Intro</a></li>`
33	`<li class="p-1 sm:p-0"><a class="topnav-link" href="../api/">API</a></li>`
34	`<li class="p-1 sm:p-0"><a class="topnav-link" href="https://www.nwoods.com/products/register.html">Register</a></li>`
35	`<li class="p-1 sm:p-0"><a class="topnav-link" href="../download.html">Download</a></li>`
36	`<li class="p-1 sm:p-0"><a class="topnav-link" href="https://forum.nwoods.com/c/gojs/11">Forum</a></li>`
37	`<li class="p-1 sm:p-0"><a class="topnav-link" href="https://www.nwoods.com/contact.html"`
38	`target="_blank" rel="noopener" onclick="getOutboundLink('https://www.nwoods.com/contact.html', 'contact');">Contact</a></li>`
39	`<li class="p-1 sm:p-0"><a class="topnav-link" href="https://www.nwoods.com/sales/index.html"`
40	`target="_blank" rel="noopener" onclick="getOutboundLink('https://www.nwoods.com/sales/index.html', 'buy');">Buy</a></li>`
41	`</ul>`
42	`</div>`
43	`</div>`
44	`<hr class="border-b border-gray-600 opacity-50 my-0 py-0" />`
45	`</nav>`
46	`<div class="md:flex flex-col md:flex-row md:min-h-screen w-full max-w-screen-xl mx-auto">`
47	`<div id="navSide" class="flex flex-col w-full md:w-48 text-gray-700 bg-white flex-shrink-0"></div>`
48	`<!-- * * * * * * * * * * * * * -->`
49	`<!-- Start of GoJS sample code -->`
50
51
52	`<div class="p-4 w-full">`
53	`<div id="sample">`
54	`<div id="myDiagramDiv" style="background-color: whitesmoke; border: solid 1px black; width: 100%; height: 400px"></div>`
55	`<p>`
56	`This sample is a modification of the <a href="../samples/stateChart.html">State Chart</a> sample that makes use of`
57	`the LinkLabelDraggingTool that is defined in its own file, as <a href="LinkLabelDraggingTool.ts">LinkLabelDraggingTool.ts</a>.`
58	`</p>`
59	`<p>`
60	`Note that after dragging a link label you can move a node connected by that link and the label maintains the same position`
61	`relative to the link route. That relative position is specified by the <a>GraphObject.segmentOffset</a> property.`
62	`This sample also saves any changes to that property by means of a TwoWay <a>Binding</a>.`
63	`</p>`
64	`<p>`
65	`See also the similar <a href="LinkLabelOnPathDragging.html" target="_blank">Link Label On Path Dragging sample</a>,`
66	`where the label is constrained to remain on the path of the link.`
67	`</p>`
68	`<button id="SaveButton">Save</button>`
69	`<button id="LoadButton">Load</button> Diagram Model saved in JSON format:`
70	`<br />`
71	`<textarea id="mySavedModel" style="width:100%;height:300px">`
72	`{ "nodeKeyProperty": "id",`
73	`"nodeDataArray": [`
74	`{ "id": 0, "loc": "120 120", "text": "Initial" },`
75	`{ "id": 1, "loc": "330 120", "text": "First down" },`
76	`{ "id": 2, "loc": "226 376", "text": "First up" },`
77	`{ "id": 3, "loc": "60 276", "text": "Second down" },`
78	`{ "id": 4, "loc": "226 226", "text": "Wait" }`
79	`],`
80	`"linkDataArray": [`
81	`{ "from": 0, "to": 0, "text": "up or timer", "curviness": -20 },`
82	`{ "from": 0, "to": 1, "text": "down", "curviness": 20 },`
83	`{ "from": 1, "to": 0, "text": "up (moved)\nPOST", "curviness": 20 },`
84	`{ "from": 1, "to": 1, "text": "down", "curviness": -20 },`
85	`{ "from": 1, "to": 2, "text": "up (no move)" },`
86	`{ "from": 1, "to": 4, "text": "timer" },`
87	`{ "from": 2, "to": 0, "text": "timer\nPOST" },`
88	`{ "from": 2, "to": 3, "text": "down" },`
89	`{ "from": 3, "to": 0, "text": "up\nPOST\n(dblclick\nif no move)" },`
90	`{ "from": 3, "to": 3, "text": "down or timer", "curviness": 20 },`
91	`{ "from": 4, "to": 0, "text": "up\nPOST" },`
92	`{ "from": 4, "to": 4, "text": "down" }`
93	`]`
94	`}`
95	`</textarea>`
96	`</div>`
97
98	`<script type="module" id="code">`
99	`import * as go from "../release/go-module.js";`
100	`import { LinkLabelDraggingTool } from './LinkLabelDraggingTool.js';`
101
102	`if (window.goSamples) window.goSamples(); // init for these samples -- you don't need to call this`
103	`const $ = go.GraphObject.make; // for conciseness in defining templates`
104
105	`const myDiagram =`
106	`$(go.Diagram, 'myDiagramDiv', // must name or refer to the DIV HTML element`
107	`{`
108	`// have mouse wheel events zoom in and out instead of scroll up and down`
109	`'toolManager.mouseWheelBehavior': go.ToolManager.WheelZoom,`
110	`// support double-click in background creating a new node`
111	`'clickCreatingTool.archetypeNodeData': { text: 'new node' },`
112	`// enable undo & redo`
113	`'undoManager.isEnabled': true`
114	`});`
115	`// install the LinkLabelDraggingTool as a "mouse move" tool`
116	`myDiagram.toolManager.mouseMoveTools.insertAt(0, new LinkLabelDraggingTool());`
117
118	`// when the document is modified, add a "*" to the title and enable the "Save" button`
119	`myDiagram.addDiagramListener('Modified', (e) => {`
120	`const button = document.getElementById('SaveButton');`
121	`if (button) button.disabled = !myDiagram.isModified;`
122
123	`const idx = document.title.indexOf('*');`
124	`if (myDiagram.isModified) {`
125	`if (idx < 0) document.title += '*';`
126	`} else {`
127	`if (idx >= 0) document.title = document.title.substr(0, idx);`
128	`}`
129	`});`
130
131	`// define the Node template`
132	`myDiagram.nodeTemplate =`
133	`$(go.Node, 'Auto',`
134	`new go.Binding('location', 'loc', go.Point.parse).makeTwoWay(go.Point.stringify),`
135	`// define the node's outer shape, which will surround the TextBlock`
136	`$(go.Shape, 'RoundedRectangle',`
137	`{`
138	`parameter1: 20,`
139	`fill: $(go.Brush, 'Linear', { 0: 'rgb(254, 201, 0)', 1: 'rgb(254, 162, 0)' }),`
140	`stroke: 'black',`
141	`portId: '',`
142	`fromLinkable: true,`
143	`fromLinkableSelfNode: true,`
144	`fromLinkableDuplicates: true,`
145	`toLinkable: true,`
146	`toLinkableSelfNode: true,`
147	`toLinkableDuplicates: true,`
148	`cursor: 'pointer'`
149	`}),`
150	`$(go.TextBlock,`
151	`{`
152	`font: 'bold 11pt helvetica, bold arial, sans-serif',`
153	`editable: true // editing the text automatically updates the model data`
154	`},`
155	`new go.Binding('text', 'text').makeTwoWay())`
156	`);`
157
158	`// unlike the normal selection Adornment, this one includes a Button`
159	`myDiagram.nodeTemplate.selectionAdornmentTemplate =`
160	`$(go.Adornment, 'Spot',`
161	`$(go.Panel, 'Auto',`
162	`$(go.Shape, { fill: null, stroke: 'blue', strokeWidth: 2 }),`
163	`$(go.Placeholder) // this represents the selected Node`
164	`),`
165	`// the button to create a "next" node, at the top-right corner`
166	`$('Button',`
167	`{`
168	`alignment: go.Spot.TopRight,`
169	`click: addNodeAndLink // this function is defined below`
170	`},`
171	`$(go.Shape, 'PlusLine',`
172	`{ desiredSize: new go.Size(6, 6) })`
173	`) // end button`
174	`); // end Adornment`
175
176	`// clicking the button inserts a new node to the right of the selected node,`
177	`// and adds a link to that new node`
178	`function addNodeAndLink(e, obj) {`
179	`const adorn = obj.part;`
180	`const fromNode = adorn.adornedPart;`
181	`if (fromNode === null) return;`
182	`e.handled = true;`
183	`const diagram = e.diagram;`
184	`diagram.startTransaction('Add State');`
185	`// get the node data for which the user clicked the button`
186	`const fromData = fromNode.data;`
187	`// create a new "State" data object, positioned off to the right of the adorned Node`
188	`const toData = { text: 'new' };`
189	`const p = fromNode.location.copy();`
190	`p.x += 200;`
191	`toData.loc = go.Point.stringify(p); // the "loc" property is a string, not a Point object`
192	`// add the new node data to the model`
193	`const model = diagram.model;`
194	`model.addNodeData(toData);`
195	`// create a link data from the old node data to the new node data`
196	`const linkdata = {`
197	`from: model.getKeyForNodeData(fromData),`
198	`to: model.getKeyForNodeData(toData),`
199	`text: 'transition'`
200	`};`
201	`// and add the link data to the model`
202	`model.addLinkData(linkdata);`
203	`// select the new Node`
204	`const newnode = diagram.findNodeForData(toData);`
205	`diagram.select(newnode);`
206	`diagram.commitTransaction('Add State');`
207	`// if the new node is off-screen, scroll the diagram to show the new node`
208	`if (newnode !== null) diagram.scrollToRect(newnode.actualBounds);`
209	`}`
210
211	`// replace the default Link template in the linkTemplateMap`
212	`myDiagram.linkTemplate =`
213	`$(go.Link, // the whole link panel`
214	`{ curve: go.Link.Bezier, adjusting: go.Link.Stretch, reshapable: true },`
215	`new go.Binding('points').makeTwoWay(),`
216	`new go.Binding('curviness', 'curviness'),`
217	`$(go.Shape, // the link shape`
218	`{ strokeWidth: 1.5 }), $(go.Shape, // the arrowhead`
219	`{ toArrow: 'standard', stroke: null }),`
220	`$(go.Panel, 'Auto', { cursor: 'move' }, // visual hint that the user can do something with this link label`
221	`$(go.Shape, // the label background, which becomes transparent around the edges`
222	`{`
223	`fill: $(go.Brush, 'Radial', { 0: 'rgb(240, 240, 240)', 0.3: 'rgb(240, 240, 240)', 1: 'rgba(240, 240, 240, 0)' }),`
224	`stroke: null`
225	`}),`
226	`$(go.TextBlock, 'transition', // the label text`
227	`{`
228	`textAlign: 'center',`
229	`font: '10pt helvetica, arial, sans-serif',`
230	`stroke: 'black',`
231	`margin: 4,`
232	`editable: true // editing the text automatically updates the model data`
233	`},`
234	`new go.Binding('text', 'text').makeTwoWay()),`
235	`// The GraphObject.segmentOffset property is what the LinkLabelDraggingTool modifies.`
236	`// This TwoWay binding saves any changes to the same named property on the link data.`
237	`new go.Binding('segmentOffset', 'segmentOffset', go.Point.parse).makeTwoWay(go.Point.stringify)`
238	`)`
239	`);`
240
241	`// read in the JSON-format data from the "mySavedModel" element`
242	`load();`
243
244	`window.myDiagram = myDiagram; // Attach to the window for console debugging`
245
246	`// Show the diagram's model in JSON format`
247	`function save() {`
248	`document.getElementById('mySavedModel').value = myDiagram.model.toJson();`
249	`myDiagram.isModified = false;`
250	`}`
251	`function load() {`
252	`myDiagram.model = go.Model.fromJson(document.getElementById('mySavedModel').value);`
253	`}`
254	`document.getElementById("SaveButton").onclick = save;`
255	`document.getElementById("LoadButton").onclick = load;`
256	`</script>`
257	`</div>`
258	`<!-- * * * * * * * * * * * * * -->`
259	`<!-- End of GoJS sample code -->`
260	`</div>`
261	`</body>`
262	`<!-- This script is part of the gojs.net website, and is not needed to run the sample -->`
263	`<script src="../assets/js/goSamples.js"></script>`
264	`</html>`