@yorab/react-paint 0.6.3 → 0.6.6

package/dist/utils/transform.js

@@ -7,12 +7,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 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"));
-
 var _fp = _interopRequireDefault(require("lodash/fp"));
 
 var _shapeData = require("./shapeData");
@@ -23,13 +17,9 @@ 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; }
-
-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 getNormalizedSize = function getNormalizedSize(originalShape, width, height) {
-  var originalRatio = originalShape.width / originalShape.height;
-  var newRatio = width / height;
+const getNormalizedSize = (originalShape, width, height) => {
+  const originalRatio = originalShape.width / originalShape.height;
+  const newRatio = width / height;
 
   if (newRatio > originalRatio || height < 0) {
     return width > originalShape.width ? [width, width / originalRatio] : [height * originalRatio, height];
@@ -42,294 +32,256 @@ 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]]
-  });
+const translateShape = (shape, cursorPosition, originalShape, originalCursorPosition) => {
+  return { ...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
-  });
+const rotateShape = (shape, cursorPosition, originalShape, originalCursorPosition, shapeCenter) => {
+  const p1x = shapeCenter[0] + originalShape.translation[0] - originalCursorPosition[0];
+  const p1y = shapeCenter[1] + originalShape.translation[1] - originalCursorPosition[1];
+  const p2x = shapeCenter[0] + originalShape.translation[0] - cursorPosition[0];
+  const p2y = shapeCenter[1] + originalShape.translation[1] - cursorPosition[1];
+  const rotation = originalShape.rotation + Math.atan2(p2y, p2x) - Math.atan2(p1y, p1x);
+  return { ...shape,
+    ...{
+      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)
-  });
+const paintNewPointToShape = (shape, cursorPosition) => {
+  return { ...shape,
+    ...{
+      points: _fp.default.set(shape.points.length - 1, [...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)
-  });
+const createNewPointGroupToShape = (shape, cursorPosition) => {
+  return { ...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];
-      });
+const resizeBrush = (cursorPosition, canvasOffset, originalShape, selectionMode, selectionPadding) => {
+  const {
+    center,
+    borders
+  } = (0, _shapeData.getShapeInfos)(originalShape, selectionPadding);
+  const cursorPositionBeforeResize = (0, _intersect.getPointPositionAfterCanvasTransformation)(cursorPosition, canvasOffset, originalShape.translation, originalShape.rotation, center);
+  const 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);
+  const 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);
+  const shapeWithNewDimensions = { ...originalShape,
+    points: originalShape.points.map(points => {
+      return points.map(point => [(point[0] - borders.x) * scaledWidth + borders.x, (point[1] - borders.y) * scaledHeight + borders.y]);
     })
+  };
+  const {
+    center: shapeWithNewDimensionsCenter,
+    borders: shapeWithNewDimensionsBorders
+  } = (0, _shapeData.getShapeInfos)(shapeWithNewDimensions, selectionPadding);
+  const [oppTrueX, oppTrueY] = getRectOppositeAnchorAbsolutePosition(selectionMode.anchor, center, { ...originalShape,
+    ...borders
   });
-
-  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)]
-  });
+  const [newOppTrueX, newOppTrueY] = getRectOppositeAnchorAbsolutePosition(selectionMode.anchor, shapeWithNewDimensionsCenter, { ...shapeWithNewDimensions,
+    ...shapeWithNewDimensionsBorders
+  }, [scaledWidth < 0, scaledHeight < 0]);
+  return { ...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);
+const resizeLine = (cursorPosition, canvasOffset, originalShape, selectionMode, selectionPadding) => {
+  const {
+    center
+  } = (0, _shapeData.getShapeInfos)(originalShape, selectionPadding);
+  const cursorPositionBeforeResize = (0, _intersect.getPointPositionAfterCanvasTransformation)(cursorPosition, canvasOffset, originalShape.translation, originalShape.rotation, center);
 
-  var updatedShape = _fp["default"].set(['points', selectionMode.anchor], cursorPositionBeforeResize, originalShape);
+  const updatedShape = _fp.default.set(['points', selectionMode.anchor], cursorPositionBeforeResize, originalShape);
 
   return updatedShape;
 };
 
 exports.resizeLine = resizeLine;
 
-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;
+    const 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 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);
 
