UNPKG

gojs/extensionsJSM/CurvedLinkReshaping.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: Changing the curviness of a link using a single reshaping handle."/> 
7<link rel="stylesheet" href="../assets/css/style.css"/> 
8<!-- Copyright 1998-2021 by Northwoods Software Corporation. -->
9<title>State Chart with Simple Curved Link Reshaping</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 CurvedLinkReshapingTool that is defined in its own file, as <a href="CurvedLinkReshapingTool.ts">CurvedLinkReshapingTool.ts</a>.
  </p>
  <p>
    Note that unlike the standard case of a Bezier-curved Link that is <a>Part.reshapable</a>, there is only one reshape
    handle When the user drags that handle, the value of <a>Link.curviness</a> is modified, causing the link to be curved
    differently. This sample also defines a TwoWay <a>Binding</a> on that property, thereby saving the curviness to the
    model data. Unlike the regular State Chart sample, there is no Binding on <a>Link.points</a>, which is no longer needed
    when the curviness is the only modified property.
  </p>
  <button id="SaveButton" onclick="save()">Save</button>
  <button id="LoadButton" onclick="load()">Load</button> Diagram Model saved in JSON format:
  <br />
  <textarea id="mySavedModel" style="width:100%;height:300px">
70{ "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" }
]
92}
  </textarea>
</div>
95
<script type="module" id="code">
  import * as go from "../release/go-module.js";
  import { CurvedLinkReshapingTool } from './CurvedLinkReshapingTool.js';
99
  if (window.goSamples) goSamples(); // init for the samples -- you don't need to call this
  const $ = go.GraphObject.make; // for conciseness in defining templates
102
  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' },
          'linkReshapingTool': new CurvedLinkReshapingTool(),
          // enable undo & redo
          'undoManager.isEnabled': true
      });
  // 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;
      const idx = document.title.indexOf('*');
      if (myDiagram.isModified) {
          if (idx < 0)
              document.title += '*';
      }
      else {
          if (idx >= 0)
              document.title = document.title.substr(0, idx);
      }
  });
  // 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()));
  // 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
  // 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);
  }
  // replace the default Link template in the linkTemplateMap
  myDiagram.linkTemplate =
      $(go.Link, // the whole link panel
      { curve: go.Link.Bezier, reshapable: true },
      // don't need to save Link.points, so don't need TwoWay Binding on "points"
      new go.Binding('curviness', 'curviness').makeTwoWay(), // but save "curviness" automatically
      $(go.Shape, // the link shape
      { strokeWidth: 1.5 }), $(go.Shape, // the arrowhead
      { toArrow: 'standard', stroke: null }), $(go.Panel, 'Auto', $(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())));
215
  // Show the diagram's model in JSON format
  function save() {
    document.getElementById('mySavedModel').value = myDiagram.model.toJson();
    myDiagram.isModified = false;
  }
221
  function load() {
    myDiagram.model = go.Model.fromJson(document.getElementById('mySavedModel').value);
  }
225
  // read in the JSON-format data from the "mySavedModel" element
  load();
  document.getElementById("SaveButton").onclick = save;
  document.getElementById("LoadButton").onclick = load;
230
  window.myDiagram = myDiagram; // Attach to the window for console debugging
</script>
  </div>
  <!-- * * * * * * * * * * * * * -->
  <!--  End of GoJS sample code  -->
