@solostylist/image-editor 1.0.9 → 1.0.11

package/lib/actions/show-loader.js

@@ -1 +1,10 @@
-import _defineProperty from"@babel/runtime/helpers/defineProperty";function ownKeys(a,b){var c=Object.keys(a);if(Object.getOwnPropertySymbols){var d=Object.getOwnPropertySymbols(a);b&&(d=d.filter(function(b){return Object.getOwnPropertyDescriptor(a,b).enumerable})),c.push.apply(c,d)}return c}function _objectSpread(a){for(var b,c=1;c<arguments.length;c++)b=null==arguments[c]?{}:arguments[c],c%2?ownKeys(Object(b),!0).forEach(function(c){_defineProperty(a,c,b[c])}):Object.getOwnPropertyDescriptors?Object.defineProperties(a,Object.getOwnPropertyDescriptors(b)):ownKeys(Object(b)).forEach(function(c){Object.defineProperty(a,c,Object.getOwnPropertyDescriptor(b,c))});return a}export var SHOW_LOADER="SHOW_LOADER";var showLoader=function(a){return _objectSpread(_objectSpread({},a),{},{isLoadingGlobally:!0})};export default showLoader;
+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; }
+export var SHOW_LOADER = 'SHOW_LOADER';
+var showLoader = function showLoader(state) {
+  return _objectSpread(_objectSpread({}, state), {}, {
+    isLoadingGlobally: true
+  });
+};
+export default showLoader;

package/lib/actions/toggle-flip.js

@@ -1 +1,13 @@
-import _defineProperty from"@babel/runtime/helpers/defineProperty";function ownKeys(a,b){var c=Object.keys(a);if(Object.getOwnPropertySymbols){var d=Object.getOwnPropertySymbols(a);b&&(d=d.filter(function(b){return Object.getOwnPropertyDescriptor(a,b).enumerable})),c.push.apply(c,d)}return c}function _objectSpread(a){for(var b,c=1;c<arguments.length;c++)b=null==arguments[c]?{}:arguments[c],c%2?ownKeys(Object(b),!0).forEach(function(c){_defineProperty(a,c,b[c])}):Object.getOwnPropertyDescriptors?Object.defineProperties(a,Object.getOwnPropertyDescriptors(b)):ownKeys(Object(b)).forEach(function(c){Object.defineProperty(a,c,Object.getOwnPropertyDescriptor(b,c))});return a}import{FLIP_DIRECTIONS}from"utils/constants";export var TOGGLE_FLIP="TOGGLE_FLIP";var toggleFlip=function(a,b){var c=b.direction===FLIP_DIRECTIONS.X?"isFlippedX":"isFlippedY";return _objectSpread(_objectSpread({},a),{},{isDesignState:!b.dismissHistory,adjustments:_objectSpread(_objectSpread({},a.adjustments),{},_defineProperty({},c,!a.adjustments[c]))})};export default toggleFlip;
+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 { FLIP_DIRECTIONS } from "../utils/constants";
+export var TOGGLE_FLIP = 'TOGGLE_FLIP';
+var toggleFlip = function toggleFlip(state, payload) {
+  var flipProperty = payload.direction === FLIP_DIRECTIONS.X ? 'isFlippedX' : 'isFlippedY';
+  return _objectSpread(_objectSpread({}, state), {}, {
+    isDesignState: !payload.dismissHistory,
+    adjustments: _objectSpread(_objectSpread({}, state.adjustments), {}, _defineProperty({}, flipProperty, !state.adjustments[flipProperty]))
+  });
+};
+export default toggleFlip;

package/lib/actions/toggle-original-image-display.js

@@ -1 +1,10 @@
-import _defineProperty from"@babel/runtime/helpers/defineProperty";function ownKeys(a,b){var c=Object.keys(a);if(Object.getOwnPropertySymbols){var d=Object.getOwnPropertySymbols(a);b&&(d=d.filter(function(b){return Object.getOwnPropertyDescriptor(a,b).enumerable})),c.push.apply(c,d)}return c}function _objectSpread(a){for(var b,c=1;c<arguments.length;c++)b=null==arguments[c]?{}:arguments[c],c%2?ownKeys(Object(b),!0).forEach(function(c){_defineProperty(a,c,b[c])}):Object.getOwnPropertyDescriptors?Object.defineProperties(a,Object.getOwnPropertyDescriptors(b)):ownKeys(Object(b)).forEach(function(c){Object.defineProperty(a,c,Object.getOwnPropertyDescriptor(b,c))});return a}export var TOGGLE_ORIGINAL_IMAGE_DISPLAY="TOGGLE_ORIGINAL_IMAGE_DISPLAY";var toggleOriginalImageDisplay=function(a,b){return _objectSpread(_objectSpread({},a),{},{isShowOriginalImage:b.isShow})};export default toggleOriginalImageDisplay;
+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; }
+export var TOGGLE_ORIGINAL_IMAGE_DISPLAY = 'TOGGLE_ORIGINAL_IMAGE_DISPLAY';
+var toggleOriginalImageDisplay = function toggleOriginalImageDisplay(state, payload) {
+  return _objectSpread(_objectSpread({}, state), {}, {
+    isShowOriginalImage: payload.isShow
+  });
+};
+export default toggleOriginalImageDisplay;

package/lib/actions/undo.js

