@solostylist/image-editor 1.0.8 → 1.0.10

package/lib/components/layers/design-layer/annotation-nodes/arrow-node.js

@@ -1 +1,62 @@
-import _extends from"@babel/runtime/helpers/extends";import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";var _excluded=["id","name","fill","pointerLength","pointerWidth","scaleX","scaleY","rotation","annotationEvents","points","lineCap","stroke","strokeWidth","shadowOffsetX","shadowOffsetY","shadowBlur","shadowColor","shadowOpacity","opacity"];import{Arrow}from"react-konva";import{nodesCommonDefaults}from"../nodes-common-prop-types";var ArrowNode=function(a){var b=a.id,c=a.name,d=a.fill,e=a.pointerLength,f=a.pointerWidth,g=a.scaleX,h=void 0===g?nodesCommonDefaults.scaleX:g,i=a.scaleY,j=void 0===i?nodesCommonDefaults.scaleY:i,k=a.rotation,l=void 0===k?nodesCommonDefaults.rotation:k,m=a.annotationEvents,n=a.points,o=a.lineCap,p=void 0===o?"butt":o,q=a.stroke,r=void 0===q?"#000000":q,s=a.strokeWidth,t=void 0===s?6:s,u=a.shadowOffsetX,v=void 0===u?nodesCommonDefaults.shadowOffsetX:u,w=a.shadowOffsetY,x=void 0===w?nodesCommonDefaults.shadowOffsetY:w,y=a.shadowBlur,z=void 0===y?nodesCommonDefaults.shadowBlur:y,A=a.shadowColor,B=void 0===A?nodesCommonDefaults.shadowColor:A,C=a.shadowOpacity,D=void 0===C?nodesCommonDefaults.shadowOpacity:C,E=a.opacity,F=void 0===E?nodesCommonDefaults.opacity:E,G=_objectWithoutProperties(a,_excluded);return React.createElement(Arrow,_extends({id:b,name:c,rotation:l,scaleX:h,scaleY:j,stroke:r,strokeWidth:t,shadowOffsetX:v,shadowOffsetY:x,shadowBlur:z,shadowColor:B,shadowOpacity:D,fill:d,x:0,y:0,points:n,pointerLength:e,pointerWidth:f,lineCap:p,opacity:F},m,G))};export default ArrowNode;
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["id", "name", "fill", "pointerLength", "pointerWidth", "scaleX", "scaleY", "rotation", "annotationEvents", "points", "lineCap", "stroke", "strokeWidth", "shadowOffsetX", "shadowOffsetY", "shadowBlur", "shadowColor", "shadowOpacity", "opacity"];
+import { Arrow } from 'react-konva';
+import { nodesCommonDefaults } from "../nodes-common-prop-types";
+var ArrowNode = function ArrowNode(_ref) {
+  var id = _ref.id,
+    name = _ref.name,
+    fill = _ref.fill,
+    pointerLength = _ref.pointerLength,
+    pointerWidth = _ref.pointerWidth,
+    _ref$scaleX = _ref.scaleX,
+    scaleX = _ref$scaleX === void 0 ? nodesCommonDefaults.scaleX : _ref$scaleX,
+    _ref$scaleY = _ref.scaleY,
+    scaleY = _ref$scaleY === void 0 ? nodesCommonDefaults.scaleY : _ref$scaleY,
+    _ref$rotation = _ref.rotation,
+    rotation = _ref$rotation === void 0 ? nodesCommonDefaults.rotation : _ref$rotation,
+    annotationEvents = _ref.annotationEvents,
+    points = _ref.points,
+    _ref$lineCap = _ref.lineCap,
+    lineCap = _ref$lineCap === void 0 ? 'butt' : _ref$lineCap,
+    _ref$stroke = _ref.stroke,
+    stroke = _ref$stroke === void 0 ? '#000000' : _ref$stroke,
+    _ref$strokeWidth = _ref.strokeWidth,
+    strokeWidth = _ref$strokeWidth === void 0 ? 6 : _ref$strokeWidth,
+    _ref$shadowOffsetX = _ref.shadowOffsetX,
+    shadowOffsetX = _ref$shadowOffsetX === void 0 ? nodesCommonDefaults.shadowOffsetX : _ref$shadowOffsetX,
+    _ref$shadowOffsetY = _ref.shadowOffsetY,
+    shadowOffsetY = _ref$shadowOffsetY === void 0 ? nodesCommonDefaults.shadowOffsetY : _ref$shadowOffsetY,
+    _ref$shadowBlur = _ref.shadowBlur,
+    shadowBlur = _ref$shadowBlur === void 0 ? nodesCommonDefaults.shadowBlur : _ref$shadowBlur,
+    _ref$shadowColor = _ref.shadowColor,
+    shadowColor = _ref$shadowColor === void 0 ? nodesCommonDefaults.shadowColor : _ref$shadowColor,
+    _ref$shadowOpacity = _ref.shadowOpacity,
+    shadowOpacity = _ref$shadowOpacity === void 0 ? nodesCommonDefaults.shadowOpacity : _ref$shadowOpacity,
+    _ref$opacity = _ref.opacity,
+    opacity = _ref$opacity === void 0 ? nodesCommonDefaults.opacity : _ref$opacity,
+    otherProps = _objectWithoutProperties(_ref, _excluded);
+  return React.createElement(Arrow, _extends({
+    id: id,
+    name: name,
+    rotation: rotation,
+    scaleX: scaleX,
+    scaleY: scaleY,
+    stroke: stroke,
+    strokeWidth: strokeWidth,
+    shadowOffsetX: shadowOffsetX,
+    shadowOffsetY: shadowOffsetY,
+    shadowBlur: shadowBlur,
+    shadowColor: shadowColor,
+    shadowOpacity: shadowOpacity,
+    fill: fill,
+    x: 0,
+    y: 0,
+    points: points,
+    pointerLength: pointerLength,
+    pointerWidth: pointerWidth,
+    lineCap: lineCap,
+    opacity: opacity
+  }, annotationEvents, otherProps));
+};
+export default ArrowNode;

