diff --git a/packages/core/src/components/Edges/wrapEdge.tsx b/packages/core/src/components/Edges/wrapEdge.tsx index 607f2c5a..a5014af9 100644 --- a/packages/core/src/components/Edges/wrapEdge.tsx +++ b/packages/core/src/components/Edges/wrapEdge.tsx @@ -55,6 +55,7 @@ export default (EdgeComponent: ComponentType) => { rfId, ariaLabel, isFocusable, + isUpdatable, pathOptions, interactionWidth, }: WrapEdgeProps): JSX.Element | null => { @@ -138,7 +139,6 @@ export default (EdgeComponent: ComponentType) => { const onEdgeUpdaterMouseOut = () => setUpdateHover(false); const inactive = !elementsSelectable && !onClick; - const handleEdgeUpdate = typeof onEdgeUpdate !== 'undefined'; const onKeyDown = (event: KeyboardEvent) => { if (elementSelectionKeys.includes(event.key) && elementsSelectable) { @@ -205,28 +205,28 @@ export default (EdgeComponent: ComponentType) => { interactionWidth={interactionWidth} /> )} - {handleEdgeUpdate && ( + {isUpdatable && ( <> - - + {isUpdatable === 'source' && } + {isUpdatable === 'target' && } )} diff --git a/packages/core/src/container/EdgeRenderer/index.tsx b/packages/core/src/container/EdgeRenderer/index.tsx index 09b8f0c6..26a12c1c 100644 --- a/packages/core/src/container/EdgeRenderer/index.tsx +++ b/packages/core/src/container/EdgeRenderer/index.tsx @@ -39,6 +39,7 @@ type EdgeRendererProps = Pick< const selector = (s: ReactFlowState) => ({ nodesConnectable: s.nodesConnectable, edgesFocusable: s.edgesFocusable, + edgesUpdatable: s.edgesUpdatable, elementsSelectable: s.elementsSelectable, width: s.width, height: s.height, @@ -66,7 +67,7 @@ const EdgeRenderer = ({ onEdgeUpdateEnd, children, }: EdgeRendererProps) => { - const { edgesFocusable, elementsSelectable, width, height, connectionMode, nodeInternals, onError } = useStore( + const { edgesFocusable, edgesUpdatable, elementsSelectable, width, height, connectionMode, nodeInternals, onError } = useStore( selector, shallow ); @@ -114,6 +115,7 @@ const EdgeRenderer = ({ const sourcePosition = sourceHandle?.position || Position.Bottom; const targetPosition = targetHandle?.position || Position.Top; const isFocusable = !!(edge.focusable || (edgesFocusable && typeof edge.focusable === 'undefined')); + const isUpdatable = edge.updatable || (edgesUpdatable && typeof edge.updatable === 'undefined'); if (!sourceHandle || !targetHandle) { onError?.('008', errorMessages['error008'](sourceHandle, edge)); @@ -173,6 +175,7 @@ const EdgeRenderer = ({ rfId={rfId} ariaLabel={edge.ariaLabel} isFocusable={isFocusable} + isUpdatable={isUpdatable} pathOptions={'pathOptions' in edge ? edge.pathOptions : undefined} interactionWidth={edge.interactionWidth} /> diff --git a/packages/core/src/types/edges.ts b/packages/core/src/types/edges.ts index 01f73a86..1a21b377 100644 --- a/packages/core/src/types/edges.ts +++ b/packages/core/src/types/edges.ts @@ -91,6 +91,7 @@ export type WrapEdgeProps = Omit, 'sourceHandle' | 'targetHandl onEdgeUpdateEnd?: (event: MouseEvent | TouchEvent, edge: Edge, handleType: HandleType) => void; rfId?: string; isFocusable: boolean; + isUpdatable: EdgeUpdatable; pathOptions?: BezierPathOptions | SmoothStepPathOptions; };