@solostylist/image-editor 1.0.9 → 1.0.11

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

@@ -1 +1,139 @@
-import Konva from"konva";import*as CustomKonvaFilters from"custom/filters";var konvaFilters=Konva.Filters;export var AVAILABLE_FILTERS=[{label:"Original",filterFn:null},{label:"Invert",filterFn:konvaFilters.Invert},{label:"Black & White",filterFn:CustomKonvaFilters.BlackAndWhite},{label:"Sepia",filterFn:konvaFilters.Sepia},{label:"Solarize",filterFn:konvaFilters.Solarize},{label:"Clarendon",filterFn:CustomKonvaFilters.Clarendon},{label:"Gingham",filterFn:CustomKonvaFilters.Gingham},{label:"Moon",filterFn:CustomKonvaFilters.Moon},{label:"Lark",filterFn:CustomKonvaFilters.Lark},{label:"Reyes",filterFn:CustomKonvaFilters.Reyes},{label:"Juno",filterFn:CustomKonvaFilters.Juno},{label:"Slumber",filterFn:CustomKonvaFilters.Slumber},{label:"Crema",filterFn:CustomKonvaFilters.Crema},{label:"Ludwig",filterFn:CustomKonvaFilters.Ludwig},{label:"Aden",filterFn:CustomKonvaFilters.Aden},{label:"Perpetua",filterFn:CustomKonvaFilters.Perpetua},{label:"Amaro",filterFn:CustomKonvaFilters.Amaro},{label:"Mayfair",filterFn:CustomKonvaFilters.Mayfair},{label:"Rise",filterFn:CustomKonvaFilters.Rise},{label:"Hudson",filterFn:CustomKonvaFilters.Hudson},{label:"Valencia",filterFn:CustomKonvaFilters.Valencia},{label:"X-Pro II",filterFn:CustomKonvaFilters.XPro2},{label:"Sierra",filterFn:CustomKonvaFilters.Sierra},{label:"Willow",filterFn:CustomKonvaFilters.Willow},{label:"Lo-Fi",filterFn:CustomKonvaFilters.LoFi},{label:"Inkwell",filterFn:konvaFilters.Grayscale},{label:"Hefe",filterFn:CustomKonvaFilters.Hefe},{label:"Nashville",filterFn:CustomKonvaFilters.Nashville},{label:"Stinson",filterFn:CustomKonvaFilters.Stinson},{label:"Vesper",filterFn:CustomKonvaFilters.Vesper},{label:"Earlybird",filterFn:CustomKonvaFilters.Earlybird},{label:"Brannan",filterFn:CustomKonvaFilters.Brannan},{label:"Sutro",filterFn:CustomKonvaFilters.Sutro},{label:"Toaster",filterFn:CustomKonvaFilters.Toaster},{label:"Walden",filterFn:CustomKonvaFilters.Walden},{label:"1977",filterFn:CustomKonvaFilters.NinteenSeventySeven},{label:"Kelvin",filterFn:CustomKonvaFilters.Kelvin},{label:"Maven",filterFn:CustomKonvaFilters.Maven},{label:"Ginza",filterFn:CustomKonvaFilters.Ginza},{label:"Skyline",filterFn:CustomKonvaFilters.Skyline},{label:"Dogpatch",filterFn:CustomKonvaFilters.Dogpatch},{label:"Brooklyn",filterFn:CustomKonvaFilters.Brooklyn},{label:"Helena",filterFn:CustomKonvaFilters.Helena},{label:"Ashby",filterFn:CustomKonvaFilters.Ashby},{label:"Charmes",filterFn:CustomKonvaFilters.Charmes}];
+import Konva from 'konva';
+import * as CustomKonvaFilters from "../../../custom/filters";
+var konvaFilters = Konva.Filters;
+export var AVAILABLE_FILTERS = [{
+  label: 'Original',
+  filterFn: null
+}, {
+  label: 'Invert',
+  filterFn: konvaFilters.Invert
+}, {
+  label: 'Black & White',
+  filterFn: CustomKonvaFilters.BlackAndWhite
+}, {
+  label: 'Sepia',
+  filterFn: konvaFilters.Sepia
+}, {
+  label: 'Solarize',
+  filterFn: konvaFilters.Solarize
+}, {
+  label: 'Clarendon',
+  filterFn: CustomKonvaFilters.Clarendon
+}, {
+  label: 'Gingham',
+  filterFn: CustomKonvaFilters.Gingham
+}, {
+  label: 'Moon',
+  filterFn: CustomKonvaFilters.Moon
+}, {
+  label: 'Lark',
+  filterFn: CustomKonvaFilters.Lark
+}, {
+  label: 'Reyes',
+  filterFn: CustomKonvaFilters.Reyes
+}, {
+  label: 'Juno',
+  filterFn: CustomKonvaFilters.Juno
+}, {
+  label: 'Slumber',
+  filterFn: CustomKonvaFilters.Slumber
+}, {
+  label: 'Crema',
+  filterFn: CustomKonvaFilters.Crema
+}, {
+  label: 'Ludwig',
+  filterFn: CustomKonvaFilters.Ludwig
+}, {
+  label: 'Aden',
+  filterFn: CustomKonvaFilters.Aden
+}, {
+  label: 'Perpetua',
+  filterFn: CustomKonvaFilters.Perpetua
+}, {
+  label: 'Amaro',
+  filterFn: CustomKonvaFilters.Amaro
+}, {
+  label: 'Mayfair',
+  filterFn: CustomKonvaFilters.Mayfair
+}, {
+  label: 'Rise',
+  filterFn: CustomKonvaFilters.Rise
+}, {
+  label: 'Hudson',
+  filterFn: CustomKonvaFilters.Hudson
+}, {
+  label: 'Valencia',
+  filterFn: CustomKonvaFilters.Valencia
+}, {
+  label: 'X-Pro II',
+  filterFn: CustomKonvaFilters.XPro2
+}, {
+  label: 'Sierra',
+  filterFn: CustomKonvaFilters.Sierra
+}, {
+  label: 'Willow',
+  filterFn: CustomKonvaFilters.Willow
+}, {
+  label: 'Lo-Fi',
+  filterFn: CustomKonvaFilters.LoFi
+}, {
+  label: 'Inkwell',
+  filterFn: konvaFilters.Grayscale
+}, {
+  label: 'Hefe',
+  filterFn: CustomKonvaFilters.Hefe
+}, {
+  label: 'Nashville',
+  filterFn: CustomKonvaFilters.Nashville
+}, {
+  label: 'Stinson',
+  filterFn: CustomKonvaFilters.Stinson
+}, {
+  label: 'Vesper',
+  filterFn: CustomKonvaFilters.Vesper
+}, {
+  label: 'Earlybird',
+  filterFn: CustomKonvaFilters.Earlybird
+}, {
+  label: 'Brannan',
+  filterFn: CustomKonvaFilters.Brannan
+}, {
+  label: 'Sutro',
+  filterFn: CustomKonvaFilters.Sutro
+}, {
+  label: 'Toaster',
+  filterFn: CustomKonvaFilters.Toaster
+}, {
+  label: 'Walden',
+  filterFn: CustomKonvaFilters.Walden
+}, {
+  label: '1977',
+  filterFn: CustomKonvaFilters.NinteenSeventySeven
+}, {
+  label: 'Kelvin',
+  filterFn: CustomKonvaFilters.Kelvin
+}, {
+  label: 'Maven',
+  filterFn: CustomKonvaFilters.Maven
+}, {
+  label: 'Ginza',
+  filterFn: CustomKonvaFilters.Ginza
+}, {
+  label: 'Skyline',
+  filterFn: CustomKonvaFilters.Skyline
+}, {
+  label: 'Dogpatch',
+  filterFn: CustomKonvaFilters.Dogpatch
+}, {
+  label: 'Brooklyn',
+  filterFn: CustomKonvaFilters.Brooklyn
+}, {
+  label: 'Helena',
+  filterFn: CustomKonvaFilters.Helena
+}, {
+  label: 'Ashby',
+  filterFn: CustomKonvaFilters.Ashby
+}, {
+  label: 'Charmes',
+  filterFn: CustomKonvaFilters.Charmes
+}];

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

