@yorab/react-paint 0.3.0 → 0.4.0

package/dist/utils/transform.js

@@ -17,8 +17,6 @@ var _fp = _interopRequireDefault(require("lodash/fp"));
 
 var _shapeData = require("./shapeData");
 
-var _shapes = require("../constants/shapes");
-
 var _Mode = require("../types/Mode");
 
 var _intersect = require("./intersect");
@@ -81,14 +79,14 @@ var createNewPointGroupToShape = function createNewPointGroupToShape(shape, curs
 
 exports.createNewPointGroupToShape = createNewPointGroupToShape;
 
-var resizeBrush = function resizeBrush(cursorPosition, canvasOffset, originalShape, selectionMode) {
-  var _getShapeInfos = (0, _shapeData.getShapeInfos)(originalShape),
+var resizeBrush = function resizeBrush(cursorPosition, canvasOffset, originalShape, selectionMode, selectionPadding) {
+  var _getShapeInfos = (0, _shapeData.getShapeInfos)(originalShape, selectionPadding),
       center = _getShapeInfos.center,
       borders = _getShapeInfos.borders;
 
   var cursorPositionBeforeResize = (0, _intersect.getPointPositionAfterCanvasTransformation)(cursorPosition, canvasOffset, originalShape.translation, originalShape.rotation, center);
-  var scaledWidth = selectionMode.anchor[0] === 0.5 ? 1 : selectionMode.anchor[0] === 0 ? (borders.x + borders.width - cursorPositionBeforeResize[0] + _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 scaledWidth = selectionMode.anchor[0] === 0.5 ? 1 : selectionMode.anchor[0] === 0 ? (borders.x + borders.width - cursorPositionBeforeResize[0] + selectionPadding * -2) / (borders.width + selectionPadding * -2) : (cursorPositionBeforeResize[0] - borders.x - selectionPadding * 2) / (borders.width - selectionPadding * 2);
+  var scaledHeight = selectionMode.anchor[1] === 0.5 ? 1 : selectionMode.anchor[1] === 0 ? (borders.y + borders.height - cursorPositionBeforeResize[1] + selectionPadding * -2) / (borders.height + selectionPadding * -2) : (cursorPositionBeforeResize[1] - borders.y - selectionPadding * 2) / (borders.height - selectionPadding * 2);
 
   var shapeWithNewDimensions = _objectSpread(_objectSpread({}, originalShape), {}, {
     points: originalShape.points.map(function (points) {
@@ -98,7 +96,7 @@ var resizeBrush = function resizeBrush(cursorPosition, canvasOffset, originalSha
     })
   });
 
-  var _getShapeInfos2 = (0, _shapeData.getShapeInfos)(shapeWithNewDimensions),
+  var _getShapeInfos2 = (0, _shapeData.getShapeInfos)(shapeWithNewDimensions, selectionPadding),
       shapeWithNewDimensionsCenter = _getShapeInfos2.center,
       shapeWithNewDimensionsBorders = _getShapeInfos2.borders;
 
@@ -119,8 +117,8 @@ var resizeBrush = function resizeBrush(cursorPosition, canvasOffset, originalSha
 
 exports.resizeBrush = resizeBrush;
 
-var resizeLine = function resizeLine(cursorPosition, canvasOffset, originalShape, selectionMode) {
-  var _getShapeInfos3 = (0, _shapeData.getShapeInfos)(originalShape),
+var resizeLine = function resizeLine(cursorPosition, canvasOffset, originalShape, selectionMode, selectionPadding) {
+  var _getShapeInfos3 = (0, _shapeData.getShapeInfos)(originalShape, selectionPadding),
       center = _getShapeInfos3.center;
 
   var cursorPositionBeforeResize = (0, _intersect.getPointPositionAfterCanvasTransformation)(cursorPosition, canvasOffset, originalShape.translation, originalShape.rotation, center);
@@ -152,20 +150,20 @@ var updatePolygonLinesCount = function updatePolygonLinesCount(shape, newPointsC
 
 exports.updatePolygonLinesCount = updatePolygonLinesCount;
 
-var resizeCircle = function resizeCircle(cursorPosition, canvasOffset, originalShape, selectionMode) {
-  var _getShapeInfos4 = (0, _shapeData.getShapeInfos)(originalShape),
+var resizeCircle = function resizeCircle(cursorPosition, canvasOffset, originalShape, selectionMode, selectionPadding) {
+  var _getShapeInfos4 = (0, _shapeData.getShapeInfos)(originalShape, selectionPadding),
       center = _getShapeInfos4.center,
       borders = _getShapeInfos4.borders;
 
   var cursorPositionBeforeResize = (0, _intersect.getPointPositionAfterCanvasTransformation)(cursorPosition, canvasOffset, originalShape.translation, originalShape.rotation, center);
   var newCursorPosition = [cursorPositionBeforeResize[0], cursorPositionBeforeResize[1]];
-  var scaledRadius = selectionMode.anchor[1] === 0.5 ? (selectionMode.anchor[0] === 0 ? borders.x + borders.width - newCursorPosition[0] + _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 scaledRadius = selectionMode.anchor[1] === 0.5 ? (selectionMode.anchor[0] === 0 ? borders.x + borders.width - newCursorPosition[0] + selectionPadding * (selectionMode.anchor[0] === 0 ? -2 : 2) : newCursorPosition[0] - borders.x - selectionPadding * (selectionMode.anchor[0] === 0 ? -2 : 2)) / 2 : (selectionMode.anchor[1] === 0 ? borders.y + borders.height - newCursorPosition[1] + selectionPadding * (selectionMode.anchor[1] === 0 ? -2 : 2) : newCursorPosition[1] - borders.y - selectionPadding * (selectionMode.anchor[1] === 0 ? -2 : 2)) / 2;
 
   var shapeWithNewDimensions = _objectSpread(_objectSpread({}, originalShape), {
     radius: Math.abs(scaledRadius)
   });
 
-  var _getShapeInfos5 = (0, _shapeData.getShapeInfos)(shapeWithNewDimensions),
+  var _getShapeInfos5 = (0, _shapeData.getShapeInfos)(shapeWithNewDimensions, selectionPadding),
       shapeWithNewDimensionsCenter = _getShapeInfos5.center;
 
   var _getCircleOppositeAnc = getCircleOppositeAnchorAbsolutePosition(selectionMode.anchor, center, originalShape),
@@ -185,22 +183,22 @@ var resizeCircle = function resizeCircle(cursorPosition, canvasOffset, originalS
 
 exports.resizeCircle = resizeCircle;
 
-var resizeEllipse = function resizeEllipse(cursorPosition, canvasOffset, originalShape, selectionMode) {
-  var _getShapeInfos6 = (0, _shapeData.getShapeInfos)(originalShape),
+var resizeEllipse = function resizeEllipse(cursorPosition, canvasOffset, originalShape, selectionMode, selectionPadding) {
+  var _getShapeInfos6 = (0, _shapeData.getShapeInfos)(originalShape, selectionPadding),
       center = _getShapeInfos6.center,
       borders = _getShapeInfos6.borders;
 
   var cursorPositionBeforeResize = (0, _intersect.getPointPositionAfterCanvasTransformation)(cursorPosition, canvasOffset, originalShape.translation, originalShape.rotation, center);
   var newCursorPosition = [cursorPositionBeforeResize[0], cursorPositionBeforeResize[1]];
-  var scaledRadiusX = selectionMode.anchor[0] === 0.5 ? originalShape.radiusX : (selectionMode.anchor[0] === 0 ? borders.x + borders.width - newCursorPosition[0] + _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 scaledRadiusX = selectionMode.anchor[0] === 0.5 ? originalShape.radiusX : (selectionMode.anchor[0] === 0 ? borders.x + borders.width - newCursorPosition[0] + selectionPadding * (selectionMode.anchor[0] === 0 ? -2 : 2) : newCursorPosition[0] - borders.x - selectionPadding * (selectionMode.anchor[0] === 0 ? -2 : 2)) / 2;
+  var scaledRadiusY = selectionMode.anchor[1] === 0.5 ? originalShape.radiusY : (selectionMode.anchor[1] === 0 ? borders.y + borders.height - newCursorPosition[1] + selectionPadding * (selectionMode.anchor[1] === 0 ? -2 : 2) : newCursorPosition[1] - borders.y - selectionPadding * (selectionMode.anchor[1] === 0 ? -2 : 2)) / 2;
 
   var shapeWithNewDimensions = _objectSpread(_objectSpread({}, originalShape), {
     radiusX: Math.abs(scaledRadiusX),
     radiusY: Math.abs(scaledRadiusY)
   });
 
-  var _getShapeInfos7 = (0, _shapeData.getShapeInfos)(shapeWithNewDimensions),
+  var _getShapeInfos7 = (0, _shapeData.getShapeInfos)(shapeWithNewDimensions, selectionPadding),
       shapeWithNewDimensionsCenter = _getShapeInfos7.center;
 
   var _getEllipseOppositeAn = getEllipseOppositeAnchorAbsolutePosition(selectionMode.anchor, center, originalShape),
@@ -220,16 +218,16 @@ var resizeEllipse = function resizeEllipse(cursorPosition, canvasOffset, origina
 
 exports.resizeEllipse = resizeEllipse;
 
-var resizeRect = function resizeRect(cursorPosition, canvasOffset, originalShape, selectionMode) {
-  var keepRatio = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : false;
+var resizeRect = function resizeRect(cursorPosition, canvasOffset, originalShape, selectionMode, selectionPadding) {
+  var keepRatio = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : false;
 
-  var _getShapeInfos8 = (0, _shapeData.getShapeInfos)(originalShape),
+  var _getShapeInfos8 = (0, _shapeData.getShapeInfos)(originalShape, selectionPadding),
       center = _getShapeInfos8.center,
       borders = _getShapeInfos8.borders;
 
   var cursorPositionBeforeResize = (0, _intersect.getPointPositionAfterCanvasTransformation)(cursorPosition, canvasOffset, originalShape.translation, originalShape.rotation, center);
-  var scaledWidth = selectionMode.anchor[0] === 0.5 ? originalShape.width : selectionMode.anchor[0] === 0 ? borders.x + borders.width - cursorPositionBeforeResize[0] + _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 scaledWidth = selectionMode.anchor[0] === 0.5 ? originalShape.width : selectionMode.anchor[0] === 0 ? borders.x + borders.width - cursorPositionBeforeResize[0] + selectionPadding * -2 : cursorPositionBeforeResize[0] - borders.x - selectionPadding * 2;
+  var scaledHeight = selectionMode.anchor[1] === 0.5 ? originalShape.height : selectionMode.anchor[1] === 0 ? borders.y + borders.height - cursorPositionBeforeResize[1] + selectionPadding * -2 : cursorPositionBeforeResize[1] - borders.y - selectionPadding * 2;
 
   var _ref = keepRatio ? getNormalizedSize(originalShape, scaledWidth, scaledHeight) : [scaledWidth, scaledHeight],
       _ref2 = (0, _slicedToArray2["default"])(_ref, 2),
@@ -241,7 +239,7 @@ var resizeRect = function resizeRect(cursorPosition, canvasOffset, originalShape
     height: Math.abs(heightWithRatio)
   });
 
-  var _getShapeInfos9 = (0, _shapeData.getShapeInfos)(shapeWithNewDimensions),
+  var _getShapeInfos9 = (0, _shapeData.getShapeInfos)(shapeWithNewDimensions, selectionPadding),
       shapeWithNewDimensionsCenter = _getShapeInfos9.center;
 
   var _getRectOppositeAncho5 = getRectOppositeAnchorAbsolutePosition(selectionMode.anchor, center, originalShape),
@@ -261,10 +259,10 @@ var resizeRect = function resizeRect(cursorPosition, canvasOffset, originalShape
 
 exports.resizeRect = resizeRect;
 
-var resizeText = function resizeText(ctx, cursorPosition, canvasOffset, originalShape, selectionMode) {
+var resizeText = function resizeText(ctx, cursorPosition, canvasOffset, originalShape, selectionMode, selectionPadding) {
   var _newRect$style;
 
-  var newRect = resizeRect(cursorPosition, canvasOffset, originalShape, selectionMode, true);
+  var newRect = resizeRect(cursorPosition, canvasOffset, originalShape, selectionMode, selectionPadding, 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)
   });
@@ -305,20 +303,20 @@ var getCircleOppositeAnchorAbsolutePosition = function getCircleOppositeAnchorAb
   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);
+var resizePicture = function resizePicture(cursorPosition, canvasOffset, originalShape, selectionMode, selectionPadding) {
+  return resizeRect(cursorPosition, canvasOffset, originalShape, selectionMode, selectionPadding, true);
 };
 
 exports.resizePicture = resizePicture;
 
-var resizeShape = function resizeShape(ctx, shape, cursorPosition, canvasOffset, originalShape, selectionMode) {
-  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);
+var resizeShape = function resizeShape(ctx, shape, cursorPosition, canvasOffset, originalShape, selectionMode, selectionPadding) {
+  if (shape.type === 'line' || shape.type === 'polygon' || shape.type === 'curve') return resizeLine(cursorPosition, canvasOffset, originalShape, selectionMode, selectionPadding);else if (shape.type === 'brush') return resizeBrush(cursorPosition, canvasOffset, originalShape, selectionMode, selectionPadding);else if (shape.type === 'circle') return resizeCircle(cursorPosition, canvasOffset, originalShape, selectionMode, selectionPadding);else if (shape.type === 'ellipse') return resizeEllipse(cursorPosition, canvasOffset, originalShape, selectionMode, selectionPadding);else if (shape.type === 'rect') return resizeRect(cursorPosition, canvasOffset, originalShape, selectionMode, selectionPadding);else if (shape.type === 'square') return resizeRect(cursorPosition, canvasOffset, originalShape, selectionMode, selectionPadding, true);else if (shape.type === 'text') return resizeText(ctx, cursorPosition, canvasOffset, originalShape, selectionMode, selectionPadding);else if (shape.type === 'picture') return resizePicture(cursorPosition, canvasOffset, originalShape, selectionMode, selectionPadding);
   return shape;
 };
 
 exports.resizeShape = resizeShape;
 
-var transformShape = function transformShape(ctx, shape, cursorPosition, canvasOffset, selectionMode) {
+var transformShape = function transformShape(ctx, shape, cursorPosition, canvasOffset, selectionMode, selectionPadding) {
   if (selectionMode.mode === _Mode.SelectionModeLib.brush) {
     return paintNewPointToShape(shape, cursorPosition);
   } else if (selectionMode.mode === _Mode.SelectionModeLib.translate) {
@@ -326,7 +324,7 @@ var transformShape = function transformShape(ctx, shape, cursorPosition, canvasO
   } 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 resizeShape(ctx, shape, cursorPosition, canvasOffset, selectionMode.originalShape, selectionMode, selectionPadding);
   }
 
   return shape;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yorab/react-paint",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "keywords": [],
   "author": "Yohann Rabatel",
   "license": "MIT",