fix(onLoad): use project and getElements in combination with RFPovider closes #285

README.md

@@ -604,7 +604,7 @@ const TransformUpdater = ({ x, y, zoom }) => {
 });
 ```
 
-If you need more control you can wrap the `ReactFlow` component with the `ReactFlowProvider` component in order to be able to call `useStoreState` outside of the `ReactFlow` component.
+If you need more control you can wrap the `ReactFlow` component with the `ReactFlowProvider` component in order to be able to call `useStoreState` and `useStoreActions` outside of the `ReactFlow` component.
 
 # Examples
 

example/src/Provider/index.js

@@ -6,6 +6,7 @@ import Sidebar from './Sidebar';
 import './provider.css';
 
 const onElementClick = (event, element) => console.log('click', element);
+const onLoad = (reactFlowInstance) => console.log('flow loaded:', reactFlowInstance);
 
 const initialElements = [
   { id: '1', type: 'input', data: { label: 'Node 1' }, position: { x: 250, y: 5 } },
@@ -31,6 +32,7 @@ const ProviderFlow = () => {
             onElementClick={onElementClick}
             onConnect={onConnect}
             onElementsRemove={onElementsRemove}
+            onLoad={onLoad}
           >
             <Controls />
           </ReactFlow>

src/container/GraphView/index.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useRef, useCallback, memo, CSSProperties, MouseEvent } from 'react';
 
-import { useStoreState, useStoreActions } from '../../store/hooks';
+import { useStoreState, useStoreActions, useStore } from '../../store/hooks';
 import NodeRenderer from '../NodeRenderer';
 import EdgeRenderer from '../EdgeRenderer';
 import UserSelection from '../../components/UserSelection';
@@ -10,7 +10,7 @@ import useD3Zoom from '../../hooks/useD3Zoom';
 import useGlobalKeyHandler from '../../hooks/useGlobalKeyHandler';
 import useElementUpdater from '../../hooks/useElementUpdater';
 import useResizeHandler from '../../hooks/useResizeHandler';
-import { project, getElements } from '../../utils/graph';
+import { onLoadProject, onLoadGetElements } from '../../utils/graph';
 import {
   Elements,
   NodeTypesType,
@@ -128,6 +128,7 @@ const GraphView = ({
   const fitView = useStoreActions((actions) => actions.fitView);
   const zoom = useStoreActions((actions) => actions.zoom);
   const zoomTo = useStoreActions((actions) => actions.zoomTo);
+  const currentStore = useStore();
 
   const onZoomPaneClick = useCallback(
     (event: React.MouseEvent) => {
@@ -169,8 +170,8 @@ const GraphView = ({
           zoomIn: () => zoom(0.2),
           zoomOut: () => zoom(-0.2),
           zoomTo: (zoomLevel) => zoomTo(zoomLevel),
-          project,
+          project: onLoadProject(currentStore),
-          getElements,
+          getElements: onLoadGetElements(currentStore),
           setTransform: (transform: FlowTransform) =>
             setInitTransform({ x: transform.x, y: transform.y, k: transform.zoom }),
         });

src/store/hooks.ts

@@ -7,3 +7,4 @@ const typedHooks = createTypedHooks<StoreModel>();
 export const useStoreActions = typedHooks.useStoreActions;
 export const useStoreDispatch = typedHooks.useStoreDispatch;
 export const useStoreState = typedHooks.useStoreState;
+export const useStore = typedHooks.useStore;

src/utils/graph.ts

@@ -1,5 +1,6 @@
-import store from '../store';
+import store, { StoreModel } from '../store';
 import { ElementId, Node, Edge, Elements, Transform, XYPosition, Rect, FitViewParams, Box, Connection } from '../types';
+import { Store } from 'easy-peasy';
 
 export const isEdge = (element: Node | Connection | Edge): element is Edge =>
   'id' in element && 'source' in element && 'target' in element;
@@ -77,6 +78,14 @@ export const pointToRendererPoint = (
   return position;
 };
 
+export const onLoadProject = (currentStore: Store<StoreModel>) => {
+  return (position: XYPosition): XYPosition => {
+    const { transform, snapToGrid, snapGrid } = currentStore.getState();
+
+    return pointToRendererPoint(position, transform, snapToGrid, snapGrid);
+  };
+};
+
 export const project = (position: XYPosition): XYPosition => {
   const { transform, snapToGrid, snapGrid } = store.getState();
 
@@ -207,9 +216,7 @@ export const zoomIn = (): void => zoom(0.2);
 
 export const zoomOut = (): void => zoom(-0.2);
 
-export const getElements = (): Elements => {
+const parseElements = (nodes: Node[], edges: Edge[]): Elements => {
-  const { nodes, edges } = store.getState();
-
   return [
     ...nodes.map((node) => {
       const n = { ...node };
@@ -220,3 +227,17 @@ export const getElements = (): Elements => {
     ...edges.map((e) => ({ ...e })),
   ];
 };
+
+export const onLoadGetElements = (currentStore: Store<StoreModel>) => {
+  return (): Elements => {
+    const { nodes = [], edges = [] } = currentStore.getState();
+
+    return parseElements(nodes, edges);
+  };
+};
+
+export const getElements = (): Elements => {
+  const { nodes = [], edges = [] } = store.getState();
+
+  return parseElements(nodes, edges);
+};