feat(rfInstance): add getElements function #274

README.md

@@ -126,6 +126,10 @@ Fits view port so that all nodes are visible
 
 `zoomOut = (): void`
 
+### getElements
+
+`getElements = (): Elements`
+
 # Nodes
 
 There are three different [node types](#node-types--custom-nodes) (`default`, `input`, `output`) you can use. The node types differ in the number and types of handles. An input node has only a source handle, a default node has a source and a target and an output node has only a target handle. You create nodes by adding them to the `elements` array of the React Flow component.

example/src/Stress/index.js

@@ -3,7 +3,11 @@ import React, { useState } from 'react';
 import ReactFlow, { removeElements, addEdge, MiniMap, isNode, Controls, Background } from 'react-flow-renderer';
 import { getElements } from './utils';
 
-const onLoad = reactFlowInstance => reactFlowInstance.fitView();
+const onLoad = reactFlowInstance => {
+  reactFlowInstance.fitView();
+
+  console.log(reactFlowInstance.getElements());
+}
 
 const initialElements = getElements(10, 10);
 

src/container/GraphView/index.tsx

@@ -11,7 +11,7 @@ import useD3Zoom from '../../hooks/useD3Zoom';
 import useGlobalKeyHandler from '../../hooks/useGlobalKeyHandler';
 import useElementUpdater from '../../hooks/useElementUpdater';
 import { getDimensions } from '../../utils';
-import { fitView, zoomIn, zoomOut, project } from '../../utils/graph';
+import { fitView, zoomIn, zoomOut, project, getElements } from '../../utils/graph';
 import {
   Elements,
   NodeTypesType,
@@ -133,6 +133,7 @@ const GraphView = memo(
           zoomIn,
           zoomOut,
           project,
+          getElements,
         });
       }
     }, [d3Initialised, onLoad]);

src/types/index.ts

@@ -144,6 +144,7 @@ type OnLoadParams = {
   zoomOut: () => void;
   fitView: FitViewFunc;
   project: ProjectFunc;
+  getElements: () => Elements;
 };
 
 export type OnLoadFunc = (params: OnLoadParams) => void;

src/utils/graph.ts

@@ -210,3 +210,17 @@ const zoom = (amount: number): void => {
 export const zoomIn = (): void => zoom(0.2);
 
 export const zoomOut = (): void => zoom(-0.2);
+
+export const getElements = (): Elements => {
+  const { nodes, edges } = store.getState();
+
+  return [
+    ...nodes.map((node) => {
+      const n = { ...node };
+
+      delete n.__rg;
+      return n;
+    }),
+    ...edges.map((e) => ({ ...e })),
+  ];
+};