@yorab/react-paint 0.2.2

package/dist/utils/intersect.js

@@ -0,0 +1,194 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getSettingsPosition = exports.getPointPositionBeforeCanvasTransformation = exports.getPointPositionAfterCanvasTransformation = exports.getCursorPosition = exports.checkPositionIntersection = exports.applyRotationToVector = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _shapes = require("../constants/shapes");
+
+var _fp = _interopRequireDefault(require("lodash/fp"));
+
+var _Mode = require("../types/Mode");
+
+var _Shapes = require("../types/Shapes");
+
+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; }
+
+var getCursorPosition = function getCursorPosition(e, canvas, givenWidth, givenHeight) {
+  var _canvas$getBoundingCl;
+
+  var _$getOr = _fp["default"].getOr(_fp["default"].getOr(e, 'changedTouches[0]', e), 'touches[0]', e),
+      clientX = _$getOr.clientX,
+      clientY = _$getOr.clientY;
+
+  var canvasBoundingRect = (_canvas$getBoundingCl = canvas === null || canvas === void 0 ? void 0 : canvas.getBoundingClientRect()) !== null && _canvas$getBoundingCl !== void 0 ? _canvas$getBoundingCl : {
+    left: 0,
+    top: 0,
+    width: givenWidth,
+    height: givenHeight
+  };
+  return [(clientX - canvasBoundingRect.left) * (givenWidth / canvasBoundingRect.width), (clientY - canvasBoundingRect.top) * (givenHeight / canvasBoundingRect.height)];
+};
+
+exports.getCursorPosition = getCursorPosition;
+
+var getSettingsPosition = function getSettingsPosition(shape, canvas, givenWidth, givenHeight) {
+  var _canvas$getBoundingCl2;
+
+  var shapeInfos = (0, _shapeData.getShapeInfos)(shape);
+  var positionInCanvas = getPointPositionBeforeCanvasTransformation(shapeInfos.center, [-shape.translation[0], -shape.translation[1]], shape.rotation, shapeInfos.center);
+  var canvasBoundingRect = (_canvas$getBoundingCl2 = canvas === null || canvas === void 0 ? void 0 : canvas.getBoundingClientRect()) !== null && _canvas$getBoundingCl2 !== void 0 ? _canvas$getBoundingCl2 : {
+    left: 0,
+    top: 0,
+    width: givenWidth,
+    height: givenHeight
+  };
+  return [canvasBoundingRect.left + positionInCanvas[0] * (canvasBoundingRect.width / givenWidth), canvasBoundingRect.top + positionInCanvas[1] * (canvasBoundingRect.height / givenHeight)];
+};
+
+exports.getSettingsPosition = getSettingsPosition;
+
+var isPointInsideRect = function isPointInsideRect(rect, point) {
+  return point[0] >= rect.x && point[0] <= rect.x + rect.width && point[1] >= rect.y && point[1] <= rect.y + rect.height;
+};
+
+var getPointPositionAfterCanvasTransformation = function getPointPositionAfterCanvasTransformation(_ref, _ref2, _ref3, shapeRotation, _ref4) {
+  var _ref5 = (0, _slicedToArray2["default"])(_ref, 2),
+      positionX = _ref5[0],
+      positionY = _ref5[1];
+
+  var _ref6 = (0, _slicedToArray2["default"])(_ref2, 2),
+      canvasOffsetX = _ref6[0],
+      canvasOffsetY = _ref6[1];
+
+  var _ref7 = (0, _slicedToArray2["default"])(_ref3, 2),
+      translationX = _ref7[0],
+      translationY = _ref7[1];
+
+  var _ref8 = (0, _slicedToArray2["default"])(_ref4, 2),
+      centerX = _ref8[0],
+      centerY = _ref8[1];
+
+  var newX = positionX + canvasOffsetX - centerX - translationX;
+  var newY = positionY + canvasOffsetY - centerY - translationY;
+  var rotatedY = newY * Math.cos(shapeRotation) - newX * Math.sin(shapeRotation);
+  var rotatedX = newY * Math.sin(shapeRotation) + newX * Math.cos(shapeRotation);
+  var translatedX = rotatedX + centerX;
+  var translatedY = rotatedY + centerY;
+  return [translatedX, translatedY];
+};
+
+exports.getPointPositionAfterCanvasTransformation = getPointPositionAfterCanvasTransformation;
+
+var getPointPositionBeforeCanvasTransformation = function getPointPositionBeforeCanvasTransformation(_ref9, _ref10, shapeRotation, _ref11) {
+  var _ref12 = (0, _slicedToArray2["default"])(_ref9, 2),
+      positionX = _ref12[0],
+      positionY = _ref12[1];
+
+  var _ref13 = (0, _slicedToArray2["default"])(_ref10, 2),
+      translationX = _ref13[0],
+      translationY = _ref13[1];
+
+  var _ref14 = (0, _slicedToArray2["default"])(_ref11, 2),
+      centerX = _ref14[0],
+      centerY = _ref14[1];
+
+  var newX = positionX - centerX;
+  var newY = positionY - centerY;
+  var rotatedY = newY * Math.cos(-shapeRotation) - newX * Math.sin(-shapeRotation);
+  var rotatedX = newY * Math.sin(-shapeRotation) + newX * Math.cos(-shapeRotation);
+  var translatedX = rotatedX + centerX;
+  var translatedY = rotatedY + centerY;
+  return [translatedX - translationX, translatedY - translationY];
+};
+
+exports.getPointPositionBeforeCanvasTransformation = getPointPositionBeforeCanvasTransformation;
+
+var applyRotationToVector = function applyRotationToVector(vector, shapeRotation) {
+  var rotatedY = vector[1] * Math.cos(shapeRotation) - vector[0] * Math.sin(shapeRotation);
+  var rotatedX = vector[1] * Math.sin(shapeRotation) + vector[0] * Math.cos(shapeRotation);
+  return [rotatedX, rotatedY];
+};
+
+exports.applyRotationToVector = applyRotationToVector;
+
+var checkPositionIntersection = function checkPositionIntersection(shape, position, canvasOffset) {
+  var checkAnchors = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
+
+  var _getShapeInfos = (0, _shapeData.getShapeInfos)(shape),
+      borders = _getShapeInfos.borders,
+      center = _getShapeInfos.center;
+
+  var newPosition = getPointPositionAfterCanvasTransformation(position, canvasOffset, shape.translation, shape.rotation, center);
+
+  if (checkAnchors) {
+    if (shape.type === _Shapes.ShapeEnum.line || shape.type === _Shapes.ShapeEnum.polygon || shape.type === _Shapes.ShapeEnum.curve) {
+      for (var i = 0; i < shape.points.length; i++) {
+        if (isPointInsideRect({
+          x: shape.points[i][0] - _shapes.SELECTION_ANCHOR_SIZE / 2,
+          y: shape.points[i][1] - _shapes.SELECTION_ANCHOR_SIZE / 2,
+          width: _shapes.SELECTION_ANCHOR_SIZE,
+          height: _shapes.SELECTION_ANCHOR_SIZE
+        }, newPosition)) {
+          return {
+            mode: _Mode.SelectionModeLib.resize,
+            anchor: i
+          };
+        }
+      }
+    } else {
+      if (isPointInsideRect({
+        x: borders.x + borders.width / 2 - _shapes.SELECTION_ANCHOR_SIZE / 2,
+        y: borders.y - _shapes.SELECTION_ANCHOR_SIZE - _shapes.SELECTION_ROTATED_ANCHOR_POSITION,
+        width: _shapes.SELECTION_ANCHOR_SIZE,
+        height: _shapes.SELECTION_ANCHOR_SIZE
+      }, newPosition)) {
+        return {
+          mode: _Mode.SelectionModeLib.rotate
+        };
+      }
+
+      var _iterator = _createForOfIteratorHelper(_shapes.SELECTION_RESIZE_ANCHOR_POSITIONS),
+          _step;
+
+      try {
+        for (_iterator.s(); !(_step = _iterator.n()).done;) {
+          var anchorPosition = _step.value;
+
+          if (isPointInsideRect({
+            x: borders.x + borders.width * anchorPosition[0] - _shapes.SELECTION_ANCHOR_SIZE / 2,
+            y: borders.y + borders.height * anchorPosition[1] - _shapes.SELECTION_ANCHOR_SIZE / 2,
+            width: _shapes.SELECTION_ANCHOR_SIZE,
+            height: _shapes.SELECTION_ANCHOR_SIZE
+          }, newPosition)) {
+            return {
+              mode: _Mode.SelectionModeLib.resize,
+              anchor: anchorPosition
+            };
+          }
+        }
+      } catch (err) {
+        _iterator.e(err);
+      } finally {
+        _iterator.f();
+      }
+    }
+  }
+
+  return isPointInsideRect(borders, newPosition) ? {
+    mode: _Mode.SelectionModeLib.translate
+  } : false;
+};
+
+exports.checkPositionIntersection = checkPositionIntersection;

