@yorab/react-paint 0.6.4 → 0.7.1

package/dist/utils/shapes/line.js

@@ -0,0 +1,179 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.resizeLine = exports.getLineBorder = exports.drawLineSelection = exports.drawLine = exports.createLine = exports.buildTriangleOnLine = void 0;
+
+var _shapes = require("../../constants/shapes");
+
+var _fp = _interopRequireDefault(require("lodash/fp"));
+
+var _canvas = require("../canvas");
+
+var _intersect = require("../intersect");
+
+var _trigo = require("../trigo");
+
+var _2 = require(".");
+
+var _circle = require("./circle");
+
+var _rectangle = require("./rectangle");
+
+var _triangle = require("./triangle");
+
+const createLine = (shape, cursorPosition) => {
+  return {
+    toolId: shape.id,
+    type: shape.type,
+    id: _fp.default.uniqueId("".concat(shape.type, "_")),
+    points: [cursorPosition, cursorPosition],
+    rotation: 0,
+    style: {
+      globalAlpha: shape.settings.opacity.default,
+      strokeColor: shape.settings.strokeColor.default,
+      lineWidth: shape.settings.lineWidth.default,
+      lineDash: shape.settings.lineDash.default,
+      lineArrow: shape.settings.lineArrow.default
+    }
+  };
+};
+
+exports.createLine = createLine;
+
+const buildTriangleOnLine = (center, rotation, lineStyle) => {
+  var _lineStyle$style$line, _lineStyle$style, _lineStyle$style$line2, _lineStyle$style2, _lineStyle$style$line3, _lineStyle$style3, _lineStyle$style$line4, _lineStyle$style4, _lineStyle$style$line5, _lineStyle$style5, _lineStyle$style6;
+
+  const trianglePoints = [(0, _trigo.rotatePoint)({
+    point: [0, -(10 + ((_lineStyle$style$line = (_lineStyle$style = lineStyle.style) === null || _lineStyle$style === void 0 ? void 0 : _lineStyle$style.lineWidth) !== null && _lineStyle$style$line !== void 0 ? _lineStyle$style$line : 0) * 1)],
+    rotation
+  }), (0, _trigo.rotatePoint)({
+    point: [-(5 + ((_lineStyle$style$line2 = (_lineStyle$style2 = lineStyle.style) === null || _lineStyle$style2 === void 0 ? void 0 : _lineStyle$style2.lineWidth) !== null && _lineStyle$style$line2 !== void 0 ? _lineStyle$style$line2 : 0) * 1), 5 + ((_lineStyle$style$line3 = (_lineStyle$style3 = lineStyle.style) === null || _lineStyle$style3 === void 0 ? void 0 : _lineStyle$style3.lineWidth) !== null && _lineStyle$style$line3 !== void 0 ? _lineStyle$style$line3 : 0) * 2],
+    rotation
+  }), (0, _trigo.rotatePoint)({
+    point: [5 + ((_lineStyle$style$line4 = (_lineStyle$style4 = lineStyle.style) === null || _lineStyle$style4 === void 0 ? void 0 : _lineStyle$style4.lineWidth) !== null && _lineStyle$style$line4 !== void 0 ? _lineStyle$style$line4 : 0) * 1, 5 + ((_lineStyle$style$line5 = (_lineStyle$style5 = lineStyle.style) === null || _lineStyle$style5 === void 0 ? void 0 : _lineStyle$style5.lineWidth) !== null && _lineStyle$style$line5 !== void 0 ? _lineStyle$style$line5 : 0) * 2],
+    rotation
+  })];
+  return {
+    points: [[center[0] + trianglePoints[0][0], center[1] + trianglePoints[0][1]], [center[0] + trianglePoints[1][0], center[1] + trianglePoints[1][1]], [center[0] + trianglePoints[2][0], center[1] + trianglePoints[2][1]]],
+    style: { ...lineStyle.style,
+      fillColor: (_lineStyle$style6 = lineStyle.style) === null || _lineStyle$style6 === void 0 ? void 0 : _lineStyle$style6.strokeColor,
+      strokeColor: 'transparent'
+    }
+  };
+};
+
+exports.buildTriangleOnLine = buildTriangleOnLine;
+
+const drawLine = (ctx, line) => {
+  var _line$style, _line$style2, _line$style3, _line$style4, _line$style5, _line$style6;
+
+  (0, _canvas.updateCanvasContext)(ctx, line.style);
+  if (ctx.globalAlpha === 0) return;
+  ctx.beginPath();
+  ctx.moveTo(...line.points[0]);
+  ctx.lineTo(...line.points[1]);
+  ((_line$style = line.style) === null || _line$style === void 0 ? void 0 : _line$style.fillColor) !== 'transparent' && ctx.fill();
+  ((_line$style2 = line.style) === null || _line$style2 === void 0 ? void 0 : _line$style2.strokeColor) !== 'transparent' && ctx.stroke();
+
+  if (((_line$style3 = line.style) === null || _line$style3 === void 0 ? void 0 : _line$style3.lineArrow) === 1 || ((_line$style4 = line.style) === null || _line$style4 === void 0 ? void 0 : _line$style4.lineArrow) === 3) {
+    const rotation = Math.PI / 2 - (0, _trigo.getAngleFromVector)(line.points[0], line.points[1]);
+    (0, _triangle.drawTriangle)(ctx, buildTriangleOnLine(line.points[0], rotation, {
+      style: line.style
+    }));
+  }
+
+  if (((_line$style5 = line.style) === null || _line$style5 === void 0 ? void 0 : _line$style5.lineArrow) === 2 || ((_line$style6 = line.style) === null || _line$style6 === void 0 ? void 0 : _line$style6.lineArrow) === 3) {
+    const rotation = Math.PI / 2 - (0, _trigo.getAngleFromVector)(line.points[1], line.points[0]);
+    (0, _triangle.drawTriangle)(ctx, buildTriangleOnLine(line.points[1], rotation, {
+      style: line.style
+    }));
+  }
+};
+
+exports.drawLine = drawLine;
+
+const getLineBorder = (line, selectionPadding) => {
+  const x = Math.min(line.points[0][0], line.points[1][0]) - selectionPadding;
+  const width = Math.abs(line.points[0][0] - line.points[1][0]) + selectionPadding * 2;
+  const y = Math.min(line.points[0][1], line.points[1][1]) - selectionPadding;
+  const height = Math.abs(line.points[0][1] - line.points[1][1]) + selectionPadding * 2;
+  return {
+    x,
+    width,
+    y,
+    height
+  };
+};
+
+exports.getLineBorder = getLineBorder;
+
+const resizeLine = (cursorPosition, canvasOffset, originalShape, selectionMode, selectionPadding) => {
+  const {
+    center
+  } = (0, _2.getShapeInfos)(originalShape, selectionPadding);
+  const cursorPositionBeforeResize = (0, _intersect.getPointPositionAfterCanvasTransformation)(cursorPosition, originalShape.rotation, center, canvasOffset);
+
+  const updatedShape = _fp.default.set(['points', selectionMode.anchor], cursorPositionBeforeResize, originalShape);
+
+  return updatedShape;
+};
+
+exports.resizeLine = resizeLine;
+
+const drawLineSelection = _ref => {
+  let {
+    ctx,
+    shape,
+    withAnchors,
+    selectionPadding,
+    selectionWidth,
+    selectionColor,
+    currentScale = 1
+  } = _ref;
+  const {
+    borders
+  } = (0, _2.getShapeInfos)(shape, selectionPadding);
+  (0, _rectangle.drawRect)(ctx, { ...borders,
+    style: {
+      fillColor: 'transparent',
+      strokeColor: selectionColor,
+      lineWidth: selectionWidth / currentScale
+    }
+  });
+  if (!withAnchors || shape.locked) return;
+
+  for (let i = 0; i < shape.points.length; i++) {
+    const coordinate = shape.points[i];
+
+    if (shape.type === 'curve' && i > 0 && i < shape.points.length - 1) {
+      (0, _rectangle.drawRect)(ctx, {
+        x: coordinate[0] - _shapes.SELECTION_ANCHOR_SIZE / 2,
+        y: coordinate[1] - _shapes.SELECTION_ANCHOR_SIZE / 2,
+        width: _shapes.SELECTION_ANCHOR_SIZE / currentScale,
+        height: _shapes.SELECTION_ANCHOR_SIZE / currentScale,
+        style: {
+          fillColor: 'rgb(255,255,255)',
+          strokeColor: 'rgb(150,150,150)',
+          lineWidth: selectionWidth / currentScale
+        }
+      });
+    } else {
+      (0, _circle.drawCircle)(ctx, {
+        x: coordinate[0],
+        y: coordinate[1],
+        radius: _shapes.SELECTION_ANCHOR_SIZE / 2 / currentScale,
+        style: {
+          fillColor: 'rgb(255,255,255)',
+          strokeColor: 'rgb(150,150,150)',
+          lineWidth: selectionWidth / currentScale
+        }
+      });
+    }
+  }
+};
+
+exports.drawLineSelection = drawLineSelection;

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/string.js

