From 75acd24cee4355e2563f4c2c9f8fdf9234804574 Mon Sep 17 00:00:00 2001 From: Moritz Klack Date: Wed, 19 Jun 2024 16:57:30 +0200 Subject: [PATCH] Rename `updateEdge` to `reconnectEdge` (#4373) * refactor(edges): rename update to reconnect * refactor(react): rename edge update to reconnect * chore(examples): repair broken reconnect example * chore(react): changelog --- examples/react/src/App/routes.ts | 8 +-- .../index.tsx | 24 +++---- .../src/examples/Undirectional/index.tsx | 26 +++---- .../react/src/examples/Validation/index.tsx | 16 ++--- .../react/src/generic-tests/edges/general.ts | 2 +- .../svelte/src/generic-tests/edges/general.ts | 2 +- packages/react/CHANGELOG.md | 5 ++ .../EdgeWrapper/EdgeUpdateAnchors.tsx | 68 +++++++++---------- .../src/components/EdgeWrapper/index.tsx | 34 +++++----- .../src/components/StoreUpdater/index.tsx | 2 +- .../src/container/EdgeRenderer/index.tsx | 30 ++++---- .../react/src/container/GraphView/index.tsx | 16 ++--- .../react/src/container/ReactFlow/index.tsx | 20 +++--- packages/react/src/index.ts | 2 +- packages/react/src/store/initialState.ts | 2 +- packages/react/src/types/component-props.ts | 12 ++-- packages/react/src/types/edges.ts | 16 ++--- packages/react/src/types/store.ts | 2 +- packages/svelte/src/lib/index.ts | 3 +- packages/system/src/utils/edges/general.ts | 8 +-- packages/system/src/xyhandle/XYHandle.ts | 6 +- 21 files changed, 153 insertions(+), 151 deletions(-) rename examples/react/src/examples/{UpdatableEdge => ReconnectEdge}/index.tsx (80%) diff --git a/examples/react/src/App/routes.ts b/examples/react/src/App/routes.ts index 287ab17b..024a22ac 100644 --- a/examples/react/src/App/routes.ts +++ b/examples/react/src/App/routes.ts @@ -34,7 +34,7 @@ import Subflow from '../examples/Subflow'; import SwitchFlow from '../examples/Switch'; import TouchDevice from '../examples/TouchDevice'; import Undirectional from '../examples/Undirectional'; -import UpdatableEdge from '../examples/UpdatableEdge'; +import ReconnectEdge from '../examples/ReconnectEdge'; import UpdateNode from '../examples/UpdateNode'; import UseUpdateNodeInternals from '../examples/UseUpdateNodeInternals'; import UseReactFlow from '../examples/UseReactFlow'; @@ -271,9 +271,9 @@ const routes: IRoute[] = [ component: Undirectional, }, { - name: 'Updatable Edge', - path: 'updatable-edge', - component: UpdatableEdge, + name: 'Reconnect Edge', + path: 'reconnect-edge', + component: ReconnectEdge, }, { name: 'Update Node', diff --git a/examples/react/src/examples/UpdatableEdge/index.tsx b/examples/react/src/examples/ReconnectEdge/index.tsx similarity index 80% rename from examples/react/src/examples/UpdatableEdge/index.tsx rename to examples/react/src/examples/ReconnectEdge/index.tsx index 5dacdc9c..b354f089 100644 --- a/examples/react/src/examples/UpdatableEdge/index.tsx +++ b/examples/react/src/examples/ReconnectEdge/index.tsx @@ -2,7 +2,7 @@ import { useState, useCallback, MouseEvent as ReactMouseEvent } from 'react'; import { ReactFlow, Controls, - updateEdge, + reconnectEdge, addEdge, applyNodeChanges, applyEdgeChanges, @@ -91,21 +91,21 @@ const initialNodes: Node[] = [ ]; const initialEdges: Edge[] = [ - { id: 'e1-3', source: '1', target: '3', label: 'This edge can only be updated from source', updatable: 'source' }, - { id: 'e2-4', source: '2', target: '4', label: 'This edge can only be updated from target', updatable: 'target' }, + { id: 'e1-3', source: '1', target: '3', label: 'This edge can only be updated from source', reconnectable: 'source' }, + { id: 'e2-4', source: '2', target: '4', label: 'This edge can only be updated from target', reconnectable: 'target' }, { id: 'e5-6', source: '5', target: '6', label: 'This edge can be updated from both sides' }, ]; -const onEdgeUpdateStart = (_: ReactMouseEvent, edge: Edge, handleType: HandleType) => +const onReconnectStart = (_: ReactMouseEvent, edge: Edge, handleType: HandleType) => console.log(`start update ${handleType} handle`, edge); -const onEdgeUpdateEnd = (_: MouseEvent | TouchEvent, edge: Edge, handleType: HandleType) => +const onReconnectEnd = (_: MouseEvent | TouchEvent, edge: Edge, handleType: HandleType) => console.log(`end update ${handleType} handle`, edge); -const UpdatableEdge = () => { +const ReconnectEdge = () => { const [nodes, setNodes] = useState(initialNodes); const [edges, setEdges] = useState(initialEdges); - const onEdgeUpdate = (oldEdge: Edge, newConnection: Connection) => - setEdges((els) => updateEdge(oldEdge, newConnection, els)); + const onReconnect = (oldEdge: Edge, newConnection: Connection) => + setEdges((els) => reconnectEdge(oldEdge, newConnection, els)); const onConnect = (connection: Connection) => setEdges((els) => addEdge(connection, els)); const onNodesChange = useCallback((changes: NodeChange[]) => { @@ -123,10 +123,10 @@ const UpdatableEdge = () => { onNodesChange={onNodesChange} onEdgesChange={onEdgesChange} snapToGrid={true} - onEdgeUpdate={onEdgeUpdate} + onReconnect={onReconnect} onConnect={onConnect} - onEdgeUpdateStart={onEdgeUpdateStart} - onEdgeUpdateEnd={onEdgeUpdateEnd} + onReconnectStart={onReconnectStart} + onReconnectEnd={onReconnectEnd} fitView > @@ -134,4 +134,4 @@ const UpdatableEdge = () => { ); }; -export default UpdatableEdge; +export default ReconnectEdge; diff --git a/examples/react/src/examples/Undirectional/index.tsx b/examples/react/src/examples/Undirectional/index.tsx index c4cf14a5..1a507876 100644 --- a/examples/react/src/examples/Undirectional/index.tsx +++ b/examples/react/src/examples/Undirectional/index.tsx @@ -10,7 +10,7 @@ import { Edge, ConnectionLineType, ConnectionMode, - updateEdge, + reconnectEdge, useNodesState, useEdgesState, } from '@xyflow/react'; @@ -22,55 +22,55 @@ const initialNodes: Node[] = [ id: '00', type: 'custom', position: { x: 300, y: 250 }, - data: null, + data: {}, }, { id: '01', type: 'custom', position: { x: 100, y: 50 }, - data: null, + data: {}, }, { id: '02', type: 'custom', position: { x: 500, y: 50 }, - data: null, + data: {}, }, { id: '03', type: 'custom', position: { x: 500, y: 500 }, - data: null, + data: {}, }, { id: '04', type: 'custom', position: { x: 100, y: 500 }, - data: null, + data: {}, }, { id: '10', type: 'custom', position: { x: 300, y: 5 }, - data: null, + data: {}, }, { id: '20', type: 'custom', position: { x: 600, y: 250 }, - data: null, + data: {}, }, { id: '30', type: 'custom', position: { x: 300, y: 600 }, - data: null, + data: {}, }, { id: '40', type: 'custom', position: { x: 5, y: 250 }, - data: null, + data: {}, }, ]; @@ -186,8 +186,8 @@ const UpdateNodeInternalsFlow = () => { const { screenToFlowPosition } = useReactFlow(); const onConnect = useCallback((params: Edge | Connection) => setEdges((els) => addEdge(params, els)), [setEdges]); - const onEdgeUpdate = useCallback( - (oldEdge: Edge, newConnection: Connection) => setEdges((els) => updateEdge(oldEdge, newConnection, els)), + const onReconnect = useCallback( + (oldEdge: Edge, newConnection: Connection) => setEdges((els) => reconnectEdge(oldEdge, newConnection, els)), [] ); @@ -215,7 +215,7 @@ const UpdateNodeInternalsFlow = () => { onPaneClick={onPaneClick} connectionLineType={ConnectionLineType.Bezier} connectionMode={ConnectionMode.Loose} - onEdgeUpdate={onEdgeUpdate} + onReconnect={onReconnect} /> ); }; diff --git a/examples/react/src/examples/Validation/index.tsx b/examples/react/src/examples/Validation/index.tsx index 936e1396..9cdad621 100644 --- a/examples/react/src/examples/Validation/index.tsx +++ b/examples/react/src/examples/Validation/index.tsx @@ -13,7 +13,7 @@ import { OnConnectStart, OnConnectEnd, OnConnect, - updateEdge, + reconnectEdge, Edge, IsValidConnection, OnBeforeDelete, @@ -24,10 +24,10 @@ import ConnectionStatus from './ConnectionStatus'; import styles from './validation.module.css'; const initialNodes: Node[] = [ - { id: '0', type: 'custominput', position: { x: 0, y: 150 }, data: null }, - { id: 'A', type: 'customnode', position: { x: 250, y: 0 }, data: null }, - { id: 'B', type: 'customnode', position: { x: 250, y: 150 }, data: null }, - { id: 'C', type: 'customnode', position: { x: 250, y: 300 }, data: null }, + { id: '0', type: 'custominput', position: { x: 0, y: 150 }, data: {} }, + { id: 'A', type: 'customnode', position: { x: 250, y: 0 }, data: {} }, + { id: 'B', type: 'customnode', position: { x: 250, y: 150 }, data: {} }, + { id: 'C', type: 'customnode', position: { x: 250, y: 300 }, data: {} }, ]; const isValidConnection: IsValidConnection = (connection) => connection.target === 'B'; @@ -81,8 +81,8 @@ const ValidationFlow = () => { [value] ); - const onEdgeUpdate = useCallback( - (oldEdge: Edge, newConnection: Connection) => setEdges((els) => updateEdge(oldEdge, newConnection, els)), + const onReconnect = useCallback( + (oldEdge: Edge, newConnection: Connection) => setEdges((els) => reconnectEdge(oldEdge, newConnection, els)), [setEdges] ); @@ -102,7 +102,7 @@ const ValidationFlow = () => { nodeTypes={nodeTypes} onConnectStart={onConnectStart} onConnectEnd={onConnectEnd} - onEdgeUpdate={onEdgeUpdate} + onReconnect={onReconnect} isValidConnection={isValidConnection} onBeforeDelete={onBeforeDelete} fitView diff --git a/examples/react/src/generic-tests/edges/general.ts b/examples/react/src/generic-tests/edges/general.ts index 23977657..3daceec8 100644 --- a/examples/react/src/generic-tests/edges/general.ts +++ b/examples/react/src/generic-tests/edges/general.ts @@ -149,7 +149,7 @@ export default { // source: '9', // target: '11', // label: 'focusable', - // updatable: true + // reconnectable: true // }, // { // id: 'not-focusable', diff --git a/examples/svelte/src/generic-tests/edges/general.ts b/examples/svelte/src/generic-tests/edges/general.ts index 0e62f887..5e94d2fb 100644 --- a/examples/svelte/src/generic-tests/edges/general.ts +++ b/examples/svelte/src/generic-tests/edges/general.ts @@ -146,7 +146,7 @@ export default { // source: '9', // target: '11', // label: 'focusable', - // updatable: true + // reconnectable: true // }, // { // id: 'not-focusable', diff --git a/packages/react/CHANGELOG.md b/packages/react/CHANGELOG.md index 07a0b9ab..b0a1510b 100644 --- a/packages/react/CHANGELOG.md +++ b/packages/react/CHANGELOG.md @@ -1,5 +1,10 @@ # @xyflow/react +## 12.0.0-next.22 + +- ⚠️ rename `updateEdge` to `reconnectEdge` and realted APIs [#4373](https://github.com/xyflow/xyflow/pull/4373) + + ## 12.0.0-next.21 - fix node origin bug diff --git a/packages/react/src/components/EdgeWrapper/EdgeUpdateAnchors.tsx b/packages/react/src/components/EdgeWrapper/EdgeUpdateAnchors.tsx index e4810f11..d1cfd138 100644 --- a/packages/react/src/components/EdgeWrapper/EdgeUpdateAnchors.tsx +++ b/packages/react/src/components/EdgeWrapper/EdgeUpdateAnchors.tsx @@ -1,4 +1,4 @@ -// Updatable edges have a anchors around their handles to update the edge. +// Reconnectable edges have a anchors around their handles to reconnect the edge. import { XYHandle, type Connection, EdgePosition } from '@xyflow/system'; import { EdgeAnchor } from '../Edges/EdgeAnchor'; @@ -7,20 +7,20 @@ import { useStoreApi } from '../../hooks/useStore'; type EdgeUpdateAnchorsProps = { edge: EdgeType; - isUpdatable: boolean | 'source' | 'target'; - edgeUpdaterRadius: EdgeWrapperProps['edgeUpdaterRadius']; + isReconnectable: boolean | 'source' | 'target'; + reconnectRadius: EdgeWrapperProps['reconnectRadius']; sourceHandleId: Edge['sourceHandle']; targetHandleId: Edge['targetHandle']; - onEdgeUpdate: EdgeWrapperProps['onEdgeUpdate']; - onEdgeUpdateStart: EdgeWrapperProps['onEdgeUpdateStart']; - onEdgeUpdateEnd: EdgeWrapperProps['onEdgeUpdateEnd']; + onReconnect: EdgeWrapperProps['onReconnect']; + onReconnectStart: EdgeWrapperProps['onReconnectStart']; + onReconnectEnd: EdgeWrapperProps['onReconnectEnd']; setUpdateHover: (hover: boolean) => void; - setUpdating: (updating: boolean) => void; + setReconnecting: (updating: boolean) => void; } & EdgePosition; export function EdgeUpdateAnchors({ - isUpdatable, - edgeUpdaterRadius, + isReconnectable, + reconnectRadius, edge, targetHandleId, sourceHandleId, @@ -30,10 +30,10 @@ export function EdgeUpdateAnchors({ targetY, sourcePosition, targetPosition, - onEdgeUpdate, - onEdgeUpdateStart, - onEdgeUpdateEnd, - setUpdating, + onReconnect, + onReconnectStart, + onReconnectEnd, + setReconnecting, setUpdateHover, }: EdgeUpdateAnchorsProps) { const store = useStoreApi(); @@ -65,15 +65,15 @@ export function EdgeUpdateAnchors({ const isTarget = isSourceHandle; - setUpdating(true); - onEdgeUpdateStart?.(event, edge, handleType); + setReconnecting(true); + onReconnectStart?.(event, edge, handleType); - const _onEdgeUpdateEnd = (evt: MouseEvent | TouchEvent) => { - setUpdating(false); - onEdgeUpdateEnd?.(evt, edge, handleType); + const _onReconnectEnd = (evt: MouseEvent | TouchEvent) => { + setReconnecting(false); + onReconnectEnd?.(evt, edge, handleType); }; - const onConnectEdge = (connection: Connection) => onEdgeUpdate?.(edge, connection); + const onConnectEdge = (connection: Connection) => onReconnect?.(edge, connection); XYHandle.onPointerDown(event.nativeEvent, { autoPanOnConnect, @@ -93,43 +93,43 @@ export function EdgeUpdateAnchors({ onConnect: onConnectEdge, onConnectStart, onConnectEnd, - onEdgeUpdateEnd: _onEdgeUpdateEnd, + onReconnectEnd: _onReconnectEnd, updateConnection, getTransform: () => store.getState().transform, getConnectionStartHandle: () => store.getState().connectionStartHandle, }); }; - const onEdgeUpdaterSourceMouseDown = (event: React.MouseEvent): void => + const onReconnectSourceMouseDown = (event: React.MouseEvent): void => handleEdgeUpdater(event, true); - const onEdgeUpdaterTargetMouseDown = (event: React.MouseEvent): void => + const onReconnectTargetMouseDown = (event: React.MouseEvent): void => handleEdgeUpdater(event, false); - const onEdgeUpdaterMouseEnter = () => setUpdateHover(true); - const onEdgeUpdaterMouseOut = () => setUpdateHover(false); + const onReconnectMouseEnter = () => setUpdateHover(true); + const onReconnectMouseOut = () => setUpdateHover(false); return ( <> - {(isUpdatable === 'source' || isUpdatable === true) && ( + {(isReconnectable === 'source' || isReconnectable === true) && ( )} - {(isUpdatable === 'target' || isUpdatable === true) && ( + {(isReconnectable === 'target' || isReconnectable === true) && ( )} diff --git a/packages/react/src/components/EdgeWrapper/index.tsx b/packages/react/src/components/EdgeWrapper/index.tsx index 49a9c61b..91b7085a 100644 --- a/packages/react/src/components/EdgeWrapper/index.tsx +++ b/packages/react/src/components/EdgeWrapper/index.tsx @@ -18,7 +18,7 @@ import type { Edge, EdgeWrapperProps } from '../../types'; export function EdgeWrapper({ id, edgesFocusable, - edgesUpdatable, + edgesReconnectable, elementsSelectable, onClick, onDoubleClick, @@ -26,10 +26,10 @@ export function EdgeWrapper({ onMouseEnter, onMouseMove, onMouseLeave, - edgeUpdaterRadius, - onEdgeUpdate, - onEdgeUpdateStart, - onEdgeUpdateEnd, + reconnectRadius, + onReconnect, + onReconnectStart, + onReconnectEnd, rfId, edgeTypes, noPanClassName, @@ -50,14 +50,14 @@ export function EdgeWrapper({ } const isFocusable = !!(edge.focusable || (edgesFocusable && typeof edge.focusable === 'undefined')); - const isUpdatable = - typeof onEdgeUpdate !== 'undefined' && - (edge.updatable || (edgesUpdatable && typeof edge.updatable === 'undefined')); + const isReconnectable = + typeof onReconnect !== 'undefined' && + (edge.reconnectable || (edgesReconnectable && typeof edge.reconnectable === 'undefined')); const isSelectable = !!(edge.selectable || (elementsSelectable && typeof edge.selectable === 'undefined')); const edgeRef = useRef(null); const [updateHover, setUpdateHover] = useState(false); - const [updating, setUpdating] = useState(false); + const [reconnecting, setReconnecting] = useState(false); const store = useStoreApi(); const { zIndex, sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition } = useStore( @@ -207,7 +207,7 @@ export function EdgeWrapper({ aria-describedby={isFocusable ? `${ARIA_EDGE_DESC_KEY}-${rfId}` : undefined} ref={edgeRef} > - {!updating && ( + {!reconnecting && ( ({ interactionWidth={edge.interactionWidth} /> )} - {isUpdatable && ( + {isReconnectable && ( edge={edge} - isUpdatable={isUpdatable} - edgeUpdaterRadius={edgeUpdaterRadius} - onEdgeUpdate={onEdgeUpdate} - onEdgeUpdateStart={onEdgeUpdateStart} - onEdgeUpdateEnd={onEdgeUpdateEnd} + isReconnectable={isReconnectable} + reconnectRadius={reconnectRadius} + onReconnect={onReconnect} + onReconnectStart={onReconnectStart} + onReconnectEnd={onReconnectEnd} sourceX={sourceX} sourceY={sourceY} targetX={targetX} @@ -254,7 +254,7 @@ export function EdgeWrapper({ sourcePosition={sourcePosition} targetPosition={targetPosition} setUpdateHover={setUpdateHover} - setUpdating={setUpdating} + setReconnecting={setReconnecting} sourceHandleId={edge.sourceHandle} targetHandleId={edge.targetHandle} /> diff --git a/packages/react/src/components/StoreUpdater/index.tsx b/packages/react/src/components/StoreUpdater/index.tsx index 624d10a5..56a37134 100644 --- a/packages/react/src/components/StoreUpdater/index.tsx +++ b/packages/react/src/components/StoreUpdater/index.tsx @@ -26,7 +26,7 @@ const reactFlowFieldsToTrack = [ 'nodesConnectable', 'nodesFocusable', 'edgesFocusable', - 'edgesUpdatable', + 'edgesReconnectable', 'elevateNodesOnSelect', 'elevateEdgesOnSelect', 'minZoom', diff --git a/packages/react/src/container/EdgeRenderer/index.tsx b/packages/react/src/container/EdgeRenderer/index.tsx index 6636e833..6e898cbb 100644 --- a/packages/react/src/container/EdgeRenderer/index.tsx +++ b/packages/react/src/container/EdgeRenderer/index.tsx @@ -14,14 +14,14 @@ type EdgeRendererProps = Pick< | 'onEdgeDoubleClick' | 'defaultMarkerColor' | 'onlyRenderVisibleElements' - | 'onEdgeUpdate' + | 'onReconnect' | 'onEdgeContextMenu' | 'onEdgeMouseEnter' | 'onEdgeMouseMove' | 'onEdgeMouseLeave' - | 'onEdgeUpdateStart' - | 'onEdgeUpdateEnd' - | 'edgeUpdaterRadius' + | 'onReconnectStart' + | 'onReconnectEnd' + | 'reconnectRadius' | 'noPanClassName' | 'rfId' | 'disableKeyboardA11y' @@ -34,7 +34,7 @@ const selector = (s: ReactFlowState) => ({ width: s.width, height: s.height, edgesFocusable: s.edgesFocusable, - edgesUpdatable: s.edgesUpdatable, + edgesReconnectable: s.edgesReconnectable, elementsSelectable: s.elementsSelectable, connectionMode: s.connectionMode, onError: s.onError, @@ -46,19 +46,19 @@ function EdgeRendererComponent({ rfId, edgeTypes, noPanClassName, - onEdgeUpdate, + onReconnect, onEdgeContextMenu, onEdgeMouseEnter, onEdgeMouseMove, onEdgeMouseLeave, onEdgeClick, - edgeUpdaterRadius, + reconnectRadius, onEdgeDoubleClick, - onEdgeUpdateStart, - onEdgeUpdateEnd, + onReconnectStart, + onReconnectEnd, disableKeyboardA11y, }: EdgeRendererProps) { - const { edgesFocusable, edgesUpdatable, elementsSelectable, onError } = useStore(selector, shallow); + const { edgesFocusable, edgesReconnectable, elementsSelectable, onError } = useStore(selector, shallow); const edgeIds = useVisibleEdgeIds(onlyRenderVisibleElements); return ( @@ -71,19 +71,19 @@ function EdgeRendererComponent({ key={id} id={id} edgesFocusable={edgesFocusable} - edgesUpdatable={edgesUpdatable} + edgesReconnectable={edgesReconnectable} elementsSelectable={elementsSelectable} noPanClassName={noPanClassName} - onEdgeUpdate={onEdgeUpdate} + onReconnect={onReconnect} onContextMenu={onEdgeContextMenu} onMouseEnter={onEdgeMouseEnter} onMouseMove={onEdgeMouseMove} onMouseLeave={onEdgeMouseLeave} onClick={onEdgeClick} - edgeUpdaterRadius={edgeUpdaterRadius} + reconnectRadius={reconnectRadius} onDoubleClick={onEdgeDoubleClick} - onEdgeUpdateStart={onEdgeUpdateStart} - onEdgeUpdateEnd={onEdgeUpdateEnd} + onReconnectStart={onReconnectStart} + onReconnectEnd={onReconnectEnd} rfId={rfId} onError={onError} edgeTypes={edgeTypes} diff --git a/packages/react/src/container/GraphView/index.tsx b/packages/react/src/container/GraphView/index.tsx index a2663851..8050ca20 100644 --- a/packages/react/src/container/GraphView/index.tsx +++ b/packages/react/src/container/GraphView/index.tsx @@ -85,14 +85,14 @@ function GraphViewComponent( nodesFocusable, nodeOrigin = defaultNodeOrigin, edgesFocusable, - edgesUpdatable, + edgesReconnectable, elementsSelectable = true, defaultViewport = initViewport, minZoom = 0.5, @@ -104,15 +104,15 @@ function ReactFlow( onPaneScroll, onPaneContextMenu, children, - onEdgeUpdate, + onReconnect, + onReconnectStart, + onReconnectEnd, onEdgeContextMenu, onEdgeDoubleClick, onEdgeMouseEnter, onEdgeMouseMove, onEdgeMouseLeave, - onEdgeUpdateStart, - onEdgeUpdateEnd, - edgeUpdaterRadius = 10, + reconnectRadius = 10, onNodesChange, onEdgesChange, noDragClassName = 'nodrag', @@ -202,15 +202,15 @@ function ReactFlow( onSelectionContextMenu={onSelectionContextMenu} onSelectionStart={onSelectionStart} onSelectionEnd={onSelectionEnd} - onEdgeUpdate={onEdgeUpdate} + onReconnect={onReconnect} + onReconnectStart={onReconnectStart} + onReconnectEnd={onReconnectEnd} onEdgeContextMenu={onEdgeContextMenu} onEdgeDoubleClick={onEdgeDoubleClick} onEdgeMouseEnter={onEdgeMouseEnter} onEdgeMouseMove={onEdgeMouseMove} onEdgeMouseLeave={onEdgeMouseLeave} - onEdgeUpdateStart={onEdgeUpdateStart} - onEdgeUpdateEnd={onEdgeUpdateEnd} - edgeUpdaterRadius={edgeUpdaterRadius} + reconnectRadius={reconnectRadius} defaultMarkerColor={defaultMarkerColor} noDragClassName={noDragClassName} noWheelClassName={noWheelClassName} @@ -236,7 +236,7 @@ function ReactFlow( nodesConnectable={nodesConnectable} nodesFocusable={nodesFocusable} edgesFocusable={edgesFocusable} - edgesUpdatable={edgesUpdatable} + edgesReconnectable={edgesReconnectable} elementsSelectable={elementsSelectable} elevateNodesOnSelect={elevateNodesOnSelect} elevateEdgesOnSelect={elevateEdgesOnSelect} diff --git a/packages/react/src/index.ts b/packages/react/src/index.ts index 85b582d6..e00cd0d7 100644 --- a/packages/react/src/index.ts +++ b/packages/react/src/index.ts @@ -116,6 +116,6 @@ export { getIncomers, getOutgoers, addEdge, - updateEdge, + reconnectEdge, getConnectedEdges, } from '@xyflow/system'; diff --git a/packages/react/src/store/initialState.ts b/packages/react/src/store/initialState.ts index 57844405..d519665f 100644 --- a/packages/react/src/store/initialState.ts +++ b/packages/react/src/store/initialState.ts @@ -92,7 +92,7 @@ const getInitialState = ({ nodesConnectable: true, nodesFocusable: true, edgesFocusable: true, - edgesUpdatable: true, + edgesReconnectable: true, elementsSelectable: true, elevateNodesOnSelect: true, elevateEdgesOnSelect: false, diff --git a/packages/react/src/types/component-props.ts b/packages/react/src/types/component-props.ts index 6deca270..5dd6d57e 100644 --- a/packages/react/src/types/component-props.ts +++ b/packages/react/src/types/component-props.ts @@ -29,7 +29,7 @@ import type { Node, Edge, ConnectionLineComponent, - OnEdgeUpdateFunc, + OnReconnect, OnInit, DefaultEdgeOptions, FitViewOptions, @@ -129,9 +129,9 @@ export interface ReactFlowProps; /** This event handler is called when a user double clicks on an edge */ onEdgeDoubleClick?: EdgeMouseHandler; - onEdgeUpdateStart?: (event: ReactMouseEvent, edge: EdgeType, handleType: HandleType) => void; - onEdgeUpdateEnd?: (event: MouseEvent | TouchEvent, edge: EdgeType, handleType: HandleType) => void; - onEdgeUpdate?: OnEdgeUpdateFunc; + onReconnect?: OnReconnect; + onReconnectStart?: (event: ReactMouseEvent, edge: EdgeType, handleType: HandleType) => void; + onReconnectEnd?: (event: MouseEvent | TouchEvent, edge: EdgeType, handleType: HandleType) => void; /** This event handler is called when a Node is updated * @example // Use NodesState hook to create edges and get onNodesChange handler * import ReactFlow, { useNodesState } from '@xyflow/react'; @@ -330,7 +330,7 @@ export interface ReactFlowProps = (event: ReactMouseE export type EdgeWrapperProps = { id: string; edgesFocusable: boolean; - edgesUpdatable: boolean; + edgesReconnectable: boolean; elementsSelectable: boolean; noPanClassName: string; onClick?: EdgeMouseHandler; onDoubleClick?: EdgeMouseHandler; - onEdgeUpdate?: OnEdgeUpdateFunc; + onReconnect?: OnReconnect; onContextMenu?: EdgeMouseHandler; onMouseEnter?: EdgeMouseHandler; onMouseMove?: EdgeMouseHandler; onMouseLeave?: EdgeMouseHandler; - edgeUpdaterRadius?: number; - onEdgeUpdateStart?: (event: ReactMouseEvent, edge: EdgeType, handleType: HandleType) => void; - onEdgeUpdateEnd?: (event: MouseEvent | TouchEvent, edge: EdgeType, handleType: HandleType) => void; + reconnectRadius?: number; + onReconnectStart?: (event: ReactMouseEvent, edge: EdgeType, handleType: HandleType) => void; + onReconnectEnd?: (event: MouseEvent | TouchEvent, edge: EdgeType, handleType: HandleType) => void; rfId?: string; edgeTypes?: EdgeTypes; onError?: OnError; @@ -191,7 +189,7 @@ export type StraightEdgeProps = Omit = (oldEdge: EdgeType, newConnection: Connection) => void; +export type OnReconnect = (oldEdge: EdgeType, newConnection: Connection) => void; export type ConnectionLineComponentProps = { connectionLineStyle?: CSSProperties; diff --git a/packages/react/src/types/store.ts b/packages/react/src/types/store.ts index bd5f5720..7bf6e692 100644 --- a/packages/react/src/types/store.ts +++ b/packages/react/src/types/store.ts @@ -89,7 +89,7 @@ export type ReactFlowStore( return edges.concat(edge); }; -export type UpdateEdgeOptions = { +export type ReconnectEdgeOptions = { shouldReplaceId?: boolean; }; /** - * A handy utility to update an existing Edge with new properties + * A handy utility to reconnect an existing edge with new properties * @param oldEdge - The edge you want to update * @param newConnection - The new connection you want to update the edge with * @param edges - The array of all current edges * @param options.shouldReplaceId - should the id of the old edge be replaced with the new connection id * @returns the updated edges array */ -export const updateEdge = ( +export const reconnectEdge = ( oldEdge: EdgeType, newConnection: Connection, edges: EdgeType[], - options: UpdateEdgeOptions = { shouldReplaceId: true } + options: ReconnectEdgeOptions = { shouldReplaceId: true } ): EdgeType[] => { const { id: oldEdgeId, ...rest } = oldEdge; diff --git a/packages/system/src/xyhandle/XYHandle.ts b/packages/system/src/xyhandle/XYHandle.ts index 80b09e61..aba77305 100644 --- a/packages/system/src/xyhandle/XYHandle.ts +++ b/packages/system/src/xyhandle/XYHandle.ts @@ -36,7 +36,7 @@ export type OnPointerDownParams = { onConnect?: OnConnect; onConnectEnd?: OnConnectEnd; isValidConnection?: IsValidConnection; - onEdgeUpdateEnd?: (evt: MouseEvent | TouchEvent) => void; + onReconnectEnd?: (evt: MouseEvent | TouchEvent) => void; getTransform: () => Transform; getConnectionStartHandle: () => ConnectingHandle | null; }; @@ -89,7 +89,7 @@ function onPointerDown( onConnect, onConnectEnd, isValidConnection = alwaysValid, - onEdgeUpdateEnd, + onReconnectEnd, updateConnection, getTransform, getConnectionStartHandle, @@ -211,7 +211,7 @@ function onPointerDown( onConnectEnd?.(event); if (edgeUpdaterType) { - onEdgeUpdateEnd?.(event); + onReconnectEnd?.(event); } cancelConnection();