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

refactor(nodes): rename parentNode to parentId

Browse Source
This commit is contained in:
moklick
2024-04-09 13:26:54 +02:00
parent 4570b2494b
commit 3e59ab94f0
10 changed files with 41 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files
examples/react/src/examples/NodeResizer/index.tsx
+3 -3
View File
@@ -137,7 +137,7 @@ const initialNodes: Node[] = [
label: 'Child with extent: parent',
},
position: { x: 50, y: 50 },
parentNode: '5',
parentId: '5',
extent: 'parent',
width: 50,
height: 100,
@@ -148,7 +148,7 @@ const initialNodes: Node[] = [
type: 'defaultResizer',
data: { label: 'Child with expandParent' },
position: { x: 150, y: 100 },
parentNode: '5',
parentId: '5',
expandParent: true,
style: { ...nodeStyle },
},
@@ -157,7 +157,7 @@ const initialNodes: Node[] = [
type: 'defaultResizer',
data: { label: 'Child with expandParent & keepAspectRatio', keepAspectRatio: true },
position: { x: 25, y: 200 },
parentNode: '5',
parentId: '5',
expandParent: true,
style: { ...nodeStyle },
},
examples/react/src/examples/Subflow/index.tsx
+8 -8
View File
@@ -50,7 +50,7 @@ const initialNodes: Node[] = [
data: { label: 'Node 4a' },
position: { x: 15, y: 15 },
className: 'light',
parentNode: '4',
parentId: '4',
origin: [0.5, 0.5],
extent: [
@@ -68,21 +68,21 @@ const initialNodes: Node[] = [
height: 200,
width: 300,
},
parentNode: '4',
parentId: '4',
},
{
id: '4b1',
data: { label: 'Node 4b1' },
position: { x: 40, y: 20 },
className: 'light',
parentNode: '4b',
parentId: '4b',
},
{
id: '4b2',
data: { label: 'Node 4b2' },
position: { x: 20, y: 100 },
className: 'light',
parentNode: '4b',
parentId: '4b',
},
{
id: '5',
@@ -98,7 +98,7 @@ const initialNodes: Node[] = [
data: { label: 'Node 5a' },
position: { x: 0, y: 0 },
className: 'light',
parentNode: '5',
parentId: '5',
extent: 'parent',
},
{
@@ -106,7 +106,7 @@ const initialNodes: Node[] = [
data: { label: 'Node 5b' },
position: { x: 225, y: 50 },
className: 'light',
parentNode: '5',
parentId: '5',
expandParent: true,
},
{
@@ -160,7 +160,7 @@ const Subflow = () => {
const updatePos = () => {
setNodes((nds) => {
return nds.map((n) => {
if (!n.parentNode) {
if (!n.parentId) {
return {
...n,
position: {
@@ -194,7 +194,7 @@ const Subflow = () => {
return nds.map((n) => {
return {
...n,
hidden: !!n.parentNode && !n.hidden,
hidden: !!n.parentId && !n.hidden,
};
});
});
examples/svelte/src/routes/examples/node-resizer/+page.svelte
+2 -2
View File
@@ -113,7 +113,7 @@
type: 'defaultResizer',
data: { label: 'Child with extent parent' },
position: { x: 50, y: 50 },
parentNode: '5',
parentId: '5',
extent: 'parent',
style: nodeStyle
},
@@ -122,7 +122,7 @@
type: 'defaultResizer',
data: { label: 'Child' },
position: { x: 100, y: 100 },
parentNode: '5',
parentId: '5',
style: nodeStyle
}
]);
examples/svelte/src/routes/examples/subflows/+page.svelte
+6 -6
View File
@@ -36,7 +36,7 @@
id: '4a',
data: { label: 'Node 4a' },
position: { x: 15, y: 15 },
parentNode: '4',
parentId: '4',
extent: [
[0, 0],
[100, 100]
@@ -47,19 +47,19 @@
data: { label: 'Node 4b' },
position: { x: 100, y: 60 },
style: 'width: 300px; height: 200px;',
parentNode: '4'
parentId: '4'
},
{
id: '4b1',
data: { label: 'Node 4b1' },
position: { x: 40, y: 20 },
parentNode: '4b'
parentId: '4b'
},
{
id: '4b2',
data: { label: 'Node 4b2' },
position: { x: 20, y: 100 },
parentNode: '4b'
parentId: '4b'
},
{
id: '5',
@@ -73,14 +73,14 @@
id: '5a',
data: { label: 'Node 5a' },
position: { x: 0, y: 0 },
parentNode: '5',
parentId: '5',
extent: 'parent'
},
{
id: '5b',
data: { label: 'Node 5b' },
position: { x: 225, y: 50 },
parentNode: '5',
parentId: '5',
expandParent: true
},
{
packages/react/src/store/index.ts
+1
View File
@@ -120,6 +120,7 @@ const createRFStore = ({
const triggerChangeNodes: InternalNode[] = [];
const changes: NodeChange[] = nodeDragItems.map((node) => {
// @todo add expandParent to drag item so that we can get rid of the look up here
const internalNode = nodeLookup.get(node.id);
const change: NodeChange = {
id: node.id,
packages/system/src/types/nodes.ts
+2 -2
View File
@@ -43,7 +43,7 @@ export type NodeBase<
initialWidth?: number;
initialHeight?: number;
/** Parent node id, used for creating sub-flows */
parentNode?: string;
parentId?: string;
zIndex?: number;
/** Boundary a node can be moved in
* @example 'parent' or [[0, 0], [100, 100]]
@@ -129,7 +129,7 @@ export type NodeDragItem = {
positionAbsolute: XYPosition;
};
extent?: 'parent' | CoordinateExtent;
parentNode?: string;
parentId?: string;
dragging?: boolean;
origin?: NodeOrigin;
expandParent?: boolean;
packages/system/src/utils/graph.ts
+2 -2
View File
@@ -358,7 +358,7 @@ export function calculateNodePosition<NodeType extends NodeBase>({
onError?: OnError;
}): { position: XYPosition; positionAbsolute: XYPosition } {
const node = nodeLookup.get(nodeId)!;
const parentNode = node.parentNode ? nodeLookup.get(node.parentNode) : undefined;
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 };
@@ -440,7 +440,7 @@ export async function getElementsToRemove<NodeType extends NodeBase = NodeBase,
}
const isIncluded = nodeIds.includes(node.id);
const parentHit = !isIncluded && node.parentNode && matchingNodes.find((n) => n.id === node.parentNode);
const parentHit = !isIncluded && node.parentId && matchingNodes.find((n) => n.id === node.parentId);
if (isIncluded || parentHit) {
matchingNodes.push(node);
packages/system/src/utils/store.ts
+11 -10
View File
@@ -31,13 +31,13 @@ export function updateAbsolutePositions<NodeType extends NodeBase>(
const selectedNodeZ: number = options?.elevateNodesOnSelect ? 1000 : 0;
for (const [id, node] of nodeLookup) {
const parentId = node.parentNode;
const parentId = node.parentId;
if (parentId && !nodeLookup.has(parentId)) {
throw new Error(`Parent node ${parentId} not found`);
}
if (node.parentNode || node.internals.isParent || parentNodeIds?.has(id)) {
if (parentId || node.internals.isParent || parentNodeIds?.has(id)) {
const parentNode = parentId ? nodeLookup.get(parentId) : null;
const { x, y, z } = calculateXYZPosition(
node,
@@ -87,8 +87,8 @@ export function adoptUserNodes<NodeType extends NodeBase>(
nodes.forEach((userNode) => {
const currentStoreNode = tmpLookup.get(userNode.id);
if (userNode.parentNode) {
parentNodeIds.add(userNode.parentNode);
if (userNode.parentId) {
parentNodeIds.add(userNode.parentId);
}
if (userNode === currentStoreNode?.internals.userNode) {
@@ -123,11 +123,11 @@ function calculateXYZPosition<NodeType extends NodeBase>(
result: XYZPosition,
nodeOrigin: NodeOrigin = [0, 0]
): XYZPosition {
if (!node.parentNode) {
if (!node.parentId) {
return result;
}
const parentNode = nodeLookup.get(node.parentNode)!;
const parentNode = nodeLookup.get(node.parentId)!;
const { position: parentNodePosition } = getNodePositionWithOrigin(parentNode, parentNode?.origin || nodeOrigin);
return calculateXYZPosition(
@@ -147,13 +147,14 @@ export function handleParentExpand(nodes: InternalNodeBase[], nodeLookup: NodeLo
const chilNodeRects = new Map<string, Rect>();
nodes.forEach((node) => {
if (node.expandParent && node.parentNode) {
const parentNode = nodeLookup.get(node.parentNode);
const parentId = node.parentId;
if (node.expandParent && parentId) {
const parentNode = nodeLookup.get(parentId);
if (parentNode) {
const parentRect = chilNodeRects.get(node.parentNode) || nodeToRect(parentNode, node.origin);
const parentRect = chilNodeRects.get(parentId) || nodeToRect(parentNode, node.origin);
const expandedRect = getBoundsOfRects(parentRect, nodeToRect(node, node.origin));
chilNodeRects.set(node.parentNode, expandedRect);
chilNodeRects.set(parentId, expandedRect);
}
}
});
packages/system/src/xydrag/utils.ts
+4 -4
View File
@@ -5,11 +5,11 @@ export function wrapSelectionDragFunc(selectionFunc?: (event: MouseEvent, nodes:
}
export function isParentSelected<NodeType extends NodeBase>(node: NodeType, nodeLookup: NodeLookup): boolean {
if (!node.parentNode) {
if (!node.parentId) {
return false;
}
const parentNode = nodeLookup.get(node.parentNode);
const parentNode = nodeLookup.get(node.parentId);
if (!parentNode) {
return false;
@@ -46,7 +46,7 @@ export function getDragItems<NodeType extends NodeBase>(
for (const [id, node] of nodeLookup) {
if (
(node.selected || node.id === nodeId) &&
(!node.parentNode || !isParentSelected(node, nodeLookup)) &&
(!node.parentId || !isParentSelected(node, nodeLookup)) &&
(node.draggable || (nodesDraggable && typeof node.draggable === 'undefined'))
) {
const internalNode = nodeLookup.get(id)!;
@@ -59,7 +59,7 @@ export function getDragItems<NodeType extends NodeBase>(
y: mousePos.y - (internalNode.internals.positionAbsolute?.y ?? 0),
},
extent: internalNode.extent,
parentNode: internalNode.parentNode,
parentId: internalNode.parentId,
origin: internalNode.origin,
expandParent: internalNode.expandParent,
internals: {
packages/system/src/xyresizer/XYResizer.ts
+2 -2
View File
@@ -136,7 +136,7 @@ export function XYResizer({ domNode, nodeId, getStoreItems, onChange }: XYResize
parentNode = undefined;
if (node.extent === 'parent' || node.expandParent) {
parentNode = nodeLookup.get(node.parentNode!);
parentNode = nodeLookup.get(node.parentId!);
if (parentNode && node.extent === 'parent') {
parentExtent = nodeToParentExtent(parentNode);
}
@@ -148,7 +148,7 @@ export function XYResizer({ domNode, nodeId, getStoreItems, onChange }: XYResize
childExtent = undefined;
for (const [childId, child] of nodeLookup) {
if (child.parentNode === nodeId) {
if (child.parentId === nodeId) {
childNodes.push({
id: childId,
position: { ...child.position },