Model Binding for Graduated Panel Part Properties

GoJS
1

Hi,

We are using a graduated panel to render a scale. And we want to bind the value of graduatedMin, graduatedMax to outside values.

This is the config we have currently.

    const model = goMake(go.Model);
    model.setDataProperty(model.modelData, 'min', 5);
    const diagram = goMake(go.Diagram, {
      model,
    });
    diagram.add(
      goMake(
        go.Part,
        go.Panel.Graduated, // or "Graduated"
        new go.Binding('graduatedMin', 'min').ofModel(),
        goMake(go.Shape, { geometryString: 'M0 0 H400' }), // the main shape, a horizontal line
        goMake(go.Shape, { geometryString: 'M0 0 V10' }), // a tick mark, a vertical line
        goMake(go.TextBlock, { interval: 1 })
      )
    );
    diagram.div = divRef.current;
    console.log(diagram.model.modelData); // { min: 5 }

After this config; we are still seeing the scale start from 1.

2

Data binding only works for Parts that were created from the Model. Not for random Parts that you create and then call Diagram.add.

Here’s your code in a template:

myDiagram.nodeTemplate =
  $(go.Node, "Vertical",
    $(go.TextBlock,
      new go.Binding("text")),
    $(go.Panel, "Graduated",
      new go.Binding('graduatedMin', 'min').ofModel(),
      $(go.Shape, { geometryString: 'M0 0 H400' }), // the main shape, a horizontal line
      $(go.Shape, { geometryString: 'M0 0 V10' }), // a tick mark, a vertical line
      $(go.TextBlock, { interval: 1, alignmentFocus: go.Spot.Bottom })
    )
  );

But I did set the TextBlock.alignmentFocus so that the text wouldn’t overlap with the tick marks.

Some model data:

myDiagram.model =
  $(go.GraphLinksModel,
    {
      modelData: { min: 10 },
      nodeDataArray: [ { key: 1, text: "Alpha" } ]
    });

This produces:
image
which correctly reflects the initial value for modelData.min.

Here’s modifying the Model.modelData property;

  function test() {
    myDiagram.model.commit(m => m.set(m.modelData, "min", m.modelData.min + 10));
  }

Call test() a couple times, and as expected you get:
image