@@ -1 +1,74 @@
-import _slicedToArray from"@babel/runtime/helpers/slicedToArray";import{Box}from"@mui/material";import{SCarousel}from"@solostylist/ui-kit/carousel";import{useFilter,useStore}from"hooks";import FilterItem from"./filter-item";import{AVAILABLE_FILTERS}from"./filters.constants";var responsiveSettings=[{breakpoint:1600,settings:{slidesToShow:14,slidesToScroll:7}},{breakpoint:1400,settings:{slidesToShow:12,slidesToScroll:6}},{breakpoint:1200,settings:{slidesToShow:10,slidesToScroll:5}},{breakpoint:900,settings:{slidesToShow:8,slidesToScroll:4}},{breakpoint:600,settings:{slidesToShow:5,slidesToScroll:3}},{breakpoint:400,settings:{slidesToShow:4,slidesToScroll:2}}],Filters=function(){var a=useStore(),b=a.originalImage,c=useFilter(),d=_slicedToArray(c,2),e=d[0],f=d[1];return React.createElement(Box,{sx:{width:"100%",flex:"1 1 100%",display:"block",minWidth:0,overflow:"hidden"}},React.createElement(SCarousel,{slidesToShow:16,slidesToScroll:8,responsive:responsiveSettings},AVAILABLE_FILTERS.map(function(a){return React.createElement(FilterItem,{key:a.label,filterLabel:a.label,filterFn:a.filterFn,applyFilter:f,isActive:e===a.filterFn,image:b})})))};export default Filters;
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import { Box } from '@mui/material';
+import { SCarousel } from '@solostylist/ui-kit/carousel';
+import { useFilter, useStore } from "../../../hooks";
+import FilterItem from "./filter-item";
+import { AVAILABLE_FILTERS } from "./filters.constants";
+var responsiveSettings = [{
+  breakpoint: 1600,
+  settings: {
+    slidesToShow: 14,
+    slidesToScroll: 7
+  }
+}, {
+  breakpoint: 1400,
+  settings: {
+    slidesToShow: 12,
+    slidesToScroll: 6
+  }
+}, {
+  breakpoint: 1200,
+  settings: {
+    slidesToShow: 10,
+    slidesToScroll: 5
+  }
+}, {
+  breakpoint: 900,
+  settings: {
+    slidesToShow: 8,
+    slidesToScroll: 4
+  }
+}, {
+  breakpoint: 600,
+  settings: {
+    slidesToShow: 5,
+    slidesToScroll: 3
+  }
+}, {
+  breakpoint: 400,
+  settings: {
+    slidesToShow: 4,
+    slidesToScroll: 2
+  }
+}];
+var Filters = function Filters() {
+  var _useStore = useStore(),
+    originalImage = _useStore.originalImage;
+  var _useFilter = useFilter(),
+    _useFilter2 = _slicedToArray(_useFilter, 2),
+    appliedFilter = _useFilter2[0],
+    applyFilter = _useFilter2[1];
+  return React.createElement(Box, {
+    sx: {
+      width: '100%',
+      flex: '1 1 100%',
+      display: 'block',
+      minWidth: 0,
+      overflow: 'hidden'
+    }
+  }, React.createElement(SCarousel, {
+    slidesToShow: 16,
+    slidesToScroll: 8,
+    responsive: responsiveSettings
+  }, AVAILABLE_FILTERS.map(function (filter) {
+    return React.createElement(FilterItem, {
+      key: filter.label,
+      filterLabel: filter.label,
+      filterFn: filter.filterFn,
+      applyFilter: applyFilter,
+      isActive: appliedFilter === filter.filterFn,
+      image: originalImage
+    });
+  })));
+};
+export default Filters;

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

