166 lines
7.0 KiB
HTML
166 lines
7.0 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>Content Alignment examples</title>
|
|
<meta name="description" content="An interactive GoJS Diagram demonstrating viewports and document bounds and alignment and scaling." />
|
|
<!-- Copyright 1998-2017 by Northwoods Software Corporation. -->
|
|
<meta charset="UTF-8">
|
|
<script src="../release/go.js"></script>
|
|
<script src="../assets/js/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">
|
|
<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 black; 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="3" id="positionX" value="NaN"/>
|
|
<input type="text" size="3" id="positionY" value="NaN"/>
|
|
<input type="button" onclick="changePosition(positionX.value, positionY.value)" value="Change"/>
|
|
</p>
|
|
|
|
<p>Diagram.scale:<br />
|
|
<input type="text" size="3" 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="3" id="fixedX" value="NaN"/>
|
|
<input type="text" size="3" id="fixedY" value="NaN"/>
|
|
<input type="text" size="3" id="fixedW" value="NaN"/>
|
|
<input type="text" size="3" 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="3" id="padT" value="5"/>
|
|
<input type="text" size="3" id="padR" value="5"/>
|
|
<input type="text" size="3" id="padB" value="5"/>
|
|
<input type="text" size="3" 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>
|