From cde899c5be9715c4ff2cc331ea93821102604c62 Mon Sep 17 00:00:00 2001 From: Solomon Astley Date: Sun, 15 Dec 2024 11:45:04 -0800 Subject: [PATCH 1/4] pass through NodeType to connectionLineComponent ReactFlow prop --- .changeset/happy-hats-lay.md | 5 +++++ .../src/components/ConnectionLine/index.tsx | 16 ++++++++-------- packages/react/src/types/component-props.ts | 2 +- 3 files changed, 14 insertions(+), 9 deletions(-) create mode 100644 .changeset/happy-hats-lay.md diff --git a/.changeset/happy-hats-lay.md b/.changeset/happy-hats-lay.md new file mode 100644 index 00000000..3a312bc3 --- /dev/null +++ b/.changeset/happy-hats-lay.md @@ -0,0 +1,5 @@ +--- +'@xyflow/react': minor +--- + +Pass `NodeType` type argument from `ReactFlowProps` to `connectionLineComponent` property. diff --git a/packages/react/src/components/ConnectionLine/index.tsx b/packages/react/src/components/ConnectionLine/index.tsx index a5f7e1e2..86479900 100644 --- a/packages/react/src/components/ConnectionLine/index.tsx +++ b/packages/react/src/components/ConnectionLine/index.tsx @@ -11,12 +11,12 @@ import { import { useStore } from '../../hooks/useStore'; import { getSimpleBezierPath } from '../Edges/SimpleBezierEdge'; -import type { ConnectionLineComponent, ReactFlowState } from '../../types'; +import type { ConnectionLineComponent, Node, ReactFlowState } from '../../types'; import { useConnection } from '../../hooks/useConnection'; -type ConnectionLineWrapperProps = { +type ConnectionLineWrapperProps = { type: ConnectionLineType; - component?: ConnectionLineComponent; + component?: ConnectionLineComponent; containerStyle?: CSSProperties; style?: CSSProperties; }; @@ -29,7 +29,7 @@ const selector = (s: ReactFlowState) => ({ height: s.height, }); -export function ConnectionLineWrapper({ containerStyle, style, type, component }: ConnectionLineWrapperProps) { +export function ConnectionLineWrapper({ containerStyle, style, type, component }: ConnectionLineWrapperProps) { const { nodesConnectable, width, height, isValid, inProgress } = useStore(selector, shallow); const renderConnection = !!(width && nodesConnectable && inProgress); @@ -51,15 +51,15 @@ export function ConnectionLineWrapper({ containerStyle, style, type, component } ); } -type ConnectionLineProps = { +type ConnectionLineProps = { type: ConnectionLineType; style?: CSSProperties; - CustomComponent?: ConnectionLineComponent; + CustomComponent?: ConnectionLineComponent; isValid: boolean | null; }; -const ConnectionLine = ({ style, type = ConnectionLineType.Bezier, CustomComponent, isValid }: ConnectionLineProps) => { - const { inProgress, from, fromNode, fromHandle, fromPosition, to, toNode, toHandle, toPosition } = useConnection(); +const ConnectionLine = ({ style, type = ConnectionLineType.Bezier, CustomComponent, isValid }: ConnectionLineProps) => { + const { inProgress, from, fromNode, fromHandle, fromPosition, to, toNode, toHandle, toPosition } = useConnection(); if (!inProgress) { return; diff --git a/packages/react/src/types/component-props.ts b/packages/react/src/types/component-props.ts index d04875d1..a5807687 100644 --- a/packages/react/src/types/component-props.ts +++ b/packages/react/src/types/component-props.ts @@ -259,7 +259,7 @@ export interface ReactFlowProps; /** Styles to be applied to the container of the connection line */ connectionLineContainerStyle?: CSSProperties; /** 'strict' connection mode will only allow you to connect source handles to target handles. From 1344ccad39a8e05286c37fed1eff50cbc80f6f86 Mon Sep 17 00:00:00 2001 From: moklick Date: Wed, 12 Feb 2025 14:18:14 +0100 Subject: [PATCH 2/4] chore(connection-line): pass generic --- .../src/components/ConnectionLine/index.tsx | 19 +++++++++++++++---- .../react/src/container/GraphView/index.tsx | 2 +- 2 files changed, 16 insertions(+), 5 deletions(-) diff --git a/packages/react/src/components/ConnectionLine/index.tsx b/packages/react/src/components/ConnectionLine/index.tsx index 86479900..c179fae2 100644 --- a/packages/react/src/components/ConnectionLine/index.tsx +++ b/packages/react/src/components/ConnectionLine/index.tsx @@ -29,7 +29,12 @@ const selector = (s: ReactFlowState) => ({ height: s.height, }); -export function ConnectionLineWrapper({ containerStyle, style, type, component }: ConnectionLineWrapperProps) { +export function ConnectionLineWrapper({ + containerStyle, + style, + type, + component, +}: ConnectionLineWrapperProps) { const { nodesConnectable, width, height, isValid, inProgress } = useStore(selector, shallow); const renderConnection = !!(width && nodesConnectable && inProgress); @@ -45,7 +50,7 @@ export function ConnectionLineWrapper({ containerS className="react-flow__connectionline react-flow__container" > - + style={style} type={type} CustomComponent={component} isValid={isValid} /> ); @@ -58,8 +63,14 @@ type ConnectionLineProps = { isValid: boolean | null; }; -const ConnectionLine = ({ style, type = ConnectionLineType.Bezier, CustomComponent, isValid }: ConnectionLineProps) => { - const { inProgress, from, fromNode, fromHandle, fromPosition, to, toNode, toHandle, toPosition } = useConnection(); +const ConnectionLine = ({ + style, + type = ConnectionLineType.Bezier, + CustomComponent, + isValid, +}: ConnectionLineProps) => { + const { inProgress, from, fromNode, fromHandle, fromPosition, to, toNode, toHandle, toPosition } = + useConnection(); if (!inProgress) { return; diff --git a/packages/react/src/container/GraphView/index.tsx b/packages/react/src/container/GraphView/index.tsx index 7356c8f4..fd0296f1 100644 --- a/packages/react/src/container/GraphView/index.tsx +++ b/packages/react/src/container/GraphView/index.tsx @@ -170,7 +170,7 @@ function GraphViewComponent - style={connectionLineStyle} type={connectionLineType} component={connectionLineComponent} From b90b5c0500ef995d841bbdc05222ae294a5343b5 Mon Sep 17 00:00:00 2001 From: moklick Date: Wed, 12 Feb 2025 14:20:28 +0100 Subject: [PATCH 3/4] chore(changeset): add --- .changeset/stale-kings-own.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/stale-kings-own.md diff --git a/.changeset/stale-kings-own.md b/.changeset/stale-kings-own.md new file mode 100644 index 00000000..051d0770 --- /dev/null +++ b/.changeset/stale-kings-own.md @@ -0,0 +1,5 @@ +--- +'@xyflow/react': patch +--- + +Pass NodeType generic to connection line component From 0a428c7e1de8c4a0e3564ab2f95caf0078909206 Mon Sep 17 00:00:00 2001 From: moklick Date: Wed, 12 Feb 2025 14:21:31 +0100 Subject: [PATCH 4/4] chore(changeset): cleanup --- .changeset/happy-hats-lay.md | 2 +- .changeset/stale-kings-own.md | 5 ----- 2 files changed, 1 insertion(+), 6 deletions(-) delete mode 100644 .changeset/stale-kings-own.md diff --git a/.changeset/happy-hats-lay.md b/.changeset/happy-hats-lay.md index 3a312bc3..eb58de7d 100644 --- a/.changeset/happy-hats-lay.md +++ b/.changeset/happy-hats-lay.md @@ -1,5 +1,5 @@ --- -'@xyflow/react': minor +'@xyflow/react': patch --- Pass `NodeType` type argument from `ReactFlowProps` to `connectionLineComponent` property. diff --git a/.changeset/stale-kings-own.md b/.changeset/stale-kings-own.md deleted file mode 100644 index 051d0770..00000000 --- a/.changeset/stale-kings-own.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'@xyflow/react': patch ---- - -Pass NodeType generic to connection line component