From e8aa8737ae4dc038706c0984c40aa0812ad3506c Mon Sep 17 00:00:00 2001 From: Andreas Schultz Date: Fri, 11 Mar 2022 09:03:24 +0100 Subject: [PATCH 1/4] Pass isSourceHandle flag to onEdgeUpdateStart - This allows to know during an edge update which side of the edge is getting dragged by the user. - Use cases include showing custom validation hints to the user during an edge update, e.g. which handles can be connected to and which not. This would otherwise not be possible without knowing which side is updated. --- src/components/Edges/wrapEdge.tsx | 2 +- src/container/EdgeRenderer/index.tsx | 2 +- src/container/ReactFlow/index.tsx | 2 +- src/types/index.ts | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/Edges/wrapEdge.tsx b/src/components/Edges/wrapEdge.tsx index 60384e74..292463f0 100644 --- a/src/components/Edges/wrapEdge.tsx +++ b/src/components/Edges/wrapEdge.tsx @@ -140,7 +140,7 @@ export default (EdgeComponent: ComponentType) => { const isValidConnection = () => true; const isTarget = isSourceHandle; - onEdgeUpdateStart?.(event, edgeElement); + onEdgeUpdateStart?.(event, edgeElement, isSourceHandle); const _onEdgeUpdate = onEdgeUpdateEnd ? (evt: MouseEvent): void => onEdgeUpdateEnd(evt, edgeElement) diff --git a/src/container/EdgeRenderer/index.tsx b/src/container/EdgeRenderer/index.tsx index 21d7034f..def55e27 100644 --- a/src/container/EdgeRenderer/index.tsx +++ b/src/container/EdgeRenderer/index.tsx @@ -34,7 +34,7 @@ interface EdgeRendererProps { onEdgeMouseEnter?: (event: React.MouseEvent, edge: Edge) => void; onEdgeMouseMove?: (event: React.MouseEvent, edge: Edge) => void; onEdgeMouseLeave?: (event: React.MouseEvent, edge: Edge) => void; - onEdgeUpdateStart?: (event: React.MouseEvent, edge: Edge) => void; + onEdgeUpdateStart?: (event: React.MouseEvent, edge: Edge, isSourceHandle: boolean) => void; onEdgeUpdateEnd?: (event: MouseEvent, edge: Edge) => void; edgeUpdaterRadius?: number; } diff --git a/src/container/ReactFlow/index.tsx b/src/container/ReactFlow/index.tsx index 66dbe234..cc0ae8ea 100644 --- a/src/container/ReactFlow/index.tsx +++ b/src/container/ReactFlow/index.tsx @@ -123,7 +123,7 @@ export interface ReactFlowProps extends Omit, 'on onEdgeMouseMove?: (event: ReactMouseEvent, edge: Edge) => void; onEdgeMouseLeave?: (event: ReactMouseEvent, edge: Edge) => void; onEdgeDoubleClick?: (event: ReactMouseEvent, edge: Edge) => void; - onEdgeUpdateStart?: (event: ReactMouseEvent, edge: Edge) => void; + onEdgeUpdateStart?: (event: ReactMouseEvent, edge: Edge, isSourceHandle: boolean) => void; onEdgeUpdateEnd?: (event: MouseEvent, edge: Edge) => void; edgeUpdaterRadius?: number; nodeTypesId?: string; diff --git a/src/types/index.ts b/src/types/index.ts index d24a0c12..ce257abd 100644 --- a/src/types/index.ts +++ b/src/types/index.ts @@ -132,7 +132,7 @@ export interface WrapEdgeProps { onMouseMove?: (event: React.MouseEvent, edge: Edge) => void; onMouseLeave?: (event: React.MouseEvent, edge: Edge) => void; edgeUpdaterRadius?: number; - onEdgeUpdateStart?: (event: React.MouseEvent, edge: Edge) => void; + onEdgeUpdateStart?: (event: React.MouseEvent, edge: Edge, isSourceHandle: boolean) => void; onEdgeUpdateEnd?: (event: MouseEvent, edge: Edge) => void; } From 68ec5d87d728cfd7c269c20aa39e318f67b7eef1 Mon Sep 17 00:00:00 2001 From: Andreas Schultz Date: Mon, 4 Apr 2022 09:53:11 +0200 Subject: [PATCH 2/4] Change boolean 'isSourceHandle' parameter to handleType: HandleType in 'onEdgeUpdateStart' function - In order to make the function better extendable in the future. --- src/components/Edges/wrapEdge.tsx | 5 +++-- src/container/EdgeRenderer/index.tsx | 3 ++- src/container/ReactFlow/index.tsx | 3 ++- src/types/index.ts | 2 +- 4 files changed, 8 insertions(+), 5 deletions(-) diff --git a/src/components/Edges/wrapEdge.tsx b/src/components/Edges/wrapEdge.tsx index 292463f0..2cad3166 100644 --- a/src/components/Edges/wrapEdge.tsx +++ b/src/components/Edges/wrapEdge.tsx @@ -137,10 +137,11 @@ export default (EdgeComponent: ComponentType) => { (event: React.MouseEvent, isSourceHandle: boolean) => { const nodeId = isSourceHandle ? target : source; const handleId = isSourceHandle ? targetHandleId : sourceHandleId; + const handleType = isSourceHandle ? 'target' : 'source' const isValidConnection = () => true; const isTarget = isSourceHandle; - onEdgeUpdateStart?.(event, edgeElement, isSourceHandle); + onEdgeUpdateStart?.(event, edgeElement, handleType); const _onEdgeUpdate = onEdgeUpdateEnd ? (evt: MouseEvent): void => onEdgeUpdateEnd(evt, edgeElement) @@ -156,7 +157,7 @@ export default (EdgeComponent: ComponentType) => { isTarget, isValidConnection, connectionMode, - isSourceHandle ? 'target' : 'source', + handleType, _onEdgeUpdate ); }, diff --git a/src/container/EdgeRenderer/index.tsx b/src/container/EdgeRenderer/index.tsx index def55e27..dde5a2fa 100644 --- a/src/container/EdgeRenderer/index.tsx +++ b/src/container/EdgeRenderer/index.tsx @@ -16,6 +16,7 @@ import { ConnectionMode, Transform, OnEdgeUpdateFunc, + HandleType, } from '../../types'; interface EdgeRendererProps { @@ -34,7 +35,7 @@ interface EdgeRendererProps { onEdgeMouseEnter?: (event: React.MouseEvent, edge: Edge) => void; onEdgeMouseMove?: (event: React.MouseEvent, edge: Edge) => void; onEdgeMouseLeave?: (event: React.MouseEvent, edge: Edge) => void; - onEdgeUpdateStart?: (event: React.MouseEvent, edge: Edge, isSourceHandle: boolean) => void; + onEdgeUpdateStart?: (event: React.MouseEvent, edge: Edge, handleType: HandleType) => void; onEdgeUpdateEnd?: (event: MouseEvent, edge: Edge) => void; edgeUpdaterRadius?: number; } diff --git a/src/container/ReactFlow/index.tsx b/src/container/ReactFlow/index.tsx index cc0ae8ea..96c27fcd 100644 --- a/src/container/ReactFlow/index.tsx +++ b/src/container/ReactFlow/index.tsx @@ -38,6 +38,7 @@ import { PanOnScrollMode, OnEdgeUpdateFunc, NodeExtent, + HandleType, } from '../../types'; import '../../style.css'; @@ -123,7 +124,7 @@ export interface ReactFlowProps extends Omit, 'on onEdgeMouseMove?: (event: ReactMouseEvent, edge: Edge) => void; onEdgeMouseLeave?: (event: ReactMouseEvent, edge: Edge) => void; onEdgeDoubleClick?: (event: ReactMouseEvent, edge: Edge) => void; - onEdgeUpdateStart?: (event: ReactMouseEvent, edge: Edge, isSourceHandle: boolean) => void; + onEdgeUpdateStart?: (event: ReactMouseEvent, edge: Edge, handleType: HandleType) => void; onEdgeUpdateEnd?: (event: MouseEvent, edge: Edge) => void; edgeUpdaterRadius?: number; nodeTypesId?: string; diff --git a/src/types/index.ts b/src/types/index.ts index ce257abd..c7fe2b7f 100644 --- a/src/types/index.ts +++ b/src/types/index.ts @@ -132,7 +132,7 @@ export interface WrapEdgeProps { onMouseMove?: (event: React.MouseEvent, edge: Edge) => void; onMouseLeave?: (event: React.MouseEvent, edge: Edge) => void; edgeUpdaterRadius?: number; - onEdgeUpdateStart?: (event: React.MouseEvent, edge: Edge, isSourceHandle: boolean) => void; + onEdgeUpdateStart?: (event: React.MouseEvent, edge: Edge, handleType: HandleType) => void; onEdgeUpdateEnd?: (event: MouseEvent, edge: Edge) => void; } From 4d6c6ffc7d852d06b4af9b7a057224ad0e00a049 Mon Sep 17 00:00:00 2001 From: Andreas Schultz Date: Mon, 11 Apr 2022 07:39:22 +0200 Subject: [PATCH 3/4] Also add 'handleType' parameter to 'onEdgeUpdateEnd' callback analogous to 'onEdgeUpdateStart' --- example/src/UpdatableEdge/index.tsx | 5 +++-- src/components/Edges/wrapEdge.tsx | 2 +- src/container/EdgeRenderer/index.tsx | 2 +- src/container/ReactFlow/index.tsx | 2 +- src/types/index.ts | 2 +- 5 files changed, 7 insertions(+), 6 deletions(-) diff --git a/example/src/UpdatableEdge/index.tsx b/example/src/UpdatableEdge/index.tsx index 4ffdab04..3c1fdb84 100644 --- a/example/src/UpdatableEdge/index.tsx +++ b/example/src/UpdatableEdge/index.tsx @@ -9,6 +9,7 @@ import ReactFlow, { Edge, removeElements, } from 'react-flow-renderer'; +import {HandleType} from "../../../dist"; const initialElements: Elements = [ { @@ -50,8 +51,8 @@ const initialElements: Elements = [ ]; const onLoad = (reactFlowInstance: OnLoadParams) => reactFlowInstance.fitView(); -const onEdgeUpdateStart = (_: React.MouseEvent, edge: Edge) => console.log('start update', edge); -const onEdgeUpdateEnd = (_: MouseEvent, edge: Edge) => console.log('end update', edge); +const onEdgeUpdateStart = (_: React.MouseEvent, edge: Edge, handleType: HandleType) => console.log(`start update ${handleType} handle`, edge); +const onEdgeUpdateEnd = (_: MouseEvent, edge: Edge, handleType: HandleType) => console.log(`end update ${handleType} handle`, edge); const UpdatableEdge = () => { const [elements, setElements] = useState(initialElements); diff --git a/src/components/Edges/wrapEdge.tsx b/src/components/Edges/wrapEdge.tsx index 2cad3166..caa877d6 100644 --- a/src/components/Edges/wrapEdge.tsx +++ b/src/components/Edges/wrapEdge.tsx @@ -144,7 +144,7 @@ export default (EdgeComponent: ComponentType) => { onEdgeUpdateStart?.(event, edgeElement, handleType); const _onEdgeUpdate = onEdgeUpdateEnd - ? (evt: MouseEvent): void => onEdgeUpdateEnd(evt, edgeElement) + ? (evt: MouseEvent): void => onEdgeUpdateEnd(evt, edgeElement, handleType) : undefined; onMouseDown( diff --git a/src/container/EdgeRenderer/index.tsx b/src/container/EdgeRenderer/index.tsx index dde5a2fa..303441b6 100644 --- a/src/container/EdgeRenderer/index.tsx +++ b/src/container/EdgeRenderer/index.tsx @@ -36,7 +36,7 @@ interface EdgeRendererProps { onEdgeMouseMove?: (event: React.MouseEvent, edge: Edge) => void; onEdgeMouseLeave?: (event: React.MouseEvent, edge: Edge) => void; onEdgeUpdateStart?: (event: React.MouseEvent, edge: Edge, handleType: HandleType) => void; - onEdgeUpdateEnd?: (event: MouseEvent, edge: Edge) => void; + onEdgeUpdateEnd?: (event: MouseEvent, edge: Edge, handleType: HandleType) => void; edgeUpdaterRadius?: number; } diff --git a/src/container/ReactFlow/index.tsx b/src/container/ReactFlow/index.tsx index 96c27fcd..0532f21b 100644 --- a/src/container/ReactFlow/index.tsx +++ b/src/container/ReactFlow/index.tsx @@ -125,7 +125,7 @@ export interface ReactFlowProps extends Omit, 'on onEdgeMouseLeave?: (event: ReactMouseEvent, edge: Edge) => void; onEdgeDoubleClick?: (event: ReactMouseEvent, edge: Edge) => void; onEdgeUpdateStart?: (event: ReactMouseEvent, edge: Edge, handleType: HandleType) => void; - onEdgeUpdateEnd?: (event: MouseEvent, edge: Edge) => void; + onEdgeUpdateEnd?: (event: MouseEvent, edge: Edge, handleType: HandleType) => void; edgeUpdaterRadius?: number; nodeTypesId?: string; edgeTypesId?: string; diff --git a/src/types/index.ts b/src/types/index.ts index c7fe2b7f..43aff734 100644 --- a/src/types/index.ts +++ b/src/types/index.ts @@ -133,7 +133,7 @@ export interface WrapEdgeProps { onMouseLeave?: (event: React.MouseEvent, edge: Edge) => void; edgeUpdaterRadius?: number; onEdgeUpdateStart?: (event: React.MouseEvent, edge: Edge, handleType: HandleType) => void; - onEdgeUpdateEnd?: (event: MouseEvent, edge: Edge) => void; + onEdgeUpdateEnd?: (event: MouseEvent, edge: Edge, handleType: HandleType) => void; } export interface EdgeProps { From 8d5305d240e8cf6f002c20b2cf8b12c182a5009b Mon Sep 17 00:00:00 2001 From: moklick Date: Mon, 11 Apr 2022 13:36:39 +0200 Subject: [PATCH 4/4] refactor(edge-types): cleanup --- example/src/UpdatableEdge/index.tsx | 8 +++++--- src/components/Edges/wrapEdge.tsx | 4 ++-- src/types/component-props.ts | 5 +++-- src/types/edges.ts | 8 ++++---- 4 files changed, 14 insertions(+), 11 deletions(-) diff --git a/example/src/UpdatableEdge/index.tsx b/example/src/UpdatableEdge/index.tsx index cc50c2aa..0e835bc2 100644 --- a/example/src/UpdatableEdge/index.tsx +++ b/example/src/UpdatableEdge/index.tsx @@ -11,8 +11,8 @@ import ReactFlow, { Node, NodeChange, EdgeChange, + HandleType, } from 'react-flow-renderer'; -import {HandleType} from "../../../dist"; const initialNodes: Node[] = [ { @@ -55,8 +55,10 @@ const initialNodes: Node[] = [ const initialEdges = [{ id: 'e1-2', source: '1', target: '2', label: 'This is a draggable edge' }]; const onInit = (reactFlowInstance: ReactFlowInstance) => reactFlowInstance.fitView(); -const onEdgeUpdateStart = (_: React.MouseEvent, edge: Edge, handleType: HandleType) => console.log(`start update ${handleType} handle`, edge); -const onEdgeUpdateEnd = (_: MouseEvent, edge: Edge, handleType: HandleType) => console.log(`end update ${handleType} handle`, edge); +const onEdgeUpdateStart = (_: React.MouseEvent, edge: Edge, handleType: HandleType) => + console.log(`start update ${handleType} handle`, edge); +const onEdgeUpdateEnd = (_: MouseEvent, edge: Edge, handleType: HandleType) => + console.log(`end update ${handleType} handle`, edge); const UpdatableEdge = () => { const [nodes, setNodes] = useState(initialNodes); diff --git a/src/components/Edges/wrapEdge.tsx b/src/components/Edges/wrapEdge.tsx index cc6d05c9..f799eed8 100644 --- a/src/components/Edges/wrapEdge.tsx +++ b/src/components/Edges/wrapEdge.tsx @@ -141,7 +141,7 @@ export default (EdgeComponent: ComponentType) => { (event: React.MouseEvent, isSourceHandle: boolean) => { const nodeId = isSourceHandle ? target : source; const handleId = isSourceHandle ? targetHandleId : sourceHandleId; - const handleType = isSourceHandle ? 'target' : 'source' + const handleType = isSourceHandle ? 'target' : 'source'; const isValidConnection = () => true; const isTarget = isSourceHandle; @@ -170,7 +170,7 @@ export default (EdgeComponent: ComponentType) => { isValidConnection, connectionMode, handleType, - _onEdgeUpdate + _onEdgeUpdate, store.getState ); }, diff --git a/src/types/component-props.ts b/src/types/component-props.ts index fa915184..f38d990e 100644 --- a/src/types/component-props.ts +++ b/src/types/component-props.ts @@ -31,6 +31,7 @@ import { OnMoveStart, OnMoveEnd, } from '.'; +import { HandleType } from './handles'; export interface ReactFlowProps extends HTMLAttributes { nodes?: Node[]; @@ -106,8 +107,8 @@ export interface ReactFlowProps extends HTMLAttributes { onEdgeMouseMove?: (event: ReactMouseEvent, edge: Edge) => void; onEdgeMouseLeave?: (event: ReactMouseEvent, edge: Edge) => void; onEdgeDoubleClick?: (event: ReactMouseEvent, edge: Edge) => void; - onEdgeUpdateStart?: (event: ReactMouseEvent, edge: Edge) => void; - onEdgeUpdateEnd?: (event: MouseEvent, edge: Edge) => void; + onEdgeUpdateStart?: (event: ReactMouseEvent, edge: Edge, handleType: HandleType) => void; + onEdgeUpdateEnd?: (event: MouseEvent, edge: Edge, handleType: HandleType) => void; edgeUpdaterRadius?: number; noDragClassName?: string; noWheelClassName?: string; diff --git a/src/types/edges.ts b/src/types/edges.ts index d480ec15..a5e32b9c 100644 --- a/src/types/edges.ts +++ b/src/types/edges.ts @@ -1,6 +1,6 @@ -import { CSSProperties, HTMLAttributes, ReactNode } from 'react'; +import React, { CSSProperties, HTMLAttributes, ReactNode } from 'react'; import { Connection } from './general'; -import { HandleElement } from './handles'; +import { HandleElement, HandleType } from './handles'; import { Node } from './nodes'; import { Position } from './utils'; @@ -117,8 +117,8 @@ export interface WrapEdgeProps { onMouseMove?: EdgeMouseHandler; onMouseLeave?: EdgeMouseHandler; edgeUpdaterRadius?: number; - onEdgeUpdateStart?: EdgeMouseHandler; - onEdgeUpdateEnd?: (event: MouseEvent, edge: Edge) => void; + onEdgeUpdateStart?: (event: React.MouseEvent, edge: Edge, handleType: HandleType) => void; + onEdgeUpdateEnd?: (event: MouseEvent, edge: Edge, handleType: HandleType) => void; markerStart?: EdgeMarkerType; markerEnd?: EdgeMarkerType; }