-    var _totalPoints = [shape.points[0]].concat((0, _toConsumableArray2["default"])(newPoints), (0, _toConsumableArray2["default"])(shape.points.slice(1, shape.points.length)));
-
-    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)]
-  });
+const resizeCircle = (cursorPosition, canvasOffset, originalShape, selectionMode, selectionPadding) => {
+  const {
+    center,
+    borders
+  } = (0, _shapeData.getShapeInfos)(originalShape, selectionPadding);
+  const cursorPositionBeforeResize = (0, _intersect.getPointPositionAfterCanvasTransformation)(cursorPosition, canvasOffset, originalShape.translation, originalShape.rotation, center);
+  const newCursorPosition = [cursorPositionBeforeResize[0], cursorPositionBeforeResize[1]];
+  const 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;
+  const shapeWithNewDimensions = { ...originalShape,
+    ...{
+      radius: Math.abs(scaledRadius)
+    }
+  };
+  const {
+    center: shapeWithNewDimensionsCenter
+  } = (0, _shapeData.getShapeInfos)(shapeWithNewDimensions, selectionPadding);
+  const [oppTrueX, oppTrueY] = getCircleOppositeAnchorAbsolutePosition(selectionMode.anchor, center, originalShape);
+  const [newOppTrueX, newOppTrueY] = getCircleOppositeAnchorAbsolutePosition(selectionMode.anchor, shapeWithNewDimensionsCenter, shapeWithNewDimensions, [scaledRadius < 0, scaledRadius < 0]);
+  return { ...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];
-
-  var _getEllipseOppositeAn3 = getEllipseOppositeAnchorAbsolutePosition(selectionMode.anchor, shapeWithNewDimensionsCenter, shapeWithNewDimensions, [scaledRadiusX < 0, scaledRadiusY < 0]),
-      _getEllipseOppositeAn4 = (0, _slicedToArray2["default"])(_getEllipseOppositeAn3, 2),
-      newOppTrueX = _getEllipseOppositeAn4[0],
-      newOppTrueY = _getEllipseOppositeAn4[1];
-
-  return _objectSpread(_objectSpread({}, shapeWithNewDimensions), {
-    translation: [originalShape.translation[0] - (newOppTrueX - oppTrueX), originalShape.translation[1] - (newOppTrueY - oppTrueY)]
-  });
+const resizeEllipse = (cursorPosition, canvasOffset, originalShape, selectionMode, selectionPadding) => {
+  const {
+    center,
+    borders
+  } = (0, _shapeData.getShapeInfos)(originalShape, selectionPadding);
+  const cursorPositionBeforeResize = (0, _intersect.getPointPositionAfterCanvasTransformation)(cursorPosition, canvasOffset, originalShape.translation, originalShape.rotation, center);
+  const newCursorPosition = [cursorPositionBeforeResize[0], cursorPositionBeforeResize[1]];
+  const 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;
+  const 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;
+  const shapeWithNewDimensions = { ...originalShape,
+    ...{
+      radiusX: Math.abs(scaledRadiusX),
+      radiusY: Math.abs(scaledRadiusY)
+    }
+  };
+  const {
+    center: shapeWithNewDimensionsCenter
+  } = (0, _shapeData.getShapeInfos)(shapeWithNewDimensions, selectionPadding);
+  const [oppTrueX, oppTrueY] = getEllipseOppositeAnchorAbsolutePosition(selectionMode.anchor, center, originalShape);
+  const [newOppTrueX, newOppTrueY] = getEllipseOppositeAnchorAbsolutePosition(selectionMode.anchor, shapeWithNewDimensionsCenter, shapeWithNewDimensions, [scaledRadiusX < 0, scaledRadiusY < 0]);
+  return { ...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), {}, {
+const resizeRect = function (cursorPosition, canvasOffset, originalShape, selectionMode, selectionPadding) {
+  let keepRatio = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : false;
+  const {
+    center,
+    borders
+  } = (0, _shapeData.getShapeInfos)(originalShape, selectionPadding);
+  const cursorPositionBeforeResize = (0, _intersect.getPointPositionAfterCanvasTransformation)(cursorPosition, canvasOffset, originalShape.translation, originalShape.rotation, center);
+  const 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;
+  const 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;
+  const [widthWithRatio, heightWithRatio] = keepRatio ? getNormalizedSize(originalShape, scaledWidth, scaledHeight) : [scaledWidth, scaledHeight];
+  const shapeWithNewDimensions = { ...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)]
-  });
+  };
+  const {
+    center: shapeWithNewDimensionsCenter
+  } = (0, _shapeData.getShapeInfos)(shapeWithNewDimensions, selectionPadding);
+  const [oppTrueX, oppTrueY] = getRectOppositeAnchorAbsolutePosition(selectionMode.anchor, center, originalShape);
+  const [newOppTrueX, newOppTrueY] = getRectOppositeAnchorAbsolutePosition(selectionMode.anchor, shapeWithNewDimensionsCenter, shapeWithNewDimensions, [widthWithRatio < 0, heightWithRatio < 0]);
+  return { ...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) {
+const 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), {}, {
+  const newRect = resizeRect(cursorPosition, canvasOffset, originalShape, selectionMode, selectionPadding, true);
+  return { ...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];
+const getRectOppositeAnchorAbsolutePosition = function (anchor, center, shape) {
+  let [negW, negH] = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : [false, false];
+  const 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];
+  const 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];
+const getEllipseOppositeAnchorAbsolutePosition = function (anchor, center, shape) {
+  let [negW, negH] = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : [false, false];
+  const 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];
+  const 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);
 };
 
