feat(plugins): add controls

examples/advanced/scripts/ExampleGraph.js

@@ -1,6 +1,6 @@
 import React, { PureComponent } from 'react';
 
-import Graph, { isEdge, removeElements, getOutgoers, MiniMap } from '../../../src';
+import Graph, { isEdge, removeElements, getOutgoers, MiniMap, Controls } from '../../../src';
 
 import SpecialNode from './SpecialNode';
 import InputNode from './InputNode';
@@ -156,6 +156,7 @@ class App extends PureComponent {
             return '#FFCC00';
           }}
         />
+        <Controls />
         <button
           type="button"
           onClick={() => this.onAdd()}
@@ -163,28 +164,6 @@ class App extends PureComponent {
         >
           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>
     );
   }

src/Plugins/Controls/index.js

@@ -0,0 +1,44 @@
+import React from 'react';
+import classnames from 'classnames';
+
+import { fitView, zoomIn, zoomOut } from '../../utils/graph';
+
+const baseStyle = {
+  position: 'absolute',
+  zIndex: 5,
+  bottom: 10,
+  left: 10,
+};
+
+export default ({ style, className }) => {
+  const mapClasses = classnames('react-flow__controls', className);
+
+  return (
+    <div
+      className={mapClasses}
+      style={{
+        ...baseStyle,
+        ...style
+      }}
+    >
+      <div
+        className="react-flow__controls-button react-flow__controls-zoomin"
+        onClick={zoomIn}
+      >
+        +
+      </div>
+      <div
+        className="react-flow__controls-button  react-flow__controls-zoomout"
+        onClick={zoomOut}
+      >
+        -
+      </div>
+      <div
+        className="react-flow__controls-button  react-flow__controls-fitview"
+        onClick={fitView}
+      >
+        @
+      </div>
+    </div>
+  );
+};

src/index.js

@@ -4,6 +4,7 @@ export default ReactFlow;
 
 export { default as Handle } from './components/Handle';
 export { default as MiniMap } from './plugins/MiniMap';
+export { default as Controls } from './plugins/Controls';
 
 export {
   isNode,

src/style.css

@@ -149,4 +149,19 @@
     border: 1px dotted rgba(0, 89, 220, 0.8);
     pointer-events: all;
   }
+}
+
+.react-flow__controls-button {
+  background: #f8f8f8;
+  border: 1px solid #eee;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 24px;
+  height: 24px;
+  cursor: pointer;
+}
+
+.react-flow__controls-button:hover {
+  background: #eee;
 }