GoJS Palette Management
http://stackoverflow.com/questions/28206956/gojs-how-can-i-arrange-the-nodes-in-a-palette-and-diagram-top-down
HTML
<script src="http://fleetagentdev.blackhawktracking.com/Libs/GoJS/go.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Data Flow Diagram</title>
<meta name="description" content="Data flow or workflow graph of nodes with varying input and output ports with labels, oriented horizontally." />
<!-- Copyright 1998-2018 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;
myDiagram =
$(go.Diagram, "myDiagramDiv",
{
initialContentAlignment: go.Spot.Left,
initialAutoScale: go.Diagram.UniformToFill,
layout: $(go.LayeredDigraphLayout,
{ direction: 0 }),
"undoManager.isEnabled": true
}
);
// when the document is modified, add a "*" to the title and enable the "Save" button
myDiagram.addDiagramListener("Modified", function(e) {
var button = document.getElementById("SaveButton");
if (button) button.disabled = !myDiagram.isModified;
var idx = document.title.indexOf("*");
if (myDiagram.isModified) {
if (idx < 0) document.title += "*";
} else {
if (idx >= 0) document.title = document.title.substr(0, idx);
}
});
function makePort(name, leftside) {
var port = $(go.Shape, "Rectangle",
{
fill: "gray", stroke: null,
desiredSize: new go.Size(8, 8),
portId: name, // declare this object to be a "port"
toMaxLinks: 1, // don't allow more than one link into a port
cursor: "pointer" // show a different cursor to...