Sometimes it may be necessary to resize the div that contains a GoJS Diagram. In older browsers or in Internet Explorer, 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.
The following example has a button that enlarges the Diagram's div. When it is clicked, the div is visibly resized but in older browsers the Diagram remains the same size.
// A minimal Diagram
diagram.nodeTemplate =
new go.Node("Auto")
.add(
new go.Shape("RoundedRectangle")
.bind("fill", "color"),
new go.TextBlock({ margin: 3 }) // some room around the text
.bind("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
const button1 = document.getElementById('button1');
button1.addEventListener('click', () => {
const div = diagram.div;
div.style.width = '200px';
});
This button won't work in Internet Explorer:
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 Diagram.requestUpdate after 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.
Below is nearly identical code, except that a call to Diagram.requestUpdate has been added.
// A minimal Diagram
diagram.nodeTemplate =
new go.Node("Auto")
.add(
new go.Shape("RoundedRectangle")
.bind("fill", "color"),
new go.TextBlock({ margin: 3 }) // some room around the text
.bind("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
const button2 = document.getElementById('button2');
button2.addEventListener('click', () => {
const div = diagram.div;
div.style.width = '200px';
diagram.requestUpdate(); // Needed!
});
In recent browsers the calls to Diagram.requestUpdate will not be necessary, but they will not cause any harm. Still, if you know that all of your users will be using recent browsers and if you are using GoJS version 2.1.26 or later, you do not need to make this call.