Missing links after animation

GoJS
1

Hello,

links of 3rd child level are not shown after collapse and re-expand the root node.
any idea?

version: 1.4.19

kind regards
axel

        var _gobj = go.GraphObject.make;
        var nodetemplate =
            _gobj(go.Node, "Horizontal", nodeStyle(),
                new go.Binding("isTreeExpanded", "expanded"), {
                    treeExpandedChanged: function (node) { onTreeExpandedChanged(node); }
                },
                new go.Binding("isSelected", "selected"),
                new go.Binding("isShadowed", "isSelected").ofObject(),
                _gobj(go.Panel, "Auto",
                    _gobj(go.Shape, "RoundedRectangle", new go.Binding("fill", "origin")),
                    _gobj(go.Panel, "Horizontal",

                        _gobj(go.Picture, {
                            desiredSize: new go.Size(12, 24),
                            source: "images/miscellaneous/zoomed.png",
                            margin: 0

                        }, new go.Binding("visible", "", function (data, node) {
                            if (_current.dataItem == null)
                                return false;
                            if (_current.dataItem.zoomKey == data.key)
                                return true;
                            else
                                return false;
                        })),

                       _gobj(go.Picture, {
                           name: "LockImage",
                           desiredSize: new go.Size(16, 16),
                           source: "images/miscellaneous/lock.png",
                           margin: 2
                       }, new go.Binding("visible", "global")),
                       _gobj(go.TextBlock, {
                           name: "Text",
                           margin: 5
                       }, new go.Binding("text", "label"))
                    ) 
                 ), 

                 _gobj("TreeExpanderButton", _gobj(go.Shape,
                     new go.Binding("figure", "isTreeExpanded", function (s) { return s ? "MinusLine" : "PlusLine"; }).ofObject(),
                     { desiredSize: new go.Size(12, 12) })
                 )
             );
2

Hmmm, I cannot reproduce the problem. Your diagram really doesn’t seem much different from http://gojs.net/latest/samples/DOMTree.html, which works reliably for me.

Does the problem happen reliably? On all browsers? Is there any other way you can characterize when the problem happens? Can we get access to your app?

Also, does the problem happen if you turn off Diagram.animationManager.isEnabled?

3

Hi walter,

I’ve found the reason. It’s the binding to the “treeExpandedChanged” event.
The expand state is part of my model, so that the diagram can be opened as it was closed.

    function onTreeExpandedChanged(node) {
        if (!(node instanceof go.Node))
            return;
        _diagram.model.setDataProperty(node.data, "expanded", node.isTreeExpanded);
    }

The problem is that childnodes also fire the event, also their status has not changed.
The model no longer complies with the diagram.

Node.isSelected is not the solution, because click on expand button doesn’t select the node.

any idea?

kind regards
axel

4

Ah, that would confuse things.

Why not delete the treeExpandedChanged event handler and change the “isTreeExpanded” Binding to be TwoWay?

Separate issue: the “TreeExpanderButton” already includes a Shape with a PlusLine or MinusLine figure, so you don’t need to duplicate it. Just use:
$(“TreeExpanderButton”, { “ButtonIcon.desiredSize”: new go.Size(12, 12) })

5

Also are you sure you want to save the selection state in the model? That’s unusual.

Oh, and if you do, you want that Binding to be TwoWay also.

6

You guys are really fast in answering. Thank you for that.

The customer want’s to have the feature to open a diagram as it was closed. Isn’t it just an extra field in json (expanded: true)? why is it not recommended?
Could you pls explain the TwoWay binding?

thanks for your exeptional support

7

I didn’t say not to have an “expanded” property on your node data.
http://gojs.net/latest/intro/dataBinding.html

8

Hello Walter,

turning off the Diagram.animationManager doesn’t fix the problem.


this is the new code for the binding:

new go.Binding(“isTreeExpanded”, “isExpanded”).makeTwoWay(),
new go.Binding(“wasTreeExpanded”, “wasExpanded”).makeTwoWay(),


Kind regards

9

OK, so everything’s working now for you?

10

Unfortunately not.

this screenshot based on the a.m bindings an animationManager turned off.

I guess it’s a bug in version 1.4.19

11

I’ll see if I can create an app that reproduces the problem.

12

OK, here’s the app that I have been testing with, and I cannot find any problems:

[code]<!doctype html>

Minimal GoJS Sample
Save Load
[/code] Note that if you modify the JSON text and load(), you need to make sure that the values for "isTreeExpanded" are consistent. So if a node is collapsed, all of its descendants had better be collapsed too.
13

