GoJS Pallet

Test code to prove pallet works

by Adam Mendoza

HTML

<script src="http://fleetagentdev.blackhawktracking.com/Libs/GoJS/go.js"></script>
<div id="myPalette" style="width: 20%; cursor: auto;" class="diagramContainer"></div>

<div id="myDiagram" style="width: 75%; cursor: auto;" class="diagramContainer"></div>
    
    <button id="SaveButton">Save</button>
  <button id="LoadButton">Load</button>
  <textarea id="mySavedModel" style="width:100%;height:300px;">
      { "class": "go.GraphLinksModel",
  "linkFromPortIdProperty": "fromPort",
  "linkToPortIdProperty": "toPort",
  "nodeDataArray": [ ],
  "linkDataArray": [ ]}
  </textarea>
  <button onclick="makeSVG()">Render as SVG</button>
  <div id="SVGArea"></div>

CSS

.diagramContainer {
    border: 1px solid #00F;
    height: 600px;
    float: left;
}
body {
    font-family: sans-serif;
    font-size: 13px;
}

JavaScript

$(document).ready(function () {
    var myDiagram;
    function init() {
        var gm = go.GraphObject.make;
        myDiagram = gm(go.Diagram, "myDiagram", {
            initialContentAlignment: go.Spot.Center,
            allowDrop: true,
            "LinkDrawn": showLinkLabel,
            "LinkRelinked": showLinkLabel,
            "animationManager.duration": 800,
            "undoManager.isEnabled": true
        });
        myDiagram.addDiagramListener("Modified", function (e) {
            var button = document.getElementById("SaveButton");
            if (button)
                button.disabled = !myDiagram.isModified;
            var idx = document.title.indexOf("*");
            if (myDiagram.isModified && idx < 0) {
                document.title += "*";
            }
            else if (idx >= 0) {
                document.title = document.title.substr(0, idx);
            }
        });
        myDiagram.addDiagramListener("SelectionDeleted", function (e) {
            console.log(e);
        });
        myDiagram.addDiagramListener("ObjectContextClicked", function (e) {
            console.log(e);
        });
        myDiagram.addChangedListener(function (e) {
            //console.log(e);
        });
        myDiagram.addDiagramListener("Modified", function (e) {
            //console.log(e);
        });
        myDiagram.nodeTemplateMap.add("", gm(go.Node, "Spot", nodeStyle(), gm(go.Panel, "Auto", { name: "BOX" }, gm(go.Shape, "Rectangle", {
            strokeWidth: 2,
            stroke: "gray"
        }, new go.Binding("figure", "figure"), new go.Binding("fill", "fill")), gm(go.TextBlock, {
            name: "Text",
            font: "bold 9pt Helvetica, Arial, sans-serif",
            stroke: "black",
            margin: 4,
            maxSize: new go.Size(160, NaN),
            wrap: go.TextBlock.WrapFit,
            editable: true
        }, new go.Binding("text", "text").makeTwoWay())), makePort("L", go.Spot.Left), makePort("R",...