feat(reactflowInstance): add toObject function closes #603

example/src/Basic/index.js

@@ -2,7 +2,6 @@ import React, { useState } from 'react';
 
 import ReactFlow, { removeElements, addEdge, isNode, Background } from 'react-flow-renderer';
 
-const onLoad = (reactFlowInstance) => console.log('flow loaded:', reactFlowInstance);
 const onNodeDragStop = (event, node) => console.log('drag stop', node);
 const onElementClick = (event, element) => console.log('click', element);
 
@@ -16,9 +15,11 @@ const initialElements = [
 ];
 
 const BasicFlow = () => {
+  const [rfInstance, setRfInstance] = useState(null);
   const [elements, setElements] = useState(initialElements);
   const onElementsRemove = (elementsToRemove) => setElements((els) => removeElements(elementsToRemove, els));
   const onConnect = (params) => setElements((els) => addEdge(params, els));
+  const onLoad = (reactFlowInstance) => setRfInstance(reactFlowInstance);
 
   const updatePos = () => {
     setElements((elms) => {
@@ -38,6 +39,8 @@ const BasicFlow = () => {
     });
   };
 
+  const logToObject = () => console.log(rfInstance.toObject());
+
   return (
     <ReactFlow
       elements={elements}
@@ -53,9 +56,12 @@ const BasicFlow = () => {
     >
       <Background variant="lines" />
 
-      <button onClick={updatePos} style={{ position: 'absolute', right: 10, top: 30, zIndex: 4 }}>
-        change pos
-      </button>
+      <div style={{ position: 'absolute', right: 10, top: 10, zIndex: 4 }}>
+        <button onClick={updatePos} style={{ marginRight: 5 }}>
+          change pos
+        </button>
+        <button onClick={logToObject}>toObject</button>
+      </div>
     </ReactFlow>
   );
 };

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],
+    };
+  };
+};