@yorab/react-paint 0.2.2

package/dist/utils/transform.d.ts

@@ -0,0 +1,271 @@
+import { SelectionModeData, SelectionModeResize } from 'types/Mode';
+import { DrawableCircle, DrawableEllipse, Point, DrawableShape, DrawablePicture, Rect, DrawableLine, DrawablePolygon, DrawableBrush, DrawableCurve } from 'types/Shapes';
+export declare const getNormalizedSize: (originalShape: Rect, width: number, height: number) => number[];
+export declare const translateShape: (shape: DrawableShape, cursorPosition: Point, originalShape: DrawableShape, originalCursorPosition: Point) => DrawableShape;
+export declare const rotateShape: (shape: DrawableShape, cursorPosition: Point, originalShape: DrawableShape, originalCursorPosition: Point, shapeCenter: Point) => {
+    rotation: number;
+    visible?: boolean | undefined;
+    locked?: boolean | undefined;
+    style?: {
+        fillColor?: string | undefined;
+        globalAlpha?: number | undefined;
+        strokeColor?: string | undefined;
+        lineWidth?: number | undefined;
+        lineDash?: number | undefined;
+        lineArrow?: number | undefined;
+        pointsCount?: number | undefined;
+        fontFamily?: string | undefined;
+    } | undefined;
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    id: string;
+    translation: Point;
+    type: import("types/Shapes").ShapeEnum.rect;
+} | {
+    rotation: number;
+    visible?: boolean | undefined;
+    locked?: boolean | undefined;
+    style?: {
+        fillColor?: string | undefined;
+        globalAlpha?: number | undefined;
+        strokeColor?: string | undefined;
+        lineWidth?: number | undefined;
+        lineDash?: number | undefined;
+        lineArrow?: number | undefined;
+        pointsCount?: number | undefined;
+        fontFamily?: string | undefined;
+    } | undefined;
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    id: string;
+    translation: Point;
+    type: import("types/Shapes").ShapeEnum.square;
+} | {
+    rotation: number;
+    visible?: boolean | undefined;
+    locked?: boolean | undefined;
+    style?: {
+        fillColor?: string | undefined;
+        globalAlpha?: number | undefined;
+        strokeColor?: string | undefined;
+        lineWidth?: number | undefined;
+        lineDash?: number | undefined;
+        lineArrow?: number | undefined;
+        pointsCount?: number | undefined;
+        fontFamily?: string | undefined;
+    } | undefined;
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    src: string;
+    img: HTMLImageElement;
+    id: string;
+    translation: Point;
+    type: import("types/Shapes").ShapeEnum.picture;
+} | {
+    rotation: number;
+    visible?: boolean | undefined;
+    locked?: boolean | undefined;
+    style?: {
+        fillColor?: string | undefined;
+        globalAlpha?: number | undefined;
+        strokeColor?: string | undefined;
+        lineWidth?: number | undefined;
+        lineDash?: number | undefined;
+        lineArrow?: number | undefined;
+        pointsCount?: number | undefined;
+        fontFamily?: string | undefined;
+    } | undefined;
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    value: string[];
+    fontSize: number;
+    id: string;
+    translation: Point;
+    type: import("types/Shapes").ShapeEnum.text;
+} | {
+    rotation: number;
+    visible?: boolean | undefined;
+    locked?: boolean | undefined;
+    style?: {
+        fillColor?: string | undefined;
+        globalAlpha?: number | undefined;
+        strokeColor?: string | undefined;
+        lineWidth?: number | undefined;
+        lineDash?: number | undefined;
+        lineArrow?: number | undefined;
+        pointsCount?: number | undefined;
+        fontFamily?: string | undefined;
+    } | undefined;
+    points: [Point, Point];
+    id: string;
+    translation: Point;
+    type: import("types/Shapes").ShapeEnum.line;
+} | {
+    rotation: number;
+    visible?: boolean | undefined;
+    locked?: boolean | undefined;
+    style?: {
+        fillColor?: string | undefined;
+        globalAlpha?: number | undefined;
+        strokeColor?: string | undefined;
+        lineWidth?: number | undefined;
+        lineDash?: number | undefined;
+        lineArrow?: number | undefined;
+        pointsCount?: number | undefined;
+        fontFamily?: string | undefined;
+    } | undefined;
+    points: Point[];
+    id: string;
+    translation: Point;
+    type: import("types/Shapes").ShapeEnum.polygon;
+} | {
+    rotation: number;
+    visible?: boolean | undefined;
+    locked?: boolean | undefined;
+    style?: {
+        fillColor?: string | undefined;
+        globalAlpha?: number | undefined;
+        strokeColor?: string | undefined;
+        lineWidth?: number | undefined;
+        lineDash?: number | undefined;
+        lineArrow?: number | undefined;
+        pointsCount?: number | undefined;
+        fontFamily?: string | undefined;
+    } | undefined;
+    points: Point[];
+    id: string;
+    translation: Point;
+    type: import("types/Shapes").ShapeEnum.curve;
+} | {
+    rotation: number;
+    visible?: boolean | undefined;
+    locked?: boolean | undefined;
+    style?: {
+        fillColor?: string | undefined;
+        globalAlpha?: number | undefined;
+        strokeColor?: string | undefined;
+        lineWidth?: number | undefined;
+        lineDash?: number | undefined;
+        lineArrow?: number | undefined;
+        pointsCount?: number | undefined;
+        fontFamily?: string | undefined;
+    } | undefined;
+    points: Point[][];
+    id: string;
+    translation: Point;
+    type: import("types/Shapes").ShapeEnum.brush;
+} | {
+    rotation: number;
+    visible?: boolean | undefined;
+    locked?: boolean | undefined;
+    style?: {
+        fillColor?: string | undefined;
+        globalAlpha?: number | undefined;
+        strokeColor?: string | undefined;
+        lineWidth?: number | undefined;
+        lineDash?: number | undefined;
+        lineArrow?: number | undefined;
+        pointsCount?: number | undefined;
+        fontFamily?: string | undefined;
+    } | undefined;
+    x: number;
+    y: number;
+    radius: number;
+    id: string;
+    translation: Point;
+    type: import("types/Shapes").ShapeEnum.circle;
+} | {
+    rotation: number;
+    visible?: boolean | undefined;
+    locked?: boolean | undefined;
+    style?: {
+        fillColor?: string | undefined;
+        globalAlpha?: number | undefined;
+        strokeColor?: string | undefined;
+        lineWidth?: number | undefined;
+        lineDash?: number | undefined;
+        lineArrow?: number | undefined;
+        pointsCount?: number | undefined;
+        fontFamily?: string | undefined;
+    } | undefined;
+    x: number;
+    y: number;
+    radiusX: number;
+    radiusY: number;
+    id: string;
+    translation: Point;
+    type: import("types/Shapes").ShapeEnum.ellipse;
+};
+export declare const paintNewPointToShape: (shape: DrawableBrush, cursorPosition: Point) => {
+    points: Point[][];
+    visible?: boolean | undefined;
+    locked?: boolean | undefined;
+    style?: {
+        fillColor?: string | undefined;
+        globalAlpha?: number | undefined;
+        strokeColor?: string | undefined;
+        lineWidth?: number | undefined;
+        lineDash?: number | undefined;
+        lineArrow?: number | undefined;
+        pointsCount?: number | undefined;
+        fontFamily?: string | undefined;
+    } | undefined;
+    id: string;
+    translation: Point;
+    rotation: number;
+    type: import("types/Shapes").ShapeEnum.brush;
+};
+export declare const createNewPointGroupToShape: (shape: DrawableBrush, cursorPosition: Point) => {
+    points: Point[][];
+    visible?: boolean | undefined;
+    locked?: boolean | undefined;
+    style?: {
+        fillColor?: string | undefined;
+        globalAlpha?: number | undefined;
+        strokeColor?: string | undefined;
+        lineWidth?: number | undefined;
+        lineDash?: number | undefined;
+        lineArrow?: number | undefined;
+        pointsCount?: number | undefined;
+        fontFamily?: string | undefined;
+    } | undefined;
+    id: string;
+    translation: Point;
+    rotation: number;
+    type: import("types/Shapes").ShapeEnum.brush;
+};
+export declare const resizeBrush: (cursorPosition: Point, canvasOffset: Point, originalShape: DrawableBrush, selectionMode: SelectionModeResize) => DrawableBrush;
+export declare const resizeLine: (cursorPosition: Point, canvasOffset: Point, originalShape: DrawableLine | DrawablePolygon | DrawableCurve, selectionMode: SelectionModeResize<number>) => DrawableLine | DrawablePolygon | DrawableCurve;
+export declare const updatePolygonLinesCount: (shape: DrawablePolygon, newPointsCount: number) => DrawablePolygon;
+export declare const resizeCircle: (cursorPosition: Point, canvasOffset: Point, originalShape: DrawableCircle, selectionMode: SelectionModeResize) => DrawableCircle;
+export declare const resizeEllipse: (cursorPosition: Point, canvasOffset: Point, originalShape: DrawableEllipse, selectionMode: SelectionModeResize) => DrawableEllipse;
+export declare const resizeRect: <T extends DrawableShape & import("types/Shapes").StyledShape & {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}>(cursorPosition: Point, canvasOffset: Point, originalShape: T, selectionMode: SelectionModeResize, keepRatio?: boolean) => T;
+export declare const resizeText: <T extends DrawableShape & import("types/Shapes").StyledShape & {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+} & {
+    value: string[];
+    fontSize: number;
+}>(ctx: CanvasRenderingContext2D, cursorPosition: Point, canvasOffset: Point, originalShape: T, selectionMode: SelectionModeResize) => T;
+export declare const resizePicture: (cursorPosition: Point, canvasOffset: Point, originalShape: DrawablePicture, selectionMode: SelectionModeResize) => DrawablePicture;
+export declare const resizeShape: (ctx: CanvasRenderingContext2D, shape: DrawableShape, cursorPosition: Point, canvasOffset: Point, originalShape: DrawableShape, selectionMode: SelectionModeData<Point | number>) => DrawableShape;
+export declare const transformShape: (ctx: CanvasRenderingContext2D, shape: DrawableShape, cursorPosition: Point, canvasOffset: Point, selectionMode: SelectionModeData<Point | number>) => DrawableShape;
+export declare const calculateTextFontSize: (ctx: CanvasRenderingContext2D, text: string[], maxWidth: number, fontFamily?: string | undefined) => number;
+export declare const calculateTextWidth: (ctx: CanvasRenderingContext2D, text: string[], fontSize: number, fontFamily?: string | undefined) => number;
+export declare const degreesToRadians: (degrees: number) => number;
+export declare const radiansToDegrees: (radians: number) => number;

