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/types/general.ts
+1 -1
View File
@@ -127,7 +127,7 @@ export type SelectionRect = Rect & {
export type OnError = (id: string, message: string) => void;
export type UpdateNodePositions = (dragItems: NodeDragItem[] | NodeBase[], dragging?: boolean) => void;
export type UpdateNodePositions = (dragItems: NodeDragItem[] | InternalNodeBase[], dragging?: boolean) => void;
export type PanBy = (delta: XYPosition) => boolean;
export type UpdateConnection = (params: {
packages/system/src/types/nodes.ts
+6 -8
View File
@@ -59,27 +59,25 @@ export type NodeBase<
*/
origin?: NodeOrigin;
handles?: NodeHandle[];
computed?: {
measured?: {
width?: number;
height?: number;
};
};
export type InternalNodeBase<NodeType extends NodeBase = NodeBase> = NodeType & {
computed: {
measured: {
width?: number;
height?: number;
};
// Only used internally
internals: {
positionAbsolute: XYPosition;
z: number;
// @todo should we rename this to "handles" and use same type as node.handles?
isParent: boolean;
/** Holds a reference to the original node object provided by the user
* (which may lack some fields, like `computed` or `[internalSymbol]`. Used
* as an optimization to avoid certain operations. */
userProvidedNode: NodeType;
/** Holds a reference to the original node object provided by the user.
* Used as an optimization to avoid certain operations. */
userNode: NodeType;
handleBounds?: NodeHandleBounds;
};
};
@@ -123,7 +121,7 @@ export type NodeDragItem = {
position: XYPosition;
// distance from the mouse cursor to the node when start dragging
distance: XYPosition;
computed: {
measured: {
width: number | null;
height: number | null;
};
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: {
packages/system/src/xydrag/XYDrag.ts
+2 -2
View File
@@ -139,10 +139,10 @@ export function XYDrag<OnNodeDrag extends (e: any, nodes: any, node: any) => voi
if (dragItems.length > 1 && nodeExtent && !n.extent) {
const { positionAbsolute } = n.internals;
const x1 = positionAbsolute.x - nodesBox.x + nodeExtent[0][0];
const x2 = positionAbsolute.x + (n.computed?.width ?? 0) - nodesBox.x2 + nodeExtent[1][0];
const x2 = positionAbsolute.x + (n.measured?.width ?? 0) - nodesBox.x2 + nodeExtent[1][0];
const y1 = positionAbsolute.y - nodesBox.y + nodeExtent[0][1];
const y2 = positionAbsolute.y + (n.computed?.height ?? 0) - nodesBox.y2 + nodeExtent[1][1];
const y2 = positionAbsolute.y + (n.measured?.height ?? 0) - nodesBox.y2 + nodeExtent[1][1];
adjustedNodeExtent = [
[x1, y1],
packages/system/src/xydrag/utils.ts
+5 -5
View File
@@ -65,9 +65,9 @@ export function getDragItems<NodeType extends NodeBase>(
internals: {
positionAbsolute: internalNode.internals.positionAbsolute || { x: 0, y: 0 },
},
computed: {
width: internalNode.computed.width || 0,
height: internalNode.computed.height || 0,
measured: {
width: internalNode.measured.width || 0,
height: internalNode.measured.height || 0,
},
});
}
@@ -93,8 +93,8 @@ export function getEventHandlerParams<NodeType extends NodeBase>({
return {
...node,
position: n.position,
computed: {
...n.computed,
measured: {
...n.measured,
},
};
});
packages/system/src/xyresizer/XYResizer.ts
+5 -5
View File
@@ -71,15 +71,15 @@ export type XYResizerInstance = {
function nodeToParentExtent(node: NodeBase): CoordinateExtent {
return [
[0, 0],
[node.computed!.width!, node.computed!.height!],
[node.measured!.width!, node.measured!.height!],
];
}
function nodeToChildExtent(child: NodeBase, parent: NodeBase, nodeOrigin: NodeOrigin): CoordinateExtent {
const x = parent.position.x + child.position.x;
const y = parent.position.y + child.position.y;
const width = child.computed!.width! ?? 0;
const height = child.computed!.height! ?? 0;
const width = child.measured!.width! ?? 0;
const height = child.measured!.height! ?? 0;
const originOffsetX = nodeOrigin[0] * width;
const originOffsetY = nodeOrigin[1] * height;
@@ -121,8 +121,8 @@ export function XYResizer({ domNode, nodeId, getStoreItems, onChange }: XYResize
const { xSnapped, ySnapped } = getPointerPosition(event.sourceEvent, { transform, snapGrid, snapToGrid });
prevValues = {
width: node.computed?.width ?? 0,
height: node.computed?.height ?? 0,
width: node.measured?.width ?? 0,
height: node.measured?.height ?? 0,
x: node.position.x ?? 0,
y: node.position.y ?? 0,
};