@hestia-earth/ui-components 0.43.8 → 0.43.9

package/fesm2022/hestia-earth-ui-components.mjs

@@ -14668,6 +14668,17 @@ const restoreChildren = (node) => {
     node._children = null;
     return node;
 };
+// children currently laid out, falling back to the collapsed ones while a node is closing
+const childrenOf = (node) => (node?.children || node?._children || []);
+// Stagger the children so they animate one after the other: in order when they appear, in reverse
+// when they disappear. A child that is not in the list anymore has no known position: it is not
+// delayed, which also keeps the delay finite (a `NaN` delay would never run, nor ever be removed).
+const enterStagger = (parent, child) => Math.max(childrenOf(parent).indexOf(child), 0) * 10;
+const exitStagger = (parent, child) => {
+    const children = childrenOf(parent);
+    const index = children.indexOf(child);
+    return index < 0 ? 0 : (children.length - index - 1) * 10;
+};
 const wrap = (selection, maxWidth = nodeContentWidth) => {
     selection.each(function (d) {
         const t = select(this);
@@ -14955,10 +14966,8 @@ const mergedLinks = (selection, { togglingGroup, switchingSelection }) => select
     .transition()
     .duration(linkDuration)
     .delay(d => {
-    const groupClosing = togglingGroup && !d.target.parent?.children?.find(n => n.data.group)?._groupOpen;
-    return groupClosing
-        ? groupDelay
-        : (switchingSelection ? nodeDuration : 0) + d.source.children?.indexOf(d.target) * 10;
+    const groupClosing = togglingGroup && !childrenOf(d.target.parent).find(n => n.data.group)?._groupOpen;
+    return groupClosing ? groupDelay : (switchingSelection ? nodeDuration : 0) + enterStagger(d.source, d.target);
 })
     .attr('opacity', 1)
     .attr('d', d => {
@@ -15203,7 +15212,8 @@ class HierarchyChartComponent {
         });
         this.svg.transition().duration(300).attr('viewBox', [-margin.left, this.yMin, totalWidth, newHeight].join(' '));
         this.node = this.node
-            .data(nodes, d => `${d.parent?.parent?.parent?.data.id}-${d.parent?.parent?.data.id}-${d.parent?.data.id}-${d.data.id}`)
+            // the root is a dummy node: it is never rendered, and has no parent to animate against
+            .data(nodes.filter(d => d.data.type !== ChartNodeType.root), d => `${d.parent?.parent?.parent?.data.id}-${d.parent?.parent?.data.id}-${d.parent?.data.id}-${d.data.id}`)
             .join(enter => enter
             .append('g')
             .call(enterNodes)
@@ -15214,10 +15224,7 @@ class HierarchyChartComponent {
                 .style('pointer-events', 'none')
                 .transition()
                 .duration(nodeDuration / 2)
-                .delay(d => {
-                const children = d.parent?.children || d.parent?._children;
-                return (children?.length - children?.indexOf(d) - 1) * 10;
-            })
+                .delay(d => exitStagger(d.parent, d))
                 .ease(easeElasticIn.amplitude(0.5).period(1))
                 .attr('transform', d => 'translate(' + (togglingGroup ? d.y : d.y - nodeWidth / 2) + ',' + d.x + ')')
                 .attr('opacity', 0)
@@ -15229,8 +15236,8 @@ class HierarchyChartComponent {
             .call(mergedNodes, { tooltipOperator: this.tooltipOperator() })
             .transition()
             .delay(d => {
-            const groupClosing = togglingGroup && !d.parent?.children?.find(n => n.data.group)?._groupOpen;
-            return groupClosing ? groupDelay : (switchingSelection ? nodeDuration : 0) + d.parent?.children.indexOf(d) * 10;
+            const groupClosing = togglingGroup && !childrenOf(d.parent).find(n => n.data.group)?._groupOpen;
+            return groupClosing ? groupDelay : (switchingSelection ? nodeDuration : 0) + enterStagger(d.parent, d);
         })
             .duration(nodeDuration)
             .ease(easeElasticOut.amplitude(0.5).period(1))
@@ -15248,10 +15255,7 @@ class HierarchyChartComponent {
             .attr('stroke', '#b5b5b5'), update => update, exit => exit
             .transition()
             .duration(linkDuration / 2)
-            .delay(d => {
-            const children = d.source.parent?.children || d.source.parent?._children;
-            return (children?.length - children?.indexOf(d.target) - 1) * 10;
-        })
+            .delay(d => exitStagger(d.source, d.target))
             .attr('opacity', 0)
             .remove())
             .call(mergedLinks, { togglingGroup, switchingSelection });