@@ -1 +1 @@
-export{default as Filters}from"./filters";
+export { default as Filters } from "./filters";

package/lib/components/tools/flip/flip-x.js

@@ -1 +1,48 @@
-import{FlipOutlined}from"@mui/icons-material";import{useCallback,useMemo}from"react";import{TOGGLE_FLIP}from"actions";import ToolsBarItemButton from"components/tools-bar/tools-bar-item-button";import{useStore}from"hooks";import{FLIP_DIRECTIONS,TOOLS_IDS}from"utils/constants";var FlipX=function(a){var b=a.selectTool,c=a.isSelected,d=a.t,e=useStore(),f=e.dispatch,g=e.adjustments.isFlippedX,h=useMemo(function(){return g?d("unFlipX"):d("flipX")},[g,d]),i=useMemo(function(){return g?{sx:{transform:"scaleX(-1)"}}:void 0},[g]),j=useCallback(function(){f({type:TOGGLE_FLIP,payload:{direction:FLIP_DIRECTIONS.X}})},[]),k=useCallback(function(a){a&&b(a),j()},[]);return React.createElement(ToolsBarItemButton,{id:TOOLS_IDS.FLIP_X,label:h,Icon:FlipOutlined,onClick:k,isSelected:void 0!==c&&c,slotProps:{icon:i}})};export default FlipX;
+import { FlipOutlined } from '@mui/icons-material';
+import { useCallback, useMemo } from 'react';
+import { TOGGLE_FLIP } from "../../../actions";
+import ToolsBarItemButton from "../../tools-bar/tools-bar-item-button";
+import { useStore } from "../../../hooks";
+import { FLIP_DIRECTIONS, TOOLS_IDS } from "../../../utils/constants";
+var FlipX = function FlipX(_ref) {
+  var selectTool = _ref.selectTool,
+    _ref$isSelected = _ref.isSelected,
+    isSelected = _ref$isSelected === void 0 ? false : _ref$isSelected,
+    t = _ref.t;
+  var _useStore = useStore(),
+    dispatch = _useStore.dispatch,
+    isFlippedX = _useStore.adjustments.isFlippedX;
+  var label = useMemo(function () {
+    return isFlippedX ? t('unFlipX') : t('flipX');
+  }, [isFlippedX, t]);
+  var iconSlotProps = useMemo(function () {
+    return isFlippedX ? {
+      sx: {
+        transform: 'scaleX(-1)'
+      }
+    } : undefined;
+  }, [isFlippedX]);
+  var toggleFlipX = useCallback(function () {
+    dispatch({
+      type: TOGGLE_FLIP,
+      payload: {
+        direction: FLIP_DIRECTIONS.X
+      }
+    });
+  }, []);
+  var handleButtonClick = useCallback(function (flipXToolId) {
+    if (flipXToolId) selectTool(flipXToolId);
+    toggleFlipX();
+  }, []);
+  return React.createElement(ToolsBarItemButton, {
+    id: TOOLS_IDS.FLIP_X,
+    label: label,
+    Icon: FlipOutlined,
+    onClick: handleButtonClick,
+    isSelected: isSelected,
+    slotProps: {
+      icon: iconSlotProps
+    }
+  });
+};
+export default FlipX;