@@ -1 +1,27 @@
-import _defineProperty from"@babel/runtime/helpers/defineProperty";import _toConsumableArray from"@babel/runtime/helpers/toConsumableArray";import _toArray from"@babel/runtime/helpers/toArray";function ownKeys(a,b){var c=Object.keys(a);if(Object.getOwnPropertySymbols){var d=Object.getOwnPropertySymbols(a);b&&(d=d.filter(function(b){return Object.getOwnPropertyDescriptor(a,b).enumerable})),c.push.apply(c,d)}return c}function _objectSpread(a){for(var b,c=1;c<arguments.length;c++)b=null==arguments[c]?{}:arguments[c],c%2?ownKeys(Object(b),!0).forEach(function(c){_defineProperty(a,c,b[c])}):Object.getOwnPropertyDescriptors?Object.defineProperties(a,Object.getOwnPropertyDescriptors(b)):ownKeys(Object(b)).forEach(function(c){Object.defineProperty(a,c,Object.getOwnPropertyDescriptor(b,c))});return a}function _arrayLikeToArray(b,c){(null==c||c>b.length)&&(c=b.length);for(var d=0,f=Array(c);d<c;d++)f[d]=b[d];return f}import extractCurrentDesignState from"utils/extract-current-design-state";export var UNDO="UNDO";var undo=function(a){if(a.pastDesignStates&&0<a.pastDesignStates.length){var b=extractCurrentDesignState(a,!1),c=_toArray(a.pastDesignStates),d=c[0],e=_arrayLikeToArray(c).slice(1),f=[b].concat(_toConsumableArray(a.futureDesignStates||[]));return _objectSpread(_objectSpread(_objectSpread({},a),d),{},{selectionsIds:[],pastDesignStates:e,futureDesignStates:f,hasUndo:0<e.length,hasRedo:!0,haveNotSavedChanges:0<e.length})}return a};export default undo;
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import _toArray from "@babel/runtime/helpers/toArray";
+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; }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+import extractCurrentDesignState from "../utils/extract-current-design-state";
+export var UNDO = 'UNDO';
+var undo = function undo(state) {
+  if (state.pastDesignStates && state.pastDesignStates.length > 0) {
+    var currentDesignState = extractCurrentDesignState(state, false);
+    var _state$pastDesignStat = _toArray(state.pastDesignStates),
+      presentDesignState = _state$pastDesignStat[0],
+      newPastDesignStates = _arrayLikeToArray(_state$pastDesignStat).slice(1);
+    var newFutureDesignStates = [currentDesignState].concat(_toConsumableArray(state.futureDesignStates || []));
+    return _objectSpread(_objectSpread(_objectSpread({}, state), presentDesignState), {}, {
+      selectionsIds: [],
+      pastDesignStates: newPastDesignStates,
+      futureDesignStates: newFutureDesignStates,
+      hasUndo: newPastDesignStates.length > 0,
+      hasRedo: true,
+      haveNotSavedChanges: newPastDesignStates.length > 0
+    });
+  }
+  return state;
+};
+export default undo;

package/lib/actions/update-state.js

@@ -1 +1,7 @@
-import deepMerge from"utils/deep-merge";export var UPDATE_STATE="UPDATE_STATE";var updateState=function(a,b){var c=b&&"function"==typeof b?b(a):b;return c?deepMerge(a,c):a};export default updateState;
+import deepMerge from "../utils/deep-merge";
+export var UPDATE_STATE = 'UPDATE_STATE';
+var updateState = function updateState(state, payloadObjOrFn) {
+  var payload = payloadObjOrFn && typeof payloadObjOrFn === 'function' ? payloadObjOrFn(state) : payloadObjOrFn;
+  return payload ? deepMerge(state, payload) : state;
+};
+export default updateState;

package/lib/actions/zoom-canvas.js

@@ -1 +1,37 @@
-import _defineProperty from"@babel/runtime/helpers/defineProperty";import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";var _excluded=["preparedDimensions"];function ownKeys(a,b){var c=Object.keys(a);if(Object.getOwnPropertySymbols){var d=Object.getOwnPropertySymbols(a);b&&(d=d.filter(function(b){return Object.getOwnPropertyDescriptor(a,b).enumerable})),c.push.apply(c,d)}return c}function _objectSpread(a){for(var b,c=1;c<arguments.length;c++)b=null==arguments[c]?{}:arguments[c],c%2?ownKeys(Object(b),!0).forEach(function(c){_defineProperty(a,c,b[c])}):Object.getOwnPropertyDescriptors?Object.defineProperties(a,Object.getOwnPropertyDescriptors(b)):ownKeys(Object(b)).forEach(function(c){Object.defineProperty(a,c,Object.getOwnPropertyDescriptor(b,c))});return a}import calculateZoomData from"utils/calculate-zoom-data";import{DEFAULT_ZOOM_FACTOR}from"utils/constants";import restrictNumber from"utils/restrict-number";export var ZOOM_CANVAS="ZOOM_CANVAS";var MIN_ZOOM_FACTOR=.03,MAX_ZOOM_FACTOR=60,zoomCanvas=function(a,b){var c,d=restrictNumber(parseFloat(parseFloat(b.factor+"").toFixed(2)),MIN_ZOOM_FACTOR,MAX_ZOOM_FACTOR);if(b.preparedDimensions){var e=b.preparedDimensions,f=_objectWithoutProperties(b,_excluded);c=f}else{var g,h,i={x:b.x||0===b.x?null!==(g=b.x)&&void 0!==g?g:a.zoom.x:a.canvasWidth/2,y:b.y||0===b.y?null!==(h=b.y)&&void 0!==h?h:a.zoom.y:a.canvasHeight/2};c=calculateZoomData(_objectSpread(_objectSpread({},i),{},{factor:d}),b.isAbsoluteZoom?{factor:DEFAULT_ZOOM_FACTOR,x:null,y:null}:a.zoom,a.canvasWidth,a.canvasHeight)}return c.factor===a.zoom.factor&&c.x===a.zoom.x&&c.y===a.zoom.y?a:_objectSpread(_objectSpread({},a),{},{zoom:_objectSpread(_objectSpread({},a.zoom),c)})};export default zoomCanvas;
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["preparedDimensions"];
+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 calculateZoomData from "../utils/calculate-zoom-data";
+import { DEFAULT_ZOOM_FACTOR } from "../utils/constants";
+import restrictNumber from "../utils/restrict-number";
+export var ZOOM_CANVAS = 'ZOOM_CANVAS';
+var MIN_ZOOM_FACTOR = 0.03;
+var MAX_ZOOM_FACTOR = 60;
+var zoomCanvas = function zoomCanvas(state, payload) {
+  var newZoomFactor = restrictNumber(parseFloat(parseFloat(String(payload.factor)).toFixed(2)), MIN_ZOOM_FACTOR, MAX_ZOOM_FACTOR);
+  var newZoomData;
+  if (payload.preparedDimensions) {
+    var _preparedDimensions = payload.preparedDimensions,
+      zoomProps = _objectWithoutProperties(payload, _excluded);
+    newZoomData = zoomProps;
+  } else {
+    var _payload$x, _payload$y;
+    var newZoomPoint = {
+      x: !payload.x && payload.x !== 0 ? state.canvasWidth / 2 : (_payload$x = payload.x) !== null && _payload$x !== void 0 ? _payload$x : state.zoom.x,
+      y: !payload.y && payload.y !== 0 ? state.canvasHeight / 2 : (_payload$y = payload.y) !== null && _payload$y !== void 0 ? _payload$y : state.zoom.y
+    };
+    newZoomData = calculateZoomData(_objectSpread(_objectSpread({}, newZoomPoint), {}, {
+      factor: newZoomFactor
+    }), payload.isAbsoluteZoom ? {
+      factor: DEFAULT_ZOOM_FACTOR,
+      x: null,
+      y: null
+    } : state.zoom, state.canvasWidth, state.canvasHeight);
+  }
+  return newZoomData.factor === state.zoom.factor && newZoomData.x === state.zoom.x && newZoomData.y === state.zoom.y ? state : _objectSpread(_objectSpread({}, state), {}, {
+    zoom: _objectSpread(_objectSpread({}, state.zoom), newZoomData)
+  });
+};
+export default zoomCanvas;

