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

refactor(nodes): rename computed to measured, add helpers

Browse Source
This commit is contained in:
moklick
2024-04-03 14:54:24 +02:00
parent f45f50671d
commit ea18e46a1a
32 changed files with 159 additions and 226 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/system/src/utils/edges/positions.ts
+1 -1
View File
@@ -20,7 +20,7 @@ function isNodeInitialized(node: InternalNodeBase): boolean {
return (
node &&
!!(node.internals.handleBounds || node.handles?.length) &&
!!(node.computed.width || node.width || node.initialWidth)
!!(node.measured.width || node.width || node.initialWidth)
);
}
packages/system/src/utils/general.ts
+10 -10
View File
@@ -66,23 +66,23 @@ export const boxToRect = ({ x, y, x2, y2 }: Box): Rect => ({
height: y2 - y,
});
export const nodeToRect = (node: InternalNodeBase, nodeOrigin: NodeOrigin = [0, 0]): Rect => {
export const nodeToRect = (node: InternalNodeBase | NodeBase, nodeOrigin: NodeOrigin = [0, 0]): Rect => {
const { positionAbsolute } = getNodePositionWithOrigin(node, node.origin || nodeOrigin);
return {
...positionAbsolute,
width: node.computed?.width ?? node.width ?? 0,
height: node.computed?.height ?? node.height ?? 0,
width: node.measured?.width ?? node.width ?? 0,
height: node.measured?.height ?? node.height ?? 0,
};
};
export const nodeToBox = (node: InternalNodeBase, nodeOrigin: NodeOrigin = [0, 0]): Box => {
export const nodeToBox = (node: InternalNodeBase | NodeBase, nodeOrigin: NodeOrigin = [0, 0]): Box => {
const { positionAbsolute } = getNodePositionWithOrigin(node, node.origin || nodeOrigin);
return {
...positionAbsolute,
x2: positionAbsolute.x + (node.computed?.width ?? node.width ?? 0),
y2: positionAbsolute.y + (node.computed?.height ?? node.height ?? 0),
x2: positionAbsolute.x + (node.measured?.width ?? node.width ?? 0),
y2: positionAbsolute.y + (node.measured?.height ?? node.height ?? 0),
};
};
@@ -208,14 +208,14 @@ export function getNodeDimensions<NodeType extends NodeBase = NodeBase>(
node: NodeType
): { width: number; height: number } {
return {
width: node.computed?.width ?? node.width ?? node.initialWidth ?? 0,
height: node.computed?.height ?? node.height ?? node.initialHeight ?? 0,
width: node.measured?.width ?? node.width ?? node.initialWidth ?? 0,
height: node.measured?.height ?? node.height ?? node.initialHeight ?? 0,
};
}
export function nodeHasDimensions<NodeType extends NodeBase = NodeBase>(node: NodeType): boolean {
return (
(node.computed?.width ?? node.width ?? node.initialWidth) !== undefined &&
(node.computed?.height ?? node.height ?? node.initialHeight) !== undefined
(node.measured?.width ?? node.width ?? node.initialWidth) !== undefined &&
(node.measured?.height ?? node.height ?? node.initialHeight) !== undefined
);
}
packages/system/src/utils/graph.ts
+18 -16
View File
@@ -50,7 +50,7 @@ export const isNodeBase = <NodeType extends NodeBase = NodeBase>(element: any):
export const isInternalNodeBase = <NodeType extends InternalNodeBase = InternalNodeBase>(
element: any
): element is NodeType => 'id' in element && 'computed' in element && !('source' in element) && !('target' in element);
): element is NodeType => 'id' in element && 'internals' in element && !('source' in element) && !('target' in element);
/**
* Pass in a node, and get connected nodes where edge.source === node.id
@@ -106,7 +106,7 @@ export const getIncomers = <NodeType extends NodeBase = NodeBase, EdgeType exten
};
export const getNodePositionWithOrigin = (
node: InternalNodeBase | undefined,
node: InternalNodeBase | NodeBase | undefined,
nodeOrigin: NodeOrigin = [0, 0]
): { position: XYPosition; positionAbsolute: XYPosition } => {
if (!node) {
@@ -133,10 +133,13 @@ export const getNodePositionWithOrigin = (
return {
position,
positionAbsolute: {
x: node.internals.positionAbsolute.x - offsetX,
y: node.internals.positionAbsolute.y - offsetY,
},
positionAbsolute:
'internals' in node
? {
x: node.internals.positionAbsolute.x - offsetX,
y: node.internals.positionAbsolute.y - offsetY,
}
: position,
};
};
@@ -165,7 +168,6 @@ export const getNodesBounds = (
const box = nodes.reduce(
(currBox, node) => {
// @ts-expect-error
const nodePos = getNodePositionWithOrigin(node, node.origin || params.nodeOrigin);
return getBoundsOfBoxes(
currBox,
@@ -238,9 +240,9 @@ export const getNodesInside = <NodeType extends NodeBase = NodeBase>(
const visibleNodes: NodeType[] = [];
for (const [, node] of nodeLookup) {
const { computed, selectable = true, hidden = false } = node;
const width = computed?.width ?? node.width ?? node.initialWidth ?? null;
const height = computed?.height ?? node.height ?? node.initialHeight ?? null;
const { measured, selectable = true, hidden = false } = node;
const width = measured.width ?? node.width ?? node.initialWidth ?? null;
const height = measured.height ?? node.height ?? node.initialHeight ?? null;
if ((excludeNonSelectableNodes && !selectable) || hidden) {
continue;
@@ -286,7 +288,7 @@ export function fitView<Params extends FitViewParamsBase<NodeBase>, Options exte
const filteredNodes: InternalNodeBase[] = [];
nodeLookup.forEach((n) => {
const isVisible = n.computed?.width && n.computed?.height && (options?.includeHiddenNodes || !n.hidden);
const isVisible = n.measured.width && n.measured.height && (options?.includeHiddenNodes || !n.hidden);
if (
isVisible &&
@@ -331,7 +333,7 @@ function clampNodeExtent<NodeType extends NodeBase>(
if (!extent || extent === 'parent') {
return extent;
}
return [extent[0], [extent[1][0] - (node.computed?.width ?? 0), extent[1][1] - (node.computed?.height ?? 0)]];
return [extent[0], [extent[1][0] - (node.measured?.width ?? 0), extent[1][1] - (node.measured?.height ?? 0)]];
}
/**
@@ -367,10 +369,10 @@ export function calculateNodePosition<NodeType extends NodeBase>({
if (!parentNode) {
onError?.('005', errorMessages['error005']());
} else {
const nodeWidth = node.computed.width;
const nodeHeight = node.computed.height;
const parentWidth = parentNode.computed.width;
const parentHeight = parentNode.computed.height;
const nodeWidth = node.measured.width;
const nodeHeight = node.measured.height;
const parentWidth = parentNode.measured.width;
const parentHeight = parentNode.measured.height;
if (nodeWidth && nodeHeight && parentWidth && parentHeight) {
const currNodeOrigin = node.origin || nodeOrigin;
packages/system/src/utils/store.ts
+19 -21
View File
@@ -70,7 +70,7 @@ type UpdateNodesOptions<NodeType extends NodeBase> = {
defaults?: Partial<NodeType>;
};
export function adoptUserProvidedNodes<NodeType extends NodeBase>(
export function adoptUserNodes<NodeType extends NodeBase>(
nodes: NodeType[],
nodeLookup: Map<string, InternalNodeBase<NodeType>>,
options: UpdateNodesOptions<NodeType> = {
@@ -84,33 +84,31 @@ export function adoptUserProvidedNodes<NodeType extends NodeBase>(
const selectedNodeZ: number = options?.elevateNodesOnSelect ? 1000 : 0;
const parentNodeIds = new Set<string>();
nodes.forEach((n) => {
const currentStoreNode = tmpLookup.get(n.id);
nodes.forEach((userNode) => {
const currentStoreNode = tmpLookup.get(userNode.id);
if (n.parentNode) {
parentNodeIds.add(n.parentNode);
if (userNode.parentNode) {
parentNodeIds.add(userNode.parentNode);
}
if (n === currentStoreNode?.internals.userProvidedNode) {
nodeLookup.set(n.id, currentStoreNode);
if (userNode === currentStoreNode?.internals.userNode) {
nodeLookup.set(userNode.id, currentStoreNode);
} else {
const node: InternalNodeBase<NodeType> = {
nodeLookup.set(userNode.id, {
...options.defaults,
...n,
computed: {
width: n.computed?.width,
height: n.computed?.height,
...userNode,
measured: {
width: userNode.measured?.width,
height: userNode.measured?.height,
},
internals: {
positionAbsolute: n.position,
positionAbsolute: userNode.position,
handleBounds: currentStoreNode?.internals?.handleBounds,
z: (isNumeric(n.zIndex) ? n.zIndex : 0) + (n.selected ? selectedNodeZ : 0),
userProvidedNode: n,
z: (isNumeric(userNode.zIndex) ? userNode.zIndex : 0) + (userNode.selected ? selectedNodeZ : 0),
userNode,
isParent: false,
},
};
nodeLookup.set(node.id, node);
});
}
});
@@ -241,14 +239,14 @@ export function updateNodeDimensions<NodeType extends InternalNodeBase>(
const doUpdate = !!(
dimensions.width &&
dimensions.height &&
(node.computed?.width !== dimensions.width || node.computed?.height !== dimensions.height || update.force)
(node.measured?.width !== dimensions.width || node.measured?.height !== dimensions.height || update.force)
);
if (doUpdate) {
const newNode = {
...node,
computed: {
...node.computed,
measured: {
...node.measured,
...dimensions,
},
internals: {