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/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: {