Merge pull request #452 from wbkd/develop

Develop

README.md

@@ -91,6 +91,7 @@ const BasicFlow = () => <ReactFlow elements={elements} />;
 - `onConnect({ source, target })`: called when user connects two nodes
 - `onConnectStart(event: MouseEvent, { nodeId, handleType })`: called when user starts to drag connection line
 - `onConnectStop(event: MouseEvent)`: called when user stops to drag connection line
+- `onConnectEnd(event: MouseEvent)`: called after user stops or connects nodes
 - `onLoad(reactFlowInstance)`: called after flow is initialized
 - `onMove()`: called when user is panning or zooming
 - `onMoveStart()`: called when user starts panning or zooming

example/package.json

@@ -5,8 +5,8 @@
   "dependencies": {
     "react-dom": "^16.13.1",
     "react-flow-renderer": "file:../",
-    "react-router-dom": "^5.1.2",
-    "react-scripts": "3.4.1"
+    "react-router-dom": "^5.2.0",
+    "react-scripts": "3.4.3"
   },
   "scripts": {
     "start": "react-scripts start",

example/src/Validation/index.js

@@ -15,6 +15,7 @@ const onLoad = (reactFlowInstance) => reactFlowInstance.fitView();
 const isValidConnection = (connection) => connection.target === 'B';
 const onConnectStart = (event, { nodeId, handleType }) => console.log('on connect start', { nodeId, handleType });
 const onConnectStop = (event) => console.log('on connect stop', event);
+const onConnectEnd = (event) => console.log('on connect end', event);
 
 const CustomInput = () => (
   <>
@@ -53,6 +54,7 @@ const HorizontalFlow = () => {
       nodeTypes={nodeTypes}
       onConnectStart={onConnectStart}
       onConnectStop={onConnectStop}
+      onConnectEnd={onConnectEnd}
     />
   );
 };

src/components/Handle/BaseHandle.tsx

@@ -9,6 +9,7 @@ import {
   OnConnectFunc,
   OnConnectStartFunc,
   OnConnectStopFunc,
+  OnConnectEndFunc,
   Connection,
   SetConnectionId,
 } from '../../types';
@@ -22,6 +23,7 @@ interface BaseHandleProps {
   onConnect: OnConnectFunc;
   onConnectStart?: OnConnectStartFunc;
   onConnectStop?: OnConnectStopFunc;
+  onConnectEnd?: OnConnectEndFunc;
   position: Position;
   setConnectionNodeId: SetSourceIdFunc;
   setPosition: (pos: XYPosition) => void;
@@ -47,7 +49,8 @@ function onMouseDown(
   isTarget: boolean,
   isValidConnection: ValidConnectionFunc,
   onConnectStart?: OnConnectStartFunc,
-  onConnectStop?: OnConnectStopFunc
+  onConnectStop?: OnConnectStopFunc,
+  onConnectEnd?: OnConnectEndFunc
 ): void {
   const reactFlowNode = document.querySelector('.react-flow');
 
@@ -142,6 +145,10 @@ function onMouseDown(
       onConnect(connection);
     }
 
+    if (onConnectEnd) {
+      onConnectEnd(event);
+    }
+
     resetRecentHandle();
     setConnectionNodeId({ connectionNodeId: null, connectionHandleType: null });
 
@@ -159,6 +166,7 @@ const BaseHandle = ({
   onConnect,
   onConnectStart,
   onConnectStop,
+  onConnectEnd,
   position,
   setConnectionNodeId,
   setPosition,
@@ -196,7 +204,8 @@ const BaseHandle = ({
           isTarget,
           isValidConnection,
           onConnectStart,
-          onConnectStop
+          onConnectStop,
+          onConnectEnd
         )
       }
       {...rest}

src/components/Handle/index.tsx

@@ -23,6 +23,8 @@ const Handle = ({
   const onConnectAction = useStoreState((state) => state.onConnect);
   const onConnectStart = useStoreState((state) => state.onConnectStart);
   const onConnectStop = useStoreState((state) => state.onConnectStop);
+  const onConnectEnd = useStoreState((state) => state.onConnectEnd);
+
   const onConnectExtended = (params: Connection) => {
     if (onConnectAction) {
       onConnectAction(params);
@@ -44,6 +46,7 @@ const Handle = ({
       onConnect={onConnectExtended}
       onConnectStart={onConnectStart}
       onConnectStop={onConnectStop}
+      onConnectEnd={onConnectEnd}
       type={type}
       position={position}
       isValidConnection={isValidConnection}

src/components/Nodes/wrapNode.tsx

@@ -186,6 +186,7 @@ export default (NodeComponent: ComponentType<NodeComponentProps>) => {
     sourcePosition,
     targetPosition,
     isHidden,
+    isInitialized,
   }: WrapNodeProps) => {
     const updateNodeDimensions = useStoreActions((actions) => actions.updateNodeDimensions);
     const setSelectedElements = useStoreActions((actions) => actions.setSelectedElements);
@@ -282,6 +283,7 @@ export default (NodeComponent: ComponentType<NodeComponentProps>) => {
       zIndex: selected ? 10 : 3,
       transform: `translate(${xPos}px,${yPos}px)`,
       pointerEvents: isSelectable || isDraggable || onClick ? 'all' : 'none',
+      opacity: isInitialized ? 1 : 0, // prevents jumping of nodes on start
       ...style,
     };
 

src/container/GraphView/index.tsx

@@ -23,6 +23,7 @@ import {
   FlowTransform,
   OnConnectStartFunc,
   OnConnectStopFunc,
+  OnConnectEndFunc,
 } from '../../types';
 
 export interface GraphViewProps {
@@ -38,6 +39,7 @@ export interface GraphViewProps {
   onConnect?: (connection: Connection | Edge) => void;
   onConnectStart?: OnConnectStartFunc;
   onConnectStop?: OnConnectStopFunc;
+  onConnectEnd?: OnConnectEndFunc;
   onLoad?: OnLoadFunc;
   onMove?: (flowTransform?: FlowTransform) => void;
   onMoveStart?: (flowTransform?: FlowTransform) => void;
@@ -91,6 +93,7 @@ const GraphView = ({
   onConnect,
   onConnectStart,
   onConnectStop,
+  onConnectEnd,
   snapToGrid,
   snapGrid,
   onlyRenderVisibleNodes,
@@ -119,6 +122,7 @@ const GraphView = ({
   const setOnConnect = useStoreActions((actions) => actions.setOnConnect);
   const setOnConnectStart = useStoreActions((actions) => actions.setOnConnectStart);
   const setOnConnectStop = useStoreActions((actions) => actions.setOnConnectStop);
+  const setOnConnectEnd = useStoreActions((actions) => actions.setOnConnectEnd);
   const setSnapGrid = useStoreActions((actions) => actions.setSnapGrid);
   const setNodesDraggable = useStoreActions((actions) => actions.setNodesDraggable);
   const setNodesConnectable = useStoreActions((actions) => actions.setNodesConnectable);
@@ -209,6 +213,12 @@ const GraphView = ({
     }
   }, [onConnectStop]);
 
+  useEffect(() => {
+    if (onConnectEnd) {
+      setOnConnectEnd(onConnectEnd);
+    }
+  }, [onConnectEnd]);
+
   useEffect(() => {
     setSnapGrid({ snapToGrid, snapGrid });
   }, [snapToGrid, snapGrid]);

src/container/NodeRenderer/index.tsx

@@ -37,6 +37,7 @@ function renderNode(
   const isDraggable = !!(node.draggable || (nodesDraggable && typeof node.draggable === 'undefined'));
   const isSelectable = !!(node.selectable || (elementsSelectable && typeof node.selectable === 'undefined'));
   const isConnectable = !!(node.connectable || (nodesConnectable && typeof node.connectable === 'undefined'));
+  const isInitialized = node.__rf.width !== null && node.__rf.height !== null;
 
   return (
     <NodeComponent
@@ -64,6 +65,7 @@ function renderNode(
       targetPosition={node.targetPosition}
       selectNodesOnDrag={props.selectNodesOnDrag}
       isHidden={node.isHidden}
+      isInitialized={isInitialized}
     />
   );
 }

src/container/ReactFlow/index.tsx

@@ -29,6 +29,7 @@ import {
   FlowTransform,
   OnConnectStartFunc,
   OnConnectStopFunc,
+  OnConnectEndFunc,
 } from '../../types';
 
 import '../../style.css';
@@ -46,6 +47,7 @@ export interface ReactFlowProps extends Omit<HTMLAttributes<HTMLDivElement>, 'on
   onConnect?: (connection: Edge | Connection) => void;
   onConnectStart?: OnConnectStartFunc;
   onConnectStop?: OnConnectStopFunc;
+  onConnectEnd?: OnConnectEndFunc;
   onLoad?: OnLoadFunc;
   onMove?: (flowTransform?: FlowTransform) => void;
   onMoveStart?: (flowTransform?: FlowTransform) => void;
@@ -93,6 +95,7 @@ const ReactFlow = ({
   onConnect,
   onConnectStart,
   onConnectStop,
+  onConnectEnd,
   onNodeMouseEnter,
   onNodeMouseMove,
   onNodeMouseLeave,
@@ -153,6 +156,7 @@ const ReactFlow = ({
           onConnect={onConnect}
           onConnectStart={onConnectStart}
           onConnectStop={onConnectStop}
+          onConnectEnd={onConnectEnd}
           snapToGrid={snapToGrid}
           snapGrid={snapGrid}
           onlyRenderVisibleNodes={onlyRenderVisibleNodes}

src/store/index.ts

@@ -20,6 +20,7 @@ import {
   OnConnectFunc,
   OnConnectStartFunc,
   OnConnectStopFunc,
+  OnConnectEndFunc,
   SelectionRect,
   HandleType,
   SetConnectionId,
@@ -86,10 +87,12 @@ export interface StoreModel {
   onConnect?: OnConnectFunc;
   onConnectStart?: OnConnectStartFunc;
   onConnectStop?: OnConnectStopFunc;
+  onConnectEnd?: OnConnectEndFunc;
 
   setOnConnect: Action<StoreModel, OnConnectFunc>;
   setOnConnectStart: Action<StoreModel, OnConnectStartFunc>;
   setOnConnectStop: Action<StoreModel, OnConnectStopFunc>;
+  setOnConnectEnd: Action<StoreModel, OnConnectEndFunc>;
 
   setElements: Action<StoreModel, Elements>;
 
@@ -186,6 +189,9 @@ export const storeModel: StoreModel = {
   setOnConnectStop: action((state, onConnectStop) => {
     state.onConnectStop = onConnectStop;
   }),
+  setOnConnectEnd: action((state, onConnectEnd) => {
+    state.onConnectEnd = onConnectEnd;
+  }),
 
   setElements: action((state, elements) => {
     state.elements = elements;

src/style.css

@@ -117,7 +117,6 @@
 .react-flow__node-default.selectable,
 .react-flow__node-input.selectable,
 .react-flow__node-output.selectable {
-
   &.selected,
   &.selected:hover {
     box-shadow: 0 0 0 1px #333;
@@ -194,4 +193,4 @@
   right: 0;
   top: 50%;
   transform: translate(0, -50%);
-}
+}

src/types/index.ts

@@ -171,6 +171,7 @@ export interface WrapNodeProps {
   sourcePosition?: Position;
   targetPosition?: Position;
   isHidden?: boolean;
+  isInitialized?: boolean;
 }
 
 export type FitViewParams = {
@@ -210,6 +211,7 @@ export type OnConnectStartParams = {
 };
 export type OnConnectStartFunc = (event: ReactMouseEvent, params: OnConnectStartParams) => void;
 export type OnConnectStopFunc = (event: MouseEvent) => void;
+export type OnConnectEndFunc = (event: MouseEvent) => void;
 
 export type SetConnectionId = {
   connectionNodeId: ElementId | null;