@solostylist/image-editor 1.0.9 → 1.0.11

package/lib/components/common/annotation-options/position-fields.js

@@ -1 +1,39 @@
-import _slicedToArray from"@babel/runtime/helpers/slicedToArray";import{Fragment,useState}from"react";import{ArrowForwardOutlined,FiberManualRecordOutlined}from"@mui/icons-material";import{POSITIONS}from"utils/constants";import mapPositionStringToPoint from"utils/map-position-string-to-point";import{useStore}from"hooks";import SIconButtonWrapper from"../icon-wrapper";import{AVAILABLE_POSITIONS,posCssRotateDegFromRightSide}from"./annotation-options.constants";var PositionFields=function(a){var b=a.annotation,c=a.updateAnnotation,d=useState(null),e=_slicedToArray(d,2),f=e[0],g=e[1],h=useStore(),i=h.designLayer,j=function(a){c(mapPositionStringToPoint(b,i,a)),g(a)},k=AVAILABLE_POSITIONS.length;return AVAILABLE_POSITIONS.map(function(a,b){return React.createElement(Fragment,{key:a},React.createElement(SIconButtonWrapper,{onClick:function(){return j(a)},active:f===a,border:!0},a===POSITIONS.MIDDLE_CENTER?React.createElement(FiberManualRecordOutlined,null):React.createElement(ArrowForwardOutlined,{style:{transform:"rotate(".concat(posCssRotateDegFromRightSide[a],"deg)")}})),0==(b+1)%3&&b+1!==k&&React.createElement("div",null))})};export default PositionFields;
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import { Fragment, useState } from 'react';
+import { ArrowForwardOutlined, FiberManualRecordOutlined } from '@mui/icons-material';
+import { POSITIONS } from "../../../utils/constants";
+import mapPositionStringToPoint from "../../../utils/map-position-string-to-point";
+import { useStore } from "../../../hooks";
+import SIconButtonWrapper from "../icon-wrapper";
+import { AVAILABLE_POSITIONS, posCssRotateDegFromRightSide } from "./annotation-options.constants";
+var PositionFields = function PositionFields(_ref) {
+  var annotation = _ref.annotation,
+    updateAnnotation = _ref.updateAnnotation;
+  var _useState = useState(null),
+    _useState2 = _slicedToArray(_useState, 2),
+    position = _useState2[0],
+    setPosition = _useState2[1];
+  var _useStore = useStore(),
+    designLayer = _useStore.designLayer;
+  var changePosition = function changePosition(newPositionStr) {
+    updateAnnotation(mapPositionStringToPoint(annotation, designLayer, newPositionStr));
+    setPosition(newPositionStr);
+  };
+  var positionsLength = AVAILABLE_POSITIONS.length;
+  return AVAILABLE_POSITIONS.map(function (pos, i) {
+    return React.createElement(Fragment, {
+      key: pos
+    }, React.createElement(SIconButtonWrapper, {
+      onClick: function onClick() {
+        return changePosition(pos);
+      },
+      active: position === pos,
+      border: true
+    }, pos === POSITIONS.MIDDLE_CENTER ? React.createElement(FiberManualRecordOutlined, null) : React.createElement(ArrowForwardOutlined, {
+      style: {
+        transform: "rotate(".concat(posCssRotateDegFromRightSide[pos], "deg)")
+      }
+    })), (i + 1) % 3 === 0 && i + 1 !== positionsLength && React.createElement("div", null));
+  });
+};
+export default PositionFields;

package/lib/components/common/annotation-options/shadow-fields.js

