You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
259 lines
11 KiB
259 lines
11 KiB
(function (factory) {
|
|
if (typeof module === "object" && typeof module.exports === "object") {
|
|
var v = factory(require, exports);
|
|
if (v !== undefined) module.exports = v;
|
|
}
|
|
else if (typeof define === "function" && define.amd) {
|
|
define(["require", "exports", "../release/go", "./PackedLayout"], factory);
|
|
}
|
|
})(function (require, exports) {
|
|
'use strict';
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
/*
|
|
* Copyright (C) 1998-2019 by Northwoods Software Corporation. All Rights Reserved.
|
|
*/
|
|
var go = require("../release/go");
|
|
var PackedLayout_1 = require("./PackedLayout");
|
|
var myDiagram;
|
|
var aspectRatio;
|
|
var layoutWidth;
|
|
var layoutHeight;
|
|
var nodeSpacing;
|
|
var hasCircularNodes;
|
|
var numNodes;
|
|
var nodeMinSide;
|
|
var nodeMaxSide;
|
|
var sameSides;
|
|
// nodes need to be randomized again if any of these change
|
|
var minSidePrevious;
|
|
var maxSidePrevious;
|
|
var sameSidesPrevious;
|
|
function init() {
|
|
if (window.goSamples)
|
|
window.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
|
|
{
|
|
'animationManager.isEnabled': true,
|
|
layout: $(PackedLayout_1.PackedLayout),
|
|
scale: 0.75, isReadOnly: true
|
|
});
|
|
// Nodes have a template with bindings for size, shape, and fill color
|
|
myDiagram.nodeTemplate =
|
|
$(go.Node, 'Auto', new go.Binding('visible', 'visible'), $(go.Shape, { strokeWidth: 0 }, new go.Binding('figure', 'figure'), new go.Binding('width', 'width'), new go.Binding('height', 'height'), new go.Binding('fill', 'fill')));
|
|
myDiagram.model = new go.GraphLinksModel([]);
|
|
// find the elements in the DOM which control configuration
|
|
aspectRatio = document.getElementById('aspectRatio');
|
|
layoutWidth = document.getElementById('width');
|
|
layoutHeight = document.getElementById('height');
|
|
nodeSpacing = document.getElementById('nodeSpacing');
|
|
hasCircularNodes = document.getElementById('hasCircularNodes');
|
|
numNodes = document.getElementById('numNodes');
|
|
nodeMinSide = document.getElementById('nodeMinSide');
|
|
nodeMaxSide = document.getElementById('nodeMaxSide');
|
|
sameSides = document.getElementById('sameSides');
|
|
aspectRatio.onkeydown = aspectRatioHandler;
|
|
// create a layout with the default values
|
|
rebuildGraph();
|
|
}
|
|
exports.init = init;
|
|
// when arrow keys are pressed and the aspect ratio is below 1, increment using the harmonic sequence
|
|
// this makes the aspect ratio change as follows: 3:1, 2:1, 1:1, 1:2, 1:3, etc.
|
|
function aspectRatioHandler(e) {
|
|
if (e.key === 'ArrowUp' && parseFloat(aspectRatio.value) < 1) {
|
|
e.preventDefault();
|
|
var denom = Math.round(1 / parseFloat(aspectRatio.value));
|
|
aspectRatio.value = (+(1 / (denom - 1)).toFixed(2)) + '';
|
|
rebuildGraph();
|
|
}
|
|
else if (e.key === 'ArrowDown' && parseFloat(aspectRatio.value) <= 1) {
|
|
e.preventDefault();
|
|
var denom = Math.round(1 / parseFloat(aspectRatio.value));
|
|
if (denom < 10) {
|
|
aspectRatio.value = (+(1 / (denom + 1)).toFixed(2)) + '';
|
|
rebuildGraph();
|
|
}
|
|
}
|
|
}
|
|
function validateInput() {
|
|
if (!aspectRatio.value || parseFloat(aspectRatio.value) <= 0) {
|
|
aspectRatio.value = '0.1';
|
|
}
|
|
if (!layoutWidth.value || parseFloat(layoutWidth.value) <= 0) {
|
|
layoutWidth.value = '1';
|
|
}
|
|
if (!layoutHeight.value || parseFloat(layoutHeight.value) <= 0) {
|
|
layoutHeight.value = '1';
|
|
}
|
|
if (!nodeSpacing.value) {
|
|
nodeSpacing.value = '0';
|
|
}
|
|
if (!numNodes.value || parseInt(numNodes.value) < 1) {
|
|
numNodes.value = '1';
|
|
}
|
|
if (!nodeMinSide.value || parseFloat(nodeMinSide.value) < 1) {
|
|
nodeMinSide.value = '1';
|
|
}
|
|
if (!nodeMaxSide.value || parseFloat(nodeMaxSide.value) < 1) {
|
|
nodeMaxSide.value = '1';
|
|
}
|
|
}
|
|
function rebuildGraph() {
|
|
validateInput();
|
|
var packShape = PackedLayout_1.PackedLayout.Elliptical;
|
|
switch (getRadioValue('packShape')) {
|
|
case 'Elliptical':
|
|
packShape = PackedLayout_1.PackedLayout.Elliptical;
|
|
break;
|
|
case 'Rectangular':
|
|
packShape = PackedLayout_1.PackedLayout.Rectangular;
|
|
break;
|
|
case 'Spiral':
|
|
packShape = PackedLayout_1.PackedLayout.Spiral;
|
|
break;
|
|
}
|
|
var packMode = PackedLayout_1.PackedLayout.AspectOnly;
|
|
switch (getRadioValue('packMode')) {
|
|
case 'AspectOnly':
|
|
packMode = PackedLayout_1.PackedLayout.AspectOnly;
|
|
break;
|
|
case 'Fit':
|
|
packMode = PackedLayout_1.PackedLayout.Fit;
|
|
break;
|
|
case 'ExpandToFit':
|
|
packMode = PackedLayout_1.PackedLayout.ExpandToFit;
|
|
break;
|
|
}
|
|
var sortMode = PackedLayout_1.PackedLayout.None;
|
|
switch (getRadioValue('sortMode')) {
|
|
case 'None':
|
|
sortMode = PackedLayout_1.PackedLayout.None;
|
|
break;
|
|
case 'MaxSide':
|
|
sortMode = PackedLayout_1.PackedLayout.MaxSide;
|
|
break;
|
|
case 'Area':
|
|
sortMode = PackedLayout_1.PackedLayout.Area;
|
|
break;
|
|
}
|
|
var sortOrder = PackedLayout_1.PackedLayout.Descending;
|
|
switch (getRadioValue('sortOrder')) {
|
|
case 'Descending':
|
|
sortOrder = PackedLayout_1.PackedLayout.Descending;
|
|
break;
|
|
case 'Ascending':
|
|
sortOrder = PackedLayout_1.PackedLayout.Ascending;
|
|
break;
|
|
}
|
|
var params = {
|
|
packMode: packMode,
|
|
packShape: packShape,
|
|
sortMode: sortMode,
|
|
sortOrder: sortOrder,
|
|
aspectRatio: parseFloat(aspectRatio.value),
|
|
size: new go.Size(parseFloat(layoutWidth.value), parseFloat(layoutHeight.value)),
|
|
spacing: parseFloat(nodeSpacing.value),
|
|
hasCircularNodes: hasCircularNodes.checked,
|
|
arrangesToOrigin: false
|
|
};
|
|
disableInputs(params);
|
|
if (sameSides.checked !== sameSidesPrevious
|
|
|| parseFloat(nodeMinSide.value) !== minSidePrevious
|
|
|| parseFloat(nodeMaxSide.value) !== maxSidePrevious) {
|
|
sameSidesPrevious = sameSides.checked;
|
|
minSidePrevious = parseFloat(nodeMinSide.value);
|
|
maxSidePrevious = parseFloat(nodeMaxSide.value);
|
|
randomize();
|
|
return;
|
|
}
|
|
myDiagram.startTransaction('packed layout');
|
|
generateNodeData();
|
|
myDiagram.layout = go.GraphObject.make(PackedLayout_1.PackedLayout, params /* defined above */);
|
|
myDiagram.commitTransaction('packed layout');
|
|
}
|
|
exports.rebuildGraph = rebuildGraph;
|
|
function randomize() {
|
|
myDiagram.model = new go.GraphLinksModel([]);
|
|
rebuildGraph();
|
|
}
|
|
exports.randomize = randomize;
|
|
function generateNodeData() {
|
|
var nodeDataArray = myDiagram.model.nodeDataArray;
|
|
var count = parseInt(numNodes.value);
|
|
var min = parseFloat(nodeMinSide.value);
|
|
var max = parseFloat(nodeMaxSide.value);
|
|
var shapeToPack = getRadioValue('shapeToPack');
|
|
if (count > nodeDataArray.length) {
|
|
var arr = new Array();
|
|
for (var i = nodeDataArray.length; i < count; i++) {
|
|
var width = Math.floor(Math.random() * (max - min + 1)) + min;
|
|
var height = sameSides.checked ? width : Math.floor(Math.random() * (max - min + 1)) + min;
|
|
var color = go.Brush.randomColor(128, 235);
|
|
arr.push({ width: width, height: height, fill: color, figure: shapeToPack });
|
|
}
|
|
myDiagram.model.addNodeDataCollection(arr);
|
|
}
|
|
else if (count < nodeDataArray.length) {
|
|
while (count < nodeDataArray.length) {
|
|
myDiagram.model.removeNodeData(nodeDataArray[nodeDataArray.length - 1]);
|
|
}
|
|
}
|
|
else {
|
|
for (var _i = 0, nodeDataArray_1 = nodeDataArray; _i < nodeDataArray_1.length; _i++) {
|
|
var data = nodeDataArray_1[_i];
|
|
myDiagram.model.set(data, 'figure', shapeToPack);
|
|
}
|
|
}
|
|
sameSidesPrevious = sameSides.checked;
|
|
minSidePrevious = min;
|
|
maxSidePrevious = max;
|
|
}
|
|
var hasCircularNodesSavedState = null;
|
|
var sameSidesSavedState = null;
|
|
function disableInputs(params) {
|
|
setRadioButtonsDisabled('packMode', params.packShape === PackedLayout_1.PackedLayout.Spiral);
|
|
aspectRatio.disabled = params.packMode !== PackedLayout_1.PackedLayout.AspectOnly || params.packShape === PackedLayout_1.PackedLayout.Spiral;
|
|
layoutWidth.disabled = params.packMode === PackedLayout_1.PackedLayout.AspectOnly || params.packShape === PackedLayout_1.PackedLayout.Spiral;
|
|
layoutHeight.disabled = params.packMode === PackedLayout_1.PackedLayout.AspectOnly || params.packShape === PackedLayout_1.PackedLayout.Spiral;
|
|
nodeSpacing.disabled = params.packMode === PackedLayout_1.PackedLayout.ExpandToFit;
|
|
hasCircularNodes.disabled = params.packShape === PackedLayout_1.PackedLayout.Spiral;
|
|
if (params.packShape === PackedLayout_1.PackedLayout.Spiral) {
|
|
if (hasCircularNodesSavedState === null) {
|
|
hasCircularNodesSavedState = hasCircularNodes.checked;
|
|
}
|
|
hasCircularNodes.checked = true;
|
|
params.hasCircularNodes = true;
|
|
}
|
|
else if (hasCircularNodesSavedState !== null) {
|
|
hasCircularNodes.checked = hasCircularNodesSavedState;
|
|
params.hasCircularNodes = false;
|
|
hasCircularNodesSavedState = null;
|
|
}
|
|
sameSides.disabled = params.hasCircularNodes;
|
|
if (params.hasCircularNodes) {
|
|
if (sameSidesSavedState === null) {
|
|
sameSidesSavedState = sameSides.checked;
|
|
}
|
|
sameSides.checked = true;
|
|
}
|
|
else if (sameSidesSavedState !== null) {
|
|
sameSides.checked = sameSidesSavedState;
|
|
sameSidesSavedState = null;
|
|
}
|
|
}
|
|
function getRadioValue(name) {
|
|
var radio = document.getElementsByName(name);
|
|
for (var i = 0; i < radio.length; i++) {
|
|
if (radio[i].checked)
|
|
return radio[i].value;
|
|
}
|
|
}
|
|
function setRadioButtonsDisabled(name, disabled) {
|
|
var radio = document.getElementsByName(name);
|
|
for (var i = 0; i < radio.length; i++) {
|
|
radio[i].disabled = disabled;
|
|
}
|
|
}
|
|
});
|