UNPKG

gojs/intro/replacingDeleting.html

Version:

1<!DOCTYPE html>
2<html lang="en">
<head>
4<meta charset="utf-8"/>
5<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, viewport-fit=cover"/>

7<link rel="stylesheet" href="../assets/css/style.css"/> 
8<!-- Copyright 1998-2021 by Northwoods Software Corporation. -->    <title> Replacing and Deleting Diagrams -- Northwoods Software </title>
  <link rel="stylesheet" href="../assets/css/prism.css"  />
</head>
<script>
  
  window.diagrams = [];
  window.goCode = function(pre, w, h, parentid, animation) {
    window.diagrams.push([pre, w, h, parentid, animation]);
  }
</script>
<body>
<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-40 lg:w-48 text-gray-700 bg-white flex-shrink-0">
    <div class="flex-shrink-0 px-8 py-4">
      <button id="navButton" class="rounded-lg md:hidden focus:outline-none focus:ring" aria-label="Navigation">
        <svg fill="currentColor" viewBox="0 0 20 20" class="w-6 h-6">
          <path id="navOpen" 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="navClosed" 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>
    <nav id="navList" class="min-h-screen hidden md:block sidebar-nav flex-grow px-1 lg:px-4 pb-4 md:pb-0 md:overflow-y-auto break-words">
<a href="index.html">Basics</a>
<a href="buildingObjects.html">Building Parts</a>
<a href="usingModels.html">Using Models</a>
<a href="dataBinding.html">Data Binding</a>
<a href="react.html">GoJS with React</a>
<a href="angular.html">GoJS with Angular</a>
<a href="textBlocks.html">TextBlocks</a>
<a href="shapes.html">Shapes</a>
<a href="pictures.html">Pictures</a>
<a href="panels.html">Panels</a>
<a href="tablePanels.html">Table Panels</a>
<a href="brush.html">Brushes</a>
<a href="sizing.html">Sizing Objects</a>
<a href="itemArrays.html">Item Arrays</a>
<a href="changedEvents.html">Changed Events</a>
<a href="transactions.html">Transactions</a>
<a href="viewport.html">Coordinates</a>
<a href="initialView.html">Initial View</a>
<a href="collections.html">Collections</a>
<a href="links.html">Links</a>
<a href="linkLabels.html">Link Labels</a>
<a href="connectionPoints.html">Link Points</a>
<a href="ports.html">Ports</a>
<a href="nodes.html">Nodes</a>
<a href="debugging.html">Debugging</a>
<a href="layouts.html">Layouts</a>
<a href="trees.html">Trees</a>
<a href="subtrees.html">SubTrees</a>
<a href="groups.html">Groups</a>
<a href="subgraphs.html">SubGraphs</a>
<a href="sizedGroups.html">Sized Groups</a>
<a href="selection.html">Selection</a>
<a href="highlighting.html">Highlighting</a>
<a href="animation.html">Animation</a>
<a href="toolTips.html">ToolTips</a>
<a href="contextmenus.html">Context Menus</a>
<a href="events.html">Diagram Events</a>
<a href="tools.html">Tools</a>
<a href="commands.html">Commands</a>
<a href="permissions.html">Permissions</a>
<a href="validation.html">Validation</a>
<a href="HTMLInteraction.html">HTML Interaction</a>
<a href="layers.html">Layers &amp; Z-ordering</a>
<a href="palette.html">Palette</a>
<a href="overview.html">Overview</a>
<a href="resizing.html">Resizing Diagrams</a>
<a href="replacingDeleting.html">Replacing and Deleting</a>
<a href="buttons.html">Buttons</a>
<a href="templateMaps.html">Template Maps</a>
<a href="legends.html">Legends and Titles</a>
<a href="extensions.html">Extensions</a>
<a href="geometry.html">Geometry Strings</a>
<a href="grids.html">Grid Patterns</a>
<a href="graduatedPanels.html">Graduated Panels</a>
<a href="makingImages.html">Diagram Images</a>
<a href="makingSVG.html">Diagram SVG</a>
<a href="printing.html">Printing</a>
<a href="serverSideImages.html">Server-side Images</a>
<a href="nodeScript.html">GoJS in Node.js</a>
<a href="testing.html">Testing</a>
<a href="storage.html">Storage</a>
<a href="performance.html">Performance</a>
<a href="source.html">Building from Source</a>
<a href="platforms.html">Platforms</a>
<a href="deployment.html">Deployment</a>
    </nav>
  </div>      
    <div class="pt-4 px-2 md:px-0 lg:px-4 pb-16 w-full overflow-hidden">
