feat(reactflowInstance): add toObject function closes #603

src/container/GraphView/index.tsx

@@ -5,7 +5,7 @@ import FlowRenderer from '../FlowRenderer';
 import NodeRenderer from '../NodeRenderer';
 import EdgeRenderer from '../EdgeRenderer';
 import useElementUpdater from '../../hooks/useElementUpdater';
-import { onLoadProject, onLoadGetElements } from '../../utils/graph';
+import { onLoadProject, onLoadGetElements, onLoadToObject } from '../../utils/graph';
 import {
   Elements,
   NodeTypesType,
@@ -163,6 +163,7 @@ const GraphView = ({
           getElements: onLoadGetElements(currentStore),
           setTransform: (transform: FlowTransform) =>
             setInitTransform({ x: transform.x, y: transform.y, k: transform.zoom }),
+          toObject: onLoadToObject(currentStore),
         });
       }
 

src/types/index.ts

@@ -229,8 +229,16 @@ export interface WrapNodeProps {
 export type FitViewParams = {
   padding: number;
 };
+
+export type FlowExportObject = {
+  elements: Elements;
+  position: [number, number];
+  zoom: number;
+};
+
 export type FitViewFunc = (fitViewOptions?: FitViewParams) => void;
 export type ProjectFunc = (position: XYPosition) => XYPosition;
+export type ToObjectFunc = () => FlowExportObject;
 
 export type OnLoadParams = {
   zoomIn: () => void;
@@ -240,6 +248,7 @@ export type OnLoadParams = {
   project: ProjectFunc;
   getElements: () => Elements;
   setTransform: (transform: FlowTransform) => void;
+  toObject: ToObjectFunc;
 };
 
 export type OnLoadFunc = (params: OnLoadParams) => void;

src/utils/graph.ts

@@ -1,6 +1,17 @@
 import { Store } from 'easy-peasy';
 import { StoreModel } from '../store';
-import { ElementId, Node, Edge, Elements, Transform, XYPosition, Rect, Box, Connection } from '../types';
+import {
+  ElementId,
+  Node,
+  Edge,
+  Elements,
+  Transform,
+  XYPosition,
+  Rect,
+  Box,
+  Connection,
+  FlowExportObject,
+} from '../types';
 
 export const isEdge = (element: Node | Connection | Edge): element is Edge =>
   'id' in element && 'source' in element && 'target' in element;
@@ -236,3 +247,15 @@ export const onLoadGetElements = (currentStore: Store<StoreModel>) => {
     return parseElements(nodes, edges);
   };
 };
+
+export const onLoadToObject = (currentStore: Store<StoreModel>) => {
+  return (): FlowExportObject => {
+    const { nodes = [], edges = [], transform } = currentStore.getState();
+
+    return {
+      elements: parseElements(nodes, edges),
+      position: [transform[0], transform[1]],
+      zoom: transform[2],
+    };
+  };
+};