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

chore(store): cleanup

Browse Source
This commit is contained in:
moklick
2024-09-04 17:07:00 +02:00
parent aa248af495
commit 122f722742
3 changed files with 68 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files
examples/react/src/examples/Subflow/index.tsx
+8 -10
View File
@@ -15,6 +15,7 @@ import {
Panel,
useUpdateNodeInternals,
ReactFlowProvider,
CoordinateExtent,
} from '@xyflow/react';
import DebugNode from './DebugNode';
@@ -162,6 +163,11 @@ const nodeTypes = {
default: DebugNode,
};
const nodeExtent: CoordinateExtent = [
[0, 0],
[1000, 1000],
];
const Subflow = () => {
const [rfInstance, setRfInstance] = useState<ReactFlowInstance | null>(null);
const updateNodeInternals = useUpdateNodeInternals();
@@ -231,10 +237,7 @@ const Subflow = () => {
nodeTypes={nodeTypes}
fitView
nodeOrigin={[0, 0]}
nodeExtent={[
[0, 0],
[1000, 1000],
]}
nodeExtent={nodeExtent}
>
<MiniMap />
<Controls />
@@ -254,12 +257,7 @@ const Subflow = () => {
};
export default () => (
<ReactFlowProvider
nodeExtent={[
[0, 0],
[1000, 1000],
]}
>
<ReactFlowProvider nodeExtent={nodeExtent}>
<Subflow />
</ReactFlowProvider>
);
packages/system/src/utils/general.ts
+18
View File
@@ -25,6 +25,24 @@ export const clampPosition = (
y: clamp(position.y, extent[0][1], extent[1][1] - (dimensions?.height ?? 0)),
});
export function clampPositionToParent<NodeType extends NodeBase>(
childPosition: XYPosition,
childDimensions: Dimensions,
parent: InternalNodeBase<NodeType>
) {
const { width: parentWidth, height: parentHeight } = getNodeDimensions(parent);
const { x: parentX, y: parentY } = parent.internals.positionAbsolute;
return clampPosition(
childPosition,
[
[parentX, parentY],
[parentX + parentWidth, parentY + parentHeight],
],
childDimensions
);
}
/**
* Calculates the velocity of panning when the mouse is close to the edge of the canvas
* @internal
packages/system/src/utils/store.ts
+42 -47
View File
@@ -1,4 +1,4 @@
import { Dimensions, infiniteExtent } from '..';
import { infiniteExtent } from '..';
import {
NodeBase,
CoordinateExtent,
@@ -20,6 +20,7 @@ import {
import { getDimensions, getHandleBounds } from './dom';
import {
clampPosition,
clampPositionToParent,
getBoundsOfRects,
getNodeDimensions,
isCoordinateExtent,
@@ -64,7 +65,7 @@ export function updateAbsolutePositions<NodeType extends NodeBase>(
continue;
}
updateChildPosition(node, nodeLookup, parentLookup, _options);
updateChildNode(node, nodeLookup, parentLookup, _options);
}
}
@@ -83,21 +84,21 @@ export function adoptUserNodes<NodeType extends NodeBase>(
options?: UpdateNodesOptions<NodeType>
) {
const _options = mergeObjects(adoptUserNodesDefaultOptions, options);
const tmpLookup = new Map(nodeLookup);
const selectedNodeZ: number = _options?.elevateNodesOnSelect ? 1000 : 0;
nodeLookup.clear();
parentLookup.clear();
const selectedNodeZ: number = options?.elevateNodesOnSelect ? 1000 : 0;
for (const userNode of nodes) {
let internalNode = tmpLookup.get(userNode.id);
if (_options.checkEquality && userNode === internalNode?.internals.userNode) {
nodeLookup.set(userNode.id, internalNode);
} else {
const positionOrigin = getNodePositionWithOrigin(userNode, _options.nodeOrigin);
const positionWithOrigin = getNodePositionWithOrigin(userNode, _options.nodeOrigin);
const extent = isCoordinateExtent(userNode.extent) ? userNode.extent : _options.nodeExtent;
const positionAbsolute = clampPosition(positionOrigin, extent, getNodeDimensions(userNode));
const clampedPosition = clampPosition(positionWithOrigin, extent, getNodeDimensions(userNode));
internalNode = {
..._options.defaults,
@@ -107,30 +108,50 @@ export function adoptUserNodes<NodeType extends NodeBase>(
height: userNode.measured?.height,
},
internals: {
positionAbsolute,
positionAbsolute: clampedPosition,
// if user re-initializes the node or removes `measured` for whatever reason, we reset the handleBounds so that the node gets re-measured
handleBounds: !userNode.measured ? undefined : internalNode?.internals.handleBounds,
z: calculateZ(userNode, selectedNodeZ),
userNode,
},
};
nodeLookup.set(userNode.id, internalNode);
}
if (userNode.parentId) {
updateChildPosition(internalNode, nodeLookup, parentLookup, options);
updateChildNode(internalNode, nodeLookup, parentLookup, options);
}
}
}
function updateChildPosition<NodeType extends NodeBase>(
function updateParentLookup<NodeType extends NodeBase>(
node: InternalNodeBase<NodeType>,
parentLookup: ParentLookup<InternalNodeBase<NodeType>>
) {
if (!node.parentId) {
return;
}
const childNodes = parentLookup.get(node.parentId);
if (childNodes) {
childNodes.set(node.id, node);
} else {
parentLookup.set(node.parentId, new Map([[node.id, node]]));
}
}
/**
* Updates positionAbsolute and zIndex of a child node and the parentLookup.
*/
function updateChildNode<NodeType extends NodeBase>(
node: InternalNodeBase<NodeType>,
nodeLookup: NodeLookup<InternalNodeBase<NodeType>>,
parentLookup: ParentLookup<InternalNodeBase<NodeType>>,
options?: UpdateNodesOptions<NodeType>
) {
const _options = mergeObjects(defaultOptions, options);
const { elevateNodesOnSelect, nodeOrigin } = mergeObjects(defaultOptions, options);
const parentId = node.parentId!;
const parentNode = nodeLookup.get(parentId);
@@ -141,48 +162,22 @@ function updateChildPosition<NodeType extends NodeBase>(
return;
}
// update the parentLookup
const childNodes = parentLookup.get(parentId);
if (childNodes) {
childNodes.set(node.id, node);
} else {
parentLookup.set(parentId, new Map([[node.id, node]]));
}
updateParentLookup(node, parentLookup);
const selectedNodeZ: number = options?.elevateNodesOnSelect ? 1000 : 0;
const { x, y, z } = calculateChildXYZ(node, parentNode, _options.nodeOrigin!, selectedNodeZ);
const currPosition = node.internals.positionAbsolute;
const positionChanged = x !== currPosition.x || y !== currPosition.y;
const selectedNodeZ = elevateNodesOnSelect ? 1000 : 0;
const { x, y, z } = calculateChildXYZ(node, parentNode, nodeOrigin, selectedNodeZ);
const { positionAbsolute } = node.internals;
const positionChanged = x !== positionAbsolute.x || y !== positionAbsolute.y;
if (positionChanged || z !== node.internals.z) {
node.internals = {
...node.internals,
positionAbsolute: positionChanged ? { x, y } : currPosition,
positionAbsolute: positionChanged ? { x, y } : positionAbsolute,
z,
};
}
}
function clampPositionToParent<NodeType extends NodeBase>(
childPosition: XYPosition,
childDimensions: Dimensions,
parent: InternalNodeBase<NodeType>
) {
const parentDimensions = getNodeDimensions(parent);
const parentPosition = parent.internals.positionAbsolute;
return clampPosition(
childPosition,
[
[parentPosition.x, parentPosition.y],
[parentPosition.x + parentDimensions.width, parentPosition.y + parentDimensions.height],
],
childDimensions
);
}
function calculateZ(node: NodeBase, selectedNodeZ: number) {
return (isNumeric(node.zIndex) ? node.zIndex : 0) + (node.selected ? selectedNodeZ : 0);
}
@@ -193,14 +188,14 @@ function calculateChildXYZ<NodeType extends NodeBase>(
nodeOrigin: NodeOrigin,
selectedNodeZ: number
) {
const parentPosition = parentNode.internals.positionAbsolute;
const { x: parentX, y: parentY } = parentNode.internals.positionAbsolute;
const childDimensions = getNodeDimensions(childNode);
const positionWithOrigin = getNodePositionWithOrigin(childNode, nodeOrigin);
const clampedPosition = isCoordinateExtent(childNode.extent)
? clampPosition(positionWithOrigin, childNode.extent, childDimensions)
: positionWithOrigin;
let absolutePosition = { x: parentPosition.x + clampedPosition.x, y: parentPosition.y + clampedPosition.y };
let absolutePosition = { x: parentX + clampedPosition.x, y: parentY + clampedPosition.y };
if (childNode.extent === 'parent') {
absolutePosition = clampPositionToParent(absolutePosition, childDimensions, parentNode);
@@ -365,7 +360,7 @@ export function updateNodeInternals<NodeType extends InternalNodeBase>(
},
};
if (node.parentId) {
updateChildPosition(node, nodeLookup, parentLookup, { nodeOrigin });
updateChildNode(node, nodeLookup, parentLookup, { nodeOrigin });
}
updatedInternals = true;