package/lib/components/app/index.js

@@ -1 +1,283 @@
-import _typeof from"@babel/runtime/helpers/typeof";import _defineProperty from"@babel/runtime/helpers/defineProperty";import _slicedToArray from"@babel/runtime/helpers/slicedToArray";function ownKeys(a,b){var c=Object.keys(a);if(Object.getOwnPropertySymbols){var d=Object.getOwnPropertySymbols(a);b&&(d=d.filter(function(b){return Object.getOwnPropertyDescriptor(a,b).enumerable})),c.push.apply(c,d)}return c}function _objectSpread(a){for(var b,c=1;c<arguments.length;c++)b=null==arguments[c]?{}:arguments[c],c%2?ownKeys(Object(b),!0).forEach(function(c){_defineProperty(a,c,b[c])}):Object.getOwnPropertyDescriptors?Object.defineProperties(a,Object.getOwnPropertyDescriptors(b)):ownKeys(Object(b)).forEach(function(c){Object.defineProperty(a,c,Object.getOwnPropertyDescriptor(b,c))});return a}import{SFlexBox}from"@solostylist/ui-kit/core";import{memo,useCallback,useEffect,useRef,useState}from"react";import{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"components/feedback-popup";import MainCanvas from"components/main-canvas";import Tabs from"components/tabs";import TabsDrawer from"components/tabs-drawer";import ToolsBar from"components/tools-bar";import Topbar from"components/topbar";import{usePhoneScreen,useResizeObserver,useStore,useTransformedImgData}from"hooks";import useUpdateEffect from"hooks/use-update-effect";import{ROOT_CONTAINER_CLASS_NAME}from"utils/constants";import filterStrToClass from"utils/filter-str-to-class";import finetunesStrsToClasses from"utils/finetunes-strs-to-classes";import isSameImage from"utils/is-same-image";import loadImage from"utils/load-image";var App=function(){var a,b,c=useStore(),d=c.config,e=c.isLoadingGlobally,f=c.haveNotSavedChanges,g=c.dispatch,h=c.originalImage,i=c.t,j=c.feedback,k=void 0===j?{}:j,l=d.loadableDesignState,m=d.source,n=d.avoidChangesNotSavedAlertOnLeave,o=d.defaultSavedImageName,p=d.observePluginContainerSize,q=d.showCanvasOnly,r=d.getCurrentImgDataFnRef,s=d.updateStateFnRef,t=d.noCrossOrigin,u=d.resetOnImageSourceChange,v=window.matchMedia("(max-width: 760px)").matches,w=useResizeObserver(),x=_slicedToArray(w,2),y=x[0],z=x[1],A=useState({width:void 0,height:void 0}),B=_slicedToArray(A,2),C=B[0],D=B[1],E=usePhoneScreen(),F=useRef(null),G=useRef(null),H=useRef(f),I=useTransformedImgData(),J=useCallback(function(a){g({type:SET_ORIGINAL_IMAGE,payload:{originalImage:a}})},[]),K=useCallback(function(a){g({type:SET_FEEDBACK,payload:{feedback:{message:"string"==typeof a?a:a.message,duration:0}}})},[]),L=function(a){return new Promise(function(b){var c=a instanceof HTMLImageElement?a.src:a;if(G.current===c||!c&&h||isSameImage(c,h))return void(G.current||b());var d=function(){G.current=null,b()};G.current=c,setTimeout(function(){if("string"==typeof a)loadImage(a,o,t).then(J)["catch"](K)["finally"](d);else if(a instanceof HTMLImageElement){if(!a.name&&o&&(a.name=o),!a.complete)return void a.addEventListener("load",function(){J(a),d()});J(a),d()}else K(i("invalidImageError")),d()},0)})},M=function(a){H.current&&(a.preventDefault(),a.returnValue="")},N=function(){var a=0<arguments.length&&void 0!==arguments[0]?arguments[0]:function(){return[]};return g({type:SHOW_LOADER}),Promise.all(a())["finally"](function(){g({type:HIDE_LOADER})})},O=function(){l&&0<Object.keys(l).length&&g({type:UPDATE_STATE,payload:_objectSpread(_objectSpread({},l),{},{finetunes:finetunesStrsToClasses(null===l||void 0===l?void 0:l.finetunes),filter:filterStrToClass(null===l||void 0===l?void 0:l.filter)})})};useUpdateEffect(function(){m&&!isSameImage(m,h)&&void N(function(){return[L(m)]}),u&&g({type:RESET,payload:{config:d}})},[m]),useUpdateEffect(function(){var a=null===l||void 0===l?void 0:l.imgSrc;a&&!isSameImage(a,h)?void N(function(){return[L(a).then(O)]}):O()},[l]),useEffect(function(){return p&&F.current&&y(F.current.parentNode,function(a){var b=a.width,c=a.height;return D({width:b,height:c})}),function(){p&&F.current&&z(F.current)}},[p,y,z]),useEffect(function(){return void N(function(){return[L((null===l||void 0===l?void 0:l.imgSrc)||m)]}),window&&!n&&window.addEventListener("beforeunload",M),function(){window&&!n&&window.removeEventListener("beforeunload",M)}},[]),useEffect(function(){s&&"object"===_typeof(s)&&(s.current=function(a){g({type:UPDATE_STATE,payload:a})})},[s,g]),useEffect(function(){r&&"object"===_typeof(r)&&(r.current=I)},[I]),useEffect(function(){H.current=f},[f]);var P=function(a){g({type:SET_SHOWN_TABS_MENU,payload:{opened:a}})};return React.createElement(SFlexBox,{className:ROOT_CONTAINER_CLASS_NAME,"data-phone":E,ref:F,sx:{backgroundColor:"background.default",flexDirection:"column",alignItems:"center",height:null!==(a=p?C.height:void 0)&&void 0!==a?a:"100%",maxHeight:"100%",width:null!==(b=p?C.width:void 0)&&void 0!==b?b:"100%",maxWidth:"100%",overflow:v?"unset":"auto",position:"relative",minHeight:"100vh"}},e&&React.createElement(CircularProgress,{sx:{position:"absolute",zIndex:11111,top:"50%",left:"50%",transform:"translate(-50%, -50%)",userSelect:"none"}}),function(){return React.createElement(React.Fragment,null,!q&&React.createElement(React.Fragment,null,v&&React.createElement(TabsDrawer,{toggleMainMenu:P}),React.createElement(Topbar,{toggleMainMenu:P})),h&&0!==k.duration&&React.createElement(SFlexBox,{sx:{width:"100%",flexGrow:1}},!q&&!v&&React.createElement(Tabs,{toggleMainMenu:P}),React.createElement(SFlexBox,{sx:{height:"calc(100vh - 60px)",width:"calc(100% - 120px)",flexGrow:1,flexDirection:"column",minWidth:0}},React.createElement(MainCanvas,null),!q&&React.createElement(ToolsBar,null))))}(),React.createElement(FeedbackPopup,{anchorOrigin:{vertical:"top",horizontal:"center"}}))};export default memo(App);
+import _typeof from "@babel/runtime/helpers/typeof";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+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 { SFlexBox } from '@solostylist/ui-kit/core';
+import { memo, useCallback, useEffect, useRef, useState } from 'react';
+import { 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";
+import Tabs from "../tabs";
+import TabsDrawer from "../tabs-drawer";
+import ToolsBar from "../tools-bar";
+import Topbar from "../topbar";
+import { usePhoneScreen, useResizeObserver, useStore, useTransformedImgData } from "../../hooks";
+import useUpdateEffect from "../../hooks/use-update-effect";
+import { ROOT_CONTAINER_CLASS_NAME } from "../../utils/constants";
+import filterStrToClass from "../../utils/filter-str-to-class";
+import finetunesStrsToClasses from "../../utils/finetunes-strs-to-classes";
+import isSameImage from "../../utils/is-same-image";
+import loadImage from "../../utils/load-image";
+var App = function App() {
+  var _ref2, _ref3;
+  var _useStore = useStore(),
+    config = _useStore.config,
+    isLoadingGlobally = _useStore.isLoadingGlobally,
+    haveNotSavedChanges = _useStore.haveNotSavedChanges,
+    dispatch = _useStore.dispatch,
+    originalImage = _useStore.originalImage,
+    t = _useStore.t,
+    _useStore$feedback = _useStore.feedback,
+    feedback = _useStore$feedback === void 0 ? {} : _useStore$feedback;
+  var loadableDesignState = config.loadableDesignState,
+    source = config.source,
+    avoidChangesNotSavedAlertOnLeave = config.avoidChangesNotSavedAlertOnLeave,
+    defaultSavedImageName = config.defaultSavedImageName,
+    observePluginContainerSize = config.observePluginContainerSize,
+    showCanvasOnly = config.showCanvasOnly,
+    getCurrentImgDataFnRef = config.getCurrentImgDataFnRef,
+    updateStateFnRef = config.updateStateFnRef,
+    noCrossOrigin = config.noCrossOrigin,
+    resetOnImageSourceChange = config.resetOnImageSourceChange;
+  var showTabsDrawer = window.matchMedia('(max-width: 760px)').matches;
+  var _useResizeObserver = useResizeObserver(),
+    _useResizeObserver2 = _slicedToArray(_useResizeObserver, 2),
+    observeResize = _useResizeObserver2[0],
+    unobserveElement = _useResizeObserver2[1];
+  var _useState = useState({
+      width: undefined,
+      height: undefined
+    }),
+    _useState2 = _slicedToArray(_useState, 2),
+    rootSize = _useState2[0],
+    setRootSize = _useState2[1];
+  var isPhoneScreen = usePhoneScreen();
+  var pluginRootRef = useRef(null);
+  var imageBeingLoadedSrc = useRef(null);
+  var haveNotSavedChangesRef = useRef(haveNotSavedChanges);
+  var transformImgFn = useTransformedImgData();
+  var setNewOriginalImage = useCallback(function (newOriginalImage) {
+    dispatch({
+      type: SET_ORIGINAL_IMAGE,
+      payload: {
+        originalImage: newOriginalImage
+      }
+    });
+  }, []);
+  var setError = useCallback(function (newError) {
+    dispatch({
+      type: SET_FEEDBACK,
+      payload: {
+        feedback: {
+          message: typeof newError === 'string' ? newError : newError.message,
+          duration: 0
+        }
+      }
+    });
+  }, []);
+  var loadAndSetOriginalImage = function loadAndSetOriginalImage(imgToLoad) {
+    return new Promise(function (resolve) {
+      var imgSrc = imgToLoad instanceof HTMLImageElement ? imgToLoad.src : imgToLoad;
+      if (imageBeingLoadedSrc.current === imgSrc || !imgSrc && originalImage || isSameImage(imgSrc, originalImage)) {
+        if (!imageBeingLoadedSrc.current) {
+          resolve();
+        }
+        return;
+      }
+      var triggerResolve = function triggerResolve() {
+        imageBeingLoadedSrc.current = null;
+        resolve();
+      };
+      imageBeingLoadedSrc.current = imgSrc;
+      setTimeout(function () {
+        if (typeof imgToLoad === 'string') {
+          loadImage(imgToLoad, defaultSavedImageName, noCrossOrigin).then(setNewOriginalImage)["catch"](setError)["finally"](triggerResolve);
+        } else if (imgToLoad instanceof HTMLImageElement) {
+          if (!imgToLoad.name && defaultSavedImageName) {
+            imgToLoad.name = defaultSavedImageName;
+          }
+          if (!imgToLoad.complete) {
+            imgToLoad.addEventListener('load', function () {
+              setNewOriginalImage(imgToLoad);
+              triggerResolve();
+            });
+            return;
+          }
+          setNewOriginalImage(imgToLoad);
+          triggerResolve();
+        } else {
+          setError(t('invalidImageError'));
+          triggerResolve();
+        }
+      }, 0);
+    });
+  };
+  var promptDialogIfHasChangeNotSaved = function promptDialogIfHasChangeNotSaved(e) {
+    if (haveNotSavedChangesRef.current) {
+      e.preventDefault();
+      e.returnValue = '';
+    }
+  };
+  var handleLoading = function handleLoading() {
+    var loadingPromisesFn = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : function () {
+      return [];
+    };
+    dispatch({
+      type: SHOW_LOADER
+    });
+    return Promise.all(loadingPromisesFn())["finally"](function () {
+      dispatch({
+        type: HIDE_LOADER
+      });
+    });
+  };
+  var updateDesignStateWithLoadableOne = function updateDesignStateWithLoadableOne() {
+    if (loadableDesignState && Object.keys(loadableDesignState).length > 0) {
+      dispatch({
+        type: UPDATE_STATE,
+        payload: _objectSpread(_objectSpread({}, loadableDesignState), {}, {
+          finetunes: finetunesStrsToClasses(loadableDesignState === null || loadableDesignState === void 0 ? void 0 : loadableDesignState.finetunes),
+          filter: filterStrToClass(loadableDesignState === null || loadableDesignState === void 0 ? void 0 : loadableDesignState.filter)
+        })
+      });
+    }
+  };
+  useUpdateEffect(function () {
+    if (source && !isSameImage(source, originalImage)) {
+      void handleLoading(function () {
+        return [loadAndSetOriginalImage(source)];
+      });
+    }
+    if (resetOnImageSourceChange) {
+      dispatch({
+        type: RESET,
+        payload: {
+          config: config
+        }
+      });
+    }
+  }, [source]);
+  useUpdateEffect(function () {
+    var newImgSrc = loadableDesignState === null || loadableDesignState === void 0 ? void 0 : loadableDesignState.imgSrc;
+    if (newImgSrc && !isSameImage(newImgSrc, originalImage)) {
+      void handleLoading(function () {
+        return [loadAndSetOriginalImage(newImgSrc).then(updateDesignStateWithLoadableOne)];
+      });
+    } else {
+      updateDesignStateWithLoadableOne();
+    }
+  }, [loadableDesignState]);
+  useEffect(function () {
+    if (observePluginContainerSize && pluginRootRef.current) {
+      observeResize(pluginRootRef.current.parentNode, function (_ref) {
+        var width = _ref.width,
+          height = _ref.height;
+        return setRootSize({
+          width: width,
+          height: height
+        });
+      });
+    }
+    return function () {
+      if (observePluginContainerSize && pluginRootRef.current) {
+        unobserveElement(pluginRootRef.current);
+      }
+    };
+  }, [observePluginContainerSize, observeResize, unobserveElement]);
+  useEffect(function () {
+    var initialRequestsPromisesFn = function initialRequestsPromisesFn() {
+      return [loadAndSetOriginalImage((loadableDesignState === null || loadableDesignState === void 0 ? void 0 : loadableDesignState.imgSrc) || source)];
+    };
+    void handleLoading(initialRequestsPromisesFn);
+    if (window && !avoidChangesNotSavedAlertOnLeave) {
+      window.addEventListener('beforeunload', promptDialogIfHasChangeNotSaved);
+    }
+    return function () {
+      if (window && !avoidChangesNotSavedAlertOnLeave) {
+        window.removeEventListener('beforeunload', promptDialogIfHasChangeNotSaved);
+      }
+    };
+  }, []);
+  useEffect(function () {
+    if (updateStateFnRef && _typeof(updateStateFnRef) === 'object') {
+      updateStateFnRef.current = function (newStatePartObjOrFn) {
+        dispatch({
+          type: UPDATE_STATE,
+          payload: newStatePartObjOrFn
+        });
+      };
+    }
+  }, [updateStateFnRef, dispatch]);
+  useEffect(function () {
+    if (getCurrentImgDataFnRef && _typeof(getCurrentImgDataFnRef) === 'object') {
+      getCurrentImgDataFnRef.current = transformImgFn;
+    }
+  }, [transformImgFn]);
+  useEffect(function () {
+    haveNotSavedChangesRef.current = haveNotSavedChanges;
+  }, [haveNotSavedChanges]);
+  var toggleMainMenu = function toggleMainMenu(open) {
+    dispatch({
+      type: SET_SHOWN_TABS_MENU,
+      payload: {
+        opened: open
+      }
+    });
+  };
+  var renderContent = function renderContent() {
+    return React.createElement(React.Fragment, null, !showCanvasOnly && React.createElement(React.Fragment, null, showTabsDrawer && React.createElement(TabsDrawer, {
+      toggleMainMenu: toggleMainMenu
+    }), React.createElement(Topbar, {
+      toggleMainMenu: toggleMainMenu
+    })), originalImage && feedback.duration !== 0 && React.createElement(SFlexBox, {
+      sx: {
+        width: '100%',
+        flexGrow: 1
+      }
+    }, !showCanvasOnly && !showTabsDrawer && React.createElement(Tabs, {
+      toggleMainMenu: toggleMainMenu
+    }), React.createElement(SFlexBox, {
+      sx: {
+        height: 'calc(100vh - 60px)',
+        width: 'calc(100% - 120px)',
+        flexGrow: 1,
+        flexDirection: 'column',
+        minWidth: 0
+      }
+    }, React.createElement(MainCanvas, null), !showCanvasOnly && React.createElement(ToolsBar, null))));
+  };
+  return React.createElement(SFlexBox, {
+    className: ROOT_CONTAINER_CLASS_NAME,
+    "data-phone": isPhoneScreen,
+    ref: pluginRootRef,
+    sx: {
+      backgroundColor: 'background.default',
+      flexDirection: 'column',
+      alignItems: 'center',
+      height: (_ref2 = observePluginContainerSize ? rootSize.height : undefined) !== null && _ref2 !== void 0 ? _ref2 : '100%',
+      maxHeight: '100%',
+      width: (_ref3 = observePluginContainerSize ? rootSize.width : undefined) !== null && _ref3 !== void 0 ? _ref3 : '100%',
+      maxWidth: '100%',
+      overflow: showTabsDrawer ? 'unset' : 'auto',
+      position: 'relative',
+      minHeight: '100vh'
+    }
+  }, isLoadingGlobally && React.createElement(CircularProgress, {
+    sx: {
+      position: 'absolute',
+      zIndex: 11111,
+      top: '50%',
+      left: '50%',
+      transform: 'translate(-50%, -50%)',
+      userSelect: 'none'
+    }
+  }), renderContent(), React.createElement(FeedbackPopup, {
+    anchorOrigin: {
+      vertical: 'top',
+      horizontal: 'center'
+    }
+  }));
+};
+export default memo(App);

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

@@ -1 +1,23 @@
-import React,{useEffect,memo}from"react";import{SThemeProvider}from"@solostylist/ui-kit/core";import App from"components/app";import{AppProvider}from"context";import defaultConfig from"context/default-config";import deepMerge from"utils/deep-merge";import assignFinetuneNamesToKonva from"utils/assign-finetune-names-to-konva";var AssemblyPoint=function(a){var b=a.source;if(!b||"string"!=typeof b&&!(b instanceof HTMLImageElement))throw new Error("`source` property is required either a string of image url or a HTMLImageElement for the image that will be edited.");useEffect(function(){assignFinetuneNamesToKonva()},[]);var c=deepMerge(defaultConfig,a);return React.createElement(React.StrictMode,null,React.createElement(SThemeProvider,{defaultMode:"dark"},React.createElement(AppProvider,{config:c},React.createElement(App,null))))};export default memo(AssemblyPoint);
+import React, { useEffect, memo } from 'react';
+import { SThemeProvider } from '@solostylist/ui-kit/core';
+import App from "../app";
+import { AppProvider } from "../../context";
+import defaultConfig from "../../context/default-config";
+import deepMerge from "../../utils/deep-merge";
+import assignFinetuneNamesToKonva from "../../utils/assign-finetune-names-to-konva";
+var AssemblyPoint = function AssemblyPoint(props) {
+  var source = props.source;
+  if (!source || typeof source !== 'string' && !(source instanceof HTMLImageElement)) {
+    throw new Error('`source` property is required either a string of image url or a HTMLImageElement for the image that will be edited.');
+  }
+  useEffect(function () {
+    assignFinetuneNamesToKonva();
+  }, []);
+  var defaultAndProvidedConfigMerged = deepMerge(defaultConfig, props);
+  return React.createElement(React.StrictMode, null, React.createElement(SThemeProvider, {
+    defaultMode: "dark"
+  }, React.createElement(AppProvider, {
+    config: defaultAndProvidedConfigMerged
+  }, React.createElement(App, null))));
+};
+export default memo(AssemblyPoint);

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

@@ -1 +1,10 @@
-import _defineProperty from"@babel/runtime/helpers/defineProperty";import{POSITIONS}from"utils/constants";export var AVAILABLE_POSITIONS=Object.values(POSITIONS);export var posCssRotateDegFromRightSide=_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({},POSITIONS.TOP_LEFT,-145),POSITIONS.TOP_CENTER,-90),POSITIONS.TOP_RIGHT,-45),POSITIONS.MIDDLE_LEFT,180),POSITIONS.MIDDLE_CENTER,0),POSITIONS.MIDDLE_RIGHT,0),POSITIONS.BOTTOM_LEFT,135),POSITIONS.BOTTOM_CENTER,90),POSITIONS.BOTTOM_RIGHT,45);export var POPPABLE_OPTIONS={OPACITY:"opacity",STROKE:"stroke",SHADOW:"shadow",POSITION:"position"};
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import { POSITIONS } from "../../../utils/constants";
+export var AVAILABLE_POSITIONS = Object.values(POSITIONS);
+export var posCssRotateDegFromRightSide = _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, POSITIONS.TOP_LEFT, -145), POSITIONS.TOP_CENTER, -90), POSITIONS.TOP_RIGHT, -45), POSITIONS.MIDDLE_LEFT, 180), POSITIONS.MIDDLE_CENTER, 0), POSITIONS.MIDDLE_RIGHT, 0), POSITIONS.BOTTOM_LEFT, 135), POSITIONS.BOTTOM_CENTER, 90), POSITIONS.BOTTOM_RIGHT, 45);
+export var POPPABLE_OPTIONS = {
+  OPACITY: 'opacity',
+  STROKE: 'stroke',
+  SHADOW: 'shadow',
+  POSITION: 'position'
+};

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