-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];
-
-  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];
+const getCircleOppositeAnchorAbsolutePosition = function (anchor, center, shape) {
+  let [negW, negH] = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : [false, false];
+  const 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];
+  const 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) {
+const 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) {
+const 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) {
+const transformShape = (ctx, shape, cursorPosition, canvasOffset, selectionMode, selectionPadding) => {
   if (selectionMode.mode === _Mode.SelectionModeLib.brush) {
     return paintNewPointToShape(shape, cursorPosition);
   } else if (selectionMode.mode === _Mode.SelectionModeLib.translate) {
@@ -345,52 +297,44 @@ var transformShape = function transformShape(ctx, shape, cursorPosition, canvasO
 
 exports.transformShape = transformShape;
 
-var calculateTextFontSize = function calculateTextFontSize(ctx, text, maxWidth, fontBold, fontItalic) {
+const calculateTextFontSize = function (ctx, text, maxWidth, fontBold, fontItalic) {
   var _$flow;
 
-  var fontFamily = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : _style.STYLE_FONT_DEFAULT;
+  let 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;
+  return (_$flow = _fp.default.flow(_fp.default.map(value => 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) {
+const calculateTextWidth = function (ctx, text, fontSize, fontBold, fontItalic) {
   var _$flow2;
 
-  var fontFamily = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : _style.STYLE_FONT_DEFAULT;
+  let 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;
+  return (_$flow2 = _fp.default.flow(_fp.default.map(value => 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);
-};
+const degreesToRadians = degrees => degrees * (Math.PI / 180);
 
 exports.degreesToRadians = degreesToRadians;
 
-var radiansToDegrees = function radiansToDegrees(radians) {
-  return radians * 180 / Math.PI;
-};
+const radiansToDegrees = radians => 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];
   }
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yorab/react-paint",
-  "version": "0.6.3",
+  "version": "0.6.6",
   "keywords": [],
   "author": "Yohann Rabatel",
   "license": "MIT",
@@ -12,9 +12,7 @@
     "dist/"
   ],
   "dependencies": {
-    "@linaria/core": "^3.0.0-beta.15",
-    "@linaria/react": "^3.0.0-beta.15",
-    "lodash": "^4.17.20"
+    "@linaria/react": "^3.0.0-beta.15"
   },
   "devDependencies": {
     "@babel/cli": "7.12.8",
@@ -25,6 +23,7 @@
     "@babel/preset-typescript": "^7.16.7",
     "@babel/runtime": "^7.16.7",
     "@linaria/babel-preset": "^3.0.0-beta.15",
+    "@linaria/core": "^3.0.0-beta.15",
     "@linaria/shaker": "^3.0.0-beta.15",
     "@linaria/webpack-loader": "^3.0.0-beta.16",
     "@testing-library/jest-dom": "^5.11.4",
@@ -49,6 +48,7 @@
     "eslint-plugin-react-hooks": "^4.2.0",
     "html-webpack-plugin": "^5.5.0",
     "mini-css-extract-plugin": "^2.6.0",
+    "lodash": "^4.17.20",
     "prettier": "^2.3.2",
     "react": "18.1.0",
     "react-dom": "18.1.0",
@@ -58,6 +58,7 @@
     "webpack-dev-server": "^4.7.3"
   },
   "peerDependencies": {
+    "lodash" : "*",
     "react": "*",
     "react-dom": "*"
   },