-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathcontentAlign.html
166 lines (149 loc) · 7.08 KB
/
contentAlign.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
156
157
158
159
160
161
162
163
164
165
166
<!DOCTYPE html>
<html>
<head>
<title>Content Alignment examples</title>
<meta name="description" content="An interactive GoJS Diagram demonstrating viewports and document bounds and alignment and scaling." />
<!-- Copyright 1998-2016 by Northwoods Software Corporation. -->
<meta charset="UTF-8">
<script src="go.js"></script>
<link href="../assets/css/goSamples.css" rel="stylesheet" type="text/css" /> <!-- you don't need to use this -->
<script src="goSamples.js"></script> <!-- this is only for the GoJS Samples framework -->
<script id="code">
function init() {
if (window.goSamples) goSamples(); // init for these samples -- you don't need to call this
var $ = go.GraphObject.make; // for conciseness in defining templates
myDiagram = $(go.Diagram, "myDiagramDiv", // Must be the ID or reference to div
{
// start everything in the middle of the viewport
initialContentAlignment: go.Spot.Center,
"undoManager.isEnabled": true
});
for (var i = 0; i < 15; i++) {
myDiagram.add( // add an unbound Node to the diagram at a random position
$(go.Node,
{ position: new go.Point(Math.random() * 251, Math.random() * 251) },
$(go.Shape, "Circle",
{ fill: go.Brush.randomColor(150), strokeWidth: 2, desiredSize: new go.Size(30,30) })
));
}
// automatically update information in the panel
myDiagram.addDiagramListener("DocumentBoundsChanged", updateDOM);
myDiagram.addDiagramListener("ViewportBoundsChanged", updateDOM);
var myPosX = document.getElementById("positionX");
var myPosY = document.getElementById("positionY");
var myScale = document.getElementById("scale");
var myDocBounds = document.getElementById("docBounds");
function updateDOM(e) {
var d = e.diagram;
var pos = d.position;
myPosX.value = Math.round(pos.x, 2);
myPosY.value = Math.round(pos.y, 2);
myScale.value = d.scale;
var b = d.documentBounds;
myDocBounds.textContent = b.x.toFixed(2) + ", " + b.y.toFixed(2) + " " + b.width.toFixed(2) + " x " + b.height.toFixed(2);
}
}
// occurs when one of the contentAlign radio buttons is clicked
function changeContentAlign(spot) {
myDiagram.startTransaction("");
myDiagram.contentAlignment = go.Spot[spot];
myDiagram.commitTransaction("");
}
function changePosition(posx, posy) {
myDiagram.startTransaction("");
var x = parseInt(posx);
var y = parseInt(posy);
myDiagram.position = new go.Point(x, y);
myDiagram.commitTransaction("");
}
function changeScale(scale) {
var scale = parseFloat(scale);
if (scale > 0) {
myDiagram.startTransaction("");
myDiagram.scale = scale;
myDiagram.commitTransaction("");
}
}
function changeFixedBounds(fx, fy, fw, fh) {
myDiagram.startTransaction("");
var x = parseFloat(fx);
var y = parseFloat(fy);
var h = parseFloat(fw);
var w = parseFloat(fh);
myDiagram.fixedBounds = new go.Rect(x, y, Math.max(1, w), Math.max(1, h));
myDiagram.commitTransaction("");
}
function changePadding(pt, pr, pb, pl) {
myDiagram.startTransaction("");
var t = parseFloat(pt);
var r = parseFloat(pr);
var b = parseFloat(pb);
var l = parseFloat(pl);
myDiagram.padding = new go.Margin(t, r, b, l);
myDiagram.commitTransaction("");
}
function changeAutoScale(scaleType) {
myDiagram.startTransaction("");
myDiagram.autoScale = go.Diagram[scaleType];
myDiagram.commitTransaction("");
}
</script>
</head>
<body onload="init()">
<div id="sample">
<h3>GoJS Content Alignment</h3>
<div style="width:100%; white-space: nowrap">
<div style="display: inline-block; vertical-align: top; width:50%">
<div id="myDiagramDiv" style="height: 400px; background: whitesmoke; border: solid 1px black"></div>
</div>
<div style="display: inline-block; vertical-align: top; width:50%">
<div style="border: solid 1px gray; padding:5px">
Diagram.documentBounds: <div id="docBounds" style="display: inline-block"></div>
<p>Diagram.contentAlignment:<br />
<input type="radio" name="contentAlign" onclick="changeContentAlign(this.id)" id="None" checked/><label for="None">None</label>
<input type="radio" name="contentAlign" onclick="changeContentAlign(this.id)" id="Center"/><label for="Center">Center</label><br/>
<input type="radio" name="contentAlign" onclick="changeContentAlign(this.id)" id="Left"/><label for="Left">Left</label>
<input type="radio" name="contentAlign" onclick="changeContentAlign(this.id)" id="Right"/><label for="Right">Right</label><br/>
<input type="radio" name="contentAlign" onclick="changeContentAlign(this.id)" id="Top"/><label for="Top">Top</label>
<input type="radio" name="contentAlign" onclick="changeContentAlign(this.id)" id="Bottom"/><label for="Bottom">Bottom</label><br/>
</p>
<p>Diagram.position:<br />
<input type="text" size="2" id="positionX" value="NaN"/>
<input type="text" size="2" id="positionY" value="NaN"/>
<input type="button" onclick="changePosition(positionX.value, positionY.value)" value="Change"/>
</p>
<p>Diagram.scale:<br />
<input type="text" size="2" id="scale" value="1"/>
<input type="button" onclick="changeScale(scale.value)" value="Change"/>
</p>
<p>Diagram.fixedBounds (x, y, width, height):<br />
<input type="text" size="2" id="fixedX" value="NaN"/>
<input type="text" size="2" id="fixedY" value="NaN"/>
<input type="text" size="2" id="fixedW" value="NaN"/>
<input type="text" size="2" id="fixedH" value="NaN"/>
<input type="button" onclick="changeFixedBounds(fixedX.value, fixedY.value, fixedW.value, fixedH.value)" value="Set"/>
</p>
<p>Diagram.padding (top, right, bottom, left):<br />
<input type="text" size="2" id="padT" value="5"/>
<input type="text" size="2" id="padR" value="5"/>
<input type="text" size="2" id="padB" value="5"/>
<input type="text" size="2" id="padL" value="5"/>
<input type="button" onclick="changePadding(padT.value, padR.value, padB.value, padL.value)" value="Set"/>
</p>
<p>Diagram.autoScale:<br />
<input type="radio" name="autoScale" onclick="changeAutoScale(this.value)" id="DiagramNone" value="None" checked /><label for="DiagramNone">Diagram.None</label><br/>
<input type="radio" name="autoScale" onclick="changeAutoScale(this.id)" id="Uniform" /><label for="Uniform">Diagram.Uniform</label><br/>
<input type="radio" name="autoScale" onclick="changeAutoScale(this.id)" id="UniformToFill" /><label for="UniformToFill">Diagram.UniformToFill</label><br/>
(but no greater than CommandHandler.defaultScale)
</p>
<input type="button" onclick="myDiagram.commandHandler.zoomToFit()" value="Zoom to Fit"/>
</div>
</div>
<p>
A Diagram's <a>Diagram.contentAlignment</a> property determines how parts are positioned when the
<a>Diagram.viewportBounds</a> width or height is different than the <a>Diagram.documentBounds</a> width or height.
</p>
</div>
</div>
</body>
</html>