From f500d52f2fc8dec20bae23f186522d28c5917f26 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebasti=C3=A1n=20Alvarez?= <seba.alvarez16@gmail.com>
Date: Mon, 11 May 2020 02:42:50 -0300
Subject: [PATCH] feat(lock): button enabling and disabling interactivity on
 Controls plugin

---
 src/plugins/Controls/index.tsx | 13 +++++++++++++
 1 file changed, 13 insertions(+)

diff --git a/src/plugins/Controls/index.tsx b/src/plugins/Controls/index.tsx
index e2c38712..8d528136 100644
--- a/src/plugins/Controls/index.tsx
+++ b/src/plugins/Controls/index.tsx
@@ -2,9 +2,13 @@ import React, { CSSProperties } from 'react';
 import classnames from 'classnames';
 
 import { fitView, zoomIn, zoomOut } from '../../utils/graph';
+import { useStoreState, useStoreActions } from '../../store/hooks';
+
 import PlusIcon from '../../../assets/icons/plus.svg';
 import MinusIcon from '../../../assets/icons/minus.svg';
 import FitviewIcon from '../../../assets/icons/fitview.svg';
+import LockIcon from '../../../assets/icons/lock.svg';
+import UnlockIcon from '../../../assets/icons/unlock.svg';
 
 const baseStyle: CSSProperties = {
   position: 'absolute',
@@ -18,6 +22,9 @@ interface ControlProps extends React.HTMLAttributes<HTMLDivElement> {}
 export default ({ style, className }: ControlProps) => {
   const mapClasses: string = classnames('react-flow__controls', className);
 
+  const setInteractive = useStoreActions(actions => actions.setInteractive);
+  const { isInteractive } = useStoreState(({ isInteractive }) => ({ isInteractive }));
+
   return (
     <div
       className={mapClasses}
@@ -26,6 +33,12 @@ export default ({ style, className }: ControlProps) => {
         ...style,
       }}
     >
+      <div
+        className="react-flow__controls-button react-flow__controls-lock"
+        onClick={() => setInteractive(!isInteractive)}
+      >
+        { isInteractive ? <UnlockIcon /> : <LockIcon /> }
+      </div>
       <div
         className="react-flow__controls-button react-flow__controls-zoomin"
         onClick={zoomIn}