</div>
237</body>
238<!--  This script is part of the gojs.net website, and is not needed to run the sample -->
239<script src="../assets/js/goSamples.js"></script>
240</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: Changing the curviness of a link using a single reshaping handle."/>`
7	`<link rel="stylesheet" href="../assets/css/style.css"/>`
8	`<!-- Copyright 1998-2021 by Northwoods Software Corporation. -->`
9	`<title>State Chart with Simple Curved Link Reshaping</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 CurvedLinkReshapingTool that is defined in its own file, as <a href="CurvedLinkReshapingTool.ts">CurvedLinkReshapingTool.ts</a>.`
58	`</p>`
59	`<p>`
60	`Note that unlike the standard case of a Bezier-curved Link that is <a>Part.reshapable</a>, there is only one reshape`
61	`handle When the user drags that handle, the value of <a>Link.curviness</a> is modified, causing the link to be curved`
62	`differently. This sample also defines a TwoWay <a>Binding</a> on that property, thereby saving the curviness to the`
63	`model data. Unlike the regular State Chart sample, there is no Binding on <a>Link.points</a>, which is no longer needed`
64	`when the curviness is the only modified property.`
65	`</p>`
66	`<button id="SaveButton" onclick="save()">Save</button>`
67	`<button id="LoadButton" onclick="load()">Load</button> Diagram Model saved in JSON format:`
68	`<br />`
69	`<textarea id="mySavedModel" style="width:100%;height:300px">`
70	`{ "nodeKeyProperty": "id",`
71	`"nodeDataArray": [`
72	`{ "id": 0, "loc": "120 120", "text": "Initial" },`
73	`{ "id": 1, "loc": "330 120", "text": "First down" },`
74	`{ "id": 2, "loc": "226 376", "text": "First up" },`
75	`{ "id": 3, "loc": "60 276", "text": "Second down" },`
76	`{ "id": 4, "loc": "226 226", "text": "Wait" }`
77	`],`
78	`"linkDataArray": [`
79	`{ "from": 0, "to": 0, "text": "up or timer", "curviness": -20 },`
80	`{ "from": 0, "to": 1, "text": "down", "curviness": 20 },`
81	`{ "from": 1, "to": 0, "text": "up (moved)\nPOST", "curviness": 20 },`
82	`{ "from": 1, "to": 1, "text": "down", "curviness": -20 },`
83	`{ "from": 1, "to": 2, "text": "up (no move)" },`
84	`{ "from": 1, "to": 4, "text": "timer" },`
85	`{ "from": 2, "to": 0, "text": "timer\nPOST" },`
86	`{ "from": 2, "to": 3, "text": "down" },`
87	`{ "from": 3, "to": 0, "text": "up\nPOST\n(dblclick\nif no move)" },`
88	`{ "from": 3, "to": 3, "text": "down or timer", "curviness": 20 },`
89	`{ "from": 4, "to": 0, "text": "up\nPOST" },`
90	`{ "from": 4, "to": 4, "text": "down" }`
91	`]`
92	`}`
93	`</textarea>`
94	`</div>`
95
96	`<script type="module" id="code">`
97	`import * as go from "../release/go-module.js";`
98	`import { CurvedLinkReshapingTool } from './CurvedLinkReshapingTool.js';`
99
100	`if (window.goSamples) goSamples(); // init for the samples -- you don't need to call this`
101	`const $ = go.GraphObject.make; // for conciseness in defining templates`
102
103	`const myDiagram =`
104	`$(go.Diagram, 'myDiagramDiv', // must name or refer to the DIV HTML element`
105	`{`
106	`// have mouse wheel events zoom in and out instead of scroll up and down`
107	`'toolManager.mouseWheelBehavior': go.ToolManager.WheelZoom,`
108	`// support double-click in background creating a new node`
109	`'clickCreatingTool.archetypeNodeData': { text: 'new node' },`
110	`'linkReshapingTool': new CurvedLinkReshapingTool(),`
111	`// enable undo & redo`
112	`'undoManager.isEnabled': true`
113	`});`
114	`// when the document is modified, add a "*" to the title and enable the "Save" button`
115	`myDiagram.addDiagramListener('Modified', (e) => {`
116	`const button = document.getElementById('SaveButton');`
117	`if (button)`
118	`button.disabled = !myDiagram.isModified;`
119	`const idx = document.title.indexOf('*');`
120	`if (myDiagram.isModified) {`
121	`if (idx < 0)`
122	`document.title += '*';`
123	`}`
124	`else {`
125	`if (idx >= 0)`
126	`document.title = document.title.substr(0, idx);`
127	`}`
128	`});`
129	`// define the Node template`
130	`myDiagram.nodeTemplate =`
131	`$(go.Node, 'Auto', new go.Binding('location', 'loc', go.Point.parse).makeTwoWay(go.Point.stringify),`
132	`// define the node's outer shape, which will surround the TextBlock`
133	`$(go.Shape, 'RoundedRectangle', {`
134	`parameter1: 20,`
135	`fill: $(go.Brush, 'Linear', { 0: 'rgb(254, 201, 0)', 1: 'rgb(254, 162, 0)' }),`
136	`stroke: 'black',`
137	`portId: '',`
138	`fromLinkable: true,`
139	`fromLinkableSelfNode: true,`
140	`fromLinkableDuplicates: true,`
141	`toLinkable: true,`
142	`toLinkableSelfNode: true,`
143	`toLinkableDuplicates: true,`
144	`cursor: 'pointer'`
145	`}), $(go.TextBlock, {`
146	`font: 'bold 11pt helvetica, bold arial, sans-serif',`
147	`editable: true // editing the text automatically updates the model data`
148	`}, new go.Binding('text', 'text').makeTwoWay()));`
149	`// unlike the normal selection Adornment, this one includes a Button`
150	`myDiagram.nodeTemplate.selectionAdornmentTemplate =`
151	`$(go.Adornment, 'Spot', $(go.Panel, 'Auto', $(go.Shape, { fill: null, stroke: 'blue', strokeWidth: 2 }), $(go.Placeholder) // this represents the selected Node`
152	`),`
153	`// the button to create a "next" node, at the top-right corner`
154	`$('Button', {`
155	`alignment: go.Spot.TopRight,`
156	`click: addNodeAndLink // this function is defined below`
157	`}, $(go.Shape, 'PlusLine', { desiredSize: new go.Size(6, 6) })) // end button`
158	`); // end Adornment`
159	`// clicking the button inserts a new node to the right of the selected node,`
160	`// and adds a link to that new node`
161	`function addNodeAndLink(e, obj) {`
162	`const adorn = obj.part;`
163	`const fromNode = adorn.adornedPart;`
164	`if (fromNode === null)`
165	`return;`
166	`e.handled = true;`
167	`const diagram = e.diagram;`
168	`diagram.startTransaction('Add State');`
169	`// get the node data for which the user clicked the button`
170	`const fromData = fromNode.data;`
171	`// create a new "State" data object, positioned off to the right of the adorned Node`
172	`const toData = { text: 'new' };`
173	`const p = fromNode.location.copy();`
174	`p.x += 200;`
175	`toData.loc = go.Point.stringify(p); // the "loc" property is a string, not a Point object`
176	`// add the new node data to the model`
177	`const model = diagram.model;`
178	`model.addNodeData(toData);`
179	`// create a link data from the old node data to the new node data`
180	`const linkdata = {`
181	`from: model.getKeyForNodeData(fromData),`
182	`to: model.getKeyForNodeData(toData),`
183	`text: 'transition'`
184	`};`
185	`// and add the link data to the model`
186	`model.addLinkData(linkdata);`
187	`// select the new Node`
188	`const newnode = diagram.findNodeForData(toData);`
189	`diagram.select(newnode);`
190	`diagram.commitTransaction('Add State');`
191	`// if the new node is off-screen, scroll the diagram to show the new node`
192	`if (newnode !== null)`
193	`diagram.scrollToRect(newnode.actualBounds);`
194	`}`
195	`// replace the default Link template in the linkTemplateMap`
196	`myDiagram.linkTemplate =`
197	`$(go.Link, // the whole link panel`
198	`{ curve: go.Link.Bezier, reshapable: true },`
199	`// don't need to save Link.points, so don't need TwoWay Binding on "points"`
200	`new go.Binding('curviness', 'curviness').makeTwoWay(), // but save "curviness" automatically`
201	`$(go.Shape, // the link shape`
202	`{ strokeWidth: 1.5 }), $(go.Shape, // the arrowhead`
203	`{ toArrow: 'standard', stroke: null }), $(go.Panel, 'Auto', $(go.Shape, // the label background, which becomes transparent around the edges`
204	`{`
205	`fill: $(go.Brush, 'Radial', { 0: 'rgb(240, 240, 240)', 0.3: 'rgb(240, 240, 240)', 1: 'rgba(240, 240, 240, 0)' }),`
206	`stroke: null`
207	`}), $(go.TextBlock, 'transition', // the label text`
208	`{`
209	`textAlign: 'center',`
210	`font: '10pt helvetica, arial, sans-serif',`
211	`stroke: 'black',`
212	`margin: 4,`
213	`editable: true // editing the text automatically updates the model data`
214	`}, new go.Binding('text', 'text').makeTwoWay())));`
215
216	`// Show the diagram's model in JSON format`
217	`function save() {`
218	`document.getElementById('mySavedModel').value = myDiagram.model.toJson();`
219	`myDiagram.isModified = false;`
220	`}`
221
222	`function load() {`
223	`myDiagram.model = go.Model.fromJson(document.getElementById('mySavedModel').value);`
224	`}`
225
226	`// read in the JSON-format data from the "mySavedModel" element`
227	`load();`
228	`document.getElementById("SaveButton").onclick = save;`
229	`document.getElementById("LoadButton").onclick = load;`
230
231	`window.myDiagram = myDiagram; // Attach to the window for console debugging`
232	`</script>`
233	`</div>`
234	`<!-- * * * * * * * * * * * * * -->`
235	`<!-- End of GoJS sample code -->`
236	`</div>`
237	`</body>`
238	`<!-- This script is part of the gojs.net website, and is not needed to run the sample -->`
239	`<script src="../assets/js/goSamples.js"></script>`
240	`</html>`