TreeExpanderButton Animation Question

kyle · January 7, 2015, 12:44pm

The way the TreeExpanderButton animates an expanding tree branch without any modification has the child nodes start from on top of the parent node. While this looks fine when the child nodes are the same length or shorter than the parent nodes this looks fine, however when they are longer it looks awkward and derpy, with the back end of the node initially sticking out the back of the parent.

Is there a way to change this by altering the node positions, ports, spots, or link formats? Overriding the actual animation seems like it will be difficult and counterproductive. I would like the animation to start with the child nodes in a location directly adjacent to the parent. It would also be nice to be able to skip it entirely as in nodecollapse, in the case of large diagrams.

Thanks, here is my code. I am basically just trying to get a mindmap type thing set up, which I later hope to integrate with cloud storage and a bunch of other things.

var $ = go.GraphObject.make;

mainDiagram = $(go.Diagram, “mainDiagramDiv”,
 {
 allowMove: true,
 allowCopy: true,
 allowDelete: true,
 allowHorizontalScroll: true,
 layout:
 $(go.TreeLayout,
 {
 angle: 0,
 compaction: go.TreeLayout.CompactionNone,
 layerSpacing: 60,
 layerSpacingParentOverlap: 0,
 nodeIndent: 2,
 nodeIndentPastParent: 0.88,
 nodeSpacing: 2,
 setsPortSpot: false,
 setsChildPortSpot: false
 }
 )
 }
);

mainDiagram.initialContentAlignment = go.Spot.Center;

mainDiagram.nodeTemplate = $(go.Node, “Horizontal”,
{ selectionAdorned: false }, // no Adornment: instead change panel background color by binding to Node.isSelected
$(go.Panel, “Auto”,
 $(go.Shape, “RoundedRectangle”, {fill: “transparent”}),
 { position: new go.Point(0, 0) },
new go.Binding(“background”, “isSelected”,
 function (s) { return (s ? “lightblue” : “white”); }).ofObject(),
$(go.TextBlock,
 new go.Binding(“text”, “key”, function(s) { return " " + s; })
 ) //end TextBlock
), // end Horizontal Panel
 $(“TreeExpanderButton”)
); // end Node

mainDiagram.linkTemplate = $(go.Link,
 {
 selectable: false,
 corner: 0,
 fromEndSegmentLength: 4,
 fromSpot: go.Spot.Right,
 toSpot: go.Spot.Left
 },
 $(go.Shape)
);

var nodeDataArray = [
 { key: “Home” },
 { key: “Research”, parent: “Home” },
 { key: “Contact”, parent: “Home” },
 { key: “Systems Factorial Technology”, parent: “Research” },
 { key: “Fractal Geometry”, parent: “Research” },
 { key: “Network Theory”, parent: “Research” },
 { key: “Email”, parent: “Contact”},
 { key: “Facebook”, parent: “Contact”},
 { key: “Phone”, parent: “Contact”},
 { key: “LinkedIn”, parent: “Contact”},
];
mainDiagram.model = new go.TreeModel(nodeDataArray);

simon · January 7, 2015, 1:28pm

try setting the Node template’s locationSpot to go.Spot.Center. It is TopLeft by default.

kyle · January 7, 2015, 2:23pm

Thank you for responding so quickly.

It doesn’t seem to work - I think the locationSpot of the parent node needs to be temporarily set to Center or Right when expanding. It would make sense that it doesn’t work to change the overall nodeTemplate because it will change change the positioning of the parent and child nodes, resulting in the same issue. And actually, now that I think about it if this is working the way I imagined (the nodes start at the same location), wouldn’t top left align the topleft corners? My problem is that the child nodes are starting with their left corner to the left of the left corner of the parent and expanding to the right.

Would I need to override something in the TreeExpanderButton class to modify a parent nodes location.Spot before playing the animation? Or do you think there is a simpler way to do it? This is my reworked nodeTemplate.

mainDiagram.nodeTemplate = $(go.Node, “Horizontal”,
{ selectionAdorned: false, locationSpot: go.Spot.Center}, // no Adornment: instead change panel background color by binding to Node.isSelected
 $(go.Panel, “Auto”,
 $(go.Shape, “RoundedRectangle”, {fill: “transparent”}),
 { position: new go.Point(0, 0) },
new go.Binding(“background”, “isSelected”,
 function (s) { return (s ? “lightblue” : “white”); }).ofObject(),
$(go.TextBlock,
 new go.Binding(“text”, “key”, function(s) { return " " + s; })
 ) //end TextBlock
), // end Horizontal Panel
 $(“TreeExpanderButton”)
); // end Node

simon · January 7, 2015, 4:11pm

Sorry, I was mistaken. That won’t change the point that expanding nodes originate from.

Unfortunately we do not make these positions possible to modify at the moment, but in future releases that may change.

kyle · January 7, 2015, 4:55pm

It could look worse. Also I did just read that animations can be turned off all together, but is it possible to turn off only the ExpandTree animation? I may not, because the animation isn’t terrible as it stands, but it would be nice to be able to.

simon · January 8, 2015, 10:37am

It is not possible right now, but we’ll probably give that option in the future, of turning on/off the three types currently supported: layout, group expansion, tree expansion.

kyle · January 8, 2015, 11:32am

I see. Thanks for being so responsive. I really appreciate the work you guys have done so far. Keep up the good work. I enjoy working with your library as it is and look forward to seeing what you have to offer in the future.

zLinz · November 7, 2018, 6:34am

@Walter hey, Any solutions for this? Thank u.

walter · November 7, 2018, 1:44pm

Yes, but it involves an undocumented method on AnimationManager. If you don’t mind that uncertainty, you can override AnimationManager.canStart:

      $(go.Diagram, . . .,
        { . . .,
          "animationManager.canStart": function() {
            return !this.animationReasons.contains("Expand Tree");
          }
        });

This turns off animation when expanding trees, but otherwise continues to perform automatic animations.

zLinz · November 8, 2018, 2:26am

@walter Thank you very much!
I’ll have a try.