But there is a problem with undo. We’ll look into that. You weren’t performing undo were you?

14

In version 1.3.7 it was no problem to define one model, shared by two diagrams.
This now seems to be the reason for the missing links in version 1.4.19

<script src="gojs_1.4.19.js" type="text/javascript"></script>

<script id="code">
function nodeCompare(a, b) {
    if (a.node.data.index < b.node.data.index)
        return -1;
    if (a.node.data.index > b.node.data.index)
        return 1;
    return 0;

}
function nodeStyle() {
    return {
        selectionAdorned: false,
        shadowOffset: new go.Point(0, 0),
        shadowBlur: 20,
        shadowColor: "blue"
    };
}
function init() {
    var dia = [null, null];
    var model = [
          { key: "Alpha", color: "coral" },

          { key: "Beta", color: "tomato", parent: "Alpha", index: "10" },
          { key: "Gamma", color: "goldenrod", parent: "Alpha", index: "5" },
          { key: "Epsilon", color: "coral", parent: "Alpha", index: "1" },

          { key: "Delta", color: "orange", parent: "Gamma" },

          { key: "Zeta", color: "tomato", parent: "Epsilon", index: "5" },
          { key: "Eta", color: "goldenrod", parent: "Epsilon", index: "1" },
          { key: "Theta", color: "orange", parent: "Epsilon", index: "5" },
          { key: "Iota", color: "coral", parent: "Theta" },
          { key: "Kappa", color: "tomato", parent: "Beta" },
          { key: "Lambda", color: "goldenrod", parent: "Beta" },
          { key: "Mu", color: "orange", parent: "Lambda" },
          { key: "Nu", color: "coral", parent: "Lambda" },
          { key: "Xi", color: "tomato", parent: "Lambda" },
          { key: "Omicron", color: "goldenrod", parent: "Xi" },
          { key: "Pi", color: "orange", parent: "Xi" },
          { key: "Rho", color: "coral", parent: "Nu" },
          { key: "Sigma", color: "tomato", parent: "Nu" },
          { key: "Tau", color: "goldenrod", parent: "Sigma" },
          { key: "Upsilon", color: "orange", parent: "Sigma" },
          { key: "Phi", color: "coral", parent: "Sigma" },
          { key: "Chi", color: "tomato", parent: "Iota" },
          { key: "Psi", color: "goldenrod", parent: "Iota" },
          { key: "Omega", color: "orange", parent: "Phi" }
    ];

    var treemodel = new go.TreeModel(model);

    var $ = go.GraphObject.make;  // for conciseness in defining templates
    
    for (var i = 0; i < 2; i++) {
        dia<em> = $(go.Diagram, i.toString(),  // create a Diagram for the DIV HTML element
                           {
                               contentAlignment: go.Spot.Center,  // center the content
                               layout: $(go.TreeLayout, { sorting: go.TreeLayout.SortingAscending, comparer: nodeCompare }),
                               maxSelectionCount: 1,
                               allowMove: false
                           });
        // define a simple Node template
        dia<em>.nodeTemplate =
          $(go.Node, "Horizontal", nodeStyle(),
            new go.Binding("isShadowed", "isSelected").ofObject(),

            $(go.Panel, "Auto",
              $(go.Shape, "RoundedRectangle",
                new go.Binding("fill", "color")),
              $(go.TextBlock,
                { margin: 3 },
                new go.Binding("text", "key"))
            ),
            $("TreeExpanderButton", { "ButtonIcon.desiredSize": new go.Size(12, 12) }),
            new go.Binding("isTreeExpanded").makeTwoWay(),
            new go.Binding("wasTreeExpanded").makeTwoWay()
          );
        // but use the default Link template, by not setting Diagram.linkTemplate
        // create the model data that will be represented by Nodes and Links 
        dia<em>.linkTemplate = $(
                            go.Link,
                            {
                                routing: go.Link.Orthogonal,
                                corner: 5,
                                selectable: false
                            },
                            $(go.Shape)
                        );


        dia<em>.model = treemodel;
    }

}

</script>
15

Somehow, the text was not inserted properly.

dia in for next loop should be ‘dia[ i ]’

16

Thanks for the example. Yes, I can reproduce the problem. We’ll investigate it – it’s probably some optimization that we’re [mis]doing now.

17

Could you try the library at GoJS - Build Interactive Diagrams for the Web ?
If it fixes all of the problems you have encountered, we’ll promote it to be “latest”.

