@yorab/react-paint 0.6.6 → 0.7.2

package/dist/utils/shapes/picture.js

@@ -0,0 +1,88 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.resizePicture = exports.getPictureBorder = exports.drawPicture = exports.createPicture = void 0;
+
+var _fp = _interopRequireDefault(require("lodash/fp"));
+
+var _transform = require("../transform");
+
+var _file = require("../file");
+
+var _tools = require("../../constants/tools");
+
+var _canvas = require("../canvas");
+
+var _rectangle = require("./rectangle");
+
+const createPicture = (fileOrUrl, maxPictureWidth, maxPictureHeight) => {
+  return new Promise((resolve, reject) => {
+    const img = new Image();
+
+    img.onload = () => {
+      const [width, height] = (0, _transform.fitContentInsideContainer)(img.width, img.height, maxPictureWidth, maxPictureHeight, true);
+      const pictureShape = {
+        toolId: _tools.DEFAULT_SHAPE_PICTURE.id,
+        type: 'picture',
+        id: _fp.default.uniqueId('picture'.concat("_")),
+        x: (maxPictureWidth - width) / 2,
+        y: (maxPictureHeight - height) / 2,
+        width,
+        height,
+        src: fileOrUrl instanceof File ? img.src : fileOrUrl,
+        img,
+        rotation: 0
+      };
+      resolve(pictureShape);
+    };
+
+    img.onerror = () => {
+      reject(new Error('Some images could not be loaded'));
+    };
+
+    if (fileOrUrl instanceof File) {
+      img.src = URL.createObjectURL(fileOrUrl);
+    } else {
+      (0, _file.fetchAndStringify)(fileOrUrl).then(picData => {
+        img.src = picData;
+      }).catch(() => {
+        img.src = ''; // to trigger onerror
+      });
+    }
+
+    img.onerror = () => {
+      reject(new Error('Error while loading the src'));
+    };
+
+    setTimeout(() => {
+      reject(new Error('Timeout while loading the src'));
+    }, 4000);
+  });
+};
+
+exports.createPicture = createPicture;
+
+const drawPicture = (ctx, picture) => {
+  (0, _canvas.updateCanvasContext)(ctx, picture.style);
+  if (ctx.globalAlpha === 0) return;
+  ctx.beginPath();
+  ctx.drawImage(picture.img, picture.x, picture.y, picture.width, picture.height);
+};
+
+exports.drawPicture = drawPicture;
+
+const getPictureBorder = (picture, selectionPadding) => {
+  return (0, _rectangle.getRectBorder)(picture, selectionPadding);
+};
+
+exports.getPictureBorder = getPictureBorder;
+
+const resizePicture = (cursorPosition, canvasOffset, originalShape, selectionMode, selectionPadding, keepRatio) => {
+  return (0, _rectangle.resizeRect)(cursorPosition, canvasOffset, originalShape, selectionMode, selectionPadding, keepRatio);
+};
+
+exports.resizePicture = resizePicture;

package/dist/utils/shapes/polygon.js

@@ -0,0 +1,69 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getPolygonBorder = exports.drawPolygon = exports.createPolygon = void 0;
+
+var _fp = _interopRequireDefault(require("lodash/fp"));
+
+var _canvas = require("../canvas");
+
+const createPolygon = (shape, cursorPosition) => {
+  return {
+    toolId: shape.id,
+    type: shape.type,
+    id: _fp.default.uniqueId("".concat(shape.type, "_")),
+    points: _fp.default.flow(_fp.default.range(0), _fp.default.map(() => cursorPosition))(shape.settings.pointsCount.default),
+    rotation: 0,
+    style: {
+      globalAlpha: shape.settings.opacity.default,
+      fillColor: shape.settings.fillColor.default,
+      strokeColor: shape.settings.strokeColor.default,
+      lineWidth: shape.settings.lineWidth.default,
+      lineDash: shape.settings.lineDash.default,
+      pointsCount: shape.settings.pointsCount.default
+    }
+  };
+};
+
+exports.createPolygon = createPolygon;
+
+const drawPolygon = (ctx, polygon) => {
+  var _polygon$style, _polygon$style2;
+
+  if (polygon.points.length < 1) return;
+  (0, _canvas.updateCanvasContext)(ctx, polygon.style);
+  if (ctx.globalAlpha === 0) return;
+  ctx.beginPath();
+  ctx.moveTo(...polygon.points[0]);
+  polygon.points.slice(1).forEach(point => {
+    ctx.lineTo(...point);
+  });
+  ctx.lineTo(...polygon.points[0]);
+  ((_polygon$style = polygon.style) === null || _polygon$style === void 0 ? void 0 : _polygon$style.fillColor) !== 'transparent' && ctx.fill();
+  ((_polygon$style2 = polygon.style) === null || _polygon$style2 === void 0 ? void 0 : _polygon$style2.strokeColor) !== 'transparent' && ctx.stroke();
+};
+
+exports.drawPolygon = drawPolygon;
+
+const getPolygonBorder = (polygon, selectionPadding) => {
+  const minX = _fp.default.flow(_fp.default.map(point => point[0]), _fp.default.min, _fp.default.add(-selectionPadding))(polygon.points);
+
+  const maxX = _fp.default.flow(_fp.default.map(point => point[0]), _fp.default.max, _fp.default.add(selectionPadding))(polygon.points);
+
+  const minY = _fp.default.flow(_fp.default.map(point => point[1]), _fp.default.min, _fp.default.add(-selectionPadding))(polygon.points);
+
+  const maxY = _fp.default.flow(_fp.default.map(point => point[1]), _fp.default.max, _fp.default.add(selectionPadding))(polygon.points);
+
+  return {
+    x: minX,
+    width: maxX - minX,
+    y: minY,
+    height: maxY - minY
+  };
+};
+
+exports.getPolygonBorder = getPolygonBorder;

