gojs
Version:
Interactive diagrams, charts, and graphs, such as trees, flowcharts, orgcharts, UML, BPMN, or business diagrams
156 lines (146 loc) • 6.75 kB
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>GoJS Sized Groups -- 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>Groups Without Placeholders</h1>
<p>
Although it is very common to use a <a>Placeholder</a> inside a <a>Group</a>, it is not required.
Using a <a>Shape</a>, for example, instead of a <a>Placeholder</a> permits features such as
having a group maintain a fixed size, independent of the sizes and positions of its member nodes,
and even when there are no member nodes at all.
It also may allow the user to resize the "area" if that functionality is desired.
</p>
<h2 id="FixedSizeGroups">Fixed size Groups</h2>
<p>
Not using a <a>Placeholder</a> in a <a>Group</a> means that you have to maintain the size and position of the group,
because it cannot depend on the size and position of its member nodes.
In these examples we will explicitly set and/or bind the <a>Part.location</a> of the nodes, including the groups.
The <a>Shape</a> that replaces the Placeholder in the group's template should also get its <a>GraphObject.desiredSize</a> set or bound.
</p>
<pre class="lang-js" id="fixedSize">
diagram.nodeTemplate =
$(go.Node,
new go.Binding("location", "loc", go.Point.parse),
$(go.TextBlock,
new go.Binding("text", "key"))
);
diagram.groupTemplate =
$(go.Group, "Vertical",
{ selectionObjectName: "PH",
locationObjectName: "PH" },
new go.Binding("location", "loc", go.Point.parse),
$(go.TextBlock, // group title
{ font: "Bold 12pt Sans-Serif" },
new go.Binding("text", "key")),
$(go.Shape, // using a Shape instead of a Placeholder
{ name: "PH",
fill: "lightyellow" },
new go.Binding("desiredSize", "size", go.Size.parse))
);
var nodeDataArray = [
{ key: "Alpha", loc: "0 0" },
{ key: "Beta", group: "Omega", loc: "75 75" },
{ key: "Gamma", group: "Omega", loc: "125 75" },
{ key: "Omega", isGroup: true, loc: "50 50", size: "150 50" },
{ key: "Delta", loc: "200 0" }
];
var linkDataArray = [
{ from: "Alpha", to: "Beta" }, // from outside the Group to inside it
{ from: "Beta", to: "Gamma" }, // this link is a member of the Group
{ from: "Omega", to: "Delta" } // from the Group to a Node
];
diagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);
diagram.select(diagram.findNodeForKey("Omega"));
</pre>
<script>goCode("fixedSize", 600, 150)</script>
<p>
Note that moving the "Beta" or "Gamma" nodes does <i>not</i> change the size or position of the "Omega" group.
However moving or copying or deleting the group includes those member nodes in the operation.
</p>
<p>
One can control where the user may drag member nodes.
For example, the <a href="../samples/swimlanes.html" target="_blank">Swim Lanes</a> sample
demonstrates a custom <a>Part.dragComputation</a> function that limits the
motion of a member node to stay within its containing group.
</p>
<h2 id="ResizableGroups">Resizable Groups</h2>
<p>
You can make the main shape resizable by the user.
(At the current time groups are not rotatable.)
</p>
<p>
This example also makes the <a>Part.location</a> and <a>GraphObject.desiredSize</a> data bindings TwoWay,
so that as the user moves groups or resizes their main shapes, the data in the model is updated automatically.
</p>
<pre class="lang-js" id="resizable">
diagram.nodeTemplate =
$(go.Node,
new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
$(go.TextBlock,
new go.Binding("text", "key"))
);
diagram.groupTemplate =
$(go.Group, "Vertical",
{ selectionObjectName: "PH",
locationObjectName: "PH",
resizable: true,
resizeObjectName: "PH" },
new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
$(go.TextBlock, // group title
{ font: "Bold 12pt Sans-Serif" },
new go.Binding("text", "key")),
$(go.Shape, // using a Shape instead of a Placeholder
{ name: "PH",
fill: "lightyellow" },
new go.Binding("desiredSize", "size", go.Size.parse).makeTwoWay(go.Size.stringify))
);
var nodeDataArray = [
{ key: "Alpha", loc: "0 0" },
{ key: "Beta", group: "Omega", loc: "75 75" },
{ key: "Gamma", group: "Omega", loc: "125 75" },
{ key: "Omega", isGroup: true, loc: "50 50", size: "150 50" },
{ key: "Delta", loc: "200 0" }
];
var linkDataArray = [
{ from: "Alpha", to: "Beta" }, // from outside the Group to inside it
{ from: "Beta", to: "Gamma" }, // this link is a member of the Group
{ from: "Omega", to: "Delta" } // from the Group to a Node
];
diagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);
diagram.select(diagram.findNodeForKey("Omega"));
</pre>
<script>goCode("resizable", 600, 150)</script>
<p>
It is also possible to control how the user resizes a group.
For example, the <a href="../samples/swimlanes.html" target="_blank">Swim Lanes</a> sample
demonstrates a custom <a>ResizingTool</a> that limits how small each lane can go.
It also demonstrates a custom <a>Adornment</a> that has only two resize handles.
</p>
<h2 id="ContainersThatAreNotGroups">Containers that are not Groups</h2>
<p>
You do not have to use <a>Group</a>s as the only mechanism by which to organize a collection of <a>Part</a>s.
For example, the <a href="../samples/swimBands.html" target="_blank">Layer Bands</a> sample demonstrates
how some <a>Layout</a>s can be customized to automatically maintain the positions and sizes of special parts
that are in the background, appearing to surround the nodes that belong to each layout layer.
</p>
<p>
Not using <a>Group</a>s also means that it becomes possible to avoid some of the restrictions inherent in Groups,
such as the limitation that each Part can have at most one <a>Part.containingGroup</a>.
The <a href="../samples/sharedStates.html" target="_blank">Shared States</a> sample demonstrates how one can make
it appear that more than one "group" can contain a node.
However, this requires some additional custom <a>Tool</a>s and custom <a>Layout</a>s,
or always explicitly setting/binding the location and size of every node and "group".
</p>
</div>
</div>
</body>
</html>