18

I’ve tested it with version 1.4.20 and if you can not find something wrong in the code below, the error is not resolved.

<script src="gojs_beta.js" type="text/javascript"></script>

<script id="code">
function nodeCompare(a, b) {
    if (a.node.data.index < b.node.data.index)
        return -1;
    if (a.node.data.index > b.node.data.index)
        return 1;
    return 0;

}
function nodeStyle() {
    return {
        selectionAdorned: false,
        shadowOffset: new go.Point(0, 0),
        shadowBlur: 20,
        shadowColor: "blue"
    };
}
function init() {
    var dia = [null, null];
    var model = [
          { key: "Alpha", color: "coral" },

          { key: "Beta", color: "tomato", parent: "Alpha", index: "10" },
          { key: "Gamma", color: "goldenrod", parent: "Alpha", index: "5" },
          { key: "Epsilon", color: "coral", parent: "Alpha", index: "1" },

          { key: "Delta", color: "orange", parent: "Gamma" },

          { key: "Zeta", color: "tomato", parent: "Epsilon", index: "5" },
          { key: "Eta", color: "goldenrod", parent: "Epsilon", index: "1" },
          { key: "Theta", color: "orange", parent: "Epsilon", index: "5" },
          { key: "Iota", color: "coral", parent: "Theta" },
          { key: "Kappa", color: "tomato", parent: "Beta" },
          { key: "Lambda", color: "goldenrod", parent: "Beta" },
          { key: "Mu", color: "orange", parent: "Lambda" },
          { key: "Nu", color: "coral", parent: "Lambda" },
          { key: "Xi", color: "tomato", parent: "Lambda" },
          { key: "Omicron", color: "goldenrod", parent: "Xi" },
          { key: "Pi", color: "orange", parent: "Xi" },
          { key: "Rho", color: "coral", parent: "Nu" },
          { key: "Sigma", color: "tomato", parent: "Nu" },
          { key: "Tau", color: "goldenrod", parent: "Sigma" },
          { key: "Upsilon", color: "orange", parent: "Sigma" },
          { key: "Phi", color: "coral", parent: "Sigma" },
          { key: "Chi", color: "tomato", parent: "Iota" },
          { key: "Psi", color: "goldenrod", parent: "Iota" },
          { key: "Omega", color: "orange", parent: "Phi" }
    ];

    var treemodel = new go.TreeModel(model);

    var $ = go.GraphObject.make;  // for conciseness in defining templates
    
    for (var i = 0; i < 2; i++) {
        dia[ i ] = $(go.Diagram, i.toString(),  // create a Diagram for the DIV HTML element
                           {
                               contentAlignment: go.Spot.Center,  // center the content
                               layout: $(go.TreeLayout, { sorting: go.TreeLayout.SortingAscending, comparer: nodeCompare }),
                               maxSelectionCount: 1,
                               allowMove: false
                           });
        // define a simple Node template
        
        dia[ i ].nodeTemplate =
          $(go.Node, "Horizontal", nodeStyle(),
            new go.Binding("isShadowed", "isSelected").ofObject(),

            $(go.Panel, "Auto",
              $(go.Shape, "RoundedRectangle",
                new go.Binding("fill", "color")),
              $(go.TextBlock,
                { margin: 3 },
                new go.Binding("text", "key"))
            ),
            $("TreeExpanderButton", { "ButtonIcon.desiredSize": new go.Size(12, 12) }),
            new go.Binding("isTreeExpanded").makeTwoWay(),
            new go.Binding("wasTreeExpanded").makeTwoWay()
          );
        // but use the default Link template, by not setting Diagram.linkTemplate
        // create the model data that will be represented by Nodes and Links 
        dia[ i ].linkTemplate = $(
                            go.Link,
                            {
                                routing: go.Link.Orthogonal,
                                corner: 5,
                                selectable: false
                            },
                            $(go.Shape)
                        );


        dia[ i ].model = treemodel;
    }

}

</script>
19

Chrome is the reason. Safari and IE show the model as expected.

Kind regards
axel

20

I just tried your page verbatim with a go.js I just downloaded from the web site. I did modify the page to use that go.js, instead of gojs-beta.js or whatever you named it.

I was unable to reproduce any problem using either Firefox or IE. But after your latest message, I also tried Chrome, version 39.0, and I was unable to reproduce any problem either.

Is it failing consistently and reliably for you on Chrome? What version are you using, and on what platform?