132
133
134
135
136<h1>Replacing Diagrams and Models</h1>
137
138<p>
Many applications will require the programmer to show different Diagrams on the same content area of the page. This is especially common in single-page webapps.
Often, you do not need to remove the Diagram, and create another one, to do this. Since the Diagram is analagous to a <em>view</em> in <em>model-view</em> architecture,
you can instead replace the <a>Diagram.model</a>, and perhaps other settings, like the Diagram.nodeTemplateMap or Diagram.layout.
Or you could build larger template maps that accomodate all Models you wish to present.
143</p>
144
145<p>
Below is an example of keeping a single Diagram, to be used as the view surface. It has a Model loaded,
and a button will load a different Model which uses different templates, and sets a different Layout.
This demonstrates re-use of the Diagram, which is often easier and more efficient than handling multiple Diagrams.
This is the normal way to show at most one diagram at a time.
150</p>
151
152<pre class="lang-js" id="first"><code>
  // A minimal Diagram
  diagram.nodeTemplate =
    $(go.Node, "Auto",
      $(go.Shape, "RoundedRectangle",
        new go.Binding("fill", "color")),
      $(go.TextBlock,
        { margin: 3, font: '28px sans-serif' },  // some room around the text
        new go.Binding("text", "key"))
    );
162
  // Node template that is only used by the second model
  diagram.nodeTemplateMap.add("TypeTwo",
  $(go.Node, "Horizontal",
    $(go.Shape, "Circle", { width: 24, height: 24, strokeWidth: 0, portId: "" },
      new go.Binding("fill", "color")),
    $(go.TextBlock,
      { margin: 2, font: "Bold 15px sans-serif" },
      new go.Binding("text", "key"))
    )
  );
173
  // Another node template that is only used by the second model
  diagram.nodeTemplateMap.add("AnotherType",
    $(go.Node, "Auto",
      $(go.Shape, "Rectangle", { strokeWidth: 1, fill: 'lightyellow' },
        new go.Binding("fill", "color")),
      $(go.TextBlock,
        { margin: 12, font: "12px sans-serif" },
        new go.Binding("text", "text"))
    )
  );
184
  var firstModel = true;
  loadModel();
187
  // Toggle the Diagram's Model
  var button1 = document.getElementById('button1');
  button1.addEventListener('click', function() {
    loadModel();
  });
193
  function loadModel() {
    if (firstModel) { // load the first model
      diagram.layout = new go.Layout(); // Simple layout
      diagram.model = new go.GraphLinksModel(
        [
          { key: "Alpha", color: "lightblue" },
          { key: "Beta", color: "lightblue" },
          { key: "Gamma", color: "lightgreen" },
          { key: "Delta", color: "lightgreen" }
        ],
        [
          { from: "Alpha", to: "Beta" },
          { from: "Gamma", to: "Delta" }
        ]);
    } else { // load the second model
      diagram.layout = $(go.TreeLayout, { angle: 90 });
210
      diagram.model = new go.GraphLinksModel(
      [
        { key: "One",   category: "TypeTwo", color: go.Brush.randomColor() },
        { key: "Two",   category: "TypeTwo", color: go.Brush.randomColor() },
        { key: "Three", category: "TypeTwo", color: go.Brush.randomColor() },
        { key: "Four",  category: "TypeTwo", color: go.Brush.randomColor() },
        { key: "Five",  category: "TypeTwo", color: go.Brush.randomColor() },
        { key: "Six",   category: "TypeTwo", color: go.Brush.randomColor() },
        { text: "Some comment", category: "AnotherType" }
      ],
      [
        { from: "One", to: "Two" },
        { from: "One", to: "Three" },
        { from: "Three", to: "Four" },
        { from: "Three", to: "Five" },
        { from: "Four", to: "Six" }
      ]);
    }
    firstModel = !firstModel;
230
  }
232</code></pre>
233<div id="dia1"></div>
234<p><button id="button1">Toggle the Diagram's Model</button></p>
235<script>goCode("first", 500, 400, "dia1")</script>
236
237<p>
Note that changing the Model destroys all state not kept in the Model, such as the currently selected Parts,
and if there are no data bindings for them, the positions of all Nodes as well, and so on.
These can be saved in the Model before switching, when they are relevant.
241</p>
242
243<h2 id="TwoDiagramsReusingOneDiv">Two Diagrams re-using one DIV</h2>
244
245<p>
Sometimes users want to work on two or more Diagrams at once and keep all Diagram state.
If this is the case, you may wish to put two Diagrams on the page (as all samples with a Palette do),
or you may wish to put Diagrams into multiple "tabs" or some other mechanism,
like the <a href="../samples/planogram.html">Planogram sample does with its four Palettes</a>.
250</p>
251
252<p>
Alternatively, you may wish to display the two Diagrams in the same DIV, one at a time, by swapping them out.
You can swap the div by setting <a>Diagram.div</a> to <code>null</code> on the first Diagram,
and setting the Div on the second.
256</p>
257
258
259<pre class="lang-js" id="second"><code>
  // A very minimal Diagram
  diagram.nodeTemplate =
    $(go.Node, "Auto",
      $(go.Shape, "Circle",
        new go.Binding("fill", "color")),
      $(go.TextBlock,
        { margin: 3 },  // some room around the text
        new go.Binding("text", "key"))
    );
