@yorab/react-paint 0.2.2 → 0.4.1

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,

package/dist/utils/transform.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.updatePolygonLinesCount = exports.translateShape = exports.transformShape = exports.rotateShape = exports.resizeText = exports.resizeShape = exports.resizeRect = exports.resizePicture = exports.resizeLine = exports.resizeEllipse = exports.resizeCircle = exports.resizeBrush = exports.radiansToDegrees = exports.paintNewPointToShape = exports.getNormalizedSize = exports.degreesToRadians = exports.createNewPointGroupToShape = exports.calculateTextWidth = exports.calculateTextFontSize = void 0;
+exports.updatePolygonLinesCount = exports.translateShape = exports.transformShape = exports.rotateShape = exports.resizeText = exports.resizeShape = exports.resizeRect = exports.resizePicture = exports.resizeLine = exports.resizeEllipse = exports.resizeCircle = exports.resizeBrush = exports.radiansToDegrees = exports.paintNewPointToShape = exports.getNormalizedSize = exports.fitContentInsideContainer = exports.degreesToRadians = exports.createNewPointGroupToShape = exports.calculateTextWidth = exports.calculateTextFontSize = void 0;
 
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 
@@ -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;
@@ -368,4 +366,20 @@ var radiansToDegrees = function radiansToDegrees(radians) {
   return radians * 180 / Math.PI;
 };
 
-exports.radiansToDegrees = radiansToDegrees;
+exports.radiansToDegrees = radiansToDegrees;
+
+var fitContentInsideContainer = function fitContentInsideContainer(contentWidth, contentHeight, containerWidth, containerHeight) {
+  var shouldFillContainer = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : false;
+  var contentRatio = contentWidth / contentHeight;
+  var containerRatio = containerWidth / containerHeight;
+
+  if (contentRatio > containerRatio) {
+    var newWidth = shouldFillContainer ? containerWidth : Math.min(contentWidth, containerWidth);
+    return [newWidth, newWidth / contentRatio];
+  } else {
+    var newHeight = shouldFillContainer ? containerHeight : Math.min(contentHeight, containerHeight);
+    return [newHeight * contentRatio, newHeight];
+  }
+};
+
+exports.fitContentInsideContainer = fitContentInsideContainer;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yorab/react-paint",
-  "version": "0.2.2",
+  "version": "0.4.1",
   "keywords": [],
   "author": "Yohann Rabatel",
   "license": "MIT",
