feat(renderer): add onChange

src/GraphContext/index.js

@@ -88,6 +88,10 @@ export const Provider = (props) => {
     setHeight(size.height);
   };
 
+  const getNodes = () => {
+    return nodes;
+  }
+
   const graphContext = {
     width,
     height,
@@ -96,6 +100,7 @@ export const Provider = (props) => {
     initD3ZoomState,
     nodes,
     setNodes,
+    getNodes,
     edges,
     setEdges,
     updateNodeData,

src/GraphView/index.js

@@ -1,5 +1,4 @@
 import React, { useEffect, useContext, useRef } from 'react';
-import styled from '@emotion/styled';
 import * as d3Zoom from 'd3-zoom';
 import { select, event } from 'd3-selection';
 import ReactSizeMe from 'react-sizeme';
@@ -8,20 +7,6 @@ import { GraphContext } from '../GraphContext';
 import NodeRenderer from '../NodeRenderer';
 import EdgeRenderer from '../EdgeRenderer';
 
-const GraphViewWrapper = styled.div`
-  width: 100%;
-  height: 100%;
-  position: absolute;
-`;
-
-const ZoomNode = styled.div`
-  width: 100%;
-  height: 100%;
-  position: absolute;
-  top: 0;
-  left: 0;
-`;
-
 const GraphView = (props) => {
   const zoomNode = useRef(null);
   const graphContext = useContext(GraphContext);
@@ -59,12 +44,19 @@ const GraphView = (props) => {
     }
   }, [graphContext.d3ZoomState.initialised]);
 
+  useEffect(() => {
+    props.onChange({
+      nodes: graphContext.nodes,
+      edges: graphContext.edges,
+    });
+  })
+
   return (
-    <GraphViewWrapper>
+    <div className="react-graph__renderer">
       <NodeRenderer />
       <EdgeRenderer width={graphContext.width} height={graphContext.height} />
-      <ZoomNode ref={zoomNode} />
-    </GraphViewWrapper>
+      <ZoomNode className="react-graph__zoomnode" ref={zoomNode} />
+    </div>
   );
 };
 

src/index.js

@@ -1,17 +1,10 @@
 import React, { PureComponent } from 'react';
-import isEqual from 'lodash.isequal';
-import styled from '@emotion/styled';
 
 import { separateElements } from './graph-utils';
 import GraphView from './GraphView';
 import { Provider } from './GraphContext';
 
-const GraphWrapper = styled.div`
-  width: 100%;
-  height: 100%;
-  position: relative;
-  overflow: hidden;
-`;
+import './style.css';
 
 class ReactGraph extends PureComponent {
   render() {
@@ -20,12 +13,12 @@ class ReactGraph extends PureComponent {
 		} = this.props;
 
     return (
-      <GraphWrapper style={style}>
+      <div style={style} className="react-graph">
         <Provider {...separateElements(elements)} onNodeClick={onNodeClick}>
           <GraphView onLoad={onLoad} onMove={onMove} />
           {children}
         </Provider>
-      </GraphWrapper>
+      </div>
     );
   }
 }
@@ -33,7 +26,8 @@ class ReactGraph extends PureComponent {
 ReactGraph.defaultProps = {
 	onNodeClick: () => {},
 	onLoad: () => {},
-	onMove: () => {}
+  onMove: () => {},
+  onChange: () => {}
 };
 
 export default ReactGraph;

src/style.css

@@ -0,0 +1,20 @@
+.react-graph {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  overflow: hidden;
+}
+
+.react-graph__renderer {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+}
+
+.react-graph__zoomnode {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+}