@yorab/react-paint 0.6.6 → 0.7.1

package/dist/constants/style.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.STYLE_ZINDEX_SNACKBAR = exports.STYLE_ZINDEX_PANEL = exports.STYLE_ZINDEX_LOADING = exports.STYLE_ZINDEX_APP = exports.STYLE_LINE_WITH_ARROW = exports.STYLE_LINE_DASH = exports.STYLE_FONT_SIZE_DEFAULT = exports.STYLE_FONT_DEFAULT = exports.STYLE_FONTS = exports.STYLE_COLORS = exports.POLYGON_POINTS_VALUES = exports.LINE_DASH_DATA = exports.CURVE_POINTS_VALUES = void 0;
+exports.STYLE_ZINDEX = exports.STYLE_LINE_WITH_ARROW = exports.STYLE_LINE_DASH = exports.STYLE_FONT_SIZE_DEFAULT = exports.STYLE_FONT_DEFAULT = exports.STYLE_FONTS = exports.STYLE_COLORS = exports.POLYGON_POINTS_VALUES = exports.LINE_DASH_DATA = exports.GRID_STEP = exports.GRID_ROTATION_STEPS = exports.CURVE_POINTS_VALUES = void 0;
 const POLYGON_POINTS_VALUES = [3, 4, 5, 6, 7, 8, 9, 10];
 exports.POLYGON_POINTS_VALUES = POLYGON_POINTS_VALUES;
 const CURVE_POINTS_VALUES = [3, 4, 5, 6, 7, 8, 9];
@@ -22,11 +22,14 @@ const STYLE_FONT_DEFAULT = 'serif';
 exports.STYLE_FONT_DEFAULT = STYLE_FONT_DEFAULT;
 const STYLE_FONT_SIZE_DEFAULT = 36;
 exports.STYLE_FONT_SIZE_DEFAULT = STYLE_FONT_SIZE_DEFAULT;
-const STYLE_ZINDEX_APP = 1;
-exports.STYLE_ZINDEX_APP = STYLE_ZINDEX_APP;
-const STYLE_ZINDEX_LOADING = 2;
-exports.STYLE_ZINDEX_LOADING = STYLE_ZINDEX_LOADING;
-const STYLE_ZINDEX_PANEL = 3;
-exports.STYLE_ZINDEX_PANEL = STYLE_ZINDEX_PANEL;
-const STYLE_ZINDEX_SNACKBAR = 4;
-exports.STYLE_ZINDEX_SNACKBAR = STYLE_ZINDEX_SNACKBAR;
+const STYLE_ZINDEX = {
+  APP: 1,
+  LOADING: 2,
+  PANEL: 3,
+  SNACKBAR: 4
+};
+exports.STYLE_ZINDEX = STYLE_ZINDEX;
+const GRID_STEP = [10, 20, 40];
+exports.GRID_STEP = GRID_STEP;
+const GRID_ROTATION_STEPS = 18;
+exports.GRID_ROTATION_STEPS = GRID_ROTATION_STEPS;

package/dist/constants/tools.js

@@ -5,10 +5,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.UPLOAD_PICTURE_TOOL = exports.UNDO_TOOL = exports.SETTINGS_DEFAULT_TEXT = exports.SETTINGS_DEFAULT_SQUARE = exports.SETTINGS_DEFAULT_RECT = exports.SETTINGS_DEFAULT_POLYGON = exports.SETTINGS_DEFAULT_PICTURE = exports.SETTINGS_DEFAULT_LINE = exports.SETTINGS_DEFAULT_ELLIPSE = exports.SETTINGS_DEFAULT_CURVE = exports.SETTINGS_DEFAULT_CIRCLE = exports.SETTINGS_DEFAULT_BRUSH = exports.SELECTION_TOOL = exports.SAVE_TOOL = exports.REDO_TOOL = exports.MOVE_TOOL = exports.LOAD_TOOL = exports.EXPORT_TOOL = exports.DEFAULT_SHAPE_TOOLS = exports.DEFAULT_SHAPE_TEXT = exports.DEFAULT_SHAPE_SQUARE = exports.DEFAULT_SHAPE_RECT = exports.DEFAULT_SHAPE_POLYGON = exports.DEFAULT_SHAPE_PICTURE = exports.DEFAULT_SHAPE_LINE = exports.DEFAULT_SHAPE_ELLIPSE = exports.DEFAULT_SHAPE_CURVE = exports.DEFAULT_SHAPE_CIRCLE = exports.DEFAULT_SHAPE_BRUSH = exports.CLEAR_TOOL = exports.ADD_URL_PICTURE_TOOL = void 0;
 
