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

GoJS
1

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);
}
2

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

3

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

4

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
5

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.

6
  • 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?
7

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?

8

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

9

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

10

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
11

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

12

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?

13

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.