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

Merge pull request #4352 from xyflow/refactor/system-get-handle-bounds

Browse Source 
refactor(system): reduce getBoundingClientRect calls
This commit is contained in:
Moritz Klack
2024-06-06 15:52:14 +02:00
committed by GitHub
parent fe864160a3 2272c7f0e8
commit 2394a0e931
2 changed files with 8 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/system/src/utils/dom.ts
+5 -6
View File
@@ -61,6 +61,7 @@ export const getEventPosition = (event: MouseEvent | TouchEvent, bounds?: DOMRec
export const getHandleBounds = ( export const getHandleBounds = (
selector: string, selector: string,
nodeElement: HTMLDivElement, nodeElement: HTMLDivElement,
nodeBounds: DOMRect,
zoom: number, zoom: number,
nodeOrigin: NodeOrigin = [0, 0] nodeOrigin: NodeOrigin = [0, 0]
): HandleElement[] | null => { ): HandleElement[] | null => {
@@ -72,11 +73,9 @@ export const getHandleBounds = (
const handlesArray = Array.from(handles) as HTMLDivElement[]; const handlesArray = Array.from(handles) as HTMLDivElement[];
// @todo can't we use the node dimensions here?
const nodeBounds = nodeElement.getBoundingClientRect();
const nodeOffset = { const nodeOffset = {
x: nodeBounds.width * nodeOrigin[0], x: nodeBounds.left - nodeBounds.width * nodeOrigin[0],
y: nodeBounds.height * nodeOrigin[1], y: nodeBounds.top - nodeBounds.height * nodeOrigin[1],
}; };
return handlesArray.map((handle): HandleElement => { return handlesArray.map((handle): HandleElement => {
@@ -85,8 +84,8 @@ export const getHandleBounds = (
return { return {
id: handle.getAttribute('data-handleid'), id: handle.getAttribute('data-handleid'),
position: handle.getAttribute('data-handlepos') as unknown as Position, position: handle.getAttribute('data-handlepos') as unknown as Position,
x: (handleBounds.left - nodeBounds.left - nodeOffset.x) / zoom, x: (handleBounds.left - nodeOffset.x) / zoom,
y: (handleBounds.top - nodeBounds.top - nodeOffset.y) / zoom, y: (handleBounds.top - nodeOffset.y) / zoom,
...getDimensions(handle), ...getDimensions(handle),
}; };
}); });
packages/system/src/utils/store.ts
+3 -2
View File
@@ -269,12 +269,13 @@ export function updateNodeInternals<NodeType extends InternalNodeBase>(
); );
if (doUpdate) { if (doUpdate) {
const nodeBounds = update.nodeElement.getBoundingClientRect();
node.measured = dimensions; node.measured = dimensions;
node.internals = { node.internals = {
...node.internals, ...node.internals,
handleBounds: { handleBounds: {
source: getHandleBounds('.source', update.nodeElement, zoom, node.origin || nodeOrigin), source: getHandleBounds('.source', update.nodeElement, nodeBounds, zoom, node.origin || nodeOrigin),
target: getHandleBounds('.target', update.nodeElement, zoom, node.origin || nodeOrigin), target: getHandleBounds('.target', update.nodeElement, nodeBounds, zoom, node.origin || nodeOrigin),
}, },
}; };