alighasami/xyflow
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor/vanilla store utils (#3138)

Browse Source 
* feat(stores): use vanilla store utils

* fix(store-utils): keep dimensions if possible

* feat(utils): add nodeDimension and panBy utils

* fix(svelte): use correct updateDim func

* refactor(react): cleanup store

* chore(tests): use new imports
This commit is contained in:
Moritz Klack
2023-06-13 15:55:06 +02:00
committed by GitHub
parent 51375cd482
commit 65d1c3bbd4
27 changed files with 426 additions and 393 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/react/src/container/Viewport/index.tsx
+1 -1
View File
@@ -13,7 +13,7 @@ function Viewport({ children }: ViewportProps) {
const transform = useStore(selector);
return (
<div className="react-flow__viewport react-flow__container" style={{ transform }}>
<div className="react-flow__viewport xyflow__viewport react-flow__container" style={{ transform }}>
{children}
</div>
);
packages/react/src/hooks/useResizeHandler.ts
+3
View File
@@ -8,6 +8,9 @@ function useResizeHandler(domNode: MutableRefObject<HTMLDivElement | null>): voi
useEffect(() => {
const updateDimensions = () => {
if (!domNode.current) {
return false;
}
const size = getDimensions(domNode.current!);
if (size.height === 0 || size.width === 0) {
packages/react/src/store/index.ts
+60 -96
View File
@@ -1,15 +1,16 @@
import { createStore } from 'zustand';
import {
clampPosition,
getDimensions,
fitView,
getHandleBounds,
internalsSymbol,
type CoordinateExtent,
fitView as fitViewSystem,
updateNodes,
updateAbsolutePositions,
panBy as panBySystem,
Dimensions,
updateNodeDimensions as updateNodeDimensionsSystem,
} from '@xyflow/system';
import { applyNodeChanges, createSelectionChange, getSelectionChanges } from '../utils/changes';
import { createNodeInternals, updateAbsoluteNodePositions, updateNodesAndEdgesSelections } from './utils';
import { updateNodesAndEdgesSelections } from './utils';
import initialState from './initialState';
import type {
ReactFlowState,
@@ -20,6 +21,7 @@ import type {
NodeSelectionChange,
NodePositionChange,
UnselectNodesAndEdgesParams,
FitViewOptions,
} from '../types';
const createRFStore = () =>
@@ -27,7 +29,9 @@ const createRFStore = () =>
...initialState,
setNodes: (nodes: Node[]) => {
const { nodes: storeNodes, nodeOrigin, elevateNodesOnSelect } = get();
set({ nodes: createNodeInternals(nodes, storeNodes, nodeOrigin, elevateNodesOnSelect) });
const nextNodes = updateNodes(nodes, storeNodes, { nodeOrigin, elevateNodesOnSelect });
set({ nodes: nextNodes });
},
getNodes: () => {
return get().nodes;
@@ -41,91 +45,49 @@ const createRFStore = () =>
const hasDefaultEdges = typeof edges !== 'undefined';
const nextNodes = hasDefaultNodes
? createNodeInternals(nodes, [], get().nodeOrigin, get().elevateNodesOnSelect)
? updateNodes(nodes, [], {
nodeOrigin: get().nodeOrigin,
elevateNodesOnSelect: get().elevateNodesOnSelect,
})
: [];
const nextEdges = hasDefaultEdges ? edges : [];
set({ nodes: nextNodes, edges: nextEdges, hasDefaultNodes, hasDefaultEdges });
},
updateNodeDimensions: (updates) => {
const {
onNodesChange,
const { onNodesChange, fitView, nodes, fitViewOnInit, fitViewDone, fitViewOnInitOptions, domNode, nodeOrigin } =
get();
const changes: NodeDimensionChange[] = [];
const updatedNodes = updateNodeDimensionsSystem(
updates,
nodes,
fitViewOnInit,
fitViewOnInitDone,
fitViewOnInitOptions,
domNode,
nodeOrigin,
width,
height,
minZoom,
maxZoom,
panZoom,
} = get();
const viewportNode = domNode?.querySelector('.react-flow__viewport');
(id: string, dimensions: Dimensions) => {
changes.push({
id: id,
type: 'dimensions',
dimensions,
});
}
);
if (!viewportNode) {
if (!updatedNodes) {
return;
}
const style = window.getComputedStyle(viewportNode);
const { m22: zoom } = new window.DOMMatrixReadOnly(style.transform);
const changes: NodeDimensionChange[] = [];
const nextNodes = updateAbsolutePositions(updatedNodes, nodeOrigin);
const nextNodes = nodes.map((node) => {
const update = updates.find((change) => change.id === node.id);
if (update) {
const dimensions = getDimensions(update.nodeElement);
const doUpdate = !!(
dimensions.width &&
dimensions.height &&
(node.width !== dimensions.width || node.height !== dimensions.height || update.forceUpdate)
);
if (doUpdate) {
changes.push({
id: node.id,
type: 'dimensions',
dimensions,
});
return {
...node,
...dimensions,
[internalsSymbol]: {
...node[internalsSymbol],
handleBounds: {
source: getHandleBounds('.source', update.nodeElement, zoom, node.origin || nodeOrigin),
target: getHandleBounds('.target', update.nodeElement, zoom, node.origin || nodeOrigin),
},
},
};
}
}
return node;
});
updateAbsoluteNodePositions(nextNodes, nodeOrigin);
const nextFitViewOnInitDone =
fitViewOnInitDone ||
const nextFitViewDone =
fitViewDone ||
(fitViewOnInit &&
!!panZoom &&
fitView(
{
nodes: nextNodes,
width,
height,
panZoom,
minZoom,
maxZoom,
nodeOrigin,
},
fitViewOnInitOptions
));
set({ nodes: nextNodes, fitViewOnInitDone: nextFitViewOnInitDone });
fitView({
...fitViewOnInitOptions,
nodes: nextNodes,
}));
set({ nodes: nextNodes, fitViewDone: nextFitViewDone });
if (changes?.length > 0) {
onNodesChange?.(changes);
@@ -156,7 +118,10 @@ const createRFStore = () =>
if (changes?.length) {
if (hasDefaultNodes) {
const updatedNodes = applyNodeChanges(changes, nodes);
const nextNodes = createNodeInternals(updatedNodes, nodes, nodeOrigin, elevateNodesOnSelect);
const nextNodes = updateNodes(updatedNodes, nodes, {
nodeOrigin,
elevateNodesOnSelect,
});
set({ nodes: nextNodes });
}
@@ -273,29 +238,28 @@ const createRFStore = () =>
},
panBy: (delta): boolean => {
const { transform, width, height, panZoom, translateExtent } = get();
return panBySystem({ delta, panZoom, transform, translateExtent, width, height });
},
fitView: (options?: FitViewOptions): boolean => {
const { panZoom, nodes, width, height, minZoom, maxZoom, nodeOrigin } = get();
const fitViewNodes = options?.nodes || nodes;
if (!panZoom || (!delta.x && !delta.y)) {
if (!panZoom) {
return false;
}
const extent: CoordinateExtent = [
[0, 0],
[width, height],
];
const constrainedTransform = panZoom.setViewportConstrained(
{ x: transform[0] + delta.x, y: transform[1] + delta.y, zoom: transform[2] },
extent,
translateExtent
return fitViewSystem(
{
nodes: fitViewNodes as Node[],
width,
height,
panZoom,
minZoom,
maxZoom,
nodeOrigin,
},
options
);
const transformChanged =
!!constrainedTransform &&
(transform[0] !== constrainedTransform.x ||
transform[1] !== constrainedTransform.y ||
transform[2] !== constrainedTransform.k);
return transformChanged;
},
cancelConnection: () =>
set({
packages/react/src/store/initialState.ts
+1 -1
View File
@@ -40,7 +40,7 @@ const initialState: ReactFlowStore = {
elementsSelectable: true,
elevateNodesOnSelect: true,
fitViewOnInit: false,
fitViewOnInitDone: false,
fitViewDone: false,
fitViewOnInitOptions: undefined,
selectNodesOnDrag: true,
packages/react/src/store/utils.ts
-107
View File
@@ -1,113 +1,6 @@
import type { StoreApi } from 'zustand';
import {
internalsSymbol,
isNumeric,
getNodePositionWithOrigin,
type XYZPosition,
type NodeOrigin,
} from '@xyflow/system';
import type { Edge, EdgeSelectionChange, Node, NodeSelectionChange, ReactFlowState } from '../types';
type ParentNodes = Record<string, boolean>;
function calculateXYZPosition(node: Node, nodes: Node[], result: XYZPosition, nodeOrigin: NodeOrigin): XYZPosition {
if (!node.parentNode) {
return result;
}
const parentNode = nodes.find((n) => n.id === node.parentNode)!;
const parentNodePosition = getNodePositionWithOrigin(parentNode, parentNode?.origin || nodeOrigin);
return calculateXYZPosition(
parentNode,
nodes,
{
x: (result.x ?? 0) + parentNodePosition.x,
y: (result.y ?? 0) + parentNodePosition.y,
z: (parentNode[internalsSymbol]?.z ?? 0) > (result.z ?? 0) ? parentNode[internalsSymbol]?.z ?? 0 : result.z ?? 0,
},
parentNode.origin || nodeOrigin
);
}
export function updateAbsoluteNodePositions(nodes: Node[], nodeOrigin: NodeOrigin, parentNodes?: ParentNodes) {
nodes.forEach((node) => {
if (node.parentNode && !nodes.find((n) => n.id === node.parentNode)) {
throw new Error(`Parent node ${node.parentNode} not found`);
}
if (node.parentNode || parentNodes?.[node.id]) {
const parentNode = node.parentNode ? nodes.find((n) => n.id === node.parentNode) : null;
const { x, y, z } = calculateXYZPosition(
node,
nodes,
{
...node.position,
z: node[internalsSymbol]?.z ?? 0,
},
parentNode?.origin || nodeOrigin
);
node.positionAbsolute = {
x,
y,
};
node[internalsSymbol]!.z = z;
if (parentNodes?.[node.id]) {
node[internalsSymbol]!.isParent = true;
}
}
});
}
export function createNodeInternals(
nodes: Node[],
storeNodes: Node[],
nodeOrigin: NodeOrigin,
elevateNodesOnSelect: boolean
): Node[] {
const nextNodes: Node[] = [];
const parentNodes: ParentNodes = {};
const selectedNodeZ: number = elevateNodesOnSelect ? 1000 : 0;
nodes.forEach((node) => {
const z = (isNumeric(node.zIndex) ? node.zIndex : 0) + (node.selected ? selectedNodeZ : 0);
const currInternals = storeNodes.find((n) => n.id === node.id);
const updatedNode: Node = {
width: currInternals?.width,
height: currInternals?.height,
...node,
positionAbsolute: {
x: node.position.x,
y: node.position.y,
},
};
if (node.parentNode) {
updatedNode.parentNode = node.parentNode;
parentNodes[node.parentNode] = true;
}
Object.defineProperty(updatedNode, internalsSymbol, {
enumerable: false,
value: {
handleBounds: currInternals?.[internalsSymbol]?.handleBounds,
z,
},
});
nextNodes.push(updatedNode);
});
updateAbsoluteNodePositions(nodes, nodeOrigin, parentNodes);
return nextNodes;
}
export function handleControlledSelectionChange<NodeOrEdge extends Node | Edge>(
changes: NodeSelectionChange[] | EdgeSelectionChange[],
items: NodeOrEdge[]
packages/react/src/types/store.ts
+2 -2
View File
@@ -111,7 +111,7 @@ export type ReactFlowStore = {
defaultEdgeOptions?: DefaultEdgeOptions;
fitViewOnInit: boolean;
fitViewOnInitDone: boolean;
fitViewDone: boolean;
fitViewOnInitOptions: FitViewOptions | undefined;
onNodesDelete?: OnNodesDelete;
@@ -151,11 +151,11 @@ export type ReactFlowActions = {
setTranslateExtent: (translateExtent: CoordinateExtent) => void;
setNodeExtent: (nodeExtent: CoordinateExtent) => void;
cancelConnection: () => void;
// @todo can this be reused by system?
updateConnection: UpdateConnection;
reset: () => void;
triggerNodeChanges: (changes: NodeChange[]) => void;
panBy: PanBy;
fitView: (options?: FitViewOptions) => boolean;
};
export type ReactFlowState = ReactFlowStore & ReactFlowActions;