package/lib/components/tools/flip/flip-y.js

@@ -1 +1,50 @@
-import{FlipOutlined}from"@mui/icons-material";import{useCallback,useMemo}from"react";import{TOGGLE_FLIP}from"actions";import ToolsBarItemButton from"components/tools-bar/tools-bar-item-button";import{useStore}from"hooks";import{FLIP_DIRECTIONS,TOOLS_IDS}from"utils/constants";var FlipY=function(a){var b=a.selectTool,c=a.isSelected,d=a.t,e=useStore(),f=e.dispatch,g=e.adjustments.isFlippedY,h=useMemo(function(){return g?d("unFlipY"):d("flipY")},[g,d]),i=useMemo(function(){return{sx:g?{transform:"rotate(90deg)"}:{transform:"rotate(270deg)"}}},[g]),j=useCallback(function(){f({type:TOGGLE_FLIP,payload:{direction:FLIP_DIRECTIONS.Y}})},[]),k=useCallback(function(a){a&&b(a),j()},[]);return React.createElement(ToolsBarItemButton,{id:TOOLS_IDS.FLIP_Y,label:h,Icon:FlipOutlined,onClick:k,isSelected:void 0!==c&&c,slotProps:{icon:i}})};export default FlipY;
+import { FlipOutlined } from '@mui/icons-material';
+import { useCallback, useMemo } from 'react';
+import { TOGGLE_FLIP } from "../../../actions";
+import ToolsBarItemButton from "../../tools-bar/tools-bar-item-button";
+import { useStore } from "../../../hooks";
+import { FLIP_DIRECTIONS, TOOLS_IDS } from "../../../utils/constants";
+var FlipY = function FlipY(_ref) {
+  var selectTool = _ref.selectTool,
+    _ref$isSelected = _ref.isSelected,
+    isSelected = _ref$isSelected === void 0 ? false : _ref$isSelected,
+    t = _ref.t;
+  var _useStore = useStore(),
+    dispatch = _useStore.dispatch,
+    isFlippedY = _useStore.adjustments.isFlippedY;
+  var label = useMemo(function () {
+    return isFlippedY ? t('unFlipY') : t('flipY');
+  }, [isFlippedY, t]);
+  var iconSlotProps = useMemo(function () {
+    return {
+      sx: isFlippedY ? {
+        transform: 'rotate(90deg)'
+      } : {
+        transform: 'rotate(270deg)'
+      }
+    };
+  }, [isFlippedY]);
+  var toggleFlipY = useCallback(function () {
+    dispatch({
+      type: TOGGLE_FLIP,
+      payload: {
+        direction: FLIP_DIRECTIONS.Y
+      }
+    });
+  }, []);
+  var handleButtonClick = useCallback(function (flipYToolId) {
+    if (flipYToolId) selectTool(flipYToolId);
+    toggleFlipY();
+  }, []);
+  return React.createElement(ToolsBarItemButton, {
+    id: TOOLS_IDS.FLIP_Y,
+    label: label,
+    Icon: FlipOutlined,
+    onClick: handleButtonClick,
+    isSelected: isSelected,
+    slotProps: {
+      icon: iconSlotProps
+    }
+  });
+};
+export default FlipY;

package/lib/components/tools/flip/index.js

@@ -1 +1,2 @@
-export{default as FlipX}from"./flip-x";export{default as FlipY}from"./flip-y";
+export { default as FlipX } from "./flip-x";
+export { default as FlipY } from "./flip-y";