package/dist/utils/selection.d.ts

@@ -0,0 +1,7 @@
+import { HoverModeData, SelectionModeData } from 'types/Mode';
+import { Point, DrawableShape } from 'types/Shapes';
+export declare const getNewSelectionData: (hoverMode: HoverModeData, selectedShape: DrawableShape, cursorPosition: Point) => SelectionModeData<Point | number> | undefined;
+export declare const selectShape: (shapes: DrawableShape[], cursorPosition: Point, canvasOffset: Point, selectedShape: DrawableShape | undefined) => {
+    mode: SelectionModeData<Point | number>;
+    shape: DrawableShape | undefined;
+};

package/dist/utils/selection.js

@@ -0,0 +1,88 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.selectShape = exports.getNewSelectionData = void 0;
+
+var _fp = _interopRequireDefault(require("lodash/fp"));
+
+var _Mode = require("../types/Mode");
+
+var _intersect = require("./intersect");
+
+var _shapeData = require("./shapeData");
+
+var getNewSelectionData = function getNewSelectionData(hoverMode, selectedShape, cursorPosition) {
+  if (hoverMode.mode === 'translate') {
+    return {
+      mode: _Mode.SelectionModeLib.translate,
+      cursorStartPosition: cursorPosition,
+      originalShape: selectedShape
+    };
+  } else if (hoverMode.mode === 'rotate') {
+    var _getShapeInfos = (0, _shapeData.getShapeInfos)(selectedShape),
+        centerBeforeResize = _getShapeInfos.center;
+
+    var center = [centerBeforeResize[0], centerBeforeResize[1]];
+    return {
+      mode: _Mode.SelectionModeLib.rotate,
+      cursorStartPosition: cursorPosition,
+      originalShape: selectedShape,
+      center: center
+    };
+  } else if (hoverMode.mode === 'resize') {
+    return {
+      mode: _Mode.SelectionModeLib.resize,
+      cursorStartPosition: cursorPosition,
+      originalShape: selectedShape,
+      anchor: hoverMode.anchor
+    };
+  }
+
+  return undefined;
+};
+
+exports.getNewSelectionData = getNewSelectionData;
+
+var selectShape = function selectShape(shapes, cursorPosition, canvasOffset, selectedShape) {
+  if (selectedShape) {
+    var positionIntersection = (0, _intersect.checkPositionIntersection)(selectedShape, cursorPosition, canvasOffset, true) || {
+      mode: _Mode.SelectionModeLib["default"]
+    };
+    var newSelectionMode = getNewSelectionData(positionIntersection, selectedShape, cursorPosition);
+
+    if (newSelectionMode) {
+      return {
+        shape: selectedShape,
+        mode: newSelectionMode
+      };
+    }
+  }
+
+  var foundShape = _fp["default"].find(function (shape) {
+    return !!(0, _intersect.checkPositionIntersection)(shape, cursorPosition, canvasOffset, false);
+  }, shapes);
+
+  if (!!foundShape) {
+    return {
+      shape: foundShape,
+      mode: {
+        mode: _Mode.SelectionModeLib.translate,
+        cursorStartPosition: cursorPosition,
+        originalShape: foundShape
+      }
+    };
+  } else {
+    return {
+      shape: undefined,
+      mode: {
+        mode: _Mode.SelectionModeLib["default"]
+      }
+    };
+  }
+};
+
+exports.selectShape = selectShape;

