Merge pull request #211 from raichuk/feat/lock

Feat/lock

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