163 lines
6.0 KiB
HTML
163 lines
6.0 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>Grid Layout</title>
|
|
<meta name="description" content="Interactive demonstration of layout-on-a-grid features by the GridLayout class." />
|
|
<!-- 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
|
|
{
|
|
layout: $(go.GridLayout,
|
|
{ comparer: go.GridLayout.smartComparer })
|
|
// other properties are set by the layout function, defined below
|
|
});
|
|
|
|
// define the Node template
|
|
myDiagram.nodeTemplate =
|
|
$(go.Node, "Spot",
|
|
// make sure the Node.location is different from the Node.position
|
|
{ locationSpot: go.Spot.Center },
|
|
new go.Binding("text", "text"), // for sorting
|
|
$(go.Shape, "Ellipse",
|
|
{ fill: "lightgray",
|
|
stroke: null,
|
|
desiredSize: new go.Size(30, 30) },
|
|
new go.Binding("fill", "fill"),
|
|
new go.Binding("desiredSize", "size")),
|
|
$(go.TextBlock,
|
|
// the default alignment is go.Spot.Center
|
|
new go.Binding("text", "text"))
|
|
);
|
|
|
|
// create an array of data describing randomly colored and sized nodes
|
|
var nodeDataArray = [];
|
|
for (var i = 0; i < 100; i++) {
|
|
nodeDataArray.push({
|
|
key: i,
|
|
text: i.toString(),
|
|
fill: go.Brush.randomColor(),
|
|
size: new go.Size(30+Math.floor(Math.random()*50), 30+Math.floor(Math.random()*50))
|
|
});
|
|
}
|
|
|
|
// randomize the data
|
|
for (i = 0; i < nodeDataArray.length; i++) {
|
|
var swap = Math.floor(Math.random() * nodeDataArray.length);
|
|
var temp = nodeDataArray[swap];
|
|
nodeDataArray[swap] = nodeDataArray[i];
|
|
nodeDataArray[i] = temp;
|
|
}
|
|
|
|
// create a Model that does not know about link or group relationships
|
|
myDiagram.model = new go.Model(nodeDataArray);
|
|
|
|
// layout using the latest parameters
|
|
layout();
|
|
}
|
|
|
|
// Update the layout from the controls, and then perform the layout again
|
|
function layout() {
|
|
myDiagram.startTransaction("change Layout");
|
|
var lay = myDiagram.layout;
|
|
|
|
var wrappingColumn = document.getElementById("wrappingColumn").value;
|
|
lay.wrappingColumn = parseFloat(wrappingColumn, 10);
|
|
|
|
var wrappingWidth = document.getElementById("wrappingWidth").value;
|
|
lay.wrappingWidth = parseFloat(wrappingWidth, 10);
|
|
|
|
var cellSize = document.getElementById("cellSize").value;
|
|
lay.cellSize = go.Size.parse(cellSize);
|
|
|
|
var spacing = document.getElementById("spacing").value;
|
|
lay.spacing = go.Size.parse(spacing);
|
|
|
|
var alignment = getRadioValue("alignment");
|
|
if (alignment === "Position") {
|
|
lay.alignment = go.GridLayout.Position;
|
|
} else {
|
|
lay.alignment = go.GridLayout.Location;
|
|
}
|
|
|
|
var arrangement = getRadioValue("arrangement");
|
|
if (arrangement === "LeftToRight") {
|
|
lay.arrangement = go.GridLayout.LeftToRight;
|
|
} else {
|
|
lay.arrangement = go.GridLayout.RightToLeft;
|
|
}
|
|
|
|
var sorting = document.getElementById("sorting").value;
|
|
switch (sorting) {
|
|
default:
|
|
case "Forward": lay.sorting = go.GridLayout.Forward; break;
|
|
case "Reverse": lay.sorting = go.GridLayout.Reverse; break;
|
|
case "Ascending": lay.sorting = go.GridLayout.Ascending; break;
|
|
case "Descending": lay.sorting = go.GridLayout.Descending; break;
|
|
}
|
|
|
|
myDiagram.commitTransaction("change Layout");
|
|
}
|
|
|
|
function getRadioValue(name) {
|
|
var radio = document.getElementsByName(name);
|
|
for (var i = 0; i < radio.length; i++) {
|
|
if (radio[i].checked) return radio[i].value;
|
|
}
|
|
}
|
|
</script>
|
|
</head>
|
|
<body onload="init()">
|
|
<div id="sample">
|
|
<div style="margin-bottom: 5px; padding: 5px; background-color: aliceblue">
|
|
<span style="display: inline-block; vertical-align: top; padding: 5px">
|
|
<b>GridLayout Properties</b>
|
|
<br />
|
|
Wrapping Column:
|
|
<input type="text" size="3" id="wrappingColumn" value="NaN" onchange="layout()" />
|
|
(NaN means there's no limit)
|
|
<br />
|
|
Wrapping Width:
|
|
<input type="text" size="3" id="wrappingWidth" value="NaN" onchange="layout()" />
|
|
(NaN means use the diagram's viewport width)
|
|
<br />
|
|
Cell Size:
|
|
<input type="text" size="8" id="cellSize" value="NaN NaN" onchange="layout()" />
|
|
(NaN x NaN means use a cell size big enough to hold any node)
|
|
<br />
|
|
Spacing:
|
|
<input type="text" size="8" id="spacing" value="10 10" onchange="layout()" />
|
|
(the minimum space between the nodes)
|
|
<br />
|
|
Alignment:
|
|
<input type="radio" name="alignment" onclick="layout()" value="Position" /> Position
|
|
<input type="radio" name="alignment" onclick="layout()" value="Location" checked="checked" /> Location
|
|
<br />
|
|
Arrangement:
|
|
<input type="radio" name="arrangement" onclick="layout()" value="LeftToRight" checked="checked" /> LeftToRight
|
|
<input type="radio" name="arrangement" onclick="layout()" value="RightToLeft" /> RightToLeft
|
|
<br />
|
|
Sorting:
|
|
<select name="sorting" id="sorting" onchange="layout()">
|
|
<option value="Forward" selected="selected">Forward</option>
|
|
<option value="Reverse">Reverse</option>
|
|
<option value="Ascending">Ascending</option>
|
|
<option value="Descending">Descending</option>
|
|
</select>
|
|
</span>
|
|
</div>
|
|
<div id="myDiagramDiv" style="background-color: white; border: solid 1px black; width: 100%; height: 500px"></div>
|
|
<p>
|
|
For information on <b>GridLayout</b> and its properties, see the <a>GridLayout</a> documentation page.
|
|
</p>
|
|
</div>
|
|
</body>
|
|
</html> |