We are updating the text bindings in a node from a React form and using the skipsDiagramUpdate flag set to false we make the canvas update. But in some cases when the node shifts shape, the links connected to the ports specified on the node fail to update accordingly. Is there any event we can listen to update the link points in our state in this case?
For more context: The ports on this case on the node is set like in the Record Mapper example
Just to be clear, you’re updating your state from a form outside GoJS? If that’s the case, you want skipsDiagramUpdate set to false. skipsDiagramUpdate should be set to true for state changes that GoJS is already aware of, like those that are made in response to a GoJS model change. Let us know if that resolves the problem.
It is set to false already that’s why the title is getting updated in the GIF.
Ok, your post above said you had it set to true.
Can you post your code anywhere, either on CodeSandbox or by sending it to our gojs at nwoods email?
Something I notice is that you are triggering updates with every keystroke, rather than when the form field blurs. You’ll notice our sample only makes state changes when the inspector blurs. This is much more efficient because each time you update state, the data must be copied before being sent to GoJS to ensure immutability. This is also closer to the text editing behavior of GoJS itself, where the change won’t be committed to the model until the text editor deactivates.
Sorry about the typo. I meant false. Fixed that above.
I know about the sample. I used blur for the initial phases but wanted to make the updates more immediate.
I will try and post a codesandbox soon
After further investigation into the cause, the bug seems to have popped up only after I made the points binding on the path two-way using a mechanism similar to the one mentioned here.
I guess what’s happening is the changes to the points in the path are not getting saved in Redux and hence the older path state is getting rendered after a flicker since the skipDiagramUpdate remains false when we are still updating the text on it. So the old path state from Redux is overidding the path updates in the canvas.
That’s why I was asking if there is any event that gets triggered when link path gets changed due to changes in the link port that way I can listen to the path point updates and update that in Redux.
Yes. You cannot use the “LinkReshaped” DiagramEvent, because that is for when the user has reshaped a link route using the LinkReshapingTool, which is not the case here.
So you will need to depend on a Model Changed event, when the “points” property is set on a link data object. Are you conducting a separate transaction after each key press in that external text area?
Yes, I was conducting separate transaction after each key press. The bug persisted even if I triggered the transaction on Blur event only.
I will try and check Model Changed event approach and post the update here. Thanks.