gojs
Version:
Interactive diagrams, charts, and graphs, such as trees, flowcharts, orgcharts, UML, BPMN, or business diagrams
111 lines (99 loc) • 3.83 kB
HTML
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Resizing Diagrams -- Northwoods Software</title>
<!-- Copyright 1998-2020 by Northwoods Software Corporation. -->
<script src="../release/go.js"></script>
<script src="goIntro.js"></script>
</head>
<body onload="goIntro()">
<div id="container" class="container-fluid">
<div id="content">
<h1>Resizing Diagrams</h1>
<p>
Sometimes it may be necessary to resize the div that contains a GoJS Diagram. GoJS does not listen or attempt to detect changes in the div's size, so you must manually tell each Diagram when you perform an action that resizes its containing div.
</p>
<h2 id="UsingRequestUpdateToResizeDiv">Using <a>Diagram.requestUpdate</a> to resize a Div</h2>
<p>
The following example has a button that enlarges the Diagram's div. When it is clicked, the div is visibly resized but the Diagram remains the same size.
</p>
<pre class="lang-js" id="first">
// A minimal Diagram
diagram.nodeTemplate =
$(go.Node, "Auto",
$(go.Shape, "RoundedRectangle",
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" },
{ key: "Gamma", color: "lightgreen" },
{ key: "Delta", color: "pink" }
],
[
{ from: "Alpha", to: "Beta" },
{ from: "Alpha", to: "Gamma" },
{ from: "Gamma", to: "Delta" },
{ from: "Delta", to: "Alpha" }
]);
// Resize the diagram with this button
var button1 = document.getElementById('button1');
button1.addEventListener('click', function() {
var div = diagram.div;
div.style.width = '200px';
});
</pre>
<div id="dia1"></div>
<p>This button won't work: <button id="button1">Expand div</button></p>
<script>goCode("first", 100, 110, go.Diagram, "dia1")</script>
<p>
Typically we will want the Diagram to resize to its div at the same time that the div resizes. To do this we add a call to <a>Diagram.requestUpdate</a> <em>after</em> we have resized the div. This checks to see if the Diagram's div has changed size, and if so, redraws the diagram at the appropriate new dimensions.
</p>
<p>
Below is nearly identical code, except that a call to <a>Diagram.requestUpdate</a> has been added.
</p>
<pre class="lang-js" id="second">
// A minimal Diagram
diagram.nodeTemplate =
$(go.Node, "Auto",
$(go.Shape, "RoundedRectangle",
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" },
{ key: "Gamma", color: "lightgreen" },
{ key: "Delta", color: "pink" }
],
[
{ from: "Alpha", to: "Beta" },
{ from: "Alpha", to: "Gamma" },
{ from: "Gamma", to: "Delta" },
{ from: "Delta", to: "Alpha" }
]);
// Resize the diagram with this button
var button2 = document.getElementById('button2');
button2.addEventListener('click', function() {
var div = diagram.div;
div.style.width = '200px';
diagram.requestUpdate(); // Needed!
});
</pre>
<div id="dia2"></div>
<button id="button2">Expand div</button>
<script>goCode("second", 100, 110, go.Diagram, "dia2")</script>
<p>See also the <a href="../samples/tabs.html">jQuery Tabs sample</a>.</p>
</div>
</div>
</body>
</html>