gojs
Version:
Interactive diagrams, charts, and graphs, such as trees, flowcharts, orgcharts, UML, BPMN, or business diagrams
476 lines (426 loc) • 20.5 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, viewport-fit=cover"/>
<link rel="stylesheet" href="../assets/css/style.css"/>
<!-- Copyright 1998-2023 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="my-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="typings.html">Typings</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 & 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">
<h1>Replacing Diagrams and Models</h1>
<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 analogous 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 accommodate all Models you wish to present.
</p>
<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.
</p>
<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"))
);
// 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"))
)
);
// 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"))
)
);
var firstModel = true;
loadModel();
// Toggle the Diagram's Model
var button1 = document.getElementById('button1');
button1.addEventListener('click', () => {
loadModel();
});
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 });
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;
}
</code></pre>
<div id="dia1"></div>
<p><button id="button1">Toggle the Diagram's Model</button></p>
<script>goCode("first", 500, 400, "dia1")</script>
<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.
</p>
<h2 id="TwoDiagramsReusingOneDiv">Two Diagrams re-using one DIV</h2>
<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>.
</p>
<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.
</p>
<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"))
);
diagram.model = new go.GraphLinksModel([
{ key: "Alpha", color: "lightblue" },
{ key: "Beta", color: "orange" }
], [
{ from: "Alpha", to: "Beta" },
]);
var diagram2 = $(go.Diagram);
diagram2.nodeTemplate =
$(go.Node, "Auto",
$(go.Shape, "Rectangle", { fill: 'lime' }),
$(go.TextBlock,
{ margin: 5, font: '22px sans-serif' },
new go.Binding("text", "key"))
);
diagram2.model = new go.GraphLinksModel([
{ key: "BigNode1" },
{ key: "BigNode2" },
{ key: "BigNode3" },
], [ ]);
var currentDiagram = diagram;
// Toggle the Diagram within this DIV with this button
var button2 = document.getElementById('button2');
button2.addEventListener('click', () => {
// 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;
}
});
</code></pre>
<div id="dia2"></div>
<button id="button2">Toggle Diagram within DIV</button>
<script>goCode("second", 400, 400, "dia2")</script>
<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.
</p>
<h2 id="PermanentlyDeletingDiagram">Permanently deleting a Diagram</h2>
<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:
</p>
<pre class="lang-js"><code>
myDiagram.div = null;
myDiagram = null; // Assumes this is the only reference to your Diagram
</code></pre>
<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:
</p>
<pre class="lang-js"><code>
// Clear any Image references that GoJS is holding onto
go.Picture.clearCache();
</code></pre>
</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">
<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-6 grid grid-cols-2 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 target="_blank" href="https://www.nwoods.com">Northwoods</a>
</li>
<li>
<a target="_blank" href="https://www.nwoods.com/about.html">About Us</a>
</li>
<li>
<a target="_blank" href="https://www.nwoods.com/contact.html">Contact Us</a>
</li>
<li>
<a target="_blank" href="https://www.nwoods.com/consulting.html">Consulting</a>
</li>
<li>
<a target="_blank" href="https://twitter.com/northwoodsgo">Twitter</a>
</li>
</ul>
</li>
</ul>
<p class="text-sm text-gray-100 md:mb-6">
Copyright 1998-2023 <a class="text-white" href="https://www.nwoods.com">Northwoods Software</a>
</p>
</div>
</div>
</footer> </body>
<script async src="https://www.googletagmanager.com/gtag/js?id=G-S5QK8VSK84"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date()); gtag('config', 'G-S5QK8VSK84');
var getOutboundLink = function(url, label) {
gtag('event', 'click', {
'event_category': 'outbound',
'event_label': label,
'transport_type': 'beacon'
});
}
// 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");
});
</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>
</html>