From 1dfff1bf5bec36adce648219cec20f8b9c7b37a7 Mon Sep 17 00:00:00 2001 From: moklick Date: Thu, 23 Nov 2023 13:50:28 +0100 Subject: [PATCH] refactor(libs) add width, height and positionAbsolute props to NodeProps --- .../src/components/ReactFlowExample/CustomNode.tsx | 4 ++-- examples/react/src/examples/Subflow/DebugNode.tsx | 4 ++-- .../src/routes/examples/overview/CustomNode.svelte | 7 +++---- .../src/routes/examples/subflows/DebugNode.svelte | 14 +++----------- packages/react/src/components/Nodes/wrapNode.tsx | 6 ++++-- .../react/src/container/NodeRenderer/index.tsx | 1 + packages/react/src/types/nodes.ts | 3 ++- .../lib/components/NodeWrapper/NodeWrapper.svelte | 5 +++-- .../svelte/src/lib/components/NodeWrapper/types.ts | 4 ++-- .../src/lib/components/nodes/DefaultNode.svelte | 13 +++++++++---- .../src/lib/components/nodes/GroupNode.svelte | 13 +++++++++---- .../src/lib/components/nodes/InputNode.svelte | 13 +++++++++---- .../src/lib/components/nodes/OutputNode.svelte | 10 ++++++---- .../lib/container/NodeRenderer/NodeRenderer.svelte | 6 +++--- packages/system/src/types/nodes.ts | 5 +++-- packages/system/src/utils/graph.ts | 4 ++-- 16 files changed, 63 insertions(+), 49 deletions(-) diff --git a/examples/astro-xyflow/src/components/ReactFlowExample/CustomNode.tsx b/examples/astro-xyflow/src/components/ReactFlowExample/CustomNode.tsx index dc371239..86aef137 100644 --- a/examples/astro-xyflow/src/components/ReactFlowExample/CustomNode.tsx +++ b/examples/astro-xyflow/src/components/ReactFlowExample/CustomNode.tsx @@ -7,7 +7,7 @@ const sourceHandleStyleB: CSSProperties = { left: 'auto', }; -const CustomNode: FC = ({ data, xPos, yPos }) => { +const CustomNode: FC = ({ data, positionAbsolute }) => { return ( <> @@ -18,7 +18,7 @@ const CustomNode: FC = ({ data, xPos, yPos }) => {
Position:{' '} - {xPos.toFixed(2)},{yPos.toFixed(2)} + {positionAbsolute.x.toFixed(2)},{positionAbsolute.y.toFixed(2)}
diff --git a/examples/react/src/examples/Subflow/DebugNode.tsx b/examples/react/src/examples/Subflow/DebugNode.tsx index 9170ef65..46bae224 100644 --- a/examples/react/src/examples/Subflow/DebugNode.tsx +++ b/examples/react/src/examples/Subflow/DebugNode.tsx @@ -11,13 +11,13 @@ const idStyle: CSSProperties = { left: 2, }; -const DebugNode: FC = ({ zIndex, xPos, yPos, id }) => { +const DebugNode: FC = ({ zIndex, positionAbsolute, id }) => { return ( <>
{id}
- x:{Math.round(xPos || 0)} y:{Math.round(yPos || 0)} z:{zIndex} + x:{Math.round(positionAbsolute.x)} y:{Math.round(positionAbsolute.y)} z:{zIndex}
diff --git a/examples/svelte/src/routes/examples/overview/CustomNode.svelte b/examples/svelte/src/routes/examples/overview/CustomNode.svelte index a8f6a226..1197ce62 100644 --- a/examples/svelte/src/routes/examples/overview/CustomNode.svelte +++ b/examples/svelte/src/routes/examples/overview/CustomNode.svelte @@ -1,16 +1,15 @@
{data.label}
-
{~~xPos}, {~~yPos}
+
{~~positionAbsolute.x}, {~~positionAbsolute.y}
diff --git a/examples/svelte/src/routes/examples/subflows/DebugNode.svelte b/examples/svelte/src/routes/examples/subflows/DebugNode.svelte index 7b4434be..9676957e 100644 --- a/examples/svelte/src/routes/examples/subflows/DebugNode.svelte +++ b/examples/svelte/src/routes/examples/subflows/DebugNode.svelte @@ -1,24 +1,16 @@
{id}
- x:{Math.round(xPos || 0)} y:{Math.round(yPos || 0)} z:{zIndex} + x:{Math.round(positionAbsolute.x)} y:{Math.round(positionAbsolute.y)} z:{zIndex}
- - diff --git a/packages/react/src/components/Nodes/wrapNode.tsx b/packages/react/src/components/Nodes/wrapNode.tsx index ab56350b..cc1537d1 100644 --- a/packages/react/src/components/Nodes/wrapNode.tsx +++ b/packages/react/src/components/Nodes/wrapNode.tsx @@ -52,6 +52,7 @@ export default (NodeComponent: ComponentType) => { disableKeyboardA11y, ariaLabel, rfId, + positionAbsolute, width, height, }: WrapNodeProps) => { @@ -209,8 +210,9 @@ export default (NodeComponent: ComponentType) => { id={id} data={data} type={type} - xPos={xPos} - yPos={yPos} + width={width} + height={height} + positionAbsolute={positionAbsolute} selected={selected} isConnectable={isConnectable} sourcePosition={sourcePosition} diff --git a/packages/react/src/container/NodeRenderer/index.tsx b/packages/react/src/container/NodeRenderer/index.tsx index 3797bc45..73808da1 100644 --- a/packages/react/src/container/NodeRenderer/index.tsx +++ b/packages/react/src/container/NodeRenderer/index.tsx @@ -122,6 +122,7 @@ const NodeRenderer = (props: NodeRendererProps) => { yPos={posY} xPosOrigin={posOrigin.x} yPosOrigin={posOrigin.y} + positionAbsolute={clampedPosition || { x: 0, y: 0 }} onClick={props.onNodeClick} onMouseEnter={props.onNodeMouseEnter} onMouseMove={props.onNodeMouseMove} diff --git a/packages/react/src/types/nodes.ts b/packages/react/src/types/nodes.ts index ab691af5..29548666 100644 --- a/packages/react/src/types/nodes.ts +++ b/packages/react/src/types/nodes.ts @@ -1,5 +1,5 @@ import type { CSSProperties, MouseEvent as ReactMouseEvent } from 'react'; -import type { NodeBase } from '@xyflow/system'; +import type { NodeBase, XYPosition } from '@xyflow/system'; export type Node = NodeBase< NodeData, @@ -24,6 +24,7 @@ export type WrapNodeProps = Pick< yPos: number; xPosOrigin: number; yPosOrigin: number; + positionAbsolute: XYPosition; initialized: boolean; isSelectable: boolean; isDraggable: boolean; diff --git a/packages/svelte/src/lib/components/NodeWrapper/NodeWrapper.svelte b/packages/svelte/src/lib/components/NodeWrapper/NodeWrapper.svelte index 335bff71..9a73ffa8 100644 --- a/packages/svelte/src/lib/components/NodeWrapper/NodeWrapper.svelte +++ b/packages/svelte/src/lib/components/NodeWrapper/NodeWrapper.svelte @@ -191,8 +191,9 @@ {dragging} {dragHandle} isConnectable={connectable} - xPos={positionX} - yPos={positionY} + positionAbsolute={{ x: positionX, y: positionY }} + {width} + {height} on:connectstart on:connect on:connectend diff --git a/packages/svelte/src/lib/components/NodeWrapper/types.ts b/packages/svelte/src/lib/components/NodeWrapper/types.ts index 3da65c2f..39fb0c10 100644 --- a/packages/svelte/src/lib/components/NodeWrapper/types.ts +++ b/packages/svelte/src/lib/components/NodeWrapper/types.ts @@ -11,14 +11,14 @@ export type NodeWrapperProps = Pick< | 'selected' | 'selectable' | 'style' - | 'width' - | 'height' | 'type' | 'sourcePosition' | 'targetPosition' | 'dragHandle' | 'hidden' > & { + width?: number; + height?: number; type: string; positionX: number; positionY: number; diff --git a/packages/svelte/src/lib/components/nodes/DefaultNode.svelte b/packages/svelte/src/lib/components/nodes/DefaultNode.svelte index c802de0c..f4fc7270 100644 --- a/packages/svelte/src/lib/components/nodes/DefaultNode.svelte +++ b/packages/svelte/src/lib/components/nodes/DefaultNode.svelte @@ -11,24 +11,29 @@ // unused props - we need to list them here in order to prevent warnings export let id: $$Props['id'] = ''; + export let width: $$Props['width'] = undefined; + export let height: $$Props['height'] = undefined; export let selected: $$Props['selected'] = undefined; export let type: $$Props['type'] = undefined; export let zIndex: $$Props['zIndex'] = undefined; export let dragging: $$Props['dragging'] = false; export let dragHandle: $$Props['dragHandle'] = undefined; - export let xPos: $$Props['xPos'] = 0; - export let yPos: $$Props['yPos'] = 0; + export let positionAbsolute: $$Props['positionAbsolute'] = { + x: 0, + y: 0 + }; export let isConnectable: $$Props['isConnectable'] = undefined; // @todo: there must be a better way to do this id; + width; + height; selected; type; zIndex; dragging; dragHandle; - xPos; - yPos; + positionAbsolute; isConnectable; diff --git a/packages/svelte/src/lib/components/nodes/GroupNode.svelte b/packages/svelte/src/lib/components/nodes/GroupNode.svelte index cd11b299..22dd0754 100644 --- a/packages/svelte/src/lib/components/nodes/GroupNode.svelte +++ b/packages/svelte/src/lib/components/nodes/GroupNode.svelte @@ -5,6 +5,8 @@ // unused props - we need to list them here in order to prevent warnings export let id: $$Props['id'] = ''; + export let width: $$Props['width'] = undefined; + export let height: $$Props['height'] = undefined; export let data: $$Props['data'] = {}; export let selected: $$Props['selected'] = undefined; export let sourcePosition: $$Props['sourcePosition'] = undefined; @@ -13,12 +15,16 @@ export let zIndex: $$Props['zIndex'] = undefined; export let dragging: $$Props['dragging'] = false; export let dragHandle: $$Props['dragHandle'] = undefined; - export let xPos: $$Props['xPos'] = 0; - export let yPos: $$Props['yPos'] = 0; + export let positionAbsolute: $$Props['positionAbsolute'] = { + x: 0, + y: 0 + }; export let isConnectable: $$Props['isConnectable'] = undefined; // @todo: there must be a better way to do this id; + width; + height; data; selected; sourcePosition; @@ -27,7 +33,6 @@ zIndex; dragging; dragHandle; - xPos; - yPos; + positionAbsolute; isConnectable; diff --git a/packages/svelte/src/lib/components/nodes/InputNode.svelte b/packages/svelte/src/lib/components/nodes/InputNode.svelte index 71e40096..aa911d1c 100644 --- a/packages/svelte/src/lib/components/nodes/InputNode.svelte +++ b/packages/svelte/src/lib/components/nodes/InputNode.svelte @@ -10,26 +10,31 @@ // unused props - we need to list them here in order to prevent warnings export let id: $$Props['id'] = ''; + export let width: $$Props['width'] = undefined; + export let height: $$Props['height'] = undefined; export let selected: $$Props['selected'] = undefined; export let targetPosition: $$Props['targetPosition'] = undefined; export let type: $$Props['type'] = undefined; export let zIndex: $$Props['zIndex'] = undefined; export let dragging: $$Props['dragging'] = false; export let dragHandle: $$Props['dragHandle'] = undefined; - export let xPos: $$Props['xPos'] = 0; - export let yPos: $$Props['yPos'] = 0; + export let positionAbsolute: $$Props['positionAbsolute'] = { + x: 0, + y: 0 + }; export let isConnectable: $$Props['isConnectable'] = undefined; // @todo: there must be a better way to do this id; + width; + height; selected; targetPosition; type; zIndex; dragging; dragHandle; - xPos; - yPos; + positionAbsolute; isConnectable; diff --git a/packages/svelte/src/lib/components/nodes/OutputNode.svelte b/packages/svelte/src/lib/components/nodes/OutputNode.svelte index a9bde54b..b5ebc2b1 100644 --- a/packages/svelte/src/lib/components/nodes/OutputNode.svelte +++ b/packages/svelte/src/lib/components/nodes/OutputNode.svelte @@ -10,26 +10,28 @@ // unused props - we need to list them here in order to prevent warnings export let id: $$Props['id'] = ''; + export let width: $$Props['width'] = undefined; + export let height: $$Props['height'] = undefined; export let selected: $$Props['selected'] = undefined; export let sourcePosition: $$Props['sourcePosition'] = undefined; export let type: $$Props['type'] = undefined; export let zIndex: $$Props['zIndex'] = undefined; export let dragging: $$Props['dragging'] = false; export let dragHandle: $$Props['dragHandle'] = undefined; - export let xPos: $$Props['xPos'] = 0; - export let yPos: $$Props['yPos'] = 0; + export let positionAbsolute: $$Props['positionAbsolute'] = { x: 0, y: 0 }; export let isConnectable: $$Props['isConnectable'] = undefined; // @todo: there must be a better way to do this id; + width; + height; selected; sourcePosition; type; zIndex; dragging; dragHandle; - xPos; - yPos; + positionAbsolute; isConnectable; diff --git a/packages/svelte/src/lib/container/NodeRenderer/NodeRenderer.svelte b/packages/svelte/src/lib/container/NodeRenderer/NodeRenderer.svelte index 48ec792b..b4b05a1b 100644 --- a/packages/svelte/src/lib/container/NodeRenderer/NodeRenderer.svelte +++ b/packages/svelte/src/lib/container/NodeRenderer/NodeRenderer.svelte @@ -68,14 +68,14 @@ isParent={!!node[internalsSymbol]?.isParent} style={node.style} class={node.class} - type={node.type || 'default'} + type={node.type ?? 'default'} sourcePosition={node.sourcePosition} targetPosition={node.targetPosition} dragging={node.dragging} zIndex={node[internalsSymbol]?.z ?? 0} dragHandle={node.dragHandle} - width={node.width} - height={node.height} + width={node.width ?? undefined} + height={node.height ?? undefined} initialized={(!!node.computed?.width && !!node.computed?.height) || (!!node.width && !!node.height)} {resizeObserver} diff --git a/packages/system/src/types/nodes.ts b/packages/system/src/types/nodes.ts index 1e354a55..b55f3f54 100644 --- a/packages/system/src/types/nodes.ts +++ b/packages/system/src/types/nodes.ts @@ -52,8 +52,9 @@ export type NodeProps = { selected: NodeBase['selected']; isConnectable: NodeBase['connectable']; zIndex: NodeBase['zIndex']; - xPos: number; - yPos: number; + positionAbsolute: XYPosition; + width?: number; + height?: number; dragging: boolean; targetPosition?: Position; sourcePosition?: Position; diff --git a/packages/system/src/utils/graph.ts b/packages/system/src/utils/graph.ts index fe50e1be..6a946a10 100644 --- a/packages/system/src/utils/graph.ts +++ b/packages/system/src/utils/graph.ts @@ -254,8 +254,8 @@ export function calcNextPosition( ? [ [parentPos.x + nodeWidth * currNodeOrigin[0], parentPos.y + nodeHeight * currNodeOrigin[1]], [ - parentPos.x + parentNode.computed.width - nodeWidth + nodeWidth * currNodeOrigin[0], - parentPos.y + parentNode.computed.height - nodeHeight + nodeHeight * currNodeOrigin[1], + parentPos.x + (parentNode.computed?.width ?? 0) - nodeWidth + nodeWidth * currNodeOrigin[0], + parentPos.y + (parentNode.computed?.height ?? 0) - nodeHeight + nodeHeight * currNodeOrigin[1], ], ] : currentExtent;