@yorab/react-paint 0.6.4 → 0.7.1

package/dist/utils/style.js

@@ -5,42 +5,40 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.getShapePicture = void 0;
 
-var _Shapes = require("../types/Shapes");
-
 var _icons = require("../constants/icons");
 
-var getShapePicture = function getShapePicture(shape) {
+const getShapePicture = shape => {
   switch (shape) {
-    case _Shapes.ShapeEnum.brush:
+    case 'brush':
       return _icons.brushIcon;
 
-    case _Shapes.ShapeEnum.line:
+    case 'line':
       return _icons.arrowIcon;
 
-    case _Shapes.ShapeEnum.polygon:
+    case 'polygon':
       return _icons.polygonIcon;
 
-    case _Shapes.ShapeEnum.curve:
+    case 'curve':
       return _icons.curveIcon;
 
-    case _Shapes.ShapeEnum.rect:
+    case 'rect':
       return _icons.squareIcon;
     // temporary
 
-    case _Shapes.ShapeEnum.square:
+    case 'square':
       return _icons.squareIcon;
 
-    case _Shapes.ShapeEnum.circle:
+    case 'circle':
       return _icons.circleIcon;
 
-    case _Shapes.ShapeEnum.ellipse:
+    case 'ellipse':
       return _icons.circleIcon;
     // temporary
 
-    case _Shapes.ShapeEnum.text:
+    case 'text':
       return _icons.textIcon;
 
-    case _Shapes.ShapeEnum.picture:
+    case 'picture':
       return _icons.pictureIcon;
   }
 };

package/dist/utils/toolbar.js

@@ -7,86 +7,72 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.sanitizeTools = exports.getCurrentStructure = void 0;
 
-var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
-
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
-var _Shapes = require("../types/Shapes");
-
 var _fp = _interopRequireDefault(require("lodash/fp"));
 
 var _tools = require("../constants/tools");
 
-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 getCurrentStructure = function getCurrentStructure(availableTools, defaultStructure) {
-  return _fp["default"].flow(_fp["default"].flatMap(function (group) {
-    if (!_fp["default"].isObject(group)) {
-      return _fp["default"].filter({
+const getCurrentStructure = (availableTools, defaultStructure) => {
+  return _fp.default.flow(_fp.default.flatMap(group => {
+    if (!_fp.default.isObject(group)) {
+      return _fp.default.filter({
         type: group
       }, availableTools);
     }
 
-    var toolsType = _fp["default"].filter(function (tool) {
-      return _fp["default"].includes(tool.type, group.toolsType);
-    }, availableTools);
+    const toolsType = _fp.default.filter(tool => _fp.default.includes(tool.type, group.toolsType), availableTools);
 
     if (!toolsType) return null;
-    return _objectSpread(_objectSpread({}, group), {}, {
-      toolsType: toolsType
-    });
-  }), _fp["default"].compact)(defaultStructure);
+    return { ...group,
+      toolsType
+    };
+  }), _fp.default.compact)(defaultStructure);
 };
 
 exports.getCurrentStructure = getCurrentStructure;
 
-var sanitizeTools = function sanitizeTools(tools) {
-  var withPicture = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+const sanitizeTools = function (tools) {
+  let withPicture = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
 
-  var customizer = function customizer(objValue, srcValue) {
-    if (_fp["default"].isArray(objValue)) {
+  const customizer = (objValue, srcValue) => {
+    if (_fp.default.isArray(objValue)) {
       return srcValue;
     }
   };
 
-  return _fp["default"].flow(_fp["default"].map(function (tool) {
-    if (!_fp["default"].isObject(tool)) return null;
+  return _fp.default.flow(_fp.default.map(tool => {
+    if (!_fp.default.isObject(tool)) return null;
 
-    switch (_fp["default"].get('type', tool)) {
-      case _Shapes.ShapeEnum.brush:
-        return _fp["default"].mergeWith(customizer, _tools.DEFAULT_SHAPE_BRUSH, tool);
+    switch (_fp.default.get('type', tool)) {
+      case 'brush':
+        return _fp.default.mergeWith(customizer, _tools.DEFAULT_SHAPE_BRUSH, tool);
 
-      case _Shapes.ShapeEnum.circle:
-        return _fp["default"].mergeWith(customizer, _tools.DEFAULT_SHAPE_CIRCLE, tool);
+      case 'circle':
+        return _fp.default.mergeWith(customizer, _tools.DEFAULT_SHAPE_CIRCLE, tool);
 
-      case _Shapes.ShapeEnum.curve:
-        return _fp["default"].mergeWith(customizer, _tools.DEFAULT_SHAPE_CURVE, tool);
+      case 'curve':
+        return _fp.default.mergeWith(customizer, _tools.DEFAULT_SHAPE_CURVE, tool);
 
-      case _Shapes.ShapeEnum.ellipse:
-        return _fp["default"].mergeWith(customizer, _tools.DEFAULT_SHAPE_ELLIPSE, tool);
+      case 'ellipse':
+        return _fp.default.mergeWith(customizer, _tools.DEFAULT_SHAPE_ELLIPSE, tool);
 
-      case _Shapes.ShapeEnum.line:
-        return _fp["default"].mergeWith(customizer, _tools.DEFAULT_SHAPE_LINE, tool);
+      case 'line':
+        return _fp.default.mergeWith(customizer, _tools.DEFAULT_SHAPE_LINE, tool);
 
-      case _Shapes.ShapeEnum.polygon:
-        return _fp["default"].mergeWith(customizer, _tools.DEFAULT_SHAPE_POLYGON, tool);
+      case 'polygon':
+        return _fp.default.mergeWith(customizer, _tools.DEFAULT_SHAPE_POLYGON, tool);
 
-      case _Shapes.ShapeEnum.rect:
-        return _fp["default"].mergeWith(customizer, _tools.DEFAULT_SHAPE_RECT, tool);
+      case 'rect':
+        return _fp.default.mergeWith(customizer, _tools.DEFAULT_SHAPE_RECT, tool);
 
-      case _Shapes.ShapeEnum.square:
-        return _fp["default"].mergeWith(customizer, _tools.DEFAULT_SHAPE_SQUARE, tool);
+      case 'square':
+        return _fp.default.mergeWith(customizer, _tools.DEFAULT_SHAPE_SQUARE, tool);
 
-      case _Shapes.ShapeEnum.text:
-        return _fp["default"].mergeWith(customizer, _tools.DEFAULT_SHAPE_TEXT, tool);
+      case 'text':
+        return _fp.default.mergeWith(customizer, _tools.DEFAULT_SHAPE_TEXT, tool);
     }
 
     return null;
-  }), function (tools) {
-    return withPicture ? [].concat((0, _toConsumableArray2["default"])(tools), [_tools.DEFAULT_SHAPE_PICTURE]) : tools;
-  }, _fp["default"].compact)(tools);
+  }), tools => withPicture ? [...tools, _tools.DEFAULT_SHAPE_PICTURE] : tools, _fp.default.compact)(tools);
 };
 
 exports.sanitizeTools = sanitizeTools;

package/dist/utils/transform.js

@@ -5,36 +5,24 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.updatePolygonLinesCount = exports.translateShape = exports.transformShape = exports.rotateShape = exports.resizeText = exports.resizeShape = exports.resizeRect = exports.resizePicture = exports.resizeLine = exports.resizeEllipse = exports.resizeCircle = exports.resizeBrush = exports.radiansToDegrees = exports.paintNewPointToShape = exports.getNormalizedSize = exports.fitContentInsideContainer = exports.degreesToRadians = exports.createNewPointGroupToShape = exports.calculateTextWidth = exports.calculateTextFontSize = void 0;
-
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-
-var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
-
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+exports.updatePolygonLinesCount = exports.transformShape = exports.roundForGrid = exports.getNormalizedSize = exports.fitContentInsideContainer = void 0;
 
 var _fp = _interopRequireDefault(require("lodash/fp"));
 
-var _shapeData = require("./shapeData");
-
-var _Mode = require("../types/Mode");
-
-var _intersect = require("./intersect");
-
 var _style = require("../constants/style");
 
-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; }
+var _shapes = require("./shapes");
 
-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 _brush = require("./shapes/brush");
 
-var getNormalizedSize = function getNormalizedSize(originalShape, width, height) {
-  var originalRatio = originalShape.width / originalShape.height;
-  var newRatio = width / height;
+const getNormalizedSize = (originalWidth, originalHeight, width, height) => {
+  const originalRatio = originalWidth / originalHeight;
+  const newRatio = width / height;
 
   if (newRatio > originalRatio || height < 0) {
-    return width > originalShape.width ? [width, width / originalRatio] : [height * originalRatio, height];
+    return width > originalWidth ? [width, width / originalRatio] : [height * originalRatio, height];
   } else if (newRatio < originalRatio) {
-    return height > originalShape.height ? [height * originalRatio, height] : [width, width / originalRatio];
+    return height > originalHeight ? [height * originalRatio, height] : [width, width / originalRatio];
   }
 
   return [width, height];
@@ -42,355 +30,75 @@ var getNormalizedSize = function getNormalizedSize(originalShape, width, height)
 
 exports.getNormalizedSize = getNormalizedSize;
 
-var translateShape = function translateShape(shape, cursorPosition, originalShape, originalCursorPosition) {
-  return _objectSpread(_objectSpread({}, shape), {
-    translation: [originalShape.translation[0] + cursorPosition[0] - originalCursorPosition[0], originalShape.translation[1] + cursorPosition[1] - originalCursorPosition[1]]
-  });
-};
-
-exports.translateShape = translateShape;
-
-var rotateShape = function rotateShape(shape, cursorPosition, originalShape, originalCursorPosition, shapeCenter) {
-  var p1x = shapeCenter[0] + originalShape.translation[0] - originalCursorPosition[0];
-  var p1y = shapeCenter[1] + originalShape.translation[1] - originalCursorPosition[1];
-  var p2x = shapeCenter[0] + originalShape.translation[0] - cursorPosition[0];
-  var p2y = shapeCenter[1] + originalShape.translation[1] - cursorPosition[1];
-  var rotation = originalShape.rotation + Math.atan2(p2y, p2x) - Math.atan2(p1y, p1x);
-  return _objectSpread(_objectSpread({}, shape), {
-    rotation: rotation
-  });
-};
-
-exports.rotateShape = rotateShape;
-
-var paintNewPointToShape = function paintNewPointToShape(shape, cursorPosition) {
-  return _objectSpread(_objectSpread({}, shape), {
-    points: _fp["default"].set(shape.points.length - 1, [].concat((0, _toConsumableArray2["default"])(shape.points[shape.points.length - 1]), [cursorPosition]), shape.points)
-  });
-};
-
-exports.paintNewPointToShape = paintNewPointToShape;
-
-var createNewPointGroupToShape = function createNewPointGroupToShape(shape, cursorPosition) {
-  return _objectSpread(_objectSpread({}, shape), {
-    points: _fp["default"].set(shape.points.length, [cursorPosition], shape.points)
-  });
-};
-
-exports.createNewPointGroupToShape = createNewPointGroupToShape;
-
-var resizeBrush = function resizeBrush(cursorPosition, canvasOffset, originalShape, selectionMode, selectionPadding) {
-  var _getShapeInfos = (0, _shapeData.getShapeInfos)(originalShape, selectionPadding),
-      center = _getShapeInfos.center,
-      borders = _getShapeInfos.borders;
-
-  var cursorPositionBeforeResize = (0, _intersect.getPointPositionAfterCanvasTransformation)(cursorPosition, canvasOffset, originalShape.translation, originalShape.rotation, center);
-  var scaledWidth = selectionMode.anchor[0] === 0.5 ? 1 : selectionMode.anchor[0] === 0 ? (borders.x + borders.width - cursorPositionBeforeResize[0] + selectionPadding * -2) / (borders.width + selectionPadding * -2) : (cursorPositionBeforeResize[0] - borders.x - selectionPadding * 2) / (borders.width - selectionPadding * 2);
-  var scaledHeight = selectionMode.anchor[1] === 0.5 ? 1 : selectionMode.anchor[1] === 0 ? (borders.y + borders.height - cursorPositionBeforeResize[1] + selectionPadding * -2) / (borders.height + selectionPadding * -2) : (cursorPositionBeforeResize[1] - borders.y - selectionPadding * 2) / (borders.height - selectionPadding * 2);
-
-  var shapeWithNewDimensions = _objectSpread(_objectSpread({}, originalShape), {}, {
-    points: originalShape.points.map(function (points) {
-      return points.map(function (point) {
-        return [(point[0] - borders.x) * scaledWidth + borders.x, (point[1] - borders.y) * scaledHeight + borders.y];
-      });
-    })
-  });
-
-  var _getShapeInfos2 = (0, _shapeData.getShapeInfos)(shapeWithNewDimensions, selectionPadding),
-      shapeWithNewDimensionsCenter = _getShapeInfos2.center,
-      shapeWithNewDimensionsBorders = _getShapeInfos2.borders;
-
-  var _getRectOppositeAncho = getRectOppositeAnchorAbsolutePosition(selectionMode.anchor, center, _objectSpread(_objectSpread({}, originalShape), borders)),
-      _getRectOppositeAncho2 = (0, _slicedToArray2["default"])(_getRectOppositeAncho, 2),
-      oppTrueX = _getRectOppositeAncho2[0],
-      oppTrueY = _getRectOppositeAncho2[1];
-
-  var _getRectOppositeAncho3 = getRectOppositeAnchorAbsolutePosition(selectionMode.anchor, shapeWithNewDimensionsCenter, _objectSpread(_objectSpread({}, shapeWithNewDimensions), shapeWithNewDimensionsBorders), [scaledWidth < 0, scaledHeight < 0]),
-      _getRectOppositeAncho4 = (0, _slicedToArray2["default"])(_getRectOppositeAncho3, 2),
-      newOppTrueX = _getRectOppositeAncho4[0],
-      newOppTrueY = _getRectOppositeAncho4[1];
-
-  return _objectSpread(_objectSpread({}, shapeWithNewDimensions), {
-    translation: [originalShape.translation[0] - (newOppTrueX - oppTrueX), originalShape.translation[1] - (newOppTrueY - oppTrueY)]
-  });
-};
-
-exports.resizeBrush = resizeBrush;
-
-var resizeLine = function resizeLine(cursorPosition, canvasOffset, originalShape, selectionMode, selectionPadding) {
-  var _getShapeInfos3 = (0, _shapeData.getShapeInfos)(originalShape, selectionPadding),
-      center = _getShapeInfos3.center;
-
-  var cursorPositionBeforeResize = (0, _intersect.getPointPositionAfterCanvasTransformation)(cursorPosition, canvasOffset, originalShape.translation, originalShape.rotation, center);
-
-  var updatedShape = _fp["default"].set(['points', selectionMode.anchor], cursorPositionBeforeResize, originalShape);
-
-  return updatedShape;
+const roundForGrid = (value, gridFormat) => {
+  const step = value >= 0 ? _style.GRID_STEP[gridFormat - 1] : -_style.GRID_STEP[gridFormat - 1];
+  return gridFormat ? value + step / 2 - (value + step / 2) % step : Math.round(value);
 };
 
-exports.resizeLine = resizeLine;
+exports.roundForGrid = roundForGrid;
 
-var updatePolygonLinesCount = function updatePolygonLinesCount(shape, newPointsCount) {
-  var currentPointsCount = shape.points.length;
+const updatePolygonLinesCount = (shape, newPointsCount) => {
+  const currentPointsCount = shape.points.length;
   if (currentPointsCount === newPointsCount) return shape;
 
   if (currentPointsCount > newPointsCount) {
-    var totalPoints = shape.points.slice(0, newPointsCount);
-    return _objectSpread(_objectSpread({}, shape), {}, {
+    const totalPoints = shape.points.slice(0, newPointsCount);
+    return { ...shape,
       points: totalPoints,
-      style: _objectSpread(_objectSpread({}, shape.style), {}, {
+      style: { ...shape.style,
         pointsCount: totalPoints.length
-      })
-    });
+      }
+    };
   } else {
     //TODO : better distribution for new points
-    var nbPointsToAdd = newPointsCount - currentPointsCount;
-
-    var newPoints = _fp["default"].flow(_fp["default"].range(0), _fp["default"].map(function (index) {
-      return [shape.points[0][0] + (shape.points[1][0] - shape.points[0][0]) * (index + 1) / (nbPointsToAdd + 1), shape.points[0][1] + (shape.points[1][1] - shape.points[0][1]) * (index + 1) / (nbPointsToAdd + 1)];
-    }))(nbPointsToAdd);
+    const nbPointsToAdd = newPointsCount - currentPointsCount;
 
-    var _totalPoints = [shape.points[0]].concat((0, _toConsumableArray2["default"])(newPoints), (0, _toConsumableArray2["default"])(shape.points.slice(1, shape.points.length)));
+    const newPoints = _fp.default.flow(_fp.default.range(0), _fp.default.map(index => [shape.points[0][0] + (shape.points[1][0] - shape.points[0][0]) * (index + 1) / (nbPointsToAdd + 1), shape.points[0][1] + (shape.points[1][1] - shape.points[0][1]) * (index + 1) / (nbPointsToAdd + 1)]))(nbPointsToAdd);
 
-    return _objectSpread(_objectSpread({}, shape), {}, {
-      points: _totalPoints,
-      style: _objectSpread(_objectSpread({}, shape.style), {}, {
-        pointsCount: _totalPoints.length
-      })
-    });
+    const totalPoints = [shape.points[0], ...newPoints, ...shape.points.slice(1, shape.points.length)];
+    return { ...shape,
+      points: totalPoints,
+      style: { ...shape.style,
+        pointsCount: totalPoints.length
+      }
+    };
   }
 };
 
 exports.updatePolygonLinesCount = updatePolygonLinesCount;
 
-var resizeCircle = function resizeCircle(cursorPosition, canvasOffset, originalShape, selectionMode, selectionPadding) {
-  var _getShapeInfos4 = (0, _shapeData.getShapeInfos)(originalShape, selectionPadding),
-      center = _getShapeInfos4.center,
-      borders = _getShapeInfos4.borders;
-
-  var cursorPositionBeforeResize = (0, _intersect.getPointPositionAfterCanvasTransformation)(cursorPosition, canvasOffset, originalShape.translation, originalShape.rotation, center);
-  var newCursorPosition = [cursorPositionBeforeResize[0], cursorPositionBeforeResize[1]];
-  var scaledRadius = selectionMode.anchor[1] === 0.5 ? (selectionMode.anchor[0] === 0 ? borders.x + borders.width - newCursorPosition[0] + selectionPadding * (selectionMode.anchor[0] === 0 ? -2 : 2) : newCursorPosition[0] - borders.x - selectionPadding * (selectionMode.anchor[0] === 0 ? -2 : 2)) / 2 : (selectionMode.anchor[1] === 0 ? borders.y + borders.height - newCursorPosition[1] + selectionPadding * (selectionMode.anchor[1] === 0 ? -2 : 2) : newCursorPosition[1] - borders.y - selectionPadding * (selectionMode.anchor[1] === 0 ? -2 : 2)) / 2;
-
-  var shapeWithNewDimensions = _objectSpread(_objectSpread({}, originalShape), {
-    radius: Math.abs(scaledRadius)
-  });
-
-  var _getShapeInfos5 = (0, _shapeData.getShapeInfos)(shapeWithNewDimensions, selectionPadding),
-      shapeWithNewDimensionsCenter = _getShapeInfos5.center;
-
-  var _getCircleOppositeAnc = getCircleOppositeAnchorAbsolutePosition(selectionMode.anchor, center, originalShape),
-      _getCircleOppositeAnc2 = (0, _slicedToArray2["default"])(_getCircleOppositeAnc, 2),
-      oppTrueX = _getCircleOppositeAnc2[0],
-      oppTrueY = _getCircleOppositeAnc2[1];
-
-  var _getCircleOppositeAnc3 = getCircleOppositeAnchorAbsolutePosition(selectionMode.anchor, shapeWithNewDimensionsCenter, shapeWithNewDimensions, [scaledRadius < 0, scaledRadius < 0]),
-      _getCircleOppositeAnc4 = (0, _slicedToArray2["default"])(_getCircleOppositeAnc3, 2),
-      newOppTrueX = _getCircleOppositeAnc4[0],
-      newOppTrueY = _getCircleOppositeAnc4[1];
-
-  return _objectSpread(_objectSpread({}, shapeWithNewDimensions), {
-    translation: [originalShape.translation[0] - (newOppTrueX - oppTrueX), originalShape.translation[1] - (newOppTrueY - oppTrueY)]
-  });
-};
-
-exports.resizeCircle = resizeCircle;
-
-var resizeEllipse = function resizeEllipse(cursorPosition, canvasOffset, originalShape, selectionMode, selectionPadding) {
-  var _getShapeInfos6 = (0, _shapeData.getShapeInfos)(originalShape, selectionPadding),
-      center = _getShapeInfos6.center,
-      borders = _getShapeInfos6.borders;
-
-  var cursorPositionBeforeResize = (0, _intersect.getPointPositionAfterCanvasTransformation)(cursorPosition, canvasOffset, originalShape.translation, originalShape.rotation, center);
-  var newCursorPosition = [cursorPositionBeforeResize[0], cursorPositionBeforeResize[1]];
-  var scaledRadiusX = selectionMode.anchor[0] === 0.5 ? originalShape.radiusX : (selectionMode.anchor[0] === 0 ? borders.x + borders.width - newCursorPosition[0] + selectionPadding * (selectionMode.anchor[0] === 0 ? -2 : 2) : newCursorPosition[0] - borders.x - selectionPadding * (selectionMode.anchor[0] === 0 ? -2 : 2)) / 2;
-  var scaledRadiusY = selectionMode.anchor[1] === 0.5 ? originalShape.radiusY : (selectionMode.anchor[1] === 0 ? borders.y + borders.height - newCursorPosition[1] + selectionPadding * (selectionMode.anchor[1] === 0 ? -2 : 2) : newCursorPosition[1] - borders.y - selectionPadding * (selectionMode.anchor[1] === 0 ? -2 : 2)) / 2;
-
-  var shapeWithNewDimensions = _objectSpread(_objectSpread({}, originalShape), {
-    radiusX: Math.abs(scaledRadiusX),
-    radiusY: Math.abs(scaledRadiusY)
-  });
-
-  var _getShapeInfos7 = (0, _shapeData.getShapeInfos)(shapeWithNewDimensions, selectionPadding),
-      shapeWithNewDimensionsCenter = _getShapeInfos7.center;
-
-  var _getEllipseOppositeAn = getEllipseOppositeAnchorAbsolutePosition(selectionMode.anchor, center, originalShape),
-      _getEllipseOppositeAn2 = (0, _slicedToArray2["default"])(_getEllipseOppositeAn, 2),
-      oppTrueX = _getEllipseOppositeAn2[0],
-      oppTrueY = _getEllipseOppositeAn2[1];
+const transformShape = (ctx, shape, cursorPosition, gridFormat, canvasOffset, selectionMode, selectionPadding, isShiftPressed) => {
+  switch (selectionMode.mode) {
+    case 'brush':
+      return (0, _brush.addNewPointToShape)(shape, cursorPosition);
 
-  var _getEllipseOppositeAn3 = getEllipseOppositeAnchorAbsolutePosition(selectionMode.anchor, shapeWithNewDimensionsCenter, shapeWithNewDimensions, [scaledRadiusX < 0, scaledRadiusY < 0]),
-      _getEllipseOppositeAn4 = (0, _slicedToArray2["default"])(_getEllipseOppositeAn3, 2),
-      newOppTrueX = _getEllipseOppositeAn4[0],
-      newOppTrueY = _getEllipseOppositeAn4[1];
+    case 'translate':
+      return (0, _shapes.translateShape)(cursorPosition, selectionMode.originalShape, selectionMode.cursorStartPosition, gridFormat);
 
-  return _objectSpread(_objectSpread({}, shapeWithNewDimensions), {
-    translation: [originalShape.translation[0] - (newOppTrueX - oppTrueX), originalShape.translation[1] - (newOppTrueY - oppTrueY)]
-  });
-};
-
-exports.resizeEllipse = resizeEllipse;
-
-var resizeRect = function resizeRect(cursorPosition, canvasOffset, originalShape, selectionMode, selectionPadding) {
-  var keepRatio = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : false;
-
-  var _getShapeInfos8 = (0, _shapeData.getShapeInfos)(originalShape, selectionPadding),
-      center = _getShapeInfos8.center,
-      borders = _getShapeInfos8.borders;
-
-  var cursorPositionBeforeResize = (0, _intersect.getPointPositionAfterCanvasTransformation)(cursorPosition, canvasOffset, originalShape.translation, originalShape.rotation, center);
-  var scaledWidth = selectionMode.anchor[0] === 0.5 ? originalShape.width : selectionMode.anchor[0] === 0 ? borders.x + borders.width - cursorPositionBeforeResize[0] + selectionPadding * -2 : cursorPositionBeforeResize[0] - borders.x - selectionPadding * 2;
-  var scaledHeight = selectionMode.anchor[1] === 0.5 ? originalShape.height : selectionMode.anchor[1] === 0 ? borders.y + borders.height - cursorPositionBeforeResize[1] + selectionPadding * -2 : cursorPositionBeforeResize[1] - borders.y - selectionPadding * 2;
-
-  var _ref = keepRatio ? getNormalizedSize(originalShape, scaledWidth, scaledHeight) : [scaledWidth, scaledHeight],
-      _ref2 = (0, _slicedToArray2["default"])(_ref, 2),
-      widthWithRatio = _ref2[0],
-      heightWithRatio = _ref2[1];
-
-  var shapeWithNewDimensions = _objectSpread(_objectSpread({}, originalShape), {}, {
-    width: Math.abs(widthWithRatio),
-    height: Math.abs(heightWithRatio)
-  });
-
-  var _getShapeInfos9 = (0, _shapeData.getShapeInfos)(shapeWithNewDimensions, selectionPadding),
-      shapeWithNewDimensionsCenter = _getShapeInfos9.center;
-
-  var _getRectOppositeAncho5 = getRectOppositeAnchorAbsolutePosition(selectionMode.anchor, center, originalShape),
-      _getRectOppositeAncho6 = (0, _slicedToArray2["default"])(_getRectOppositeAncho5, 2),
-      oppTrueX = _getRectOppositeAncho6[0],
-      oppTrueY = _getRectOppositeAncho6[1];
-
-  var _getRectOppositeAncho7 = getRectOppositeAnchorAbsolutePosition(selectionMode.anchor, shapeWithNewDimensionsCenter, shapeWithNewDimensions, [widthWithRatio < 0, heightWithRatio < 0]),
-      _getRectOppositeAncho8 = (0, _slicedToArray2["default"])(_getRectOppositeAncho7, 2),
-      newOppTrueX = _getRectOppositeAncho8[0],
-      newOppTrueY = _getRectOppositeAncho8[1];
-
-  return _objectSpread(_objectSpread({}, shapeWithNewDimensions), {
-    translation: [originalShape.translation[0] - (newOppTrueX - oppTrueX), originalShape.translation[1] - (newOppTrueY - oppTrueY)]
-  });
-};
-
-exports.resizeRect = resizeRect;
-
-var resizeText = function resizeText(ctx, cursorPosition, canvasOffset, originalShape, selectionMode, selectionPadding) {
-  var _newRect$style$fontBo, _newRect$style, _newRect$style$fontIt, _newRect$style2, _newRect$style3;
-
-  var newRect = resizeRect(cursorPosition, canvasOffset, originalShape, selectionMode, selectionPadding, true);
-  return _objectSpread(_objectSpread({}, newRect), {}, {
-    fontSize: calculateTextFontSize(ctx, newRect.value, newRect.width, (_newRect$style$fontBo = (_newRect$style = newRect.style) === null || _newRect$style === void 0 ? void 0 : _newRect$style.fontBold) !== null && _newRect$style$fontBo !== void 0 ? _newRect$style$fontBo : false, (_newRect$style$fontIt = (_newRect$style2 = newRect.style) === null || _newRect$style2 === void 0 ? void 0 : _newRect$style2.fontItalic) !== null && _newRect$style$fontIt !== void 0 ? _newRect$style$fontIt : false, (_newRect$style3 = newRect.style) === null || _newRect$style3 === void 0 ? void 0 : _newRect$style3.fontFamily)
-  });
-};
-
-exports.resizeText = resizeText;
-
-var getRectOppositeAnchorAbsolutePosition = function getRectOppositeAnchorAbsolutePosition(anchor, center, shape) {
-  var _ref3 = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : [false, false],
-      _ref4 = (0, _slicedToArray2["default"])(_ref3, 2),
-      negW = _ref4[0],
-      negH = _ref4[1];
-
-  var oppositeX = (anchor[0] === 0.5 ? shape.x + shape.width / 2 : anchor[0] === 0 ? shape.x + (negW ? 0 : shape.width) : shape.x + (negW ? shape.width : 0)) + shape.translation[0];
-  var oppositeY = (anchor[1] === 0.5 ? shape.y + shape.height / 2 : anchor[1] === 0 ? shape.y + (negH ? 0 : shape.height) : shape.y + (negH ? shape.height : 0)) + shape.translation[1];
-  return (0, _intersect.getPointPositionBeforeCanvasTransformation)([oppositeX, oppositeY], shape.translation, shape.rotation, center);
-};
-
-var getEllipseOppositeAnchorAbsolutePosition = function getEllipseOppositeAnchorAbsolutePosition(anchor, center, shape) {
-  var _ref5 = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : [false, false],
-      _ref6 = (0, _slicedToArray2["default"])(_ref5, 2),
-      negW = _ref6[0],
-      negH = _ref6[1];
-
-  var oppositeX = (anchor[0] === 0.5 ? shape.x + shape.radiusX / 2 : anchor[0] === 0 ? shape.x + (negW ? -shape.radiusX : shape.radiusX) : shape.x + (negW ? shape.radiusX : -shape.radiusX)) + shape.translation[0];
-  var oppositeY = (anchor[1] === 0.5 ? shape.y + shape.radiusY / 2 : anchor[1] === 0 ? shape.y + (negH ? -shape.radiusY : shape.radiusY) : shape.y + (negH ? shape.radiusY : -shape.radiusY)) + shape.translation[1];
-  return (0, _intersect.getPointPositionBeforeCanvasTransformation)([oppositeX, oppositeY], shape.translation, shape.rotation, center);
-};
+    case 'rotate':
+      return (0, _shapes.rotateShape)(shape, cursorPosition, selectionMode.originalShape, selectionMode.cursorStartPosition, selectionMode.center, gridFormat);
 
-var getCircleOppositeAnchorAbsolutePosition = function getCircleOppositeAnchorAbsolutePosition(anchor, center, shape) {
-  var _ref7 = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : [false, false],
-      _ref8 = (0, _slicedToArray2["default"])(_ref7, 2),
-      negW = _ref8[0],
-      negH = _ref8[1];
+    case 'resize':
+      const roundCursorPosition = [roundForGrid(cursorPosition[0], gridFormat), roundForGrid(cursorPosition[1], gridFormat)];
+      return (0, _shapes.resizeShape)(ctx, shape, roundCursorPosition, canvasOffset, selectionMode.originalShape, selectionMode, selectionPadding, isShiftPressed);
 
-  var oppositeX = (anchor[0] === 0.5 ? shape.x : anchor[0] === 0 ? shape.x + (negW ? -shape.radius : shape.radius) : shape.x + (negW ? shape.radius : -shape.radius)) + shape.translation[0];
-  var oppositeY = (anchor[1] === 0.5 ? shape.y : anchor[1] === 0 ? shape.y + (negH ? -shape.radius : shape.radius) : shape.y + (negH ? shape.radius : -shape.radius)) + shape.translation[1];
-  return (0, _intersect.getPointPositionBeforeCanvasTransformation)([oppositeX, oppositeY], shape.translation, shape.rotation, center);
-};
-
-var resizePicture = function resizePicture(cursorPosition, canvasOffset, originalShape, selectionMode, selectionPadding) {
-  return resizeRect(cursorPosition, canvasOffset, originalShape, selectionMode, selectionPadding, true);
-};
-
-exports.resizePicture = resizePicture;
-
-var resizeShape = function resizeShape(ctx, shape, cursorPosition, canvasOffset, originalShape, selectionMode, selectionPadding) {
-  if (shape.type === 'line' || shape.type === 'polygon' || shape.type === 'curve') return resizeLine(cursorPosition, canvasOffset, originalShape, selectionMode, selectionPadding);else if (shape.type === 'brush') return resizeBrush(cursorPosition, canvasOffset, originalShape, selectionMode, selectionPadding);else if (shape.type === 'circle') return resizeCircle(cursorPosition, canvasOffset, originalShape, selectionMode, selectionPadding);else if (shape.type === 'ellipse') return resizeEllipse(cursorPosition, canvasOffset, originalShape, selectionMode, selectionPadding);else if (shape.type === 'rect') return resizeRect(cursorPosition, canvasOffset, originalShape, selectionMode, selectionPadding);else if (shape.type === 'square') return resizeRect(cursorPosition, canvasOffset, originalShape, selectionMode, selectionPadding, true);else if (shape.type === 'text') return resizeText(ctx, cursorPosition, canvasOffset, originalShape, selectionMode, selectionPadding);else if (shape.type === 'picture') return resizePicture(cursorPosition, canvasOffset, originalShape, selectionMode, selectionPadding);
-  return shape;
-};
-
-exports.resizeShape = resizeShape;
-
-var transformShape = function transformShape(ctx, shape, cursorPosition, canvasOffset, selectionMode, selectionPadding) {
-  if (selectionMode.mode === _Mode.SelectionModeLib.brush) {
-    return paintNewPointToShape(shape, cursorPosition);
-  } else if (selectionMode.mode === _Mode.SelectionModeLib.translate) {
-    return translateShape(shape, cursorPosition, selectionMode.originalShape, selectionMode.cursorStartPosition);
-  } else if (selectionMode.mode === _Mode.SelectionModeLib.rotate) {
-    return rotateShape(shape, cursorPosition, selectionMode.originalShape, selectionMode.cursorStartPosition, selectionMode.center);
-  } else if (selectionMode.mode === _Mode.SelectionModeLib.resize) {
-    return resizeShape(ctx, shape, cursorPosition, canvasOffset, selectionMode.originalShape, selectionMode, selectionPadding);
+    default:
+      return shape;
   }
-
-  return shape;
 };
 
 exports.transformShape = transformShape;
 
-var calculateTextFontSize = function calculateTextFontSize(ctx, text, maxWidth, fontBold, fontItalic) {
-  var _$flow;
-
-  var fontFamily = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : _style.STYLE_FONT_DEFAULT;
-  ctx.font = "".concat(fontItalic ? 'italic' : '', " ").concat(fontBold ? 'bold' : '', " 1px ").concat(fontFamily);
-  return (_$flow = _fp["default"].flow(_fp["default"].map(function (value) {
-    return maxWidth / ctx.measureText(value).width;
-  }), _fp["default"].min)(text)) !== null && _$flow !== void 0 ? _$flow : _style.STYLE_FONT_SIZE_DEFAULT;
-};
-
-exports.calculateTextFontSize = calculateTextFontSize;
-
-var calculateTextWidth = function calculateTextWidth(ctx, text, fontSize, fontBold, fontItalic) {
-  var _$flow2;
-
-  var fontFamily = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : _style.STYLE_FONT_DEFAULT;
-  ctx.font = "".concat(fontItalic ? 'italic' : '', " ").concat(fontBold ? 'bold' : '', " ").concat(fontSize, "px ").concat(fontFamily);
-  return (_$flow2 = _fp["default"].flow(_fp["default"].map(function (value) {
-    return ctx.measureText(value).width;
-  }), _fp["default"].max)(text)) !== null && _$flow2 !== void 0 ? _$flow2 : 20;
-};
-
-exports.calculateTextWidth = calculateTextWidth;
-
-var degreesToRadians = function degreesToRadians(degrees) {
-  return degrees * (Math.PI / 180);
-};
-
-exports.degreesToRadians = degreesToRadians;
-
-var radiansToDegrees = function radiansToDegrees(radians) {
-  return radians * 180 / Math.PI;
-};
-
-exports.radiansToDegrees = radiansToDegrees;
-
-var fitContentInsideContainer = function fitContentInsideContainer(contentWidth, contentHeight, containerWidth, containerHeight) {
-  var shouldFillContainer = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : false;
-  var contentRatio = contentWidth / contentHeight;
-  var containerRatio = containerWidth / containerHeight;
+const fitContentInsideContainer = function (contentWidth, contentHeight, containerWidth, containerHeight) {
+  let shouldFillContainer = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : false;
+  const contentRatio = contentWidth / contentHeight;
+  const containerRatio = containerWidth / containerHeight;
 
   if (contentRatio > containerRatio) {
-    var newWidth = shouldFillContainer ? containerWidth : Math.min(contentWidth, containerWidth);
+    const newWidth = shouldFillContainer ? containerWidth : Math.min(contentWidth, containerWidth);
     return [newWidth, newWidth / contentRatio];
   } else {
-    var newHeight = shouldFillContainer ? containerHeight : Math.min(contentHeight, containerHeight);
+    const newHeight = shouldFillContainer ? containerHeight : Math.min(contentHeight, containerHeight);
     return [newHeight * contentRatio, newHeight];
   }
 };