GoJS Pallet

Test code to prove pallet works

HTML

<script src="http://fleetagentdev.blackhawktracking.com/Libs/GoJS/go.js"></script>
<body>
<div id="sample">
  <div style="width:100%; white-space:nowrap;">
    <span id="palette-container" style="display: inline-block; vertical-align: top; padding: 5px; width:100px">
      <div id="myPalette" style=" height: 720px">
        <button id="btnStart"> Start </button>
        <button id="btnEnd"> End </button>
      </div>
    </span>

    <span style="display: inline-block; vertical-align: top; padding: 5px; width:80%">
      <div id="myDiagram" style="height: 720px"></div>
    </span>
  </div>
  
  <button id="SaveButton" onclick="save()">Save</button>
  <button onclick="load()">Load</button>
  <textarea id="mySavedModel" style="width:100%;height:300px">
{ "class": "go.GraphLinksModel",
  "linkFromPortIdProperty": "fromPort",
  "linkToPortIdProperty": "toPort",
  "nodeDataArray": [
{"category":"Comment", "loc":"360 -10", "text":"Kookie Brittle", "key":-13},
{"key":-1, "category":"Start", "loc":"175 0", "text":"Start"},
{"key":0, "loc":"0 77", "text":"Preheat oven to 375 F"},
{"key":1, "loc":"175 100", "text":"In a bowl, blend: 1 cup margarine, 1.5 teaspoon vanilla, 1 teaspoon salt"},
{"key":2, "loc":"175 190", "text":"Gradually beat in 1 cup sugar and 2 cups sifted flour"},
{"key":3, "loc":"175 270", "text":"Mix in 6 oz (1 cup) Nestle's Semi-Sweet Chocolate Morsels"},
{"key":4, "loc":"175 370", "text":"Press evenly into ungreased 15x10x1 pan"},
{"key":5, "loc":"352 85", "text":"Finely chop 1/2 cup of your choice of nuts"},
{"key":6, "loc":"175 440", "text":"Sprinkle nuts on top"},
{"key":7, "loc":"175 500", "text":"Bake for 25 minutes and let cool"},
{"key":8, "loc":"175 570", "text":"Cut into rectangular grid"},
{"key":-2, "category":"End", "loc":"175 640", "text":"Enjoy!"}
 ],
  "linkDataArray": [
{"from":1, "to":2, "fromPort":"B", "toPort":"T"},
{"from":2, "to":3, "fromPort":"B", "toPort":"T"},
{"from":3, "to":4, "fromPort":"B", "toPort":"T"},
{"from":4, "to":6,...

JavaScript

$(document).ready(function(){  
		document.querySelector("#btnStart").addEventListener("click", (event) => addNewShape('Start', "Hello"));
		document.querySelector("#btnEnd").addEventListener("click", (event) => addNewShape('End', "Goodbye"));

    var $ = go.GraphObject.make; // for conciseness in defining templates
    myDiagram =
        $(go.Diagram, "myDiagram", // must name or refer to the DIV HTML element
            {
                initialContentAlignment: go.Spot.Center,
                allowDrop: true, // must be true to accept drops from the Palette
                "animationManager.duration": 800, // slightly longer than default (600ms) animation
                "undoManager.isEnabled": true // enable undo & redo
            });

    // helper definitions for node templates
    function nodeStyle() {
        return [
            // The Node.location comes from the "loc" property of the node data,
            // converted by the Point.parse static method.
            // If the Node.location is changed, it updates the "loc" property of the node data,
            // converting back using the Point.stringify static method.
            new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify), {
                // the Node.location is at the center of each node
                locationSpot: go.Spot.Center,
                //isShadowed: true,
                //shadowColor: "#888",
                // handle mouse enter/leave events to show/hide the ports
                mouseEnter: function(e, obj) {
                    showPorts(obj.part, true);
                },
                mouseLeave: function(e, obj) {
                    showPorts(obj.part, false);
                }
            }
        ];
    }

    // define the Node templates for regular nodes
    var lightText = 'whitesmoke';
    myDiagram.nodeTemplateMap.add("", // the default category
        $(go.Node, "Spot", nodeStyle(),
            // the main object is a Panel...