From 3f3a79b5f6fae5104eca2423e4769e33e4006b06 Mon Sep 17 00:00:00 2001
From: moklick <info@moritzklack.com>
Date: Tue, 2 Jun 2020 16:06:08 +0200
Subject: [PATCH] feat(rfInstance): add getElements function #274

---
 README.md                         |  4 ++++
 example/src/Stress/index.js       |  6 +++++-
 src/container/GraphView/index.tsx |  3 ++-
 src/types/index.ts                |  1 +
 src/utils/graph.ts                | 14 ++++++++++++++
 5 files changed, 26 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index f176c9a5..90d52434 100644
--- a/README.md
+++ b/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.
diff --git a/example/src/Stress/index.js b/example/src/Stress/index.js
index 7fecc9bb..c64b8b99 100644
--- a/example/src/Stress/index.js
+++ b/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);
 
diff --git a/src/container/GraphView/index.tsx b/src/container/GraphView/index.tsx
index 36ab0396..77bf666d 100644
--- a/src/container/GraphView/index.tsx
+++ b/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]);
diff --git a/src/types/index.ts b/src/types/index.ts
index 0a0ca976..046a0971 100644
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -144,6 +144,7 @@ type OnLoadParams = {
   zoomOut: () => void;
   fitView: FitViewFunc;
   project: ProjectFunc;
+  getElements: () => Elements;
 };
 
 export type OnLoadFunc = (params: OnLoadParams) => void;
diff --git a/src/utils/graph.ts b/src/utils/graph.ts
index 543d540d..65c06be9 100644
--- a/src/utils/graph.ts
+++ b/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 })),
+  ];
+};