package/dist/utils/shapeData.d.ts

@@ -0,0 +1,5 @@
+import { Point, Rect, DrawableShape } from 'types/Shapes';
+export declare const getShapeInfos: (shape: DrawableShape) => {
+    borders: Rect;
+    center: Point;
+};

package/dist/utils/shapeData.js

@@ -0,0 +1,178 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+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;
+  return {
+    x: x,
+    width: width,
+    y: y,
+    height: height
+  };
+};
+
+var getBrushBorder = function getBrushBorder(brush) {
+  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);
+
+  var maxX = _fp["default"].flow(_fp["default"].map(function (point) {
+    return point[0];
+  }), _fp["default"].max, _fp["default"].add(_shapes.SELECTION_PADDING))(brushPoints);
+
+  var minY = _fp["default"].flow(_fp["default"].map(function (point) {
+    return point[1];
+  }), _fp["default"].min, _fp["default"].add(-_shapes.SELECTION_PADDING))(brushPoints);
+
+  var maxY = _fp["default"].flow(_fp["default"].map(function (point) {
+    return point[1];
+  }), _fp["default"].max, _fp["default"].add(_shapes.SELECTION_PADDING))(brushPoints);
+
+  return {
+    x: minX,
+    width: maxX - minX,
+    y: minY,
+    height: maxY - minY
+  };
+};
+
+var getPolygonBorder = function getPolygonBorder(polygon) {
+  var minX = _fp["default"].flow(_fp["default"].map(function (point) {
+    return point[0];
+  }), _fp["default"].min, _fp["default"].add(-_shapes.SELECTION_PADDING))(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);
+
+  var minY = _fp["default"].flow(_fp["default"].map(function (point) {
+    return point[1];
+  }), _fp["default"].min, _fp["default"].add(-_shapes.SELECTION_PADDING))(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);
+
+  return {
+    x: minX,
+    width: maxX - minX,
+    y: minY,
+    height: maxY - minY
+  };
+};
+
+var getCurveBorder = getPolygonBorder;
+
+var getRectBorder = function getRectBorder(rect) {
+  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
+  };
+};
+
+var getTextBorder = function getTextBorder(text) {
+  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
+  };
+};
+
+var getPictureBorder = function getPictureBorder(picture) {
+  return getRectBorder(picture);
+};
+
+var getCircleBorder = function getCircleBorder(circle) {
+  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
+  };
+};
+
+var getEllipseBorder = function getEllipseBorder(ellipse) {
+  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
+  };
+};
+
+var getShapeBorders = function getShapeBorders(marker) {
+  switch (marker.type) {
+    case 'brush':
+      return getBrushBorder(marker);
+
+    case 'line':
+      return getLineBorder(marker);
+
+    case 'polygon':
+      return getPolygonBorder(marker);
+
+    case 'curve':
+      return getCurveBorder(marker);
+
+    case 'circle':
+      return getCircleBorder(marker);
+
+    case 'ellipse':
+      return getEllipseBorder(marker);
+
+    case 'rect':
+    case 'square':
+      return getRectBorder(marker);
+
+    case 'text':
+      return getTextBorder(marker);
+
+    case 'picture':
+      return getPictureBorder(marker);
+  }
+
+  return {
+    x: 0,
+    y: 0,
+    width: 0,
+    height: 0
+  };
+};
+
+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 center = getShapeCenter(borders);
+  return {
+    borders: borders,
+    center: center
+  };
+};
+
+exports.getShapeInfos = getShapeInfos;

