From e5e64bb490ee209eb38d1470d8eb7d7c113613a7 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:33:52 -0300
Subject: [PATCH 1/6] feat(lock): add lock and unlock svg icons

---
 assets/icons/lock.svg   | 1 +
 assets/icons/unlock.svg | 1 +
 2 files changed, 2 insertions(+)
 create mode 100644 assets/icons/lock.svg
 create mode 100644 assets/icons/unlock.svg

diff --git a/assets/icons/lock.svg b/assets/icons/lock.svg
new file mode 100644
index 00000000..72c66dc7
--- /dev/null
+++ b/assets/icons/lock.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M376 186h-20v-40c0-55-45-100-100-100S156 91 156 146v40h-20c-22.002 0-40 17.998-40 40v200c0 22.002 17.998 40 40 40h240c22.002 0 40-17.998 40-40V226c0-22.002-17.998-40-40-40zM256 368c-22.002 0-40-17.998-40-40s17.998-40 40-40 40 17.998 40 40-17.998 40-40 40zm62.002-182H193.998v-40c0-34.004 28.003-62.002 62.002-62.002 34.004 0 62.002 27.998 62.002 62.002v40z"/></svg>
diff --git a/assets/icons/unlock.svg b/assets/icons/unlock.svg
new file mode 100644
index 00000000..b33b6698
--- /dev/null
+++ b/assets/icons/unlock.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M376 186h-20v-40c0-55-45-100-100-100S156 91 156 146h37.998c0-34.004 28.003-62.002 62.002-62.002 34.004 0 62.002 27.998 62.002 62.002H318v40H136c-22.002 0-40 17.998-40 40v200c0 22.002 17.998 40 40 40h240c22.002 0 40-17.998 40-40V226c0-22.002-17.998-40-40-40zM256 368c-22.002 0-40-17.998-40-40s17.998-40 40-40 40 17.998 40 40-17.998 40-40 40z"/></svg>

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 2/6] 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}

From 7514e2fb86325258769b177f55d251feb529bf50 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebasti=C3=A1n=20Alvarez?= <seba.alvarez16@gmail.com>
Date: Mon, 11 May 2020 03:14:09 -0300
Subject: [PATCH 3/6] feat(lock): update className of lock button based on
 interactivity state

---
 src/plugins/Controls/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/plugins/Controls/index.tsx b/src/plugins/Controls/index.tsx
index 8d528136..2730c61c 100644
--- a/src/plugins/Controls/index.tsx
+++ b/src/plugins/Controls/index.tsx
@@ -34,7 +34,7 @@ export default ({ style, className }: ControlProps) => {
       }}
     >
       <div
-        className="react-flow__controls-button react-flow__controls-lock"
+        className={`react-flow__controls-button react-flow__controls-${isInteractive? 'unlocked' : 'locked' }`}
         onClick={() => setInteractive(!isInteractive)}
       >
         { isInteractive ? <UnlockIcon /> : <LockIcon /> }

From e2a825c100c230d740da3f50e783392ce4085a4f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebasti=C3=A1n=20Alvarez?= <seba.alvarez16@gmail.com>
Date: Mon, 11 May 2020 03:14:43 -0300
Subject: [PATCH 4/6] feat(lock): tests for lock condition before and after
 button click

---
 cypress/integration/flow/empty.spec.js | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/cypress/integration/flow/empty.spec.js b/cypress/integration/flow/empty.spec.js
index 54f514a0..8fffb924 100644
--- a/cypress/integration/flow/empty.spec.js
+++ b/cypress/integration/flow/empty.spec.js
@@ -32,6 +32,14 @@ describe('Empty Flow Rendering', () => {
     cy.get('.react-flow__controls-fitview').click();
   });
 
+  it('uses lock view control', () => {
+    cy.get('.react-flow__controls-unlocked').click();
+    cy.get('.react-flow__controls-unlocked').should('not.exist');
+
+    cy.get('.react-flow__controls-locked').click();
+    cy.get('.react-flow__controls-locked').should('not.exist');
+  })
+
   it('renders an empty mini map', () => {
     cy.get('.react-flow__minimap');
     cy.get('.react-flow__minimap-node').should('not.exist');

From c3e8bfb34b6d7d910583e8e5b80e32bde00566a0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebasti=C3=A1n=20Alvarez?= <seba.alvarez16@gmail.com>
Date: Mon, 11 May 2020 13:38:16 -0300
Subject: [PATCH 5/6] feat(lock): updated unlock icon

---
 assets/icons/unlock.svg | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/assets/icons/unlock.svg b/assets/icons/unlock.svg
index b33b6698..22ed8018 100644
--- a/assets/icons/unlock.svg
+++ b/assets/icons/unlock.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M376 186h-20v-40c0-55-45-100-100-100S156 91 156 146h37.998c0-34.004 28.003-62.002 62.002-62.002 34.004 0 62.002 27.998 62.002 62.002H318v40H136c-22.002 0-40 17.998-40 40v200c0 22.002 17.998 40 40 40h240c22.002 0 40-17.998 40-40V226c0-22.002-17.998-40-40-40zM256 368c-22.002 0-40-17.998-40-40s17.998-40 40-40 40 17.998 40 40-17.998 40-40 40z"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="m376,187l-20,0l0,-40c0,-55 -45,-100 -100,-100c-54.002,23.996 -17.999,27.998 4,31.998c21.999,4 58.002,33.998 58.002,68.002l-0.002,0l0,40l-182,0c-22.002,0 -40,17.998 -40,40l0,200c0,22.002 17.998,40 40,40l240,0c22.002,0 40,-17.998 40,-40l0,-200c0,-22.002 -17.998,-40 -40,-40zm-120,182c-22.002,0 -40,-17.998 -40,-40s17.998,-40 40,-40s40,17.998 40,40s-17.998,40 -40,40z"/></svg>

From c0b80f2d894502faad6d32ea73cec3a1ddb87d32 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebasti=C3=A1n=20Alvarez?= <seba.alvarez16@gmail.com>
Date: Mon, 11 May 2020 13:55:44 -0300
Subject: [PATCH 6/6] feat(lock): Lock/unlock button at bottom

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

diff --git a/src/plugins/Controls/index.tsx b/src/plugins/Controls/index.tsx
index 2730c61c..79519e43 100644
--- a/src/plugins/Controls/index.tsx
+++ b/src/plugins/Controls/index.tsx
@@ -33,12 +33,6 @@ export default ({ style, className }: ControlProps) => {
         ...style,
       }}
     >
-      <div
-        className={`react-flow__controls-button react-flow__controls-${isInteractive? 'unlocked' : 'locked' }`}
-        onClick={() => setInteractive(!isInteractive)}
-      >
-        { isInteractive ? <UnlockIcon /> : <LockIcon /> }
-      </div>
       <div
         className="react-flow__controls-button react-flow__controls-zoomin"
         onClick={zoomIn}
@@ -57,6 +51,12 @@ export default ({ style, className }: ControlProps) => {
       >
         <FitviewIcon />
       </div>
+      <div
+        className={`react-flow__controls-button react-flow__controls-${isInteractive? 'unlocked' : 'locked' }`}
+        onClick={() => setInteractive(!isInteractive)}
+      >
+        { isInteractive ? <UnlockIcon /> : <LockIcon /> }
+      </div>
     </div>
   );
 };