package/lib/components/tools/hsv/hsv.js

@@ -1 +1,17 @@
-import{GradientOutlined as SaturationIcon}from"@mui/icons-material";import ToolsBarItemButton from"components/tools-bar/tools-bar-item-button";import{TOOLS_IDS}from"utils/constants";var HSV=function(a){var b=a.selectTool,c=a.isSelected,d=a.t;return React.createElement(ToolsBarItemButton,{id:TOOLS_IDS.HSV,label:d("hsvTool"),Icon:SaturationIcon,onClick:b,isSelected:void 0!==c&&c})};export default HSV;
+import { GradientOutlined as SaturationIcon } from '@mui/icons-material';
+import ToolsBarItemButton from "../../tools-bar/tools-bar-item-button";
+import { TOOLS_IDS } from "../../../utils/constants";
+var HSV = function HSV(_ref) {
+  var selectTool = _ref.selectTool,
+    _ref$isSelected = _ref.isSelected,
+    isSelected = _ref$isSelected === void 0 ? false : _ref$isSelected,
+    t = _ref.t;
+  return React.createElement(ToolsBarItemButton, {
+    id: TOOLS_IDS.HSV,
+    label: t('hsvTool'),
+    Icon: SaturationIcon,
+    onClick: selectTool,
+    isSelected: isSelected
+  });
+};
+export default HSV;

package/lib/components/tools/hsv/hsvoptions.js

@@ -1 +1,60 @@
-import _defineProperty from"@babel/runtime/helpers/defineProperty";import _slicedToArray from"@babel/runtime/helpers/slicedToArray";import Konva from"konva";import{Box}from"@mui/material";import Slider from"components/common/slider";import{useFinetune}from"hooks";var DEFAULT_VALUE={hue:0,saturation:0,value:0},MAX_VALUE={hue:259,saturation:10,value:2},HSVOptions=function(a){var b,c,d,e=a.t,f=useFinetune(Konva.Filters.HSV,DEFAULT_VALUE),g=_slicedToArray(f,2),h=g[0],i=g[1],j=function(a,b){i(_defineProperty({},a,b>MAX_VALUE[a]?MAX_VALUE[a]:+b))};return React.createElement(Box,{display:"flex",justifyContent:"center",gap:2},React.createElement(Slider,{label:e("hue"),min:0,step:1,max:259,value:null!==(b=h.hue)&&void 0!==b?b:DEFAULT_VALUE.hue,onChange:function(a){return j("hue",a)}}),React.createElement(Slider,{label:e("saturation"),min:-2,step:.5,max:10,value:null!==(c=h.saturation)&&void 0!==c?c:DEFAULT_VALUE.saturation,onChange:function(a){return j("saturation",a)}}),React.createElement(Slider,{label:e("value"),min:-2,step:.1,max:2,value:null!==(d=h.value)&&void 0!==d?d:DEFAULT_VALUE.value,onChange:function(a){return j("value",a)}}))};export default HSVOptions;
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import Konva from 'konva';
+import { Box } from '@mui/material';
+import Slider from "../../common/slider";
+import { useFinetune } from "../../../hooks";
+var DEFAULT_VALUE = {
+  hue: 0,
+  saturation: 0,
+  value: 0
+};
+var MAX_VALUE = {
+  hue: 259,
+  saturation: 10,
+  value: 2
+};
+var HSVOptions = function HSVOptions(_ref) {
+  var _finetuneProps$hue, _finetuneProps$satura, _finetuneProps$value;
+  var t = _ref.t;
+  var _useFinetune = useFinetune(Konva.Filters.HSV, DEFAULT_VALUE),
+    _useFinetune2 = _slicedToArray(_useFinetune, 2),
+    finetuneProps = _useFinetune2[0],
+    setFinetuneProps = _useFinetune2[1];
+  var changeValue = function changeValue(name, value) {
+    setFinetuneProps(_defineProperty({}, name, value > MAX_VALUE[name] ? MAX_VALUE[name] : +value));
+  };
+  return React.createElement(Box, {
+    display: "flex",
+    justifyContent: "center",
+    gap: 2
+  }, React.createElement(Slider, {
+    label: t('hue'),
+    min: 0,
+    step: 1,
+    max: 259,
+    value: (_finetuneProps$hue = finetuneProps.hue) !== null && _finetuneProps$hue !== void 0 ? _finetuneProps$hue : DEFAULT_VALUE.hue,
+    onChange: function onChange(val) {
+      return changeValue('hue', val);
+    }
+  }), React.createElement(Slider, {
+    label: t('saturation'),
+    min: -2,
+    step: 0.5,
+    max: 10,
+    value: (_finetuneProps$satura = finetuneProps.saturation) !== null && _finetuneProps$satura !== void 0 ? _finetuneProps$satura : DEFAULT_VALUE.saturation,
+    onChange: function onChange(val) {
+      return changeValue('saturation', val);
+    }
+  }), React.createElement(Slider, {
+    label: t('value'),
+    min: -2,
+    step: 0.1,
+    max: 2,
+    value: (_finetuneProps$value = finetuneProps.value) !== null && _finetuneProps$value !== void 0 ? _finetuneProps$value : DEFAULT_VALUE.value,
+    onChange: function onChange(val) {
+      return changeValue('value', val);
+    }
+  }));
+};
+export default HSVOptions;