@@ -1 +1,62 @@
-import _defineProperty from"@babel/runtime/helpers/defineProperty";import ColorInput from"components/common/color-input";import restrictNumber from"utils/restrict-number";import Slider from"../slider";var ShadowFields=function(a){var b=a.annotation,c=a.updateAnnotation,d=a.t,e=b.shadowOffsetX,f=b.shadowOffsetY,g=b.shadowBlur,h=b.shadowColor,i=b.shadowOpacity,j=function(a,b){var d=2<arguments.length&&arguments[2]!==void 0?arguments[2]:0,e=3<arguments.length&&arguments[3]!==void 0?arguments[3]:100;c(_defineProperty({},a,restrictNumber(b,d,e)))};return React.createElement(React.Fragment,null,React.createElement(Slider,{label:d("horizontal"),annotation:"px",min:-100,max:100,onChange:function(a){return j("shadowOffsetX",a,-100,100)},value:e||0}),React.createElement(Slider,{label:d("vertical"),annotation:"px",min:-100,max:100,onChange:function(a){return j("shadowOffsetY",a,-100,100)},value:f||0}),React.createElement(Slider,{label:d("blur"),annotation:"%",onChange:function(a){return j("shadowBlur",a)},value:g}),React.createElement(Slider,{label:d("opacity"),annotation:"%",onChange:function(a){return j("shadowOpacity",a/100,0,1)},value:Math.round(100*(null!==i&&void 0!==i?i:0))}),React.createElement(ColorInput,{color:h,onChange:function(a){c({shadowColor:a})},colorFor:"shadow"}))};export default ShadowFields;
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import ColorInput from "../color-input";
+import restrictNumber from "../../../utils/restrict-number";
+import Slider from "../slider";
+var ShadowFields = function ShadowFields(_ref) {
+  var annotation = _ref.annotation,
+    updateAnnotation = _ref.updateAnnotation,
+    t = _ref.t;
+  var shadowOffsetX = annotation.shadowOffsetX,
+    shadowOffsetY = annotation.shadowOffsetY,
+    shadowBlur = annotation.shadowBlur,
+    shadowColor = annotation.shadowColor,
+    shadowOpacity = annotation.shadowOpacity;
+  var changeSliderValue = function changeSliderValue(property, newValue) {
+    var min = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
+    var max = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 100;
+    updateAnnotation(_defineProperty({}, property, restrictNumber(newValue, min, max)));
+  };
+  var changeShadowColor = function changeShadowColor(newShadowColor) {
+    updateAnnotation({
+      shadowColor: newShadowColor
+    });
+  };
+  return React.createElement(React.Fragment, null, React.createElement(Slider, {
+    label: t('horizontal'),
+    annotation: "px",
+    min: -100,
+    max: 100,
+    onChange: function onChange(val) {
+      return changeSliderValue('shadowOffsetX', val, -100, 100);
+    },
+    value: shadowOffsetX || 0
+  }), React.createElement(Slider, {
+    label: t('vertical'),
+    annotation: "px",
+    min: -100,
+    max: 100,
+    onChange: function onChange(val) {
+      return changeSliderValue('shadowOffsetY', val, -100, 100);
+    },
+    value: shadowOffsetY || 0
+  }), React.createElement(Slider, {
+    label: t('blur'),
+    annotation: "%",
+    onChange: function onChange(val) {
+      return changeSliderValue('shadowBlur', val);
+    },
+    value: shadowBlur
+  }), React.createElement(Slider, {
+    label: t('opacity'),
+    annotation: "%",
+    onChange: function onChange(val) {
+      return changeSliderValue('shadowOpacity', val / 100, 0, 1);
+    },
+    value: Math.round((shadowOpacity !== null && shadowOpacity !== void 0 ? shadowOpacity : 0) * 100)
+  }), React.createElement(ColorInput, {
+    color: shadowColor,
+    onChange: changeShadowColor,
+    colorFor: "shadow"
+  }));
+};
+export default ShadowFields;

package/lib/components/common/annotation-options/stroke-fields.js

@@ -1 +1,33 @@
-import ColorInput from"components/common/color-input";import restrictNumber from"utils/restrict-number";import Slider from"../slider";var MIN_PERCENTANGE=0,MAX_PERCENTANGE=100,StrokeFields=function(a){var b=a.annotation,c=a.updateAnnotation,d=a.t,e=b.stroke,f=b.strokeWidth;return React.createElement(React.Fragment,null,React.createElement(Slider,{label:d("stroke"),annotation:"px",onChange:function(a){c({strokeWidth:restrictNumber(a,MIN_PERCENTANGE,MAX_PERCENTANGE)})},value:f}),React.createElement(ColorInput,{color:e,onChange:function(a){c({stroke:a})},colorFor:"stroke"}))};export default StrokeFields;
+import ColorInput from "../color-input";
+import restrictNumber from "../../../utils/restrict-number";
+import Slider from "../slider";
+var MIN_PERCENTANGE = 0;
+var MAX_PERCENTANGE = 100;
+var StrokeFields = function StrokeFields(_ref) {
+  var annotation = _ref.annotation,
+    updateAnnotation = _ref.updateAnnotation,
+    t = _ref.t;
+  var stroke = annotation.stroke,
+    strokeWidth = annotation.strokeWidth;
+  var changeStrokeWidth = function changeStrokeWidth(newStrokeWidth) {
+    updateAnnotation({
+      strokeWidth: restrictNumber(newStrokeWidth, MIN_PERCENTANGE, MAX_PERCENTANGE)
+    });
+  };
+  var changeStrokeColor = function changeStrokeColor(newStrokeColor) {
+    updateAnnotation({
+      stroke: newStrokeColor
+    });
+  };
+  return React.createElement(React.Fragment, null, React.createElement(Slider, {
+    label: t('stroke'),
+    annotation: "px",
+    onChange: changeStrokeWidth,
+    value: strokeWidth
+  }), React.createElement(ColorInput, {
+    color: stroke,
+    onChange: changeStrokeColor,
+    colorFor: "stroke"
+  }));
+};
+export default StrokeFields;

package/lib/components/common/button-with-menu/index.js