269
  diagram.model = new go.GraphLinksModel([
    { key: "Alpha", color: "lightblue" },
    { key: "Beta", color: "orange" }
  ], [
    { from: "Alpha", to: "Beta" },
  ]);
276
  var diagram2 = $(go.Diagram);
278
  diagram2.nodeTemplate =
    $(go.Node, "Auto",
      $(go.Shape, "Rectangle", { fill: 'lime' }),
      $(go.TextBlock,
        { margin: 5, font: '22px sans-serif' },
        new go.Binding("text", "key"))
    );
286
  diagram2.model = new go.GraphLinksModel([
    { key: "BigNode1" },
    { key: "BigNode2" },
    { key: "BigNode3" },
  ], [ ]);
292
  var currentDiagram = diagram;
294
  // Toggle the Diagram within this DIV with this button
  var button2 = document.getElementById('button2');
  button2.addEventListener('click', function() {
    // Set one Diagram.div to null, and the other Diagram.div to this div
    if (currentDiagram === diagram) {
      var div = diagram.div;
      diagram.div = null;
      diagram2.div = div;
      currentDiagram = diagram2;
    } else {
      var div = diagram2.div;
      diagram2.div = null;
      diagram.div = div;
      currentDiagram = diagram;
    }
310
311
  });
313</code></pre>
314<div id="dia2"></div>
315<button id="button2">Toggle Diagram within DIV</button>
316<script>goCode("second", 400, 400, "dia2")</script>
317
318<p>
If you select a Node and move it, and toggle Diagrams back and forth, you will see that the selection and Node positioning persists.
Both Diagrams remain in memory, only the Div is swapped to use one or the other.
321</p>
322
323<h2 id="PermanentlyDeletingDiagram">Permanently deleting a Diagram</h2>
324
325<p>
You may wish to remove a Diagram and ensure it leaves no memory footprint.
To do this, if you have not created any other references to your Diagram or GraphObjects or Tools or Layouts within, you can write:
328</p>
329
330<pre class="lang-js"><code>
myDiagram.div = null;
myDiagram = null; // Assumes this is the only reference to your Diagram
333</code></pre>
334
335<p>
If you have used Pictures, you should also clear the Picture cache, which GoJS creates to store a map of source URLs to Image elements:
337</p>
338
339<pre class="lang-js"><code>
// Clear any Image references that GoJS is holding onto
go.Picture.clearCache();
342</code></pre>
343
344
345
346
    </div>
  </div>

<div class="bg-nwoods-primary">
  <section class="max-w-screen-lg text-white container mx-auto py-2 px-12">
    <p id="version" class="leading-none mb-2 my-4">GoJS</p>
  </section>
</div><footer class="bg-nwoods-primary text-white">
<div class="container max-w-screen-lg mx-auto  px-8">
  <div class="w-full py-6">
357
      <div class="max-w-screen-lg xl:max-w-screen-xl mx-auto px-4 sm:px-6 md:px-8">
        <ul class="text-sm font-medium pb-14 sm:pb-20 grid grid-cols-1 sm:grid-cols-3 gap-y-10">
          <li class="list-none row-span-2">
            <h2 class="text-base font-semibold tracking-wide">GoJS</h2>
            <ul class="list-none space-y-4 md:space-y-1 px-0">
              <li>
                <a href="../samples/index.html">Samples</a>
              </li>
              <li>
                <a href="../learn/index.html">Learn</a>
              </li>
              <li>
                <a href="../intro/index.html">Intro</a>
              </li>
              <li>
                <a href="../api/index.html">API</a>
              </li>
              <li>
                <a href="../changelog.html">Changelog</a>
              </li>
              <li>
                <a href="https://github.com/NorthwoodsSoftware/GoJS">GitHub</a>
              </li>
            </ul>
          </li>
          <li class="list-none row-span-2">
            <h2 class="text-base font-semibold tracking-wide">Support</h2>
            <ul class="list-none space-y-4 md:space-y-1 px-0">
              <li>
                <a href="https://www.nwoods.com/contact.html"
                target="_blank" rel="noopener" onclick="getOutboundLink('https://www.nwoods.com/contact.html', 'contact');">Contact</a>
              </li>
              <li>
                <a href="https://forum.nwoods.com/c/gojs">Forum</a>
              </li>
              <li>
                <a href="https://www.nwoods.com/app/activate.aspx?sku=gojs">Activate</a>
              </li>
              <li>
                <a 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>
              <li>
                <a href="https://www.youtube.com/channel/UC9We8EoX596-6XFjJDtZIDg">Videos</a>
              </li>
            </ul>
          </li>
          <li class="list-none row-span-2">
            <h2 class="text-base font-semibold tracking-wide">Company</h2>
            <ul class="list-none space-y-4 md:space-y-1 px-0">
              <li>
                <a href="https://www.nwoods.com">Northwoods</a>
              </li>
              <li>
                <a href="https://www.nwoods.com/about.html">About Us</a>
              </li>
              <li>
                <a href="https://www.nwoods.com/contact.html">Contact Us</a>
              </li>
              <li>
                <a href="https://twitter.com/northwoodsgo">Twitter</a>
              </li>
