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

Include origin directly in positionAbsolute of node

Browse Source
This commit is contained in:
peterkogo
2024-05-22 15:38:08 +02:00
parent 02250e972d
commit e81194d58a
15 changed files with 7354 additions and 5920 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/system/src/utils/dom.ts
+11 -1
View File
@@ -1,4 +1,13 @@
import type { Transform, XYPosition, SnapGrid, Dimensions, NodeOrigin, HandleElement, Position } from '../types';
import type {
Transform,
XYPosition,
SnapGrid,
Dimensions,
NodeOrigin,
HandleElement,
Position,
InternalNodeBase,
} from '../types';
import { snapPosition, pointToRendererPoint } from './general';
export type GetPointerPositionParams = {
@@ -60,6 +69,7 @@ export const getEventPosition = (event: MouseEvent | TouchEvent, bounds?: DOMRec
// unnecessary recalculations.
export const getHandleBounds = (
selector: string,
node: InternalNodeBase,
nodeElement: HTMLDivElement,
zoom: number,
nodeOrigin: NodeOrigin = [0, 0]
packages/system/src/utils/general.ts
+13 -16
View File
@@ -12,7 +12,7 @@ import type {
NodeLookup,
} from '../types';
import { type Viewport } from '../types';
import { getNodePositionWithOrigin } from './graph';
import { getNodePositionWithOrigin, isInternalNodeBase } from './graph';
export const clamp = (val: number, min = 0, max = 1): number => Math.min(Math.max(val, min), max);
@@ -68,7 +68,9 @@ export const boxToRect = ({ x, y, x2, y2 }: Box): Rect => ({
});
export const nodeToRect = (node: InternalNodeBase | NodeBase, nodeOrigin: NodeOrigin = [0, 0]): Rect => {
const { x, y } = getNodePositionWithOrigin(node, nodeOrigin).positionAbsolute;
const { x, y } = isInternalNodeBase(node)
? node.internals.positionAbsolute
: getNodePositionWithOrigin(node, nodeOrigin);
return {
x,
@@ -79,7 +81,9 @@ export const nodeToRect = (node: InternalNodeBase | NodeBase, nodeOrigin: NodeOr
};
export const nodeToBox = (node: InternalNodeBase | NodeBase, nodeOrigin: NodeOrigin = [0, 0]): Box => {
const { x, y } = getNodePositionWithOrigin(node, nodeOrigin).positionAbsolute;
const { x, y } = isInternalNodeBase(node)
? node.internals.positionAbsolute
: getNodePositionWithOrigin(node, nodeOrigin);
return {
x,
@@ -239,24 +243,17 @@ export function nodeHasDimensions<NodeType extends NodeBase = NodeBase>(node: No
*/
export function evaluateAbsolutePosition(
position: XYPosition,
dimensions: { width: number; height: number },
parentId: string,
nodeLookup: NodeLookup,
nodeOrigin: NodeOrigin = [0, 0]
nodeOrigin: NodeOrigin
): XYPosition {
let nextParentId: string | undefined = parentId;
const positionAbsolute = { ...position };
while (nextParentId) {
const parent = nodeLookup.get(parentId);
nextParentId = parent?.parentId;
if (parent) {
const origin = parent.origin || nodeOrigin;
const xOffset = (parent.measured.width ?? 0) * origin[0];
const yOffset = (parent.measured.height ?? 0) * origin[1];
positionAbsolute.x += parent.position.x - xOffset;
positionAbsolute.y += parent.position.y - yOffset;
}
const parent = nodeLookup.get(parentId);
if (parent) {
positionAbsolute.x += parent.internals.positionAbsolute.x - dimensions.width * nodeOrigin[0];
positionAbsolute.y += parent.internals.positionAbsolute.y - dimensions.height * nodeOrigin[1];
}
return positionAbsolute;
packages/system/src/utils/graph.ts
+11 -25
View File
@@ -106,25 +106,15 @@ export const getIncomers = <NodeType extends NodeBase = NodeBase, EdgeType exten
return nodes.filter((n) => incomersIds.has(n.id));
};
export const getNodePositionWithOrigin = (
node: InternalNodeBase | NodeBase,
nodeOrigin: NodeOrigin = [0, 0]
): { position: XYPosition; positionAbsolute: XYPosition } => {
export const getNodePositionWithOrigin = (node: NodeBase, nodeOrigin: NodeOrigin = [0, 0]): XYPosition => {
const { width, height } = getNodeDimensions(node);
const positionAbsolute = 'internals' in node ? node.internals.positionAbsolute : node.position;
const origin = node.origin || nodeOrigin;
const origin = node.origin ?? nodeOrigin;
const offsetX = width * origin[0];
const offsetY = height * origin[1];
return {
position: {
x: node.position.x - offsetX,
y: node.position.y - offsetY,
},
positionAbsolute: {
x: positionAbsolute.x - offsetX,
y: positionAbsolute.y - offsetY,
},
x: node.position.x - offsetX,
y: node.position.y - offsetY,
};
};
@@ -323,9 +313,8 @@ export function calculateNodePosition<NodeType extends NodeBase>({
}): { position: XYPosition; positionAbsolute: XYPosition } {
const node = nodeLookup.get(nodeId)!;
const parentNode = node.parentId ? nodeLookup.get(node.parentId) : undefined;
const { x: parentX, y: parentY } = parentNode
? getNodePositionWithOrigin(parentNode, parentNode.origin || nodeOrigin).positionAbsolute
: { x: 0, y: 0 };
const { x: parentX, y: parentY } = parentNode ? parentNode.internals.positionAbsolute : { x: 0, y: 0 };
const origin = node.origin ?? nodeOrigin;
let currentExtent = clampNodeExtent(node, node.extent || nodeExtent);
@@ -339,13 +328,9 @@ export function calculateNodePosition<NodeType extends NodeBase>({
const parentHeight = parentNode.measured.height;
if (nodeWidth && nodeHeight && parentWidth && parentHeight) {
const currNodeOrigin = node.origin || nodeOrigin;
const extentX = parentX + nodeWidth * currNodeOrigin[0];
const extentY = parentY + nodeHeight * currNodeOrigin[1];
currentExtent = [
[extentX, extentY],
[extentX + parentWidth - nodeWidth, extentY + parentHeight - nodeHeight],
[parentX, parentY],
[parentX + parentWidth - nodeWidth, parentY + parentHeight - nodeHeight],
];
}
}
@@ -362,8 +347,9 @@ export function calculateNodePosition<NodeType extends NodeBase>({
return {
position: {
x: positionAbsolute.x - parentX,
y: positionAbsolute.y - parentY,
// TODO: is there a better way to do this?
x: positionAbsolute.x - parentX + node.measured.width! * origin[0],
y: positionAbsolute.y - parentY + node.measured.height! * origin[1],
},
positionAbsolute,
};
packages/system/src/utils/store.ts
+101 -83
View File
@@ -6,7 +6,6 @@ import {
PanZoomInstance,
Transform,
XYPosition,
XYZPosition,
ConnectionLookup,
EdgeBase,
EdgeLookup,
@@ -16,6 +15,7 @@ import {
NodeDimensionChange,
NodePositionChange,
ParentLookup,
Dimensions,
} from '../types';
import { getDimensions, getHandleBounds } from './dom';
import { getBoundsOfRects, getNodeDimensions, isNumeric, nodeToRect } from './general';
@@ -24,46 +24,19 @@ import { ParentExpandChild } from './types';
export function updateAbsolutePositions<NodeType extends NodeBase>(
nodeLookup: Map<string, InternalNodeBase<NodeType>>,
parentLookup: Map<string, InternalNodeBase<NodeType>[]>,
options: UpdateNodesOptions<NodeType> = {
nodeOrigin: [0, 0] as NodeOrigin,
elevateNodesOnSelect: true,
defaults: {},
}
) {
const selectedNodeZ: number = options?.elevateNodesOnSelect ? 1000 : 0;
for (const [, node] of nodeLookup) {
const parentId = node.parentId;
if (!parentId) {
for (const node of nodeLookup.values()) {
if (!node.parentId) {
continue;
}
if (!nodeLookup.has(parentId)) {
throw new Error(`Parent node ${parentId} not found`);
}
const parentNode = nodeLookup.get(parentId);
const { x, y, z } = calculateXYZPosition(
node,
nodeLookup,
{
...node.position,
z: (isNumeric(node.zIndex) ? node.zIndex : 0) + (node.selected ? selectedNodeZ : 0),
},
parentNode?.origin ?? options.nodeOrigin
);
const currPosition = node.internals.positionAbsolute;
const positionChanged = x !== currPosition.x || y !== currPosition.y;
if (positionChanged || z !== node.internals.z) {
node.internals = {
...node.internals,
positionAbsolute: positionChanged ? { x, y } : currPosition,
z,
};
}
updateChildPosition(node, nodeLookup, parentLookup, options);
}
}
@@ -91,9 +64,8 @@ export function adoptUserNodes<NodeType extends NodeBase>(
const selectedNodeZ: number = options?.elevateNodesOnSelect ? 1000 : 0;
nodes.forEach((userNode) => {
for (const userNode of nodes) {
let internalNode = tmpLookup.get(userNode.id);
if (options.checkEquality && userNode === internalNode?.internals.userNode) {
nodeLookup.set(userNode.id, internalNode);
} else {
@@ -105,9 +77,9 @@ export function adoptUserNodes<NodeType extends NodeBase>(
height: userNode.measured?.height,
},
internals: {
positionAbsolute: userNode.position,
positionAbsolute: getNodePositionWithOrigin(userNode, options.nodeOrigin),
handleBounds: internalNode?.internals.handleBounds,
z: (isNumeric(userNode.zIndex) ? userNode.zIndex : 0) + (userNode.selected ? selectedNodeZ : 0),
z: calculateZ(userNode, selectedNodeZ),
userNode,
},
};
@@ -115,50 +87,76 @@ export function adoptUserNodes<NodeType extends NodeBase>(
}
if (userNode.parentId) {
const childNodes = parentLookup.get(userNode.parentId);
if (childNodes) {
childNodes.push(internalNode);
} else {
parentLookup.set(userNode.parentId, [internalNode]);
}
updateChildPosition(internalNode, nodeLookup, parentLookup, options);
}
});
if (parentLookup.size > 0) {
updateAbsolutePositions(nodeLookup, options);
}
}
function calculateXYZPosition<NodeType extends NodeBase>(
node: NodeType,
nodeLookup: Map<string, InternalNodeBase<NodeType>>,
result: XYZPosition,
nodeOrigin: NodeOrigin = [0, 0]
): XYZPosition {
if (!node.parentId) {
return result;
function updateChildPosition<NodeType extends NodeBase>(
node: InternalNodeBase<NodeType>,
nodeLookup: NodeLookup,
parentLookup: ParentLookup,
options: UpdateNodesOptions<NodeType> = {
nodeOrigin: [0, 0] as NodeOrigin,
elevateNodesOnSelect: true,
defaults: {},
}
) {
const parentId = node.parentId!;
const parentNode = nodeLookup.get(parentId);
if (!parentNode) {
throw new Error(`Parent node ${parentId} not found`);
}
const parent = nodeLookup.get(node.parentId)!;
const parentPosition = getNodePositionWithOrigin(parent, nodeOrigin).position;
// update the parentLookup
const childNodes = parentLookup.get(parentId);
if (childNodes) {
childNodes.push(node);
} else {
parentLookup.set(parentId, [node]);
}
return calculateXYZPosition(
parent,
nodeLookup,
{
x: (result.x ?? 0) + parentPosition.x,
y: (result.y ?? 0) + parentPosition.y,
z: (parent.internals.z ?? 0) > (result.z ?? 0) ? parent.internals.z ?? 0 : result.z ?? 0,
},
parent.origin || nodeOrigin
);
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;
if (positionChanged || z !== node.internals.z) {
node.internals = {
...node.internals,
positionAbsolute: positionChanged ? { x, y } : currPosition,
z,
};
}
}
function calculateZ(node: NodeBase, selectedNodeZ: number) {
return (isNumeric(node.zIndex) ? node.zIndex : 0) + (node.selected ? selectedNodeZ : 0);
}
function calculateChildXYZ<NodeType extends NodeBase>(
childNode: InternalNodeBase<NodeType>,
parentNode: InternalNodeBase<NodeType>,
nodeOrigin: NodeOrigin,
selectedNodeZ: number
) {
const position = getNodePositionWithOrigin(childNode, nodeOrigin);
const childZ = calculateZ(childNode, selectedNodeZ);
const parentZ = parentNode.internals.z ?? 0;
return {
x: parentNode.internals.positionAbsolute.x + position.x,
y: parentNode.internals.positionAbsolute.y + position.y,
z: parentZ > childZ ? parentZ : childZ,
};
}
export function handleExpandParent(
children: ParentExpandChild[],
nodeLookup: NodeLookup,
parentLookup: ParentLookup,
nodeOrigin?: NodeOrigin
nodeOrigin: NodeOrigin = [0, 0]
): (NodeDimensionChange | NodePositionChange)[] {
const changes: (NodeDimensionChange | NodePositionChange)[] = [];
const parentExpansions = new Map<string, { expandedRect: Rect; parent: InternalNodeBase }>();
@@ -172,6 +170,7 @@ export function handleExpandParent(
const parentRect =
parentExpansions.get(child.parentId)?.expandedRect ?? nodeToRect(parent, parent.origin ?? nodeOrigin);
const expandedRect = getBoundsOfRects(parentRect, child.rect);
parentExpansions.set(child.parentId, { expandedRect, parent });
}
@@ -179,20 +178,30 @@ export function handleExpandParent(
if (parentExpansions.size > 0) {
parentExpansions.forEach(({ expandedRect, parent }, parentId) => {
// determine the position & dimensions of the parent
const { position } = getNodePositionWithOrigin(parent, parent.origin);
const positionAbsolute = parent.internals.positionAbsolute;
const dimensions = getNodeDimensions(parent);
const origin = parent.origin ?? nodeOrigin;
// determine how much the parent expands by moving the position
const xChange = expandedRect.x < position.x ? Math.round(Math.abs(position.x - expandedRect.x)) : 0;
const yChange = expandedRect.y < position.y ? Math.round(Math.abs(position.y - expandedRect.y)) : 0;
// determine how much the parent expands in width and position
const xChange =
expandedRect.x < positionAbsolute.x ? Math.round(Math.abs(positionAbsolute.x - expandedRect.x)) : 0;
const yChange =
expandedRect.y < positionAbsolute.y ? Math.round(Math.abs(positionAbsolute.y - expandedRect.y)) : 0;
if (xChange > 0 || yChange > 0) {
const newWidth = Math.max(dimensions.width, Math.round(expandedRect.width));
const newHeight = Math.max(dimensions.height, Math.round(expandedRect.height));
const widthChange = (newWidth - dimensions.width) * origin[0];
const heightChange = (newHeight - dimensions.height) * origin[1];
// We need to correct the position of the parent node if the origin is not [0,0]
if (xChange > 0 || yChange > 0 || widthChange || heightChange) {
changes.push({
id: parentId,
type: 'position',
position: {
x: position.x - xChange,
y: position.y - yChange,
x: parent.position.x - xChange + widthChange,
y: parent.position.y - yChange + heightChange,
},
});
@@ -213,14 +222,15 @@ export function handleExpandParent(
});
}
if (dimensions.width < expandedRect.width || dimensions.height < expandedRect.height) {
// We need to correct the dimensions of the parent node if the origin is not [0,0]
if (dimensions.width < expandedRect.width || dimensions.height < expandedRect.height || xChange || yChange) {
changes.push({
id: parentId,
type: 'dimensions',
setAttributes: true,
dimensions: {
width: Math.max(dimensions.width, Math.round(expandedRect.width)),
height: Math.max(dimensions.height, Math.round(expandedRect.height)),
width: newWidth + (xChange ? origin[0] * xChange - widthChange : 0),
height: newHeight + (yChange ? origin[1] * yChange - heightChange : 0),
},
});
}
@@ -250,16 +260,19 @@ export function updateNodeInternals<NodeType extends InternalNodeBase>(
// in this array we collect nodes, that might trigger changes (like expanding parent)
const parentExpandChildren: ParentExpandChild[] = [];
updates.forEach((update) => {
for (const update of updates.values()) {
const node = nodeLookup.get(update.id);
if (!node) {
continue;
}
if (node?.hidden) {
if (node.hidden) {
node.internals = {
...node.internals,
handleBounds: undefined,
};
updatedInternals = true;
} else if (node) {
} else {
const dimensions = getDimensions(update.nodeElement);
const dimensionChanged = node.measured.width !== dimensions.width || node.measured.height !== dimensions.height;
const doUpdate = !!(
@@ -269,14 +282,19 @@ export function updateNodeInternals<NodeType extends InternalNodeBase>(
);
if (doUpdate) {
const positionAbsolute = getNodePositionWithOrigin(node, nodeOrigin);
node.measured = dimensions;
node.internals = {
...node.internals,
positionAbsolute: getNodePositionWithOrigin(node, nodeOrigin),
handleBounds: {
source: getHandleBounds('.source', update.nodeElement, zoom, node.origin || nodeOrigin),
target: getHandleBounds('.target', update.nodeElement, zoom, node.origin || nodeOrigin),
source: getHandleBounds('.source', node, update.nodeElement, zoom),
target: getHandleBounds('.target', node, update.nodeElement, zoom),
},
};
if (node.parentId) {
updateChildPosition(node, nodeLookup, parentLookup, { nodeOrigin });
}
updatedInternals = true;
@@ -297,7 +315,7 @@ export function updateNodeInternals<NodeType extends InternalNodeBase>(
}
}
}
});
}
if (parentExpandChildren.length > 0) {
const parentExpandChanges = handleExpandParent(parentExpandChildren, nodeLookup, parentLookup, nodeOrigin);