Merge pull request #211 from raichuk/feat/lock

Feat/lock

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>

assets/icons/unlock.svg

@@ -0,0 +1 @@
+<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>

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');

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}
@@ -44,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>
   );
 };