@solostylist/image-editor 1.0.11 → 1.0.13

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

@@ -1,16 +1,18 @@
-import _extends from "@babel/runtime/helpers/extends";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import { memo } from 'react';
 import { ANNOTATION_NAMES_TO_COMPONENT } from "./annotation-nodes.constants";
+import { jsx as _jsx } from "react/jsx-runtime";
 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,
+  return _jsx(AnnotationComponent, _objectSpread({
     annotationEvents: annotationEvents,
     draggable: selectionsIds.includes(annotation.id)
-  }, annotation));
+  }, annotation), annotation.id);
 };
 export default memo(MemoizedAnnotation);

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

@@ -0,0 +1,15 @@
+/** Internal Dependencies */
+import { AnnotationEventHandlers } from 'hooks/use-annotation-events';
+import { NodesCommonProps } from '../nodes-common-prop-types';
+interface PolygonNodeProps extends NodesCommonProps {
+    x: number;
+    y: number;
+    annotationEvents: AnnotationEventHandlers;
+    radius: number;
+    fill?: string;
+    sides?: number;
+    [key: string]: any;
+}
+declare const PolygonNode: ({ id, name, fill, x, y, radius, scaleX, scaleY, rotation, sides, annotationEvents, stroke, strokeWidth, shadowOffsetX, shadowOffsetY, shadowBlur, shadowColor, shadowOpacity, opacity, ...otherProps }: PolygonNodeProps) => import("react/jsx-runtime").JSX.Element;
+export default PolygonNode;
+//# sourceMappingURL=polygon-node.d.ts.map

package/lib/components/layers/design-layer/annotation-nodes/polygon-node.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"polygon-node.d.ts","sourceRoot":"","sources":["../../../../../src/components/layers/design-layer/annotation-nodes/polygon-node.tsx"],"names":[],"mappings":"AAGA,4BAA4B;AAC5B,OAAO,EAAE,uBAAuB,EAAE,MAAM,6BAA6B,CAAC;AACtE,OAAO,EACL,gBAAgB,EAEjB,MAAM,4BAA4B,CAAC;AAEpC,UAAU,gBAAiB,SAAQ,gBAAgB;IACjD,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,gBAAgB,EAAE,uBAAuB,CAAC;IAC1C,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACpB;AAED,QAAA,MAAM,WAAW,GAAI,wMAqBlB,gBAAgB,4CA2BlB,CAAC;AAEF,eAAe,WAAW,CAAC"}

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

@@ -1,8 +1,11 @@
-import _extends from "@babel/runtime/helpers/extends";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 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"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import { RegularPolygon } from 'react-konva';
 import { nodesCommonDefaults } from "../nodes-common-prop-types";
