Can I bind a data using modelData as well as elementData

GoJS
#1

I am keeping one variable in modelData say x;
Now while binding text I have to bind value a if x is true else b.
as well as I have to modify value a before assigning to text.

This only gives me x:

new go.Binding('text', 'x').ofModel()

Here I can manipulate a’s value.

new go.Binding('text', 'a', (a: number) => { return a>100 ? a : a/100 }).makeTwoWay()

But can I get x and b value in this function so that i can create something like below:

new go.Binding('text','<some_variable>',(x,a,b)=>{return x ? (a<100?a:a/100):(b)});
#2

Just for your reference, my requirement is :
There is a radio button in screen with options Duration and Frequency.
If user selects Duration I want to show Duration on All Nodes.
Else I want to show Frequency.

Duration/Frequency Data is in Element data, as each Node can have different value.
But Radio Selection is in model data as each node has same value.

#3

This sample changes the text shown in each node depending on the value of Model.modelData’s “x” property being true or false. The text is taken either from the data.text property or from the data.color property.

<!DOCTYPE html>
<html>
<head>
<title>Minimal GoJS Sample</title>
<!-- Copyright 1998-2020 by Northwoods Software Corporation. -->
<meta charset="UTF-8">
<script src="go.js"></script>
<script id="code">
  function init() {
    var $ = go.GraphObject.make;

    myDiagram =
      $(go.Diagram, "myDiagramDiv",
        {
          "undoManager.isEnabled": true,
          "ModelChanged": function(e) {     // just for demonstration purposes,
            if (e.isTransactionFinished) {  // show the model data in the page's TextArea
              document.getElementById("mySavedModel").textContent = e.model.toJson();
            }
          }
        });

    myDiagram.nodeTemplate =
      $(go.Node, "Auto",
        $(go.Shape,
          { fill: "white" },
          new go.Binding("fill", "color")),
        $(go.TextBlock,
          { margin: 8 },
          new go.Binding("text", "", function(data, tb) { return tb.diagram.model.modelData.x ? data.text : data.color; })
          )
      );

    myDiagram.model = new go.GraphLinksModel(
    [
      { key: 1, text: "Alpha", color: "lightblue" },
      { key: 2, text: "Beta", color: "orange" },
      { key: 3, text: "Gamma", color: "lightgreen" },
      { key: 4, text: "Delta", color: "pink" }
    ],
    [
      { from: 1, to: 2 },
      { from: 1, to: 3 },
      { from: 2, to: 2 },
      { from: 3, to: 4 },
      { from: 4, to: 1 }
    ]);
    myDiagram.model.modelData = { x: true };
  }

  function test() {
    myDiagram.model.commit(function(m) {
      m.set(m.modelData, "x", !m.modelData.x);
    })
  }
</script>
</head>
<body onload="init()">
  <div id="myDiagramDiv" style="border: solid 1px black; width:100%; height:600px"></div>
  <button onclick="test()">Test</button>
  <textarea id="mySavedModel" style="width:100%;height:250px"></textarea>
</body>
</html>
#4

Thanks Walter…
This Worked.

One more thing,
Suppose we have complex Node Structure
like we have multiple Shapes in our template.
Can we show this shapes through some conditions.

for example:
there are 5-6 shapes/elements, and if myDiagram.model.modelData.x is true then i don’t want to show one of shapes/elements instead I will show other.

#5

Have you tried an ofModel binding?

$(go.Shape, ...,
  new go.Binding("visible", "x").ofModel(),
  ...)

And in the other Shape you would use a conversion function that negated the boolean value of modelData.x.

#6

Ohhh Great Thank you…