@yorab/react-paint 0.5.0 → 0.6.0

package/dist/utils/file.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getCanvasImage = exports.getBase64Image = exports.fetchAndStringify = exports.encodeShapesInString = exports.downloadFile = exports.decodePicturesInShapes = exports.decodeJson = void 0;
+exports.getCanvasImage = exports.getBase64Image = exports.fetchAndStringify = exports.encodeShapesInString = exports.downloadFile = exports.decodeJson = exports.decodeImportedData = void 0;
 
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
 
@@ -80,9 +80,9 @@ var getCanvasImage = function getCanvasImage(shapes, canvasOffset, width, height
 
 exports.getCanvasImage = getCanvasImage;
 
-var encodeShapesInString = function encodeShapesInString(shapes) {
-  var cleanShapes = (0, _data.cleanShapesBeforeExport)(shapes);
-  return encodeObjectToString(cleanShapes);
+var encodeShapesInString = function encodeShapesInString(shapes, width, height) {
+  var dataToExport = (0, _data.buildDataToExport)(shapes, width, height);
+  return encodeObjectToString(dataToExport);
 };
 
 exports.encodeShapesInString = encodeShapesInString;
@@ -123,14 +123,15 @@ var decodeJson = /*#__PURE__*/function () {
 
 exports.decodeJson = decodeJson;
 
-var decodePicturesInShapes = /*#__PURE__*/function () {
+var decodeImportedData = /*#__PURE__*/function () {
   var _ref2 = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee2(shapesForJson) {
-    var promisesArray, shapes;
+    var promisesArray, jsonShapes, shapes;
     return _regenerator["default"].wrap(function _callee2$(_context2) {
       while (1) {
         switch (_context2.prev = _context2.next) {
           case 0:
             promisesArray = [];
+            jsonShapes = shapesForJson.shapes;
             shapes = _fp["default"].flow(_fp["default"].map(function (shape) {
               if (!_fp["default"].includes(shape.type, _Shapes.ShapeEnum)) return null;
 
@@ -157,20 +158,20 @@ var decodePicturesInShapes = /*#__PURE__*/function () {
                   img.src = shape.src;
                 }
 
-                return _objectSpread(_objectSpread({}, shape), {}, {
+                return (0, _data.addDefaultAndTempShapeProps)(_objectSpread(_objectSpread({}, shape), {}, {
                   img: img
-                });
+                }));
               }
 
               return (0, _data.addDefaultAndTempShapeProps)(shape);
-            }), _fp["default"].compact)(shapesForJson);
-            _context2.next = 4;
+            }), _fp["default"].compact)(jsonShapes);
+            _context2.next = 5;
             return Promise.all(promisesArray);
 
-          case 4:
+          case 5:
             return _context2.abrupt("return", shapes);
 
-          case 5:
+          case 6:
           case "end":
             return _context2.stop();
         }
@@ -178,9 +179,9 @@ var decodePicturesInShapes = /*#__PURE__*/function () {
     }, _callee2);
   }));
 
-  return function decodePicturesInShapes(_x2) {
+  return function decodeImportedData(_x2) {
     return _ref2.apply(this, arguments);
   };
 }();
 
-exports.decodePicturesInShapes = decodePicturesInShapes;
+exports.decodeImportedData = decodeImportedData;

package/dist/utils/selection.js

@@ -54,7 +54,7 @@ var selectShape = function selectShape(shapes, cursorPosition, currentScale, can
     };
     var newSelectionMode = getNewSelectionData(positionIntersection, selectedShape, cursorPosition, selectionPadding);
 
-    if (newSelectionMode) {
+    if ((newSelectionMode === null || newSelectionMode === void 0 ? void 0 : newSelectionMode.mode) === _Mode.SelectionModeLib.resize || (newSelectionMode === null || newSelectionMode === void 0 ? void 0 : newSelectionMode.mode) === _Mode.SelectionModeLib.rotate) {
       return {
         shape: selectedShape,
         mode: newSelectionMode

package/dist/utils/transform.js

@@ -135,7 +135,13 @@ var updatePolygonLinesCount = function updatePolygonLinesCount(shape, newPointsC
   if (currentPointsCount === newPointsCount) return shape;
 
   if (currentPointsCount > newPointsCount) {
-    return _fp["default"].set('style.pointsCount', shape.points.slice(0, newPointsCount), shape);
+    var totalPoints = shape.points.slice(0, newPointsCount);
+    return _objectSpread(_objectSpread({}, shape), {}, {
+      points: totalPoints,
+      style: _objectSpread(_objectSpread({}, shape.style), {}, {
+        pointsCount: totalPoints.length
+      })
+    });
   } else {
     //TODO : better distribution for new points
     var nbPointsToAdd = newPointsCount - currentPointsCount;
@@ -144,7 +150,14 @@ var updatePolygonLinesCount = function updatePolygonLinesCount(shape, newPointsC
       return [shape.points[0][0] + (shape.points[1][0] - shape.points[0][0]) * (index + 1) / (nbPointsToAdd + 1), shape.points[0][1] + (shape.points[1][1] - shape.points[0][1]) * (index + 1) / (nbPointsToAdd + 1)];
     }))(nbPointsToAdd);
 
-    return _fp["default"].set('style.pointsCount', [shape.points[0]].concat((0, _toConsumableArray2["default"])(newPoints), (0, _toConsumableArray2["default"])(shape.points.slice(1, shape.points.length))), shape);
+    var _totalPoints = [shape.points[0]].concat((0, _toConsumableArray2["default"])(newPoints), (0, _toConsumableArray2["default"])(shape.points.slice(1, shape.points.length)));
+
+    return _objectSpread(_objectSpread({}, shape), {}, {
+      points: _totalPoints,
+      style: _objectSpread(_objectSpread({}, shape.style), {}, {
+        pointsCount: _totalPoints.length
+      })
+    });
   }
 };
 
@@ -260,11 +273,11 @@ var resizeRect = function resizeRect(cursorPosition, canvasOffset, originalShape
 exports.resizeRect = resizeRect;
 
 var resizeText = function resizeText(ctx, cursorPosition, canvasOffset, originalShape, selectionMode, selectionPadding) {
-  var _newRect$style;
+  var _newRect$style$fontBo, _newRect$style, _newRect$style$fontIt, _newRect$style2, _newRect$style3;
 
   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)
+    fontSize: calculateTextFontSize(ctx, newRect.value, newRect.width, (_newRect$style$fontBo = (_newRect$style = newRect.style) === null || _newRect$style === void 0 ? void 0 : _newRect$style.fontBold) !== null && _newRect$style$fontBo !== void 0 ? _newRect$style$fontBo : false, (_newRect$style$fontIt = (_newRect$style2 = newRect.style) === null || _newRect$style2 === void 0 ? void 0 : _newRect$style2.fontItalic) !== null && _newRect$style$fontIt !== void 0 ? _newRect$style$fontIt : false, (_newRect$style3 = newRect.style) === null || _newRect$style3 === void 0 ? void 0 : _newRect$style3.fontFamily)
   });
 };
 