package/lib/components/layers/design-layer/annotation-nodes/ellipse-node.js

@@ -1 +1,64 @@
-import _extends from"@babel/runtime/helpers/extends";import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";var _excluded=["id","name","fill","x","y","radiusX","radiusY","scaleX","scaleY","rotation","annotationEvents","stroke","strokeWidth","shadowOffsetX","shadowOffsetY","shadowBlur","shadowColor","shadowOpacity","opacity"];import{Ellipse}from"react-konva";import{nodesCommonDefaults}from"../nodes-common-prop-types";var EllipseNode=function(a){var b=a.id,c=a.name,d=a.fill,e=void 0===d?"#000":d,f=a.x,g=a.y,h=a.radiusX,i=void 0===h?0:h,j=a.radiusY,k=void 0===j?0:j,l=a.scaleX,m=void 0===l?nodesCommonDefaults.scaleX:l,n=a.scaleY,o=void 0===n?nodesCommonDefaults.scaleY:n,p=a.rotation,q=void 0===p?nodesCommonDefaults.rotation:p,r=a.annotationEvents,s=a.stroke,t=void 0===s?nodesCommonDefaults.stroke:s,u=a.strokeWidth,v=void 0===u?nodesCommonDefaults.strokeWidth:u,w=a.shadowOffsetX,x=void 0===w?nodesCommonDefaults.shadowOffsetX:w,y=a.shadowOffsetY,z=void 0===y?nodesCommonDefaults.shadowOffsetY:y,A=a.shadowBlur,B=void 0===A?nodesCommonDefaults.shadowBlur:A,C=a.shadowColor,D=void 0===C?nodesCommonDefaults.shadowColor:C,E=a.shadowOpacity,F=void 0===E?nodesCommonDefaults.shadowOpacity:E,G=a.opacity,H=void 0===G?nodesCommonDefaults.opacity:G,I=_objectWithoutProperties(a,_excluded);return React.createElement(Ellipse,_extends({id:b,name:c,rotation:q,scaleX:m,scaleY:o,stroke:t,strokeWidth:v,shadowOffsetX:x,shadowOffsetY:z,shadowBlur:B,shadowColor:D,shadowOpacity:F,fill:e,x:f,y:g,radiusX:i,radiusY:k,offsetX:-i,offsetY:-k,opacity:H},r,I))};export default EllipseNode;
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["id", "name", "fill", "x", "y", "radiusX", "radiusY", "scaleX", "scaleY", "rotation", "annotationEvents", "stroke", "strokeWidth", "shadowOffsetX", "shadowOffsetY", "shadowBlur", "shadowColor", "shadowOpacity", "opacity"];
+import { Ellipse } from 'react-konva';
+import { nodesCommonDefaults } from "../nodes-common-prop-types";
+var EllipseNode = function EllipseNode(_ref) {
+  var id = _ref.id,
+    name = _ref.name,
+    _ref$fill = _ref.fill,
+    fill = _ref$fill === void 0 ? '#000' : _ref$fill,
+    x = _ref.x,
+    y = _ref.y,
+    _ref$radiusX = _ref.radiusX,
+    radiusX = _ref$radiusX === void 0 ? 0 : _ref$radiusX,
+    _ref$radiusY = _ref.radiusY,
+    radiusY = _ref$radiusY === void 0 ? 0 : _ref$radiusY,
+    _ref$scaleX = _ref.scaleX,
+    scaleX = _ref$scaleX === void 0 ? nodesCommonDefaults.scaleX : _ref$scaleX,
+    _ref$scaleY = _ref.scaleY,
+    scaleY = _ref$scaleY === void 0 ? nodesCommonDefaults.scaleY : _ref$scaleY,
+    _ref$rotation = _ref.rotation,
+    rotation = _ref$rotation === void 0 ? nodesCommonDefaults.rotation : _ref$rotation,
+    annotationEvents = _ref.annotationEvents,
+    _ref$stroke = _ref.stroke,
+    stroke = _ref$stroke === void 0 ? nodesCommonDefaults.stroke : _ref$stroke,
+    _ref$strokeWidth = _ref.strokeWidth,
+    strokeWidth = _ref$strokeWidth === void 0 ? nodesCommonDefaults.strokeWidth : _ref$strokeWidth,
+    _ref$shadowOffsetX = _ref.shadowOffsetX,
+    shadowOffsetX = _ref$shadowOffsetX === void 0 ? nodesCommonDefaults.shadowOffsetX : _ref$shadowOffsetX,
+    _ref$shadowOffsetY = _ref.shadowOffsetY,
+    shadowOffsetY = _ref$shadowOffsetY === void 0 ? nodesCommonDefaults.shadowOffsetY : _ref$shadowOffsetY,
+    _ref$shadowBlur = _ref.shadowBlur,
+    shadowBlur = _ref$shadowBlur === void 0 ? nodesCommonDefaults.shadowBlur : _ref$shadowBlur,
+    _ref$shadowColor = _ref.shadowColor,
+    shadowColor = _ref$shadowColor === void 0 ? nodesCommonDefaults.shadowColor : _ref$shadowColor,
+    _ref$shadowOpacity = _ref.shadowOpacity,
+    shadowOpacity = _ref$shadowOpacity === void 0 ? nodesCommonDefaults.shadowOpacity : _ref$shadowOpacity,
+    _ref$opacity = _ref.opacity,
+    opacity = _ref$opacity === void 0 ? nodesCommonDefaults.opacity : _ref$opacity,
+    otherProps = _objectWithoutProperties(_ref, _excluded);
+  return React.createElement(Ellipse, _extends({
+    id: id,
+    name: name,
+    rotation: rotation,
+    scaleX: scaleX,
+    scaleY: scaleY,
+    stroke: stroke,
+    strokeWidth: strokeWidth,
+    shadowOffsetX: shadowOffsetX,
+    shadowOffsetY: shadowOffsetY,
+    shadowBlur: shadowBlur,
+    shadowColor: shadowColor,
+    shadowOpacity: shadowOpacity,
+    fill: fill,
+    x: x,
+    y: y,
+    radiusX: radiusX,
+    radiusY: radiusY,
+    offsetX: -radiusX,
+    offsetY: -radiusY,
+    opacity: opacity
+  }, annotationEvents, otherProps));
+};
+export default EllipseNode;

