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/types/nodes.ts
+7 -5
View File
@@ -25,14 +25,14 @@ export type NodeBase<T = any, U extends string | undefined = string | undefined>
zIndex?: number;
extent?: 'parent' | CoordinateExtent;
expandParent?: boolean;
positionAbsolute?: XYPosition;
ariaLabel?: string;
focusable?: boolean;
origin?: NodeOrigin;
handles?: NodeHandle[];
size?: {
computed?: {
width?: number;
height?: number;
positionAbsolute?: XYPosition;
};
// only used internally
@@ -78,11 +78,13 @@ export type NodeBounds = XYPosition & {
export type NodeDragItem = {
id: string;
position: XYPosition;
positionAbsolute: XYPosition;
// distance from the mouse cursor to the node when start dragging
distance: XYPosition;
width?: number | null;
height?: number | null;
computed: {
width: number | null;
height: number | null;
positionAbsolute: XYPosition;
};
extent?: 'parent' | CoordinateExtent;
parentNode?: string;
dragging?: boolean;
packages/system/src/utils/dom.ts
+2
View File
@@ -73,6 +73,8 @@ 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],
packages/system/src/utils/edges/positions.ts
+6 -6
View File
@@ -88,20 +88,20 @@ function toHandleBounds(handles?: NodeHandle[]) {
function getHandleDataByNode(node?: NodeBase): [Rect, NodeHandleBounds | null, boolean] {
const handleBounds = node?.[internalsSymbol]?.handleBounds || toHandleBounds(node?.handles) || null;
const nodeWidth = node?.width || node?.size?.width;
const nodeHeight = node?.height || node?.size?.height;
const nodeWidth = node?.computed?.width || node?.width;
const nodeHeight = node?.computed?.height || node?.height;
const isValid =
handleBounds &&
nodeWidth &&
nodeHeight &&
typeof node?.positionAbsolute?.x !== 'undefined' &&
typeof node?.positionAbsolute?.y !== 'undefined';
typeof node?.computed?.positionAbsolute?.x !== 'undefined' &&
typeof node?.computed?.positionAbsolute?.y !== 'undefined';
return [
{
x: node?.positionAbsolute?.x || 0,
y: node?.positionAbsolute?.y || 0,
x: node?.computed?.positionAbsolute?.x || 0,
y: node?.computed?.positionAbsolute?.y || 0,
width: nodeWidth || 0,
height: nodeHeight || 0,
},
packages/system/src/utils/general.ts
+4 -4
View File
@@ -64,8 +64,8 @@ export const nodeToRect = (node: NodeBase, nodeOrigin: NodeOrigin = [0, 0]): Rec
return {
...positionAbsolute,
width: node.width || 0,
height: node.height || 0,
width: node.computed?.width ?? node.width ?? 0,
height: node.computed?.height ?? node.height ?? 0,
};
};
@@ -74,8 +74,8 @@ export const nodeToBox = (node: NodeBase, nodeOrigin: NodeOrigin = [0, 0]): Box
return {
...positionAbsolute,
x2: positionAbsolute.x + (node.width || 0),
y2: positionAbsolute.y + (node.height || 0),
x2: positionAbsolute.x + (node.computed?.width ?? node.width ?? 0),
y2: positionAbsolute.y + (node.computed?.height ?? node.height ?? 0),
};
};
packages/system/src/utils/graph.ts
+21 -17
View File
@@ -86,8 +86,8 @@ export const getNodePositionWithOrigin = (
};
}
const offsetX = (node.width ?? 0) * nodeOrigin[0];
const offsetY = (node.height ?? 0) * nodeOrigin[1];
const offsetX = (node.computed?.width ?? node.width ?? 0) * nodeOrigin[0];
const offsetY = (node.computed?.height ?? node.height ?? 0) * nodeOrigin[1];
const position: XYPosition = {
x: node.position.x - offsetX,
@@ -96,10 +96,10 @@ export const getNodePositionWithOrigin = (
return {
...position,
positionAbsolute: node.positionAbsolute
positionAbsolute: node.computed?.positionAbsolute
? {
x: node.positionAbsolute.x - offsetX,
y: node.positionAbsolute.y - offsetY,
x: node.computed.positionAbsolute.x - offsetX,
y: node.computed.positionAbsolute.y - offsetY,
}
: position,
};
@@ -118,8 +118,8 @@ export const getNodesBounds = (nodes: NodeBase[], nodeOrigin: NodeOrigin = [0, 0
rectToBox({
x,
y,
width: node.width || 0,
height: node.height || 0,
width: node.computed?.width ?? node.width ?? 0,
height: node.computed?.height ?? node.height ?? 0,
})
);
},
@@ -145,17 +145,19 @@ export const getNodesInside = <NodeType extends NodeBase>(
};
const visibleNodes = nodes.reduce<NodeType[]>((res, node) => {
const { width, height, selectable = true, hidden = false } = node;
const { computed, selectable = true, hidden = false } = node;
const width = computed?.width ?? node.width ?? null;
const height = computed?.height ?? node.height ?? null;
if ((excludeNonSelectableNodes && !selectable) || hidden) {
return res;
}
const overlappingArea = getOverlappingArea(paneRect, nodeToRect(node, nodeOrigin));
const notInitialized = width === undefined || height === undefined || width === null || height === null;
const notInitialized = width === null || height === null;
const partiallyVisible = partially && overlappingArea > 0;
const area = (width || 0) * (height || 0);
const area = (width ?? 0) * (height ?? 0);
const isVisible = notInitialized || partiallyVisible || overlappingArea >= area;
if (isVisible || node.dragging) {
@@ -185,7 +187,7 @@ export function fitView<Params extends FitViewParamsBase<NodeBase>, Options exte
options?: Options
) {
const filteredNodes = nodes.filter((n) => {
const isVisible = n.width && n.height && (options?.includeHiddenNodes || !n.hidden);
const isVisible = n.computed?.width && n.computed?.height && (options?.includeHiddenNodes || !n.hidden);
if (options?.nodes?.length) {
return isVisible && options?.nodes.some((optionNode) => optionNode.id === n.id);
@@ -218,7 +220,7 @@ function clampNodeExtent(node: NodeDragItem | NodeBase, extent?: CoordinateExten
if (!extent || extent === 'parent') {
return extent;
}
return [extent[0], [extent[1][0] - (node.width || 0), extent[1][1] - (node.height || 0)]];
return [extent[0], [extent[1][0] - (node.computed?.width ?? 0), extent[1][1] - (node.computed?.height ?? 0)]];
}
export function calcNextPosition<NodeType extends NodeBase>(
@@ -242,16 +244,18 @@ export function calcNextPosition<NodeType extends NodeBase>(
}
if (node.extent === 'parent' && !node.expandParent) {
if (node.parentNode && node.width && node.height) {
const nodeWidth = node.computed?.width;
const nodeHeight = node.computed?.height;
if (node.parentNode && nodeWidth && nodeHeight) {
const currNodeOrigin = node.origin || nodeOrigin;
currentExtent =
parentNode && isNumeric(parentNode.width) && isNumeric(parentNode.height)
parentNode && isNumeric(parentNode.computed?.width) && isNumeric(parentNode.computed?.height)
? [
[parentPos.x + node.width * currNodeOrigin[0], parentPos.y + node.height * currNodeOrigin[1]],
[parentPos.x + nodeWidth * currNodeOrigin[0], parentPos.y + nodeHeight * currNodeOrigin[1]],
[
parentPos.x + parentNode.width - node.width + node.width * currNodeOrigin[0],
parentPos.y + parentNode.height - node.height + node.height * currNodeOrigin[1],
parentPos.x + parentNode.computed?.width - nodeWidth + nodeWidth * currNodeOrigin[0],
parentPos.y + parentNode.computed?.height - nodeHeight + nodeHeight * currNodeOrigin[1],
],
]
: currentExtent;
packages/system/src/utils/store.ts
+11 -6
View File
@@ -40,7 +40,7 @@ export function updateAbsolutePositions<NodeType extends NodeBase>(
parentNode?.origin || nodeOrigin
);
node.positionAbsolute = {
node.computed!.positionAbsolute = {
x,
y,
};
@@ -79,9 +79,11 @@ export function updateNodes<NodeType extends NodeBase>(
const node: NodeType = {
...options.defaults,
...n,
positionAbsolute: n.position,
width: n.width || currentStoreNode?.width,
height: n.height || currentStoreNode?.height,
computed: {
positionAbsolute: n.position,
width: n.computed?.width || currentStoreNode?.computed?.width,
height: n.computed?.height || currentStoreNode?.computed?.height,
},
};
const z = (isNumeric(n.zIndex) ? n.zIndex : 0) + (n.selected ? selectedNodeZ : 0);
const currInternals = n?.[internalsSymbol] || currentStoreNode?.[internalsSymbol];
@@ -160,7 +162,7 @@ export function updateNodeDimensions(
const doUpdate = !!(
dimensions.width &&
dimensions.height &&
(node.width !== dimensions.width || node.height !== dimensions.height || update.forceUpdate)
(node.computed?.width !== dimensions.width || node.computed?.height !== dimensions.height || update.forceUpdate)
);
if (doUpdate) {
@@ -168,7 +170,10 @@ export function updateNodeDimensions(
const newNode = {
...node,
...dimensions,
computed: {
...node.computed,
...dimensions,
},
[internalsSymbol]: {
...node[internalsSymbol],
handleBounds: {
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];
}
packages/system/src/xyhandle/utils.ts
+2 -2
View File
@@ -22,8 +22,8 @@ export function getHandles(
id: h.id || null,
type,
nodeId: node.id,
x: (node.positionAbsolute?.x ?? 0) + h.x + h.width / 2,
y: (node.positionAbsolute?.y ?? 0) + h.y + h.height / 2,
x: (node.computed?.positionAbsolute?.x ?? 0) + h.x + h.width / 2,
y: (node.computed?.positionAbsolute?.y ?? 0) + h.y + h.height / 2,
});
}
return res;