gojs
Version:
Interactive diagrams, charts, and graphs, such as trees, flowcharts, orgcharts, UML, BPMN, or business diagrams
165 lines (146 loc) • 7.44 kB
HTML
<html>
<head>
<meta charset="UTF-8">
<title>Content Alignment examples</title>
<meta name="description" content="An interactive GoJS Diagram demonstrating viewports and document bounds and alignment and scaling." />
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Copyright 1998-2020 by Northwoods Software Corporation. -->
<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
{
"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>