package/lib/components/layers/design-layer/annotation-nodes/image-node.js

@@ -1 +1,78 @@
-import _extends from"@babel/runtime/helpers/extends";import _slicedToArray from"@babel/runtime/helpers/slicedToArray";import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";var _excluded=["id","name","image","x","y","width","height","scaleX","scaleY","rotation","annotationEvents","stroke","strokeWidth","shadowOffsetX","shadowOffsetY","shadowBlur","shadowColor","shadowOpacity","opacity"];import{useEffect,useState}from"react";import{Image}from"react-konva";import loadImage from"utils/load-image";import{nodesCommonDefaults}from"../nodes-common-prop-types";var ImageNode=function(a){var b=a.id,c=a.name,d=a.image,e=a.x,f=a.y,g=a.width,h=void 0===g?0:g,i=a.height,j=void 0===i?0:i,k=a.scaleX,l=void 0===k?nodesCommonDefaults.scaleX:k,m=a.scaleY,n=void 0===m?nodesCommonDefaults.scaleY:m,o=a.rotation,p=void 0===o?nodesCommonDefaults.rotation:o,q=a.annotationEvents,r=a.stroke,s=void 0===r?nodesCommonDefaults.stroke:r,t=a.strokeWidth,u=void 0===t?nodesCommonDefaults.strokeWidth:t,v=a.shadowOffsetX,w=void 0===v?nodesCommonDefaults.shadowOffsetX:v,x=a.shadowOffsetY,y=void 0===x?nodesCommonDefaults.shadowOffsetY:x,z=a.shadowBlur,A=void 0===z?nodesCommonDefaults.shadowBlur:z,B=a.shadowColor,C=void 0===B?nodesCommonDefaults.shadowColor:B,D=a.shadowOpacity,E=void 0===D?nodesCommonDefaults.shadowOpacity:D,F=a.opacity,G=void 0===F?nodesCommonDefaults.opacity:F,H=_objectWithoutProperties(a,_excluded),I=useState(null),J=_slicedToArray(I,2),K=J[0],L=J[1];useEffect(function(){"string"==typeof d&&void loadImage(d).then(L)},[d]);var M=d instanceof HTMLImageElement;if(!M&&!K)return null;var N=M?d:K;return React.createElement(Image,_extends({id:b,name:c,rotation:p,scaleX:l,scaleY:n,stroke:s,strokeWidth:u,shadowOffsetX:w,shadowOffsetY:y,shadowBlur:A,shadowColor:C,shadowOpacity:E,image:N,x:e,y:f,width:h,height:j,opacity:G},H,q,H))};export default ImageNode;
+import _extends from "@babel/runtime/helpers/extends";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["id", "name", "image", "x", "y", "width", "height", "scaleX", "scaleY", "rotation", "annotationEvents", "stroke", "strokeWidth", "shadowOffsetX", "shadowOffsetY", "shadowBlur", "shadowColor", "shadowOpacity", "opacity"];
+import { useEffect, useState } from 'react';
+import { Image } from 'react-konva';
+import loadImage from 'utils/load-image';
+import { nodesCommonDefaults } from "../nodes-common-prop-types";
+var ImageNode = function ImageNode(_ref) {
+  var id = _ref.id,
+    name = _ref.name,
+    image = _ref.image,
+    x = _ref.x,
+    y = _ref.y,
+    _ref$width = _ref.width,
+    width = _ref$width === void 0 ? 0 : _ref$width,
+    _ref$height = _ref.height,
+    height = _ref$height === void 0 ? 0 : _ref$height,
+    _ref$scaleX = _ref.scaleX,
+    scaleX = _ref$scaleX === void 0 ? nodesCommonDefaults.scaleX : _ref$scaleX,
+    _ref$scaleY = _ref.scaleY,
+    scaleY = _ref$scaleY === void 0 ? nodesCommonDefaults.scaleY : _ref$scaleY,
+    _ref$rotation = _ref.rotation,
+    rotation = _ref$rotation === void 0 ? nodesCommonDefaults.rotation : _ref$rotation,
+    annotationEvents = _ref.annotationEvents,
+    _ref$stroke = _ref.stroke,
+    stroke = _ref$stroke === void 0 ? nodesCommonDefaults.stroke : _ref$stroke,
+    _ref$strokeWidth = _ref.strokeWidth,
+    strokeWidth = _ref$strokeWidth === void 0 ? nodesCommonDefaults.strokeWidth : _ref$strokeWidth,
+    _ref$shadowOffsetX = _ref.shadowOffsetX,
+    shadowOffsetX = _ref$shadowOffsetX === void 0 ? nodesCommonDefaults.shadowOffsetX : _ref$shadowOffsetX,
+    _ref$shadowOffsetY = _ref.shadowOffsetY,
+    shadowOffsetY = _ref$shadowOffsetY === void 0 ? nodesCommonDefaults.shadowOffsetY : _ref$shadowOffsetY,
+    _ref$shadowBlur = _ref.shadowBlur,
+    shadowBlur = _ref$shadowBlur === void 0 ? nodesCommonDefaults.shadowBlur : _ref$shadowBlur,
+    _ref$shadowColor = _ref.shadowColor,
+    shadowColor = _ref$shadowColor === void 0 ? nodesCommonDefaults.shadowColor : _ref$shadowColor,
+    _ref$shadowOpacity = _ref.shadowOpacity,
+    shadowOpacity = _ref$shadowOpacity === void 0 ? nodesCommonDefaults.shadowOpacity : _ref$shadowOpacity,
+    _ref$opacity = _ref.opacity,
+    opacity = _ref$opacity === void 0 ? nodesCommonDefaults.opacity : _ref$opacity,
+    otherProps = _objectWithoutProperties(_ref, _excluded);
+  var _useState = useState(null),
+    _useState2 = _slicedToArray(_useState, 2),
+    imgElement = _useState2[0],
+    setImgElement = _useState2[1];
+  useEffect(function () {
+    if (typeof image === 'string') {
+      void loadImage(image).then(setImgElement);
+    }
+  }, [image]);
+  var isImgElement = image instanceof HTMLImageElement;
+  if (!isImgElement && !imgElement) {
+    return null;
+  }
+  var finalImg = isImgElement ? image : imgElement;
+  return React.createElement(Image, _extends({
+    id: id,
+    name: name,
+    rotation: rotation,
+    scaleX: scaleX,
+    scaleY: scaleY,
+    stroke: stroke,
+    strokeWidth: strokeWidth,
+    shadowOffsetX: shadowOffsetX,
+    shadowOffsetY: shadowOffsetY,
+    shadowBlur: shadowBlur,
+    shadowColor: shadowColor,
+    shadowOpacity: shadowOpacity,
+    image: finalImg,
+    x: x,
+    y: y,
+    width: width,
+    height: height,
+    opacity: opacity
+  }, otherProps, annotationEvents, otherProps));
+};
+export default ImageNode;

