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

refactor(system): reduce getBoundingClientRect calls

Browse Source
This commit is contained in:
moklick
2024-06-06 15:10:55 +02:00
parent fe864160a3
commit 2272c7f0e8
2 changed files with 8 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
packages/system/src/utils/dom.ts
View File

@@ -61,6 +61,7 @@ export const getEventPosition = (event: MouseEvent | TouchEvent, bounds?: DOMRec
export const getHandleBounds = (
selector: string,
nodeElement: HTMLDivElement,
nodeBounds: DOMRect,
zoom: number,
nodeOrigin: NodeOrigin = [0, 0]
): HandleElement[] | null => {
@@ -72,11 +73,9 @@ export const getHandleBounds = (
const handlesArray = Array.from(handles) as HTMLDivElement[];
// @todo can't we use the node dimensions here?
const nodeBounds = nodeElement.getBoundingClientRect();
const nodeOffset = {
x: nodeBounds.width * nodeOrigin[0],
y: nodeBounds.height * nodeOrigin[1],
x: nodeBounds.left - nodeBounds.width * nodeOrigin[0],
y: nodeBounds.top - nodeBounds.height * nodeOrigin[1],
};
return handlesArray.map((handle): HandleElement => {
@@ -85,8 +84,8 @@ export const getHandleBounds = (
return {
id: handle.getAttribute('data-handleid'),
position: handle.getAttribute('data-handlepos') as unknown as Position,
x: (handleBounds.left - nodeBounds.left - nodeOffset.x) / zoom,
y: (handleBounds.top - nodeBounds.top - nodeOffset.y) / zoom,
x: (handleBounds.left - nodeOffset.x) / zoom,
y: (handleBounds.top - nodeOffset.y) / zoom,
...getDimensions(handle),
};
});

5
packages/system/src/utils/store.ts
View File

@@ -269,12 +269,13 @@ export function updateNodeInternals<NodeType extends InternalNodeBase>(
);
if (doUpdate) {
const nodeBounds = update.nodeElement.getBoundingClientRect();
node.measured = dimensions;
node.internals = {
...node.internals,
handleBounds: {
source: getHandleBounds('.source', update.nodeElement, zoom, node.origin || nodeOrigin),
target: getHandleBounds('.target', update.nodeElement, zoom, node.origin || nodeOrigin),
source: getHandleBounds('.source', update.nodeElement, nodeBounds, zoom, node.origin || nodeOrigin),
target: getHandleBounds('.target', update.nodeElement, nodeBounds, zoom, node.origin || nodeOrigin),
},
};