forked from NorthwoodsSoftware/GoJS
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathsizedGroups.html
155 lines (146 loc) · 6.44 KB
/
sizedGroups.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
<!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-2019 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>