package/lib/components/layers/design-layer/annotation-nodes/index.js

@@ -1 +1,22 @@
-import{useMemo}from"react";import{useAnnotationEvents,useStore}from"hooks";import MemoizedAnnotation from"./memoized-annotation";var AnnotationNodes=function(){var a=useStore(),b=a.annotations,c=void 0===b?{}:b,d=a.selectionsIds,e=void 0===d?[]:d,f=useAnnotationEvents();return useMemo(function(){return Object.values(c).map(function(a){return React.createElement(MemoizedAnnotation,{key:a.id,annotation:a,annotationEvents:f,selectionsIds:e})})},[c,f,e])};export default AnnotationNodes;
+import { useMemo } from 'react';
+import { useAnnotationEvents, useStore } from 'hooks';
+import MemoizedAnnotation from "./memoized-annotation";
+var AnnotationNodes = function AnnotationNodes() {
+  var _useStore = useStore(),
+    _useStore$annotations = _useStore.annotations,
+    annotations = _useStore$annotations === void 0 ? {} : _useStore$annotations,
+    _useStore$selectionsI = _useStore.selectionsIds,
+    selectionsIds = _useStore$selectionsI === void 0 ? [] : _useStore$selectionsI;
+  var annotationEvents = useAnnotationEvents();
+  return useMemo(function () {
+    return Object.values(annotations).map(function (annotation) {
+      return React.createElement(MemoizedAnnotation, {
+        key: annotation.id,
+        annotation: annotation,
+        annotationEvents: annotationEvents,
+        selectionsIds: selectionsIds
+      });
+    });
+  }, [annotations, annotationEvents, selectionsIds]);
+};
+export default AnnotationNodes;

package/lib/components/layers/design-layer/annotation-nodes/line-node.js

@@ -1 +1,60 @@
-import _extends from"@babel/runtime/helpers/extends";import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";var _excluded=["id","name","scaleX","scaleY","rotation","annotationEvents","points","lineCap","stroke","strokeWidth","shadowOffsetX","shadowOffsetY","shadowBlur","shadowColor","shadowOpacity","tension","opacity"];import{Line}from"react-konva";import{nodesCommonDefaults}from"../nodes-common-prop-types";var LineNode=function(a){var b=a.id,c=a.name,d=a.scaleX,e=void 0===d?nodesCommonDefaults.scaleX:d,f=a.scaleY,g=void 0===f?nodesCommonDefaults.scaleY:f,h=a.rotation,i=void 0===h?nodesCommonDefaults.rotation:h,j=a.annotationEvents,k=void 0===j?{}:j,l=a.points,m=a.lineCap,n=void 0===m?"butt":m,o=a.stroke,p=void 0===o?"#000000":o,q=a.strokeWidth,r=void 0===q?1:q,s=a.shadowOffsetX,t=void 0===s?nodesCommonDefaults.shadowOffsetX:s,u=a.shadowOffsetY,v=void 0===u?nodesCommonDefaults.shadowOffsetY:u,w=a.shadowBlur,x=void 0===w?nodesCommonDefaults.shadowBlur:w,y=a.shadowColor,z=void 0===y?nodesCommonDefaults.shadowColor:y,A=a.shadowOpacity,B=void 0===A?nodesCommonDefaults.shadowOpacity:A,C=a.tension,D=a.opacity,E=void 0===D?nodesCommonDefaults.opacity:D,F=_objectWithoutProperties(a,_excluded);return React.createElement(Line,_extends({id:b,name:c,rotation:i,scaleX:e,scaleY:g,stroke:p,strokeWidth:r,shadowOffsetX:t,shadowOffsetY:v,shadowBlur:x,shadowColor:z,shadowOpacity:B,points:l,lineCap:n,tension:C,hitStrokeWidth:20,x:0,y:0,opacity:E},k,F))};export default LineNode;
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["id", "name", "scaleX", "scaleY", "rotation", "annotationEvents", "points", "lineCap", "stroke", "strokeWidth", "shadowOffsetX", "shadowOffsetY", "shadowBlur", "shadowColor", "shadowOpacity", "tension", "opacity"];
+import { Line } from 'react-konva';
+import { nodesCommonDefaults } from "../nodes-common-prop-types";
+var LineNode = function LineNode(_ref) {
+  var id = _ref.id,
+    name = _ref.name,
+    _ref$scaleX = _ref.scaleX,
+    scaleX = _ref$scaleX === void 0 ? nodesCommonDefaults.scaleX : _ref$scaleX,
+    _ref$scaleY = _ref.scaleY,
+    scaleY = _ref$scaleY === void 0 ? nodesCommonDefaults.scaleY : _ref$scaleY,
+    _ref$rotation = _ref.rotation,
+    rotation = _ref$rotation === void 0 ? nodesCommonDefaults.rotation : _ref$rotation,
+    _ref$annotationEvents = _ref.annotationEvents,
+    annotationEvents = _ref$annotationEvents === void 0 ? {} : _ref$annotationEvents,
+    points = _ref.points,
+    _ref$lineCap = _ref.lineCap,
+    lineCap = _ref$lineCap === void 0 ? 'butt' : _ref$lineCap,
+    _ref$stroke = _ref.stroke,
+    stroke = _ref$stroke === void 0 ? '#000000' : _ref$stroke,
+    _ref$strokeWidth = _ref.strokeWidth,
+    strokeWidth = _ref$strokeWidth === void 0 ? 1 : _ref$strokeWidth,
+    _ref$shadowOffsetX = _ref.shadowOffsetX,
+    shadowOffsetX = _ref$shadowOffsetX === void 0 ? nodesCommonDefaults.shadowOffsetX : _ref$shadowOffsetX,
+    _ref$shadowOffsetY = _ref.shadowOffsetY,
+    shadowOffsetY = _ref$shadowOffsetY === void 0 ? nodesCommonDefaults.shadowOffsetY : _ref$shadowOffsetY,
+    _ref$shadowBlur = _ref.shadowBlur,
+    shadowBlur = _ref$shadowBlur === void 0 ? nodesCommonDefaults.shadowBlur : _ref$shadowBlur,
+    _ref$shadowColor = _ref.shadowColor,
+    shadowColor = _ref$shadowColor === void 0 ? nodesCommonDefaults.shadowColor : _ref$shadowColor,
+    _ref$shadowOpacity = _ref.shadowOpacity,
+    shadowOpacity = _ref$shadowOpacity === void 0 ? nodesCommonDefaults.shadowOpacity : _ref$shadowOpacity,
+    tension = _ref.tension,
+    _ref$opacity = _ref.opacity,
+    opacity = _ref$opacity === void 0 ? nodesCommonDefaults.opacity : _ref$opacity,
+    otherProps = _objectWithoutProperties(_ref, _excluded);
+  return React.createElement(Line, _extends({
+    id: id,
+    name: name,
+    rotation: rotation,
+    scaleX: scaleX,
+    scaleY: scaleY,
+    stroke: stroke,
+    strokeWidth: strokeWidth,
+    shadowOffsetX: shadowOffsetX,
+    shadowOffsetY: shadowOffsetY,
+    shadowBlur: shadowBlur,
+    shadowColor: shadowColor,
+    shadowOpacity: shadowOpacity,
+    points: points,
+    lineCap: lineCap,
+    tension: tension,
+    hitStrokeWidth: 20,
+    x: 0,
+    y: 0,
+    opacity: opacity
+  }, annotationEvents, otherProps));
+};
+export default LineNode;

