@solostylist/image-editor 1.0.15 → 1.0.19

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/app/index.tsx"],"names":[],"mappings":";AA0aA,wBAAyB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/app/index.tsx"],"names":[],"mappings":";AAubA,wBAAyB"}

package/lib/components/app/index.js

@@ -5,9 +5,10 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 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 _regeneratorRuntime from "@babel/runtime/regenerator";
-import { SFlexBox } from '@solostylist/ui-kit';
+import { SFlexBox } from '@solostylist/ui-kit/s-flex-box';
+import SFileDropzone from '@solostylist/ui-kit/s-file-dropzone';
 import { memo, useCallback, useEffect, useRef, useState } from 'react';
-import { CircularProgress } from '@mui/material';
+import { Box, CircularProgress } from '@mui/material';
 import { HIDE_LOADER, RESET, SET_FEEDBACK, SET_ORIGINAL_IMAGE, SET_SHOWN_TABS_MENU, SHOW_LOADER, UPDATE_STATE } from "../../actions";
 import FeedbackPopup from "../feedback-popup";
 import MainCanvas from "../main-canvas";
@@ -24,7 +25,7 @@ import isSameImage from "../../utils/is-same-image";
 import loadImage from "../../utils/load-image";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 var App = function App() {
-  var _ref3, _ref4, _ref5;
+  var _ref3;
   var _useStore = useStore(),
     config = _useStore.config,
     isLoadingGlobally = _useStore.isLoadingGlobally,
@@ -42,7 +43,6 @@ var App = function App() {
     updateStateFnRef = config.updateStateFnRef,
     noCrossOrigin = config.noCrossOrigin,
     resetOnImageSourceChange = config.resetOnImageSourceChange,
-    containerHeight = config.containerHeight,
     editorHeight = config.editorHeight,
     toolbarHeight = config.toolbarHeight,
     rootSx = config.rootSx,
@@ -177,6 +177,29 @@ var App = function App() {
       uploadInputRef.current.value = '';
     }
   };
+  var renderDefaultEmptyState = function renderDefaultEmptyState() {
+    return _jsx(SFlexBox, {
+      alignItems: 'center',
+      justifyContent: 'center',
+      width: '100%',
+      children: _jsx(Box, {
+        sx: {
+          width: '100%',
+          maxWidth: 600
+        },
+        children: _jsx(SFileDropzone, {
+          accept: {
+            'image/*': []
+          },
+          maxFiles: 1,
+          multiple: false,
+          onDrop: function onDrop(acceptedFiles) {
+            handleUploadFiles(acceptedFiles);
+          }
+        })
+      })
+    });
+  };
   var updateDesignStateWithLoadableOne = function updateDesignStateWithLoadableOne() {
     if (loadableDesignState && Object.keys(loadableDesignState).length > 0) {
       dispatch({
@@ -316,7 +339,9 @@ var App = function App() {
               children: renderEmptyState({
                 onUpload: handleUploadFiles
               })
-            }) : _jsx(_Fragment, {})
+            }) : _jsx(_Fragment, {
+              children: renderDefaultEmptyState()
+            })
           }), originalImage && !showCanvasOnly && _jsx(ToolsBar, {})]
         })]
       })]