@@ -12,11 +12,8 @@
     "dist/"
   ],
   "dependencies": {
-    "@linaria/babel-preset": "^3.0.0-beta.15",
     "@linaria/core": "^3.0.0-beta.15",
     "@linaria/react": "^3.0.0-beta.15",
-    "@linaria/shaker": "^3.0.0-beta.15",
-    "ajv": "8.11.0",
     "lodash": "^4.17.20"
   },
   "devDependencies": {
@@ -27,6 +24,8 @@
     "@babel/preset-react": "^7.16.7",
     "@babel/preset-typescript": "^7.16.7",
     "@babel/runtime": "^7.16.7",
+    "@linaria/babel-preset": "^3.0.0-beta.15",
+    "@linaria/shaker": "^3.0.0-beta.15",
     "@linaria/webpack-loader": "^3.0.0-beta.16",
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.1.0",
@@ -54,7 +53,6 @@
     "react": "18.1.0",
     "react-dom": "18.1.0",
     "typescript": "^4.7.2",
-    "typescript-json-schema": "^0.52.0",
     "webpack": "^5.66.0",
     "webpack-cli": "^4.9.1",
     "webpack-dev-server": "^4.7.3"
@@ -68,8 +66,9 @@
     "start": "webpack serve --config webpack.config.js --open",
     "test": "echo \"Error: no test specified\" && exit 1",
     "buildexamples": "webpack --config webpack.prod.config.js",
-    "build": "npx babel src/ --extensions '.js,.ts,.tsx,.jsx' --copy-files --delete-dir-on-start -d dist && npm run declarationfiles",
-    "buildwithcss" : "npm run build && npm run buildexamples && mv build/styles.css dist/styles.css"
+    "build": "npx babel src/ --extensions '.js,.ts,.tsx,.jsx' --copy-files --delete-dir-on-start -d dist",
+    "buildwithcss": "npm run build && npm run buildexamples && mv build/styles.css dist/styles.css",
+    "publish": "npm run buildwithcss && npm publish --access public"
   },
   "jest": {
     "transform": {

package/dist/components/App.d.ts

@@ -1,20 +0,0 @@
-import { MutableRefObject } from 'react';
-import { DrawableShapeJson, ShapeEnum } from 'types/Shapes';
-declare type AppType = {
-    width?: number;
-    height?: number;
-    canGrow?: boolean;
-    canShrink?: boolean;
-    withLayouts?: 'always' | 'never' | 'visible' | 'hidden';
-    shapes?: DrawableShapeJson[];
-    className?: string;
-    disabled?: boolean;
-    onDataChanged?: () => void;
-    availableTools?: ShapeEnum[];
-    apiRef?: MutableRefObject<undefined | {
-        getCurrentImage: () => string | undefined;
-        getCurrentData: () => DrawableShapeJson[];
-    }>;
-};
-declare const App: ({ width, height, canGrow, canShrink, withLayouts, shapes: shapesFromProps, className: classNameFromProps, disabled, onDataChanged, availableTools: availableToolsFromProps, apiRef }: AppType) => JSX.Element;
-export default App;

package/dist/components/Canvas.d.ts

@@ -1,28 +0,0 @@
-import React from 'react';
-import { DrawableShape, Point, StyledShape, ToolsType } from 'types/Shapes';
-import { SelectionModeData } from 'types/Mode';
-declare type DrawerType = {
-    withGrid: boolean;
-    disabled?: boolean;
-    canGrow?: boolean;
-    width: number;
-    height: number;
-    shapes: DrawableShape[];
-    saveShapes: () => void;
-    addShape: (newShape: DrawableShape) => void;
-    updateSingleShape: (updatedShape: DrawableShape) => void;
-    selectedShape: DrawableShape | undefined;
-    setSelectedShape: React.Dispatch<React.SetStateAction<DrawableShape | undefined>>;
-    activeTool: ToolsType;
-    setActiveTool: React.Dispatch<React.SetStateAction<ToolsType>>;
-    canvasOffsetStartPosition: Point | undefined;
-    setCanvasOffsetStartPosition: React.Dispatch<React.SetStateAction<Point | undefined>>;
-    canvasOffset: Point;
-    setCanvasOffset: React.Dispatch<React.SetStateAction<Point>>;
-    defaultConf: StyledShape;
-    isInsideComponent: boolean;
-    selectionMode: SelectionModeData<number | Point>;
-    setSelectionMode: React.Dispatch<React.SetStateAction<SelectionModeData<number | Point>>>;
-};
-declare const Canvas: React.ForwardRefExoticComponent<DrawerType & React.RefAttributes<HTMLCanvasElement>>;
-export default Canvas;

package/dist/components/common/Button.d.ts

@@ -1,14 +0,0 @@
-import React from 'react';
-declare type CommonType = {
-    hidden?: boolean;
-    disabled?: boolean;
-    selected?: boolean;
-    icon?: string;
-};
-declare type ButtonType = CommonType & React.ButtonHTMLAttributes<HTMLButtonElement>;
-declare type FileInputType = CommonType & {
-    type: 'file' | 'color';
-    accept?: string;
-} & React.InputHTMLAttributes<HTMLInputElement | HTMLButtonElement>;
-declare const Button: React.ForwardRefExoticComponent<(ButtonType | FileInputType) & React.RefAttributes<HTMLButtonElement | HTMLInputElement>>;
-export default Button;

package/dist/components/common/Loading.d.ts

@@ -1,6 +0,0 @@
-/// <reference types="react" />
-export declare type LoadingType = {
-    isLoading: boolean;
-};
-declare const Loading: ({ isLoading }: LoadingType) => JSX.Element | null;
-export default Loading;

package/dist/components/common/Modal.d.ts

@@ -1,8 +0,0 @@
-import { ReactNode } from 'react';
-declare type ModalType = {
-    children: ReactNode;
-    onClose: () => void;
-    className?: string;
-};
-declare const Modal: ({ children, onClose, className }: ModalType) => JSX.Element;
-export default Modal;

package/dist/components/common/Panel.d.ts

@@ -1,10 +0,0 @@
-import React from 'react';
-declare type PanelType = {
-    vertical?: boolean;
-    children: React.ReactNode;
-    title?: string;
-    className?: string;
-    alignment?: 'left' | 'right' | 'center';
-};
-declare const Panel: ({ children, vertical, title, className, alignment }: PanelType) => JSX.Element;
-export default Panel;

package/dist/components/common/Snackbar.d.ts

@@ -1,7 +0,0 @@
-/// <reference types="react" />
-import { SnackBarType } from 'hooks/useSnackbar';
-declare type SnackbarContainerType = {
-    snackbarList: SnackBarType[];
-};
-declare const SnackbarContainer: ({ snackbarList }: SnackbarContainerType) => JSX.Element;
-export default SnackbarContainer;

package/dist/components/settings/ColorField.d.ts

@@ -1,12 +0,0 @@
-import React from 'react';
-declare type ShapeStyleColorType = {
-    selectedSettings: string | undefined;
-    setSelectedSettings: React.Dispatch<React.SetStateAction<string | undefined>>;
-    title?: string;
-    disabled?: boolean;
-    field: string;
-    value?: string | undefined;
-    valueChanged: (field: string, value: string | number) => void;
-};
-declare const ColorField: ({ selectedSettings, setSelectedSettings, title, disabled, field, value, valueChanged }: ShapeStyleColorType) => JSX.Element;
-export default ColorField;

package/dist/components/settings/DeleteButton.d.ts

@@ -1,9 +0,0 @@
-/// <reference types="react" />
-import { DrawableShape } from 'types/Shapes';
-declare type DeleteShapeButtonType = {
-    disabled?: boolean;
-    selectedShape: DrawableShape;
-    removeShape: (shape: DrawableShape) => void;
-};
-declare const DeleteButton: ({ disabled, selectedShape, removeShape }: DeleteShapeButtonType) => JSX.Element;
-export default DeleteButton;

package/dist/components/settings/FontFamilyField.d.ts

@@ -1,10 +0,0 @@
-import React from 'react';
-declare type FontFamilyFieldType = {
-    selectedSettings: string | undefined;
-    setSelectedSettings: React.Dispatch<React.SetStateAction<string | undefined>>;
-    disabled?: boolean;
-    defaultValue?: number | string | undefined;
-    valueChanged: (field: string, value: string | number) => void;
-};
-declare const FontFamilyField: ({ selectedSettings, setSelectedSettings, disabled, defaultValue, valueChanged }: FontFamilyFieldType) => JSX.Element;
-export default FontFamilyField;

package/dist/components/settings/LayoutButton.d.ts

@@ -1,8 +0,0 @@
-/// <reference types="react" />
-declare type LayoutButtonType = {
-    disabled: boolean;
-    withLayouts?: 'always' | 'never' | 'visible' | 'hidden';
-    toggleLayoutPanel: () => void;
-};
-declare const LayoutButton: ({ withLayouts, disabled, toggleLayoutPanel }: LayoutButtonType) => JSX.Element;
-export default LayoutButton;

package/dist/components/settings/Layouts.d.ts

@@ -1,18 +0,0 @@
-import React from 'react';
-import { DrawableShape } from 'types/Shapes';
-declare type LayoutsType = {
-    withGrid: boolean;
-    setWithGrid: React.Dispatch<React.SetStateAction<boolean>>;
-    disabled?: boolean;
-    shapes: DrawableShape[];
-    removeShape: (shape: DrawableShape) => void;
-    toggleShapeVisibility: (shape: DrawableShape) => void;
-    toggleShapeLock: (shape: DrawableShape) => void;
-    selectedShape: DrawableShape | undefined;
-    selectShape: (shape: DrawableShape) => void;
-    moveShapes: (firstShapeId: string, lastShapeId: string) => void;
-    withLayouts?: 'always' | 'never' | 'visible' | 'hidden';
-    isLayoutPanelShown: boolean;
-};
-declare const Layouts: ({ withGrid, setWithGrid, disabled, shapes, removeShape, toggleShapeVisibility, toggleShapeLock, selectedShape, moveShapes, selectShape, withLayouts, isLayoutPanelShown }: LayoutsType) => JSX.Element | null;
-export default Layouts;