package/lib/components/layers/design-layer/annotation-nodes/memoized-annotation.js

@@ -1 +1,16 @@
-import _extends from"@babel/runtime/helpers/extends";import{memo}from"react";import{ANNOTATION_NAMES_TO_COMPONENT}from"./annotation-nodes.constants";var MemoizedAnnotation=function(a){var b=a.annotation,c=a.annotationEvents,d=a.selectionsIds,e=ANNOTATION_NAMES_TO_COMPONENT[b.name];return e?React.createElement(e,_extends({key:b.id,annotationEvents:c,draggable:d.includes(b.id)},b)):null};export default memo(MemoizedAnnotation);
+import _extends from "@babel/runtime/helpers/extends";
+import { memo } from 'react';
+import { ANNOTATION_NAMES_TO_COMPONENT } from "./annotation-nodes.constants";
+var MemoizedAnnotation = function MemoizedAnnotation(_ref) {
+  var annotation = _ref.annotation,
+    annotationEvents = _ref.annotationEvents,
+    selectionsIds = _ref.selectionsIds;
+  var AnnotationComponent = ANNOTATION_NAMES_TO_COMPONENT[annotation.name];
+  if (!AnnotationComponent) return null;
+  return React.createElement(AnnotationComponent, _extends({
+    key: annotation.id,
+    annotationEvents: annotationEvents,
+    draggable: selectionsIds.includes(annotation.id)
+  }, annotation));
+};
+export default memo(MemoizedAnnotation);

package/lib/components/layers/design-layer/annotation-nodes/polygon-node.js

