message: feat(lock): button enabling and disabling interactivity on Controls plugin
diff: @@ -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}
  