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

Update

Browse Source
This commit is contained in:
Nathan Bierema 2022-12-31 19:42:12 -05:00
parent 2fd88bd8d0
commit be71309bc3
1 changed files with 16 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -191,24 +191,11 @@ export interface HierarchyPointNodeWithPrivateChildren<Datum>
_children?: this[] | undefined; _children?: this[] | undefined;
} }
// export interface NodeWithId {
// name: string;
// children?: NodeWithId[] | null;
// _children?: NodeWithId[] | null;
// value?: unknown;
// id: string;
//
// parent?: NodeWithId;
// depth?: number;
// x?: number;
// y?: number;
// }
interface NodePosition { interface NodePosition {
parentId: string | null | undefined; parentId: string | null;
id: string; id: string;
x: number | undefined; x: number;
y: number | undefined; y: number;
} }
export default function ( export default function (
@ -366,9 +353,13 @@ export default function (
function update() { function update() {
// path generator for links // path generator for links
const diagonal = d3.svg const linkHorizontal = d3
.diagonal<NodePosition>() .linkHorizontal<
.projection((d) => [d.y!, d.x!]); { source: NodePosition; target: NodePosition },
NodePosition
>()
.x((d) => d.x)
.y((d) => d.y);
// set tree dimensions and spacing between branches and nodes // set tree dimensions and spacing between branches and nodes
const maxNodeCountByLevel = Math.max(...getNodeGroupByDepthCount(data)); const maxNodeCountByLevel = Math.max(...getNodeGroupByDepthCount(data));
@ -428,7 +419,7 @@ export default function (
const previousPosition = const previousPosition =
(position && previousNodePositionsById[position.id]) || (position && previousNodePositionsById[position.id]) ||
previousNodePositionsById.root; previousNodePositionsById.root;
return `translate(${previousPosition.y!},${previousPosition.x!})`; return `translate(${previousPosition.y},${previousPosition.x})`;
}) })
.style('fill', textStyleOptions.colors.default) .style('fill', textStyleOptions.colors.default)
.style('cursor', 'pointer') .style('cursor', 'pointer')
@ -543,7 +534,7 @@ export default function (
const futurePosition = const futurePosition =
(position && nodePositionsById[position.id]) || (position && nodePositionsById[position.id]) ||
nodePositionsById.root; nodePositionsById.root;
return `translate(${futurePosition.y!},${futurePosition.x!})`; return `translate(${futurePosition.y},${futurePosition.x})`;
}) })
.remove(); .remove();
@ -570,7 +561,7 @@ export default function (
const previousPosition = const previousPosition =
(position && previousNodePositionsById[position.id]) || (position && previousNodePositionsById[position.id]) ||
previousNodePositionsById.root; previousNodePositionsById.root;
return diagonal({ return linkHorizontal({
source: previousPosition, source: previousPosition,
target: previousPosition, target: previousPosition,
}); });
@ -581,11 +572,11 @@ export default function (
} }
// transition links to their new position // transition links to their new position
link.transition().duration(transitionDuration).attr('d', diagonal); link.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
.exit() .exit<HierarchyPointLink<InternalNode>>()
.transition() .transition()
.duration(transitionDuration) .duration(transitionDuration)
.attr('d', (d) => { .attr('d', (d) => {
@ -597,7 +588,7 @@ export default function (
const futurePosition = const futurePosition =
(position && nodePositionsById[position.id]) || (position && nodePositionsById[position.id]) ||
nodePositionsById.root; nodePositionsById.root;
return diagonal({ return linkHorizontal({
source: futurePosition, source: futurePosition,
target: futurePosition, target: futurePosition,
}); });