@@ -1 +1,63 @@
-import _extends from"@babel/runtime/helpers/extends";import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";var _excluded=["id","name","fill","x","y","radius","scaleX","scaleY","rotation","sides","annotationEvents","stroke","strokeWidth","shadowOffsetX","shadowOffsetY","shadowBlur","shadowColor","shadowOpacity","opacity"];import{RegularPolygon}from"react-konva";import{nodesCommonDefaults}from"../nodes-common-prop-types";var PolygonNode=function(a){var b=a.id,c=a.name,d=a.fill,e=void 0===d?"#000":d,f=a.x,g=a.y,h=a.radius,i=a.scaleX,j=void 0===i?nodesCommonDefaults.scaleX:i,k=a.scaleY,l=void 0===k?nodesCommonDefaults.scaleY:k,m=a.rotation,n=void 0===m?nodesCommonDefaults.rotation:m,o=a.sides,p=void 0===o?3:o,q=a.annotationEvents,r=a.stroke,s=void 0===r?nodesCommonDefaults.stroke:r,t=a.strokeWidth,u=void 0===t?nodesCommonDefaults.strokeWidth:t,v=a.shadowOffsetX,w=void 0===v?nodesCommonDefaults.shadowOffsetX:v,x=a.shadowOffsetY,y=void 0===x?nodesCommonDefaults.shadowOffsetY:x,z=a.shadowBlur,A=void 0===z?nodesCommonDefaults.shadowBlur:z,B=a.shadowColor,C=void 0===B?nodesCommonDefaults.shadowColor:B,D=a.shadowOpacity,E=void 0===D?nodesCommonDefaults.shadowOpacity:D,F=a.opacity,G=void 0===F?nodesCommonDefaults.opacity:F,H=_objectWithoutProperties(a,_excluded);return React.createElement(RegularPolygon,_extends({id:b,name:c,rotation:n,scaleX:j,scaleY:l,stroke:s,strokeWidth:u,shadowOffsetX:w,shadowOffsetY:y,shadowBlur:A,shadowColor:C,shadowOpacity:E,fill:e,x:f,y:g,radius:h,offsetX:-h,offsetY:-h,sides:p,opacity:G},q,H))};export default PolygonNode;
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["id", "name", "fill", "x", "y", "radius", "scaleX", "scaleY", "rotation", "sides", "annotationEvents", "stroke", "strokeWidth", "shadowOffsetX", "shadowOffsetY", "shadowBlur", "shadowColor", "shadowOpacity", "opacity"];
+import { RegularPolygon } from 'react-konva';
+import { nodesCommonDefaults } from "../nodes-common-prop-types";
+var PolygonNode = function PolygonNode(_ref) {
+  var id = _ref.id,
+    name = _ref.name,
+    _ref$fill = _ref.fill,
+    fill = _ref$fill === void 0 ? '#000' : _ref$fill,
+    x = _ref.x,
+    y = _ref.y,
+    radius = _ref.radius,
+    _ref$scaleX = _ref.scaleX,
+    scaleX = _ref$scaleX === void 0 ? nodesCommonDefaults.scaleX : _ref$scaleX,
+    _ref$scaleY = _ref.scaleY,
+    scaleY = _ref$scaleY === void 0 ? nodesCommonDefaults.scaleY : _ref$scaleY,
+    _ref$rotation = _ref.rotation,
+    rotation = _ref$rotation === void 0 ? nodesCommonDefaults.rotation : _ref$rotation,
+    _ref$sides = _ref.sides,
+    sides = _ref$sides === void 0 ? 3 : _ref$sides,
+    annotationEvents = _ref.annotationEvents,
+    _ref$stroke = _ref.stroke,
+    stroke = _ref$stroke === void 0 ? nodesCommonDefaults.stroke : _ref$stroke,
+    _ref$strokeWidth = _ref.strokeWidth,
+    strokeWidth = _ref$strokeWidth === void 0 ? nodesCommonDefaults.strokeWidth : _ref$strokeWidth,
+    _ref$shadowOffsetX = _ref.shadowOffsetX,
+    shadowOffsetX = _ref$shadowOffsetX === void 0 ? nodesCommonDefaults.shadowOffsetX : _ref$shadowOffsetX,
+    _ref$shadowOffsetY = _ref.shadowOffsetY,
+    shadowOffsetY = _ref$shadowOffsetY === void 0 ? nodesCommonDefaults.shadowOffsetY : _ref$shadowOffsetY,
+    _ref$shadowBlur = _ref.shadowBlur,
+    shadowBlur = _ref$shadowBlur === void 0 ? nodesCommonDefaults.shadowBlur : _ref$shadowBlur,
+    _ref$shadowColor = _ref.shadowColor,
+    shadowColor = _ref$shadowColor === void 0 ? nodesCommonDefaults.shadowColor : _ref$shadowColor,
+    _ref$shadowOpacity = _ref.shadowOpacity,
+    shadowOpacity = _ref$shadowOpacity === void 0 ? nodesCommonDefaults.shadowOpacity : _ref$shadowOpacity,
+    _ref$opacity = _ref.opacity,
+    opacity = _ref$opacity === void 0 ? nodesCommonDefaults.opacity : _ref$opacity,
+    otherProps = _objectWithoutProperties(_ref, _excluded);
+  return React.createElement(RegularPolygon, _extends({
+    id: id,
+    name: name,
+    rotation: rotation,
+    scaleX: scaleX,
+    scaleY: scaleY,
+    stroke: stroke,
+    strokeWidth: strokeWidth,
+    shadowOffsetX: shadowOffsetX,
+    shadowOffsetY: shadowOffsetY,
+    shadowBlur: shadowBlur,
+    shadowColor: shadowColor,
+    shadowOpacity: shadowOpacity,
+    fill: fill,
+    x: x,
+    y: y,
+    radius: radius,
+    offsetX: -radius,
+    offsetY: -radius,
+    sides: sides,
+    opacity: opacity
+  }, annotationEvents, otherProps));
+};
+export default PolygonNode;

package/lib/components/layers/design-layer/annotation-nodes/rect-node.js

