@yorab/react-paint 0.2.2 → 0.4.1

package/dist/utils/draw.js

@@ -29,12 +29,13 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 
 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 applyShapeTransformations = function applyShapeTransformations(ctx, marker, canvasOffset) {
+var applyShapeTransformations = function applyShapeTransformations(ctx, marker, responsiveScale, canvasOffset, selectionPadding) {
   ctx.save();
+  ctx.scale(responsiveScale, responsiveScale);
   ctx.translate(marker.translation[0] + canvasOffset[0], marker.translation[1] + canvasOffset[1]);
 
   if (marker.rotation !== 0) {
-    var _getShapeInfos = (0, _shapeData.getShapeInfos)(marker),
+    var _getShapeInfos = (0, _shapeData.getShapeInfos)(marker, selectionPadding),
         center = _getShapeInfos.center;
 
     ctx.translate(center[0], center[1]);
@@ -48,19 +49,17 @@ var restoreShapeTransformations = function restoreShapeTransformations(ctx) {
 };
 
 var updateDrawStyle = function updateDrawStyle(ctx) {
-  var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {
-    fillColor: 'transparent',
-    strokeColor: 'blue',
-    globalAlpha: 100,
-    lineWidth: 1,
-    lineDash: 0
-  },
-      fillColor = _ref.fillColor,
-      globalAlpha = _ref.globalAlpha,
-      strokeColor = _ref.strokeColor,
-      lineWidth = _ref.lineWidth,
-      lineDash = _ref.lineDash;
-
+  var style = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  var _style$fillColor = style.fillColor,
+      fillColor = _style$fillColor === void 0 ? 'transparent' : _style$fillColor,
+      _style$globalAlpha = style.globalAlpha,
+      globalAlpha = _style$globalAlpha === void 0 ? 100 : _style$globalAlpha,
+      _style$strokeColor = style.strokeColor,
+      strokeColor = _style$strokeColor === void 0 ? _shapes.SELECTION_DEFAULT_COLOR : _style$strokeColor,
+      _style$lineWidth = style.lineWidth,
+      lineWidth = _style$lineWidth === void 0 ? _shapes.SELECTION_DEFAULT_WIDTH : _style$lineWidth,
+      _style$lineDash = style.lineDash,
+      lineDash = _style$lineDash === void 0 ? 0 : _style$lineDash;
   ctx.lineCap = 'round';
   ctx.lineJoin = 'round';
   globalAlpha !== undefined && (ctx.globalAlpha = globalAlpha / 100);
@@ -250,9 +249,9 @@ var drawPicture = function drawPicture(ctx, picture) {
 
 exports.drawPicture = drawPicture;
 
-var drawShape = function drawShape(ctx, shape, canvasOffset) {
+var drawShape = function drawShape(ctx, shape, responsiveScale, canvasOffset, selectionPadding) {
   if (shape.visible === false) return;
-  applyShapeTransformations(ctx, shape, canvasOffset);
+  applyShapeTransformations(ctx, shape, responsiveScale, canvasOffset, selectionPadding);
 
   switch (shape.type) {
     case 'brush':
@@ -298,18 +297,34 @@ var drawShape = function drawShape(ctx, shape, canvasOffset) {
 
 exports.drawShape = drawShape;
 
-var drawSelectionDefault = function drawSelectionDefault(_ref2) {
-  var ctx = _ref2.ctx,
-      shape = _ref2.shape,
-      withAnchors = _ref2.withAnchors;
-
-  var _getShapeInfos2 = (0, _shapeData.getShapeInfos)(shape),
+var drawSelectionDefault = function drawSelectionDefault(_ref) {
+  var ctx = _ref.ctx,
+      shape = _ref.shape,
+      withAnchors = _ref.withAnchors,
+      selectionPadding = _ref.selectionPadding,
+      selectionWidth = _ref.selectionWidth,
+      selectionColor = _ref.selectionColor,
+      _ref$currentScale = _ref.currentScale,
+      currentScale = _ref$currentScale === void 0 ? 1 : _ref$currentScale;
+
+  var _getShapeInfos2 = (0, _shapeData.getShapeInfos)(shape, selectionPadding / currentScale),
       borders = _getShapeInfos2.borders;
 
-  drawRect(ctx, borders);
+  drawRect(ctx, _objectSpread(_objectSpread({}, borders), {}, {
+    style: {
+      fillColor: 'transparent',
+      strokeColor: selectionColor,
+      lineWidth: selectionWidth / currentScale
+    }
+  }));
   if (!withAnchors || shape.locked) return;
   drawLine(ctx, {
-    points: [[borders.x + borders.width / 2, borders.y], [borders.x + borders.width / 2, borders.y - _shapes.SELECTION_ANCHOR_SIZE / 2 - _shapes.SELECTION_ROTATED_ANCHOR_POSITION]]
+    points: [[borders.x + borders.width / 2, borders.y], [borders.x + borders.width / 2, borders.y - _shapes.SELECTION_ANCHOR_SIZE / 2 - _shapes.SELECTION_ROTATED_ANCHOR_POSITION / currentScale]],
+    style: {
+      fillColor: 'transparent',
+      strokeColor: selectionColor,
+      lineWidth: selectionWidth / currentScale
+    }
   });
 
   var _iterator = _createForOfIteratorHelper(_shapes.SELECTION_RESIZE_ANCHOR_POSITIONS),
@@ -321,11 +336,11 @@ var drawSelectionDefault = function drawSelectionDefault(_ref2) {
       drawCircle(ctx, {
         x: borders.x + borders.width * anchorPosition[0],
         y: borders.y + borders.height * anchorPosition[1],
-        radius: _shapes.SELECTION_ANCHOR_SIZE / 2,
+        radius: _shapes.SELECTION_ANCHOR_SIZE / 2 / currentScale,
         style: {
           fillColor: 'rgb(255,255,255)',
           strokeColor: 'rgb(150,150,150)',
-          lineWidth: 2
+          lineWidth: selectionWidth / currentScale
         }
       });
     }
@@ -337,25 +352,36 @@ var drawSelectionDefault = function drawSelectionDefault(_ref2) {
 
   drawCircle(ctx, {
     x: borders.x + borders.width / 2,
-    y: borders.y - _shapes.SELECTION_ANCHOR_SIZE / 2 - _shapes.SELECTION_ROTATED_ANCHOR_POSITION,
-    radius: _shapes.SELECTION_ANCHOR_SIZE / 2,
+    y: borders.y - _shapes.SELECTION_ANCHOR_SIZE / 2 - _shapes.SELECTION_ROTATED_ANCHOR_POSITION / currentScale,
+    radius: _shapes.SELECTION_ANCHOR_SIZE / 2 / currentScale,
     style: {
       fillColor: 'rgb(255,255,255)',
       strokeColor: 'rgb(150,150,150)',
-      lineWidth: 2
+      lineWidth: selectionWidth / currentScale
     }
   });
 };
 
-var drawLineSelection = function drawLineSelection(_ref3) {
-  var ctx = _ref3.ctx,
-      shape = _ref3.shape,
-      withAnchors = _ref3.withAnchors;
-
-  var _getShapeInfos3 = (0, _shapeData.getShapeInfos)(shape),
+var drawLineSelection = function drawLineSelection(_ref2) {
+  var ctx = _ref2.ctx,
+      shape = _ref2.shape,
+      withAnchors = _ref2.withAnchors,
+      selectionPadding = _ref2.selectionPadding,
+      selectionWidth = _ref2.selectionWidth,
+      selectionColor = _ref2.selectionColor,
+      _ref2$currentScale = _ref2.currentScale,
+      currentScale = _ref2$currentScale === void 0 ? 1 : _ref2$currentScale;
+
+  var _getShapeInfos3 = (0, _shapeData.getShapeInfos)(shape, selectionPadding),
       borders = _getShapeInfos3.borders;
 
-  drawRect(ctx, borders);
+  drawRect(ctx, _objectSpread(_objectSpread({}, borders), {}, {
+    style: {
+      fillColor: 'transparent',
+      strokeColor: selectionColor,
+      lineWidth: selectionWidth / currentScale
+    }
+  }));
   if (!withAnchors || shape.locked) return;
 
   for (var i = 0; i < shape.points.length; i++) {
@@ -365,36 +391,41 @@ var drawLineSelection = function drawLineSelection(_ref3) {
       drawRect(ctx, {
         x: coordinate[0] - _shapes.SELECTION_ANCHOR_SIZE / 2,
         y: coordinate[1] - _shapes.SELECTION_ANCHOR_SIZE / 2,
-        width: _shapes.SELECTION_ANCHOR_SIZE,
-        height: _shapes.SELECTION_ANCHOR_SIZE,
+        width: _shapes.SELECTION_ANCHOR_SIZE / currentScale,
+        height: _shapes.SELECTION_ANCHOR_SIZE / currentScale,
         style: {
           fillColor: 'rgb(255,255,255)',
           strokeColor: 'rgb(150,150,150)',
-          lineWidth: 2
+          lineWidth: selectionWidth / currentScale
         }
       });
     } else {
       drawCircle(ctx, {
         x: coordinate[0],
         y: coordinate[1],
-        radius: _shapes.SELECTION_ANCHOR_SIZE / 2,
+        radius: _shapes.SELECTION_ANCHOR_SIZE / 2 / currentScale,
         style: {
           fillColor: 'rgb(255,255,255)',
           strokeColor: 'rgb(150,150,150)',
-          lineWidth: 2
+          lineWidth: selectionWidth / currentScale
         }
       });
     }
   }
 };
 
-var drawSelection = function drawSelection(_ref4) {
-  var ctx = _ref4.ctx,
-      shape = _ref4.shape,
-      canvasOffset = _ref4.canvasOffset,
-      _ref4$withAnchors = _ref4.withAnchors,
-      withAnchors = _ref4$withAnchors === void 0 ? true : _ref4$withAnchors;
-  applyShapeTransformations(ctx, shape, canvasOffset);
+var drawSelection = function drawSelection(_ref3) {
+  var ctx = _ref3.ctx,
+      shape = _ref3.shape,
+      _ref3$scaleRatio = _ref3.scaleRatio,
+      scaleRatio = _ref3$scaleRatio === void 0 ? 1 : _ref3$scaleRatio,
+      canvasOffset = _ref3.canvasOffset,
+      selectionPadding = _ref3.selectionPadding,
+      selectionWidth = _ref3.selectionWidth,
+      selectionColor = _ref3.selectionColor,
+      _ref3$withAnchors = _ref3.withAnchors,
+      withAnchors = _ref3$withAnchors === void 0 ? true : _ref3$withAnchors;
+  applyShapeTransformations(ctx, shape, scaleRatio, canvasOffset, selectionPadding);
 
   switch (shape.type) {
     case 'polygon':
@@ -403,7 +434,11 @@ var drawSelection = function drawSelection(_ref4) {
       drawLineSelection({
         ctx: ctx,
         shape: shape,
-        withAnchors: withAnchors
+        withAnchors: withAnchors,
+        selectionPadding: selectionPadding,
+        selectionWidth: selectionWidth,
+        selectionColor: selectionColor,
+        currentScale: scaleRatio
       });
       break;
 
@@ -411,7 +446,11 @@ var drawSelection = function drawSelection(_ref4) {
       drawSelectionDefault({
         ctx: ctx,
         shape: shape,
-        withAnchors: withAnchors
+        withAnchors: withAnchors,
+        selectionPadding: selectionPadding,
+        selectionWidth: selectionWidth,
+        selectionColor: selectionColor,
+        currentScale: scaleRatio
       });
       break;
   }

package/dist/utils/file.js

@@ -5,27 +5,21 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.validateJson = exports.getCanvasImage = exports.fetchAndStringify = exports.encodeShapesInString = exports.encodePicturesInShapes = exports.downloadFile = exports.decodePicturesInShapes = exports.decodeJson = void 0;
+exports.getCanvasImage = exports.getBase64Image = exports.fetchAndStringify = exports.encodeShapesInString = exports.downloadFile = exports.decodePicturesInShapes = exports.decodeJson = void 0;
 
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
 
-var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
-
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
-var _ajv = _interopRequireDefault(require("ajv"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 
 var _fp = _interopRequireDefault(require("lodash/fp"));
 
-var _drawableShape = _interopRequireDefault(require("../schemas/drawableShape.json"));
-
 var _Shapes = require("../types/Shapes");
 
-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; } } }; }
-
-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 _data = require("./data");
 
-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 _draw = require("./draw");
 
 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; }
 
@@ -63,38 +57,32 @@ var getBase64Image = function getBase64Image(img) {
   return dataURL;
 };
 
+exports.getBase64Image = getBase64Image;
+
 var encodeObjectToString = function encodeObjectToString(objectToEncode) {
   return 'data:text/plain;charset=utf-8,' + encodeURIComponent(JSON.stringify(objectToEncode));
 };
 
-var getCanvasImage = function getCanvasImage(canvas) {
-  return canvas.toDataURL('image/png');
-};
-
-exports.getCanvasImage = getCanvasImage;
+var getCanvasImage = function getCanvasImage(shapes, canvasOffset, width, height, selectionPadding) {
+  var newCanvas = document.createElement('canvas');
+  newCanvas.width = width;
+  newCanvas.height = height;
+  var ctx = newCanvas.getContext('2d');
+  if (!ctx) return '';
+  ctx.clearRect(0, 0, width, height);
 
-var encodePicturesInShapes = function encodePicturesInShapes(shapes) {
-  return shapes.map(function (shape) {
-    if (shape.type === _Shapes.ShapeEnum.picture) {
-      if (shape.src.startsWith('http')) {
-        return _fp["default"].omit('img', shape);
-      } else {
-        return _objectSpread(_objectSpread({}, shape), {}, {
-          src: getBase64Image(shape.img),
-          img: undefined
-        });
-      }
-    }
+  for (var i = shapes.length - 1; i >= 0; i--) {
+    (0, _draw.drawShape)(ctx, shapes[i], 1, canvasOffset, selectionPadding);
+  }
 
-    return shape;
-  });
+  return newCanvas.toDataURL('image/png');
 };
 
-exports.encodePicturesInShapes = encodePicturesInShapes;
+exports.getCanvasImage = getCanvasImage;
 
 var encodeShapesInString = function encodeShapesInString(shapes) {
-  var shapesWithStringifyPictures = encodePicturesInShapes(shapes);
-  return encodeObjectToString(shapesWithStringifyPictures);
+  var cleanShapes = (0, _data.cleanShapesBeforeExport)(shapes);
+  return encodeObjectToString(cleanShapes);
 };
 
 exports.encodeShapesInString = encodeShapesInString;
@@ -143,7 +131,9 @@ var decodePicturesInShapes = /*#__PURE__*/function () {
         switch (_context2.prev = _context2.next) {
           case 0:
             promisesArray = [];
-            shapes = shapesForJson.map(function (shape) {
+            shapes = _fp["default"].flow(_fp["default"].map(function (shape) {
+              if (!_fp["default"].includes(shape.type, _Shapes.ShapeEnum)) return null;
+
               if (shape.type === _Shapes.ShapeEnum.picture) {
                 var img = new Image();
                 var newPromise = new Promise(function (resolve, reject) {
@@ -172,8 +162,8 @@ var decodePicturesInShapes = /*#__PURE__*/function () {
                 });
               }
 
-              return shape;
-            });
+              return (0, _data.addDefaultAndTempShapeProps)(shape);
+            }), _fp["default"].compact)(shapesForJson);
             _context2.next = 4;
             return Promise.all(promisesArray);
 
@@ -193,28 +183,4 @@ var decodePicturesInShapes = /*#__PURE__*/function () {
   };
 }();
 
-exports.decodePicturesInShapes = decodePicturesInShapes;
-
-var validateJson = function validateJson(json) {
-  var ajv = new _ajv["default"]();
-  var validate = ajv.compile(_drawableShape["default"]);
-  if (!_fp["default"].isArray(json)) return false;
-
-  var _iterator = _createForOfIteratorHelper(json),
-      _step;
-
-  try {
-    for (_iterator.s(); !(_step = _iterator.n()).done;) {
-      var shape = _step.value;
-      if (!validate(shape)) return false;
-    }
-  } catch (err) {
-    _iterator.e(err);
-  } finally {
-    _iterator.f();
-  }
-
-  return true;
-};
-
-exports.validateJson = validateJson;
+exports.decodePicturesInShapes = decodePicturesInShapes;

package/dist/utils/intersect.js

@@ -28,6 +28,8 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
 var getCursorPosition = function getCursorPosition(e, canvas, givenWidth, givenHeight) {
   var _canvas$getBoundingCl;
 
+  var 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;
@@ -38,15 +40,15 @@ var getCursorPosition = function getCursorPosition(e, canvas, givenWidth, givenH
     width: givenWidth,
     height: givenHeight
   };
-  return [(clientX - canvasBoundingRect.left) * (givenWidth / canvasBoundingRect.width), (clientY - canvasBoundingRect.top) * (givenHeight / canvasBoundingRect.height)];
+  return [(clientX - canvasBoundingRect.left) * (givenWidth / canvasBoundingRect.width) / scaleRatio, (clientY - canvasBoundingRect.top) * (givenHeight / canvasBoundingRect.height) / scaleRatio];
 };
 
 exports.getCursorPosition = getCursorPosition;
 
-var getSettingsPosition = function getSettingsPosition(shape, canvas, givenWidth, givenHeight) {
+var getSettingsPosition = function getSettingsPosition(shape, canvas, givenWidth, givenHeight, selectionPadding) {
   var _canvas$getBoundingCl2;
 
-  var shapeInfos = (0, _shapeData.getShapeInfos)(shape);
+  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,
@@ -123,10 +125,12 @@ var applyRotationToVector = function applyRotationToVector(vector, shapeRotation
 
 exports.applyRotationToVector = applyRotationToVector;
 
-var checkPositionIntersection = function checkPositionIntersection(shape, position, canvasOffset) {
-  var checkAnchors = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
+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;
+  var scaleWithMinCap = Math.min(1, currentScale);
 
-  var _getShapeInfos = (0, _shapeData.getShapeInfos)(shape),
+  var _getShapeInfos = (0, _shapeData.getShapeInfos)(shape, selectionPadding),
       borders = _getShapeInfos.borders,
       center = _getShapeInfos.center;
 
@@ -136,10 +140,10 @@ var checkPositionIntersection = function checkPositionIntersection(shape, positi
     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({
-          x: shape.points[i][0] - _shapes.SELECTION_ANCHOR_SIZE / 2,
-          y: shape.points[i][1] - _shapes.SELECTION_ANCHOR_SIZE / 2,
-          width: _shapes.SELECTION_ANCHOR_SIZE,
-          height: _shapes.SELECTION_ANCHOR_SIZE
+          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,
@@ -149,10 +153,10 @@ var checkPositionIntersection = function checkPositionIntersection(shape, positi
       }
     } else {
       if (isPointInsideRect({
-        x: borders.x + borders.width / 2 - _shapes.SELECTION_ANCHOR_SIZE / 2,
-        y: borders.y - _shapes.SELECTION_ANCHOR_SIZE - _shapes.SELECTION_ROTATED_ANCHOR_POSITION,
-        width: _shapes.SELECTION_ANCHOR_SIZE,
-        height: _shapes.SELECTION_ANCHOR_SIZE
+        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
@@ -167,10 +171,10 @@ var checkPositionIntersection = function checkPositionIntersection(shape, positi
           var anchorPosition = _step.value;
 
           if (isPointInsideRect({
-            x: borders.x + borders.width * anchorPosition[0] - _shapes.SELECTION_ANCHOR_SIZE / 2,
-            y: borders.y + borders.height * anchorPosition[1] - _shapes.SELECTION_ANCHOR_SIZE / 2,
-            width: _shapes.SELECTION_ANCHOR_SIZE,
-            height: _shapes.SELECTION_ANCHOR_SIZE
+            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,

package/dist/utils/selection.js

@@ -15,7 +15,7 @@ var _intersect = require("./intersect");
 
 var _shapeData = require("./shapeData");
 
-var getNewSelectionData = function getNewSelectionData(hoverMode, selectedShape, cursorPosition) {
+var getNewSelectionData = function getNewSelectionData(hoverMode, selectedShape, cursorPosition, selectionPadding) {
   if (hoverMode.mode === 'translate') {
     return {
       mode: _Mode.SelectionModeLib.translate,
@@ -23,7 +23,7 @@ var getNewSelectionData = function getNewSelectionData(hoverMode, selectedShape,
       originalShape: selectedShape
     };
   } else if (hoverMode.mode === 'rotate') {
-    var _getShapeInfos = (0, _shapeData.getShapeInfos)(selectedShape),
+    var _getShapeInfos = (0, _shapeData.getShapeInfos)(selectedShape, selectionPadding),
         centerBeforeResize = _getShapeInfos.center;
 
     var center = [centerBeforeResize[0], centerBeforeResize[1]];
@@ -47,12 +47,12 @@ var getNewSelectionData = function getNewSelectionData(hoverMode, selectedShape,
 
 exports.getNewSelectionData = getNewSelectionData;
 
-var selectShape = function selectShape(shapes, cursorPosition, canvasOffset, selectedShape) {
+var selectShape = function selectShape(shapes, cursorPosition, currentScale, canvasOffset, selectedShape, selectionPadding) {
   if (selectedShape) {
-    var positionIntersection = (0, _intersect.checkPositionIntersection)(selectedShape, cursorPosition, canvasOffset, true) || {
+    var positionIntersection = (0, _intersect.checkPositionIntersection)(selectedShape, cursorPosition, canvasOffset, selectionPadding, currentScale, true) || {
       mode: _Mode.SelectionModeLib["default"]
     };
-    var newSelectionMode = getNewSelectionData(positionIntersection, selectedShape, cursorPosition);
+    var newSelectionMode = getNewSelectionData(positionIntersection, selectedShape, cursorPosition, selectionPadding);
 
     if (newSelectionMode) {
       return {
@@ -63,7 +63,7 @@ var selectShape = function selectShape(shapes, cursorPosition, canvasOffset, sel
   }
 
   var foundShape = _fp["default"].find(function (shape) {
-    return !!(0, _intersect.checkPositionIntersection)(shape, cursorPosition, canvasOffset, false);
+    return !!(0, _intersect.checkPositionIntersection)(shape, cursorPosition, canvasOffset, selectionPadding, currentScale, false);
   }, shapes);
 
   if (!!foundShape) {