package/dist/utils/transform.js

@@ -0,0 +1,371 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+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.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");
+
+var _shapes = require("../constants/shapes");
+
+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; }
+
+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;
+
+  if (newRatio > originalRatio || height < 0) {
+    return width > originalShape.width ? [width, width / originalRatio] : [height * originalRatio, height];
+  } else if (newRatio < originalRatio) {
+    return height > originalShape.height ? [height * originalRatio, height] : [width, width / originalRatio];
+  }
+
+  return [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) {
+  var _getShapeInfos = (0, _shapeData.getShapeInfos)(originalShape),
+      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] + _shapes.SELECTION_PADDING * -2) / (borders.width + _shapes.SELECTION_PADDING * -2) : (cursorPositionBeforeResize[0] - borders.x - _shapes.SELECTION_PADDING * 2) / (borders.width - _shapes.SELECTION_PADDING * 2);
+  var scaledHeight = selectionMode.anchor[1] === 0.5 ? 1 : selectionMode.anchor[1] === 0 ? (borders.y + borders.height - cursorPositionBeforeResize[1] + _shapes.SELECTION_PADDING * -2) / (borders.height + _shapes.SELECTION_PADDING * -2) : (cursorPositionBeforeResize[1] - borders.y - _shapes.SELECTION_PADDING * 2) / (borders.height - _shapes.SELECTION_PADDING * 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),
+      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) {
+  var _getShapeInfos3 = (0, _shapeData.getShapeInfos)(originalShape),
+      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;
+};
+
+exports.resizeLine = resizeLine;
+
+var updatePolygonLinesCount = function updatePolygonLinesCount(shape, newPointsCount) {
+  var currentPointsCount = shape.points.length;
+  if (currentPointsCount === newPointsCount) return shape;
+
+  if (currentPointsCount > newPointsCount) {
+    return _fp["default"].set('points', shape.points.slice(0, newPointsCount), shape);
+  } 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);
+
+    return _fp["default"].set('points', [shape.points[0]].concat((0, _toConsumableArray2["default"])(newPoints), (0, _toConsumableArray2["default"])(shape.points.slice(1, shape.points.length))), shape);
+  }
+};
+
+exports.updatePolygonLinesCount = updatePolygonLinesCount;
+
+var resizeCircle = function resizeCircle(cursorPosition, canvasOffset, originalShape, selectionMode) {
+  var _getShapeInfos4 = (0, _shapeData.getShapeInfos)(originalShape),
+      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] + _shapes.SELECTION_PADDING * (selectionMode.anchor[0] === 0 ? -2 : 2) : newCursorPosition[0] - borders.x - _shapes.SELECTION_PADDING * (selectionMode.anchor[0] === 0 ? -2 : 2)) / 2 : (selectionMode.anchor[1] === 0 ? borders.y + borders.height - newCursorPosition[1] + _shapes.SELECTION_PADDING * (selectionMode.anchor[1] === 0 ? -2 : 2) : newCursorPosition[1] - borders.y - _shapes.SELECTION_PADDING * (selectionMode.anchor[1] === 0 ? -2 : 2)) / 2;
+
+  var shapeWithNewDimensions = _objectSpread(_objectSpread({}, originalShape), {
+    radius: Math.abs(scaledRadius)
+  });
+
+  var _getShapeInfos5 = (0, _shapeData.getShapeInfos)(shapeWithNewDimensions),
+      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) {
+  var _getShapeInfos6 = (0, _shapeData.getShapeInfos)(originalShape),
+      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] + _shapes.SELECTION_PADDING * (selectionMode.anchor[0] === 0 ? -2 : 2) : newCursorPosition[0] - borders.x - _shapes.SELECTION_PADDING * (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] + _shapes.SELECTION_PADDING * (selectionMode.anchor[1] === 0 ? -2 : 2) : newCursorPosition[1] - borders.y - _shapes.SELECTION_PADDING * (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),
+      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)]
+  });
+};
+
+exports.resizeEllipse = resizeEllipse;
+
+var resizeRect = function resizeRect(cursorPosition, canvasOffset, originalShape, selectionMode) {
+  var keepRatio = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : false;
+
+  var _getShapeInfos8 = (0, _shapeData.getShapeInfos)(originalShape),
+      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] + _shapes.SELECTION_PADDING * -2 : cursorPositionBeforeResize[0] - borders.x - _shapes.SELECTION_PADDING * 2;
+  var scaledHeight = selectionMode.anchor[1] === 0.5 ? originalShape.height : selectionMode.anchor[1] === 0 ? borders.y + borders.height - cursorPositionBeforeResize[1] + _shapes.SELECTION_PADDING * -2 : cursorPositionBeforeResize[1] - borders.y - _shapes.SELECTION_PADDING * 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),
+      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) {
+  var _newRect$style;
+
+  var newRect = resizeRect(cursorPosition, canvasOffset, originalShape, selectionMode, true);
+  return _objectSpread(_objectSpread({}, newRect), {}, {
+    fontSize: calculateTextFontSize(ctx, newRect.value, newRect.width, (_newRect$style = newRect.style) === null || _newRect$style === void 0 ? void 0 : _newRect$style.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);
+};
+
+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];
+  return (0, _intersect.getPointPositionBeforeCanvasTransformation)([oppositeX, oppositeY], shape.translation, shape.rotation, center);
+};
+
+var resizePicture = function resizePicture(cursorPosition, canvasOffset, originalShape, selectionMode) {
+  return resizeRect(cursorPosition, canvasOffset, originalShape, selectionMode, true);
+};
+
+exports.resizePicture = resizePicture;
+
+var resizeShape = function resizeShape(ctx, shape, cursorPosition, canvasOffset, originalShape, selectionMode) {
+  if (shape.type === 'line' || shape.type === 'polygon' || shape.type === 'curve') return resizeLine(cursorPosition, canvasOffset, originalShape, selectionMode);else if (shape.type === 'brush') return resizeBrush(cursorPosition, canvasOffset, originalShape, selectionMode);else if (shape.type === 'circle') return resizeCircle(cursorPosition, canvasOffset, originalShape, selectionMode);else if (shape.type === 'ellipse') return resizeEllipse(cursorPosition, canvasOffset, originalShape, selectionMode);else if (shape.type === 'rect') return resizeRect(cursorPosition, canvasOffset, originalShape, selectionMode);else if (shape.type === 'square') return resizeRect(cursorPosition, canvasOffset, originalShape, selectionMode, true);else if (shape.type === 'text') return resizeText(ctx, cursorPosition, canvasOffset, originalShape, selectionMode);else if (shape.type === 'picture') return resizePicture(cursorPosition, canvasOffset, originalShape, selectionMode);
+  return shape;
+};
+
+exports.resizeShape = resizeShape;
+
+var transformShape = function transformShape(ctx, shape, cursorPosition, canvasOffset, selectionMode) {
+  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);
+  }
+
+  return shape;
+};
+
+exports.transformShape = transformShape;
+
+var calculateTextFontSize = function calculateTextFontSize(ctx, text, maxWidth) {
+  var _$flow;
+
+  var fontFamily = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : _style.STYLE_FONT_DEFAULT;
+  ctx.font = "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 : 12;
+};
+
+exports.calculateTextFontSize = calculateTextFontSize;
+
+var calculateTextWidth = function calculateTextWidth(ctx, text, fontSize) {
+  var _$flow2;
+
+  var fontFamily = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : _style.STYLE_FONT_DEFAULT;
+  ctx.font = "".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;