feat(components): add ReactFlowProvider #275

src/additional-components/ReactFlowProvider/index.tsx

@@ -0,0 +1,16 @@
+import React, { useMemo, FC } from 'react';
+import { StoreProvider, createStore } from 'easy-peasy';
+
+import { storeModel } from '../../store';
+
+const ReactFlowProvider: FC = ({ children }) => {
+  const store = useMemo(() => {
+    return createStore(storeModel);
+  }, []);
+
+  return <StoreProvider store={store}>{children}</StoreProvider>;
+};
+
+ReactFlowProvider.displayName = 'ReactFlowProvider';
+
+export default ReactFlowProvider;

src/additional-components/index.ts

@@ -4,3 +4,4 @@
 export { default as MiniMap } from './MiniMap';
 export { default as Controls } from './Controls';
 export { default as Background } from './Background';
+export { default as ReactFlowProvider } from './ReactFlowProvider';

src/components/Nodes/wrapNode.tsx

@@ -2,10 +2,20 @@ import React, { useEffect, useRef, useState, memo, ComponentType, CSSProperties
 import { DraggableCore } from 'react-draggable';
 import cx from 'classnames';
 import { ResizeObserver } from 'resize-observer';
+import { useStoreActions } from '../../store/hooks';
 
 import { Provider } from '../../contexts/NodeIdContext';
-import store from '../../store';
-import { Node, XYPosition, Transform, ElementId, NodeComponentProps, WrapNodeProps } from '../../types';
+import {
+  Node,
+  XYPosition,
+  Transform,
+  ElementId,
+  NodeComponentProps,
+  WrapNodeProps,
+  Elements,
+  Edge,
+  NodePosUpdate,
+} from '../../types';
 
 const getMouseEvent = (evt: MouseEvent | TouchEvent) =>
   typeof TouchEvent !== 'undefined' && evt instanceof TouchEvent ? evt.touches[0] : (evt as MouseEvent);
@@ -19,6 +29,7 @@ interface OnDragStartParams {
   setOffset: (pos: XYPosition) => void;
   transform: Transform;
   position: XYPosition;
+  setSelectedElements: (elms: Elements | Node | Edge) => void;
   onNodeDragStart?: (node: Node) => void;
 }
 
@@ -32,6 +43,7 @@ const onStart = ({
   setOffset,
   transform,
   position,
+  setSelectedElements,
 }: OnDragStartParams): false | void => {
   const startEvt = getMouseEvent(evt);
 
@@ -51,7 +63,7 @@ const onStart = ({
   }
 
   if (selectNodesOnDrag) {
-    store.dispatch.setSelectedElements({ id, type } as Node);
+    setSelectedElements({ id, type } as Node);
   }
 };
 
@@ -61,9 +73,10 @@ interface OnDragParams {
   id: ElementId;
   offset: XYPosition;
   transform: Transform;
+  updateNodePos: (params: NodePosUpdate) => void;
 }
 
-const onDrag = ({ evt, setDragging, id, offset, transform }: OnDragParams): void => {
+const onDrag = ({ evt, setDragging, id, offset, transform, updateNodePos }: OnDragParams): void => {
   const dragEvt = getMouseEvent(evt);
 
   const scaledClient = {
@@ -72,7 +85,7 @@ const onDrag = ({ evt, setDragging, id, offset, transform }: OnDragParams): void
   };
 
   setDragging(true);
-  store.dispatch.updateNodePos({
+  updateNodePos({
     id,
     pos: {
       x: scaledClient.x - transform[0] - offset.x,
@@ -89,6 +102,7 @@ interface OnDragStopParams {
   position: XYPosition;
   data: any;
   selectNodesOnDrag: boolean;
+  setSelectedElements: (elms: Elements | Node | Edge) => void;
   onNodeDragStop?: (node: Node) => void;
   onClick?: (node: Node) => void;
 }
@@ -103,6 +117,7 @@ const onStop = ({
   selectNodesOnDrag,
   onNodeDragStop,
   onClick,
+  setSelectedElements,
 }: OnDragStopParams): void => {
   const node = {
     id,
@@ -113,7 +128,7 @@ const onStop = ({
 
   if (!isDragging) {
     if (!selectNodesOnDrag) {
-      store.dispatch.setSelectedElements({ id, type } as Node);
+      setSelectedElements({ id, type } as Node);
     }
 
     if (onClick) {
@@ -148,6 +163,10 @@ export default (NodeComponent: ComponentType<NodeComponentProps>) => {
       sourcePosition,
       targetPosition,
     }: WrapNodeProps) => {
+      const updateNodeDimensions = useStoreActions((a) => a.updateNodeDimensions);
+      const setSelectedElements = useStoreActions((a) => a.setSelectedElements);
+      const updateNodePos = useStoreActions((a) => a.updateNodePos);
+
       const nodeElement = useRef<HTMLDivElement>(null);
       const [offset, setOffset] = useState({ x: 0, y: 0 });
       const [isDragging, setDragging] = useState(false);
@@ -163,11 +182,11 @@ export default (NodeComponent: ComponentType<NodeComponentProps>) => {
 
       useEffect(() => {
         if (nodeElement.current) {
-          store.dispatch.updateNodeDimensions({ id, nodeElement: nodeElement.current });
+          updateNodeDimensions({ id, nodeElement: nodeElement.current });
 
           const resizeObserver = new ResizeObserver((entries) => {
             for (let _ of entries) {
-              store.dispatch.updateNodeDimensions({ id, nodeElement: nodeElement.current! });
+              updateNodeDimensions({ id, nodeElement: nodeElement.current! });
             }
           });
 
@@ -196,11 +215,23 @@ export default (NodeComponent: ComponentType<NodeComponentProps>) => {
               setOffset,
               transform,
               position,
+              setSelectedElements,
             })
           }
-          onDrag={(evt) => onDrag({ evt: evt as MouseEvent, setDragging, id, offset, transform })}
+          onDrag={(evt) => onDrag({ evt: evt as MouseEvent, setDragging, id, offset, transform, updateNodePos })}
           onStop={() =>
-            onStop({ onNodeDragStop, selectNodesOnDrag, onClick, isDragging, setDragging, id, type, position, data })
+            onStop({
+              onNodeDragStop,
+              selectNodesOnDrag,
+              onClick,
+              isDragging,
+              setDragging,
+              id,
+              type,
+              position,
+              data,
+              setSelectedElements,
+            })
           }
           scale={transform[2]}
           disabled={!isInteractive}

src/container/ReactFlow/Wrapper.tsx

@@ -0,0 +1,21 @@
+import React, { FC } from 'react';
+import { StoreProvider, useStore } from 'easy-peasy';
+
+import store, { StoreModel } from '../../store';
+
+const Wrapper: FC = ({ children }) => {
+  const easyPeasyStore = useStore<StoreModel>();
+  const isWrapepdWithReactFlowProvider = easyPeasyStore?.getState()?.reactFlowVersion;
+
+  if (isWrapepdWithReactFlowProvider) {
+    // we need to wrap it with a fragment because t's not allowed for children to be a ReactNode
+    // https://github.com/DefinitelyTyped/DefinitelyTyped/issues/18051
+    return <>{children}</>;
+  }
+
+  return <StoreProvider store={store}>{children}</StoreProvider>;
+};
+
+Wrapper.displayName = 'ReactFlowWrapper';
+
+export default Wrapper;

src/container/ReactFlow/index.tsx

@@ -1,6 +1,5 @@
 import React, { useMemo, CSSProperties, HTMLAttributes } from 'react';
 import cx from 'classnames';
-import { StoreProvider } from 'easy-peasy';
 
 const nodeEnv: string = process.env.NODE_ENV as string;
 
@@ -19,7 +18,7 @@ import BezierEdge from '../../components/Edges/BezierEdge';
 import StraightEdge from '../../components/Edges/StraightEdge';
 import StepEdge from '../../components/Edges/StepEdge';
 import { createEdgeTypes } from '../EdgeRenderer/utils';
-import store from '../../store';
+import Wrapper from './Wrapper';
 import {
   Elements,
   NodeTypesType,
@@ -92,7 +91,7 @@ const ReactFlow = ({
 
   return (
     <div style={style} className={cx('react-flow', className)}>
-      <StoreProvider store={store}>
+      <Wrapper>
         <GraphView
           onLoad={onLoad}
           onMove={onMove}
@@ -119,7 +118,7 @@ const ReactFlow = ({
         />
         {onSelectionChange && <SelectionListener onSelectionChange={onSelectionChange} />}
         {children}
-      </StoreProvider>
+      </Wrapper>
     </div>
   );
 };

src/custom.d.ts

@@ -3,8 +3,7 @@ declare module '*.css' {
   export default content;
 }
 
-interface SvgrComponent
-  extends React.StatelessComponent<React.SVGAttributes<SVGElement>> {}
+interface SvgrComponent extends React.StatelessComponent<React.SVGAttributes<SVGElement>> {}
 
 declare module '*.svg' {
   const svgUrl: string;
@@ -12,3 +11,5 @@ declare module '*.svg' {
   export default svgUrl;
   export { svgComponent as ReactComponent };
 }
+
+declare var __REACT_FLOW_VERSION__: string;

src/store/index.ts

@@ -19,6 +19,7 @@ import {
   SelectionRect,
   HandleType,
   SetConnectionId,
+  NodePosUpdate,
 } from '../types';
 
 type TransformXYK = {
@@ -27,11 +28,6 @@ type TransformXYK = {
   k: number;
 };
 
-type NodePosUpdate = {
-  id: ElementId;
-  pos: XYPosition;
-};
-
 type NodeDimensionUpdate = {
   id: ElementId;
   nodeElement: HTMLDivElement;
@@ -87,6 +83,8 @@ export interface StoreModel {
 
   isInteractive: boolean;
 
+  reactFlowVersion: string;
+
   onConnect: OnConnectFunc;
 
   setOnConnect: Action<StoreModel, OnConnectFunc>;
@@ -126,7 +124,7 @@ export interface StoreModel {
   unsetUserSelection: Action<StoreModel>;
 }
 
-const storeModel: StoreModel = {
+export const storeModel: StoreModel = {
   width: 0,
   height: 0,
   transform: [0, 0, 1],
@@ -163,6 +161,8 @@ const storeModel: StoreModel = {
 
   isInteractive: true,
 
+  reactFlowVersion: __REACT_FLOW_VERSION__,
+
   onConnect: () => {},
 
   setOnConnect: action((state, onConnect) => {

src/types/index.ts

@@ -203,3 +203,8 @@ export interface EdgeTextProps {
   labelShowBg?: boolean;
   labelBgStyle?: CSSProperties;
 }
+
+export type NodePosUpdate = {
+  id: ElementId;
+  pos: XYPosition;
+};