How to add hidden data to graphobject

GoJS
1

I want to add hidden data to graph objects which I’ll edit in HTML fields, similar to the OrgChart sample.

It’s clear to me how to add a TextBlock and bind to to data, but how can I just add a data field that isn’t bound to any graphical component?

2

You can have as many properties on your model data objects as you like. They are just JavaScript objects.

However, there are restrictions on what Model.toJson and Model.fromJson will handle. Read their documentation for more details: Model | GoJS API.

If you use Model.setDataProperty, those properties will be recorded by the UndoManager (assuming it isEnabled). Some people use Model and UndoManager and ChangedEvent without using Diagram at all, but just to keep track of state in their application.

3

Thanks, what I’m struggling with is how to do this in a nodeTemplate in a palette so that all nodes from the palette have my extra properties. I must be missing something obvious. Here’s my nodeTemplate so far.

  myPalette.nodeTemplate =
    $(go.Node, "Auto",
      // bind location to "loc" and make it two way
      new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
      {locationSpot: go.Spot.Center},  // locate them around the centre
      $(go.Shape, "RoundedRectangle",  // the shape is a rounded rectangle
        {
          fill: "white", // the default fill, if there is no data-binding
          portId: "", cursor: "pointer",  // the Shape is the port, not the whole Node
          // allow all kinds of links from and to this port
          fromLinkable: true, fromLinkableSelfNode: true, fromLinkableDuplicates: true,
          toLinkable: true, toLinkableSelfNode: true, toLinkableDuplicates: true
        },
        new go.Binding("fill", "color")),
      $(go.TextBlock,
        {
          font: "bold 12px sans-serif",
          stroke: '#333',
          margin: 6,  // make some extra space for the shape around the text
          isMultiline: false,  // don't allow newlines in text
          editable: true  // allow in-place editing by user
        },
        new go.Binding("text", "text").makeTwoWay()),  // the label shows the node data's text
      { // this tooltip Adornment is shared by all nodes
        toolTip: $(go.Adornment, "Auto",
          $(go.Shape, {fill: "#FFFFCC"}),
          $(go.TextBlock, {margin: 4},  // the tooltip shows the result of calling nodeInfo(data)
            new go.Binding("text", "", nodeInfo))
        ),
        // this context menu Adornment is shared by all nodes
        contextMenu: partContextMenu
      },
      new go.Binding("text", "text").makeTwoWay()
    );
4

The template has nothing to do with what properties the palette’s model data has.

As GoJS Palette -- Northwoods Software discusses and demonstrates, it’s the model data that is copied by a drag-and-drop, not the Part and GraphObjects, and not any template.

For example, in the FlowChart sample, add the “extra” property to each of the node data objects in the model created for the Palette. Then drag-and-drop from the Palette to the main Diagram, and take a look at what’s in the model data. (Just “Save” the model and you can see the updated JSON-formatted text. It’s easier to see if you first delete everything in the original diagram/model, before dragging in a new node and then saving.)

5

ok, my misunderstanding. Thanks for the clarifications.