package/dist/utils/shapes/rectangle.js

@@ -0,0 +1,100 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.resizeRect = exports.getRectOppositeAnchorAbsolutePosition = exports.getRectBorder = exports.drawRect = exports.createRectangle = void 0;
+
+var _fp = _interopRequireDefault(require("lodash/fp"));
+
+var _canvas = require("../canvas");
+
+var _intersect = require("../intersect");
+
+var _transform = require("../transform");
+
+var _2 = require(".");
+
+const createRectangle = (shape, cursorPosition) => {
+  return {
+    toolId: shape.id,
+    type: shape.type,
+    id: _fp.default.uniqueId("".concat(shape.type, "_")),
+    x: cursorPosition[0],
+    y: cursorPosition[1],
+    width: 1,
+    height: 1,
+    rotation: 0,
+    style: {
+      globalAlpha: shape.settings.opacity.default,
+      fillColor: shape.settings.fillColor.default,
+      strokeColor: shape.settings.strokeColor.default,
+      lineWidth: shape.settings.lineWidth.default,
+      lineDash: shape.settings.lineDash.default
+    }
+  };
+};
+
+exports.createRectangle = createRectangle;
+
+const drawRect = (ctx, rect) => {
+  var _rect$style, _rect$style2;
+
+  (0, _canvas.updateCanvasContext)(ctx, rect.style);
+  if (ctx.globalAlpha === 0) return;
+  ctx.beginPath();
+  ctx.rect(rect.x, rect.y, rect.width, rect.height);
+  ((_rect$style = rect.style) === null || _rect$style === void 0 ? void 0 : _rect$style.fillColor) !== 'transparent' && ctx.fill();
+  ((_rect$style2 = rect.style) === null || _rect$style2 === void 0 ? void 0 : _rect$style2.strokeColor) !== 'transparent' && ctx.stroke();
+};
+
+exports.drawRect = drawRect;
+
+const getRectBorder = (rect, selectionPadding) => {
+  return {
+    x: rect.x - selectionPadding,
+    width: rect.width + selectionPadding * 2,
+    y: rect.y - selectionPadding,
+    height: rect.height + selectionPadding * 2
+  };
+};
+
+exports.getRectBorder = getRectBorder;
+
+const getRectOppositeAnchorAbsolutePosition = function (anchor, center, shape, canvasOffset) {
+  let [negW, negH] = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : [false, false];
+  const oppositeX = anchor[0] === 0.5 ? shape.x + shape.width / 2 : anchor[0] === 0 ? shape.x + (negW ? 0 : shape.width) : shape.x + (negW ? shape.width : 0);
+  const oppositeY = anchor[1] === 0.5 ? shape.y + shape.height / 2 : anchor[1] === 0 ? shape.y + (negH ? 0 : shape.height) : shape.y + (negH ? shape.height : 0);
+  return (0, _intersect.getPointPositionBeforeCanvasTransformation)([oppositeX, oppositeY], shape.rotation, center, canvasOffset);
+};
+
+exports.getRectOppositeAnchorAbsolutePosition = getRectOppositeAnchorAbsolutePosition;
+
+const resizeRect = function (cursorPosition, canvasOffset, originalShape, selectionMode, selectionPadding) {
+  let keepRatio = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : false;
+  const {
+    center,
+    borders
+  } = (0, _2.getShapeInfos)(originalShape, selectionPadding);
+  const cusroPositionAfterShapeTransormation = (0, _intersect.getPointPositionAfterCanvasTransformation)(cursorPosition, originalShape.rotation, center, canvasOffset);
+  const scaledWidth = selectionMode.anchor[0] === 0.5 ? originalShape.width : selectionMode.anchor[0] === 0 ? borders.x + borders.width - cusroPositionAfterShapeTransormation[0] + selectionPadding * -2 : cusroPositionAfterShapeTransormation[0] - borders.x - selectionPadding * 2;
+  const scaledHeight = selectionMode.anchor[1] === 0.5 ? originalShape.height : selectionMode.anchor[1] === 0 ? borders.y + borders.height - cusroPositionAfterShapeTransormation[1] + selectionPadding * -2 : cusroPositionAfterShapeTransormation[1] - borders.y - selectionPadding * 2;
+  const [widthWithRatio, heightWithRatio] = keepRatio ? (0, _transform.getNormalizedSize)(originalShape.width, originalShape.height, scaledWidth, scaledHeight) : [scaledWidth, scaledHeight];
+  const shapeWithNewDimensions = { ...originalShape,
+    width: Math.abs(widthWithRatio),
+    height: Math.abs(heightWithRatio)
+  };
+  const {
+    center: shapeWithNewDimensionsCenter
+  } = (0, _2.getShapeInfos)(shapeWithNewDimensions, selectionPadding);
+  const [oppTrueX, oppTrueY] = getRectOppositeAnchorAbsolutePosition(selectionMode.anchor, center, originalShape, canvasOffset);
+  const [newOppTrueX, newOppTrueY] = getRectOppositeAnchorAbsolutePosition(selectionMode.anchor, shapeWithNewDimensionsCenter, shapeWithNewDimensions, canvasOffset, [widthWithRatio < 0, heightWithRatio < 0]);
+  return { ...shapeWithNewDimensions,
+    x: shapeWithNewDimensions.x - (newOppTrueX - oppTrueX),
+    y: shapeWithNewDimensions.y - (newOppTrueY - oppTrueY)
+  };
+};
+
+exports.resizeRect = resizeRect;