@@ -1 +1,65 @@
-import _extends from"@babel/runtime/helpers/extends";import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";var _excluded=["id","name","fill","x","y","width","height","scaleX","scaleY","rotation","annotationEvents","stroke","strokeWidth","shadowOffsetX","shadowOffsetY","shadowBlur","shadowColor","shadowOpacity","opacity","cornerRadius"];import{Rect}from"react-konva";import{nodesCommonDefaults}from"../nodes-common-prop-types";var RectNode=function(a){var b=a.id,c=a.name,d=a.fill,e=void 0===d?"#000":d,f=a.x,g=a.y,h=a.width,i=void 0===h?0:h,j=a.height,k=void 0===j?0:j,l=a.scaleX,m=void 0===l?nodesCommonDefaults.scaleX:l,n=a.scaleY,o=void 0===n?nodesCommonDefaults.scaleY:n,p=a.rotation,q=void 0===p?nodesCommonDefaults.rotation:p,r=a.annotationEvents,s=a.stroke,t=void 0===s?nodesCommonDefaults.stroke:s,u=a.strokeWidth,v=void 0===u?nodesCommonDefaults.strokeWidth:u,w=a.shadowOffsetX,x=void 0===w?nodesCommonDefaults.shadowOffsetX:w,y=a.shadowOffsetY,z=void 0===y?nodesCommonDefaults.shadowOffsetY:y,A=a.shadowBlur,B=void 0===A?nodesCommonDefaults.shadowBlur:A,C=a.shadowColor,D=void 0===C?nodesCommonDefaults.shadowColor:C,E=a.shadowOpacity,F=void 0===E?nodesCommonDefaults.shadowOpacity:E,G=a.opacity,H=void 0===G?nodesCommonDefaults.opacity:G,I=a.cornerRadius,J=void 0===I?0:I,K=_objectWithoutProperties(a,_excluded);return React.createElement(Rect,_extends({id:b,name:c,rotation:q,scaleX:m,scaleY:o,stroke:t,strokeWidth:v,shadowOffsetX:x,shadowOffsetY:z,shadowBlur:B,shadowColor:D,shadowOpacity:F,fill:e,x:f,y:g,width:i,height:k,opacity:H,cornerRadius:J},r,K))};export default RectNode;
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["id", "name", "fill", "x", "y", "width", "height", "scaleX", "scaleY", "rotation", "annotationEvents", "stroke", "strokeWidth", "shadowOffsetX", "shadowOffsetY", "shadowBlur", "shadowColor", "shadowOpacity", "opacity", "cornerRadius"];
+import { Rect } from 'react-konva';
+import { nodesCommonDefaults } from "../nodes-common-prop-types";
+var RectNode = function RectNode(_ref) {
+  var id = _ref.id,
+    name = _ref.name,
+    _ref$fill = _ref.fill,
+    fill = _ref$fill === void 0 ? '#000' : _ref$fill,
+    x = _ref.x,
+    y = _ref.y,
+    _ref$width = _ref.width,
+    width = _ref$width === void 0 ? 0 : _ref$width,
+    _ref$height = _ref.height,
+    height = _ref$height === void 0 ? 0 : _ref$height,
+    _ref$scaleX = _ref.scaleX,
+    scaleX = _ref$scaleX === void 0 ? nodesCommonDefaults.scaleX : _ref$scaleX,
+    _ref$scaleY = _ref.scaleY,
+    scaleY = _ref$scaleY === void 0 ? nodesCommonDefaults.scaleY : _ref$scaleY,
+    _ref$rotation = _ref.rotation,
+    rotation = _ref$rotation === void 0 ? nodesCommonDefaults.rotation : _ref$rotation,
+    annotationEvents = _ref.annotationEvents,
+    _ref$stroke = _ref.stroke,
+    stroke = _ref$stroke === void 0 ? nodesCommonDefaults.stroke : _ref$stroke,
+    _ref$strokeWidth = _ref.strokeWidth,
+    strokeWidth = _ref$strokeWidth === void 0 ? nodesCommonDefaults.strokeWidth : _ref$strokeWidth,
+    _ref$shadowOffsetX = _ref.shadowOffsetX,
+    shadowOffsetX = _ref$shadowOffsetX === void 0 ? nodesCommonDefaults.shadowOffsetX : _ref$shadowOffsetX,
+    _ref$shadowOffsetY = _ref.shadowOffsetY,
+    shadowOffsetY = _ref$shadowOffsetY === void 0 ? nodesCommonDefaults.shadowOffsetY : _ref$shadowOffsetY,
+    _ref$shadowBlur = _ref.shadowBlur,
+    shadowBlur = _ref$shadowBlur === void 0 ? nodesCommonDefaults.shadowBlur : _ref$shadowBlur,
+    _ref$shadowColor = _ref.shadowColor,
+    shadowColor = _ref$shadowColor === void 0 ? nodesCommonDefaults.shadowColor : _ref$shadowColor,
+    _ref$shadowOpacity = _ref.shadowOpacity,
+    shadowOpacity = _ref$shadowOpacity === void 0 ? nodesCommonDefaults.shadowOpacity : _ref$shadowOpacity,
+    _ref$opacity = _ref.opacity,
+    opacity = _ref$opacity === void 0 ? nodesCommonDefaults.opacity : _ref$opacity,
+    _ref$cornerRadius = _ref.cornerRadius,
+    cornerRadius = _ref$cornerRadius === void 0 ? 0 : _ref$cornerRadius,
+    otherProps = _objectWithoutProperties(_ref, _excluded);
+  return React.createElement(Rect, _extends({
+    id: id,
+    name: name,
+    rotation: rotation,
+    scaleX: scaleX,
+    scaleY: scaleY,
+    stroke: stroke,
+    strokeWidth: strokeWidth,
+    shadowOffsetX: shadowOffsetX,
+    shadowOffsetY: shadowOffsetY,
+    shadowBlur: shadowBlur,
+    shadowColor: shadowColor,
+    shadowOpacity: shadowOpacity,
+    fill: fill,
+    x: x,
+    y: y,
+    width: width,
+    height: height,
+    opacity: opacity,
+    cornerRadius: cornerRadius
+  }, annotationEvents, otherProps));
+};
+export default RectNode;

package/lib/components/layers/design-layer/annotation-nodes/text-node.js

