@yorab/react-paint 0.6.4 → 0.7.1

package/dist/utils/intersect.js

@@ -5,36 +5,27 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getSettingsPosition = exports.getPointPositionBeforeCanvasTransformation = exports.getPointPositionAfterCanvasTransformation = exports.getCursorPosition = exports.checkPositionIntersection = exports.applyRotationToVector = void 0;
-
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+exports.getPointPositionBeforeCanvasTransformation = exports.getPointPositionAfterCanvasTransformation = exports.getCursorPosition = exports.checkPositionIntersection = void 0;
 
 var _shapes = require("../constants/shapes");
 
 var _fp = _interopRequireDefault(require("lodash/fp"));
 
-var _Mode = require("../types/Mode");
-
-var _Shapes = require("../types/Shapes");
-
-var _shapeData = require("./shapeData");
-
-function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it["return"] != null) it["return"](); } finally { if (didErr) throw err; } } }; }
+var _shapes2 = require("./shapes");
 
-function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+var _trigo = require("./trigo");
 
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
-
-var getCursorPosition = function getCursorPosition(e, canvas, givenWidth, givenHeight) {
+const getCursorPosition = function (e, canvas, givenWidth, givenHeight) {
   var _canvas$getBoundingCl;
 
-  var scaleRatio = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 1;
+  let scaleRatio = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 1;
 
-  var _$getOr = _fp["default"].getOr(_fp["default"].getOr(e, 'changedTouches[0]', e), 'touches[0]', e),
-      clientX = _$getOr.clientX,
-      clientY = _$getOr.clientY;
+  const {
+    clientX,
+    clientY
+  } = _fp.default.getOr(_fp.default.getOr(e, 'changedTouches[0]', e), 'touches[0]', e);
 
-  var canvasBoundingRect = (_canvas$getBoundingCl = canvas === null || canvas === void 0 ? void 0 : canvas.getBoundingClientRect()) !== null && _canvas$getBoundingCl !== void 0 ? _canvas$getBoundingCl : {
+  const canvasBoundingRect = (_canvas$getBoundingCl = canvas === null || canvas === void 0 ? void 0 : canvas.getBoundingClientRect()) !== null && _canvas$getBoundingCl !== void 0 ? _canvas$getBoundingCl : {
     left: 0,
     top: 0,
     width: givenWidth,
@@ -45,154 +36,86 @@ var getCursorPosition = function getCursorPosition(e, canvas, givenWidth, givenH
 
 exports.getCursorPosition = getCursorPosition;
 
-var getSettingsPosition = function getSettingsPosition(shape, canvas, givenWidth, givenHeight, selectionPadding) {
-  var _canvas$getBoundingCl2;
-
-  var shapeInfos = (0, _shapeData.getShapeInfos)(shape, selectionPadding);
-  var positionInCanvas = getPointPositionBeforeCanvasTransformation(shapeInfos.center, [-shape.translation[0], -shape.translation[1]], shape.rotation, shapeInfos.center);
-  var canvasBoundingRect = (_canvas$getBoundingCl2 = canvas === null || canvas === void 0 ? void 0 : canvas.getBoundingClientRect()) !== null && _canvas$getBoundingCl2 !== void 0 ? _canvas$getBoundingCl2 : {
-    left: 0,
-    top: 0,
-    width: givenWidth,
-    height: givenHeight
-  };
-  return [canvasBoundingRect.left + positionInCanvas[0] * (canvasBoundingRect.width / givenWidth), canvasBoundingRect.top + positionInCanvas[1] * (canvasBoundingRect.height / givenHeight)];
-};
-
-exports.getSettingsPosition = getSettingsPosition;
-
-var isPointInsideRect = function isPointInsideRect(rect, point) {
-  return point[0] >= rect.x && point[0] <= rect.x + rect.width && point[1] >= rect.y && point[1] <= rect.y + rect.height;
-};
-
-var getPointPositionAfterCanvasTransformation = function getPointPositionAfterCanvasTransformation(_ref, _ref2, _ref3, shapeRotation, _ref4) {
-  var _ref5 = (0, _slicedToArray2["default"])(_ref, 2),
-      positionX = _ref5[0],
-      positionY = _ref5[1];
-
-  var _ref6 = (0, _slicedToArray2["default"])(_ref2, 2),
-      canvasOffsetX = _ref6[0],
-      canvasOffsetY = _ref6[1];
-
-  var _ref7 = (0, _slicedToArray2["default"])(_ref3, 2),
-      translationX = _ref7[0],
-      translationY = _ref7[1];
-
-  var _ref8 = (0, _slicedToArray2["default"])(_ref4, 2),
-      centerX = _ref8[0],
-      centerY = _ref8[1];
-
-  var newX = positionX + canvasOffsetX - centerX - translationX;
-  var newY = positionY + canvasOffsetY - centerY - translationY;
-  var rotatedY = newY * Math.cos(shapeRotation) - newX * Math.sin(shapeRotation);
-  var rotatedX = newY * Math.sin(shapeRotation) + newX * Math.cos(shapeRotation);
-  var translatedX = rotatedX + centerX;
-  var translatedY = rotatedY + centerY;
-  return [translatedX, translatedY];
+const getPointPositionAfterCanvasTransformation = (point, shapeRotation, _ref, _ref2) => {
+  let [originX, originY] = _ref;
+  let [canvasOffsetX, canvasOffsetY] = _ref2;
+  return (0, _trigo.rotatePoint)({
+    origin: [originX - canvasOffsetX, originY - canvasOffsetY],
+    point,
+    rotation: shapeRotation
+  });
 };
 
 exports.getPointPositionAfterCanvasTransformation = getPointPositionAfterCanvasTransformation;
 
-var getPointPositionBeforeCanvasTransformation = function getPointPositionBeforeCanvasTransformation(_ref9, _ref10, shapeRotation, _ref11) {
-  var _ref12 = (0, _slicedToArray2["default"])(_ref9, 2),
-      positionX = _ref12[0],
-      positionY = _ref12[1];
-
-  var _ref13 = (0, _slicedToArray2["default"])(_ref10, 2),
-      translationX = _ref13[0],
-      translationY = _ref13[1];
-
-  var _ref14 = (0, _slicedToArray2["default"])(_ref11, 2),
-      centerX = _ref14[0],
-      centerY = _ref14[1];
-
-  var newX = positionX - centerX;
-  var newY = positionY - centerY;
-  var rotatedY = newY * Math.cos(-shapeRotation) - newX * Math.sin(-shapeRotation);
-  var rotatedX = newY * Math.sin(-shapeRotation) + newX * Math.cos(-shapeRotation);
-  var translatedX = rotatedX + centerX;
-  var translatedY = rotatedY + centerY;
-  return [translatedX - translationX, translatedY - translationY];
+const getPointPositionBeforeCanvasTransformation = (point, shapeRotation, _ref3, _ref4) => {
+  let [originX, originY] = _ref3;
+  let [canvasOffsetX, canvasOffsetY] = _ref4;
+  return (0, _trigo.rotatePoint)({
+    origin: [originX - canvasOffsetX, originY - canvasOffsetY],
+    point,
+    rotation: -shapeRotation
+  });
 };
 
 exports.getPointPositionBeforeCanvasTransformation = getPointPositionBeforeCanvasTransformation;
 
-var applyRotationToVector = function applyRotationToVector(vector, shapeRotation) {
-  var rotatedY = vector[1] * Math.cos(shapeRotation) - vector[0] * Math.sin(shapeRotation);
-  var rotatedX = vector[1] * Math.sin(shapeRotation) + vector[0] * Math.cos(shapeRotation);
-  return [rotatedX, rotatedY];
-};
-
-exports.applyRotationToVector = applyRotationToVector;
-
-var checkPositionIntersection = function checkPositionIntersection(shape, position, canvasOffset, selectionPadding) {
-  var currentScale = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 1;
-  var checkAnchors = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : false;
+const checkPositionIntersection = function (shape, position, canvasOffset, selectionPadding) {
+  let currentScale = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 1;
+  let checkAnchors = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : false;
   if (shape.locked) return false;
-  var scaleWithMinCap = Math.min(1, currentScale);
-
-  var _getShapeInfos = (0, _shapeData.getShapeInfos)(shape, selectionPadding),
-      borders = _getShapeInfos.borders,
-      center = _getShapeInfos.center;
-
-  var newPosition = getPointPositionAfterCanvasTransformation(position, canvasOffset, shape.translation, shape.rotation, center);
+  const scaleWithMinCap = Math.min(1, currentScale);
+  const {
+    borders,
+    center
+  } = (0, _shapes2.getShapeInfos)(shape, selectionPadding);
+  const newPosition = getPointPositionAfterCanvasTransformation(position, shape.rotation, center, canvasOffset);
 
   if (checkAnchors) {
-    if (shape.type === _Shapes.ShapeEnum.line || shape.type === _Shapes.ShapeEnum.polygon || shape.type === _Shapes.ShapeEnum.curve) {
-      for (var i = 0; i < shape.points.length; i++) {
-        if (isPointInsideRect({
+    if (shape.type === 'line' || shape.type === 'polygon' || shape.type === 'curve') {
+      for (let i = 0; i < shape.points.length; i++) {
+        if ((0, _trigo.isPointInsideRect)({
           x: shape.points[i][0] - _shapes.SELECTION_ANCHOR_SIZE / 2 / scaleWithMinCap,
           y: shape.points[i][1] - _shapes.SELECTION_ANCHOR_SIZE / 2 / scaleWithMinCap,
           width: _shapes.SELECTION_ANCHOR_SIZE / scaleWithMinCap,
           height: _shapes.SELECTION_ANCHOR_SIZE / scaleWithMinCap
         }, newPosition)) {
           return {
-            mode: _Mode.SelectionModeLib.resize,
+            mode: 'resize',
             anchor: i
           };
         }
       }
     } else {
-      if (isPointInsideRect({
+      if ((0, _trigo.isPointInsideRect)({
         x: borders.x + borders.width / 2 - _shapes.SELECTION_ANCHOR_SIZE / 2 / scaleWithMinCap,
         y: borders.y - _shapes.SELECTION_ANCHOR_SIZE / scaleWithMinCap - _shapes.SELECTION_ROTATED_ANCHOR_POSITION / scaleWithMinCap,
         width: _shapes.SELECTION_ANCHOR_SIZE / scaleWithMinCap,
         height: _shapes.SELECTION_ANCHOR_SIZE / scaleWithMinCap
       }, newPosition)) {
         return {
-          mode: _Mode.SelectionModeLib.rotate
+          mode: 'rotate'
         };
       }
 
-      var _iterator = _createForOfIteratorHelper(_shapes.SELECTION_RESIZE_ANCHOR_POSITIONS),
-          _step;
-
-      try {
-        for (_iterator.s(); !(_step = _iterator.n()).done;) {
-          var anchorPosition = _step.value;
-
-          if (isPointInsideRect({
-            x: borders.x + borders.width * anchorPosition[0] - _shapes.SELECTION_ANCHOR_SIZE / 2 / scaleWithMinCap,
-            y: borders.y + borders.height * anchorPosition[1] - _shapes.SELECTION_ANCHOR_SIZE / 2 / scaleWithMinCap,
-            width: _shapes.SELECTION_ANCHOR_SIZE / scaleWithMinCap,
-            height: _shapes.SELECTION_ANCHOR_SIZE / scaleWithMinCap
-          }, newPosition)) {
-            return {
-              mode: _Mode.SelectionModeLib.resize,
-              anchor: anchorPosition
-            };
-          }
+      for (const anchorPosition of _shapes.SELECTION_RESIZE_ANCHOR_POSITIONS) {
+        if ((0, _trigo.isPointInsideRect)({
+          x: borders.x + borders.width * anchorPosition[0] - _shapes.SELECTION_ANCHOR_SIZE / 2 / scaleWithMinCap,
+          y: borders.y + borders.height * anchorPosition[1] - _shapes.SELECTION_ANCHOR_SIZE / 2 / scaleWithMinCap,
+          width: _shapes.SELECTION_ANCHOR_SIZE / scaleWithMinCap,
+          height: _shapes.SELECTION_ANCHOR_SIZE / scaleWithMinCap
+        }, newPosition)) {
+          return {
+            mode: 'resize',
+            anchor: anchorPosition
+          };
         }
-      } catch (err) {
-        _iterator.e(err);
-      } finally {
-        _iterator.f();
       }
     }
   }
 
-  return isPointInsideRect(borders, newPosition) ? {
-    mode: _Mode.SelectionModeLib.translate
+  return (0, _trigo.isPointInsideRect)(borders, newPosition) ? {
+    mode: 'translate'
   } : false;
 };
 

package/dist/utils/migration.js

@@ -0,0 +1,59 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.migrateShapesV065 = void 0;
+
+var _fp = _interopRequireDefault(require("lodash/fp"));
+
+const migrateShapesV065 = shapes => {
+  return _fp.default.map(shape => {
+    if (!shape.translation) {
+      return shape;
+    }
+
+    const translation = shape.translation;
+
+    switch (shape.type) {
+      case 'rect':
+      case 'square':
+      case 'ellipse':
+      case 'circle':
+      case 'picture':
+        return { ..._fp.default.omit(['translation'], shape),
+          x: shape.x + translation[0],
+          y: shape.y + translation[1]
+        };
+
+      case 'line':
+        return { ..._fp.default.omit(['translation'], shape),
+          points: shape.points.map(_ref => {
+            let [x, y] = _ref;
+            return [x + translation[0], y + translation[1]];
+          })
+        };
+
+      case 'polygon':
+      case 'curve':
+        return { ..._fp.default.omit(['translation'], shape),
+          points: shape.points.map(_ref2 => {
+            let [x, y] = _ref2;
+            return [x + translation[0], y + translation[1]];
+          })
+        };
+
+      case 'brush':
+        return { ..._fp.default.omit(['translation'], shape),
+          points: shape.points.map(coord => coord.map(_ref3 => {
+            let [x, y] = _ref3;
+            return [x + translation[0], y + translation[1]];
+          }))
+        };
+    }
+  }, shapes);
+};
+
+exports.migrateShapesV065 = migrateShapesV065;

package/dist/utils/selection.js

@@ -9,33 +9,31 @@ exports.selectShape = exports.getNewSelectionData = void 0;
 
 var _fp = _interopRequireDefault(require("lodash/fp"));
 
-var _Mode = require("../types/Mode");
-
 var _intersect = require("./intersect");
 
-var _shapeData = require("./shapeData");
+var _shapes = require("./shapes");
 
-var getNewSelectionData = function getNewSelectionData(hoverMode, selectedShape, cursorPosition, selectionPadding) {
+const getNewSelectionData = (hoverMode, selectedShape, cursorPosition, selectionPadding) => {
   if (hoverMode.mode === 'translate') {
     return {
-      mode: _Mode.SelectionModeLib.translate,
+      mode: 'translate',
       cursorStartPosition: cursorPosition,
       originalShape: selectedShape
     };
   } else if (hoverMode.mode === 'rotate') {
-    var _getShapeInfos = (0, _shapeData.getShapeInfos)(selectedShape, selectionPadding),
-        centerBeforeResize = _getShapeInfos.center;
-
-    var center = [centerBeforeResize[0], centerBeforeResize[1]];
+    const {
+      center: centerBeforeResize
+    } = (0, _shapes.getShapeInfos)(selectedShape, selectionPadding);
+    const center = [centerBeforeResize[0], centerBeforeResize[1]];
     return {
-      mode: _Mode.SelectionModeLib.rotate,
+      mode: 'rotate',
       cursorStartPosition: cursorPosition,
       originalShape: selectedShape,
-      center: center
+      center
     };
   } else if (hoverMode.mode === 'resize') {
     return {
-      mode: _Mode.SelectionModeLib.resize,
+      mode: 'resize',
       cursorStartPosition: cursorPosition,
       originalShape: selectedShape,
       anchor: hoverMode.anchor
@@ -47,14 +45,14 @@ var getNewSelectionData = function getNewSelectionData(hoverMode, selectedShape,
 
 exports.getNewSelectionData = getNewSelectionData;
 
-var selectShape = function selectShape(shapes, cursorPosition, currentScale, canvasOffset, selectedShape, selectionPadding) {
+const selectShape = (shapes, cursorPosition, currentScale, canvasOffset, selectedShape, selectionPadding) => {
   if (selectedShape) {
-    var positionIntersection = (0, _intersect.checkPositionIntersection)(selectedShape, cursorPosition, canvasOffset, selectionPadding, currentScale, true) || {
-      mode: _Mode.SelectionModeLib["default"]
+    const positionIntersection = (0, _intersect.checkPositionIntersection)(selectedShape, cursorPosition, canvasOffset, selectionPadding, currentScale, true) || {
+      mode: 'default'
     };
-    var newSelectionMode = getNewSelectionData(positionIntersection, selectedShape, cursorPosition, selectionPadding);
+    const newSelectionMode = getNewSelectionData(positionIntersection, selectedShape, cursorPosition, selectionPadding);
 
-    if ((newSelectionMode === null || newSelectionMode === void 0 ? void 0 : newSelectionMode.mode) === _Mode.SelectionModeLib.resize || (newSelectionMode === null || newSelectionMode === void 0 ? void 0 : newSelectionMode.mode) === _Mode.SelectionModeLib.rotate) {
+    if ((newSelectionMode === null || newSelectionMode === void 0 ? void 0 : newSelectionMode.mode) === 'resize' || (newSelectionMode === null || newSelectionMode === void 0 ? void 0 : newSelectionMode.mode) === 'rotate') {
       return {
         shape: selectedShape,
         mode: newSelectionMode
@@ -62,7 +60,7 @@ var selectShape = function selectShape(shapes, cursorPosition, currentScale, can
     }
   }
 
-  var foundShape = _fp["default"].find(function (shape) {
+  const foundShape = _fp.default.find(shape => {
     return !!(0, _intersect.checkPositionIntersection)(shape, cursorPosition, canvasOffset, selectionPadding, currentScale, false);
   }, shapes);
 
@@ -70,7 +68,7 @@ var selectShape = function selectShape(shapes, cursorPosition, currentScale, can
     return {
       shape: foundShape,
       mode: {
-        mode: _Mode.SelectionModeLib.translate,
+        mode: 'translate',
         cursorStartPosition: cursorPosition,
         originalShape: foundShape
       }
@@ -79,7 +77,7 @@ var selectShape = function selectShape(shapes, cursorPosition, currentScale, can
     return {
       shape: undefined,
       mode: {
-        mode: _Mode.SelectionModeLib["default"]
+        mode: 'default'
       }
     };
   }

package/dist/utils/shapes/brush.js

@@ -0,0 +1,135 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.resizeBrush = exports.getBrushBorder = exports.drawBrush = exports.createBrush = exports.addNewPointToShape = exports.addNewPointGroupToShape = void 0;
+
+var _fp = _interopRequireDefault(require("lodash/fp"));
+
+var _canvas = require("../canvas");
+
+var _intersect = require("../intersect");
+
+var _transform = require("../transform");
+
+var _2 = require(".");
+
+var _rectangle = require("./rectangle");
+
+const createBrush = (shape, cursorPosition) => {
+  return {
+    toolId: shape.id,
+    type: shape.type,
+    id: _fp.default.uniqueId("".concat(shape.type, "_")),
+    points: [[cursorPosition]],
+    rotation: 0,
+    style: {
+      globalAlpha: shape.settings.opacity.default,
+      strokeColor: shape.settings.strokeColor.default,
+      lineWidth: shape.settings.lineWidth.default,
+      lineDash: shape.settings.lineDash.default
+    }
+  };
+};
+
+exports.createBrush = createBrush;
+
+const drawBrush = (ctx, brush) => {
+  var _brush$style;
+
+  if (brush.points.length < 1) return;
+  (0, _canvas.updateCanvasContext)(ctx, brush.style);
+  ctx.beginPath();
+  if (((_brush$style = brush.style) === null || _brush$style === void 0 ? void 0 : _brush$style.strokeColor) === 'transparent' || ctx.globalAlpha === 0) return;
+  brush.points.forEach(points => {
+    if (points.length === 1) {
+      ctx.rect(points[0][0], points[0][1], 1, 1);
+    } else {
+      ctx.moveTo(...points[0]);
+      points.slice(1).forEach(point => {
+        ctx.lineTo(...point);
+      });
+    }
+  });
+  ctx.stroke();
+};
+
+exports.drawBrush = drawBrush;
+
+const getBrushBorder = (brush, selectionPadding) => {
+  const brushPoints = _fp.default.flatMap(points => points, brush.points);
+
+  const minX = _fp.default.flow(_fp.default.map(point => point[0]), _fp.default.min, _fp.default.add(-selectionPadding))(brushPoints);
+
+  const maxX = _fp.default.flow(_fp.default.map(point => point[0]), _fp.default.max, _fp.default.add(selectionPadding))(brushPoints);
+
+  const minY = _fp.default.flow(_fp.default.map(point => point[1]), _fp.default.min, _fp.default.add(-selectionPadding))(brushPoints);
+
+  const maxY = _fp.default.flow(_fp.default.map(point => point[1]), _fp.default.max, _fp.default.add(selectionPadding))(brushPoints);
+
+  return {
+    x: minX,
+    width: maxX - minX,
+    y: minY,
+    height: maxY - minY
+  };
+};
+
+exports.getBrushBorder = getBrushBorder;
+
+const resizeBrush = (cursorPosition, canvasOffset, originalShape, selectionMode, selectionPadding, keepRatio) => {
+  const {
+    center,
+    borders
+  } = (0, _2.getShapeInfos)(originalShape, selectionPadding);
+  const cursorPositionBeforeResize = (0, _intersect.getPointPositionAfterCanvasTransformation)(cursorPosition, originalShape.rotation, center, canvasOffset);
+  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 [widthWithRatio, heightWithRatio] = keepRatio ? (0, _transform.getNormalizedSize)(1, 1, scaledWidth, scaledHeight) : [scaledWidth, scaledHeight];
+  const shapeWithNewDimensions = { ...originalShape,
+    points: originalShape.points.map(points => {
+      return points.map(point => [(point[0] - borders.x) * widthWithRatio + borders.x, (point[1] - borders.y) * heightWithRatio + borders.y]);
+    })
+  };
+  const {
+    center: shapeWithNewDimensionsCenter,
+    borders: shapeWithNewDimensionsBorders
+  } = (0, _2.getShapeInfos)(shapeWithNewDimensions, selectionPadding);
+  const [oppTrueX, oppTrueY] = (0, _rectangle.getRectOppositeAnchorAbsolutePosition)(selectionMode.anchor, center, { ...originalShape,
+    ...borders
+  }, canvasOffset);
+  const [newOppTrueX, newOppTrueY] = (0, _rectangle.getRectOppositeAnchorAbsolutePosition)(selectionMode.anchor, shapeWithNewDimensionsCenter, { ...shapeWithNewDimensions,
+    ...shapeWithNewDimensionsBorders
+  }, canvasOffset, [widthWithRatio < 0, heightWithRatio < 0]);
+  return { ...shapeWithNewDimensions,
+    points: shapeWithNewDimensions.points.map(coord => coord.map(_ref => {
+      let [x, y] = _ref;
+      return [x - (newOppTrueX - oppTrueX), y - (newOppTrueY - oppTrueY)];
+    }))
+  };
+};
+
+exports.resizeBrush = resizeBrush;
+
+const addNewPointToShape = (shape, cursorPosition) => {
+  return { ...shape,
+    ...{
+      points: _fp.default.set(shape.points.length - 1, [...shape.points[shape.points.length - 1], [Math.round(cursorPosition[0]), Math.round(cursorPosition[1])]], shape.points)
+    }
+  };
+};
+
+exports.addNewPointToShape = addNewPointToShape;
+
+const addNewPointGroupToShape = (shape, cursorPosition) => {
+  return { ...shape,
+    ...{
+      points: _fp.default.set(shape.points.length, [[Math.round(cursorPosition[0]), Math.round(cursorPosition[1])]], shape.points)
+    }
+  };
+};
+
+exports.addNewPointGroupToShape = addNewPointGroupToShape;

package/dist/utils/shapes/circle.js

@@ -0,0 +1,93 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.resizeCircle = exports.getCircleBorder = exports.drawCircle = exports.createCircle = void 0;
+
+var _fp = _interopRequireDefault(require("lodash/fp"));
+
+var _canvas = require("../canvas");
+
+var _intersect = require("../intersect");
+
+var _2 = require(".");
+
+const createCircle = (shape, cursorPosition) => {
+  return {
+    toolId: shape.id,
+    type: shape.type,
+    id: _fp.default.uniqueId("".concat(shape.type, "_")),
+    x: cursorPosition[0],
+    y: cursorPosition[1],
+    radius: 1,
+    rotation: 0,
+    style: {
+      globalAlpha: shape.settings.opacity.default,
+      fillColor: shape.settings.fillColor.default,
+      strokeColor: shape.settings.strokeColor.default,
+      lineWidth: shape.settings.lineWidth.default,
+      lineDash: shape.settings.lineDash.default
+    }
+  };
+};
+
+exports.createCircle = createCircle;
+
+const drawCircle = (ctx, circle) => {
+  var _circle$style, _circle$style2;
+
+  (0, _canvas.updateCanvasContext)(ctx, circle.style);
+  ctx.beginPath();
+  ctx.arc(circle.x, circle.y, circle.radius, 0, 2 * Math.PI);
+  ((_circle$style = circle.style) === null || _circle$style === void 0 ? void 0 : _circle$style.fillColor) !== 'transparent' && ctx.fill();
+  ((_circle$style2 = circle.style) === null || _circle$style2 === void 0 ? void 0 : _circle$style2.strokeColor) !== 'transparent' && ctx.stroke();
+};
+
+exports.drawCircle = drawCircle;
+
+const getCircleBorder = (circle, selectionPadding) => {
+  return {
+    x: circle.x - circle.radius - selectionPadding,
+    width: (circle.radius + selectionPadding) * 2,
+    y: circle.y - circle.radius - selectionPadding,
+    height: (circle.radius + selectionPadding) * 2
+  };
+};
+
+exports.getCircleBorder = getCircleBorder;
+
+const getCircleOppositeAnchorAbsolutePosition = function (anchor, center, shape, canvasOffset) {
+  let [negW, negH] = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : [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);
+  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);
+  return (0, _intersect.getPointPositionBeforeCanvasTransformation)([oppositeX, oppositeY], shape.rotation, center, canvasOffset);
+};
+
+const resizeCircle = (cursorPosition, canvasOffset, originalShape, selectionMode, selectionPadding) => {
+  const {
+    center,
+    borders
+  } = (0, _2.getShapeInfos)(originalShape, selectionPadding);
+  const cursorPositionBeforeResize = (0, _intersect.getPointPositionAfterCanvasTransformation)(cursorPosition, originalShape.rotation, center, canvasOffset);
+  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, _2.getShapeInfos)(shapeWithNewDimensions, selectionPadding);
+  const [oppTrueX, oppTrueY] = getCircleOppositeAnchorAbsolutePosition(selectionMode.anchor, center, originalShape, canvasOffset);
+  const [newOppTrueX, newOppTrueY] = getCircleOppositeAnchorAbsolutePosition(selectionMode.anchor, shapeWithNewDimensionsCenter, shapeWithNewDimensions, canvasOffset, [scaledRadius < 0, scaledRadius < 0]);
+  return { ...shapeWithNewDimensions,
+    x: shapeWithNewDimensions.x - (newOppTrueX - oppTrueX),
+    y: shapeWithNewDimensions.y - (newOppTrueY - oppTrueY)
+  };
+};
+
+exports.resizeCircle = resizeCircle;