desiredSize binding causing issue with PartResized event

#1

I am using React with go-js.

I have also setup an inspector like in the gojs-basic-react example for which I am adding event listener to the diagram using addDiagramListener

event.subject.first() for ChangedSelection event seems to have the right values for the two way bound attributes like loc and others.

But in case of PartResized event the attributes seem to be missing.

In the model I have setup two-way binding for the shape size as such new go.Binding('desiredSize', 'size', go.Size.parse).makeTwoWay(go.Size.stringify).

Any tips on how I should keep my React state updated with the resizing? I also need to keep the selectedData bit in sync.
`

#2

As the description for the “PartResized” DiagramEvent explains, https://gojs.net/latest/intro/events.html#PartResized

  • the e.subject will be the resized GraphObject
  • the e.parameter will be the old GraphObject.desiredSize

And the new size is the e.subject.desiredSize.

#3

Will there be no stringified size attribute on the subject?

Won’t the binding be anyway useful in this case?

#4

If that TwoWay Binding is there, then I would expect that the node’s data.size property would have the updated string. But the e.subject.desiredSize will be available regardless of any binding.

#5

First of all, thanks for these prompt replies.

Despite the binding the size property is not there.

This is my nodeTemplate (just case in case I messed something here)

const rectangleNodeTemplate = $(
  go.Node,
  'Auto',
  {
    resizable: true,
    resizeObjectName: 'Rectangle',
  },
  new go.Binding('location', 'loc', go.Point.parse).makeTwoWay(go.Point.stringify),
  $(
    go.Shape,
    'Rectangle',
    {
      fill: 'yellow',
      stroke: 'black',
      ...commonRectangleShapeOptions,
    },
    new go.Binding('desiredSize', 'size', go.Size.parse).makeTwoWay(go.Size.stringify)
  ),
  $(
    go.TextBlock,
    { margin: 6, font: fonts.big, editable: true },
    new go.Binding('text', 'text').makeTwoWay()
  )
);

Also, once serialized and saved - next time when I reload the diagram into canvas. The resize adornment works weirdly instead of resizing the rectangle it resizes the node or something exterior to it.

go-js-resizing
go-js-resizing.gif1284×797 150 KB

It seems like I am missing something. Any pointers will be really appreciated.

#6

The problem is that you are resizing a Shape that is the main element of an “Auto” Panel – the border. That’s not what you want to do. I think you just want to do what the first sample does in https://gojs.net/latest/intro/tools.html#ResizingTool. Because the user will be modifying the desiredSize of the whole Node, you will want to put the TwoWay Binding of “desiredSize” on the whole Node.

#7

Thanks for clarifying that.