package/dist/utils/string.d.ts

@@ -0,0 +1,3 @@
+export declare const convertStringArrayToDivContent: (toConvert: string[]) => string;
+export declare const decodeHtmlEntities: (html: string) => string;
+export declare const convertDivContentToStringArray: (toConvert: string) => string[];

package/dist/utils/string.js

@@ -0,0 +1,42 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.decodeHtmlEntities = exports.convertStringArrayToDivContent = exports.convertDivContentToStringArray = void 0;
+
+var _fp = _interopRequireDefault(require("lodash/fp"));
+
+var stripBrRegexp = /<br(\/?\s?)>/g;
+var stripDivRegexp = /<(\/)?div(\/?\s?)>/g;
+
+var convertStringArrayToDivContent = function convertStringArrayToDivContent(toConvert) {
+  return toConvert.map(function (val) {
+    return "<div>".concat(val === '' ? '<br/>' : val, "</div>");
+  }).join('');
+};
+
+exports.convertStringArrayToDivContent = convertStringArrayToDivContent;
+
+var decodeHtmlEntities = function decodeHtmlEntities(html) {
+  var 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, '');
+    return newVal === '' ? undefined : newVal.replaceAll(stripBrRegexp, '');
+  }), _fp["default"].reject(_fp["default"].isUndefined))(toConvert);
+};
+
+exports.convertDivContentToStringArray = convertDivContentToStringArray;