420
            </ul>
          </li>
        </ul>
424
425
    <p class="text-sm text-gray-100 md:mb-6">
      Copyright 1998-2021 <a class="text-white" href="https://www.nwoods.com">Northwoods Software</a>
    </p>
  </div>
</div>
431</footer>  </body>
432
433<script async src="https://www.googletagmanager.com/gtag/js?id=UA-1506307-5"></script> 
434<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date()); gtag('config', 'UA-1506307-5');
var getOutboundLink = function(url, label) {
  gtag('event', 'click', {
    'event_category': 'outbound',
    'event_label': label,
    'transport_type': 'beacon'
  });
}
445
// topnav
var topButton = document.getElementById("topnavButton");
var topnavList = document.getElementById("topnavList");
topButton.addEventListener("click", function() {
  this.classList.toggle("active");
  topnavList.classList.toggle("hidden");
  document.getElementById("topnavOpen").classList.toggle("hidden");
  document.getElementById("topnavClosed").classList.toggle("hidden");
});
455</script>
<script src="../assets/js/prism.js"></script>
<script src="../release/go.js"></script>
<script src="../assets/js/goDoc.js"></script>
<script>
  document.addEventListener("DOMContentLoaded", function() {
    if (window.go) document.getElementById('version').textContent = "GoJS version " + go.version;
    if (window.goDoc) window.goDoc();
    var d = window.diagrams;
    for (var i = 0; i < d.length; i++) {
      var dargs = d[i];
      goCodeExecute(dargs[0], dargs[1], dargs[2], dargs[3], dargs[4]);
    }
    if (window.extra) window.extra();
  });
