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

refactor(nodes): add computed attr for width/height and absolute position

Browse Source
This commit is contained in:
moklick
2023-11-21 15:06:42 +01:00
parent a27e813cf7
commit d812dbbe53
30 changed files with 177 additions and 134 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/system/src/xydrag/XYDrag.ts
+7 -5
View File
@@ -140,11 +140,13 @@ export function XYDrag({
];
if (dragItems.length > 1 && nodeExtent && !n.extent) {
adjustedNodeExtent[0][0] = n.positionAbsolute.x - nodesBox.x + nodeExtent[0][0];
adjustedNodeExtent[1][0] = n.positionAbsolute.x + (n.width ?? 0) - nodesBox.x2 + nodeExtent[1][0];
adjustedNodeExtent[0][0] = n.computed.positionAbsolute.x - nodesBox.x + nodeExtent[0][0];
adjustedNodeExtent[1][0] =
n.computed.positionAbsolute.x + (n.computed?.width ?? 0) - nodesBox.x2 + nodeExtent[1][0];
adjustedNodeExtent[0][1] = n.positionAbsolute.y - nodesBox.y + nodeExtent[0][1];
adjustedNodeExtent[1][1] = n.positionAbsolute.y + (n.height ?? 0) - nodesBox.y2 + nodeExtent[1][1];
adjustedNodeExtent[0][1] = n.computed.positionAbsolute.y - nodesBox.y + nodeExtent[0][1];
adjustedNodeExtent[1][1] =
n.computed.positionAbsolute.y + (n.computed?.height ?? 0) - nodesBox.y2 + nodeExtent[1][1];
}
const updatedPos = calcNextPosition(n, nextPosition, nodes, adjustedNodeExtent, nodeOrigin, onError);
@@ -153,7 +155,7 @@ export function XYDrag({
hasChange = hasChange || n.position.x !== updatedPos.position.x || n.position.y !== updatedPos.position.y;
n.position = updatedPos.position;
n.positionAbsolute = updatedPos.positionAbsolute;
n.computed.positionAbsolute = updatedPos.positionAbsolute;
return n;
});
packages/system/src/xydrag/utils.ts
+13 -8
View File
@@ -51,10 +51,9 @@ export function getDragItems<NodeType extends NodeBase>(
.map((n) => ({
id: n.id,
position: n.position || { x: 0, y: 0 },
positionAbsolute: n.positionAbsolute || { x: 0, y: 0 },
distance: {
x: mousePos.x - (n.positionAbsolute?.x ?? 0),
y: mousePos.y - (n.positionAbsolute?.y ?? 0),
x: mousePos.x - (n.computed?.positionAbsolute?.x ?? 0),
y: mousePos.y - (n.computed?.positionAbsolute?.y ?? 0),
},
delta: {
x: 0,
@@ -62,10 +61,13 @@ export function getDragItems<NodeType extends NodeBase>(
},
extent: n.extent,
parentNode: n.parentNode,
width: n.width,
height: n.height,
origin: n.origin,
expandParent: n.expandParent,
computed: {
positionAbsolute: n.computed?.positionAbsolute || { x: 0, y: 0 },
width: n.computed?.width || 0,
height: n.computed?.height || 0,
},
}));
}
@@ -81,15 +83,18 @@ export function getEventHandlerParams<NodeType extends NodeBase>({
dragItems: NodeDragItem[];
nodeLookup: Map<string, NodeType>;
}): [NodeType, NodeType[]] {
const extentedDragItems: NodeType[] = dragItems.map((n) => {
const nodesFromDragItems: NodeType[] = dragItems.map((n) => {
const node = nodeLookup.get(n.id)!;
return {
...node,
position: n.position,
positionAbsolute: n.positionAbsolute,
computed: {
...n.computed,
positionAbsolute: n.computed.positionAbsolute,
},
};
});
return [nodeId ? extentedDragItems.find((n) => n.id === nodeId)! : extentedDragItems[0], extentedDragItems];
return [nodeId ? nodesFromDragItems.find((n) => n.id === nodeId)! : nodesFromDragItems[0], nodesFromDragItems];
}