package/dist/utils/style.d.ts

@@ -0,0 +1,2 @@
+import { ShapeEnum } from 'types/Shapes';
+export declare const getShapePicture: (shape: ShapeEnum) => "<svg><path d=\"M5.146 17.5Q4.146 17.5 3.208 17Q2.271 16.5 1.667 15.708Q2.208 15.75 2.802 15.344Q3.396 14.938 3.396 14.104Q3.396 13.042 4.135 12.292Q4.875 11.542 5.958 11.542Q7.021 11.542 7.76 12.292Q8.5 13.042 8.5 14.104Q8.5 15.5 7.51 16.5Q6.521 17.5 5.146 17.5ZM9.917 12.5 7.562 10.146 14.917 2.729Q15.146 2.5 15.469 2.5Q15.792 2.5 16.021 2.729L17.271 3.958Q17.5 4.188 17.5 4.531Q17.5 4.875 17.271 5.125Z\"/></svg>" | "<svg><path d=\"M2.5 17.5V2.5H17.5V17.5ZM4.25 15.75H15.75V4.25H4.25ZM4.25 15.75V4.25V15.75Z\"/></svg>" | "<svg><path d=\"M4.25 15.833Q3.521 15.833 3.01 15.323Q2.5 14.812 2.5 14.083V5.917Q2.5 5.188 3.01 4.677Q3.521 4.167 4.25 4.167H15.75Q16.479 4.167 16.99 4.677Q17.5 5.188 17.5 5.917V14.083Q17.5 14.812 16.99 15.323Q16.479 15.833 15.75 15.833ZM4.25 14.083H15.75Q15.75 14.083 15.75 14.083Q15.75 14.083 15.75 14.083V5.917Q15.75 5.917 15.75 5.917Q15.75 5.917 15.75 5.917H4.25Q4.25 5.917 4.25 5.917Q4.25 5.917 4.25 5.917V14.083Q4.25 14.083 4.25 14.083Q4.25 14.083 4.25 14.083ZM4.25 14.083Q4.25 14.083 4.25 14.083Q4.25 14.083 4.25 14.083V5.917Q4.25 5.917 4.25 5.917Q4.25 5.917 4.25 5.917Q4.25 5.917 4.25 5.917Q4.25 5.917 4.25 5.917V14.083Q4.25 14.083 4.25 14.083Q4.25 14.083 4.25 14.083Z\"/></svg>" | "<svg><path d=\"M10 18.333Q8.271 18.333 6.75 17.677Q5.229 17.021 4.104 15.896Q2.979 14.771 2.323 13.25Q1.667 11.729 1.667 10Q1.667 8.271 2.323 6.75Q2.979 5.229 4.104 4.104Q5.229 2.979 6.75 2.323Q8.271 1.667 10 1.667Q11.729 1.667 13.25 2.323Q14.771 2.979 15.896 4.104Q17.021 5.229 17.677 6.75Q18.333 8.271 18.333 10Q18.333 11.729 17.677 13.25Q17.021 14.771 15.896 15.896Q14.771 17.021 13.25 17.677Q11.729 18.333 10 18.333ZM10 16.583Q12.75 16.583 14.667 14.667Q16.583 12.75 16.583 10Q16.583 7.25 14.667 5.333Q12.75 3.417 10 3.417Q7.25 3.417 5.333 5.333Q3.417 7.25 3.417 10Q3.417 12.75 5.333 14.667Q7.25 16.583 10 16.583ZM10 10Q10 10 10 10Q10 10 10 10Q10 10 10 10Q10 10 10 10Q10 10 10 10Q10 10 10 10Q10 10 10 10Q10 10 10 10Z\"/></svg>" | "<svg><path d=\"M12.25 18.333V16.167L6.833 13.458H2.5V8.208H6.25L8.25 5.917V1.667H13.5V6.917H9.708L7.75 9.146V11.958L12.25 14.208V13.083H17.5V18.333Z\"/></svg>" | "<svg><path d=\"M4.792 15.083 8.333 11.542 9.833 13.021 11.667 10.708 15.167 15.083ZM6.667 8.417Q5.938 8.417 5.427 7.906Q4.917 7.396 4.917 6.667Q4.917 5.938 5.427 5.427Q5.938 4.917 6.667 4.917Q7.396 4.917 7.906 5.427Q8.417 5.938 8.417 6.667Q8.417 7.396 7.906 7.906Q7.396 8.417 6.667 8.417ZM4.167 18.333Q3.125 18.333 2.396 17.604Q1.667 16.875 1.667 15.833V4.167Q1.667 3.125 2.396 2.396Q3.125 1.667 4.167 1.667H15.833Q16.875 1.667 17.604 2.396Q18.333 3.125 18.333 4.167V15.833Q18.333 16.875 17.604 17.604Q16.875 18.333 15.833 18.333ZM4.167 16.583H15.833Q16.146 16.583 16.365 16.365Q16.583 16.146 16.583 15.833V4.167Q16.583 3.854 16.365 3.635Q16.146 3.417 15.833 3.417H4.167Q3.854 3.417 3.635 3.635Q3.417 3.854 3.417 4.167V15.833Q3.417 16.146 3.635 16.365Q3.854 16.583 4.167 16.583Z\"/></svg>" | "<svg><path d=\"M8.708 16.667V5.917H4.167V3.333H15.833V5.917H11.292V16.667Z\"/></svg>" | "<svg><path d=\"M7.5 15.833V14.083H12.833L3.333 4.583L4.583 3.333L14.083 12.833V7.5H15.833V15.833Z\"/></svg>" | "<svg><path d=\"M10 15.833Q7.917 15.833 6.667 14.177Q5.417 12.521 5.417 10Q5.417 7.479 6.667 5.823Q7.917 4.167 10 4.167Q12.083 4.167 13.333 5.823Q14.583 7.479 14.583 10Q14.583 12.521 13.333 14.177Q12.083 15.833 10 15.833ZM10 14.042Q11.375 14.042 12.021 12.833Q12.667 11.625 12.667 10Q12.667 8.375 12.021 7.167Q11.375 5.958 10 5.958Q8.625 5.958 7.979 7.167Q7.333 8.375 7.333 10Q7.333 11.625 7.979 12.833Q8.625 14.042 10 14.042Z\"/></svg>" | "<svg><path d=\"M7.521 17.5Q6.125 17.5 5.146 16.51Q4.167 15.521 4.167 14.125V7.417Q3.438 7.125 2.969 6.49Q2.5 5.854 2.5 5.042Q2.5 3.979 3.24 3.24Q3.979 2.5 5.042 2.5Q6.104 2.5 6.844 3.24Q7.583 3.979 7.583 5.042Q7.583 5.854 7.115 6.49Q6.646 7.125 5.917 7.417V14.125Q5.917 14.792 6.385 15.271Q6.854 15.75 7.521 15.75Q8.188 15.75 8.656 15.271Q9.125 14.792 9.125 14.125V5.875Q9.125 4.479 10.104 3.49Q11.083 2.5 12.479 2.5Q13.875 2.5 14.854 3.49Q15.833 4.479 15.833 5.875V12.583Q16.562 12.875 17.031 13.51Q17.5 14.146 17.5 14.958Q17.5 16.021 16.76 16.76Q16.021 17.5 14.958 17.5Q13.896 17.5 13.156 16.76Q12.417 16.021 12.417 14.958Q12.417 14.146 12.885 13.5Q13.354 12.854 14.083 12.583V5.875Q14.083 5.208 13.615 4.729Q13.146 4.25 12.479 4.25Q11.812 4.25 11.344 4.729Q10.875 5.208 10.875 5.875V14.125Q10.875 15.521 9.896 16.51Q8.917 17.5 7.521 17.5Z\"/></svg>";