@@ -1 +1,80 @@
-import _extends from"@babel/runtime/helpers/extends";import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";var _excluded=["id","name","text","fontFamily","fontSize","fontStyle","fill","x","y","width","height","scaleX","scaleY","rotation","annotationEvents","stroke","strokeWidth","shadowOffsetX","shadowOffsetY","shadowBlur","shadowColor","shadowOpacity","opacity","letterSpacing","lineHeight","align"];import{Text}from"react-konva";import{nodesCommonDefaults}from"../nodes-common-prop-types";var TextNode=function(a){var b=a.id,c=a.name,d=a.text,e=void 0===d?"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur imperdiet tortor quis odio facilisis, id aliquet nulla facilisis. Etiam tincidunt tempor odio nec placerat.":d,f=a.fontFamily,g=void 0===f?"Arial":f,h=a.fontSize,i=void 0===h?14:h,j=a.fontStyle,k=a.fill,l=void 0===k?"#000":k,m=a.x,n=a.y,o=a.width,p=void 0===o?0:o,q=a.height,r=void 0===q?0:q,s=a.scaleX,t=void 0===s?nodesCommonDefaults.scaleX:s,u=a.scaleY,v=void 0===u?nodesCommonDefaults.scaleY:u,w=a.rotation,x=void 0===w?nodesCommonDefaults.rotation:w,y=a.annotationEvents,z=a.stroke,A=void 0===z?nodesCommonDefaults.stroke:z,B=a.strokeWidth,C=void 0===B?nodesCommonDefaults.strokeWidth:B,D=a.shadowOffsetX,E=void 0===D?nodesCommonDefaults.shadowOffsetX:D,F=a.shadowOffsetY,G=void 0===F?nodesCommonDefaults.shadowOffsetY:F,H=a.shadowBlur,I=void 0===H?nodesCommonDefaults.shadowBlur:H,J=a.shadowColor,K=void 0===J?nodesCommonDefaults.shadowColor:J,L=a.shadowOpacity,M=void 0===L?nodesCommonDefaults.shadowOpacity:L,N=a.opacity,O=void 0===N?nodesCommonDefaults.opacity:N,P=a.letterSpacing,Q=a.lineHeight,R=a.align,S=void 0===R?"left":R,T=_objectWithoutProperties(a,_excluded);return React.createElement(Text,_extends({id:b,name:c,rotation:x,scaleX:t,scaleY:v,stroke:A,strokeWidth:C,shadowOffsetX:E,shadowOffsetY:G,shadowBlur:I,shadowColor:K,shadowOpacity:M,opacity:O,fill:l,text:e,fontFamily:g,fontStyle:j,fontSize:i,letterSpacing:P,lineHeight:Q,align:S,x:m,y:n,width:p,height:r},y,T))};export default TextNode;
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["id", "name", "text", "fontFamily", "fontSize", "fontStyle", "fill", "x", "y", "width", "height", "scaleX", "scaleY", "rotation", "annotationEvents", "stroke", "strokeWidth", "shadowOffsetX", "shadowOffsetY", "shadowBlur", "shadowColor", "shadowOpacity", "opacity", "letterSpacing", "lineHeight", "align"];
+import { Text } from 'react-konva';
+import { nodesCommonDefaults } from "../nodes-common-prop-types";
+var TextNode = function TextNode(_ref) {
+  var id = _ref.id,
+    name = _ref.name,
+    _ref$text = _ref.text,
+    text = _ref$text === void 0 ? 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur imperdiet tortor quis odio facilisis, id aliquet nulla facilisis. Etiam tincidunt tempor odio nec placerat.' : _ref$text,
+    _ref$fontFamily = _ref.fontFamily,
+    fontFamily = _ref$fontFamily === void 0 ? 'Arial' : _ref$fontFamily,
+    _ref$fontSize = _ref.fontSize,
+    fontSize = _ref$fontSize === void 0 ? 14 : _ref$fontSize,
+    fontStyle = _ref.fontStyle,
+    _ref$fill = _ref.fill,
+    fill = _ref$fill === void 0 ? '#000' : _ref$fill,
+    x = _ref.x,
+    y = _ref.y,
+    _ref$width = _ref.width,
+    width = _ref$width === void 0 ? 0 : _ref$width,
+    _ref$height = _ref.height,
+    height = _ref$height === void 0 ? 0 : _ref$height,
+    _ref$scaleX = _ref.scaleX,
+    scaleX = _ref$scaleX === void 0 ? nodesCommonDefaults.scaleX : _ref$scaleX,
+    _ref$scaleY = _ref.scaleY,
+    scaleY = _ref$scaleY === void 0 ? nodesCommonDefaults.scaleY : _ref$scaleY,
+    _ref$rotation = _ref.rotation,
+    rotation = _ref$rotation === void 0 ? nodesCommonDefaults.rotation : _ref$rotation,
+    annotationEvents = _ref.annotationEvents,
+    _ref$stroke = _ref.stroke,
+    stroke = _ref$stroke === void 0 ? nodesCommonDefaults.stroke : _ref$stroke,
+    _ref$strokeWidth = _ref.strokeWidth,
+    strokeWidth = _ref$strokeWidth === void 0 ? nodesCommonDefaults.strokeWidth : _ref$strokeWidth,
+    _ref$shadowOffsetX = _ref.shadowOffsetX,
+    shadowOffsetX = _ref$shadowOffsetX === void 0 ? nodesCommonDefaults.shadowOffsetX : _ref$shadowOffsetX,
+    _ref$shadowOffsetY = _ref.shadowOffsetY,
+    shadowOffsetY = _ref$shadowOffsetY === void 0 ? nodesCommonDefaults.shadowOffsetY : _ref$shadowOffsetY,
+    _ref$shadowBlur = _ref.shadowBlur,
+    shadowBlur = _ref$shadowBlur === void 0 ? nodesCommonDefaults.shadowBlur : _ref$shadowBlur,
+    _ref$shadowColor = _ref.shadowColor,
+    shadowColor = _ref$shadowColor === void 0 ? nodesCommonDefaults.shadowColor : _ref$shadowColor,
+    _ref$shadowOpacity = _ref.shadowOpacity,
+    shadowOpacity = _ref$shadowOpacity === void 0 ? nodesCommonDefaults.shadowOpacity : _ref$shadowOpacity,
+    _ref$opacity = _ref.opacity,
+    opacity = _ref$opacity === void 0 ? nodesCommonDefaults.opacity : _ref$opacity,
+    letterSpacing = _ref.letterSpacing,
+    lineHeight = _ref.lineHeight,
+    _ref$align = _ref.align,
+    align = _ref$align === void 0 ? 'left' : _ref$align,
+    otherProps = _objectWithoutProperties(_ref, _excluded);
+  return React.createElement(Text, _extends({
+    id: id,
+    name: name,
+    rotation: rotation,
+    scaleX: scaleX,
+    scaleY: scaleY,
+    stroke: stroke,
+    strokeWidth: strokeWidth,
+    shadowOffsetX: shadowOffsetX,
+    shadowOffsetY: shadowOffsetY,
+    shadowBlur: shadowBlur,
+    shadowColor: shadowColor,
+    shadowOpacity: shadowOpacity,
+    opacity: opacity,
+    fill: fill,
+    text: text,
+    fontFamily: fontFamily,
+    fontStyle: fontStyle,
+    fontSize: fontSize,
+    letterSpacing: letterSpacing,
+    lineHeight: lineHeight,
+    align: align,
+    x: x,
+    y: y,
+    width: width,
+    height: height
+  }, annotationEvents, otherProps));
+};
+export default TextNode;