feat(plugins): add controls

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;
 }