package/dist/utils/style.js

@@ -0,0 +1,46 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getShapePicture = void 0;
+
+var _Shapes = require("../types/Shapes");
+
+var _icons = require("../constants/icons");
+
+var getShapePicture = function getShapePicture(shape) {
+  switch (shape) {
+    case _Shapes.ShapeEnum.brush:
+      return _icons.brushIcon;
+
+    case _Shapes.ShapeEnum.line:
+      return _icons.arrowIcon;
+
+    case _Shapes.ShapeEnum.polygon:
+      return _icons.polygonIcon;
+
+    case _Shapes.ShapeEnum.curve:
+      return _icons.curveIcon;
+
+    case _Shapes.ShapeEnum.rect:
+      return _icons.recIcon;
+
+    case _Shapes.ShapeEnum.square:
+      return _icons.squareIcon;
+
+    case _Shapes.ShapeEnum.circle:
+      return _icons.circleIcon;
+
+    case _Shapes.ShapeEnum.ellipse:
+      return _icons.ellipseIcon;
+
+    case _Shapes.ShapeEnum.text:
+      return _icons.textIcon;
+
+    case _Shapes.ShapeEnum.picture:
+      return _icons.pictureIcon;
+  }
+};
+
+exports.getShapePicture = getShapePicture;

package/dist/utils/toolbar.d.ts