package/dist/utils/shapes/text.js

@@ -0,0 +1,128 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.resizeTextShapeWithNewContent = exports.resizeText = exports.getTextBorder = exports.drawText = exports.createText = exports.calculateTextFontSize = void 0;
+
+var _fp = _interopRequireDefault(require("lodash/fp"));
+
+var _canvas = require("../canvas");
+
+var _style = require("../../constants/style");
+
+var _rectangle = require("./rectangle");
+
+var _2 = require(".");
+
+const calculateTextFontSize = function (ctx, text, maxWidth, fontBold, fontItalic) {
+  var _$flow;
+
+  let 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(value => maxWidth / ctx.measureText(value).width), _fp.default.min)(text)) !== null && _$flow !== void 0 ? _$flow : _style.STYLE_FONT_SIZE_DEFAULT;
+};
+
+exports.calculateTextFontSize = calculateTextFontSize;
+
+const createText = (ctx, shape, cursorPosition) => {
+  var _shape$settings$fontB, _shape$settings, _shape$settings$fontI, _shape$settings2;
+
+  const defaultValue = ['Texte'];
+  const fontSize = calculateTextFontSize(ctx, defaultValue, 50, (_shape$settings$fontB = (_shape$settings = shape.settings) === null || _shape$settings === void 0 ? void 0 : _shape$settings.fontBold.default) !== null && _shape$settings$fontB !== void 0 ? _shape$settings$fontB : false, (_shape$settings$fontI = (_shape$settings2 = shape.settings) === null || _shape$settings2 === void 0 ? void 0 : _shape$settings2.fontItalic.default) !== null && _shape$settings$fontI !== void 0 ? _shape$settings$fontI : false, shape.settings.fontFamily.default);
+  return {
+    toolId: shape.id,
+    type: shape.type,
+    id: _fp.default.uniqueId("".concat(shape.type, "_")),
+    x: cursorPosition[0],
+    y: cursorPosition[1],
+    value: defaultValue,
+    fontSize,
+    width: 50,
+    height: fontSize * (defaultValue.length || 1),
+    rotation: 0,
+    style: {
+      globalAlpha: shape.settings.opacity.default,
+      strokeColor: shape.settings.strokeColor.default,
+      fontFamily: shape.settings.fontFamily.default
+    }
+  };
+};
+
+exports.createText = createText;
+
+const drawText = (ctx, text) => {
+  var _text$style, _text$style2, _text$style3, _text$style$fontFamil, _text$style4;
+
+  (0, _canvas.updateCanvasContext)(ctx, text.style);
+  if (ctx.globalAlpha === 0 || !((_text$style = text.style) !== null && _text$style !== void 0 && _text$style.strokeColor) || text.style.strokeColor === 'transparent') return;
+  ctx.font = "".concat((_text$style2 = text.style) !== null && _text$style2 !== void 0 && _text$style2.fontItalic ? 'italic' : '', " ").concat((_text$style3 = text.style) !== null && _text$style3 !== void 0 && _text$style3.fontBold ? 'bold' : '', " ").concat(text.fontSize, "px ").concat((_text$style$fontFamil = (_text$style4 = text.style) === null || _text$style4 === void 0 ? void 0 : _text$style4.fontFamily) !== null && _text$style$fontFamil !== void 0 ? _text$style$fontFamil : _style.STYLE_FONT_DEFAULT);
+  ctx.textBaseline = 'top';
+  ctx.fillStyle = text.style.strokeColor;
+
+  for (let i = 0; i < text.value.length; i++) {
+    ctx.fillText(text.value[i], text.x, text.y + i * text.fontSize, text.width);
+  }
+};
+
+exports.drawText = drawText;
+
+const getTextBorder = (text, selectionPadding) => {
+  return {
+    x: text.x - selectionPadding,
+    width: text.width + selectionPadding * 2,
+    y: text.y - selectionPadding,
+    height: text.height + selectionPadding * 2
+  };
+};
+
+exports.getTextBorder = getTextBorder;
+
+const resizeText = (ctx, cursorPosition, canvasOffset, originalShape, selectionMode, selectionPadding) => {
+  var _newRect$style$fontBo, _newRect$style, _newRect$style$fontIt, _newRect$style2, _newRect$style3;
+
+  const newRect = (0, _rectangle.resizeRect)(cursorPosition, canvasOffset, originalShape, selectionMode, selectionPadding, true);
+  return { ...newRect,
+    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)
+  };
+};
+
+exports.resizeText = resizeText;
+
+const calculateTextWidth = function (ctx, text, fontSize, fontBold, fontItalic) {
+  var _$flow2;
+
+  let 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(value => ctx.measureText(value).width), _fp.default.max)(text)) !== null && _$flow2 !== void 0 ? _$flow2 : 20;
+};
+
+const resizeTextShapeWithNewContent = (ctx, shape, newValue, canvasOffset) => {
+  var _newShape$style$fontB, _newShape$style, _newShape$style$fontI, _newShape$style2, _newShape$style3;
+
+  const newShape = _fp.default.set('value', newValue, shape);
+
+  const newWidth = calculateTextWidth(ctx, newShape.value, newShape.fontSize, (_newShape$style$fontB = (_newShape$style = newShape.style) === null || _newShape$style === void 0 ? void 0 : _newShape$style.fontBold) !== null && _newShape$style$fontB !== void 0 ? _newShape$style$fontB : false, (_newShape$style$fontI = (_newShape$style2 = newShape.style) === null || _newShape$style2 === void 0 ? void 0 : _newShape$style2.fontItalic) !== null && _newShape$style$fontI !== void 0 ? _newShape$style$fontI : false, (_newShape$style3 = newShape.style) === null || _newShape$style3 === void 0 ? void 0 : _newShape$style3.fontFamily);
+  const newHeight = newShape.fontSize * newShape.value.length;
+  const resizedShape = { ...newShape,
+    width: newWidth,
+    height: newHeight
+  };
+  const selectionPadding = 0;
+  const {
+    center
+  } = (0, _2.getShapeInfos)(shape, selectionPadding);
+  const {
+    center: shapeWithNewDimensionsCenter
+  } = (0, _2.getShapeInfos)(resizedShape, selectionPadding);
+  const [oppTrueX, oppTrueY] = (0, _rectangle.getRectOppositeAnchorAbsolutePosition)([1, 0.5], center, shape, canvasOffset);
+  const [newOppTrueX, newOppTrueY] = (0, _rectangle.getRectOppositeAnchorAbsolutePosition)([1, 0.5], shapeWithNewDimensionsCenter, resizedShape, canvasOffset, [false, false]);
+  return { ...resizedShape,
+    x: resizedShape.x - (newOppTrueX - oppTrueX),
+    y: resizedShape.y - (newOppTrueY - oppTrueY)
+  };
+};
+
+exports.resizeTextShapeWithNewContent = resizeTextShapeWithNewContent;

