Why is onModelChange not being called?

GoJS
1

I’m using <ReactDiagram> and am trying to use its onModelChange event to watch for changes in my node’s position. I feel like I have it wired up correctly, since the event gets called when I change some text, but not when I change the position (via the dragging tool).

Here’s my node template and the basic onModelChange callback:

export const myNodeTemplate: go.Node = $(
  go.Node,
  'Auto',
  {
    isLayoutPositioned: false,
  },
  new go.Binding('position', 'position', (data, obj) => {
    return new go.Point(data.x, data.y)
  }).makeTwoWay((val, data, model) => {
    console.log('position changed')
    return {
      ...data.position,
      x: val.x,
      y: val.y,
    }
  }),
  $(go.Shape, 'Rectangle', { fill: 'cyan', width: 150, height: 150 }),
  $(
    go.TextBlock,
    { editable: true },
    new go.Binding('text', 'label').makeTwoWay((val, data, model) => {
      console.log('text changed')
      return val
    })
  )
)

const onModelChange = (e: go.IncrementalData) => {
  console.log('model changed')
}

// jsx for diagram
    <ReactDiagram
      ref={diagramRef}
      divClassName='diagram-editor'
      initDiagram={initDiagram}
      nodeDataArray={diagramNodes}
      linkDataArray={diagramLinks}
      onModelChange={onModelChange}
      skipsDiagramUpdate={false}
    />

I see that the makeTwoWay functions are being called for both position and text. I also see that onModelChange is being called after changes to the text, but not after changes to the position.

Why is onModelChange not being called after changes to my position here? How can I get my dragged node position changes to be passed on to onModelChange?

2

We’re looking into this.

For the time being, can you use ‘location’ as the target property in your binding? It’s generally better practice to bind Part.location rather than GraphObject.position and seems to work as expected when I test your case.

The source property name, on the data object, can be whatever you want, so you can leave that as “position”.

3

Ah, thanks for your help. Using location in place of position works nicely.