-var _Shapes = require("../types/Shapes");
-
-var _tools = require("../types/tools");
-
 var _icons = require("./icons");
 
 var _style = require("./style");
@@ -273,7 +269,7 @@ const SETTINGS_DEFAULT_CURVE = {
 };
 exports.SETTINGS_DEFAULT_CURVE = SETTINGS_DEFAULT_CURVE;
 const DEFAULT_SHAPE_PICTURE = {
-  type: _Shapes.ShapeEnum.picture,
+  type: 'picture',
   id: "".concat(PREFIX_ID, "picture"),
   icon: _icons.pictureIcon,
   label: 'Image',
@@ -281,7 +277,7 @@ const DEFAULT_SHAPE_PICTURE = {
 };
 exports.DEFAULT_SHAPE_PICTURE = DEFAULT_SHAPE_PICTURE;
 const DEFAULT_SHAPE_BRUSH = {
-  type: _Shapes.ShapeEnum.brush,
+  type: 'brush',
   id: "".concat(PREFIX_ID, "brush"),
   icon: _icons.brushIcon,
   label: 'Brosse',
@@ -289,7 +285,7 @@ const DEFAULT_SHAPE_BRUSH = {
 };
 exports.DEFAULT_SHAPE_BRUSH = DEFAULT_SHAPE_BRUSH;
 const DEFAULT_SHAPE_LINE = {
-  type: _Shapes.ShapeEnum.line,
+  type: 'line',
   id: "".concat(PREFIX_ID, "line"),
   icon: _icons.arrowIcon,
   label: 'Ligne',
@@ -297,7 +293,7 @@ const DEFAULT_SHAPE_LINE = {
 };
 exports.DEFAULT_SHAPE_LINE = DEFAULT_SHAPE_LINE;
 const DEFAULT_SHAPE_POLYGON = {
-  type: _Shapes.ShapeEnum.polygon,
+  type: 'polygon',
   id: "".concat(PREFIX_ID, "polygon"),
   icon: _icons.polygonIcon,
   label: 'Polygone',
@@ -305,7 +301,7 @@ const DEFAULT_SHAPE_POLYGON = {
 };
 exports.DEFAULT_SHAPE_POLYGON = DEFAULT_SHAPE_POLYGON;
 const DEFAULT_SHAPE_CURVE = {
-  type: _Shapes.ShapeEnum.curve,
+  type: 'curve',
   id: "".concat(PREFIX_ID, "curve"),
   icon: _icons.curveIcon,
   label: 'Courbe',
@@ -313,7 +309,7 @@ const DEFAULT_SHAPE_CURVE = {
 };
 exports.DEFAULT_SHAPE_CURVE = DEFAULT_SHAPE_CURVE;
 const DEFAULT_SHAPE_RECT = {
-  type: _Shapes.ShapeEnum.rect,
+  type: 'rect',
   id: "".concat(PREFIX_ID, "rect"),
   icon: _icons.squareIcon,
   // temporary
@@ -322,7 +318,7 @@ const DEFAULT_SHAPE_RECT = {
 };
 exports.DEFAULT_SHAPE_RECT = DEFAULT_SHAPE_RECT;
 const DEFAULT_SHAPE_SQUARE = {
-  type: _Shapes.ShapeEnum.square,
+  type: 'square',
   id: "".concat(PREFIX_ID, "square"),
   icon: _icons.squareIcon,
   label: 'Carré',
@@ -330,7 +326,7 @@ const DEFAULT_SHAPE_SQUARE = {
 };
 exports.DEFAULT_SHAPE_SQUARE = DEFAULT_SHAPE_SQUARE;
 const DEFAULT_SHAPE_CIRCLE = {
-  type: _Shapes.ShapeEnum.circle,
+  type: 'circle',
   id: "".concat(PREFIX_ID, "circle"),
   icon: _icons.circleIcon,
   label: 'Cercle',
@@ -338,7 +334,7 @@ const DEFAULT_SHAPE_CIRCLE = {
 };
 exports.DEFAULT_SHAPE_CIRCLE = DEFAULT_SHAPE_CIRCLE;
 const DEFAULT_SHAPE_ELLIPSE = {
-  type: _Shapes.ShapeEnum.ellipse,
+  type: 'ellipse',
   id: "".concat(PREFIX_ID, "ellipse"),
   icon: _icons.circleIcon,
   // temporary
@@ -347,7 +343,7 @@ const DEFAULT_SHAPE_ELLIPSE = {
 };
 exports.DEFAULT_SHAPE_ELLIPSE = DEFAULT_SHAPE_ELLIPSE;
 const DEFAULT_SHAPE_TEXT = {
-  type: _Shapes.ShapeEnum.text,
+  type: 'text',
   id: "".concat(PREFIX_ID, "text"),
   icon: _icons.textIcon,
   label: 'Texte',
@@ -358,70 +354,70 @@ const DEFAULT_SHAPE_TOOLS = [DEFAULT_SHAPE_BRUSH, DEFAULT_SHAPE_LINE, DEFAULT_SH
 exports.DEFAULT_SHAPE_TOOLS = DEFAULT_SHAPE_TOOLS;
 const SELECTION_TOOL = {
   id: "".concat(PREFIX_ID, "selection"),
-  type: _tools.ActionsEnum.selection,
+  type: 'selection',
   icon: _icons.cursorIcon,
   label: 'Sélection'
 };
 exports.SELECTION_TOOL = SELECTION_TOOL;
 const UNDO_TOOL = {
   id: "".concat(PREFIX_ID, "undo"),
-  type: _tools.ActionsEnum.undo,
+  type: 'undo',
   icon: _icons.undoIcon,
   label: 'Undo'
 };
 exports.UNDO_TOOL = UNDO_TOOL;
 const REDO_TOOL = {
   id: "".concat(PREFIX_ID, "redo"),
-  type: _tools.ActionsEnum.redo,
+  type: 'redo',
   icon: _icons.redoIcon,
   label: 'Redo'
 };
 exports.REDO_TOOL = REDO_TOOL;
 const CLEAR_TOOL = {
   id: "".concat(PREFIX_ID, "clear"),
-  type: _tools.ActionsEnum.clear,
+  type: 'clear',
   icon: _icons.clearIcon,
   label: 'Clear'
 };
 exports.CLEAR_TOOL = CLEAR_TOOL;
 const EXPORT_TOOL = {
   id: "".concat(PREFIX_ID, "export"),
-  type: _tools.ActionsEnum.export,
+  type: 'export',
   icon: _icons.exportFileIcon,
   label: 'Export PNG'
 };
 exports.EXPORT_TOOL = EXPORT_TOOL;
 const LOAD_TOOL = {
   id: "".concat(PREFIX_ID, "load"),
-  type: _tools.ActionsEnum.loadFile,
+  type: 'loadfile',
   icon: _icons.openFileIcon,
   label: 'Load project'
 };
 exports.LOAD_TOOL = LOAD_TOOL;
 const SAVE_TOOL = {
   id: "".concat(PREFIX_ID, "save"),
-  type: _tools.ActionsEnum.saveFile,
+  type: 'savefile',
   icon: _icons.saveIcon,
   label: 'Save project'
 };
 exports.SAVE_TOOL = SAVE_TOOL;
 const MOVE_TOOL = {
   id: "".concat(PREFIX_ID, "move"),
-  type: _tools.ActionsEnum.move,
+  type: 'move',
   icon: _icons.cursorIcon,
   label: 'Move'
 };
 exports.MOVE_TOOL = MOVE_TOOL;
 const UPLOAD_PICTURE_TOOL = {
   id: "".concat(PREFIX_ID, "upload-picture"),
-  type: _tools.ActionsEnum.uploadPicture,
+  type: 'uploadpicture',
   icon: _icons.pictureIcon,
   label: 'Upload picture'
 };
 exports.UPLOAD_PICTURE_TOOL = UPLOAD_PICTURE_TOOL;
 const ADD_URL_PICTURE_TOOL = {
   id: "".concat(PREFIX_ID, "upload-picture"),
-  type: _tools.ActionsEnum.addUrlPicture,
+  type: 'addurlpicture',
   icon: _icons.pictureIcon,
   label: 'Add picture from URL'
 };

package/dist/hooks/useComponent.js

@@ -7,6 +7,8 @@ exports.default = void 0;
 
 var _react = require("react");
 
+var _dom = require("../utils/dom");
+
 const useComponent = _ref => {
   let {
     disabled,
@@ -15,7 +17,7 @@ const useComponent = _ref => {
   const [isInsideComponent, setIsInsideComponent] = (0, _react.useState)(false);
   (0, _react.useEffect)(() => {
     const onDetectClick = event => {
-      setIsInsideComponent(!(event.target instanceof Node) || !componentRef.current ? false : componentRef.current.contains(event.target));
+      setIsInsideComponent((0, _dom.isEventInsideNode)(event, componentRef.current));
     };
 
     if (disabled) {

package/dist/hooks/useDrawableCanvas.js

@@ -9,28 +9,24 @@ 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 _useDoubleClick = _interopRequireDefault(require("./useDoubleClick"));
+var _shapes2 = require("../utils/shapes");
+
+var _brush = require("../utils/shapes/brush");
 
-const handleMove = (e, canvasRef, activeTool, canvasOffset, selectedShape, selectionMode, canvasOffsetStartPosition, width, height, scaleRatio, setHoverMode, updateSingleShape, setCanvasOffset, setSelectedShape, selectionPadding) => {
-  if (activeTool.type === _tools.ActionsEnum.move && canvasOffsetStartPosition !== undefined) {
+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]]);
   }
@@ -39,9 +35,9 @@ const handleMove = (e, canvasRef, activeTool, canvasOffset, selectedShape, selec
   if (selectedShape.locked) return;
   const cursorPosition = (0, _intersect.getCursorPosition)(e, canvasRef.current, width, height, scaleRatio);
 
-  if (selectionMode.mode === _Mode.SelectionModeLib.default || selectionMode.mode === _Mode.SelectionModeLib.textedition) {
+  if (selectionMode.mode === 'default' || selectionMode.mode === 'textedition') {
     const positionIntersection = (0, _intersect.checkPositionIntersection)(selectedShape, cursorPosition, canvasOffset, selectionPadding, scaleRatio, true) || {
-      mode: _Mode.SelectionModeLib.default
+      mode: 'default'
     };
     setHoverMode(positionIntersection);
   } else {
@@ -49,7 +45,7 @@ const handleMove = (e, canvasRef, activeTool, canvasOffset, selectedShape, selec
 
     const ctx = (_canvasRef$current = canvasRef.current) === null || _canvasRef$current === void 0 ? void 0 : _canvasRef$current.getContext('2d');
     if (!ctx) return;
-    const newShape = (0, _transform.transformShape)(ctx, selectedShape, cursorPosition, canvasOffset, selectionMode, selectionPadding);
+    const newShape = (0, _transform.transformShape)(ctx, selectedShape, cursorPosition, gridFormat, canvasOffset, selectionMode, selectionPadding, isShiftPressed);
     updateSingleShape(newShape);
     setSelectedShape(newShape);
   }
@@ -73,10 +69,12 @@ const useDrawableCanvas = _ref => {
     setSelectedShape,
     setCanvasOffsetStartPosition,
     updateSingleShape,
+    gridFormat,
     canvasOffset,
     saveShapes,
     setSelectionMode,
-    selectionPadding
+    selectionPadding,
+    isShiftPressed
   } = _ref;
   const {
     width,
@@ -84,14 +82,14 @@ const useDrawableCanvas = _ref => {
     scaleRatio
   } = canvasSize;
   const [hoverMode, setHoverMode] = (0, _react.useState)({
-    mode: _Mode.SelectionModeLib.default
+    mode: 'default'
   });
   const {
     registerDoubleClickEvent,
     unRegisterDoubleClickEvent
   } = (0, _useDoubleClick.default)();
   (0, _react.useEffect)(() => {
-    const handleMouseMove = e => window.requestAnimationFrame(() => handleMove(e, selectionCanvasRef, activeTool, canvasOffset, selectedShape, selectionMode, canvasOffsetStartPosition, width, height, scaleRatio, setHoverMode, updateSingleShape, setCanvasOffset, setSelectedShape, selectionPadding));
+    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);
@@ -104,14 +102,14 @@ const useDrawableCanvas = _ref => {
         document.removeEventListener('touchmove', handleMouseMove);
       }
     };
-  }, [isInsideComponent, selectionCanvasRef, selectedShape, selectionMode, setHoverMode, canvasOffset, canvasOffsetStartPosition, width, height, scaleRatio, updateSingleShape, activeTool, setCanvasOffset, setSelectedShape, selectionPadding]);
+  }, [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 === _Mode.SelectionModeLib.textedition) return;
+      if (selectionMode.mode === 'textedition') return;
 
-      if (selectionMode.mode !== _Mode.SelectionModeLib.default) {
+      if (selectionMode.mode !== 'default') {
         setSelectionMode({
-          mode: _Mode.SelectionModeLib.default
+          mode: 'default'
         });
         saveShapes();
       }
@@ -138,49 +136,49 @@ const useDrawableCanvas = _ref => {
       e.preventDefault();
       const cursorPosition = (0, _intersect.getCursorPosition)(e, selectionCanvasRef.current, width, height, scaleRatio);
 
-      if (activeTool.type === _tools.ActionsEnum.selection) {
+      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;
 
         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) {
-            const newShape = (0, _transform.createNewPointGroupToShape)(selectedShape, cursorPosition);
+            const newShape = (0, _brush.addNewPointGroupToShape)(selectedShape, cursorPosition);
             updateSingleShape(newShape);
             setSelectedShape(newShape);
           } else {
-            const newShape = (0, _data.createShape)(drawCtx, activeTool, cursorPosition);
+            const newShape = (0, _shapes2.createShape)(drawCtx, activeTool, cursorPosition, gridFormat);
             if (!newShape) return;
             addShape(newShape);
             setSelectedShape(newShape);
           }
 
           setSelectionMode({
-            mode: _Mode.SelectionModeLib.brush
+            mode: 'brush'
           });
         } else {
-          const newShape = (0, _data.createShape)(drawCtx, activeTool, cursorPosition);
+          const newShape = (0, _shapes2.createShape)(drawCtx, activeTool, cursorPosition, gridFormat);
           if (!newShape) return;
           addShape(newShape);
-          setActiveTool(_tools2.SELECTION_TOOL);
+          setActiveTool(_tools.SELECTION_TOOL);
           setSelectedShape(newShape);
           setSelectionMode({
-            mode: _Mode.SelectionModeLib.resize,
+            mode: 'resize',
             cursorStartPosition: cursorPosition,
             originalShape: newShape,
-            anchor: activeTool.type === _Shapes.ShapeEnum.line || activeTool.type === _Shapes.ShapeEnum.polygon || activeTool.type === _Shapes.ShapeEnum.curve ? 0 : [1, 1]
+            anchor: activeTool.type === 'line' || activeTool.type === 'polygon' || activeTool.type === 'curve' ? 0 : [1, 1]
           });
         }
       }
@@ -196,19 +194,19 @@ const useDrawableCanvas = _ref => {
       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]);
+  }, [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;
 
     const handleDoubleClick = e => {
-      if (activeTool.type === _tools.ActionsEnum.selection) {
-        if ((selectedShape === null || selectedShape === void 0 ? void 0 : selectedShape.type) === _Shapes.ShapeEnum.text) {
+      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
             });
           }

package/dist/hooks/useKeyboard.js

@@ -1,22 +1,36 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
 
-var _react = require("react");
-
-var _fp = _interopRequireDefault(require("lodash/fp"));
+var _style = require("../constants/style");
 
-var _data = require("../utils/data");
+var _react = require("react");
 
-var _keyboard = require("../types/keyboard");
+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'
+};
 
 const useKeyboard = _ref => {
   let {
+    gridFormat,
     isInsideComponent,
     selectedShape,
     isEditingText,
@@ -25,7 +39,8 @@ const useKeyboard = _ref => {
     pasteShape,
     updateShape,
     backwardShape,
-    forwardShape
+    forwardShape,
+    setShiftPressed
   } = _ref;
   const [copiedShape, setCopiedShape] = (0, _react.useState)(undefined);
   (0, _react.useEffect)(() => {
@@ -41,17 +56,25 @@ const useKeyboard = _ref => {
       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;
+      }
     };
 
     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();
@@ -59,34 +82,36 @@ const 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;
       }
@@ -94,18 +119,20 @@ const 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 () => {
       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 {};
 };
 

package/dist/hooks/useShapes.js

@@ -11,7 +11,7 @@ var _react = require("react");
 
 var _fp = _interopRequireDefault(require("lodash/fp"));
 
-var _data = require("../utils/data");
+var _picture = require("../utils/shapes/picture");
 
 const useShapes = function () {
   let onDataChanged = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : _fp.default.noop;
@@ -46,7 +46,7 @@ const useShapes = function () {
   const addPictureShape = (0, _react.useCallback)(async function (fileOrUrl) {
     let maxWidth = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 300;
     let maxHeight = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 300;
-    const pictureShape = await (0, _data.createPicture)(fileOrUrl, maxWidth, maxHeight);
+    const pictureShape = await (0, _picture.createPicture)(fileOrUrl, maxWidth, maxHeight);
     addShape(pictureShape);
     saveShapes();
     return pictureShape;