package/dist/utils/shapes/triangle.js

@@ -0,0 +1,24 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.drawTriangle = void 0;
+
+var _canvas = require("../canvas");
+
+const drawTriangle = (ctx, triangle) => {
+  var _triangle$style, _triangle$style2;
+
+  (0, _canvas.updateCanvasContext)(ctx, triangle.style);
+  if (ctx.globalAlpha === 0) return;
+  ctx.beginPath();
+  ctx.moveTo(...triangle.points[0]);
+  ctx.lineTo(...triangle.points[1]);
+  ctx.lineTo(...triangle.points[2]);
+  ctx.lineTo(...triangle.points[0]);
+  ((_triangle$style = triangle.style) === null || _triangle$style === void 0 ? void 0 : _triangle$style.fillColor) !== 'transparent' && ctx.fill();
+  ((_triangle$style2 = triangle.style) === null || _triangle$style2 === void 0 ? void 0 : _triangle$style2.strokeColor) !== 'transparent' && ctx.stroke();
+};
+
+exports.drawTriangle = drawTriangle;

package/dist/utils/style.js

@@ -5,42 +5,40 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.getShapePicture = void 0;
 
-var _Shapes = require("../types/Shapes");
-
 var _icons = require("../constants/icons");
 
 const getShapePicture = shape => {
   switch (shape) {
-    case _Shapes.ShapeEnum.brush:
+    case 'brush':
       return _icons.brushIcon;
 
-    case _Shapes.ShapeEnum.line:
+    case 'line':
       return _icons.arrowIcon;
 
-    case _Shapes.ShapeEnum.polygon:
+    case 'polygon':
       return _icons.polygonIcon;
 
-    case _Shapes.ShapeEnum.curve:
+    case 'curve':
       return _icons.curveIcon;
 
-    case _Shapes.ShapeEnum.rect:
+    case 'rect':
       return _icons.squareIcon;
     // temporary
 
-    case _Shapes.ShapeEnum.square:
+    case 'square':
       return _icons.squareIcon;
 
-    case _Shapes.ShapeEnum.circle:
+    case 'circle':
       return _icons.circleIcon;
 
-    case _Shapes.ShapeEnum.ellipse:
+    case 'ellipse':
       return _icons.circleIcon;
     // temporary
 
-    case _Shapes.ShapeEnum.text:
+    case 'text':
       return _icons.textIcon;
 
-    case _Shapes.ShapeEnum.picture:
+    case 'picture':
       return _icons.pictureIcon;
   }
 };

