@yorab/react-paint 0.3.0 → 0.4.2

package/dist/utils/draw.js

@@ -29,13 +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, responsiveScale, 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]);
@@ -55,9 +55,9 @@ var updateDrawStyle = function updateDrawStyle(ctx) {
       _style$globalAlpha = style.globalAlpha,
       globalAlpha = _style$globalAlpha === void 0 ? 100 : _style$globalAlpha,
       _style$strokeColor = style.strokeColor,
-      strokeColor = _style$strokeColor === void 0 ? 'blue' : _style$strokeColor,
+      strokeColor = _style$strokeColor === void 0 ? _shapes.SELECTION_DEFAULT_COLOR : _style$strokeColor,
       _style$lineWidth = style.lineWidth,
-      lineWidth = _style$lineWidth === void 0 ? 1 : _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';
@@ -249,9 +249,9 @@ var drawPicture = function drawPicture(ctx, picture) {
 
 exports.drawPicture = drawPicture;
 
-var drawShape = function drawShape(ctx, shape, responsiveScale, canvasOffset) {
+var drawShape = function drawShape(ctx, shape, responsiveScale, canvasOffset, selectionPadding) {
   if (shape.visible === false) return;
-  applyShapeTransformations(ctx, shape, responsiveScale, canvasOffset);
+  applyShapeTransformations(ctx, shape, responsiveScale, canvasOffset, selectionPadding);
 
   switch (shape.type) {
     case 'brush':
@@ -301,17 +301,30 @@ 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 scaleWithMinCap = Math.min(1, currentScale);
 
-  var _getShapeInfos2 = (0, _shapeData.getShapeInfos)(shape),
+  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 / scaleWithMinCap]]
+    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),
@@ -323,11 +336,11 @@ var drawSelectionDefault = function drawSelectionDefault(_ref) {
       drawCircle(ctx, {
         x: borders.x + borders.width * anchorPosition[0],
         y: borders.y + borders.height * anchorPosition[1],
-        radius: _shapes.SELECTION_ANCHOR_SIZE / 2 / scaleWithMinCap,
+        radius: _shapes.SELECTION_ANCHOR_SIZE / 2 / currentScale,
         style: {
           fillColor: 'rgb(255,255,255)',
           strokeColor: 'rgb(150,150,150)',
-          lineWidth: 2 / scaleWithMinCap
+          lineWidth: selectionWidth / currentScale
         }
       });
     }
@@ -339,12 +352,12 @@ var drawSelectionDefault = function drawSelectionDefault(_ref) {
 
   drawCircle(ctx, {
     x: borders.x + borders.width / 2,
-    y: borders.y - _shapes.SELECTION_ANCHOR_SIZE / 2 - _shapes.SELECTION_ROTATED_ANCHOR_POSITION / scaleWithMinCap,
-    radius: _shapes.SELECTION_ANCHOR_SIZE / 2 / scaleWithMinCap,
+    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 / scaleWithMinCap
+      lineWidth: selectionWidth / currentScale
     }
   });
 };
@@ -353,14 +366,22 @@ 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 scaleWithMinCap = Math.min(1, currentScale);
 
-  var _getShapeInfos3 = (0, _shapeData.getShapeInfos)(shape),
+  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++) {
@@ -370,23 +391,23 @@ var drawLineSelection = function drawLineSelection(_ref2) {
       drawRect(ctx, {
         x: coordinate[0] - _shapes.SELECTION_ANCHOR_SIZE / 2,
         y: coordinate[1] - _shapes.SELECTION_ANCHOR_SIZE / 2,
-        width: _shapes.SELECTION_ANCHOR_SIZE / scaleWithMinCap,
-        height: _shapes.SELECTION_ANCHOR_SIZE / scaleWithMinCap,
+        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 / scaleWithMinCap
+          lineWidth: selectionWidth / currentScale
         }
       });
     } else {
       drawCircle(ctx, {
         x: coordinate[0],
         y: coordinate[1],
-        radius: _shapes.SELECTION_ANCHOR_SIZE / 2 / scaleWithMinCap,
+        radius: _shapes.SELECTION_ANCHOR_SIZE / 2 / currentScale,
         style: {
           fillColor: 'rgb(255,255,255)',
           strokeColor: 'rgb(150,150,150)',
-          lineWidth: 2 / scaleWithMinCap
+          lineWidth: selectionWidth / currentScale
         }
       });
     }
