@yorab/react-paint 0.2.2

package/dist/utils/draw.js

@@ -0,0 +1,422 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.drawTriangle = exports.drawText = exports.drawShape = exports.drawSelection = exports.drawRect = exports.drawPolygon = exports.drawPicture = exports.drawLine = exports.drawEllipse = exports.drawCurve = exports.drawCircle = exports.drawBrush = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+
+var _shapes = require("../constants/shapes");
+
+var _style = require("../constants/style");
+
+var _intersect = require("./intersect");
+
+var _shapeData = require("./shapeData");
+
+function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it["return"] != null) it["return"](); } finally { if (didErr) throw err; } } }; }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+var applyShapeTransformations = function applyShapeTransformations(ctx, marker, canvasOffset) {
+  ctx.save();
+  ctx.translate(marker.translation[0] + canvasOffset[0], marker.translation[1] + canvasOffset[1]);
+
+  if (marker.rotation !== 0) {
+    var _getShapeInfos = (0, _shapeData.getShapeInfos)(marker),
+        center = _getShapeInfos.center;
+
+    ctx.translate(center[0], center[1]);
+    ctx.rotate(marker.rotation);
+    ctx.translate(-center[0], -center[1]);
+  }
+};
+
+var restoreShapeTransformations = function restoreShapeTransformations(ctx) {
+  ctx.restore();
+};
+
+var updateDrawStyle = function updateDrawStyle(ctx) {
+  var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {
+    fillColor: 'transparent',
+    strokeColor: 'blue',
+    globalAlpha: 100,
+    lineWidth: 1,
+    lineDash: 0
+  },
+      fillColor = _ref.fillColor,
+      globalAlpha = _ref.globalAlpha,
+      strokeColor = _ref.strokeColor,
+      lineWidth = _ref.lineWidth,
+      lineDash = _ref.lineDash;
+
+  ctx.lineCap = 'round';
+  ctx.lineJoin = 'round';
+  globalAlpha !== undefined && (ctx.globalAlpha = globalAlpha / 100);
+  fillColor && (ctx.fillStyle = fillColor);
+  strokeColor && (ctx.strokeStyle = strokeColor);
+  lineWidth && (ctx.lineWidth = lineWidth);
+  lineDash !== undefined && lineWidth && ctx.setLineDash([_style.LINE_DASH_DATA[lineDash][0] * lineWidth, _style.LINE_DASH_DATA[lineDash][1] * lineWidth]);
+};
+
+var drawBrush = function drawBrush(ctx, brush) {
+  var _brush$style;
+
+  if (brush.points.length < 1) return;
+  updateDrawStyle(ctx, brush.style);
+  ctx.beginPath();
+  if (((_brush$style = brush.style) === null || _brush$style === void 0 ? void 0 : _brush$style.strokeColor) === 'transparent' || ctx.globalAlpha === 0) return;
+  brush.points.forEach(function (points) {
+    if (points.length === 1) {
+      ctx.rect(points[0][0], points[0][1], 1, 1);
+    } else {
+      ctx.moveTo.apply(ctx, (0, _toConsumableArray2["default"])(points[0]));
+      points.slice(1).forEach(function (point) {
+        ctx.lineTo.apply(ctx, (0, _toConsumableArray2["default"])(point));
+      });
+    }
+  });
+  ctx.stroke();
+};
+
+exports.drawBrush = drawBrush;
+
+var drawTriangle = function drawTriangle(ctx, triangle) {
+  var _triangle$style, _triangle$style2;
+
+  updateDrawStyle(ctx, triangle.style);
+  if (ctx.globalAlpha === 0) return;
+  ctx.beginPath();
+  ctx.moveTo.apply(ctx, (0, _toConsumableArray2["default"])(triangle.points[0]));
+  ctx.lineTo.apply(ctx, (0, _toConsumableArray2["default"])(triangle.points[1]));
+  ctx.lineTo.apply(ctx, (0, _toConsumableArray2["default"])(triangle.points[2]));
+  ctx.lineTo.apply(ctx, (0, _toConsumableArray2["default"])(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;
+
+var buildTriangleOnLine = function buildTriangleOnLine(center, angle, 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;
+
+  var trianglePoints = [(0, _intersect.applyRotationToVector)([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)], angle), (0, _intersect.applyRotationToVector)([-(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], angle), (0, _intersect.applyRotationToVector)([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], angle)];
+  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: _objectSpread(_objectSpread({}, lineStyle.style), {}, {
+      fillColor: (_lineStyle$style6 = lineStyle.style) === null || _lineStyle$style6 === void 0 ? void 0 : _lineStyle$style6.strokeColor,
+      strokeColor: 'transparent'
+    })
+  };
+};
+
+var drawLine = function drawLine(ctx, line) {
+  var _line$style, _line$style2, _line$style3, _line$style4, _line$style5, _line$style6;
+
+  updateDrawStyle(ctx, line.style);
+  if (ctx.globalAlpha === 0) return;
+  ctx.beginPath();
+  ctx.moveTo.apply(ctx, (0, _toConsumableArray2["default"])(line.points[0]));
+  ctx.lineTo.apply(ctx, (0, _toConsumableArray2["default"])(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) {
+    var rotation = Math.PI / 2 - Math.atan2(line.points[1][1] - line.points[0][1], line.points[1][0] - line.points[0][0]);
+    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) {
+    var _rotation = Math.PI / 2 - Math.atan2(line.points[0][1] - line.points[1][1], line.points[0][0] - line.points[1][0]);
+
+    drawTriangle(ctx, buildTriangleOnLine(line.points[1], _rotation, {
+      style: line.style
+    }));
+  }
+};
+
+exports.drawLine = drawLine;
+
+var drawPolygon = function drawPolygon(ctx, polygon) {
+  var _polygon$style, _polygon$style2;
+
+  if (polygon.points.length < 1) return;
+  updateDrawStyle(ctx, polygon.style);
+  if (ctx.globalAlpha === 0) return;
+  ctx.beginPath();
+  ctx.moveTo.apply(ctx, (0, _toConsumableArray2["default"])(polygon.points[0]));
+  polygon.points.slice(1).forEach(function (point) {
+    ctx.lineTo.apply(ctx, (0, _toConsumableArray2["default"])(point));
+  });
+  ctx.lineTo.apply(ctx, (0, _toConsumableArray2["default"])(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;
+
+var drawCurve = function drawCurve(ctx, curve) {
+  var _curve$style, _curve$style2;
+
+  if (curve.points.length < 3) return;
+  updateDrawStyle(ctx, curve.style);
+  if (ctx.globalAlpha === 0) return;
+  ctx.beginPath();
+  ctx.moveTo.apply(ctx, (0, _toConsumableArray2["default"])(curve.points[0]));
+
+  for (var i = 1; i < curve.points.length - 1; i++) {
+    ctx.quadraticCurveTo.apply(ctx, (0, _toConsumableArray2["default"])(curve.points[i]).concat([curve.points.length - 2 === i ? curve.points[i + 1][0] : (curve.points[i + 1][0] - curve.points[i][0]) / 2 + curve.points[i][0], curve.points.length - 2 === i ? curve.points[i + 1][1] : (curve.points[i + 1][1] - curve.points[i][1]) / 2 + curve.points[i][1]]));
+  }
+
+  ((_curve$style = curve.style) === null || _curve$style === void 0 ? void 0 : _curve$style.fillColor) !== 'transparent' && ctx.fill();
+  ((_curve$style2 = curve.style) === null || _curve$style2 === void 0 ? void 0 : _curve$style2.strokeColor) !== 'transparent' && ctx.stroke();
+};
+
+exports.drawCurve = drawCurve;
+
+var drawCircle = function drawCircle(ctx, circle) {
+  var _circle$style, _circle$style2;
+
+  updateDrawStyle(ctx, circle.style);
+  ctx.beginPath();
+  ctx.arc(circle.x, circle.y, circle.radius, 0, 2 * Math.PI);
+  ((_circle$style = circle.style) === null || _circle$style === void 0 ? void 0 : _circle$style.fillColor) !== 'transparent' && ctx.fill();
+  ((_circle$style2 = circle.style) === null || _circle$style2 === void 0 ? void 0 : _circle$style2.strokeColor) !== 'transparent' && ctx.stroke();
+};
+
+exports.drawCircle = drawCircle;
+
+var drawEllipse = function drawEllipse(ctx, ellipse) {
+  var _ellipse$style, _ellipse$style2;
+
+  updateDrawStyle(ctx, ellipse.style);
+  if (ctx.globalAlpha === 0) return;
+  ctx.beginPath();
+  ctx.ellipse(ellipse.x, ellipse.y, ellipse.radiusX, ellipse.radiusY, 0, 0, 2 * Math.PI);
+  ((_ellipse$style = ellipse.style) === null || _ellipse$style === void 0 ? void 0 : _ellipse$style.fillColor) !== 'transparent' && ctx.fill();
+  ((_ellipse$style2 = ellipse.style) === null || _ellipse$style2 === void 0 ? void 0 : _ellipse$style2.strokeColor) !== 'transparent' && ctx.stroke();
+};
+
+exports.drawEllipse = drawEllipse;
+
+var drawRect = function drawRect(ctx, rect) {
+  var _rect$style, _rect$style2;
+
+  updateDrawStyle(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;
+
+var drawText = function drawText(ctx, text) {
+  var _text$style, _text$style$fontFamil, _text$style2;
+
+  updateDrawStyle(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.fontSize, "px ").concat((_text$style$fontFamil = (_text$style2 = text.style) === null || _text$style2 === void 0 ? void 0 : _text$style2.fontFamily) !== null && _text$style$fontFamil !== void 0 ? _text$style$fontFamil : _style.STYLE_FONT_DEFAULT);
+  ctx.textBaseline = 'hanging';
+  ctx.fillStyle = text.style.strokeColor;
+
+  for (var i = 0; i < text.value.length; i++) {
+    ctx.fillText(text.value[i], text.x, text.y + i * text.fontSize, text.width);
+  }
+};
+
+exports.drawText = drawText;
+
+var drawPicture = function drawPicture(ctx, picture) {
+  updateDrawStyle(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;
+
+var drawShape = function drawShape(ctx, shape, canvasOffset) {
+  if (shape.visible === false) return;
+  applyShapeTransformations(ctx, shape, canvasOffset);
+
+  switch (shape.type) {
+    case 'brush':
+      drawBrush(ctx, shape);
+      break;
+
+    case 'text':
+      drawText(ctx, shape);
+      break;
+
+    case 'line':
+      drawLine(ctx, shape);
+      break;
+
+    case 'polygon':
+      drawPolygon(ctx, shape);
+      break;
+
+    case 'curve':
+      drawCurve(ctx, shape);
+      break;
+
+    case 'circle':
+      drawCircle(ctx, shape);
+      break;
+
+    case 'ellipse':
+      drawEllipse(ctx, shape);
+      break;
+
+    case 'rect':
+    case 'square':
+      drawRect(ctx, shape);
+      break;
+
+    case 'picture':
+      drawPicture(ctx, shape);
+      break;
+  }
+
+  restoreShapeTransformations(ctx);
+};
+
+exports.drawShape = drawShape;
+
+var drawSelectionDefault = function drawSelectionDefault(_ref2) {
+  var ctx = _ref2.ctx,
+      shape = _ref2.shape,
+      withAnchors = _ref2.withAnchors;
+
+  var _getShapeInfos2 = (0, _shapeData.getShapeInfos)(shape),
+      borders = _getShapeInfos2.borders;
+
+  drawRect(ctx, borders);
+  if (!withAnchors || shape.locked) return;
+  drawLine(ctx, {
+    points: [[borders.x + borders.width / 2, borders.y], [borders.x + borders.width / 2, borders.y - _shapes.SELECTION_ANCHOR_SIZE / 2 - _shapes.SELECTION_ROTATED_ANCHOR_POSITION]]
+  });
+
+  var _iterator = _createForOfIteratorHelper(_shapes.SELECTION_RESIZE_ANCHOR_POSITIONS),
+      _step;
+
+  try {
+    for (_iterator.s(); !(_step = _iterator.n()).done;) {
+      var anchorPosition = _step.value;
+      drawCircle(ctx, {
+        x: borders.x + borders.width * anchorPosition[0],
+        y: borders.y + borders.height * anchorPosition[1],
+        radius: _shapes.SELECTION_ANCHOR_SIZE / 2,
+        style: {
+          fillColor: 'rgb(255,255,255)',
+          strokeColor: 'rgb(150,150,150)',
+          lineWidth: 2
+        }
+      });
+    }
+  } catch (err) {
+    _iterator.e(err);
+  } finally {
+    _iterator.f();
+  }
+
+  drawCircle(ctx, {
+    x: borders.x + borders.width / 2,
+    y: borders.y - _shapes.SELECTION_ANCHOR_SIZE / 2 - _shapes.SELECTION_ROTATED_ANCHOR_POSITION,
+    radius: _shapes.SELECTION_ANCHOR_SIZE / 2,
+    style: {
+      fillColor: 'rgb(255,255,255)',
+      strokeColor: 'rgb(150,150,150)',
+      lineWidth: 2
+    }
+  });
+};
+
+var drawLineSelection = function drawLineSelection(_ref3) {
+  var ctx = _ref3.ctx,
+      shape = _ref3.shape,
+      withAnchors = _ref3.withAnchors;
+
+  var _getShapeInfos3 = (0, _shapeData.getShapeInfos)(shape),
+      borders = _getShapeInfos3.borders;
+
+  drawRect(ctx, borders);
+  if (!withAnchors || shape.locked) return;
+
+  for (var i = 0; i < shape.points.length; i++) {
+    var coordinate = shape.points[i];
+
+    if (shape.type === 'curve' && i > 0 && i < shape.points.length - 1) {
+      drawRect(ctx, {
+        x: coordinate[0] - _shapes.SELECTION_ANCHOR_SIZE / 2,
+        y: coordinate[1] - _shapes.SELECTION_ANCHOR_SIZE / 2,
+        width: _shapes.SELECTION_ANCHOR_SIZE,
+        height: _shapes.SELECTION_ANCHOR_SIZE,
+        style: {
+          fillColor: 'rgb(255,255,255)',
+          strokeColor: 'rgb(150,150,150)',
+          lineWidth: 2
+        }
+      });
+    } else {
+      drawCircle(ctx, {
+        x: coordinate[0],
+        y: coordinate[1],
+        radius: _shapes.SELECTION_ANCHOR_SIZE / 2,
+        style: {
+          fillColor: 'rgb(255,255,255)',
+          strokeColor: 'rgb(150,150,150)',
+          lineWidth: 2
+        }
+      });
+    }
+  }
+};
+
+var drawSelection = function drawSelection(_ref4) {
+  var ctx = _ref4.ctx,
+      shape = _ref4.shape,
+      canvasOffset = _ref4.canvasOffset,
+      _ref4$withAnchors = _ref4.withAnchors,
+      withAnchors = _ref4$withAnchors === void 0 ? true : _ref4$withAnchors;
+  applyShapeTransformations(ctx, shape, canvasOffset);
+
+  switch (shape.type) {
+    case 'polygon':
+    case 'line':
+    case 'curve':
+      drawLineSelection({
+        ctx: ctx,
+        shape: shape,
+        withAnchors: withAnchors
+      });
+      break;
+
+    default:
+      drawSelectionDefault({
+        ctx: ctx,
+        shape: shape,
+        withAnchors: withAnchors
+      });
+      break;
+  }
+
+  restoreShapeTransformations(ctx);
+};
+
+exports.drawSelection = drawSelection;

package/dist/utils/file.d.ts

@@ -0,0 +1,33 @@
+/// <reference types="lodash" />
+import { DrawableShape, DrawableShapeJson, ShapeEnum } from 'types/Shapes';
+export declare const fetchAndStringify: (url: string) => Promise<string>;
+export declare const downloadFile: (content: string, fileName: string) => void;
+export declare const getCanvasImage: (canvas: HTMLCanvasElement) => string;
+export declare const encodePicturesInShapes: (shapes: DrawableShape[]) => (import("types/Shapes").DrawableRect | import("types/Shapes").DrawableSquare | import("types/Shapes").DrawableText | import("types/Shapes").DrawableLine | import("types/Shapes").DrawablePolygon | import("types/Shapes").DrawableCurve | import("types/Shapes").DrawableBrush | import("types/Shapes").DrawableCircle | import("types/Shapes").DrawableEllipse | import("lodash").Omit<import("types/Shapes").DrawablePicture, "img"> | {
+    src: string;
+    img: undefined;
+    visible?: boolean | undefined;
+    locked?: boolean | undefined;
+    style?: {
+        fillColor?: string | undefined;
+        globalAlpha?: number | undefined;
+        strokeColor?: string | undefined;
+        lineWidth?: number | undefined;
+        lineDash?: number | undefined;
+        lineArrow?: number | undefined;
+        pointsCount?: number | undefined;
+        fontFamily?: string | undefined;
+    } | undefined;
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    id: string;
+    translation: import("types/Shapes").Point;
+    rotation: number;
+    type: ShapeEnum.picture;
+})[];
+export declare const encodeShapesInString: (shapes: DrawableShape[]) => string;
+export declare const decodeJson: (file: File) => Promise<unknown>;
+export declare const decodePicturesInShapes: (shapesForJson: DrawableShapeJson[]) => Promise<DrawableShape[]>;
+export declare const validateJson: (json: unknown) => boolean;

package/dist/utils/file.js

@@ -0,0 +1,220 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.validateJson = exports.getCanvasImage = exports.fetchAndStringify = exports.encodeShapesInString = exports.encodePicturesInShapes = exports.downloadFile = exports.decodePicturesInShapes = exports.decodeJson = void 0;
+
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _ajv = _interopRequireDefault(require("ajv"));
+
+var _fp = _interopRequireDefault(require("lodash/fp"));
+
+var _drawableShape = _interopRequireDefault(require("../schemas/drawableShape.json"));
+
+var _Shapes = require("../types/Shapes");
+
+function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it["return"] != null) it["return"](); } finally { if (didErr) throw err; } } }; }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+var fetchAndStringify = function fetchAndStringify(url) {
+  return fetch(url).then(function (response) {
+    return response.blob();
+  }).then(function (myBlob) {
+    return URL.createObjectURL(myBlob);
+  });
+};
+
+exports.fetchAndStringify = fetchAndStringify;
+
+var downloadFile = function downloadFile(content, fileName) {
+  var a = document.createElement('a');
+  a.href = content;
+  a.download = fileName;
+  document.body.appendChild(a);
+  a.click();
+  document.body.removeChild(a);
+};
+
+exports.downloadFile = downloadFile;
+
+var getBase64Image = function getBase64Image(img) {
+  var canvas = document.createElement('canvas');
+  canvas.width = img.width;
+  canvas.height = img.height;
+  var ctx = canvas.getContext('2d');
+  if (!ctx) return '';
+  ctx.drawImage(img, 0, 0);
+  var dataURL = canvas.toDataURL('image/png');
+  return dataURL;
+};
+
+var encodeObjectToString = function encodeObjectToString(objectToEncode) {
+  return 'data:text/plain;charset=utf-8,' + encodeURIComponent(JSON.stringify(objectToEncode));
+};
+
+var getCanvasImage = function getCanvasImage(canvas) {
+  return canvas.toDataURL('image/png');
+};
+
+exports.getCanvasImage = getCanvasImage;
+
+var encodePicturesInShapes = function encodePicturesInShapes(shapes) {
+  return shapes.map(function (shape) {
+    if (shape.type === _Shapes.ShapeEnum.picture) {
+      if (shape.src.startsWith('http')) {
+        return _fp["default"].omit('img', shape);
+      } else {
+        return _objectSpread(_objectSpread({}, shape), {}, {
+          src: getBase64Image(shape.img),
+          img: undefined
+        });
+      }
+    }
+
+    return shape;
+  });
+};
+
+exports.encodePicturesInShapes = encodePicturesInShapes;
+
+var encodeShapesInString = function encodeShapesInString(shapes) {
+  var shapesWithStringifyPictures = encodePicturesInShapes(shapes);
+  return encodeObjectToString(shapesWithStringifyPictures);
+};
+
+exports.encodeShapesInString = encodeShapesInString;
+
+var decodeJson = /*#__PURE__*/function () {
+  var _ref = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee(file) {
+    return _regenerator["default"].wrap(function _callee$(_context) {
+      while (1) {
+        switch (_context.prev = _context.next) {
+          case 0:
+            return _context.abrupt("return", new Promise(function (resolve, reject) {
+              var reader = new FileReader();
+
+              reader.onload = function (event) {
+                var _event$target;
+
+                var result = (_event$target = event.target) === null || _event$target === void 0 ? void 0 : _event$target.result;
+                if (!result) return reject('Impossible de récupérer les données du fichier');
+                var json = JSON.parse(result);
+                resolve(json);
+              };
+
+              reader.readAsText(file);
+            }));
+
+          case 1:
+          case "end":
+            return _context.stop();
+        }
+      }
+    }, _callee);
+  }));
+
+  return function decodeJson(_x) {
+    return _ref.apply(this, arguments);
+  };
+}();
+
+exports.decodeJson = decodeJson;
+
+var decodePicturesInShapes = /*#__PURE__*/function () {
+  var _ref2 = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee2(shapesForJson) {
+    var promisesArray, shapes;
+    return _regenerator["default"].wrap(function _callee2$(_context2) {
+      while (1) {
+        switch (_context2.prev = _context2.next) {
+          case 0:
+            promisesArray = [];
+            shapes = shapesForJson.map(function (shape) {
+              if (shape.type === _Shapes.ShapeEnum.picture) {
+                var img = new Image();
+                var newPromise = new Promise(function (resolve, reject) {
+                  img.onload = function () {
+                    resolve();
+                  };
+
+                  img.onerror = function () {
+                    reject(new Error('Some images could not be loaded'));
+                  };
+                });
+                promisesArray.push(newPromise);
+
+                if (shape.src.startsWith('http')) {
+                  fetchAndStringify(shape.src).then(function (picData) {
+                    img.src = picData;
+                  })["catch"](function () {
+                    img.src = ''; // to trigger onerror
+                  });
+                } else {
+                  img.src = shape.src;
+                }
+
+                return _objectSpread(_objectSpread({}, shape), {}, {
+                  img: img
+                });
+              }
+
+              return shape;
+            });
+            _context2.next = 4;
+            return Promise.all(promisesArray);
+
+          case 4:
+            return _context2.abrupt("return", shapes);
+
+          case 5:
+          case "end":
+            return _context2.stop();
+        }
+      }
+    }, _callee2);
+  }));
+
+  return function decodePicturesInShapes(_x2) {
+    return _ref2.apply(this, arguments);
+  };
+}();
+
+exports.decodePicturesInShapes = decodePicturesInShapes;
+
+var validateJson = function validateJson(json) {
+  var ajv = new _ajv["default"]();
+  var validate = ajv.compile(_drawableShape["default"]);
+  if (!_fp["default"].isArray(json)) return false;
+
+  var _iterator = _createForOfIteratorHelper(json),
+      _step;
+
+  try {
+    for (_iterator.s(); !(_step = _iterator.n()).done;) {
+      var shape = _step.value;
+      if (!validate(shape)) return false;
+    }
+  } catch (err) {
+    _iterator.e(err);
+  } finally {
+    _iterator.f();
+  }
+
+  return true;
+};
+
+exports.validateJson = validateJson;

package/dist/utils/intersect.d.ts

@@ -0,0 +1,8 @@
+import { HoverModeData } from 'types/Mode';
+import { Point, DrawableShape } from 'types/Shapes';
+export declare const getCursorPosition: (e: MouseEvent | TouchEvent, canvas: HTMLCanvasElement | null, givenWidth: number, givenHeight: number) => Point;
+export declare const getSettingsPosition: (shape: DrawableShape, canvas: HTMLCanvasElement | null, givenWidth: number, givenHeight: number) => number[];
+export declare const getPointPositionAfterCanvasTransformation: ([positionX, positionY]: Point, [canvasOffsetX, canvasOffsetY]: Point, [translationX, translationY]: Point, shapeRotation: number, [centerX, centerY]: Point) => Point;
+export declare const getPointPositionBeforeCanvasTransformation: ([positionX, positionY]: Point, [translationX, translationY]: Point, shapeRotation: number, [centerX, centerY]: Point) => Point;
+export declare const applyRotationToVector: (vector: Point, shapeRotation: number) => Point;
+export declare const checkPositionIntersection: (shape: DrawableShape, position: Point, canvasOffset: Point, checkAnchors?: boolean) => false | HoverModeData;