package/dist/utils/toolbar.js

@@ -7,8 +7,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.sanitizeTools = exports.getCurrentStructure = void 0;
 
-var _Shapes = require("../types/Shapes");
-
 var _fp = _interopRequireDefault(require("lodash/fp"));
 
 var _tools = require("../constants/tools");
@@ -45,31 +43,31 @@ const sanitizeTools = function (tools) {
     if (!_fp.default.isObject(tool)) return null;
 
     switch (_fp.default.get('type', tool)) {
-      case _Shapes.ShapeEnum.brush:
+      case 'brush':
         return _fp.default.mergeWith(customizer, _tools.DEFAULT_SHAPE_BRUSH, tool);
 
-      case _Shapes.ShapeEnum.circle:
+      case 'circle':
         return _fp.default.mergeWith(customizer, _tools.DEFAULT_SHAPE_CIRCLE, tool);
 
-      case _Shapes.ShapeEnum.curve:
+      case 'curve':
         return _fp.default.mergeWith(customizer, _tools.DEFAULT_SHAPE_CURVE, tool);
 
-      case _Shapes.ShapeEnum.ellipse:
+      case 'ellipse':
         return _fp.default.mergeWith(customizer, _tools.DEFAULT_SHAPE_ELLIPSE, tool);
 
-      case _Shapes.ShapeEnum.line:
+      case 'line':
         return _fp.default.mergeWith(customizer, _tools.DEFAULT_SHAPE_LINE, tool);
 
-      case _Shapes.ShapeEnum.polygon:
+      case 'polygon':
         return _fp.default.mergeWith(customizer, _tools.DEFAULT_SHAPE_POLYGON, tool);
 
-      case _Shapes.ShapeEnum.rect:
+      case 'rect':
         return _fp.default.mergeWith(customizer, _tools.DEFAULT_SHAPE_RECT, tool);
 
-      case _Shapes.ShapeEnum.square:
+      case 'square':
         return _fp.default.mergeWith(customizer, _tools.DEFAULT_SHAPE_SQUARE, tool);
 
-      case _Shapes.ShapeEnum.text:
+      case 'text':
         return _fp.default.mergeWith(customizer, _tools.DEFAULT_SHAPE_TEXT, tool);
     }