@@ -0,0 +1,12 @@
+import { ShapeEnum } from 'types/Shapes';
+export declare const getCurrentStructure: (availableTools: ShapeEnum[], defaultStructure: (ShapeEnum | {
+    title: string;
+    img: string;
+    tools: ShapeEnum[];
+    vertical: boolean;
+})[]) => (ShapeEnum | {
+    tools: ShapeEnum[];
+    title: string;
+    vertical: boolean;
+    img: string;
+})[];

package/dist/utils/toolbar.js

@@ -0,0 +1,37 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getCurrentStructure = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _fp = _interopRequireDefault(require("lodash/fp"));
+
+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 getCurrentStructure = function getCurrentStructure(availableTools, defaultStructure) {
+  return _fp["default"].flow(_fp["default"].map(function (group) {
+    if (!_fp["default"].isObject(group)) {
+      if (_fp["default"].includes(group, availableTools)) {
+        return group;
+      }
+
+      return null;
+    }
+
+    var tools = _fp["default"].intersection(availableTools, group.tools);
+
+    if (!tools) return null;
+    return _objectSpread(_objectSpread({}, group), {}, {
+      tools: tools
+    });
+  }), _fp["default"].compact)(defaultStructure);
+};
+
+exports.getCurrentStructure = getCurrentStructure;