@@ -1 +1,86 @@
-import _slicedToArray from"@babel/runtime/helpers/slicedToArray";import{useEffect,useState,useRef}from"react";import Box from"@mui/material/Box";import Button from"@mui/material/Button";import Menu from"@mui/material/Menu";import MenuItem from"@mui/material/MenuItem";import ListItemIcon from"@mui/material/ListItemIcon";import ListItemText from"@mui/material/ListItemText";import{useStore}from"hooks";var ButtonWithMenu=function(a){var b=a.label,c=void 0===b?"":b,d=a.menuItems,e=a.disabled,f=void 0!==e&&e,g=a.buttonRef,h=useStore(),i=h.t,j=useRef(!0),k=useState(null),l=_slicedToArray(k,2),m=l[0],n=l[1],o=d.filter(Boolean),p=1<o.length,q=function(a){j.current&&n(a.currentTarget)},r=function(){j.current&&n(null)},s=function(a){"function"==typeof a&&a(),r()};return useEffect(function(){return j.current=!0,function(){j.current=!1}},[]),React.createElement(React.Fragment,null,React.createElement(Box,{ref:g,sx:{display:"flex",alignItems:"center",flexShrink:0}},React.createElement(Button,{onClick:f?void 0:function(a){var b;return p?void q(a):void(null!==(b=o[0])&&void 0!==b&&b.onClick&&o[0].onClick())},disabled:f},c||i("saveAs"))),p&&React.createElement(Menu,{anchorEl:m,onClose:r,open:!!m},d.map(function(a){return a&&React.createElement(MenuItem,{key:a.key,selected:a.isActive,onClick:function(){return s(a.onClick)}},a.icon&&React.createElement(ListItemIcon,null,"string"==typeof a.icon?React.createElement("span",{dangerouslySetInnerHTML:{__html:a.icon}}):React.createElement(a.icon,null)),React.createElement(ListItemText,null,a.label))})))};export default ButtonWithMenu;
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import { useEffect, useState, useRef } from 'react';
+import Box from '@mui/material/Box';
+import Button from '@mui/material/Button';
+import Menu from '@mui/material/Menu';
+import MenuItem from '@mui/material/MenuItem';
+import ListItemIcon from '@mui/material/ListItemIcon';
+import ListItemText from '@mui/material/ListItemText';
+import { useStore } from "../../../hooks";
+var ButtonWithMenu = function ButtonWithMenu(_ref) {
+  var _ref$label = _ref.label,
+    label = _ref$label === void 0 ? '' : _ref$label,
+    menuItems = _ref.menuItems,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    buttonRef = _ref.buttonRef;
+  var _useStore = useStore(),
+    t = _useStore.t;
+  var isMounted = useRef(true);
+  var _useState = useState(null),
+    _useState2 = _slicedToArray(_useState, 2),
+    anchorEl = _useState2[0],
+    setAnchorEl = _useState2[1];
+  var filteredMenuItems = menuItems.filter(Boolean);
+  var hasMultipleMenuItems = filteredMenuItems.length > 1;
+  var openMenu = function openMenu(e) {
+    if (isMounted.current) {
+      setAnchorEl(e.currentTarget);
+    }
+  };
+  var closeMenu = function closeMenu() {
+    if (isMounted.current) {
+      setAnchorEl(null);
+    }
+  };
+  var handleMenuItemClick = function handleMenuItemClick(onItemClick) {
+    if (typeof onItemClick === 'function') {
+      onItemClick();
+    }
+    closeMenu();
+  };
+  var handleButtonClick = function handleButtonClick(e) {
+    var _filteredMenuItems$;
+    if (hasMultipleMenuItems) {
+      openMenu(e);
+      return;
+    }
+    if ((_filteredMenuItems$ = filteredMenuItems[0]) !== null && _filteredMenuItems$ !== void 0 && _filteredMenuItems$.onClick) {
+      filteredMenuItems[0].onClick();
+    }
+  };
+  useEffect(function () {
+    isMounted.current = true;
+    return function () {
+      isMounted.current = false;
+    };
+  }, []);
+  return React.createElement(React.Fragment, null, React.createElement(Box, {
+    ref: buttonRef,
+    sx: {
+      display: 'flex',
+      alignItems: 'center',
+      flexShrink: 0
+    }
+  }, React.createElement(Button, {
+    onClick: disabled ? undefined : handleButtonClick,
+    disabled: disabled
+  }, label || t('saveAs'))), hasMultipleMenuItems && React.createElement(Menu, {
+    anchorEl: anchorEl,
+    onClose: closeMenu,
+    open: Boolean(anchorEl)
+  }, menuItems.map(function (item) {
+    return item && React.createElement(MenuItem, {
+      key: item.key,
+      selected: item.isActive,
+      onClick: function onClick() {
+        return handleMenuItemClick(item.onClick);
+      }
+    }, item.icon && React.createElement(ListItemIcon, null, typeof item.icon === 'string' ? React.createElement("span", {
+      dangerouslySetInnerHTML: {
+        __html: item.icon
+      }
+    }) : React.createElement(item.icon, null)), React.createElement(ListItemText, null, item.label));
+  })));
+};
+export default ButtonWithMenu;