@@ -9,34 +9,28 @@ exports.decodeHtmlEntities = exports.convertStringArrayToDivContent = exports.co
 
 var _fp = _interopRequireDefault(require("lodash/fp"));
 
-var stripBrRegexp = /<br(\/?\s?)>/g;
-var stripDivRegexp = /<(\/)?div(\/?\s?)>/g;
+const stripBrRegexp = /<br(\/?\s?)>/g;
+const stripDivRegexp = /<(\/)?div(\/?\s?)>/g;
 
-var convertStringArrayToDivContent = function convertStringArrayToDivContent(toConvert) {
-  return toConvert.map(function (val) {
-    return "<div>".concat(val === '' ? '<br/>' : val, "</div>");
-  }).join('');
+const convertStringArrayToDivContent = toConvert => {
+  return toConvert.map(val => "<div>".concat(val === '' ? '<br/>' : val, "</div>")).join('');
 };
 
 exports.convertStringArrayToDivContent = convertStringArrayToDivContent;
 
-var decodeHtmlEntities = function decodeHtmlEntities(html) {
-  var textareaElement = document.createElement('textarea');
+const decodeHtmlEntities = html => {
+  const textareaElement = document.createElement('textarea');
   textareaElement.innerHTML = html;
   return textareaElement.value;
 };
 
 exports.decodeHtmlEntities = decodeHtmlEntities;
 
-var convertDivContentToStringArray = function convertDivContentToStringArray(toConvert) {
-  return _fp["default"].flow(function (divContent) {
-    return decodeHtmlEntities(divContent);
-  }, function (divContent) {
-    return divContent.split('<div>');
-  }, _fp["default"].flatMap(function (val) {
-    var newVal = val.replaceAll(stripDivRegexp, '');
+const convertDivContentToStringArray = toConvert => {
+  return _fp.default.flow(divContent => decodeHtmlEntities(divContent), divContent => divContent.split('<div>'), _fp.default.flatMap(val => {
+    const newVal = val.replaceAll(stripDivRegexp, '');
     return newVal === '' ? undefined : newVal.replaceAll(stripBrRegexp, '');
-  }), _fp["default"].reject(_fp["default"].isUndefined))(toConvert);
+  }), _fp.default.reject(_fp.default.isUndefined))(toConvert);
 };
 
 exports.convertDivContentToStringArray = convertDivContentToStringArray;