Binding to location with animation and undo cause change not in trasuction

I have the code below

when i run the code (with gojs debug)

I can see this on the console
Change not within a transaction: !d initialContentAlignment: Diagram “godiagram” old: Default new: Spot(0.5,0.5)
go-debug.js:35 Change not within a transaction: !d nodeTemplate: Diagram “godiagram” old: Node#274 new: Node#413
demo.component.js:55 print
go-debug.js:35 Change not within a transaction: !d position: Alpha old: Point(1.5211111111111113,1.5211111111111113) new: Point(50,50)
go-debug.js:35 Change not within a transaction: !d location: Alpha old: Point(1.5211111111111113,1.5211111111111113) new: Point(50,50)

trying to Isolate the problem I found that If I disable the animation and undo manager than I will not get the transaction problem.

any idea how to solve this?

This is the code

  diagram.undoManager.isEnabled = true;
    diagram.animationManager.isEnabled = true;
    diagram.initialContentAlignment = go.Spot.Center;

    let $ = GraphObject.make;
    diagram.nodeTemplate =
        $(go.Node, "Auto",
            new go.Binding("location", "", (a: any, b) => {
                return new Point(a.holder.loc.x, a.holder.loc.y);
            }).makeTwoWay((a: any, b: any, model: Model) => {
                b.holder.loc = new Point(a.x, a.y);
            }),
            $(go.Shape, "RoundedRectangle",
                {fill: "white"},
                new go.Binding("fill", "color")),  // shape.fill = data.color
            $(go.TextBlock,
                {margin: 5},
                new go.Binding("text", "key"))  // textblock.text = data.key
        );


    var nodeDataArray = [
        {key: "Alpha", color: "lightblue", holder: {loc: new go.Point(50, 50)}},
    ];
    var linkDataArray = [
        {from: "Alpha", to: "Beta", color: "blue", thick: 2}
    ];
    linkDataArray = [];
    diagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);
    setTimeout(() => {
        diagram.updateAllTargetBindings();
    }, 1000);
}

Is there a reason for calling updateAllTargetBindings outside of a transaction?

there is no reason!
should I always do updateAllTargetBindings in a transaction?
why does it behave differently?

also I get these message without the updateAllTargetBindings

  • Change not within a transaction: !d initialContentAlignment: Diagram “godiagram” old: Default new: Spot(0.5,0.5)
  • Change not within a transaction: !d nodeTemplate: Diagram “godiagram” old: Node#274 new: Node#413

No, you shouldn’t be calling such methods unless you have a specific reason to do so.

You could try enabling the UndoManager later, after initializing your Diagram.

  • I am doing it just to debug my code. (want to see that all my data matches the diagram)
  • But i still see the 2 messages above without updateAllTargeBindings, what is the reason for that?
  • Should I always call updateAllTargeBindings inside a transaction?

Well, the documentation, Diagram | GoJS API, clearly states that you need to conduct a transaction if you want to call it.

But I see no reason for you to be calling that method.

Have you tried setting UndoManager.isEnabled to true later in your initialization?

setting UndoManager.isEnabled to true later in your initialization works fine.
with no messages at all

It does work in the demo, it does not work in my APP

one more question,

  • I have other 2 way bindings, it does not happen for them. just for location. I guess this is because of the animation

another information,
after the first call to updateAllTargeBindings when the problem occurs, when I do make changes and call updateAllTargeBindings again no problem exists.

now I have it working

 diagram.undoManager.isEnabled = false;//must be false here and changed after initialization
 diagram.animationManager.isEnabled = false;

  initialize templates and bindings


 diagram.undoManager.isEnabled = true
 diagram.animationManager.isEnabled = true;

can you explain why is it behaves like this?

You don’t need to set UndoManager.isEnabled to false, because that is its default value.

I don’t know why you need to disable the AnimationManager.isEnabled property.