package/lib/components/common/color-input/index.js

@@ -1 +1,101 @@
-import _defineProperty from"@babel/runtime/helpers/defineProperty";import _slicedToArray from"@babel/runtime/helpers/slicedToArray";import{useEffect,useRef,useState}from"react";import Box from"@mui/material/Box";import{useStore}from"hooks";import{SET_LATEST_COLOR}from"actions";import ColorPickerModal from"../color-picker-modal";var ColorInput=function(a){var b=a.onChange,c=a.color,d=a.colorFor,e=useStore(),f=e.selectionsIds,g=void 0===f?[]:f,h=e.config.annotationsCommon,i=void 0===h?{}:h,j=e.dispatch,k=e.latestColors,l=void 0===k?{}:k,m=l[d],n=useState(),o=_slicedToArray(n,2),p=o[0],q=o[1],r=useState(function(){var a;return null!==(a=null!==m&&void 0!==m?m:c)&&void 0!==a?a:i.fill}),s=_slicedToArray(r,2),t=s[0],u=s[1],v=useRef(t),w=useState(c),x=_slicedToArray(w,2),y=x[0],z=x[1],A=useState(g.length),B=_slicedToArray(A,2),C=B[0],D=B[1],E=useState(0),F=_slicedToArray(E,2),G=F[0],H=F[1],I=useRef(0),J=0===g.length&&m||c;(c!==y||g.length!==C)&&(z(c),D(g.length),u(J),H(function(a){return a+1})),useEffect(function(){G>I.current&&J&&(I.current=G,b(J))},[G,J,b]);var K=function(a){q(p?void 0:a.currentTarget)};return React.createElement(React.Fragment,null,React.createElement(Box,{onClick:K,sx:{borderRadius:1,width:32,height:32,border:1,borderColor:"divider",cursor:"pointer",background:t}}),React.createElement(ColorPickerModal,{onChange:function(a){u(a),b(a),m!==a&&j({type:SET_LATEST_COLOR,payload:{latestColors:_defineProperty({},d,a)}})},defaultColor:t,open:!!p,onClose:function(a){var c,d,e=null!==(c=null!==(d=v.current)&&void 0!==d?d:t)&&void 0!==c?c:"";b(e),K(a)},onApply:K}))};export default ColorInput;
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import { useEffect, useRef, useState } from 'react';
+import Box from '@mui/material/Box';
+import { useStore } from "../../../hooks";
+import { SET_LATEST_COLOR } from "../../../actions";
+import ColorPickerModal from "../color-picker-modal";
+var ColorInput = function ColorInput(_ref) {
+  var onChange = _ref.onChange,
+    color = _ref.color,
+    colorFor = _ref.colorFor;
+  var _useStore = useStore(),
+    _useStore$selectionsI = _useStore.selectionsIds,
+    selectionsIds = _useStore$selectionsI === void 0 ? [] : _useStore$selectionsI,
+    _useStore$config$anno = _useStore.config.annotationsCommon,
+    annotationsCommon = _useStore$config$anno === void 0 ? {} : _useStore$config$anno,
+    dispatch = _useStore.dispatch,
+    _useStore$latestColor = _useStore.latestColors,
+    latestColors = _useStore$latestColor === void 0 ? {} : _useStore$latestColor;
+  var latestColor = latestColors[colorFor];
+  var _useState = useState(),
+    _useState2 = _slicedToArray(_useState, 2),
+    anchorEl = _useState2[0],
+    setAnchorEl = _useState2[1];
+  var _useState3 = useState(function () {
+      var _ref2;
+      return (_ref2 = latestColor !== null && latestColor !== void 0 ? latestColor : color) !== null && _ref2 !== void 0 ? _ref2 : annotationsCommon.fill;
+    }),
+    _useState4 = _slicedToArray(_useState3, 2),
+    currentColor = _useState4[0],
+    setCurrentColor = _useState4[1];
+  var initialColor = useRef(currentColor);
+  var _useState5 = useState(color),
+    _useState6 = _slicedToArray(_useState5, 2),
+    prevColor = _useState6[0],
+    setPrevColor = _useState6[1];
+  var _useState7 = useState(selectionsIds.length),
+    _useState8 = _slicedToArray(_useState7, 2),
+    prevSelectionsLength = _useState8[0],
+    setPrevSelectionsLength = _useState8[1];
+  var _useState9 = useState(0),
+    _useState0 = _slicedToArray(_useState9, 2),
+    propChangeCount = _useState0[0],
+    setPropChangeCount = _useState0[1];
+  var notifiedCountRef = useRef(0);
+  var derivedColor = selectionsIds.length === 0 && latestColor || color;
+  if (color !== prevColor || selectionsIds.length !== prevSelectionsLength) {
+    setPrevColor(color);
+    setPrevSelectionsLength(selectionsIds.length);
+    setCurrentColor(derivedColor);
+    setPropChangeCount(function (c) {
+      return c + 1;
+    });
+  }
+  useEffect(function () {
+    if (propChangeCount > notifiedCountRef.current && derivedColor) {
+      notifiedCountRef.current = propChangeCount;
+      onChange(derivedColor);
+    }
+  }, [propChangeCount, derivedColor, onChange]);
+  var changeColor = function changeColor(newColor) {
+    setCurrentColor(newColor);
+    onChange(newColor);
+    if (latestColor !== newColor) {
+      dispatch({
+        type: SET_LATEST_COLOR,
+        payload: {
+          latestColors: _defineProperty({}, colorFor, newColor)
+        }
+      });
+    }
+  };
+  var togglePicker = function togglePicker(e) {
+    setAnchorEl(anchorEl ? undefined : e.currentTarget);
+  };
+  var closePicker = function closePicker(e) {
+    var _ref3, _initialColor$current;
+    var colorToRestore = (_ref3 = (_initialColor$current = initialColor.current) !== null && _initialColor$current !== void 0 ? _initialColor$current : currentColor) !== null && _ref3 !== void 0 ? _ref3 : '';
+    onChange(colorToRestore);
+    togglePicker(e);
+  };
+  return React.createElement(React.Fragment, null, React.createElement(Box, {
+    onClick: togglePicker,
+    sx: {
+      borderRadius: 1,
+      width: 32,
+      height: 32,
+      border: 1,
+      borderColor: 'divider',
+      cursor: 'pointer',
+      background: currentColor
+    }
+  }), React.createElement(ColorPickerModal, {
+    onChange: changeColor,
+    defaultColor: currentColor,
+    open: Boolean(anchorEl),
+    onClose: closePicker,
+    onApply: togglePicker
+  }));
+};
+export default ColorInput;

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

