reduxjs/redux-devtools
1
1
Fork 0
mirror of https://github.com/reduxjs/redux-devtools.git synced 2025-07-23 14:39:58 +03:00
Code Issues Packages Projects Releases Wiki Activity

Fix exit

Browse Source
This commit is contained in:
Nathan Bierema 2023-01-02 10:37:59 -05:00
parent 622cca68a9
commit 976e62c4ab
1 changed files with 13 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
packages/d3-state-visualizer/src/charts/tree/tree.ts
View File

@ -316,7 +316,7 @@ export default function (DOMNode: HTMLElement, options: Partial<Options> = {}) {
nodePositions.forEach((node) => (nodePositionsById[node.id] = node)); nodePositions.forEach((node) => (nodePositionsById[node.id] = node));
// process the node selection // process the node selection
let node = vis const node = vis
.selectAll<SVGGElement, HierarchyPointNode<InternalNode>>('g.node') .selectAll<SVGGElement, HierarchyPointNode<InternalNode>>('g.node')
.property('__oldData__', (d) => d) .property('__oldData__', (d) => d)
.data(nodes, (d) => d.data.id || (d.data.id = ++nodeIndex)); .data(nodes, (d) => d.data.id || (d.data.id = ++nodeIndex));
@ -384,13 +384,13 @@ export default function (DOMNode: HTMLElement, options: Partial<Options> = {}) {
.text((d) => d.data.name) .text((d) => d.data.name)
.on('click', (d) => onClickText(d.data)); .on('click', (d) => onClickText(d.data));
node = nodeEnter.merge(node); const nodeEnterAndUpdate = nodeEnter.merge(node);
// update the text to reflect whether node has children or not // update the text to reflect whether node has children or not
node.select('text').text((d) => d.data.name); nodeEnterAndUpdate.select('text').text((d) => d.data.name);
// change the circle fill depending on whether it has children and is collapsed // change the circle fill depending on whether it has children and is collapsed
node nodeEnterAndUpdate
.select('circle') .select('circle')
.style('stroke', 'black') .style('stroke', 'black')
.style('stroke-width', '1.5px') .style('stroke-width', '1.5px')
@ -403,7 +403,7 @@ export default function (DOMNode: HTMLElement, options: Partial<Options> = {}) {
); );
// transition nodes to their new position // transition nodes to their new position
const nodeUpdate = node const nodeUpdate = nodeEnterAndUpdate
.transition() .transition()
.duration(transitionDuration) .duration(transitionDuration)
.attr('transform', (d) => `translate(${d.y},${d.x})`); .attr('transform', (d) => `translate(${d.y},${d.x})`);
@ -423,7 +423,7 @@ export default function (DOMNode: HTMLElement, options: Partial<Options> = {}) {
}); });
// blink updated nodes // blink updated nodes
node nodeEnterAndUpdate
.filter(function flick( .filter(function flick(
this: SVGGElement & { this: SVGGElement & {
__oldData__?: HierarchyPointNode<InternalNode>; __oldData__?: HierarchyPointNode<InternalNode>;
@ -467,7 +467,7 @@ export default function (DOMNode: HTMLElement, options: Partial<Options> = {}) {
nodeExit.select('text').style('fill-opacity', 0); nodeExit.select('text').style('fill-opacity', 0);
// update the links // update the links
let link = vis const link = vis
.selectAll<SVGPathElement, HierarchyPointLink<InternalNode>>( .selectAll<SVGPathElement, HierarchyPointLink<InternalNode>>(
'path.link' 'path.link'
) )
@ -497,10 +497,13 @@ export default function (DOMNode: HTMLElement, options: Partial<Options> = {}) {
linkEnter.style(key, value); linkEnter.style(key, value);
} }
link = linkEnter.merge(link); const linkEnterAndUpdate = linkEnter.merge(link);
// transition links to their new position // transition links to their new position
link.transition().duration(transitionDuration).attr('d', linkHorizontal); linkEnterAndUpdate
.transition()
.duration(transitionDuration)
.attr('d', linkHorizontal);
// transition exiting nodes to the parent's new position // transition exiting nodes to the parent's new position
link link
@ -524,7 +527,7 @@ export default function (DOMNode: HTMLElement, options: Partial<Options> = {}) {
.remove(); .remove();
// delete the old data once it's no longer needed // delete the old data once it's no longer needed
node.property('__oldData__', null); nodeEnterAndUpdate.property('__oldData__', null);
// stash the old positions for transition // stash the old positions for transition
previousNodePositionsById = nodePositionsById; previousNodePositionsById = nodePositionsById;