+import { jsx as _jsx } from "react/jsx-runtime";
 var PolygonNode = function PolygonNode(_ref) {
   var id = _ref.id,
     name = _ref.name,
@@ -37,7 +40,7 @@ var PolygonNode = function PolygonNode(_ref) {
     _ref$opacity = _ref.opacity,
     opacity = _ref$opacity === void 0 ? nodesCommonDefaults.opacity : _ref$opacity,
     otherProps = _objectWithoutProperties(_ref, _excluded);
-  return React.createElement(RegularPolygon, _extends({
+  return _jsx(RegularPolygon, _objectSpread(_objectSpread({
     id: id,
     name: name,
     rotation: rotation,
@@ -58,6 +61,6 @@ var PolygonNode = function PolygonNode(_ref) {
     offsetY: -radius,
     sides: sides,
     opacity: opacity
-  }, annotationEvents, otherProps));
+  }, annotationEvents), otherProps));
 };
 export default PolygonNode;

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

@@ -0,0 +1,16 @@
+/** Internal Dependencies */
+import { AnnotationEventHandlers } from 'hooks/use-annotation-events';
+import { NodesCommonProps } from '../nodes-common-prop-types';
+interface RectNodeProps extends NodesCommonProps {
+    x: number;
+    y: number;
+    annotationEvents: AnnotationEventHandlers;
+    width?: number;
+    height?: number;
+    fill?: string;
+    cornerRadius?: number;
+    [key: string]: any;
+}
+declare const RectNode: ({ id, name, fill, x, y, width, height, scaleX, scaleY, rotation, annotationEvents, stroke, strokeWidth, shadowOffsetX, shadowOffsetY, shadowBlur, shadowColor, shadowOpacity, opacity, cornerRadius, ...otherProps }: RectNodeProps) => import("react/jsx-runtime").JSX.Element;
+export default RectNode;
+//# sourceMappingURL=rect-node.d.ts.map

package/lib/components/layers/design-layer/annotation-nodes/rect-node.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"rect-node.d.ts","sourceRoot":"","sources":["../../../../../src/components/layers/design-layer/annotation-nodes/rect-node.tsx"],"names":[],"mappings":"AAGA,4BAA4B;AAC5B,OAAO,EAAE,uBAAuB,EAAE,MAAM,6BAA6B,CAAC;AACtE,OAAO,EACL,gBAAgB,EAEjB,MAAM,4BAA4B,CAAC;AAEpC,UAAU,aAAc,SAAQ,gBAAgB;IAC9C,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,gBAAgB,EAAE,uBAAuB,CAAC;IAC1C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACpB;AAED,QAAA,MAAM,QAAQ,GAAI,sNAsBf,aAAa,4CA0Bf,CAAC;AAEF,eAAe,QAAQ,CAAC"}

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

@@ -1,8 +1,11 @@
-import _extends from "@babel/runtime/helpers/extends";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 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"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import { Rect } from 'react-konva';
 import { nodesCommonDefaults } from "../nodes-common-prop-types";
+import { jsx as _jsx } from "react/jsx-runtime";
 var RectNode = function RectNode(_ref) {
   var id = _ref.id,
     name = _ref.name,
@@ -40,7 +43,7 @@ var RectNode = function RectNode(_ref) {
     _ref$cornerRadius = _ref.cornerRadius,
     cornerRadius = _ref$cornerRadius === void 0 ? 0 : _ref$cornerRadius,
     otherProps = _objectWithoutProperties(_ref, _excluded);
-  return React.createElement(Rect, _extends({
+  return _jsx(Rect, _objectSpread(_objectSpread({
     id: id,
     name: name,
     rotation: rotation,
@@ -60,6 +63,6 @@ var RectNode = function RectNode(_ref) {
     height: height,
     opacity: opacity,
     cornerRadius: cornerRadius
-  }, annotationEvents, otherProps));
+  }, annotationEvents), otherProps));
 };
 export default RectNode;

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

@@ -0,0 +1,21 @@
+/** Internal Dependencies */
+import { AnnotationEventHandlers } from 'hooks/use-annotation-events';
+import { NodesCommonProps } from '../nodes-common-prop-types';
+interface TextNodeProps extends NodesCommonProps {
+    x: number;
+    y: number;
+    annotationEvents: AnnotationEventHandlers;
+    width?: number;
+    height?: number;
+    text?: string;
+    fontFamily?: string;
+    fontSize?: number;
+    fontStyle?: string;
+    fill?: string;
+    letterSpacing?: number;
+    lineHeight?: number;
+    align?: string;
+}
+declare const TextNode: ({ 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, ...otherProps }: TextNodeProps) => import("react/jsx-runtime").JSX.Element;
+export default TextNode;
+//# sourceMappingURL=text-node.d.ts.map

package/lib/components/layers/design-layer/annotation-nodes/text-node.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"text-node.d.ts","sourceRoot":"","sources":["../../../../../src/components/layers/design-layer/annotation-nodes/text-node.tsx"],"names":[],"mappings":"AAGA,4BAA4B;AAC5B,OAAO,EAAE,uBAAuB,EAAE,MAAM,6BAA6B,CAAC;AACtE,OAAO,EACL,gBAAgB,EAEjB,MAAM,4BAA4B,CAAC;AAEpC,UAAU,aAAc,SAAQ,gBAAgB;IAC9C,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,gBAAgB,EAAE,uBAAuB,CAAC;IAC1C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,QAAA,MAAM,QAAQ,GAAI,iRA4Bf,aAAa,4CAgCf,CAAC;AAEF,eAAe,QAAQ,CAAC"}

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

@@ -1,8 +1,11 @@
-import _extends from "@babel/runtime/helpers/extends";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 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"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import { Text } from 'react-konva';
 import { nodesCommonDefaults } from "../nodes-common-prop-types";
+import { jsx as _jsx } from "react/jsx-runtime";
 var TextNode = function TextNode(_ref) {
   var id = _ref.id,
     name = _ref.name,
@@ -49,7 +52,7 @@ var TextNode = function TextNode(_ref) {
     _ref$align = _ref.align,
     align = _ref$align === void 0 ? 'left' : _ref$align,
     otherProps = _objectWithoutProperties(_ref, _excluded);
-  return React.createElement(Text, _extends({
+  return _jsx(Text, _objectSpread(_objectSpread({
     id: id,
     name: name,
     rotation: rotation,
@@ -75,6 +78,6 @@ var TextNode = function TextNode(_ref) {
     y: y,
     width: width,
     height: height
-  }, annotationEvents, otherProps));
+  }, annotationEvents), otherProps));
 };
 export default TextNode;

package/lib/components/layers/design-layer/index.d.ts

@@ -0,0 +1,3 @@
+declare const DesignLayer: () => import("react/jsx-runtime").JSX.Element | null;
+export default DesignLayer;
+//# sourceMappingURL=index.d.ts.map

package/lib/components/layers/design-layer/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/layers/design-layer/index.tsx"],"names":[],"mappings":"AAqBA,QAAA,MAAM,WAAW,sDAyRhB,CAAC;AAEF,eAAe,WAAW,CAAC"}

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

@@ -1,4 +1,3 @@
-import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
@@ -15,6 +14,7 @@ import getSizeAfterRotation from "../../../utils/get-size-after-rotation";
 import getCenterRotatedPoint from "../../../utils/get-center-rotated-point";
 import AnnotationNodes from "./annotation-nodes";
 import PreviewGroup from "./preview-group";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 var CANVAS_TO_IMG_SPACING = getProperImageToCanvasSpacing();
 var MIN_SPACED_WIDTH = 10;
 var DesignLayer = function DesignLayer() {
@@ -157,7 +157,7 @@ var DesignLayer = function DesignLayer() {
   var yPoint = isCurrentlyCropping ? yPointNoResizeNoCrop : yPointAfterCrop;
   var finalScaleX = (isCurrentlyCropping ? 1 : resizedX) * scaleAfterRotation;
   var finalScaleY = (isCurrentlyCropping ? 1 : resizedY) * scaleAfterRotation;
-  return React.createElement(Layer, {
+  return _jsxs(Layer, {
     id: DESIGN_LAYER_ID,
     ref: designLayerRef,
     xPadding: xPoint,
@@ -169,34 +169,35 @@ var DesignLayer = function DesignLayer() {
     scaleX: finalScaleX,
     scaleY: finalScaleY,
     rotation: isCurrentlyCropping ? 0 : rotation,
-    clipFunc: clipFunc
-  }, !isSaving && React.createElement(Rect, {
-    x: isFlippedX ? scaledSpacedOriginalImg.width : 0,
-    y: isFlippedY ? scaledSpacedOriginalImg.height : 0,
-    fill: backgroundColor,
-    fillPatternImage: backgroundImage,
-    fillPatternRepeat: "repeat",
-    width: scaledSpacedOriginalImg.width,
-    height: scaledSpacedOriginalImg.height,
-    listening: false,
-    scaleX: isFlippedX ? -1 : 1,
-    scaleY: isFlippedY ? -1 : 1
-  }), React.createElement(Image, _extends({
-    id: IMAGE_NODE_ID,
-    image: originalImage,
-    width: scaledSpacedOriginalImg.width,
-    height: scaledSpacedOriginalImg.height,
-    offsetX: scaledSpacedOriginalImg.width / 2,
-    offsetY: scaledSpacedOriginalImg.height / 2,
-    x: scaledSpacedOriginalImg.width / 2,
-    y: scaledSpacedOriginalImg.height / 2,
-    listening: false,
-    filters: finetunesAndFilter,
-    ref: imageNodeRef,
-    scaleX: isFlippedX ? -1 : 1,
-    scaleY: isFlippedY ? -1 : 1
-  }, finetunesProps)), React.createElement(AnnotationNodes, null), React.createElement(PreviewGroup, {
-    ref: previewGroupRef
-  }));
+    clipFunc: clipFunc,
+    children: [!isSaving && _jsx(Rect, {
+      x: isFlippedX ? scaledSpacedOriginalImg.width : 0,
+      y: isFlippedY ? scaledSpacedOriginalImg.height : 0,
+      fill: backgroundColor,
+      fillPatternImage: backgroundImage,
+      fillPatternRepeat: "repeat",
+      width: scaledSpacedOriginalImg.width,
+      height: scaledSpacedOriginalImg.height,
+      listening: false,
+      scaleX: isFlippedX ? -1 : 1,
+      scaleY: isFlippedY ? -1 : 1
+    }), _jsx(Image, _objectSpread({
+      id: IMAGE_NODE_ID,
+      image: originalImage,
+      width: scaledSpacedOriginalImg.width,
+      height: scaledSpacedOriginalImg.height,
+      offsetX: scaledSpacedOriginalImg.width / 2,
+      offsetY: scaledSpacedOriginalImg.height / 2,
+      x: scaledSpacedOriginalImg.width / 2,
+      y: scaledSpacedOriginalImg.height / 2,
+      listening: false,
+      filters: finetunesAndFilter,
+      ref: imageNodeRef,
+      scaleX: isFlippedX ? -1 : 1,
+      scaleY: isFlippedY ? -1 : 1
+    }, finetunesProps)), _jsx(AnnotationNodes, {}), _jsx(PreviewGroup, {
+      ref: previewGroupRef
+    })]
+  });
 };
 export default DesignLayer;

package/lib/components/layers/design-layer/nodes-common-prop-types.d.ts

@@ -0,0 +1,45 @@
+export interface NodesCommonProps {
+    id: string;
+    name: string;
+    rotation?: number;
+    scaleX?: number;
+    scaleY?: number;
+    stroke?: string;
+    strokeWidth?: number;
+    shadowOffsetX?: number;
+    shadowOffsetY?: number;
+    shadowBlur?: number;
+    shadowColor?: string;
+    shadowOpacity?: number;
+    opacity?: number;
+}
+export declare const nodesCommonDefaults: {
+    rotation: number;
+    scaleX: number;
+    scaleY: number;
+    stroke: undefined;
+    strokeWidth: undefined;
+    shadowOffsetX: undefined;
+    shadowOffsetY: undefined;
+    shadowBlur: undefined;
+    shadowColor: undefined;
+    shadowOpacity: undefined;
+    opacity: number;
+};
+declare const _default: {
+    defaults: {
+        rotation: number;
+        scaleX: number;
+        scaleY: number;
+        stroke: undefined;
+        strokeWidth: undefined;
+        shadowOffsetX: undefined;
+        shadowOffsetY: undefined;
+        shadowBlur: undefined;
+        shadowColor: undefined;
+        shadowOpacity: undefined;
+        opacity: number;
+    };
+};
+export default _default;
+//# sourceMappingURL=nodes-common-prop-types.d.ts.map

package/lib/components/layers/design-layer/nodes-common-prop-types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"nodes-common-prop-types.d.ts","sourceRoot":"","sources":["../../../../src/components/layers/design-layer/nodes-common-prop-types.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,gBAAgB;IAC/B,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,eAAO,MAAM,mBAAmB;;;;;;;;;;;;CAY/B,CAAC;;;;;;;;;;;;;;;;AAEF,wBAAiD"}

package/lib/components/layers/design-layer/preview-group.d.ts

@@ -0,0 +1,3 @@
+declare const _default: import("react").ForwardRefExoticComponent<Omit<import("konva/lib/Group").GroupConfig, "ref"> & import("react").RefAttributes<import("konva/lib/Group").Group>>;
+export default _default;
+//# sourceMappingURL=preview-group.d.ts.map

package/lib/components/layers/design-layer/preview-group.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"preview-group.d.ts","sourceRoot":"","sources":["../../../../src/components/layers/design-layer/preview-group.tsx"],"names":[],"mappings":";AAWA,wBAAwE"}

package/lib/components/layers/design-layer/preview-group.js

@@ -1,8 +1,11 @@
-import _extends from "@babel/runtime/helpers/extends";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import { forwardRef } from 'react';
 import { Group } from 'react-konva';
+import { jsx as _jsx } from "react/jsx-runtime";
 var PreviewGroup = function PreviewGroup(props, ref) {
-  return React.createElement(Group, _extends({
+  return _jsx(Group, _objectSpread({
     ref: ref
   }, props));
 };

package/lib/components/layers/index.d.ts

@@ -0,0 +1,3 @@
+export { default as DesignLayer } from './design-layer';
+export { default as TransformersLayer } from './transformers-layer';
+//# sourceMappingURL=index.d.ts.map

package/lib/components/layers/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/layers/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAExD,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,sBAAsB,CAAC"}

package/lib/components/layers/transformers-layer/crop-transformer.d.ts

@@ -0,0 +1,3 @@
+declare const CropTransformer: () => import("react/jsx-runtime").JSX.Element | null;
+export default CropTransformer;
+//# sourceMappingURL=crop-transformer.d.ts.map

package/lib/components/layers/transformers-layer/crop-transformer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"crop-transformer.d.ts","sourceRoot":"","sources":["../../../../src/components/layers/transformers-layer/crop-transformer.tsx"],"names":[],"mappings":"AA2BA,QAAA,MAAM,eAAe,sDA2SpB,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/lib/components/layers/transformers-layer/crop-transformer.js

@@ -1,4 +1,3 @@
-import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
@@ -10,6 +9,7 @@ import { useStore } from "../../../hooks";
 import { CUSTOM_CROP, ELLIPSE_CROP, FEEDBACK_STATUSES, ORIGINAL_CROP, TOOLS_IDS } from "../../../utils/constants";
 import TextNode from "../design-layer/annotation-nodes/text-node";
 import { boundDragging, boundResizing } from "./transformers-layer.utils";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 var noEffectTextDimensions = {
   width: 200,
   height: 100
@@ -184,65 +184,67 @@ var CropTransformer = function CropTransformer() {
     onTransformEnd: lockCropAreaAt ? undefined : saveCropFromEvent,
     draggable: !lockCropAreaAt
   };
-  return React.createElement(React.Fragment, null, React.createElement(Image, {
-    image: originalImage,
-    x: isFlippedX ? shownImageDimensions.width : 0,
-    y: isFlippedY ? shownImageDimensions.height : 0,
-    width: shownImageDimensions.width,
-    height: shownImageDimensions.height,
-    filters: [Konva.Filters.Blur, Konva.Filters.Brighten],
-    blurRadius: 10,
-    brightness: -0.3,
-    scaleX: isFlippedX ? -1 : 1,
-    scaleY: isFlippedY ? -1 : 1,
-    ref: tmpImgNodeRef
-  }), isEllipse ? React.createElement(Ellipse, _extends({}, baseCropShapeProps, {
-    ref: cropEllipseRef,
-    radiusX: (width !== null && width !== void 0 ? width : 0) / 2,
-    radiusY: (height !== null && height !== void 0 ? height : 0) / 2,
-    offset: {
-      x: -(width !== null && width !== void 0 ? width : 0) / 2,
-      y: -(height !== null && height !== void 0 ? height : 0) / 2
-    }
-  })) : React.createElement(Rect, _extends({}, baseCropShapeProps, {
-    ref: cropRectRef,
-    width: crop.noEffect ? 0 : width,
-    height: crop.noEffect ? 0 : height
-  })), crop.noEffect && React.createElement(TextNode, {
-    name: "Text",
-    id: "no-preview-text-node",
-    text: t('cropItemNoEffect'),
-    x: shownImageDimensions.width / 2 - noEffectTextDimensions.width / 2,
-    y: shownImageDimensions.height / 2 - noEffectTextDimensions.height / 2,
-    fontSize: 20,
-    fill: "#ffffff",
-    stroke: "#ff0000",
-    strokeWidth: 0.2,
-    shadowColor: "#ff0000",
-    shadowBlur: 10,
-    annotationEvents: {},
-    align: "center",
-    width: noEffectTextDimensions.width,
-    height: noEffectTextDimensions.height
-  }), React.createElement(Transformer, {
-    centeredScaling: false,
-    flipEnabled: false,
-    rotateEnabled: false,
-    anchorSize: 14,
-    anchorCornerRadius: 7,
-    enabledAnchors: enabledAnchors,
-    ignoreStroke: false,
-    anchorStroke: theme.palette.primary.main,
-    anchorFill: theme.palette.common.white,
-    anchorStrokeWidth: 2,
-    borderStroke: theme.palette.primary.main,
-    borderStrokeWidth: 2,
-    borderDash: [4],
-    keepRatio: !isCustom || !isEllipse,
-    ref: cropTransformerRef,
-    boundBoxFunc: function boundBoxFunc(absOldBox, absNewBox) {
-      return boundResizing(absOldBox, absNewBox, shownImageDimensionsRef.current, isCustom || isEllipse ? undefined : getProperCropRatio(), cropSettings);
-    }
-  }));
+  return _jsxs(_Fragment, {
+    children: [_jsx(Image, {
+      image: originalImage,
+      x: isFlippedX ? shownImageDimensions.width : 0,
+      y: isFlippedY ? shownImageDimensions.height : 0,
+      width: shownImageDimensions.width,
+      height: shownImageDimensions.height,
+      filters: [Konva.Filters.Blur, Konva.Filters.Brighten],
+      blurRadius: 10,
+      brightness: -0.3,
+      scaleX: isFlippedX ? -1 : 1,
+      scaleY: isFlippedY ? -1 : 1,
+      ref: tmpImgNodeRef
+    }), isEllipse ? _jsx(Ellipse, _objectSpread(_objectSpread({}, baseCropShapeProps), {}, {
+      ref: cropEllipseRef,
+      radiusX: (width !== null && width !== void 0 ? width : 0) / 2,
+      radiusY: (height !== null && height !== void 0 ? height : 0) / 2,
+      offset: {
+        x: -(width !== null && width !== void 0 ? width : 0) / 2,
+        y: -(height !== null && height !== void 0 ? height : 0) / 2
+      }
+    })) : _jsx(Rect, _objectSpread(_objectSpread({}, baseCropShapeProps), {}, {
+      ref: cropRectRef,
+      width: crop.noEffect ? 0 : width,
+      height: crop.noEffect ? 0 : height
+    })), crop.noEffect && _jsx(TextNode, {
+      name: "Text",
+      id: "no-preview-text-node",
+      text: t('cropItemNoEffect'),
+      x: shownImageDimensions.width / 2 - noEffectTextDimensions.width / 2,
+      y: shownImageDimensions.height / 2 - noEffectTextDimensions.height / 2,
+      fontSize: 20,
+      fill: "#ffffff",
+      stroke: "#ff0000",
+      strokeWidth: 0.2,
+      shadowColor: "#ff0000",
+      shadowBlur: 10,
+      annotationEvents: {},
+      align: "center",
+      width: noEffectTextDimensions.width,
+      height: noEffectTextDimensions.height
+    }), _jsx(Transformer, {
+      centeredScaling: false,
+      flipEnabled: false,
+      rotateEnabled: false,
+      anchorSize: 14,
+      anchorCornerRadius: 7,
+      enabledAnchors: enabledAnchors,
+      ignoreStroke: false,
+      anchorStroke: theme.palette.primary.main,
+      anchorFill: theme.palette.common.white,
+      anchorStrokeWidth: 2,
+      borderStroke: theme.palette.primary.main,
+      borderStrokeWidth: 2,
+      borderDash: [4],
+      keepRatio: !isCustom || !isEllipse,
+      ref: cropTransformerRef,
+      boundBoxFunc: function boundBoxFunc(absOldBox, absNewBox) {
+        return boundResizing(absOldBox, absNewBox, shownImageDimensionsRef.current, isCustom || isEllipse ? undefined : getProperCropRatio(), cropSettings);
+      }
+    })]
+  });
 };
 export default CropTransformer;

package/lib/components/layers/transformers-layer/index.d.ts

@@ -0,0 +1,3 @@
+declare const TransformersLayer: () => import("react/jsx-runtime").JSX.Element;
+export default TransformersLayer;
+//# sourceMappingURL=index.d.ts.map

package/lib/components/layers/transformers-layer/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/layers/transformers-layer/index.tsx"],"names":[],"mappings":"AASA,QAAA,MAAM,iBAAiB,+CAatB,CAAC;AAEF,eAAe,iBAAiB,CAAC"}

package/lib/components/layers/transformers-layer/index.js

@@ -3,14 +3,16 @@ import { useStore } from "../../../hooks";
 import { TOOLS_IDS, TRANSFORMERS_LAYER_ID } from "../../../utils/constants";
 import CropTransformer from "./crop-transformer";
 import NodesTransformer from "./nodes-transformer";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 var TransformersLayer = function TransformersLayer() {
   var _useStore = useStore(),
     toolId = _useStore.toolId,
     shownImageDimensions = _useStore.shownImageDimensions;
-  return React.createElement(Layer, {
+  return _jsxs(Layer, {
     id: TRANSFORMERS_LAYER_ID,
     x: shownImageDimensions.abstractX || 0,
-    y: shownImageDimensions.abstractY || 0
-  }, React.createElement(NodesTransformer, null), toolId === TOOLS_IDS.CROP && React.createElement(CropTransformer, null));
+    y: shownImageDimensions.abstractY || 0,
+    children: [_jsx(NodesTransformer, {}), toolId === TOOLS_IDS.CROP && _jsx(CropTransformer, {})]
+  });
 };
 export default TransformersLayer;

package/lib/components/layers/transformers-layer/nodes-transformer.d.ts

@@ -0,0 +1,3 @@
+declare const NodesTransformer: () => import("react/jsx-runtime").JSX.Element;
+export default NodesTransformer;
+//# sourceMappingURL=nodes-transformer.d.ts.map

package/lib/components/layers/transformers-layer/nodes-transformer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"nodes-transformer.d.ts","sourceRoot":"","sources":["../../../../src/components/layers/transformers-layer/nodes-transformer.tsx"],"names":[],"mappings":"AAcA,QAAA,MAAM,gBAAgB,+CAmErB,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

package/lib/components/layers/transformers-layer/nodes-transformer.js

@@ -3,6 +3,7 @@ import { Transformer } from 'react-konva';
 import { CHANGE_POINTER_ICON, ENABLE_TEXT_CONTENT_EDIT } from "../../../actions";
 import { useStore } from "../../../hooks";
 import { NODES_TRANSFORMER_ID, POINTER_ICONS, TOOLS_IDS } from "../../../utils/constants";
+import { jsx as _jsx } from "react/jsx-runtime";
 var NodesTransformer = function NodesTransformer() {
   var _selections$0$attrs$p;
   var _useStore = useStore(),
@@ -45,7 +46,7 @@ var NodesTransformer = function NodesTransformer() {
       });
     }
   };
-  return React.createElement(Transformer, {
+  return _jsx(Transformer, {
     id: NODES_TRANSFORMER_ID,
     centeredScaling: false,
     rotationSnaps: [0, 45, 90, 135, 180, 225, 270, 315],

package/lib/components/layers/transformers-layer/transformers-layer.utils.d.ts

@@ -0,0 +1,42 @@
+import { Box } from 'konva/lib/shapes/Transformer';
+import type { Dimensions } from 'types/common';
+interface AnnotationDimensions {
+    x: number;
+    y: number;
+    width?: number;
+    height?: number;
+    radiusX?: number;
+    radiusY?: number;
+}
+interface AllowedArea {
+    width: number;
+    height: number;
+    abstractX: number;
+    abstractY: number;
+    scaledBy: number;
+}
+interface CropRestrictions {
+    noScale?: boolean;
+    minWidth?: number;
+    maxWidth?: number;
+    minHeight?: number;
+    maxHeight?: number;
+    lockCropAreaAt?: string;
+}
+export declare const boundDragging: (newDimensions: AnnotationDimensions, allowedArea: {
+    width: number;
+    height: number;
+}) => {
+    x: number;
+    y: number;
+};
+export declare const getPositionByPlaceLabel: (position: string, allowedArea: {
+    width: number;
+    height: number;
+}, currentDimensions: Dimensions) => {
+    x: number;
+    y: number;
+};
+export declare const boundResizing: (oldDimensions: Box, newDimensions: Box, allowedArea: AllowedArea, ratio: number | undefined, cropRestrictions?: CropRestrictions) => Box;
+export {};
+//# sourceMappingURL=transformers-layer.utils.d.ts.map

package/lib/components/layers/transformers-layer/transformers-layer.utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"transformers-layer.utils.d.ts","sourceRoot":"","sources":["../../../../src/components/layers/transformers-layer/transformers-layer.utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,8BAA8B,CAAC;AAInD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE/C,UAAU,oBAAoB;IAC5B,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,UAAU,WAAW;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,MAAM,CAAC;CAClB;AAED,UAAU,gBAAgB;IACxB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAED,eAAO,MAAM,aAAa,GACxB,eAAe,oBAAoB,EACnC,aAAa;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAE,KAC7C;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CASxB,CAAC;AAEF,eAAO,MAAM,uBAAuB,GAClC,UAAU,MAAM,EAChB,aAAa;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAE,EAC9C,mBAAmB,UAAU,KAC5B;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CAoBxB,CAAC;AAEF,eAAO,MAAM,aAAa,GACxB,eAAe,GAAG,EAClB,eAAe,GAAG,EAClB,aAAa,WAAW,EACxB,OAAO,MAAM,GAAG,SAAS,EACzB,mBAAkB,gBAAqB,KACtC,GA0GF,CAAC"}