@@ -1 +1,70 @@
-import _slicedToArray from"@babel/runtime/helpers/slicedToArray";import Box from"@mui/material/Box";import{SButton,SDialog,STextField}from"@solostylist/ui-kit/core";import{useCallback,useState}from"react";import{HexColorPicker}from"react-colorful";import{useStore}from"hooks";var ColorPickerModal=function(a){var b=a.defaultColor,c=void 0===b?"":b,d=a.onChange,f=void 0===d?function(){}:d,g=a.open,h=void 0!==g&&g,i=a.onClose,j=void 0===i?function(){}:i,k=a.onApply,l=void 0===k?function(){}:k,m=useStore(),n=m.t,e=useState(c||"#000000"),o=_slicedToArray(e,2),p=o[0],q=o[1],r=useCallback(function(a){q(a),f(a)},[f]),s=useCallback(function(a){var b=a.target.value.toUpperCase();b.startsWith("#")||(b="#".concat(b)),/^#[0-9A-F]{0,6}$/.test(b)&&(q(b),/^#[0-9A-F]{6}$/.test(b)&&f(b))},[f]);return h?React.createElement(SDialog,{onClose:j,open:h,title:n("colorPickerModalTitleLabel"),maxWidth:"xs",content:React.createElement(Box,null,React.createElement(HexColorPicker,{color:p,onChange:r,style:{width:"100%"}}),React.createElement(STextField,{value:p,onChange:s,fullWidth:!0,sx:{mt:2}})),actions:React.createElement(React.Fragment,null,React.createElement(SButton,{variant:"outlined",onClick:j},n("cancel")),React.createElement(SButton,{onClick:l},n("apply")))}):null};export default ColorPickerModal;
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import Box from '@mui/material/Box';
+import { SButton, SDialog, STextField } from '@solostylist/ui-kit/core';
+import { useCallback, useState } from 'react';
+import { HexColorPicker } from 'react-colorful';
+import { useStore } from "../../../hooks";
+var ColorPickerModal = function ColorPickerModal(_ref) {
+  var _ref$defaultColor = _ref.defaultColor,
+    defaultColor = _ref$defaultColor === void 0 ? '' : _ref$defaultColor,
+    _ref$onChange = _ref.onChange,
+    onChange = _ref$onChange === void 0 ? function () {} : _ref$onChange,
+    _ref$open = _ref.open,
+    open = _ref$open === void 0 ? false : _ref$open,
+    _ref$onClose = _ref.onClose,
+    onClose = _ref$onClose === void 0 ? function () {} : _ref$onClose,
+    _ref$onApply = _ref.onApply,
+    onApply = _ref$onApply === void 0 ? function () {} : _ref$onApply;
+  var _useStore = useStore(),
+    t = _useStore.t;
+  var _useState = useState(defaultColor || '#000000'),
+    _useState2 = _slicedToArray(_useState, 2),
+    currentColor = _useState2[0],
+    setCurrentColor = _useState2[1];
+  var handleColorChange = useCallback(function (newColor) {
+    setCurrentColor(newColor);
+    onChange(newColor);
+  }, [onChange]);
+  var handleInputChange = useCallback(function (e) {
+    var value = e.target.value.toUpperCase();
+    if (!value.startsWith('#')) {
+      value = "#".concat(value);
+    }
+    if (/^#[0-9A-F]{0,6}$/.test(value)) {
+      setCurrentColor(value);
+      if (/^#[0-9A-F]{6}$/.test(value)) {
+        onChange(value);
+      }
+    }
+  }, [onChange]);
+  if (!open) {
+    return null;
+  }
+  return React.createElement(SDialog, {
+    onClose: onClose,
+    open: open,
+    title: t('colorPickerModalTitleLabel'),
+    maxWidth: "xs",
+    content: React.createElement(Box, null, React.createElement(HexColorPicker, {
+      color: currentColor,
+      onChange: handleColorChange,
+      style: {
+        width: '100%'
+      }
+    }), React.createElement(STextField, {
+      value: currentColor,
+      onChange: handleInputChange,
+      fullWidth: true,
+      sx: {
+        mt: 2
+      }
+    })),
+    actions: React.createElement(React.Fragment, null, React.createElement(SButton, {
+      variant: "outlined",
+      onClick: onClose
+    }, t('cancel')), React.createElement(SButton, {
+      onClick: onApply
+    }, t('apply')))
+  });
+};
+export default ColorPickerModal;

package/lib/components/common/hidden-upload-input/index.js

@@ -1 +1,17 @@
-import _extends from"@babel/runtime/helpers/extends";import{forwardRef}from"react";var hiddenInputStyle={display:"none",width:1,height:1,position:"absolute",zIndex:-1},HiddenUploadInput=function(a,b){return React.createElement("input",_extends({type:"file",ref:b,style:hiddenInputStyle},a))};export default forwardRef(HiddenUploadInput);
+import _extends from "@babel/runtime/helpers/extends";
+import { forwardRef } from 'react';
+var hiddenInputStyle = {
+  display: 'none',
+  width: 1,
+  height: 1,
+  position: 'absolute',
+  zIndex: -1
+};
+var HiddenUploadInput = function HiddenUploadInput(props, ref) {
+  return React.createElement("input", _extends({
+    type: "file",
+    ref: ref,
+    style: hiddenInputStyle
+  }, props));
+};
+export default forwardRef(HiddenUploadInput);

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

@@ -1 +1,40 @@
-import _extends from"@babel/runtime/helpers/extends";import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";var _excluded=["children","active","border","onClick","title","className"];import{SIconButton}from"@solostylist/ui-kit/core";var SIconButtonWrapper=function(a){var b=a.children,c=a.active,d=a.border,e=a.onClick,f=a.title,g=a.className,h=_objectWithoutProperties(a,_excluded);return React.createElement(SIconButton,_extends({onClick:e,className:g,tooltipOptions:f?{title:f}:void 0,sx:function(){var a={p:1,gap:1};return void 0!==d&&d&&(a.border="1px solid",a.borderColor="divider"),void 0!==c&&c&&(a.borderColor="primary.main",a.bgcolor="action.selected",a.color="primary.main"),a}()},h),b)};export default SIconButtonWrapper;
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["children", "active", "border", "onClick", "title", "className"];
+import { SIconButton } from '@solostylist/ui-kit/core';
+var SIconButtonWrapper = function SIconButtonWrapper(_ref) {
+  var children = _ref.children,
+    _ref$active = _ref.active,
+    active = _ref$active === void 0 ? false : _ref$active,
+    _ref$border = _ref.border,
+    border = _ref$border === void 0 ? false : _ref$border,
+    onClick = _ref.onClick,
+    title = _ref.title,
+    className = _ref.className,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var getSxStyles = function getSxStyles() {
+    var baseSx = {
+      p: 1,
+      gap: 1
+    };
+    if (border) {
+      baseSx.border = '1px solid';
+      baseSx.borderColor = 'divider';
+    }
+    if (active) {
+      baseSx.borderColor = 'primary.main';
+      baseSx.bgcolor = 'action.selected';
+      baseSx.color = 'primary.main';
+    }
+    return baseSx;
+  };
+  return React.createElement(SIconButton, _extends({
+    onClick: onClick,
+    className: className,
+    tooltipOptions: title ? {
+      title: title
+    } : undefined,
+    sx: getSxStyles()
+  }, rest), children);
+};
+export default SIconButtonWrapper;

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

@@ -1 +1,57 @@
-import _extends from"@babel/runtime/helpers/extends";import _defineProperty from"@babel/runtime/helpers/defineProperty";import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";var _excluded=["src","alt","onClick","selected","size","sx"];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";var ImagePreviewTile=function(a){var b=a.src,c=a.alt,d=void 0===c?"":c,e=a.onClick,f=a.selected,g=a.size,h=void 0===g?120:g,i=a.sx,j=void 0===i?{}:i,k=_objectWithoutProperties(a,_excluded);return React.createElement(SFlexBox,_extends({onClick:e,"aria-selected":void 0!==f&&f,sx:_objectSpread({display:"flex",alignItems:"center",justifyContent:"center",width:h,height:h,cursor:"pointer",borderRadius:1,userSelect:"none",background:"repeating-conic-gradient(#808080 0% 25%, transparent 0% 50%) 50% / 10px 10px",backgroundColor:"#fff",overflow:"hidden",transition:"all 0.2s ease-in-out",border:"2px solid transparent","&:hover":{borderColor:"primary.main",transform:"scale(1.05)"},'&[aria-selected="true"]':{borderColor:"primary.main"}},j)},k),React.createElement("img",{style:{width:"100%",height:"100%",objectFit:"contain"},src:b,alt:d,crossOrigin:"anonymous",draggable:!1}))};export default ImagePreviewTile;
+import _extends from "@babel/runtime/helpers/extends";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+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/core';
+var ImagePreviewTile = function ImagePreviewTile(_ref) {
+  var src = _ref.src,
+    _ref$alt = _ref.alt,
+    alt = _ref$alt === void 0 ? '' : _ref$alt,
+    onClick = _ref.onClick,
+    _ref$selected = _ref.selected,
+    selected = _ref$selected === void 0 ? false : _ref$selected,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 120 : _ref$size,
+    _ref$sx = _ref.sx,
+    sx = _ref$sx === void 0 ? {} : _ref$sx,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  return React.createElement(SFlexBox, _extends({
+    onClick: onClick,
+    "aria-selected": selected,
+    sx: _objectSpread({
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      width: size,
+      height: size,
+      cursor: 'pointer',
+      borderRadius: 1,
+      userSelect: 'none',
+      background: 'repeating-conic-gradient(#808080 0% 25%, transparent 0% 50%) 50% / 10px 10px',
+      backgroundColor: '#fff',
+      overflow: 'hidden',
+      transition: 'all 0.2s ease-in-out',
+      border: '2px solid transparent',
+      '&:hover': {
+        borderColor: 'primary.main',
+        transform: 'scale(1.05)'
+      },
+      '&[aria-selected="true"]': {
+        borderColor: 'primary.main'
+      }
+    }, sx)
+  }, rest), React.createElement("img", {
+    style: {
+      width: '100%',
+      height: '100%',
+      objectFit: 'contain'
+    },
+    src: src,
+    alt: alt,
+    crossOrigin: "anonymous",
+    draggable: false
+  }));
+};
+export default ImagePreviewTile;

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

@@ -1 +1,38 @@
-import _extends from"@babel/runtime/helpers/extends";import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";var _excluded=["annotation","label","value","onChange","width"];import MuiSlider from"@mui/material/Slider";import{Box,Typography}from"@mui/material";import{SFlexBox}from"@solostylist/ui-kit/core";var Slider=function(a){var b=a.annotation,c=a.label,d=a.value,e=a.onChange,f=a.width,g=_objectWithoutProperties(a,_excluded);return React.createElement(Box,{display:"flex",flexDirection:"column",alignItems:"flex-start"},React.createElement(Typography,{variant:"subtitle2"},c),React.createElement(SFlexBox,{width:"100%",alignItems:"center",gap:2},React.createElement(MuiSlider,_extends({size:"small",onChange:function(a,b){return e?e(b):void 0},sx:{width:f||"200px",maxWidth:f||"200px"},value:d},g)),React.createElement(Typography,{variant:"body2"},"".concat(d).concat(b||""))))};export default Slider;
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["annotation", "label", "value", "onChange", "width"];
+import MuiSlider from '@mui/material/Slider';
+import { Box, Typography } from '@mui/material';
+import { SFlexBox } from '@solostylist/ui-kit/core';
+var Slider = function Slider(_ref) {
+  var annotation = _ref.annotation,
+    label = _ref.label,
+    value = _ref.value,
+    _onChange = _ref.onChange,
+    width = _ref.width,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return React.createElement(Box, {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "flex-start"
+  }, React.createElement(Typography, {
+    variant: "subtitle2"
+  }, label), React.createElement(SFlexBox, {
+    width: "100%",
+    alignItems: "center",
+    gap: 2
+  }, React.createElement(MuiSlider, _extends({
+    size: "small",
+    onChange: function onChange(_e, val) {
+      return _onChange ? _onChange(val) : undefined;
+    },
+    sx: {
+      width: width || '200px',
+      maxWidth: width || '200px'
+    },
+    value: value
+  }, props)), React.createElement(Typography, {
+    variant: "body2"
+  }, "".concat(value).concat(annotation || ''))));
+};
+export default Slider;

package/lib/components/feedback-popup/index.js

@@ -1 +1,41 @@
-import _defineProperty from"@babel/runtime/helpers/defineProperty";import Snackbar from"@mui/material/Snackbar";import Alert from"@mui/material/Alert";import{SET_FEEDBACK}from"actions";import{useStore}from"hooks";import{FEEDBACK_STATUSES}from"utils/constants";var defaultAnchorOrigin={horizontal:"center",vertical:"bottom"},ERROR_TO_SEVERITY=_defineProperty(_defineProperty({},FEEDBACK_STATUSES.ERROR,"error"),FEEDBACK_STATUSES.WARNING,"warning"),FeedbackPopup=function(a){var b,c=a.anchorOrigin,d=void 0===c?defaultAnchorOrigin:c,e=useStore(),f=e.feedback,g=void 0===f?{}:f,h=e.dispatch;if(!g.message)return null;var i=function(){h({type:SET_FEEDBACK,payload:{feedback:{}}})};return React.createElement(Snackbar,{anchorOrigin:d,autoHideDuration:null!==(b=g.duration)&&void 0!==b?b:5e3,open:!!g.message,onClose:i},React.createElement(Alert,{onClose:i,severity:ERROR_TO_SEVERITY[g.status||FEEDBACK_STATUSES.ERROR]},g.message))};export default FeedbackPopup;
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import Snackbar from '@mui/material/Snackbar';
+import Alert from '@mui/material/Alert';
+import { SET_FEEDBACK } from "../../actions";
+import { useStore } from "../../hooks";
+import { FEEDBACK_STATUSES } from "../../utils/constants";
+var defaultAnchorOrigin = {
+  horizontal: 'center',
+  vertical: 'bottom'
+};
+var ERROR_TO_SEVERITY = _defineProperty(_defineProperty({}, FEEDBACK_STATUSES.ERROR, 'error'), FEEDBACK_STATUSES.WARNING, 'warning');
+var FeedbackPopup = function FeedbackPopup(_ref) {
+  var _feedback$duration;
+  var _ref$anchorOrigin = _ref.anchorOrigin,
+    anchorOrigin = _ref$anchorOrigin === void 0 ? defaultAnchorOrigin : _ref$anchorOrigin;
+  var _useStore = useStore(),
+    _useStore$feedback = _useStore.feedback,
+    feedback = _useStore$feedback === void 0 ? {} : _useStore$feedback,
+    dispatch = _useStore.dispatch;
+  if (!feedback.message) {
+    return null;
+  }
+  var onClose = function onClose() {
+    dispatch({
+      type: SET_FEEDBACK,
+      payload: {
+        feedback: {}
+      }
+    });
+  };
+  return React.createElement(Snackbar, {
+    anchorOrigin: anchorOrigin,
+    autoHideDuration: (_feedback$duration = feedback.duration) !== null && _feedback$duration !== void 0 ? _feedback$duration : 5000,
+    open: Boolean(feedback.message),
+    onClose: onClose
+  }, React.createElement(Alert, {
+    onClose: onClose,
+    severity: ERROR_TO_SEVERITY[feedback.status || FEEDBACK_STATUSES.ERROR]
+  }, feedback.message));
+};
+export default FeedbackPopup;

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

@@ -1 +1,10 @@
-import _defineProperty from"@babel/runtime/helpers/defineProperty";import{TOOLS_IDS}from"utils/constants";import RectNode from"./rect-node";import EllipseNode from"./ellipse-node";import PolygonNode from"./polygon-node";import TextNode from"./text-node";import ImageNode from"./image-node";import LineNode from"./line-node";import ArrowNode from"./arrow-node";export var ANNOTATION_NAMES_TO_COMPONENT=_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({},TOOLS_IDS.RECT,RectNode),TOOLS_IDS.ELLIPSE,EllipseNode),TOOLS_IDS.POLYGON,PolygonNode),TOOLS_IDS.TEXT,TextNode),TOOLS_IDS.IMAGE,ImageNode),TOOLS_IDS.LINE,LineNode),TOOLS_IDS.ARROW,ArrowNode),TOOLS_IDS.PEN,LineNode);
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import { TOOLS_IDS } from "../../../../utils/constants";
+import RectNode from "./rect-node";
+import EllipseNode from "./ellipse-node";
+import PolygonNode from "./polygon-node";
+import TextNode from "./text-node";
+import ImageNode from "./image-node";
+import LineNode from "./line-node";
+import ArrowNode from "./arrow-node";
+export var ANNOTATION_NAMES_TO_COMPONENT = _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, TOOLS_IDS.RECT, RectNode), TOOLS_IDS.ELLIPSE, EllipseNode), TOOLS_IDS.POLYGON, PolygonNode), TOOLS_IDS.TEXT, TextNode), TOOLS_IDS.IMAGE, ImageNode), TOOLS_IDS.LINE, LineNode), TOOLS_IDS.ARROW, ArrowNode), TOOLS_IDS.PEN, LineNode);