package/lib/components/tools/hsv/index.js

@@ -1 +1,2 @@
-export{default as HSV}from"./hsv";export{default as HSVOptions}from"./hsvoptions";
+export { default as HSV } from "./hsv";
+export { default as HSVOptions } from "./hsvoptions";

package/lib/components/tools/image/image-button.js

@@ -1 +1,17 @@
-import{ImageOutlined as ImageIcon}from"@mui/icons-material";import ToolsBarItemButton from"components/tools-bar/tools-bar-item-button";import{TOOLS_IDS}from"utils/constants";var ImageButton=function(a){var b=a.selectTool,c=a.isSelected,d=a.t;return React.createElement(ToolsBarItemButton,{id:TOOLS_IDS.IMAGE,label:d("imageTool"),Icon:ImageIcon,onClick:b,isSelected:void 0!==c&&c})};export default ImageButton;
+import { ImageOutlined as ImageIcon } from '@mui/icons-material';
+import ToolsBarItemButton from "../../tools-bar/tools-bar-item-button";
+import { TOOLS_IDS } from "../../../utils/constants";
+var ImageButton = function ImageButton(_ref) {
+  var selectTool = _ref.selectTool,
+    _ref$isSelected = _ref.isSelected,
+    isSelected = _ref$isSelected === void 0 ? false : _ref$isSelected,
+    t = _ref.t;
+  return React.createElement(ToolsBarItemButton, {
+    id: TOOLS_IDS.IMAGE,
+    label: t('imageTool'),
+    Icon: ImageIcon,
+    onClick: selectTool,
+    isSelected: isSelected
+  });
+};
+export default ImageButton;

package/lib/components/tools/image/image-controls.js

@@ -1 +1,12 @@
-import AnnotationOptions from"components/common/annotation-options";var ImageControls=function(a){var b=a.image,c=a.saveImage,d=a.children;return React.createElement(AnnotationOptions,{annotation:b,updateAnnotation:c,hideFillOption:!0},d)};export default ImageControls;
+import AnnotationOptions from "../../common/annotation-options";
+var ImageControls = function ImageControls(_ref) {
+  var image = _ref.image,
+    saveImage = _ref.saveImage,
+    children = _ref.children;
+  return React.createElement(AnnotationOptions, {
+    annotation: image,
+    updateAnnotation: saveImage,
+    hideFillOption: true
+  }, children);
+};
+export default ImageControls;

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

