@yorab/react-paint 0.6.4 → 0.7.1

package/dist/hooks/useDrag.js

@@ -1,43 +1,35 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = void 0;
-
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+exports.default = void 0;
 
 var _react = require("react");
 
-var useDrag = function useDrag(_ref) {
-  var _ref$disabled = _ref.disabled,
-      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-      ref = _ref.ref,
-      shape = _ref.shape,
-      layoutDragging = _ref.layoutDragging,
-      setLayoutDragging = _ref.setLayoutDragging,
-      handleSelect = _ref.handleSelect,
-      onMoveShapes = _ref.onMoveShapes;
-
-  var _useState = (0, _react.useState)(false),
-      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
-      isOver = _useState2[0],
-      setIsOver = _useState2[1];
-
-  (0, _react.useEffect)(function () {
+const useDrag = _ref => {
+  let {
+    disabled = false,
+    ref,
+    shape,
+    layoutDragging,
+    setLayoutDragging,
+    handleSelect,
+    onMoveShapes
+  } = _ref;
+  const [isOver, setIsOver] = (0, _react.useState)(false);
+  (0, _react.useEffect)(() => {
     if (!layoutDragging) setIsOver(false);
   }, [layoutDragging]);
-  (0, _react.useEffect)(function () {
-    var layoutRef = ref.current;
+  (0, _react.useEffect)(() => {
+    const layoutRef = ref.current;
     if (!layoutRef) return;
 
-    var handleDragEnd = function handleDragEnd() {
+    const handleDragEnd = () => {
       setLayoutDragging(undefined);
     };
 
-    var handleDragOver = function handleDragOver(e) {
+    const handleDragOver = e => {
       if (e.preventDefault) {
         e.preventDefault();
       }
@@ -45,7 +37,7 @@ var useDrag = function useDrag(_ref) {
       return false;
     };
 
-    var handleDragStart = function handleDragStart(e) {
+    const handleDragStart = e => {
       handleSelect(shape);
       if (!e.dataTransfer) return;
       e.dataTransfer.effectAllowed = 'move';
@@ -53,15 +45,15 @@ var useDrag = function useDrag(_ref) {
       setLayoutDragging(shape.id);
     };
 
-    var handleDragEnter = function handleDragEnter() {
+    const handleDragEnter = () => {
       layoutDragging !== shape.id && setIsOver(true);
     };
 
-    var handleDragLeave = function handleDragLeave() {
+    const handleDragLeave = () => {
       setIsOver(false);
     };
 
-    var handleDrop = function handleDrop(e) {
+    const handleDrop = e => {
       e.stopPropagation(); // stops the browser from redirecting.
 
       if (e.dataTransfer) {
@@ -80,7 +72,7 @@ var useDrag = function useDrag(_ref) {
       layoutRef.addEventListener('drop', handleDrop);
     }
 
-    return function () {
+    return () => {
       if (!disabled) {
         layoutRef.removeEventListener('dragstart', handleDragStart);
         layoutRef.removeEventListener('dragend', handleDragEnd);
@@ -92,9 +84,9 @@ var useDrag = function useDrag(_ref) {
     };
   }, [disabled, ref, shape, setLayoutDragging, handleSelect, onMoveShapes, layoutDragging]);
   return {
-    isOver: isOver
+    isOver
   };
 };
 
 var _default = useDrag;
-exports["default"] = _default;
+exports.default = _default;

package/dist/hooks/useDrawableCanvas.js

@@ -5,124 +5,111 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = void 0;
-
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+exports.default = void 0;
 
 var _react = require("react");
 
-var _fp = _interopRequireDefault(require("lodash/fp"));
-
 var _selection = require("../utils/selection");
 
-var _Shapes = require("../types/Shapes");
-
 var _intersect = require("../utils/intersect");
 
-var _Mode = require("../types/Mode");
-
 var _transform = require("../utils/transform");
 
-var _data = require("../utils/data");
+var _tools = require("../constants/tools");
 
-var _tools = require("../types/tools");
+var _useDoubleClick = _interopRequireDefault(require("./useDoubleClick"));
 
-var _tools2 = require("../constants/tools");
+var _shapes = require("../constants/shapes");
 
-var _useDoubleClick2 = _interopRequireDefault(require("./useDoubleClick"));
+var _shapes2 = require("../utils/shapes");
 
-var handleMove = function handleMove(e, canvasRef, activeTool, canvasOffset, selectedShape, selectionMode, canvasOffsetStartPosition, width, height, scaleRatio, setHoverMode, updateSingleShape, setCanvasOffset, setSelectedShape, selectionPadding) {
-  if (activeTool.type === _tools.ActionsEnum.move && canvasOffsetStartPosition !== undefined) {
-    var _cursorPosition = (0, _intersect.getCursorPosition)(e, canvasRef.current, width, height, scaleRatio);
+var _brush = require("../utils/shapes/brush");
 
-    setCanvasOffset([_cursorPosition[0] - canvasOffsetStartPosition[0], _cursorPosition[1] - canvasOffsetStartPosition[1]]);
+const handleMove = (e, canvasRef, activeTool, gridFormat, canvasOffset, selectedShape, selectionMode, canvasOffsetStartPosition, width, height, scaleRatio, setHoverMode, updateSingleShape, setCanvasOffset, setSelectedShape, selectionPadding, isShiftPressed) => {
+  if (activeTool.type === 'move' && canvasOffsetStartPosition !== undefined) {
+    const cursorPosition = (0, _intersect.getCursorPosition)(e, canvasRef.current, width, height, scaleRatio);
+    setCanvasOffset([cursorPosition[0] - canvasOffsetStartPosition[0], cursorPosition[1] - canvasOffsetStartPosition[1]]);
   }
 
   if (selectedShape == undefined) return;
   if (selectedShape.locked) return;
-  var cursorPosition = (0, _intersect.getCursorPosition)(e, canvasRef.current, width, height, scaleRatio);
+  const cursorPosition = (0, _intersect.getCursorPosition)(e, canvasRef.current, width, height, scaleRatio);
 
-  if (selectionMode.mode === _Mode.SelectionModeLib["default"] || selectionMode.mode === _Mode.SelectionModeLib.textedition) {
-    var positionIntersection = (0, _intersect.checkPositionIntersection)(selectedShape, cursorPosition, canvasOffset, selectionPadding, scaleRatio, true) || {
-      mode: _Mode.SelectionModeLib["default"]
+  if (selectionMode.mode === 'default' || selectionMode.mode === 'textedition') {
+    const positionIntersection = (0, _intersect.checkPositionIntersection)(selectedShape, cursorPosition, canvasOffset, selectionPadding, scaleRatio, true) || {
+      mode: 'default'
     };
     setHoverMode(positionIntersection);
   } else {
     var _canvasRef$current;
 
-    var ctx = (_canvasRef$current = canvasRef.current) === null || _canvasRef$current === void 0 ? void 0 : _canvasRef$current.getContext('2d');
+    const ctx = (_canvasRef$current = canvasRef.current) === null || _canvasRef$current === void 0 ? void 0 : _canvasRef$current.getContext('2d');
     if (!ctx) return;
-
-    var _newShape = (0, _transform.transformShape)(ctx, selectedShape, cursorPosition, canvasOffset, selectionMode, selectionPadding);
-
-    updateSingleShape(_newShape);
-    setSelectedShape(_newShape);
+    const newShape = (0, _transform.transformShape)(ctx, selectedShape, cursorPosition, gridFormat, canvasOffset, selectionMode, selectionPadding, isShiftPressed);
+    updateSingleShape(newShape);
+    setSelectedShape(newShape);
   }
 };
 
-var useDrawableCanvas = function useDrawableCanvas(_ref) {
-  var _ref$disabled = _ref.disabled,
-      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-      addShape = _ref.addShape,
-      canvasSize = _ref.canvasSize,
-      drawCanvasRef = _ref.drawCanvasRef,
-      setActiveTool = _ref.setActiveTool,
-      shapes = _ref.shapes,
-      selectionMode = _ref.selectionMode,
-      activeTool = _ref.activeTool,
-      isInsideComponent = _ref.isInsideComponent,
-      setCanvasOffset = _ref.setCanvasOffset,
-      selectedShape = _ref.selectedShape,
-      selectionCanvasRef = _ref.selectionCanvasRef,
-      canvasOffsetStartPosition = _ref.canvasOffsetStartPosition,
-      setSelectedShape = _ref.setSelectedShape,
-      setCanvasOffsetStartPosition = _ref.setCanvasOffsetStartPosition,
-      updateSingleShape = _ref.updateSingleShape,
-      canvasOffset = _ref.canvasOffset,
-      saveShapes = _ref.saveShapes,
-      setSelectionMode = _ref.setSelectionMode,
-      selectionPadding = _ref.selectionPadding;
-  var width = canvasSize.width,
-      height = canvasSize.height,
-      scaleRatio = canvasSize.scaleRatio;
-
-  var _useState = (0, _react.useState)({
-    mode: _Mode.SelectionModeLib["default"]
-  }),
-      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
-      hoverMode = _useState2[0],
-      setHoverMode = _useState2[1];
-
-  var _useDoubleClick = (0, _useDoubleClick2["default"])(),
-      registerDoubleClickEvent = _useDoubleClick.registerDoubleClickEvent,
-      unRegisterDoubleClickEvent = _useDoubleClick.unRegisterDoubleClickEvent;
-
-  (0, _react.useEffect)(function () {
-    var handleMouseMove = function handleMouseMove(e) {
-      return window.requestAnimationFrame(function () {
-        return handleMove(e, selectionCanvasRef, activeTool, canvasOffset, selectedShape, selectionMode, canvasOffsetStartPosition, width, height, scaleRatio, setHoverMode, updateSingleShape, setCanvasOffset, setSelectedShape, selectionPadding);
-      });
-    };
+const useDrawableCanvas = _ref => {
+  let {
+    disabled = false,
+    addShape,
+    canvasSize,
+    drawCanvasRef,
+    setActiveTool,
+    shapes,
+    selectionMode,
+    activeTool,
+    isInsideComponent,
+    setCanvasOffset,
+    selectedShape,
+    selectionCanvasRef,
+    canvasOffsetStartPosition,
+    setSelectedShape,
+    setCanvasOffsetStartPosition,
+    updateSingleShape,
+    gridFormat,
+    canvasOffset,
+    saveShapes,
+    setSelectionMode,
+    selectionPadding,
+    isShiftPressed
+  } = _ref;
+  const {
+    width,
+    height,
+    scaleRatio
+  } = canvasSize;
+  const [hoverMode, setHoverMode] = (0, _react.useState)({
+    mode: 'default'
+  });
+  const {
+    registerDoubleClickEvent,
+    unRegisterDoubleClickEvent
+  } = (0, _useDoubleClick.default)();
+  (0, _react.useEffect)(() => {
+    const handleMouseMove = e => window.requestAnimationFrame(() => handleMove(e, selectionCanvasRef, activeTool, gridFormat, canvasOffset, selectedShape, selectionMode, canvasOffsetStartPosition, width, height, scaleRatio, setHoverMode, updateSingleShape, setCanvasOffset, setSelectedShape, selectionPadding, isShiftPressed));
 
     if (isInsideComponent) {
       document.addEventListener('mousemove', handleMouseMove);
       document.addEventListener('touchmove', handleMouseMove);
     }
 
-    return function () {
+    return () => {
       if (isInsideComponent) {
         document.removeEventListener('mousemove', handleMouseMove);
         document.removeEventListener('touchmove', handleMouseMove);
       }
     };
-  }, [isInsideComponent, selectionCanvasRef, selectedShape, selectionMode, setHoverMode, canvasOffset, canvasOffsetStartPosition, width, height, scaleRatio, updateSingleShape, activeTool, setCanvasOffset, setSelectedShape, selectionPadding]);
-  (0, _react.useEffect)(function () {
-    var handleMouseUp = function handleMouseUp() {
-      if (selectionMode.mode === _Mode.SelectionModeLib.textedition) return;
+  }, [isInsideComponent, selectionCanvasRef, selectedShape, selectionMode, setHoverMode, gridFormat, canvasOffset, canvasOffsetStartPosition, width, height, scaleRatio, updateSingleShape, activeTool, setCanvasOffset, setSelectedShape, selectionPadding, isShiftPressed]);
+  (0, _react.useEffect)(() => {
+    const handleMouseUp = () => {
+      if (selectionMode.mode === 'textedition') return;
 
-      if (selectionMode.mode !== _Mode.SelectionModeLib["default"]) {
+      if (selectionMode.mode !== 'default') {
         setSelectionMode({
-          mode: _Mode.SelectionModeLib["default"]
+          mode: 'default'
         });
         saveShapes();
       }
@@ -133,68 +120,65 @@ var useDrawableCanvas = function useDrawableCanvas(_ref) {
       document.addEventListener('touchend', handleMouseUp);
     }
 
-    return function () {
+    return () => {
       if (isInsideComponent) {
         document.removeEventListener('mouseup', handleMouseUp);
         document.removeEventListener('touchend', handleMouseUp);
       }
     };
   }, [isInsideComponent, selectionMode, saveShapes, setSelectionMode]);
-  (0, _react.useEffect)(function () {
-    var ref = selectionCanvasRef.current;
+  (0, _react.useEffect)(() => {
+    const ref = selectionCanvasRef.current;
     if (!ref) return;
     if (disabled) return;
 
-    var handleMouseDown = function handleMouseDown(e) {
+    const handleMouseDown = e => {
       e.preventDefault();
-      var cursorPosition = (0, _intersect.getCursorPosition)(e, selectionCanvasRef.current, width, height, scaleRatio);
-
-      if (activeTool.type === _tools.ActionsEnum.selection) {
-        var _selectShape = (0, _selection.selectShape)(shapes, cursorPosition, scaleRatio, canvasOffset, selectedShape, selectionPadding),
-            shape = _selectShape.shape,
-            mode = _selectShape.mode;
+      const cursorPosition = (0, _intersect.getCursorPosition)(e, selectionCanvasRef.current, width, height, scaleRatio);
 
+      if (activeTool.type === 'selection') {
+        const {
+          shape,
+          mode
+        } = (0, _selection.selectShape)(shapes, cursorPosition, scaleRatio, canvasOffset, selectedShape, selectionPadding);
         setSelectedShape(shape);
         setSelectionMode(mode);
-      } else if (activeTool.type === _tools.ActionsEnum.move) {
+      } else if (activeTool.type === 'move') {
         setCanvasOffsetStartPosition(cursorPosition);
       }
 
-      if (_fp["default"].includes(activeTool.type, _Shapes.ShapeEnum)) {
+      if (_shapes.ShapeTypeArray.includes(activeTool.type)) {
         var _drawCanvasRef$curren;
 
-        var drawCtx = (_drawCanvasRef$curren = drawCanvasRef.current) === null || _drawCanvasRef$curren === void 0 ? void 0 : _drawCanvasRef$curren.getContext('2d');
+        const drawCtx = (_drawCanvasRef$curren = drawCanvasRef.current) === null || _drawCanvasRef$curren === void 0 ? void 0 : _drawCanvasRef$curren.getContext('2d');
         if (!drawCtx) return;
 
-        if (activeTool.type === _Shapes.ShapeEnum.brush) {
+        if (activeTool.type === 'brush') {
           if (!!selectedShape) {
-            var _newShape2 = (0, _transform.createNewPointGroupToShape)(selectedShape, cursorPosition);
-
-            updateSingleShape(_newShape2);
-            setSelectedShape(_newShape2);
+            const newShape = (0, _brush.addNewPointGroupToShape)(selectedShape, cursorPosition);
+            updateSingleShape(newShape);
+            setSelectedShape(newShape);
           } else {
-            var _newShape3 = (0, _data.createShape)(drawCtx, activeTool, cursorPosition);
-
-            if (!_newShape3) return;
-            addShape(_newShape3);
-            setSelectedShape(_newShape3);
+            const newShape = (0, _shapes2.createShape)(drawCtx, activeTool, cursorPosition, gridFormat);
+            if (!newShape) return;
+            addShape(newShape);
+            setSelectedShape(newShape);
           }
 
           setSelectionMode({
-            mode: _Mode.SelectionModeLib.brush
+            mode: 'brush'
           });
         } else {
-          var _newShape4 = (0, _data.createShape)(drawCtx, activeTool, cursorPosition);
-
-          if (!_newShape4) return;
-          addShape(_newShape4);
-          setActiveTool(_tools2.SELECTION_TOOL);
-          setSelectedShape(_newShape4);
+          const newShape = (0, _shapes2.createShape)(drawCtx, activeTool, cursorPosition, gridFormat);
+          if (!newShape) return;
+          addShape(newShape);
+          setActiveTool(_tools.SELECTION_TOOL);
+          setSelectedShape(newShape);
           setSelectionMode({
-            mode: _Mode.SelectionModeLib.resize,
+            mode: 'resize',
             cursorStartPosition: cursorPosition,
-            originalShape: _newShape4,
-            anchor: activeTool.type === _Shapes.ShapeEnum.line || activeTool.type === _Shapes.ShapeEnum.polygon || activeTool.type === _Shapes.ShapeEnum.curve ? 0 : [1, 1]
+            originalShape: newShape,
+            anchor: activeTool.type === 'line' || activeTool.type === 'polygon' || activeTool.type === 'curve' ? 0 : [1, 1]
           });
         }
       }
@@ -206,23 +190,23 @@ var useDrawableCanvas = function useDrawableCanvas(_ref) {
     ref.addEventListener('touchstart', handleMouseDown, {
       passive: false
     });
-    return function () {
+    return () => {
       ref.removeEventListener('mousedown', handleMouseDown);
       ref.removeEventListener('touchstart', handleMouseDown);
     };
-  }, [disabled, selectionCanvasRef, drawCanvasRef, selectedShape, activeTool, canvasOffset, setCanvasOffsetStartPosition, shapes, width, height, scaleRatio, updateSingleShape, addShape, setActiveTool, setSelectedShape, setSelectionMode, selectionPadding]);
-  (0, _react.useEffect)(function () {
-    var ref = selectionCanvasRef.current;
+  }, [disabled, selectionCanvasRef, drawCanvasRef, selectedShape, activeTool, canvasOffset, setCanvasOffsetStartPosition, shapes, width, height, scaleRatio, updateSingleShape, addShape, setActiveTool, setSelectedShape, setSelectionMode, selectionPadding, gridFormat]);
+  (0, _react.useEffect)(() => {
+    const ref = selectionCanvasRef.current;
     if (!ref) return;
 
-    var handleDoubleClick = function handleDoubleClick(e) {
-      if (activeTool.type === _tools.ActionsEnum.selection) {
-        if ((selectedShape === null || selectedShape === void 0 ? void 0 : selectedShape.type) === _Shapes.ShapeEnum.text) {
-          var cursorPosition = (0, _intersect.getCursorPosition)(e, selectionCanvasRef.current, width, height, scaleRatio);
+    const handleDoubleClick = e => {
+      if (activeTool.type === 'selection') {
+        if ((selectedShape === null || selectedShape === void 0 ? void 0 : selectedShape.type) === 'text') {
+          const cursorPosition = (0, _intersect.getCursorPosition)(e, selectionCanvasRef.current, width, height, scaleRatio);
 
           if ((0, _intersect.checkPositionIntersection)(selectedShape, cursorPosition, canvasOffset, selectionPadding)) {
             setSelectionMode({
-              mode: _Mode.SelectionModeLib.textedition,
+              mode: 'textedition',
               defaultValue: selectedShape.value
             });
           }
@@ -232,15 +216,15 @@ var useDrawableCanvas = function useDrawableCanvas(_ref) {
 
     if (isInsideComponent) {
       registerDoubleClickEvent(ref, handleDoubleClick);
-      return function () {
+      return () => {
         unRegisterDoubleClickEvent(ref);
       };
     }
   }, [registerDoubleClickEvent, unRegisterDoubleClickEvent, isInsideComponent, selectionCanvasRef, activeTool, selectedShape, width, height, scaleRatio, canvasOffset, setSelectionMode, selectionPadding]);
   return {
-    hoverMode: hoverMode
+    hoverMode
   };
 };
 
 var _default = useDrawableCanvas;
-exports["default"] = _default;
+exports.default = _default;

package/dist/hooks/useKeyboard.js

@@ -1,67 +1,80 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = void 0;
-
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+exports.default = void 0;
 
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _style = require("../constants/style");
 
 var _react = require("react");
 
-var _fp = _interopRequireDefault(require("lodash/fp"));
-
-var _data = require("../utils/data");
-
-var _keyboard = require("../types/keyboard");
-
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
-var useKeyboard = function useKeyboard(_ref) {
-  var isInsideComponent = _ref.isInsideComponent,
-      selectedShape = _ref.selectedShape,
-      isEditingText = _ref.isEditingText,
-      setSelectedShape = _ref.setSelectedShape,
-      removeShape = _ref.removeShape,
-      pasteShape = _ref.pasteShape,
-      updateShape = _ref.updateShape,
-      backwardShape = _ref.backwardShape,
-      forwardShape = _ref.forwardShape;
-
-  var _useState = (0, _react.useState)(undefined),
-      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
-      copiedShape = _useState2[0],
-      setCopiedShape = _useState2[1];
+var _shapes = require("../utils/shapes");
+
+const KeyboardCode = {
+  ArrowUp: 'ArrowUp',
+  ArrowDown: 'ArrowDown',
+  ArrowLeft: 'ArrowLeft',
+  ArrowRight: 'ArrowRight',
+  Delete: 'Delete',
+  Backspace: 'Backspace',
+  Escape: 'Escape',
+  Shift: 'Shift',
+  Z: 'z',
+  Y: 'y'
+};
+const KeyboardCommand = {
+  Copy: 'copy',
+  Paste: 'paste'
+};
 
-  (0, _react.useEffect)(function () {
-    var handleCopy = function handleCopy(e) {
+const useKeyboard = _ref => {
+  let {
+    gridFormat,
+    isInsideComponent,
+    selectedShape,
+    isEditingText,
+    setSelectedShape,
+    removeShape,
+    pasteShape,
+    updateShape,
+    backwardShape,
+    forwardShape,
+    setShiftPressed
+  } = _ref;
+  const [copiedShape, setCopiedShape] = (0, _react.useState)(undefined);
+  (0, _react.useEffect)(() => {
+    const handleCopy = e => {
       if (!selectedShape) return;
       if (isEditingText) return;
       e.preventDefault();
-      setCopiedShape(_objectSpread({}, selectedShape));
+      setCopiedShape({ ...selectedShape
+      });
     };
 
-    var handlePaste = function handlePaste(e) {
+    const handlePaste = e => {
       if (!copiedShape) return;
       if (isEditingText) return;
       e.preventDefault();
-      pasteShape((0, _data.copyShape)(copiedShape));
+      pasteShape((0, _shapes.copyShape)(copiedShape, gridFormat));
+    };
+
+    const handleKeyUp = e => {
+      switch (e.key) {
+        case KeyboardCode.Shift:
+          setShiftPressed(false);
+          break;
+      }
     };
 
-    var handleKeyDown = function handleKeyDown(e) {
+    const handleKeyDown = e => {
       if (e.metaKey || e.ctrlKey) {
-        if (e.key === _keyboard.KeyboardCode.Z) {
+        if (e.key === KeyboardCode.Z) {
           e.preventDefault();
           e.stopPropagation();
           backwardShape();
           return;
-        } else if (e.key === _keyboard.KeyboardCode.Y) {
+        } else if (e.key === KeyboardCode.Y) {
           e.preventDefault();
           e.stopPropagation();
           forwardShape();
@@ -69,34 +82,36 @@ var useKeyboard = function useKeyboard(_ref) {
         }
       }
 
+      if (e.key === KeyboardCode.Shift) {
+        setShiftPressed(true);
+        return;
+      }
+
       if (!selectedShape) return;
 
-      if (e.key === _keyboard.KeyboardCode.Escape) {
+      if (e.key === KeyboardCode.Escape) {
         setSelectedShape(undefined);
         return;
       }
 
       if (isEditingText) return;
+      const translationMap = {
+        [KeyboardCode.ArrowLeft]: [gridFormat ? -_style.GRID_STEP[gridFormat - 1] : -1, 0],
+        [KeyboardCode.ArrowRight]: [gridFormat ? _style.GRID_STEP[gridFormat - 1] : 1, 0],
+        [KeyboardCode.ArrowDown]: [0, gridFormat ? _style.GRID_STEP[gridFormat - 1] : 1],
+        [KeyboardCode.ArrowUp]: [0, gridFormat ? -_style.GRID_STEP[gridFormat - 1] : -1]
+      };
 
       switch (e.key) {
-        case _keyboard.KeyboardCode.ArrowLeft:
-          updateShape(_fp["default"].set('translation', [selectedShape.translation[0] - 1, selectedShape.translation[1]], selectedShape));
-          break;
-
-        case _keyboard.KeyboardCode.ArrowRight:
-          updateShape(_fp["default"].set('translation', [selectedShape.translation[0] + 1, selectedShape.translation[1]], selectedShape));
-          break;
-
-        case _keyboard.KeyboardCode.ArrowDown:
-          updateShape(_fp["default"].set('translation', [selectedShape.translation[0], selectedShape.translation[1] + 1], selectedShape));
-          break;
-
-        case _keyboard.KeyboardCode.ArrowUp:
-          updateShape(_fp["default"].set('translation', [selectedShape.translation[0], selectedShape.translation[1] - 1], selectedShape));
+        case KeyboardCode.ArrowLeft:
+        case KeyboardCode.ArrowRight:
+        case KeyboardCode.ArrowDown:
+        case KeyboardCode.ArrowUp:
+          updateShape((0, _shapes.translateShape)(translationMap[e.key], selectedShape, [0, 0], gridFormat));
           break;
 
-        case _keyboard.KeyboardCode.Delete:
-        case _keyboard.KeyboardCode.Backspace:
+        case KeyboardCode.Delete:
+        case KeyboardCode.Backspace:
           removeShape(selectedShape);
           break;
       }
@@ -104,20 +119,22 @@ var useKeyboard = function useKeyboard(_ref) {
 
     if (isInsideComponent) {
       document.addEventListener('keydown', handleKeyDown);
-      document.addEventListener(_keyboard.KeyboardCommand.Copy, handleCopy);
-      document.addEventListener(_keyboard.KeyboardCommand.Paste, handlePaste);
+      document.addEventListener('keyup', handleKeyUp);
+      document.addEventListener(KeyboardCommand.Copy, handleCopy);
+      document.addEventListener(KeyboardCommand.Paste, handlePaste);
     }
 
-    return function () {
+    return () => {
       if (isInsideComponent) {
         document.removeEventListener('keydown', handleKeyDown);
-        document.removeEventListener(_keyboard.KeyboardCommand.Copy, handleCopy);
-        document.removeEventListener(_keyboard.KeyboardCommand.Paste, handlePaste);
+        document.removeEventListener('keyup', handleKeyUp);
+        document.removeEventListener(KeyboardCommand.Copy, handleCopy);
+        document.removeEventListener(KeyboardCommand.Paste, handlePaste);
       }
     };
-  }, [isInsideComponent, copiedShape, isEditingText, selectedShape, updateShape, removeShape, setSelectedShape, pasteShape, backwardShape, forwardShape]);
+  }, [isInsideComponent, gridFormat, copiedShape, isEditingText, selectedShape, updateShape, removeShape, setSelectedShape, pasteShape, backwardShape, forwardShape, setShiftPressed]);
   return {};
 };
 
 var _default = useKeyboard;
-exports["default"] = _default;
+exports.default = _default;