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

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,
-          getElements,
+          project: onLoadProject(currentStore),
+          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 { nodes, edges } = store.getState();
-
+const parseElements = (nodes: Node[], edges: Edge[]): Elements => {
   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);
+};