@@ -399,9 +420,12 @@ var drawSelection = function drawSelection(_ref3) {
       _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);
+  applyShapeTransformations(ctx, shape, scaleRatio, canvasOffset, selectionPadding);
 
   switch (shape.type) {
     case 'polygon':
@@ -411,6 +435,9 @@ var drawSelection = function drawSelection(_ref3) {
         ctx: ctx,
         shape: shape,
         withAnchors: withAnchors,
+        selectionPadding: selectionPadding,
+        selectionWidth: selectionWidth,
+        selectionColor: selectionColor,
         currentScale: scaleRatio
       });
       break;
@@ -420,6 +447,9 @@ var drawSelection = function drawSelection(_ref3) {
         ctx: ctx,
         shape: shape,
         withAnchors: withAnchors,
+        selectionPadding: selectionPadding,
+        selectionWidth: selectionWidth,
+        selectionColor: selectionColor,
         currentScale: scaleRatio
       });
       break;

package/dist/utils/file.js

@@ -63,7 +63,7 @@ var encodeObjectToString = function encodeObjectToString(objectToEncode) {
   return 'data:text/plain;charset=utf-8,' + encodeURIComponent(JSON.stringify(objectToEncode));
 };
 
-var getCanvasImage = function getCanvasImage(shapes, canvasOffset, width, height) {
+var getCanvasImage = function getCanvasImage(shapes, canvasOffset, width, height, selectionPadding) {
   var newCanvas = document.createElement('canvas');
   newCanvas.width = width;
   newCanvas.height = height;
@@ -72,7 +72,7 @@ var getCanvasImage = function getCanvasImage(shapes, canvasOffset, width, height
   ctx.clearRect(0, 0, width, height);
 
   for (var i = shapes.length - 1; i >= 0; i--) {
-    (0, _draw.drawShape)(ctx, shapes[i], 1, canvasOffset);
+    (0, _draw.drawShape)(ctx, shapes[i], 1, canvasOffset, selectionPadding);
   }
 
   return newCanvas.toDataURL('image/png');

package/dist/utils/intersect.js

@@ -45,10 +45,10 @@ var getCursorPosition = function getCursorPosition(e, canvas, givenWidth, givenH
 
 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,
@@ -125,12 +125,12 @@ var applyRotationToVector = function applyRotationToVector(vector, shapeRotation
 
 exports.applyRotationToVector = applyRotationToVector;
 
-var checkPositionIntersection = function checkPositionIntersection(shape, position, canvasOffset) {
-  var currentScale = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 1;
-  var checkAnchors = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 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;
 

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, currentScale, canvasOffset, selectedShape) {
+var selectShape = function selectShape(shapes, cursorPosition, currentScale, canvasOffset, selectedShape, selectionPadding) {
   if (selectedShape) {
-    var positionIntersection = (0, _intersect.checkPositionIntersection)(selectedShape, cursorPosition, canvasOffset, currentScale, 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, currentScale, can
   }
 
   var foundShape = _fp["default"].find(function (shape) {
-    return !!(0, _intersect.checkPositionIntersection)(shape, cursorPosition, canvasOffset, currentScale, false);
+    return !!(0, _intersect.checkPositionIntersection)(shape, cursorPosition, canvasOffset, selectionPadding, currentScale, false);
   }, shapes);
 
   if (!!foundShape) {

package/dist/utils/shapeData.js

@@ -7,18 +7,13 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.getShapeInfos = void 0;
 
-var _shapes = require("../constants/shapes");
-
 var _fp = _interopRequireDefault(require("lodash/fp"));
 
-var getLineBorder = function getLineBorder(line) {
-  var x = Math.min(line.points[0][0], line.points[1][0]) - _shapes.SELECTION_PADDING;
-
-  var width = Math.abs(line.points[0][0] - line.points[1][0]) + _shapes.SELECTION_PADDING * 2;
-
-  var y = Math.min(line.points[0][1], line.points[1][1]) - _shapes.SELECTION_PADDING;
-
-  var height = Math.abs(line.points[0][1] - line.points[1][1]) + _shapes.SELECTION_PADDING * 2;
+var getLineBorder = function getLineBorder(line, selectionPadding) {
+  var x = Math.min(line.points[0][0], line.points[1][0]) - selectionPadding;
+  var width = Math.abs(line.points[0][0] - line.points[1][0]) + selectionPadding * 2;
+  var y = Math.min(line.points[0][1], line.points[1][1]) - selectionPadding;
+  var height = Math.abs(line.points[0][1] - line.points[1][1]) + selectionPadding * 2;
   return {
     x: x,
     width: width,
@@ -27,26 +22,26 @@ var getLineBorder = function getLineBorder(line) {
   };
 };
 
-var getBrushBorder = function getBrushBorder(brush) {
+var getBrushBorder = function getBrushBorder(brush, selectionPadding) {
   var brushPoints = _fp["default"].flatMap(function (points) {
     return points;
   }, brush.points);
 
   var minX = _fp["default"].flow(_fp["default"].map(function (point) {
     return point[0];
-  }), _fp["default"].min, _fp["default"].add(-_shapes.SELECTION_PADDING))(brushPoints);
+  }), _fp["default"].min, _fp["default"].add(-selectionPadding))(brushPoints);
 
   var maxX = _fp["default"].flow(_fp["default"].map(function (point) {
     return point[0];
-  }), _fp["default"].max, _fp["default"].add(_shapes.SELECTION_PADDING))(brushPoints);
+  }), _fp["default"].max, _fp["default"].add(selectionPadding))(brushPoints);
 
   var minY = _fp["default"].flow(_fp["default"].map(function (point) {
     return point[1];
-  }), _fp["default"].min, _fp["default"].add(-_shapes.SELECTION_PADDING))(brushPoints);
+  }), _fp["default"].min, _fp["default"].add(-selectionPadding))(brushPoints);
 
   var maxY = _fp["default"].flow(_fp["default"].map(function (point) {
     return point[1];
-  }), _fp["default"].max, _fp["default"].add(_shapes.SELECTION_PADDING))(brushPoints);
+  }), _fp["default"].max, _fp["default"].add(selectionPadding))(brushPoints);
 
   return {
     x: minX,
@@ -56,22 +51,22 @@ var getBrushBorder = function getBrushBorder(brush) {
   };
 };
 
-var getPolygonBorder = function getPolygonBorder(polygon) {
+var getPolygonBorder = function getPolygonBorder(polygon, selectionPadding) {
   var minX = _fp["default"].flow(_fp["default"].map(function (point) {
     return point[0];
-  }), _fp["default"].min, _fp["default"].add(-_shapes.SELECTION_PADDING))(polygon.points);
+  }), _fp["default"].min, _fp["default"].add(-selectionPadding))(polygon.points);
 
   var maxX = _fp["default"].flow(_fp["default"].map(function (point) {
     return point[0];
-  }), _fp["default"].max, _fp["default"].add(_shapes.SELECTION_PADDING))(polygon.points);
+  }), _fp["default"].max, _fp["default"].add(selectionPadding))(polygon.points);
 
   var minY = _fp["default"].flow(_fp["default"].map(function (point) {
     return point[1];
-  }), _fp["default"].min, _fp["default"].add(-_shapes.SELECTION_PADDING))(polygon.points);
+  }), _fp["default"].min, _fp["default"].add(-selectionPadding))(polygon.points);
 
   var maxY = _fp["default"].flow(_fp["default"].map(function (point) {
     return point[1];
-  }), _fp["default"].max, _fp["default"].add(_shapes.SELECTION_PADDING))(polygon.points);
+  }), _fp["default"].max, _fp["default"].add(selectionPadding))(polygon.points);
 
   return {
     x: minX,
@@ -83,75 +78,75 @@ var getPolygonBorder = function getPolygonBorder(polygon) {
 
 var getCurveBorder = getPolygonBorder;
 
-var getRectBorder = function getRectBorder(rect) {
+var getRectBorder = function getRectBorder(rect, selectionPadding) {
   return {
-    x: rect.x - _shapes.SELECTION_PADDING,
-    width: rect.width + _shapes.SELECTION_PADDING * 2,
-    y: rect.y - _shapes.SELECTION_PADDING,
-    height: rect.height + _shapes.SELECTION_PADDING * 2
+    x: rect.x - selectionPadding,
+    width: rect.width + selectionPadding * 2,
+    y: rect.y - selectionPadding,
+    height: rect.height + selectionPadding * 2
   };
 };
 
-var getTextBorder = function getTextBorder(text) {
+var getTextBorder = function getTextBorder(text, selectionPadding) {
   return {
-    x: text.x - _shapes.SELECTION_PADDING,
-    width: text.width + _shapes.SELECTION_PADDING * 2,
-    y: text.y - _shapes.SELECTION_PADDING,
-    height: text.height + _shapes.SELECTION_PADDING * 2
+    x: text.x - selectionPadding,
+    width: text.width + selectionPadding * 2,
+    y: text.y - selectionPadding,
+    height: text.height + selectionPadding * 2
   };
 };
 
-var getPictureBorder = function getPictureBorder(picture) {
-  return getRectBorder(picture);
+var getPictureBorder = function getPictureBorder(picture, selectionPadding) {
+  return getRectBorder(picture, selectionPadding);
 };
 
-var getCircleBorder = function getCircleBorder(circle) {
+var getCircleBorder = function getCircleBorder(circle, selectionPadding) {
   return {
-    x: circle.x - circle.radius - _shapes.SELECTION_PADDING,
-    width: (circle.radius + _shapes.SELECTION_PADDING) * 2,
-    y: circle.y - circle.radius - _shapes.SELECTION_PADDING,
-    height: (circle.radius + _shapes.SELECTION_PADDING) * 2
+    x: circle.x - circle.radius - selectionPadding,
+    width: (circle.radius + selectionPadding) * 2,
+    y: circle.y - circle.radius - selectionPadding,
+    height: (circle.radius + selectionPadding) * 2
   };
 };
 
-var getEllipseBorder = function getEllipseBorder(ellipse) {
+var getEllipseBorder = function getEllipseBorder(ellipse, selectionPadding) {
   return {
-    x: ellipse.x - ellipse.radiusX - _shapes.SELECTION_PADDING,
-    width: (ellipse.radiusX + _shapes.SELECTION_PADDING) * 2,
-    y: ellipse.y - ellipse.radiusY - _shapes.SELECTION_PADDING,
-    height: (ellipse.radiusY + _shapes.SELECTION_PADDING) * 2
+    x: ellipse.x - ellipse.radiusX - selectionPadding,
+    width: (ellipse.radiusX + selectionPadding) * 2,
+    y: ellipse.y - ellipse.radiusY - selectionPadding,
+    height: (ellipse.radiusY + selectionPadding) * 2
   };
 };
 
-var getShapeBorders = function getShapeBorders(marker) {
+var getShapeBorders = function getShapeBorders(marker, selectionPadding) {
   switch (marker.type) {
     case 'brush':
-      return getBrushBorder(marker);
+      return getBrushBorder(marker, selectionPadding);
 
     case 'line':
-      return getLineBorder(marker);
+      return getLineBorder(marker, selectionPadding);
 
     case 'polygon':
-      return getPolygonBorder(marker);
+      return getPolygonBorder(marker, selectionPadding);
 
     case 'curve':
-      return getCurveBorder(marker);
+      return getCurveBorder(marker, selectionPadding);
 
     case 'circle':
-      return getCircleBorder(marker);
+      return getCircleBorder(marker, selectionPadding);
 
     case 'ellipse':
-      return getEllipseBorder(marker);
+      return getEllipseBorder(marker, selectionPadding);
 
     case 'rect':
     case 'square':
-      return getRectBorder(marker);
+      return getRectBorder(marker, selectionPadding);
 
     case 'text':
-      return getTextBorder(marker);
+      return getTextBorder(marker, selectionPadding);
 
     case 'picture':
-      return getPictureBorder(marker);
+      return getPictureBorder(marker, selectionPadding);
   }
 
   return {
@@ -166,8 +161,8 @@ var getShapeCenter = function getShapeCenter(borders) {
   return [borders.x + borders.width / 2, borders.y + borders.height / 2];
 };
 
-var getShapeInfos = function getShapeInfos(shape) {
-  var borders = getShapeBorders(shape);
+var getShapeInfos = function getShapeInfos(shape, selectionPadding) {
+  var borders = getShapeBorders(shape, selectionPadding);
   var center = getShapeCenter(borders);
   return {
     borders: borders,