@@ -332,9 +357,9 @@ var App = function App() {
       backgroundSize: '12px 12px',
       flexDirection: 'column',
       alignItems: 'center',
-      height: (_ref3 = editorHeight !== null && editorHeight !== void 0 ? editorHeight : containerHeight) !== null && _ref3 !== void 0 ? _ref3 : '70vh',
-      maxHeight: (_ref4 = editorHeight !== null && editorHeight !== void 0 ? editorHeight : containerHeight) !== null && _ref4 !== void 0 ? _ref4 : '70vh',
-      width: (_ref5 = observePluginContainerSize ? rootSize.width : undefined) !== null && _ref5 !== void 0 ? _ref5 : '100%',
+      height: editorHeight !== null && editorHeight !== void 0 ? editorHeight : '70vh',
+      maxHeight: editorHeight !== null && editorHeight !== void 0 ? editorHeight : '70vh',
+      width: (_ref3 = observePluginContainerSize ? rootSize.width : undefined) !== null && _ref3 !== void 0 ? _ref3 : '100%',
       maxWidth: '100%',
       overflow: 'hidden',
       position: 'relative',

package/lib/components/assembly-point/index.d.ts

@@ -1,8 +1,7 @@
 /** External Dependencies */
 import React from 'react';
 import { ImageEditorConfig } from 'types/config';
-interface AssemblyPointProps extends ImageEditorConfig {
-}
+type AssemblyPointProps = ImageEditorConfig;
 declare const _default: React.MemoExoticComponent<(props: AssemblyPointProps) => import("react/jsx-runtime").JSX.Element>;
 export default _default;
 //# sourceMappingURL=index.d.ts.map

package/lib/components/assembly-point/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/assembly-point/index.tsx"],"names":[],"mappings":"AAAA,4BAA4B;AAC5B,OAAO,KAA0B,MAAM,OAAO,CAAC;AAS/C,OAAO,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AAEjD,UAAU,kBAAmB,SAAQ,iBAAiB;CAAG;0DAE3B,kBAAkB;AAkBhD,wBAAmC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/assembly-point/index.tsx"],"names":[],"mappings":"AAAA,4BAA4B;AAC5B,OAAO,KAA0B,MAAM,OAAO,CAAC;AAS/C,OAAO,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AAEjD,KAAK,kBAAkB,GAAG,iBAAiB,CAAC;0DAEd,kBAAkB;AAkBhD,wBAAmC"}

package/lib/components/assembly-point/index.js

@@ -1,5 +1,5 @@
 import React, { useEffect, memo } from 'react';
-import { SThemeProvider } from '@solostylist/ui-kit';
+import { SThemeProvider } from '@solostylist/ui-kit/s-theme-provider';
 import App from "../app";
 import { AppProvider } from "../../context";
 import defaultConfig from "../../context/default-config";

package/lib/components/common/annotation-options/index.js

@@ -11,7 +11,7 @@ import Menu from '@mui/material/Menu';
 import Typography from '@mui/material/Typography';
 import { useStore } from "../../../hooks";
 import { useCallback, useMemo, useState } from 'react';
-import { SFlexBox } from '@solostylist/ui-kit';
+import { SFlexBox } from '@solostylist/ui-kit/s-flex-box';
 import ColorInput from "../color-input";
 import SIconButtonWrapper from "../icon-wrapper";
 import { POPPABLE_OPTIONS } from "./annotation-options.constants";

package/lib/components/common/color-picker-modal/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/common/color-picker-modal/index.tsx"],"names":[],"mappings":"AASA,UAAU,qBAAqB;IAC7B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,OAAO,CAAC,EAAE,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,IAAI,CAAC;IACnC,OAAO,CAAC,EAAE,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,IAAI,CAAC;CACpC;AAED,QAAA,MAAM,gBAAgB,GAAI,qDAMvB,qBAAqB,mDAkEvB,CAAC;AAEF,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/common/color-picker-modal/index.tsx"],"names":[],"mappings":"AAWA,UAAU,qBAAqB;IAC7B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,OAAO,CAAC,EAAE,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,IAAI,CAAC;IACnC,OAAO,CAAC,EAAE,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,IAAI,CAAC;CACpC;AAED,QAAA,MAAM,gBAAgB,GAAI,qDAMvB,qBAAqB,mDAyEvB,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

package/lib/components/common/color-picker-modal/index.js

@@ -1,6 +1,8 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import Box from '@mui/material/Box';
-import { SButton, SDialog, STextField } from '@solostylist/ui-kit';
+import { SButton } from '@solostylist/ui-kit/s-button';
+import { SDialog } from '@solostylist/ui-kit/s-dialog';
+import { STextField } from '@solostylist/ui-kit/s-text-field';
 import { useCallback, useState } from 'react';
 import { HexColorPicker } from 'react-colorful';
 import { useStore } from "../../../hooks";
@@ -47,6 +49,12 @@ var ColorPickerModal = function ColorPickerModal(_ref) {
     title: t('colorPickerModalTitleLabel'),
     maxWidth: "xs",
     content: _jsxs(Box, {
+      sx: {
+        '& .react-colorful__pointer': {
+          width: 22,
+          height: 22
+        }
+      },
       children: [_jsx(HexColorPicker, {
         color: currentColor,
         onChange: handleColorChange,

package/lib/components/common/icon-wrapper/index.js

@@ -3,7 +3,7 @@ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProper
 var _excluded = ["children", "active", "border", "onClick", "title", "className"];
 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 { SIconButton } from '@solostylist/ui-kit';
+import { SIconButton } from '@solostylist/ui-kit/s-icon-button';
 import { jsx as _jsx } from "react/jsx-runtime";
 var SIconButtonWrapper = function SIconButtonWrapper(_ref) {
   var children = _ref.children,

package/lib/components/common/image-preview-tile/index.js

@@ -3,7 +3,7 @@ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProper
 var _excluded = ["src", "alt", "onClick", "selected", "size", "sx"];
 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 { SFlexBox } from '@solostylist/ui-kit';
+import { SFlexBox } from '@solostylist/ui-kit/s-flex-box';
 import { jsx as _jsx } from "react/jsx-runtime";
 var ImagePreviewTile = function ImagePreviewTile(_ref) {
   var src = _ref.src,

package/lib/components/common/slider/index.js

@@ -5,7 +5,7 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
 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 MuiSlider from '@mui/material/Slider';
 import { Box, Typography } from '@mui/material';
-import { SFlexBox } from '@solostylist/ui-kit';
+import { SFlexBox } from '@solostylist/ui-kit/s-flex-box';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 var Slider = function Slider(_ref) {
   var annotation = _ref.annotation,

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/layers/design-layer/annotation-nodes/index.tsx"],"names":[],"mappings":"AAQA,QAAA,MAAM,eAAe,iDAgBpB,CAAC;AAEF,eAAe,eAAe,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/layers/design-layer/annotation-nodes/index.tsx"],"names":[],"mappings":"AAQA,QAAA,MAAM,eAAe,iDAsBpB,CAAC;AAEF,eAAe,eAAe,CAAC"}

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

@@ -1,4 +1,4 @@
-import { useMemo } from 'react';
+import { useEffect, useMemo } from 'react';
 import { useAnnotationEvents, useStore } from "../../../../hooks";
 import MemoizedAnnotation from "./memoized-annotation";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -7,8 +7,14 @@ var AnnotationNodes = function AnnotationNodes() {
     _useStore$annotations = _useStore.annotations,
     annotations = _useStore$annotations === void 0 ? {} : _useStore$annotations,
     _useStore$selectionsI = _useStore.selectionsIds,
-    selectionsIds = _useStore$selectionsI === void 0 ? [] : _useStore$selectionsI;
+    selectionsIds = _useStore$selectionsI === void 0 ? [] : _useStore$selectionsI,
+    designLayer = _useStore.designLayer;
   var annotationEvents = useAnnotationEvents();
+  useEffect(function () {
+    if (designLayer) {
+      designLayer.batchDraw();
+    }
+  }, [annotations, selectionsIds, designLayer]);
   return useMemo(function () {
     return Object.values(annotations).map(function (annotation) {
       return _jsx(MemoizedAnnotation, {

package/lib/components/main-canvas/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/main-canvas/index.tsx"],"names":[],"mappings":"AAaA,QAAA,MAAM,UAAU,+CAqLf,CAAC;AAEF,eAAe,UAAU,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/main-canvas/index.tsx"],"names":[],"mappings":"AAaA,QAAA,MAAM,UAAU,+CA+Gf,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/lib/components/main-canvas/index.js

@@ -5,11 +5,10 @@ import { DesignLayer, TransformersLayer } from "../layers";
 import NodeControls from "../node-controls";
 import { AppProviderOverridenValue } from "../../context";
 import { useStore } from "../../hooks";
-import { TOOLS_IDS } from "../../utils/constants";
 import CanvasNode from "./canvas-node";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import OriginalPreviewLayer from "./original-preview-layer";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 var MainCanvas = function MainCanvas() {
-  var _providedAppContext$o;
   var providedAppContext = useStore();
   var canvasContainerRef = useRef(null);
   var contextRef = useRef(providedAppContext);
@@ -17,22 +16,18 @@ var MainCanvas = function MainCanvas() {
     contextRef.current = providedAppContext;
   });
   var setNewCanvasSize = useCallback(function (_ref) {
-    var _ctx$config$cropTopOf;
     var width = _ref.width,
       height = _ref.height;
     var ctx = contextRef.current;
     var previousCanvasWidth = ctx.canvasWidth;
     var previousCanvasHeight = ctx.canvasHeight;
-    var cropOffset = (_ctx$config$cropTopOf = ctx.config.cropTopOffset) !== null && _ctx$config$cropTopOf !== void 0 ? _ctx$config$cropTopOf : 56;
-    var isCropping = ctx.toolId === TOOLS_IDS.CROP;
-    var effectiveHeight = isCropping ? height - cropOffset : height;
-    var hasSizeChanged = width !== previousCanvasWidth || effectiveHeight !== previousCanvasHeight;
+    var hasSizeChanged = width !== previousCanvasWidth || height !== previousCanvasHeight;
     if (!hasSizeChanged) return;
     ctx.dispatch({
       type: SET_CANVAS_SIZE,
       payload: {
         canvasWidth: width,
-        canvasHeight: effectiveHeight
+        canvasHeight: height
       }
     });
   }, []);
@@ -57,7 +52,6 @@ var MainCanvas = function MainCanvas() {
   }, [setNewCanvasSize]);
   var _providedAppContext$c = providedAppContext.config,
     canvasAreaHeight = _providedAppContext$c.canvasAreaHeight,
-    showCanvasCenter = _providedAppContext$c.showCanvasCenter,
     cropTopOffset = _providedAppContext$c.cropTopOffset,
     defaultToolId = _providedAppContext$c.defaultToolId,
     toolId = providedAppContext.toolId,
@@ -91,65 +85,12 @@ var MainCanvas = function MainCanvas() {
       flexGrow: 1,
       ref: canvasContainerRef,
       width: '100%',
-      children: [!providedAppContext.textIdOfEditableContent && _jsx(NodeControls, {}), providedAppContext.isShowOriginalImage && _jsx("img", {
-        alt: "",
-        style: {
-          maxWidth: '98%',
-          maxHeight: '98%',
-          position: 'absolute',
-          top: '50%',
-          left: '50%',
-          transform: 'translate(-50%, -50%)',
-          zIndex: 2
-        },
-        src: (_providedAppContext$o = providedAppContext.originalImage) === null || _providedAppContext$o === void 0 ? void 0 : _providedAppContext$o.src
-      }), showCanvasCenter && _jsxs(Box, {
-        sx: {
-          position: 'absolute',
-          top: '50%',
-          left: '50%',
-          transform: 'translate(-50%, -50%)',
-          zIndex: 3,
-          pointerEvents: 'none',
-          width: 24,
-          height: 24
-        },
-        children: [_jsx(Box, {
-          sx: {
-            position: 'absolute',
-            top: '50%',
-            left: 0,
-            right: 0,
-            height: '1px',
-            backgroundColor: 'rgba(255, 0, 0, 0.7)',
-            transform: 'translateY(-50%)'
-          }
-        }), _jsx(Box, {
-          sx: {
-            position: 'absolute',
-            left: '50%',
-            top: 0,
-            bottom: 0,
-            width: '1px',
-            backgroundColor: 'rgba(255, 0, 0, 0.7)',
-            transform: 'translateX(-50%)'
-          }
-        }), _jsx(Box, {
-          sx: {
-            position: 'absolute',
-            top: '50%',
-            left: '50%',
-            width: 6,
-            height: 6,
-            borderRadius: '50%',
-            backgroundColor: 'rgba(255, 0, 0, 0.9)',
-            transform: 'translate(-50%, -50%)'
-          }
-        })]
-      }), _jsx(CanvasNode, {
-        children: _jsxs(AppProviderOverridenValue, {
+      children: [!providedAppContext.textIdOfEditableContent && !providedAppContext.isShowOriginalImage && _jsx(NodeControls, {}), _jsx(CanvasNode, {
+        children: _jsx(AppProviderOverridenValue, {
           overridingValue: providedAppContext,
-          children: [_jsx(DesignLayer, {}), _jsx(TransformersLayer, {})]
+          children: providedAppContext.isShowOriginalImage ? _jsx(OriginalPreviewLayer, {}) : _jsxs(_Fragment, {
+            children: [_jsx(DesignLayer, {}), _jsx(TransformersLayer, {})]
+          })
         })
       })]
     })

package/lib/components/main-canvas/original-preview-layer.d.ts

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

package/lib/components/main-canvas/original-preview-layer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"original-preview-layer.d.ts","sourceRoot":"","sources":["../../../src/components/main-canvas/original-preview-layer.tsx"],"names":[],"mappings":"AAMA,QAAA,MAAM,oBAAoB,sDA4BzB,CAAC;AAEF,eAAe,oBAAoB,CAAC"}

package/lib/components/main-canvas/original-preview-layer.js

@@ -0,0 +1,26 @@
+import { Image, Layer } from 'react-konva';
+import { useStore } from "../../hooks";
+import { jsx as _jsx } from "react/jsx-runtime";
+var OriginalPreviewLayer = function OriginalPreviewLayer() {
+  var _ref, _x, _ref2, _y;
+  var _useStore = useStore(),
+    originalImage = _useStore.originalImage,
+    shownImageDimensions = _useStore.shownImageDimensions;
+  if (!originalImage || !(shownImageDimensions !== null && shownImageDimensions !== void 0 && shownImageDimensions.width) || !(shownImageDimensions !== null && shownImageDimensions !== void 0 && shownImageDimensions.height)) {
+    return null;
+  }
+  var x = (_ref = (_x = shownImageDimensions.x) !== null && _x !== void 0 ? _x : shownImageDimensions.abstractX) !== null && _ref !== void 0 ? _ref : 0;
+  var y = (_ref2 = (_y = shownImageDimensions.y) !== null && _y !== void 0 ? _y : shownImageDimensions.abstractY) !== null && _ref2 !== void 0 ? _ref2 : 0;
+  return _jsx(Layer, {
+    listening: false,
+    children: _jsx(Image, {
+      image: originalImage,
+      x: x,
+      y: y,
+      width: shownImageDimensions.width,
+      height: shownImageDimensions.height,
+      listening: false
+    })
+  });
+};
+export default OriginalPreviewLayer;

package/lib/components/node-controls/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/node-controls/index.tsx"],"names":[],"mappings":"AAiBA,QAAA,MAAM,YAAY,sDA4EjB,CAAC;AAEF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/node-controls/index.tsx"],"names":[],"mappings":"AAkBA,QAAA,MAAM,YAAY,sDA4EjB,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/lib/components/node-controls/index.js

@@ -1,6 +1,7 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import { ContentCopy, DeleteOutlined } from '@mui/icons-material';
-import { SFlexBox, SIconButton } from '@solostylist/ui-kit';
+import { SFlexBox } from '@solostylist/ui-kit/s-flex-box';
+import { SIconButton } from '@solostylist/ui-kit/s-icon-button';
 import { useEffect, useMemo, useState } from 'react';
 import { DUPLICATE_ANNOTATIONS, REMOVE_ANNOTATIONS } from "../../actions";
 import { useStore } from "../../hooks";

package/lib/components/tabs/index.js

@@ -5,7 +5,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 import ChevronLeftIcon from '@mui/icons-material/ChevronLeft';
 import ChevronRightIcon from '@mui/icons-material/ChevronRight';
 import { Box, ListItem, ListItemButton, ListItemIcon, ListItemText, Typography } from '@mui/material';
-import { SIconButton } from '@solostylist/ui-kit';
+import { SIconButton } from '@solostylist/ui-kit/s-icon-button';
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { SELECT_TAB } from "../../actions";
 import { useStore } from "../../hooks";

package/lib/components/tabs-drawer/index.js

@@ -4,7 +4,7 @@ import Box from '@mui/material/Box';
 import SwipeableDrawer from '@mui/material/SwipeableDrawer';
 import ButtonBase from '@mui/material/ButtonBase';
 import Typography from '@mui/material/Typography';
-import { SIconButton } from '@solostylist/ui-kit';
+import { SIconButton } from '@solostylist/ui-kit/s-icon-button';
 import { useStore } from "../../hooks";
 import { SELECT_TAB } from "../../actions";
 import { AVAILABLE_TABS } from "../tabs/tabs.constants";

package/lib/components/tools/crop/crop.js

@@ -2,7 +2,7 @@ import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import { CropOutlined as CropIcon } from '@mui/icons-material';
 import { Box, InputAdornment } from '@mui/material';
 import { useMemo } from 'react';
-import { SSelect } from '@solostylist/ui-kit';
+import { SSelect } from '@solostylist/ui-kit/s-select';
 import { SET_CROP, SET_RESIZE, ZOOM_CANVAS } from "../../../actions";
 import { useStore } from "../../../hooks";
 import { DEFAULT_ZOOM_FACTOR, ORIGINAL_CROP, TOOLS_IDS } from "../../../utils/constants";

package/lib/components/tools/filters/filter-item.js

@@ -4,7 +4,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 import { memo, useCallback, useEffect, useRef } from 'react';
 import { Layer, Image, Stage } from 'react-konva';
 import { Typography } from '@mui/material';
-import { SFlexBox } from '@solostylist/ui-kit';
+import { SFlexBox } from '@solostylist/ui-kit/s-flex-box';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 var MAX_FILTER_PREVIEW_WIDTH = 80;
 var MAX_FILTER_PREVIEW_HEIGHT = 60;
@@ -14,13 +14,10 @@ var FilterItem = function FilterItem(_ref) {
     applyFilter = _ref.applyFilter,
     isActive = _ref.isActive,
     image = _ref.image;
-  if (!image) {
-    return null;
-  }
   var imageNodeRef = useRef(null);
   var handleFilterApplying = useCallback(function () {
     applyFilter(filterFn);
-  }, [filterFn]);
+  }, [applyFilter, filterFn]);
   var cacheImageNode = useCallback(function () {
     if (imageNodeRef.current) {
       imageNodeRef.current.cache();
@@ -36,7 +33,10 @@ var FilterItem = function FilterItem(_ref) {
       var _imageNodeRef$current;
       (_imageNodeRef$current = imageNodeRef.current) === null || _imageNodeRef$current === void 0 || _imageNodeRef$current.clearCache();
     };
-  }, [image]);
+  }, [cacheImageNode, image]);
+  if (!image) {
+    return null;
+  }
   var imgRatio = image.width / image.height;
   var stageRatio = MAX_FILTER_PREVIEW_WIDTH / MAX_FILTER_PREVIEW_HEIGHT;
   var isWiderThanStage = imgRatio > stageRatio;

package/lib/components/tools/filters/filters.js

@@ -1,6 +1,6 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import { Box } from '@mui/material';
-import { SCarousel } from '@solostylist/ui-kit/carousel';
+import SCarousel from '@solostylist/ui-kit/s-carousel';
 import { useFilter, useStore } from "../../../hooks";
 import FilterItem from "./filter-item";
 import { AVAILABLE_FILTERS } from "./filters.constants";

package/lib/components/tools/image/images-gallery.js

@@ -1,5 +1,5 @@
 import { Popover } from '@mui/material';
-import { SFlexBox } from '@solostylist/ui-kit';
+import { SFlexBox } from '@solostylist/ui-kit/s-flex-box';
 import ImagePreviewTile from "../../common/image-preview-tile";
 import { jsx as _jsx } from "react/jsx-runtime";
 var ImagesGallery = function ImagesGallery(_ref) {

package/lib/components/tools/resize/resize.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"resize.d.ts","sourceRoot":"","sources":["../../../../src/components/tools/resize/resize.tsx"],"names":[],"mappings":"AAaA,UAAU,WAAW;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAED,UAAU,WAAW;IACnB,QAAQ,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,KAAK,IAAI,CAAC;IACpD,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AAED,QAAA,MAAM,MAAM,GAAI,6CAIb,WAAW,mDAyLb,CAAC;AAEF,eAAe,MAAM,CAAC"}
+{"version":3,"file":"resize.d.ts","sourceRoot":"","sources":["../../../../src/components/tools/resize/resize.tsx"],"names":[],"mappings":"AAeA,UAAU,WAAW;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAED,UAAU,WAAW;IACnB,QAAQ,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,KAAK,IAAI,CAAC;IACpD,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AAED,QAAA,MAAM,MAAM,GAAI,6CAIb,WAAW,mDAyLb,CAAC;AAEF,eAAe,MAAM,CAAC"}

package/lib/components/tools/resize/resize.js

@@ -2,7 +2,9 @@ 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 { Refresh, LockOutlined, LockOpenOutlined } from '@mui/icons-material';
-import { SFlexBox, SIconButton, STextField } from '@solostylist/ui-kit';
+import { SFlexBox } from '@solostylist/ui-kit/s-flex-box';
+import { SIconButton } from '@solostylist/ui-kit/s-icon-button';
+import { STextField } from '@solostylist/ui-kit/s-text-field';
 import { SET_RESIZE, ZOOM_CANVAS } from "../../../actions";
 import { useStore } from "../../../hooks";
 import { DEFAULT_ZOOM_FACTOR } from "../../../utils/constants";

package/lib/components/tools/rotate/rotate-options.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"rotate-options.d.ts","sourceRoot":"","sources":["../../../../src/components/tools/rotate/rotate-options.tsx"],"names":[],"mappings":"AAiBA,QAAA,MAAM,aAAa,+CAsGlB,CAAC;AAEF,eAAe,aAAa,CAAC"}
+{"version":3,"file":"rotate-options.d.ts","sourceRoot":"","sources":["../../../../src/components/tools/rotate/rotate-options.tsx"],"names":[],"mappings":"AAkBA,QAAA,MAAM,aAAa,+CAsGlB,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/lib/components/tools/rotate/rotate-options.js

@@ -6,7 +6,8 @@ import restrictNumber from "../../../utils/restrict-number";
 import getSizeAfterRotation from "../../../utils/get-size-after-rotation";
 import { TOOLS_IDS } from "../../../utils/constants";
 import ToolsBarItemButton from "../../tools-bar/tools-bar-item-button";
-import { SFlexBox, SIconButton } from '@solostylist/ui-kit';
+import { SFlexBox } from '@solostylist/ui-kit/s-flex-box';
+import { SIconButton } from '@solostylist/ui-kit/s-icon-button';
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 var RotateOptions = function RotateOptions() {
   var _useStore = useStore(),

package/lib/components/tools/text/text-options/text-alignment-fields.js

@@ -1,5 +1,5 @@
 import { FormatAlignCenterOutlined, FormatAlignLeftOutlined } from '@mui/icons-material';
-import { SFlexBox } from '@solostylist/ui-kit';
+import { SFlexBox } from '@solostylist/ui-kit/s-flex-box';
 import SIconButtonWrapper from "../../../common/icon-wrapper";
 import { TextAlignment } from "../../../../types/annotations";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";

package/lib/components/tools/text/text-options/text-controls.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"text-controls.d.ts","sourceRoot":"","sources":["../../../../../src/components/tools/text/text-options/text-controls.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAc,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAe/D,UAAU,iBAAiB;IAGzB,IAAI,EAAE,cAAc,GAAG;QAAE,UAAU,CAAC,EAAE,OAAO,CAAC;QAAC,SAAS,CAAC,EAAE,OAAO,CAAA;KAAE,CAAC;IACrE,QAAQ,EAAE,CAAC,OAAO,EAAE,OAAO,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,GAAG,KAAK,GAAG,CAAC,KAAK,IAAI,CAAC;IAC9E,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,QAAA,MAAM,YAAY,GAAI,8BAA8B,iBAAiB,4CA8IpE,CAAC;AAEF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"text-controls.d.ts","sourceRoot":"","sources":["../../../../../src/components/tools/text/text-options/text-controls.tsx"],"names":[],"mappings":"AAeA,OAAO,EAAc,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAe/D,UAAU,iBAAiB;IAGzB,IAAI,EAAE,cAAc,GAAG;QAAE,UAAU,CAAC,EAAE,OAAO,CAAC;QAAC,SAAS,CAAC,EAAE,OAAO,CAAA;KAAE,CAAC;IACrE,QAAQ,EAAE,CAAC,OAAO,EAAE,OAAO,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,GAAG,KAAK,GAAG,CAAC,KAAK,IAAI,CAAC;IAC9E,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,QAAA,MAAM,YAAY,GAAI,8BAA8B,iBAAiB,4CA8IpE,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/lib/components/tools/text/text-options/text-controls.js

@@ -9,7 +9,9 @@ import SIconButtonWrapper from "../../../common/icon-wrapper";
 import { ENABLE_TEXT_CONTENT_EDIT } from "../../../../actions";
 import restrictNumber from "../../../../utils/restrict-number";
 import { useStore } from "../../../../hooks";
-import { SFlexBox, SSelect, STextField } from '@solostylist/ui-kit';
+import { SFlexBox } from '@solostylist/ui-kit/s-flex-box';
+import { SSelect } from '@solostylist/ui-kit/s-select';
+import { STextField } from '@solostylist/ui-kit/s-text-field';
 import { textOptionsPopupComponents, TEXT_POPPABLE_OPTIONS } from "./text-options.constants";
 import { activateTextChange, deactivateTextChange } from "./handle-text-change-area";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";

package/lib/components/tools/watermark/watermark.js

@@ -3,7 +3,7 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 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 { FileUploadOutlined, TextFieldsOutlined } from '@mui/icons-material';
-import { SFlexBox } from '@solostylist/ui-kit';
+import { SFlexBox } from '@solostylist/ui-kit/s-flex-box';
 import { useEffect, useMemo, useRef, useState } from 'react';
 import { CLEAR_ANNOTATIONS_SELECTIONS, SELECT_ANNOTATION, SET_ANNOTATION, SET_FEEDBACK } from "../../../actions";
 import ButtonWithMenu from "../../common/button-with-menu";

package/lib/components/tools/watermark/watermarks-gallery.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"watermarks-gallery.d.ts","sourceRoot":"","sources":["../../../../src/components/tools/watermark/watermarks-gallery.tsx"],"names":[],"mappings":"AAYA,UAAU,sBAAsB;IAC9B,eAAe,EAAE,CAAC,GAAG,EAAE,gBAAgB,KAAK,IAAI,CAAC;IACjD,sBAAsB,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,eAAe,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;CAC7E;AAED,QAAA,MAAM,iBAAiB,GAAI,8CAGxB,sBAAsB,mDA6ExB,CAAC;AAEF,eAAe,iBAAiB,CAAC"}
+{"version":3,"file":"watermarks-gallery.d.ts","sourceRoot":"","sources":["../../../../src/components/tools/watermark/watermarks-gallery.tsx"],"names":[],"mappings":"AAWA,UAAU,sBAAsB;IAC9B,eAAe,EAAE,CAAC,GAAG,EAAE,gBAAgB,KAAK,IAAI,CAAC;IACjD,sBAAsB,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,eAAe,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;CAC7E;AAED,QAAA,MAAM,iBAAiB,GAAI,8CAGxB,sBAAsB,mDAsFxB,CAAC;AAEF,eAAe,iBAAiB,CAAC"}

package/lib/components/tools/watermark/watermarks-gallery.js

@@ -2,7 +2,6 @@ import { useMemo } from 'react';
 import Box from '@mui/material/Box';
 import { useStore } from "../../../hooks";
 import { TOOLS_IDS, WATERMARK_ANNOTATION_ID } from "../../../utils/constants";
-import { SCarousel } from '@solostylist/ui-kit/carousel';
 import { SET_FEEDBACK } from "../../../actions";
 import ImagePreviewTile from "../../common/image-preview-tile";
 import { isImageAnnotation } from "../../../types/annotations";
@@ -56,25 +55,28 @@ var WatermarksGallery = function WatermarksGallery(_ref) {
     sx: {
       flex: 1,
       minWidth: 0,
-      overflow: 'hidden'
+      overflowX: 'auto',
+      overflowY: 'hidden',
+      display: 'flex',
+      gap: 1,
+      scrollbarWidth: 'thin',
+      pb: 1
     },
-    children: _jsx(SCarousel, {
-      children: gallery.map(function (watermark) {
-        var watermarkUrl = typeof watermark === 'string' ? watermark : watermark === null || watermark === void 0 ? void 0 : watermark.url;
-        var previewUrl = typeof watermark === 'string' ? watermark : watermark === null || watermark === void 0 ? void 0 : watermark.previewUrl;
-        var isSameUrl = watermarkUrl === previewUrl;
-        return _jsx("div", {
-          children: _jsx(ImagePreviewTile, {
-            src: previewUrl,
-            alt: "Watermark",
-            onClick: function onClick(e) {
-              return isSameUrl ? getWatermarkImgAndSelect(e) : loadAndSetWatermarkImg(watermarkUrl);
-            },
-            selected: watermarkUrl === currentWatermarkUrl,
-            size: 60
-          })
-        }, watermarkUrl);
-      })
+    children: gallery.map(function (watermark) {
+      var watermarkUrl = typeof watermark === 'string' ? watermark : watermark === null || watermark === void 0 ? void 0 : watermark.url;
+      var previewUrl = typeof watermark === 'string' ? watermark : watermark === null || watermark === void 0 ? void 0 : watermark.previewUrl;
+      var isSameUrl = watermarkUrl === previewUrl;
+      return _jsx("div", {
+        children: _jsx(ImagePreviewTile, {
+          src: previewUrl,
+          alt: "Watermark",
+          onClick: function onClick(e) {
+            return isSameUrl ? getWatermarkImgAndSelect(e) : loadAndSetWatermarkImg(watermarkUrl);
+          },
+          selected: watermarkUrl === currentWatermarkUrl,
+          size: 60
+        })
+      }, watermarkUrl);
     })
   });
 };

package/lib/components/tools-bar/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/tools-bar/index.tsx"],"names":[],"mappings":"AAeA,QAAA,MAAM,QAAQ,+CA4Kb,CAAC;AAEF,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/tools-bar/index.tsx"],"names":[],"mappings":"AAgBA,QAAA,MAAM,QAAQ,+CAgLb,CAAC;AAEF,eAAe,QAAQ,CAAC"}