@@ -332,11 +345,11 @@ var transformShape = function transformShape(ctx, shape, cursorPosition, canvasO
 
 exports.transformShape = transformShape;
 
-var calculateTextFontSize = function calculateTextFontSize(ctx, text, maxWidth) {
+var calculateTextFontSize = function calculateTextFontSize(ctx, text, maxWidth, fontBold, fontItalic) {
   var _$flow;
 
-  var fontFamily = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : _style.STYLE_FONT_DEFAULT;
-  ctx.font = "1px ".concat(fontFamily);
+  var fontFamily = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : _style.STYLE_FONT_DEFAULT;
+  ctx.font = "".concat(fontItalic ? 'italic' : '', " ").concat(fontBold ? 'bold' : '', " 1px ").concat(fontFamily);
   return (_$flow = _fp["default"].flow(_fp["default"].map(function (value) {
     return maxWidth / ctx.measureText(value).width;
   }), _fp["default"].min)(text)) !== null && _$flow !== void 0 ? _$flow : _style.STYLE_FONT_SIZE_DEFAULT;
@@ -344,11 +357,11 @@ var calculateTextFontSize = function calculateTextFontSize(ctx, text, maxWidth)
 
 exports.calculateTextFontSize = calculateTextFontSize;
 
-var calculateTextWidth = function calculateTextWidth(ctx, text, fontSize) {
+var calculateTextWidth = function calculateTextWidth(ctx, text, fontSize, fontBold, fontItalic) {
   var _$flow2;
 
-  var fontFamily = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : _style.STYLE_FONT_DEFAULT;
-  ctx.font = "".concat(fontSize, "px ").concat(fontFamily);
+  var fontFamily = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : _style.STYLE_FONT_DEFAULT;
+  ctx.font = "".concat(fontItalic ? 'italic' : '', " ").concat(fontBold ? 'bold' : '', " ").concat(fontSize, "px ").concat(fontFamily);
   return (_$flow2 = _fp["default"].flow(_fp["default"].map(function (value) {
     return ctx.measureText(value).width;
   }), _fp["default"].max)(text)) !== null && _$flow2 !== void 0 ? _$flow2 : 20;

package/package.json

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