feat(rg): add zoom functions

example/SimpleGraph.js

@@ -39,6 +39,7 @@ class App extends PureComponent {
     }
 
     this.state = {
+      graphLoaded: false,
       elements: [
         { id: '1', type: 'input', data: { label: 'Tests' }, position: { x: 250, y: 5 } },
         { id: '2', data: { label: 'This is a node This is a node This is a node This is a node' }, position: { x: 100, y: 100 } },
@@ -59,7 +60,12 @@ class App extends PureComponent {
     this.graphInstance = graphInstance;
     console.log('graph loaded:', this.graphInstance);
 
+    window.rg = graphInstance;
     this.graphInstance.fitView();
+
+    this.setState({
+      graphLoaded: true
+    });
   }
 
   onChange(elements) {
@@ -70,9 +76,6 @@ class App extends PureComponent {
   }
 
   onFitView() {
-    if (!this.graphInstance) {
-      return false;
-    }
     this.graphInstance.fitView();
   }
 
@@ -80,12 +83,21 @@ class App extends PureComponent {
     this.setState(prevState => ({
       ...prevState,
       elements: prevState.elements.concat({
-        data: { id: prevState.elements.length + 1, label: 'Added node' },
+        id: prevState.elements.length + 1,
+        data: { label: 'Added node' },
         position: { x: Math.random() * window.innerWidth, y: Math.random() * window.innerHeight }
       })
     }));
   }
 
+  onZoomIn() {
+    this.graphInstance.zoomIn();
+  }
+
+  onZoomOut() {
+    this.graphInstance.zoomOut();
+  }
+
   render() {
     return (
       <Graph
@@ -101,18 +113,33 @@ class App extends PureComponent {
       >
         <button
           type="button"
-          style={{ position: 'absolute', right: '10px', bottom: '10px', zIndex: 4 }}
-          onClick={() => this.onFitView()}
-        >
-          fit
-        </button>
-        <button
-          type="button"
-          style={{ position: 'absolute', bottom: '10px', left: '10px', zIndex: 4 }}
           onClick={() => this.onAdd()}
+          style={{ position: 'absolute', right: '10px', bottom: '10px', zIndex: 4 }}
         >
           add
         </button>
+        {this.state.graphLoaded && (
+          <div className="controls">
+            <button
+              type="button"
+              onClick={() => this.onFitView()}
+            >
+              fit
+            </button>
+            <button
+              type="button"
+              onClick={() => this.onZoomIn()}
+            >
+              zoom in
+            </button>
+            <button
+              type="button"
+              onClick={() => this.onZoomOut()}
+            >
+              zoom out
+            </button>
+          </div>
+        )}
       </Graph>
     );
   }