fix(store): calc handle pos

This commit is contained in:
moklick
2024-06-24 14:38:45 +02:00
parent 8ad1797f98
commit 1a25a7da48
3 changed files with 9 additions and 26 deletions
+6 -24
View File
@@ -1,13 +1,4 @@
import type { import type { Transform, XYPosition, SnapGrid, Dimensions, HandleElement, Position } from '../types';
Transform,
XYPosition,
SnapGrid,
Dimensions,
NodeOrigin,
HandleElement,
Position,
InternalNodeBase,
} from '../types';
import { snapPosition, pointToRendererPoint } from './general'; import { snapPosition, pointToRendererPoint } from './general';
export type GetPointerPositionParams = { export type GetPointerPositionParams = {
@@ -69,11 +60,9 @@ export const getEventPosition = (event: MouseEvent | TouchEvent, bounds?: DOMRec
// unnecessary recalculations. // unnecessary recalculations.
export const getHandleBounds = ( export const getHandleBounds = (
selector: string, selector: string,
node: InternalNodeBase,
nodeElement: HTMLDivElement, nodeElement: HTMLDivElement,
nodeBounds: DOMRect, nodeBounds: DOMRect,
zoom: number, zoom: number
nodeOrigin: NodeOrigin = [0, 0]
): HandleElement[] | null => { ): HandleElement[] | null => {
const handles = nodeElement.querySelectorAll(selector); const handles = nodeElement.querySelectorAll(selector);
@@ -81,22 +70,15 @@ export const getHandleBounds = (
return null; return null;
} }
const handlesArray = Array.from(handles) as HTMLDivElement[]; return Array.from(handles).map((handle): HandleElement => {
const nodeOffset = {
x: nodeBounds.left + nodeBounds.width * nodeOrigin[0],
y: nodeBounds.top + nodeBounds.height * nodeOrigin[1],
};
return handlesArray.map((handle): HandleElement => {
const handleBounds = handle.getBoundingClientRect(); const handleBounds = handle.getBoundingClientRect();
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 - nodeOffset.x) / zoom, x: (handleBounds.left - nodeBounds.left) / zoom,
y: (handleBounds.top - nodeOffset.y) / zoom, y: (handleBounds.top - nodeBounds.top) / zoom,
...getDimensions(handle), ...getDimensions(handle as HTMLDivElement),
}; };
}); });
}; };
+1
View File
@@ -248,6 +248,7 @@ export function evaluateAbsolutePosition(
nodeLookup: NodeLookup, nodeLookup: NodeLookup,
nodeOrigin: NodeOrigin nodeOrigin: NodeOrigin
): XYPosition { ): XYPosition {
let nextParentId: string | undefined = parentId;
const positionAbsolute = { ...position }; const positionAbsolute = { ...position };
while (nextParentId) { while (nextParentId) {
+2 -2
View File
@@ -283,11 +283,11 @@ export function updateNodeInternals<NodeType extends InternalNodeBase>(
if (doUpdate) { if (doUpdate) {
const nodeBounds = update.nodeElement.getBoundingClientRect(); const nodeBounds = update.nodeElement.getBoundingClientRect();
node.measured = dimensions; node.measured = dimensions;
node.internals = { node.internals = {
...node.internals, ...node.internals,
positionAbsolute, positionAbsolute: getNodePositionWithOrigin(node, nodeOrigin),
handleBounds: { handleBounds: {
source: getHandleBounds('.source', update.nodeElement, nodeBounds, zoom), source: getHandleBounds('.source', update.nodeElement, nodeBounds, zoom),
target: getHandleBounds('.target', update.nodeElement, nodeBounds, zoom), target: getHandleBounds('.target', update.nodeElement, nodeBounds, zoom),