Binding Panel Type

GoJS
1

Hello,

Is there a way to dynamically get the Panel Type from the node data using a binding?

Instead of hardcoding “Auto” as below :

$(go.Panel,
  **"Auto"**
  $(go.Shape, "RoundedRectangle", new go.Binding("fill", "color")),
  $(go.TextBlock, { margin: 3 }, new go.Binding("text", "key"))
);

bind as below :

$(go.Panel,
  **new go.Binding("type", "panelType")**
  $(go.Shape, "RoundedRectangle", new go.Binding("fill", "color")),
  $(go.TextBlock, { margin: 3 }, new go.Binding("text", "key"))
);

Thank you!

2

Sure. Let’s assume you want to save the panel type on the node data as a property with a string value, say “H” for go.Panel.Horizontal and “V” for go.Panel.Vertical. So define two functions:

  function parseType(s) {
    if (s === "H") return go.Panel.Horizontal;
    return go.Panel.Vertical;
  }

  function stringifyType(t) {
    if (t === go.Panel.Horizontal) return "H";
    return "V";
  }

Here’s a node template:

    myDiagram.nodeTemplate =
      $(go.Node, "Vertical",
        new go.Binding("type", "type", parseType).makeTwoWay(stringifyType),
        $(go.Shape, { fill: "white" },
          new go.Binding("height"),
          new go.Binding("width"),
          new go.Binding("fill", "color")),
        $(go.TextBlock,
          new go.Binding("text").makeTwoWay())
      );

Then you could toggle the direction of each panel by modifying each of the model data:

  function switchAll() {
    myDiagram.model.commit(function(m) {
      m.nodeDataArray.forEach(function(d) {
        m.set(d, "type", (d.type === "V") ? "H" : "V");
      })
    }, "switch all panel types");
  }
3

Awesome, Thank you Walter! This worked for me.