State Chart Editor Saving Incremental JSON

This sample is derived from the State Chart sample. This makes use of the new GraphLinksModel.linkKeyProperty property and the Model.toIncrementalJson and Model.applyIncrementalJson methods. It also demonstrates custom functions for Model.makeUniqueKeyFunction and GraphLinksModel.makeUniqueLinkKeyFunction, which assign odd numbers to new node data and even numbers to new link data. Unlike most models, this example uses "id" as the name of the Model.nodeKeyProperty rather than "key".

Last Transaction saved in incremental JSON format:

Diagram Model saved in JSON format:

{ "class": "go.GraphLinksModel",
  "nodeKeyProperty": "id",
  "linkKeyProperty": "id",
  "pointsDigits": 0,
  "nodeDataArray": [
    { "id": 1, "loc": "120 120", "text": "Initial" },
    { "id": 3, "loc": "330 120", "text": "First down" },
    { "id": 5, "loc": "226 376", "text": "First up" },
    { "id": 7, "loc": "60 276", "text": "Second down" },
    { "id": 9, "loc": "226 226", "text": "Wait" }
  ],
  "linkDataArray": [
    { "id": 2, "from": 1, "to": 1, "text": "up or timer", "curviness": -20 },
    { "id": 4, "from": 1, "to": 3, "text": "down", "curviness": 20 },
    { "id": 6, "from": 3, "to": 1, "text": "up (moved)\nPOST", "curviness": 20 },
    { "id": 8, "from": 3, "to": 3, "text": "down", "curviness": -20 },
    { "id": 10, "from": 3, "to": 5, "text": "up (no move)" },
    { "id": 12, "from": 3, "to": 9, "text": "timer" },
    { "id": 14, "from": 5, "to": 1, "text": "timer\nPOST" },
    { "id": 16, "from": 5, "to": 7, "text": "down" },
    { "id": 18, "from": 7, "to": 1, "text": "up\nPOST\n(dblclick\nif no move)" },
    { "id": 20, "from": 7, "to": 7, "text": "down or timer", "curviness": 20 },
    { "id": 22, "from": 9, "to": 1, "text": "up\nPOST" },
    { "id": 24, "from": 9, "to": 9, "text": "down" }
  ]
}

GoJS Features in this sample

Buttons

GoJS defines several Panels for common uses. These include "Button", "TreeExpanderButton", "SubGraphExpanderButton", "PanelExpanderButton", "ContextMenuButton", and "CheckBoxButton". "ContextMenuButton"s are typically used inside of "ContextMenu" Panels; "CheckBoxButton"s are used in the implementation of "CheckBox" Panels.

These predefined panels can be used as if they were Panel-derived classes in calls to GraphObject.make. They are implemented as simple visual trees of GraphObjects in Panels, with pre-set properties and event handlers.

More information can be found in the GoJS Intro.

Related samples