</script>
471</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
7	`<link rel="stylesheet" href="../assets/css/style.css"/>`
8	`<!-- Copyright 1998-2021 by Northwoods Software Corporation. --> <title> Replacing and Deleting Diagrams -- Northwoods Software </title>`
9	`<link rel="stylesheet" href="../assets/css/prism.css" />`
10	`</head>`
11	`<script>`
12
13	`window.diagrams = [];`
14	`window.goCode = function(pre, w, h, parentid, animation) {`
15	`window.diagrams.push([pre, w, h, parentid, animation]);`
16	`}`
17	`</script>`
18	`<body>`
19	`<nav id="navTop" class="w-full z-30 top-0 text-white bg-nwoods-primary">`
20	`<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">`
21	`<div class="md:pl-4">`
22	`<a class="text-white hover:text-white no-underline hover:no-underline`
23	`font-bold text-2xl lg:text-4xl rounded-lg hover:bg-nwoods-secondary " href="../">`
24	`<h1 class="mb-0 p-1 ">GoJS</h1>`
25	`</a>`
26	`</div>`
27	`<button id="topnavButton" class="rounded-lg sm:hidden focus:outline-none focus:ring" aria-label="Navigation">`
28	`<svg fill="currentColor" viewBox="0 0 20 20" class="w-6 h-6">`
29	`<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>`
30	`<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>`
31	`</svg>`
32	`</button>`
33	`<div id="topnavList" class="hidden sm:block items-center w-auto mt-0 text-white p-0 z-20">`
34	`<ul class="list-reset list-none font-semibold flex justify-end flex-wrap sm:flex-nowrap items-center px-0 pb-0">`
35	`<li class="p-1 sm:p-0"><a class="topnav-link" href="../learn/">Learn</a></li>`
36	`<li class="p-1 sm:p-0"><a class="topnav-link" href="../samples/">Samples</a></li>`
37	`<li class="p-1 sm:p-0"><a class="topnav-link" href="../intro/">Intro</a></li>`
38	`<li class="p-1 sm:p-0"><a class="topnav-link" href="../api/">API</a></li>`
39	`<li class="p-1 sm:p-0"><a class="topnav-link" href="https://www.nwoods.com/products/register.html">Register</a></li>`
40	`<li class="p-1 sm:p-0"><a class="topnav-link" href="../download.html">Download</a></li>`
41	`<li class="p-1 sm:p-0"><a class="topnav-link" href="https://forum.nwoods.com/c/gojs/11">Forum</a></li>`
42	`<li class="p-1 sm:p-0"><a class="topnav-link" href="https://www.nwoods.com/contact.html"`
43	`target="_blank" rel="noopener" onclick="getOutboundLink('https://www.nwoods.com/contact.html', 'contact');">Contact</a></li>`
44	`<li class="p-1 sm:p-0"><a class="topnav-link" href="https://www.nwoods.com/sales/index.html"`
45	`target="_blank" rel="noopener" onclick="getOutboundLink('https://www.nwoods.com/sales/index.html', 'buy');">Buy</a></li>`
46	`</ul>`
47	`</div>`
48	`</div>`
49	`<hr class="border-b border-gray-600 opacity-50 my-0 py-0" />`
50	`</nav>`
51
52	`<div class="md:flex flex-col md:flex-row md:min-h-screen w-full max-w-screen-xl mx-auto">`
53
54	`<div id="navSide" class="flex flex-col w-full md:w-40 lg:w-48 text-gray-700 bg-white flex-shrink-0">`
55	`<div class="flex-shrink-0 px-8 py-4">`
56	`<button id="navButton" class="rounded-lg md:hidden focus:outline-none focus:ring" aria-label="Navigation">`
57	`<svg fill="currentColor" viewBox="0 0 20 20" class="w-6 h-6">`
58	`<path id="navOpen" 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>`
59	`<path id="navClosed" 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>`
60	`</svg>`
61	`</button>`
62	`</div>`
63	`<nav id="navList" class="min-h-screen hidden md:block sidebar-nav flex-grow px-1 lg:px-4 pb-4 md:pb-0 md:overflow-y-auto break-words">`
64	`<a href="index.html">Basics</a>`
65	`<a href="buildingObjects.html">Building Parts</a>`
66	`<a href="usingModels.html">Using Models</a>`
67	`<a href="dataBinding.html">Data Binding</a>`
68	`<a href="react.html">GoJS with React</a>`
69	`<a href="angular.html">GoJS with Angular</a>`
70	`<a href="textBlocks.html">TextBlocks</a>`
71	`<a href="shapes.html">Shapes</a>`
72	`<a href="pictures.html">Pictures</a>`
73	`<a href="panels.html">Panels</a>`
74	`<a href="tablePanels.html">Table Panels</a>`
75	`<a href="brush.html">Brushes</a>`
76	`<a href="sizing.html">Sizing Objects</a>`
77	`<a href="itemArrays.html">Item Arrays</a>`
78	`<a href="changedEvents.html">Changed Events</a>`
79	`<a href="transactions.html">Transactions</a>`
80	`<a href="viewport.html">Coordinates</a>`
81	`<a href="initialView.html">Initial View</a>`
82	`<a href="collections.html">Collections</a>`
83	`<a href="links.html">Links</a>`
84	`<a href="linkLabels.html">Link Labels</a>`
85	`<a href="connectionPoints.html">Link Points</a>`
86	`<a href="ports.html">Ports</a>`
87	`<a href="nodes.html">Nodes</a>`
88	`<a href="debugging.html">Debugging</a>`
89	`<a href="layouts.html">Layouts</a>`
90	`<a href="trees.html">Trees</a>`
91	`<a href="subtrees.html">SubTrees</a>`
92	`<a href="groups.html">Groups</a>`
93	`<a href="subgraphs.html">SubGraphs</a>`
94	`<a href="sizedGroups.html">Sized Groups</a>`
95	`<a href="selection.html">Selection</a>`
96	`<a href="highlighting.html">Highlighting</a>`
97	`<a href="animation.html">Animation</a>`
98	`<a href="toolTips.html">ToolTips</a>`
99	`<a href="contextmenus.html">Context Menus</a>`
100	`<a href="events.html">Diagram Events</a>`
101	`<a href="tools.html">Tools</a>`
102	`<a href="commands.html">Commands</a>`
103	`<a href="permissions.html">Permissions</a>`
104	`<a href="validation.html">Validation</a>`
105	`<a href="HTMLInteraction.html">HTML Interaction</a>`
106	`<a href="layers.html">Layers & Z-ordering</a>`
107	`<a href="palette.html">Palette</a>`
108	`<a href="overview.html">Overview</a>`
109	`<a href="resizing.html">Resizing Diagrams</a>`
110	`<a href="replacingDeleting.html">Replacing and Deleting</a>`
111	`<a href="buttons.html">Buttons</a>`
112	`<a href="templateMaps.html">Template Maps</a>`
113	`<a href="legends.html">Legends and Titles</a>`
114	`<a href="extensions.html">Extensions</a>`
115	`<a href="geometry.html">Geometry Strings</a>`
116	`<a href="grids.html">Grid Patterns</a>`
117	`<a href="graduatedPanels.html">Graduated Panels</a>`
118	`<a href="makingImages.html">Diagram Images</a>`
119	`<a href="makingSVG.html">Diagram SVG</a>`
120	`<a href="printing.html">Printing</a>`
121	`<a href="serverSideImages.html">Server-side Images</a>`
122	`<a href="nodeScript.html">GoJS in Node.js</a>`
123	`<a href="testing.html">Testing</a>`
124	`<a href="storage.html">Storage</a>`
125	`<a href="performance.html">Performance</a>`
126	`<a href="source.html">Building from Source</a>`
127	`<a href="platforms.html">Platforms</a>`
128	`<a href="deployment.html">Deployment</a>`
129	`</nav>`
130	`</div>`
131	`<div class="pt-4 px-2 md:px-0 lg:px-4 pb-16 w-full overflow-hidden">`
132
133
134
135
136	`<h1>Replacing Diagrams and Models</h1>`
137
138	`<p>`
139	`Many applications will require the programmer to show different Diagrams on the same content area of the page. This is especially common in single-page webapps.`
140	`Often, you do not need to remove the Diagram, and create another one, to do this. Since the Diagram is analagous to a <em>view</em> in <em>model-view</em> architecture,`
141	`you can instead replace the <a>Diagram.model</a>, and perhaps other settings, like the Diagram.nodeTemplateMap or Diagram.layout.`
142	`Or you could build larger template maps that accomodate all Models you wish to present.`
143	`</p>`
144
145	`<p>`
146	`Below is an example of keeping a single Diagram, to be used as the view surface. It has a Model loaded,`
147	`and a button will load a different Model which uses different templates, and sets a different Layout.`
148	`This demonstrates re-use of the Diagram, which is often easier and more efficient than handling multiple Diagrams.`
149	`This is the normal way to show at most one diagram at a time.`
150	`</p>`
151
152	`<pre class="lang-js" id="first"><code>`
153	`// A minimal Diagram`
154	`diagram.nodeTemplate =`
155	`$(go.Node, "Auto",`
156	`$(go.Shape, "RoundedRectangle",`
157	`new go.Binding("fill", "color")),`
158	`$(go.TextBlock,`
159	`{ margin: 3, font: '28px sans-serif' }, // some room around the text`
160	`new go.Binding("text", "key"))`
161	`);`
162
163	`// Node template that is only used by the second model`
164	`diagram.nodeTemplateMap.add("TypeTwo",`
165	`$(go.Node, "Horizontal",`
166	`$(go.Shape, "Circle", { width: 24, height: 24, strokeWidth: 0, portId: "" },`
167	`new go.Binding("fill", "color")),`
168	`$(go.TextBlock,`
169	`{ margin: 2, font: "Bold 15px sans-serif" },`
170	`new go.Binding("text", "key"))`
171	`)`
172	`);`
173
174	`// Another node template that is only used by the second model`
175	`diagram.nodeTemplateMap.add("AnotherType",`
176	`$(go.Node, "Auto",`
177	`$(go.Shape, "Rectangle", { strokeWidth: 1, fill: 'lightyellow' },`
178	`new go.Binding("fill", "color")),`
179	`$(go.TextBlock,`
180	`{ margin: 12, font: "12px sans-serif" },`
181	`new go.Binding("text", "text"))`
182	`)`
183	`);`
184
185	`var firstModel = true;`
186	`loadModel();`
187
188	`// Toggle the Diagram's Model`
189	`var button1 = document.getElementById('button1');`
190	`button1.addEventListener('click', function() {`
191	`loadModel();`
192	`});`
193
194	`function loadModel() {`
195	`if (firstModel) { // load the first model`
196	`diagram.layout = new go.Layout(); // Simple layout`
197	`diagram.model = new go.GraphLinksModel(`
198	`[`
199	`{ key: "Alpha", color: "lightblue" },`
200	`{ key: "Beta", color: "lightblue" },`
201	`{ key: "Gamma", color: "lightgreen" },`
202	`{ key: "Delta", color: "lightgreen" }`
203	`],`
204	`[`
205	`{ from: "Alpha", to: "Beta" },`
206	`{ from: "Gamma", to: "Delta" }`
207	`]);`
208	`} else { // load the second model`
209	`diagram.layout = $(go.TreeLayout, { angle: 90 });`
210
211	`diagram.model = new go.GraphLinksModel(`
212	`[`
213	`{ key: "One", category: "TypeTwo", color: go.Brush.randomColor() },`
214	`{ key: "Two", category: "TypeTwo", color: go.Brush.randomColor() },`
215	`{ key: "Three", category: "TypeTwo", color: go.Brush.randomColor() },`
216	`{ key: "Four", category: "TypeTwo", color: go.Brush.randomColor() },`
217	`{ key: "Five", category: "TypeTwo", color: go.Brush.randomColor() },`
218	`{ key: "Six", category: "TypeTwo", color: go.Brush.randomColor() },`
219	`{ text: "Some comment", category: "AnotherType" }`
220	`],`
221	`[`
222	`{ from: "One", to: "Two" },`
223	`{ from: "One", to: "Three" },`
224	`{ from: "Three", to: "Four" },`
225	`{ from: "Three", to: "Five" },`
226	`{ from: "Four", to: "Six" }`
227	`]);`
228	`}`
229	`firstModel = !firstModel;`
230
231	`}`
232	`</code></pre>`
233	`<div id="dia1"></div>`
234	`<p><button id="button1">Toggle the Diagram's Model</button></p>`
235	`<script>goCode("first", 500, 400, "dia1")</script>`
236
237	`<p>`
238	`Note that changing the Model destroys all state not kept in the Model, such as the currently selected Parts,`
239	`and if there are no data bindings for them, the positions of all Nodes as well, and so on.`
240	`These can be saved in the Model before switching, when they are relevant.`
241	`</p>`
242
243	`<h2 id="TwoDiagramsReusingOneDiv">Two Diagrams re-using one DIV</h2>`
244
245	`<p>`
246	`Sometimes users want to work on two or more Diagrams at once and keep all Diagram state.`
247	`If this is the case, you may wish to put two Diagrams on the page (as all samples with a Palette do),`
248	`or you may wish to put Diagrams into multiple "tabs" or some other mechanism,`
249	`like the <a href="../samples/planogram.html">Planogram sample does with its four Palettes</a>.`
250	`</p>`
251
252	`<p>`
253	`Alternatively, you may wish to display the two Diagrams in the same DIV, one at a time, by swapping them out.`
254	`You can swap the div by setting <a>Diagram.div</a> to <code>null</code> on the first Diagram,`
255	`and setting the Div on the second.`
256	`</p>`
257
258
259	`<pre class="lang-js" id="second"><code>`
260	`// A very minimal Diagram`
261	`diagram.nodeTemplate =`
262	`$(go.Node, "Auto",`
263	`$(go.Shape, "Circle",`
264	`new go.Binding("fill", "color")),`
265	`$(go.TextBlock,`
266	`{ margin: 3 }, // some room around the text`
267	`new go.Binding("text", "key"))`
268	`);`
269
270	`diagram.model = new go.GraphLinksModel([`
271	`{ key: "Alpha", color: "lightblue" },`
272	`{ key: "Beta", color: "orange" }`
273	`], [`
274	`{ from: "Alpha", to: "Beta" },`
275	`]);`
276
277	`var diagram2 = $(go.Diagram);`
278
279	`diagram2.nodeTemplate =`
280	`$(go.Node, "Auto",`
281	`$(go.Shape, "Rectangle", { fill: 'lime' }),`
282	`$(go.TextBlock,`
283	`{ margin: 5, font: '22px sans-serif' },`
284	`new go.Binding("text", "key"))`
285	`);`
286
287	`diagram2.model = new go.GraphLinksModel([`
288	`{ key: "BigNode1" },`
289	`{ key: "BigNode2" },`
290	`{ key: "BigNode3" },`
291	`], [ ]);`
292
293	`var currentDiagram = diagram;`
294
295	`// Toggle the Diagram within this DIV with this button`
296	`var button2 = document.getElementById('button2');`
297	`button2.addEventListener('click', function() {`
298	`// Set one Diagram.div to null, and the other Diagram.div to this div`
299	`if (currentDiagram === diagram) {`
300	`var div = diagram.div;`
301	`diagram.div = null;`
302	`diagram2.div = div;`
303	`currentDiagram = diagram2;`
304	`} else {`
305	`var div = diagram2.div;`
306	`diagram2.div = null;`
307	`diagram.div = div;`
308	`currentDiagram = diagram;`
309	`}`
310
311
312	`});`
313	`</code></pre>`
314	`<div id="dia2"></div>`
315	`<button id="button2">Toggle Diagram within DIV</button>`
316	`<script>goCode("second", 400, 400, "dia2")</script>`
317
318	`<p>`
319	`If you select a Node and move it, and toggle Diagrams back and forth, you will see that the selection and Node positioning persists.`
320	`Both Diagrams remain in memory, only the Div is swapped to use one or the other.`
321	`</p>`
322
323	`<h2 id="PermanentlyDeletingDiagram">Permanently deleting a Diagram</h2>`
324
325	`<p>`
326	`You may wish to remove a Diagram and ensure it leaves no memory footprint.`
327	`To do this, if you have not created any other references to your Diagram or GraphObjects or Tools or Layouts within, you can write:`
328	`</p>`
329
330	`<pre class="lang-js"><code>`
331	`myDiagram.div = null;`
332	`myDiagram = null; // Assumes this is the only reference to your Diagram`
333	`</code></pre>`
334
335	`<p>`
336	`If you have used Pictures, you should also clear the Picture cache, which GoJS creates to store a map of source URLs to Image elements:`
337	`</p>`
338
339	`<pre class="lang-js"><code>`
340	`// Clear any Image references that GoJS is holding onto`
341	`go.Picture.clearCache();`
342	`</code></pre>`
343
344
345
346
347	`</div>`
348	`</div>`
349
350	`<div class="bg-nwoods-primary">`
351	`<section class="max-w-screen-lg text-white container mx-auto py-2 px-12">`
352	`<p id="version" class="leading-none mb-2 my-4">GoJS</p>`
353	`</section>`
354	`</div><footer class="bg-nwoods-primary text-white">`
355	`<div class="container max-w-screen-lg mx-auto px-8">`
356	`<div class="w-full py-6">`
357
358	`<div class="max-w-screen-lg xl:max-w-screen-xl mx-auto px-4 sm:px-6 md:px-8">`
359	`<ul class="text-sm font-medium pb-14 sm:pb-20 grid grid-cols-1 sm:grid-cols-3 gap-y-10">`
360	`<li class="list-none row-span-2">`
361	`<h2 class="text-base font-semibold tracking-wide">GoJS</h2>`
362	`<ul class="list-none space-y-4 md:space-y-1 px-0">`
363	`<li>`
364	`<a href="../samples/index.html">Samples</a>`
365	`</li>`
366	`<li>`
367	`<a href="../learn/index.html">Learn</a>`
368	`</li>`
369	`<li>`
370	`<a href="../intro/index.html">Intro</a>`
371	`</li>`
372	`<li>`
373	`<a href="../api/index.html">API</a>`
374	`</li>`
375	`<li>`
376	`<a href="../changelog.html">Changelog</a>`
377	`</li>`
378	`<li>`
379	`<a href="https://github.com/NorthwoodsSoftware/GoJS">GitHub</a>`
380	`</li>`
381	`</ul>`
382	`</li>`
383	`<li class="list-none row-span-2">`
384	`<h2 class="text-base font-semibold tracking-wide">Support</h2>`
385	`<ul class="list-none space-y-4 md:space-y-1 px-0">`
386	`<li>`
387	`<a href="https://www.nwoods.com/contact.html"`
388	`target="_blank" rel="noopener" onclick="getOutboundLink('https://www.nwoods.com/contact.html', 'contact');">Contact</a>`
389	`</li>`
390	`<li>`
391	`<a href="https://forum.nwoods.com/c/gojs">Forum</a>`
392	`</li>`
393	`<li>`
394	`<a href="https://www.nwoods.com/app/activate.aspx?sku=gojs">Activate</a>`
395	`</li>`
396	`<li>`
397	`<a href="https://www.nwoods.com/sales/index.html"`
398	`target="_blank" rel="noopener" onclick="getOutboundLink('https://www.nwoods.com/sales/index.html', 'buy');">Buy</a>`
399	`</li>`
400	`<li>`
401	`<a href="https://www.youtube.com/channel/UC9We8EoX596-6XFjJDtZIDg">Videos</a>`
402	`</li>`
403	`</ul>`
404	`</li>`
405	`<li class="list-none row-span-2">`
406	`<h2 class="text-base font-semibold tracking-wide">Company</h2>`
407	`<ul class="list-none space-y-4 md:space-y-1 px-0">`
408	`<li>`
409	`<a href="https://www.nwoods.com">Northwoods</a>`
410	`</li>`
411	`<li>`
412	`<a href="https://www.nwoods.com/about.html">About Us</a>`
413	`</li>`
414	`<li>`
415	`<a href="https://www.nwoods.com/contact.html">Contact Us</a>`
416	`</li>`
417	`<li>`
418	`<a href="https://twitter.com/northwoodsgo">Twitter</a>`
419	`</li>`
420
421	`</ul>`
422	`</li>`
423	`</ul>`
424
425
426	`<p class="text-sm text-gray-100 md:mb-6">`
427	`Copyright 1998-2021 <a class="text-white" href="https://www.nwoods.com">Northwoods Software</a>`
428	`</p>`
429	`</div>`
430	`</div>`
431	`</footer> </body>`
432
433	`<script async src="https://www.googletagmanager.com/gtag/js?id=UA-1506307-5"></script>`
434	`<script>`
435	`window.dataLayer = window.dataLayer \|\| [];`
436	`function gtag(){dataLayer.push(arguments);}`
437	`gtag('js', new Date()); gtag('config', 'UA-1506307-5');`
438	`var getOutboundLink = function(url, label) {`
439	`gtag('event', 'click', {`
440	`'event_category': 'outbound',`
441	`'event_label': label,`
442	`'transport_type': 'beacon'`
443	`});`
444	`}`
445
446	`// topnav`
447	`var topButton = document.getElementById("topnavButton");`
448	`var topnavList = document.getElementById("topnavList");`
449	`topButton.addEventListener("click", function() {`
450	`this.classList.toggle("active");`
451	`topnavList.classList.toggle("hidden");`
452	`document.getElementById("topnavOpen").classList.toggle("hidden");`
453	`document.getElementById("topnavClosed").classList.toggle("hidden");`
454	`});`
455	`</script>`
456	`<script src="../assets/js/prism.js"></script>`
457	`<script src="../release/go.js"></script>`
458	`<script src="../assets/js/goDoc.js"></script>`
459	`<script>`
460	`document.addEventListener("DOMContentLoaded", function() {`
461	`if (window.go) document.getElementById('version').textContent = "GoJS version " + go.version;`
462	`if (window.goDoc) window.goDoc();`
463	`var d = window.diagrams;`
464	`for (var i = 0; i < d.length; i++) {`
465	`var dargs = d[i];`
466	`goCodeExecute(dargs[0], dargs[1], dargs[2], dargs[3], dargs[4]);`
467	`}`
468	`if (window.extra) window.extra();`
469	`});`
470	`</script>`
471	`</html>`