@@ -1 +1,140 @@
-import _extends from"@babel/runtime/helpers/extends";import _defineProperty from"@babel/runtime/helpers/defineProperty";import _toConsumableArray from"@babel/runtime/helpers/toConsumableArray";import _slicedToArray from"@babel/runtime/helpers/slicedToArray";import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";var _excluded=["children","morePoppableOptionsPrepended","moreOptionsPopupComponentsObj","morePoppableOptionsAppended","annotation","updateAnnotation","hideFillOption","hidePositionField"];function ownKeys(a,b){var c=Object.keys(a);if(Object.getOwnPropertySymbols){var d=Object.getOwnPropertySymbols(a);b&&(d=d.filter(function(b){return Object.getOwnPropertyDescriptor(a,b).enumerable})),c.push.apply(c,d)}return c}function _objectSpread(a){for(var b,c=1;c<arguments.length;c++)b=null==arguments[c]?{}:arguments[c],c%2?ownKeys(Object(b),!0).forEach(function(c){_defineProperty(a,c,b[c])}):Object.getOwnPropertyDescriptors?Object.defineProperties(a,Object.getOwnPropertyDescriptors(b)):ownKeys(Object(b)).forEach(function(c){Object.defineProperty(a,c,Object.getOwnPropertyDescriptor(b,c))});return a}import{BorderColorOutlined,FlareOutlined,GpsFixedOutlined,OpacityOutlined}from"@mui/icons-material";import Box from"@mui/material/Box";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/core";import ColorInput from"../color-input";import SIconButtonWrapper from"../icon-wrapper";import{POPPABLE_OPTIONS}from"./annotation-options.constants";import OpacityField from"./opacity-field";import PositionFields from"./position-fields";import ShadowFields from"./shadow-fields";import StrokeFields from"./stroke-fields";var AnnotationOptions=function(a){var b=a.children,c=void 0===b?void 0:b,d=a.morePoppableOptionsPrepended,e=void 0===d?[]:d,f=a.moreOptionsPopupComponentsObj,g=void 0===f?{}:f,h=a.morePoppableOptionsAppended,i=void 0===h?[]:h,j=a.annotation,k=a.updateAnnotation,l=a.hideFillOption,m=a.hidePositionField,n=void 0!==m&&m,o=_objectWithoutProperties(a,_excluded),p=useState(null),q=_slicedToArray(p,2),r=q[0],s=q[1],u=useState(null),v=_slicedToArray(u,2),w=v[0],x=v[1],y=useStore(),z=y.t,t=useMemo(function(){return[].concat(_toConsumableArray(e||[]),[{titleKey:"opacity",name:POPPABLE_OPTIONS.OPACITY,Icon:OpacityOutlined},{titleKey:"stroke",name:POPPABLE_OPTIONS.STROKE,Icon:BorderColorOutlined},{titleKey:"shadow",name:POPPABLE_OPTIONS.SHADOW,Icon:FlareOutlined},n?void 0:{titleKey:"position",name:POPPABLE_OPTIONS.POSITION,Icon:GpsFixedOutlined}])},[e,n]),A=useMemo(function(){return _objectSpread(_objectSpread({},g),{},_defineProperty(_defineProperty(_defineProperty(_defineProperty({},POPPABLE_OPTIONS.OPACITY,OpacityField),POPPABLE_OPTIONS.STROKE,StrokeFields),POPPABLE_OPTIONS.SHADOW,ShadowFields),POPPABLE_OPTIONS.POSITION,PositionFields),i||[])},[g,i]),B=useCallback(function(a,b){var c=null===a||void 0===a?void 0:a.currentTarget;s(c||null),x(b||null)},[]),C=useCallback(function(a){k({fill:a})},[k]),D=r&&w&&A[w];return React.createElement(SFlexBox,{alignItems:"center",justifyContent:"center",gap:1},!(void 0!==l&&l)&&React.createElement(ColorInput,{color:j.fill,onChange:C,colorFor:"fill"}),c,t.map(function(a){return a&&React.createElement(SIconButtonWrapper,{key:a.name,title:z(a.titleKey),onClick:function(b){return B(b,a.name)},active:w===a.name},React.createElement(a.Icon,null))}),D&&React.createElement(Menu,{anchorEl:r,open:!!r,onClose:B,anchorOrigin:{vertical:"top",horizontal:"center"},transformOrigin:{vertical:"bottom",horizontal:"center"},slotProps:{paper:{sx:{px:2,py:1}}}},w===POPPABLE_OPTIONS.POSITION?function(){return React.createElement(React.Fragment,null,React.createElement(Typography,{variant:"subtitle2",mb:1},z("position")),React.createElement(Box,{sx:{display:"grid",gridTemplateColumns:"repeat(4, auto)"}},React.createElement(D,_extends({annotation:j,updateAnnotation:k,t:z},o))))}():React.createElement(D,_extends({annotation:j,updateAnnotation:k,t:z},o))))};export default AnnotationOptions;
+import _extends from "@babel/runtime/helpers/extends";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["children", "morePoppableOptionsPrepended", "moreOptionsPopupComponentsObj", "morePoppableOptionsAppended", "annotation", "updateAnnotation", "hideFillOption", "hidePositionField"];
+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 { BorderColorOutlined, FlareOutlined, GpsFixedOutlined, OpacityOutlined } from '@mui/icons-material';
+import Box from '@mui/material/Box';
+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/core';
+import ColorInput from "../color-input";
+import SIconButtonWrapper from "../icon-wrapper";
+import { POPPABLE_OPTIONS } from "./annotation-options.constants";
+import OpacityField from "./opacity-field";
+import PositionFields from "./position-fields";
+import ShadowFields from "./shadow-fields";
+import StrokeFields from "./stroke-fields";
+var AnnotationOptions = function AnnotationOptions(_ref) {
+  var _ref$children = _ref.children,
+    children = _ref$children === void 0 ? undefined : _ref$children,
+    _ref$morePoppableOpti = _ref.morePoppableOptionsPrepended,
+    morePoppableOptionsPrepended = _ref$morePoppableOpti === void 0 ? [] : _ref$morePoppableOpti,
+    _ref$moreOptionsPopup = _ref.moreOptionsPopupComponentsObj,
+    moreOptionsPopupComponentsObj = _ref$moreOptionsPopup === void 0 ? {} : _ref$moreOptionsPopup,
+    _ref$morePoppableOpti2 = _ref.morePoppableOptionsAppended,
+    morePoppableOptionsAppended = _ref$morePoppableOpti2 === void 0 ? [] : _ref$morePoppableOpti2,
+    annotation = _ref.annotation,
+    updateAnnotation = _ref.updateAnnotation,
+    _ref$hideFillOption = _ref.hideFillOption,
+    hideFillOption = _ref$hideFillOption === void 0 ? false : _ref$hideFillOption,
+    _ref$hidePositionFiel = _ref.hidePositionField,
+    hidePositionField = _ref$hidePositionFiel === void 0 ? false : _ref$hidePositionFiel,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var _useState = useState(null),
+    _useState2 = _slicedToArray(_useState, 2),
+    anchorEl = _useState2[0],
+    setAnchorEl = _useState2[1];
+  var _useState3 = useState(null),
+    _useState4 = _slicedToArray(_useState3, 2),
+    currentOption = _useState4[0],
+    setCurrentOption = _useState4[1];
+  var _useStore = useStore(),
+    t = _useStore.t;
+  var options = useMemo(function () {
+    return [].concat(_toConsumableArray(morePoppableOptionsPrepended || []), [{
+      titleKey: 'opacity',
+      name: POPPABLE_OPTIONS.OPACITY,
+      Icon: OpacityOutlined
+    }, {
+      titleKey: 'stroke',
+      name: POPPABLE_OPTIONS.STROKE,
+      Icon: BorderColorOutlined
+    }, {
+      titleKey: 'shadow',
+      name: POPPABLE_OPTIONS.SHADOW,
+      Icon: FlareOutlined
+    }, !hidePositionField ? {
+      titleKey: 'position',
+      name: POPPABLE_OPTIONS.POSITION,
+      Icon: GpsFixedOutlined
+    } : undefined]);
+  }, [morePoppableOptionsPrepended, hidePositionField]);
+  var optionsPopups = useMemo(function () {
+    return _objectSpread(_objectSpread({}, moreOptionsPopupComponentsObj), {}, _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, POPPABLE_OPTIONS.OPACITY, OpacityField), POPPABLE_OPTIONS.STROKE, StrokeFields), POPPABLE_OPTIONS.SHADOW, ShadowFields), POPPABLE_OPTIONS.POSITION, PositionFields), morePoppableOptionsAppended || []);
+  }, [moreOptionsPopupComponentsObj, morePoppableOptionsAppended]);
+  var toggleOptionPopup = useCallback(function (e, targetOptionName) {
+    var targetAnchorEl = e === null || e === void 0 ? void 0 : e.currentTarget;
+    setAnchorEl(targetAnchorEl || null);
+    setCurrentOption(targetOptionName || null);
+  }, []);
+  var changeAnnotationFill = useCallback(function (newFill) {
+    updateAnnotation({
+      fill: newFill
+    });
+  }, [updateAnnotation]);
+  var OptionPopupComponent = anchorEl && currentOption && optionsPopups[currentOption];
+  var renderPositionFields = function renderPositionFields() {
+    return React.createElement(React.Fragment, null, React.createElement(Typography, {
+      variant: "subtitle2",
+      mb: 1
+    }, t('position')), React.createElement(Box, {
+      sx: {
+        display: 'grid',
+        gridTemplateColumns: 'repeat(4, auto)'
+      }
+    }, React.createElement(OptionPopupComponent, _extends({
+      annotation: annotation,
+      updateAnnotation: updateAnnotation,
+      t: t
+    }, rest))));
+  };
+  return React.createElement(SFlexBox, {
+    alignItems: "center",
+    justifyContent: "center",
+    gap: 1
+  }, !hideFillOption && React.createElement(ColorInput, {
+    color: annotation.fill,
+    onChange: changeAnnotationFill,
+    colorFor: "fill"
+  }), children, options.map(function (option) {
+    return option && React.createElement(SIconButtonWrapper, {
+      key: option.name,
+      title: t(option.titleKey),
+      onClick: function onClick(e) {
+        return toggleOptionPopup(e, option.name);
+      },
+      active: currentOption === option.name
+    }, React.createElement(option.Icon, null));
+  }), OptionPopupComponent && React.createElement(Menu, {
+    anchorEl: anchorEl,
+    open: Boolean(anchorEl),
+    onClose: toggleOptionPopup,
+    anchorOrigin: {
+      vertical: 'top',
+      horizontal: 'center'
+    },
+    transformOrigin: {
+      vertical: 'bottom',
+      horizontal: 'center'
+    },
+    slotProps: {
+      paper: {
+        sx: {
+          px: 2,
+          py: 1
+        }
+      }
+    }
+  }, currentOption === POPPABLE_OPTIONS.POSITION ? renderPositionFields() : React.createElement(OptionPopupComponent, _extends({
+    annotation: annotation,
+    updateAnnotation: updateAnnotation,
+    t: t
+  }, rest))));
+};
+export default AnnotationOptions;