@@ -1 +1,162 @@
-import _slicedToArray from"@babel/runtime/helpers/slicedToArray";import{useMemo,useRef,useState}from"react";import{CollectionsOutlined,FileUploadOutlined}from"@mui/icons-material";import{useAnnotation,usePopover,useStore}from"hooks";import{FEEDBACK_STATUSES,TOOLS_IDS}from"utils/constants";import{SET_FEEDBACK}from"actions";import HiddenUploadInput from"components/common/hidden-upload-input";import ButtonWithMenu from"components/common/button-with-menu";import ImageControls from"./image-controls";import ImagesGallery from"./images-gallery";var ADDED_IMG_SPACING_PERCENT=.15,ImageOptions=function(){var a=useState(),b=_slicedToArray(a,2),c=b[0],d=b[1],e=usePopover(),f=useRef(null),g=useRef(null),h=useStore(),i=h.shownImageDimensions,j=h.dispatch,k=h.adjustments.crop,l=void 0===k?{}:k,m=h.t,n=h.config,o=void 0===n?{}:n,p=o[TOOLS_IDS.IMAGE],q=!p.disableUpload,r=Array.isArray(p.gallery)&&0<p.gallery.length,s=useAnnotation({name:TOOLS_IDS.IMAGE,opacity:1},!1),t=_slicedToArray(s,3),u=t[0],v=t[1],w=t[2],x=useRef(0),y=function(a){var b=l.width||i.width,c=l.height||i.height,d=l.x||0,e=l.y||0,f=Math.min(1,b/(a.width+a.width*ADDED_IMG_SPACING_PERCENT),c/(a.height+a.height*ADDED_IMG_SPACING_PERCENT));w({image:a,x:d+b/2-a.width*f/2,y:e+c/2-a.height*f/2,width:a.width*f,height:a.height*f})},z=function(a){x.current+=1,x.current===a&&(x.current=0,d(!1))},A=function(a){j({type:SET_FEEDBACK,payload:{feedback:{message:a,status:FEEDBACK_STATUSES.WARNING}}})},B=function(){f.current&&f.current.click()},C=function(){e.handleOpen({currentTarget:g.current})},D=useMemo(function(){return[q&&{key:"add-by-upload-image",label:c?m("importing"):m("uploadImage"),icon:FileUploadOutlined,onClick:c?void 0:B},r&&{key:"add-from-gallery",label:m("fromGallery"),icon:CollectionsOutlined,onClick:C}]},[p,c,m]);return React.createElement(ImageControls,{image:u,saveImage:v},React.createElement(ButtonWithMenu,{label:m("addImage"),menuItems:D,buttonRef:g}),q&&React.createElement(HiddenUploadInput,{ref:f,onChange:c?void 0:function(a){if(a.target.files){d(!0);var b=[],c=Array.from(a.target.files),e=c.length;if(c.forEach(function(a){if(a.type.startsWith("image/")){var c=new Image;c.onload=function(){y(c),URL.revokeObjectURL(a),z(e)},c.onerror=function(){A(m("uploadImageError")),z(e)},c.src=URL.createObjectURL(a)}else b.push(a.name),z(e)}),0<b.length){var f=1<b.length?m("areNotImages"):m("isNotImage");A("".concat(b.join(", ")," ").concat(f," ").concat(m("toBeUploaded"),"."))}}a.target.value=""},disabled:c,multiple:!0}),r&&React.createElement(ImagesGallery,{gallery:p.gallery,onSelect:function(a){d(!0);var b=new Image;b.onload=function(){y(b),z(1)},b.onerror=function(){A(m("uploadImageError")),z(1)},b.crossOrigin="Anonymous",b.src=a},onClose:function(){e.handleClose()},anchorEl:e.anchorEl}))};export default ImageOptions;
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import { useMemo, useRef, useState } from 'react';
+import { CollectionsOutlined, FileUploadOutlined } from '@mui/icons-material';
+import { useAnnotation, usePopover, useStore } from "../../../hooks";
+import { FEEDBACK_STATUSES, TOOLS_IDS } from "../../../utils/constants";
+import { SET_FEEDBACK } from "../../../actions";
+import HiddenUploadInput from "../../common/hidden-upload-input";
+import ButtonWithMenu from "../../common/button-with-menu";
+import ImageControls from "./image-controls";
+import ImagesGallery from "./images-gallery";
+var ADDED_IMG_SPACING_PERCENT = 0.15;
+var ImageOptions = function ImageOptions() {
+  var _useState = useState(),
+    _useState2 = _slicedToArray(_useState, 2),
+    isLoading = _useState2[0],
+    setIsLoading = _useState2[1];
+  var galleryPopover = usePopover();
+  var uploadImgsInput = useRef(null);
+  var menuItemsBtnRef = useRef(null);
+  var _useStore = useStore(),
+    shownImageDimensions = _useStore.shownImageDimensions,
+    dispatch = _useStore.dispatch,
+    _useStore$adjustments = _useStore.adjustments.crop,
+    crop = _useStore$adjustments === void 0 ? {} : _useStore$adjustments,
+    t = _useStore.t,
+    _useStore$config = _useStore.config,
+    config = _useStore$config === void 0 ? {} : _useStore$config;
+  var imageConfig = config[TOOLS_IDS.IMAGE];
+  var isUploadEnabled = !imageConfig.disableUpload;
+  var isGalleryEnabled = Array.isArray(imageConfig.gallery) && imageConfig.gallery.length > 0;
+  var _useAnnotation = useAnnotation({
+      name: TOOLS_IDS.IMAGE,
+      opacity: 1
+    }, false),
+    _useAnnotation2 = _slicedToArray(_useAnnotation, 3),
+    image = _useAnnotation2[0],
+    saveImage = _useAnnotation2[1],
+    addNewImage = _useAnnotation2[2];
+  var requestedImgsCount = useRef(0);
+  var addImgScaled = function addImgScaled(loadedImg) {
+    var layerWidth = crop.width || shownImageDimensions.width;
+    var layerHeight = crop.height || shownImageDimensions.height;
+    var layerCropX = crop.x || 0;
+    var layerCropY = crop.y || 0;
+    var newImgRatio = Math.min(1, layerWidth / (loadedImg.width + loadedImg.width * ADDED_IMG_SPACING_PERCENT), layerHeight / (loadedImg.height + loadedImg.height * ADDED_IMG_SPACING_PERCENT));
+    addNewImage({
+      image: loadedImg,
+      x: layerCropX + layerWidth / 2 - loadedImg.width * newImgRatio / 2,
+      y: layerCropY + layerHeight / 2 - loadedImg.height * newImgRatio / 2,
+      width: loadedImg.width * newImgRatio,
+      height: loadedImg.height * newImgRatio
+    });
+  };
+  var hideLoaderAfterDone = function hideLoaderAfterDone(filesLength) {
+    requestedImgsCount.current += 1;
+    if (requestedImgsCount.current === filesLength) {
+      requestedImgsCount.current = 0;
+      setIsLoading(false);
+    }
+  };
+  var setFeedback = function setFeedback(msg) {
+    dispatch({
+      type: SET_FEEDBACK,
+      payload: {
+        feedback: {
+          message: msg,
+          status: FEEDBACK_STATUSES.WARNING
+        }
+      }
+    });
+  };
+  var importImages = function importImages(e) {
+    if (e.target.files) {
+      setIsLoading(true);
+      var wrongFilesNames = [];
+      var filesArray = Array.from(e.target.files);
+      var filesLength = filesArray.length;
+      filesArray.forEach(function (file) {
+        if (file.type.startsWith('image/')) {
+          var img = new Image();
+          img.onload = function () {
+            addImgScaled(img);
+            URL.revokeObjectURL(file);
+            hideLoaderAfterDone(filesLength);
+          };
+          img.onerror = function () {
+            setFeedback(t('uploadImageError'));
+            hideLoaderAfterDone(filesLength);
+          };
+          img.src = URL.createObjectURL(file);
+        } else {
+          wrongFilesNames.push(file.name);
+          hideLoaderAfterDone(filesLength);
+        }
+      });
+      if (wrongFilesNames.length > 0) {
+        var errorLabel = wrongFilesNames.length > 1 ? t('areNotImages') : t('isNotImage');
+        setFeedback("".concat(wrongFilesNames.join(', '), " ").concat(errorLabel, " ").concat(t('toBeUploaded'), "."));
+      }
+    }
+    e.target.value = '';
+  };
+  var triggerUploadInput = function triggerUploadInput() {
+    if (uploadImgsInput.current) {
+      uploadImgsInput.current.click();
+    }
+  };
+  var importImgFromGallery = function importImgFromGallery(imgUrl) {
+    setIsLoading(true);
+    var img = new Image();
+    img.onload = function () {
+      addImgScaled(img);
+      hideLoaderAfterDone(1);
+    };
+    img.onerror = function () {
+      setFeedback(t('uploadImageError'));
+      hideLoaderAfterDone(1);
+    };
+    img.crossOrigin = 'Anonymous';
+    img.src = imgUrl;
+  };
+  var openGalleryPanel = function openGalleryPanel() {
+    galleryPopover.handleOpen({
+      currentTarget: menuItemsBtnRef.current
+    });
+  };
+  var closeGalleryPanel = function closeGalleryPanel() {
+    galleryPopover.handleClose();
+  };
+  var menuItems = useMemo(function () {
+    return [isUploadEnabled && {
+      key: 'add-by-upload-image',
+      label: isLoading ? t('importing') : t('uploadImage'),
+      icon: FileUploadOutlined,
+      onClick: isLoading ? undefined : triggerUploadInput
+    }, isGalleryEnabled && {
+      key: 'add-from-gallery',
+      label: t('fromGallery'),
+      icon: CollectionsOutlined,
+      onClick: openGalleryPanel
+    }];
+  }, [imageConfig, isLoading, t]);
+  return React.createElement(ImageControls, {
+    image: image,
+    saveImage: saveImage
+  }, React.createElement(ButtonWithMenu, {
+    label: t('addImage'),
+    menuItems: menuItems,
+    buttonRef: menuItemsBtnRef
+  }), isUploadEnabled && React.createElement(HiddenUploadInput, {
+    ref: uploadImgsInput,
+    onChange: isLoading ? undefined : importImages,
+    disabled: isLoading,
+    multiple: true
+  }), isGalleryEnabled && React.createElement(ImagesGallery, {
+    gallery: imageConfig.gallery,
+    onSelect: importImgFromGallery,
+    onClose: closeGalleryPanel,
+    anchorEl: galleryPopover.anchorEl
+  }));
+};
+export default ImageOptions;