package/lib/components/common/annotation-options/opacity-field.js

@@ -1 +1,23 @@
-import restrictNumber from"utils/restrict-number";import Slider from"../slider";var MIN_PERCENTANGE=0,MAX_PERCENTANGE=1,OpacityField=function(a){var b=a.annotation,c=a.updateAnnotation,d=a.t,e=b.opacity,f=Math.round(100*(null!==e&&void 0!==e?e:0));return React.createElement(Slider,{label:d("transparency"),onChange:function(a){c({opacity:restrictNumber(a/100,MIN_PERCENTANGE,MAX_PERCENTANGE)})},value:f,annotation:"%"})};export default OpacityField;
+import restrictNumber from "../../../utils/restrict-number";
+import Slider from "../slider";
+var MIN_PERCENTANGE = 0;
+var MAX_PERCENTANGE = 1;
+var OpacityField = function OpacityField(_ref) {
+  var annotation = _ref.annotation,
+    updateAnnotation = _ref.updateAnnotation,
+    t = _ref.t;
+  var opacity = annotation.opacity;
+  var opacityValue = Math.round((opacity !== null && opacity !== void 0 ? opacity : 0) * 100);
+  var changeOpacity = function changeOpacity(newOpactiy) {
+    updateAnnotation({
+      opacity: restrictNumber(newOpactiy / 100, MIN_PERCENTANGE, MAX_PERCENTANGE)
+    });
+  };
+  return React.createElement(Slider, {
+    label: t('transparency'),
+    onChange: changeOpacity,
+    value: opacityValue,
+    annotation: "%"
+  });
+};
+export default OpacityField;