@solostylist/image-editor 1.0.9 → 1.0.10

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

@@ -1 +1,55 @@
-import{Popover}from"@mui/material";import{SFlexBox}from"@solostylist/ui-kit/core";import ImagePreviewTile from"components/common/image-preview-tile";var ImagesGallery=function(a){var b=a.gallery,c=void 0===b?[]:b,d=a.anchorEl,e=void 0===d?null:d,f=a.onClose,g=a.onSelect;return React.createElement(Popover,{anchorEl:e,open:!!e,onClose:f,anchorOrigin:{vertical:"top",horizontal:"center"},transformOrigin:{vertical:"bottom",horizontal:"center"},slotProps:{paper:{sx:{px:2,py:1}}}},React.createElement(SFlexBox,{sx:{borderRadius:1,paddingX:1,paddingY:2,overflowY:"auto",maxHeight:"450px",display:"grid",gridTemplateColumns:"repeat(4, 1fr)",gap:1}},c.map(function(a){var b=a.originalUrl,c=a.previewUrl;return React.createElement(ImagePreviewTile,{key:b,src:c,alt:c,onClick:function(){return g(b)}})})))};export default ImagesGallery;
+import { Popover } from '@mui/material';
+import { SFlexBox } from '@solostylist/ui-kit/core';
+import ImagePreviewTile from 'components/common/image-preview-tile';
+var ImagesGallery = function ImagesGallery(_ref) {
+  var _ref$gallery = _ref.gallery,
+    gallery = _ref$gallery === void 0 ? [] : _ref$gallery,
+    _ref$anchorEl = _ref.anchorEl,
+    anchorEl = _ref$anchorEl === void 0 ? null : _ref$anchorEl,
+    onClose = _ref.onClose,
+    onSelect = _ref.onSelect;
+  return React.createElement(Popover, {
+    anchorEl: anchorEl,
+    open: Boolean(anchorEl),
+    onClose: onClose,
+    anchorOrigin: {
+      vertical: 'top',
+      horizontal: 'center'
+    },
+    transformOrigin: {
+      vertical: 'bottom',
+      horizontal: 'center'
+    },
+    slotProps: {
+      paper: {
+        sx: {
+          px: 2,
+          py: 1
+        }
+      }
+    }
+  }, React.createElement(SFlexBox, {
+    sx: {
+      borderRadius: 1,
+      paddingX: 1,
+      paddingY: 2,
+      overflowY: 'auto',
+      maxHeight: '450px',
+      display: 'grid',
+      gridTemplateColumns: 'repeat(4, 1fr)',
+      gap: 1
+    }
+  }, gallery.map(function (_ref2) {
+    var originalUrl = _ref2.originalUrl,
+      previewUrl = _ref2.previewUrl;
+    return React.createElement(ImagePreviewTile, {
+      key: originalUrl,
+      src: previewUrl,
+      alt: previewUrl,
+      onClick: function onClick() {
+        return onSelect(originalUrl);
+      }
+    });
+  })));
+};
+export default ImagesGallery;

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

@@ -1 +1,2 @@
-export{default as ImageButton}from"./image-button";export{default as ImageOptions}from"./image-options";
+export { default as ImageButton } from "./image-button";
+export { default as ImageOptions } from "./image-options";

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

@@ -1 +1,2 @@
-export{default as LineButton}from"./line-button";export{default as LineOptions}from"./line-options";
+export { default as LineButton } from "./line-button";
+export { default as LineOptions } from "./line-options";

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

@@ -1 +1,17 @@
-import{HorizontalRuleOutlined as Line}from"@mui/icons-material";import ToolsBarItemButton from"components/tools-bar/tools-bar-item-button";import{TOOLS_IDS}from"utils/constants";var LineButton=function(a){var b=a.selectTool,c=a.isSelected,d=a.t;return React.createElement(ToolsBarItemButton,{id:TOOLS_IDS.LINE,label:d("lineTool"),Icon:Line,onClick:b,isSelected:void 0!==c&&c})};export default LineButton;
+import { HorizontalRuleOutlined as Line } from '@mui/icons-material';
+import ToolsBarItemButton from 'components/tools-bar/tools-bar-item-button';
+import { TOOLS_IDS } from 'utils/constants';
+var LineButton = function LineButton(_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.LINE,
+    label: t('lineTool'),
+    Icon: Line,
+    onClick: selectTool,
+    isSelected: isSelected
+  });
+};
+export default LineButton;

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

@@ -1 +1,19 @@
-import _slicedToArray from"@babel/runtime/helpers/slicedToArray";import{useAnnotation}from"hooks";import{TOOLS_IDS}from"utils/constants";import AnnotationOptions from"components/common/annotation-options";var LineOptions=function(){var a=useAnnotation({name:TOOLS_IDS.LINE}),b=_slicedToArray(a,2),c=b[0],d=b[1];return React.createElement(AnnotationOptions,{annotation:c,updateAnnotation:d,hidePositionField:!0,hideFillOption:!0})};export default LineOptions;
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import { useAnnotation } from 'hooks';
+import { TOOLS_IDS } from 'utils/constants';
+import AnnotationOptions from 'components/common/annotation-options';
+var LineOptions = function LineOptions() {
+  var _useAnnotation = useAnnotation({
+      name: TOOLS_IDS.LINE
+    }),
+    _useAnnotation2 = _slicedToArray(_useAnnotation, 2),
+    line = _useAnnotation2[0],
+    saveLine = _useAnnotation2[1];
+  return React.createElement(AnnotationOptions, {
+    annotation: line,
+    updateAnnotation: saveLine,
+    hidePositionField: true,
+    hideFillOption: true
+  });
+};
+export default LineOptions;

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

@@ -1 +1,2 @@
-export{default as PenButton}from"./pen-button";export{default as PenOptions}from"./pen-options";
+export { default as PenButton } from "./pen-button";
+export { default as PenOptions } from "./pen-options";

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

@@ -1 +1,17 @@
-import{GestureOutlined as PenIcon}from"@mui/icons-material";import ToolsBarItemButton from"components/tools-bar/tools-bar-item-button";import{TOOLS_IDS}from"utils/constants";var PenButton=function(a){var b=a.selectTool,c=a.isSelected,d=a.t;return React.createElement(ToolsBarItemButton,{id:TOOLS_IDS.PEN,label:d("penTool"),Icon:PenIcon,onClick:b,isSelected:void 0!==c&&c})};export default PenButton;
+import { GestureOutlined as PenIcon } from '@mui/icons-material';
+import ToolsBarItemButton from 'components/tools-bar/tools-bar-item-button';
+import { TOOLS_IDS } from 'utils/constants';
+var PenButton = function PenButton(_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.PEN,
+    label: t('penTool'),
+    Icon: PenIcon,
+    onClick: selectTool,
+    isSelected: isSelected
+  });
+};
+export default PenButton;

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

@@ -1 +1,120 @@
-import _toConsumableArray from"@babel/runtime/helpers/toConsumableArray";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{useCallback,useEffect,useRef}from"react";import{useAnnotation,useStore}from"hooks";import{TOOLS_IDS}from"utils/constants";import AnnotationOptions from"components/common/annotation-options";import getPointerOffsetPositionBoundedToObject from"utils/get-pointer-offset-position-bounded-to-object";import randomId from"utils/random-id";import{SELECT_ANNOTATION,SET_ANNOTATION}from"actions";import getElemDocumentCoords from"utils/get-elem-document-coords";var eventsOptions={passive:!0},PenOptions=function(){var a=useStore(),b=a.dispatch,c=a.designLayer,d=a.previewGroup,e=a.config,f=a.t,g=useAnnotation(_objectSpread(_objectSpread(_objectSpread({},e.annotationsCommon),e[TOOLS_IDS.PEN]),{},{name:TOOLS_IDS.PEN}),!1),h=_slicedToArray(g,3),i=h[0],j=h[1],k=h[2],l=useRef(null),m=useRef({points:[],moved:!1,id:""}),n=useCallback(function(){var a=getElemDocumentCoords(l.current.content),b=getPointerOffsetPositionBoundedToObject(d,a);return[b.offsetX-(c.attrs.xPadding||0),b.offsetY-(c.attrs.yPadding||0)]},[c]),o=useCallback(function(){var a;if(!(null!==(a=m.current)&&void 0!==a&&a.moved)){var c;m.current={moved:!0,id:randomId(TOOLS_IDS.PEN),points:[].concat(_toConsumableArray((null===(c=m.current)||void 0===c?void 0:c.points)||[]),_toConsumableArray(n()))},k({id:m.current.id,name:TOOLS_IDS.PEN,points:m.current.points})}else m.current&&(m.current.points=m.current.points.concat(n()),b({type:SET_ANNOTATION,payload:{id:m.current.id,points:m.current.points,dismissHistory:!0}}))},[n]),p=useCallback(function(){var a,c;null!==(a=m.current)&&void 0!==a&&a.id&&null!==(c=e[TOOLS_IDS.PEN])&&void 0!==c&&c.selectAnnotationAfterDrawing&&b({type:SELECT_ANNOTATION,payload:{annotationId:m.current.id}}),m.current=null,l.current.off("mousemove touchmove",o),l.current.off("mouseleave touchcancel",p),document.removeEventListener("mouseup",p,eventsOptions),document.removeEventListener("touchend",p,eventsOptions),document.removeEventListener("mouseleave",p,eventsOptions),document.removeEventListener("touchcancel",p,eventsOptions)},[o]),q=useCallback(function(a){a.target.attrs.draggable||(a.evt.preventDefault(),m.current={points:n()},l.current.on("mousemove touchmove",o),l.current.on("mouseleave touchcancel",p),document.addEventListener("mouseup",p,eventsOptions),document.addEventListener("touchend",p,eventsOptions),document.addEventListener("mouseleave",p,eventsOptions),document.addEventListener("touchcancel",p,eventsOptions))},[n,o,p]);return useEffect(function(){return l.current=null===c||void 0===c?void 0:c.getStage(),l.current&&l.current.on("mousedown touchstart",q),function(){l.current&&l.current.off("mousedown touchstart",q)}},[c]),React.createElement(AnnotationOptions,{annotation:i,updateAnnotation:j,t:f,hidePositionField:!0,hideFillOption:!0})};export default PenOptions;
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+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 { useCallback, useEffect, useRef } from 'react';
+import { useAnnotation, useStore } from 'hooks';
+import { TOOLS_IDS } from 'utils/constants';
+import AnnotationOptions from 'components/common/annotation-options';
+import getPointerOffsetPositionBoundedToObject from 'utils/get-pointer-offset-position-bounded-to-object';
+import randomId from 'utils/random-id';
+import { SELECT_ANNOTATION, SET_ANNOTATION } from 'actions';
+import getElemDocumentCoords from 'utils/get-elem-document-coords';
+var eventsOptions = {
+  passive: true
+};
+var PenOptions = function PenOptions() {
+  var _useStore = useStore(),
+    dispatch = _useStore.dispatch,
+    designLayer = _useStore.designLayer,
+    previewGroup = _useStore.previewGroup,
+    config = _useStore.config,
+    t = _useStore.t;
+  var _useAnnotation = useAnnotation(_objectSpread(_objectSpread(_objectSpread({}, config.annotationsCommon), config[TOOLS_IDS.PEN]), {}, {
+      name: TOOLS_IDS.PEN
+    }), false),
+    _useAnnotation2 = _slicedToArray(_useAnnotation, 3),
+    pen = _useAnnotation2[0],
+    savePenDebounced = _useAnnotation2[1],
+    savePenNoDebounce = _useAnnotation2[2];
+  var canvasRef = useRef(null);
+  var updatedPen = useRef({
+    points: [],
+    moved: false,
+    id: ''
+  });
+  var getPointerPosition = useCallback(function () {
+    var canvasBoundingRect = getElemDocumentCoords(canvasRef.current.content);
+    var pos = getPointerOffsetPositionBoundedToObject(previewGroup, canvasBoundingRect);
+    return [pos.offsetX - (designLayer.attrs.xPadding || 0), pos.offsetY - (designLayer.attrs.yPadding || 0)];
+  }, [designLayer]);
+  var handlePointerMove = useCallback(function () {
+    var _updatedPen$current;
+    if (!((_updatedPen$current = updatedPen.current) !== null && _updatedPen$current !== void 0 && _updatedPen$current.moved)) {
+      var _updatedPen$current2;
+      updatedPen.current = {
+        moved: true,
+        id: randomId(TOOLS_IDS.PEN),
+        points: [].concat(_toConsumableArray(((_updatedPen$current2 = updatedPen.current) === null || _updatedPen$current2 === void 0 ? void 0 : _updatedPen$current2.points) || []), _toConsumableArray(getPointerPosition()))
+      };
+      savePenNoDebounce({
+        id: updatedPen.current.id,
+        name: TOOLS_IDS.PEN,
+        points: updatedPen.current.points
+      });
+    } else if (updatedPen.current) {
+      updatedPen.current.points = updatedPen.current.points.concat(getPointerPosition());
+      dispatch({
+        type: SET_ANNOTATION,
+        payload: {
+          id: updatedPen.current.id,
+          points: updatedPen.current.points,
+          dismissHistory: true
+        }
+      });
+    }
+  }, [getPointerPosition]);
+  var handlePointerUp = useCallback(function () {
+    var _updatedPen$current3, _config$TOOLS_IDS$PEN;
+    if ((_updatedPen$current3 = updatedPen.current) !== null && _updatedPen$current3 !== void 0 && _updatedPen$current3.id && (_config$TOOLS_IDS$PEN = config[TOOLS_IDS.PEN]) !== null && _config$TOOLS_IDS$PEN !== void 0 && _config$TOOLS_IDS$PEN.selectAnnotationAfterDrawing) {
+      dispatch({
+        type: SELECT_ANNOTATION,
+        payload: {
+          annotationId: updatedPen.current.id
+        }
+      });
+    }
+    updatedPen.current = null;
+    canvasRef.current.off('mousemove touchmove', handlePointerMove);
+    canvasRef.current.off('mouseleave touchcancel', handlePointerUp);
+    document.removeEventListener('mouseup', handlePointerUp, eventsOptions);
+    document.removeEventListener('touchend', handlePointerUp, eventsOptions);
+    document.removeEventListener('mouseleave', handlePointerUp, eventsOptions);
+    document.removeEventListener('touchcancel', handlePointerUp, eventsOptions);
+  }, [handlePointerMove]);
+  var handlePointerDown = useCallback(function (e) {
+    if (e.target.attrs.draggable) {
+      return;
+    }
+    e.evt.preventDefault();
+    updatedPen.current = {
+      points: getPointerPosition()
+    };
+    canvasRef.current.on('mousemove touchmove', handlePointerMove);
+    canvasRef.current.on('mouseleave touchcancel', handlePointerUp);
+    document.addEventListener('mouseup', handlePointerUp, eventsOptions);
+    document.addEventListener('touchend', handlePointerUp, eventsOptions);
+    document.addEventListener('mouseleave', handlePointerUp, eventsOptions);
+    document.addEventListener('touchcancel', handlePointerUp, eventsOptions);
+  }, [getPointerPosition, handlePointerMove, handlePointerUp]);
+  useEffect(function () {
+    canvasRef.current = designLayer === null || designLayer === void 0 ? void 0 : designLayer.getStage();
+    if (canvasRef.current) {
+      canvasRef.current.on('mousedown touchstart', handlePointerDown);
+    }
+    return function () {
+      if (canvasRef.current) {
+        canvasRef.current.off('mousedown touchstart', handlePointerDown);
+      }
+    };
+  }, [designLayer]);
+  return React.createElement(AnnotationOptions, {
+    annotation: pen,
+    updateAnnotation: savePenDebounced,
+    t: t,
+    hidePositionField: true,
+    hideFillOption: true
+  });
+};
+export default PenOptions;

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

@@ -1 +1,2 @@
-export{default as PolygonButton}from"./polygon-button";export{default as PolygonOptions}from"./polygon-options";
+export { default as PolygonButton } from "./polygon-button";
+export { default as PolygonOptions } from "./polygon-options";

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

@@ -1 +1,17 @@
-import{HexagonOutlined as PolygonIcon}from"@mui/icons-material";import ToolsBarItemButton from"components/tools-bar/tools-bar-item-button";import{TOOLS_IDS}from"utils/constants";var PolygonButton=function(a){var b=a.selectTool,c=a.isSelected,d=a.t;return React.createElement(ToolsBarItemButton,{id:TOOLS_IDS.POLYGON,label:d("polygonTool"),Icon:PolygonIcon,onClick:b,isSelected:void 0!==c&&c})};export default PolygonButton;
+import { HexagonOutlined as PolygonIcon } from '@mui/icons-material';
+import ToolsBarItemButton from 'components/tools-bar/tools-bar-item-button';
+import { TOOLS_IDS } from 'utils/constants';
+var PolygonButton = function PolygonButton(_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.POLYGON,
+    label: t('polygonTool'),
+    Icon: PolygonIcon,
+    onClick: selectTool,
+    isSelected: isSelected
+  });
+};
+export default PolygonButton;

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

@@ -1 +1,22 @@
-import _toConsumableArray from"@babel/runtime/helpers/toConsumableArray";import _slicedToArray from"@babel/runtime/helpers/slicedToArray";import{useAnnotation}from"hooks";import{TOOLS_IDS}from"utils/constants";import AnnotationOptions from"components/common/annotation-options";import{polygonOptionsPopupComponents,POLYGON_POPPABLE_OPTIONS}from"./polygon.constants";var PolygonOptions=function(){var a=useAnnotation({name:TOOLS_IDS.POLYGON}),b=_slicedToArray(a,2),c=b[0],d=b[1];return React.createElement(AnnotationOptions,{morePoppableOptionsPrepended:_toConsumableArray(POLYGON_POPPABLE_OPTIONS),moreOptionsPopupComponentsObj:polygonOptionsPopupComponents,annotation:c,updateAnnotation:d,hidePositionField:!0})};export default PolygonOptions;
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import { useAnnotation } from 'hooks';
+import { TOOLS_IDS } from 'utils/constants';
+import AnnotationOptions from 'components/common/annotation-options';
+import { polygonOptionsPopupComponents, POLYGON_POPPABLE_OPTIONS } from "./polygon.constants";
+var PolygonOptions = function PolygonOptions() {
+  var _useAnnotation = useAnnotation({
+      name: TOOLS_IDS.POLYGON
+    }),
+    _useAnnotation2 = _slicedToArray(_useAnnotation, 2),
+    polygon = _useAnnotation2[0],
+    savePolygon = _useAnnotation2[1];
+  return React.createElement(AnnotationOptions, {
+    morePoppableOptionsPrepended: _toConsumableArray(POLYGON_POPPABLE_OPTIONS),
+    moreOptionsPopupComponentsObj: polygonOptionsPopupComponents,
+    annotation: polygon,
+    updateAnnotation: savePolygon,
+    hidePositionField: true
+  });
+};
+export default PolygonOptions;

package/lib/components/tools/polygon/polygon-sides-field.js

@@ -1 +1,23 @@
-import Slider from"components/common/slider";import restrictNumber from"utils/restrict-number";var MIN_VALUE=3,MAX_VALUE=25,PolygonSidesField=function(a){var b=a.annotation,c=a.updateAnnotation,d=a.t,e=b.sides;return React.createElement(Slider,{label:d("sides"),onChange:function(a){c({sides:restrictNumber(a,MIN_VALUE,MAX_VALUE)})},value:e,min:MIN_VALUE,max:MAX_VALUE})};export default PolygonSidesField;
+import Slider from 'components/common/slider';
+import restrictNumber from 'utils/restrict-number';
+var MIN_VALUE = 3;
+var MAX_VALUE = 25;
+var PolygonSidesField = function PolygonSidesField(_ref) {
+  var polygon = _ref.annotation,
+    updatePolygon = _ref.updateAnnotation,
+    t = _ref.t;
+  var sides = polygon.sides;
+  var updateSidesNumber = function updateSidesNumber(newSidesNumber) {
+    updatePolygon({
+      sides: restrictNumber(newSidesNumber, MIN_VALUE, MAX_VALUE)
+    });
+  };
+  return React.createElement(Slider, {
+    label: t('sides'),
+    onChange: updateSidesNumber,
+    value: sides,
+    min: MIN_VALUE,
+    max: MAX_VALUE
+  });
+};
+export default PolygonSidesField;

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

@@ -1 +1,10 @@
-import _defineProperty from"@babel/runtime/helpers/defineProperty";import{CategoryOutlined as PolygonSides}from"@mui/icons-material";import PolygonSidesField from"./polygon-sides-field";export var SIDES_NUMBER="sides-number";export var POLYGON_POPPABLE_OPTIONS=[{titleKey:"sides",name:"sides-number",Icon:PolygonSides}];export var polygonOptionsPopupComponents=_defineProperty({},"sides-number",PolygonSidesField);
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import { CategoryOutlined as PolygonSides } from '@mui/icons-material';
+import PolygonSidesField from "./polygon-sides-field";
+export var SIDES_NUMBER = 'sides-number';
+export var POLYGON_POPPABLE_OPTIONS = [{
+  titleKey: 'sides',
+  name: SIDES_NUMBER,
+  Icon: PolygonSides
+}];
+export var polygonOptionsPopupComponents = _defineProperty({}, SIDES_NUMBER, PolygonSidesField);

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

@@ -1 +1,2 @@
-export{default as RectButton}from"./rect-button";export{default as RectOptions}from"./rect-options";
+export { default as RectButton } from "./rect-button";
+export { default as RectOptions } from "./rect-options";

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

@@ -1 +1,17 @@
-import{CropLandscapeOutlined as RectIcon}from"@mui/icons-material";import ToolsBarItemButton from"components/tools-bar/tools-bar-item-button";import{TOOLS_IDS}from"utils/constants";var RectButton=function(a){var b=a.selectTool,c=a.isSelected,d=a.t;return React.createElement(ToolsBarItemButton,{id:TOOLS_IDS.RECT,label:d("rectangleTool"),Icon:RectIcon,onClick:b,isSelected:void 0!==c&&c})};export default RectButton;
+import { CropLandscapeOutlined as RectIcon } from '@mui/icons-material';
+import ToolsBarItemButton from 'components/tools-bar/tools-bar-item-button';
+import { TOOLS_IDS } from 'utils/constants';
+var RectButton = function RectButton(_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.RECT,
+    label: t('rectangleTool'),
+    Icon: RectIcon,
+    onClick: selectTool,
+    isSelected: isSelected
+  });
+};
+export default RectButton;

package/lib/components/tools/rect/rect-corner-field.js

@@ -1 +1,24 @@
-import Slider from"components/common/slider";import restrictNumber from"utils/restrict-number";var MIN_VALUE=0,MAX_VALUE=150,RectCornerField=function(a){var b=a.annotation,c=a.updateAnnotation,d=a.t,e=b.cornerRadius;return React.createElement(Slider,{annotation:"px",label:d("cornerRadius"),onChange:function(a){c({cornerRadius:restrictNumber(a,MIN_VALUE,MAX_VALUE)})},value:e,min:MIN_VALUE,max:MAX_VALUE})};export default RectCornerField;
+import Slider from 'components/common/slider';
+import restrictNumber from 'utils/restrict-number';
+var MIN_VALUE = 0;
+var MAX_VALUE = 150;
+var RectCornerField = function RectCornerField(_ref) {
+  var rect = _ref.annotation,
+    updateRect = _ref.updateAnnotation,
+    t = _ref.t;
+  var cornerRadius = rect.cornerRadius;
+  var updateCornerRadius = function updateCornerRadius(newCornerRadius) {
+    updateRect({
+      cornerRadius: restrictNumber(newCornerRadius, MIN_VALUE, MAX_VALUE)
+    });
+  };
+  return React.createElement(Slider, {
+    annotation: "px",
+    label: t('cornerRadius'),
+    onChange: updateCornerRadius,
+    value: cornerRadius,
+    min: MIN_VALUE,
+    max: MAX_VALUE
+  });
+};
+export default RectCornerField;

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

@@ -1 +1,21 @@
-import _toConsumableArray from"@babel/runtime/helpers/toConsumableArray";import _slicedToArray from"@babel/runtime/helpers/slicedToArray";import{useAnnotation}from"hooks";import{TOOLS_IDS}from"utils/constants";import AnnotationOptions from"components/common/annotation-options";import{rectOptionsPopupComponents,RECT_POPPABLE_OPTIONS}from"./rect.constants";var RectOptions=function(){var a=useAnnotation({name:TOOLS_IDS.RECT}),b=_slicedToArray(a,2),c=b[0],d=b[1];return React.createElement(AnnotationOptions,{moreOptionsPopupComponentsObj:rectOptionsPopupComponents,morePoppableOptionsPrepended:_toConsumableArray(RECT_POPPABLE_OPTIONS),annotation:c,updateAnnotation:d})};export default RectOptions;
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import { useAnnotation } from 'hooks';
+import { TOOLS_IDS } from 'utils/constants';
+import AnnotationOptions from 'components/common/annotation-options';
+import { rectOptionsPopupComponents, RECT_POPPABLE_OPTIONS } from "./rect.constants";
+var RectOptions = function RectOptions() {
+  var _useAnnotation = useAnnotation({
+      name: TOOLS_IDS.RECT
+    }),
+    _useAnnotation2 = _slicedToArray(_useAnnotation, 2),
+    rect = _useAnnotation2[0],
+    saveRect = _useAnnotation2[1];
+  return React.createElement(AnnotationOptions, {
+    moreOptionsPopupComponentsObj: rectOptionsPopupComponents,
+    morePoppableOptionsPrepended: _toConsumableArray(RECT_POPPABLE_OPTIONS),
+    annotation: rect,
+    updateAnnotation: saveRect
+  });
+};
+export default RectOptions;

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

@@ -1 +1,10 @@
-import _defineProperty from"@babel/runtime/helpers/defineProperty";import{RoundedCornerOutlined as RadiusCorner}from"@mui/icons-material";import RectCornerField from"./rect-corner-field";export var CORNER_RADIUS="corner-radius";export var RECT_POPPABLE_OPTIONS=[{titleKey:"cornerRadius",name:"corner-radius",Icon:RadiusCorner}];export var rectOptionsPopupComponents=_defineProperty({},"corner-radius",RectCornerField);
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import { RoundedCornerOutlined as RadiusCorner } from '@mui/icons-material';
+import RectCornerField from "./rect-corner-field";
+export var CORNER_RADIUS = 'corner-radius';
+export var RECT_POPPABLE_OPTIONS = [{
+  titleKey: 'cornerRadius',
+  name: CORNER_RADIUS,
+  Icon: RadiusCorner
+}];
+export var rectOptionsPopupComponents = _defineProperty({}, CORNER_RADIUS, RectCornerField);

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

@@ -1 +1 @@
-export{default as Resize}from"./resize";
+export { default as Resize } from "./resize";

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

@@ -1 +1,141 @@
-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{Refresh,LockOutlined,LockOpenOutlined}from"@mui/icons-material";import{SFlexBox,SIconButton,STextField}from"@solostylist/ui-kit/core";import{SET_RESIZE,ZOOM_CANVAS}from"actions";import{useStore}from"hooks";import{DEFAULT_ZOOM_FACTOR}from"utils/constants";import getProperDimensions from"utils/get-proper-dimensions";import getSizeAfterRotation from"utils/get-size-after-rotation";import getZoomFitFactor from"utils/get-zoom-fit-factor";import restrictNumber from"utils/restrict-number";var Resize=function(a){var b=a.onChange,c=a.currentSize,d=void 0===c?{}:c,e=a.hideResetButton,f=useStore(),g=f.dispatch,h=f.originalImage,i=f.resize,j=f.shownImageDimensions,k=f.adjustments,l=k.crop,m=k.rotation,n=void 0===m?0:m,o=f.t,p=getProperDimensions(((null===d||void 0===d?void 0:d.width)||(null===d||void 0===d?void 0:d.height))&&d||i,l,j,h,n),q=function(a){var c,e=a.target,f=e.name,k=e.value;if(!(1>parseFloat(k))){var m=Math.min(10*h.width,10*h.height),o=getSizeAfterRotation(h.width,h.height,n),q="height"===f,r=q?"width":"height",s=_defineProperty(_defineProperty({},f,k?restrictNumber(k,0,m):k),r,p[r]),t=null!==(c=d.ratioUnlocked)&&void 0!==c?c:i.ratioUnlocked;if(!t){var u=o.width/o.height;s[r]=q?Math.round(s[f]*u):Math.round(s[f]/u)}if(s[f]!==i[f]||s[r]!==i[r]){if("function"==typeof b)return void b(s);g({type:SET_RESIZE,payload:s});var v=l.width&&l.height&&l||j,w=_objectSpread(_objectSpread({},i),s);g({type:ZOOM_CANVAS,payload:{factor:w.width&&w.height?getZoomFitFactor(v,w):DEFAULT_ZOOM_FACTOR,isAbsoluteZoom:!0}})}}},r="undefined"==typeof i.width&&"undefined"==typeof i.height||h.width===i.width&&h.height===i.height,s=i.manualChangeDisabled,t="undefined"!=typeof i.width&&!i.width,u="undefined"!=typeof i.height&&!i.height;return React.createElement(SFlexBox,{sx:{gap:1,alignItems:"flex-end"}},React.createElement(STextField,{name:"width",value:t?"":p.width,onChange:s?void 0:q,inputMode:"numeric",label:"".concat(o("width")," (px)"),disabled:s}),React.createElement(SIconButton,{tooltipOptions:{title:o("toggleRatioLockTitle")},onClick:s?void 0:function(){return"function"==typeof b?void b({ratioUnlocked:!d.ratioUnlocked}):void g({type:SET_RESIZE,payload:{ratioUnlocked:!i.ratioUnlocked}})},disabled:s},d.ratioUnlocked||i.ratioUnlocked?React.createElement(LockOpenOutlined,{color:"success"}):React.createElement(LockOutlined,{color:"error"})),React.createElement(STextField,{name:"height",value:u?"":p.height,onChange:s?void 0:q,inputMode:"numeric",label:"".concat(o("height")," (px)"),disabled:s}),!(void 0!==e&&e)&&React.createElement(SIconButton,{tooltipOptions:{title:o("resetSize")},onClick:r||s?void 0:function(){g({type:SET_RESIZE,payload:{width:void 0,height:void 0,ratioUnlocked:!1}});var a=l.width&&l.height&&l||j;g({type:ZOOM_CANVAS,payload:{factor:getZoomFitFactor(a,a)}})},disabled:r||s},React.createElement(Refresh,null)))};export default Resize;
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+import { Refresh, LockOutlined, LockOpenOutlined } from '@mui/icons-material';
+import { SFlexBox, SIconButton, STextField } from '@solostylist/ui-kit/core';
+import { SET_RESIZE, ZOOM_CANVAS } from 'actions';
+import { useStore } from 'hooks';
+import { DEFAULT_ZOOM_FACTOR } from 'utils/constants';
+import getProperDimensions from 'utils/get-proper-dimensions';
+import getSizeAfterRotation from 'utils/get-size-after-rotation';
+import getZoomFitFactor from 'utils/get-zoom-fit-factor';
+import restrictNumber from 'utils/restrict-number';
+var Resize = function Resize(_ref) {
+  var onChange = _ref.onChange,
+    _ref$currentSize = _ref.currentSize,
+    currentSize = _ref$currentSize === void 0 ? {} : _ref$currentSize,
+    _ref$hideResetButton = _ref.hideResetButton,
+    hideResetButton = _ref$hideResetButton === void 0 ? false : _ref$hideResetButton;
+  var _useStore = useStore(),
+    dispatch = _useStore.dispatch,
+    originalImage = _useStore.originalImage,
+    resize = _useStore.resize,
+    shownImageDimensions = _useStore.shownImageDimensions,
+    _useStore$adjustments = _useStore.adjustments,
+    crop = _useStore$adjustments.crop,
+    _useStore$adjustments2 = _useStore$adjustments.rotation,
+    rotation = _useStore$adjustments2 === void 0 ? 0 : _useStore$adjustments2,
+    t = _useStore.t;
+  var dimensions = getProperDimensions(((currentSize === null || currentSize === void 0 ? void 0 : currentSize.width) || (currentSize === null || currentSize === void 0 ? void 0 : currentSize.height)) && currentSize || resize, crop, shownImageDimensions, originalImage, rotation);
+  var changeResize = function changeResize(e) {
+    var _currentSize$ratioUnl;
+    var _e$target = e.target,
+      name = _e$target.name,
+      value = _e$target.value;
+    if (parseFloat(value) < 1) {
+      return;
+    }
+    var maxResizeNumber = Math.min(originalImage.width * 10, originalImage.height * 10);
+    var originalImgSizeAfterRotation = getSizeAfterRotation(originalImage.width, originalImage.height, rotation);
+    var isHeight = name === 'height';
+    var secondDimensionName = isHeight ? 'width' : 'height';
+    var newResize = _defineProperty(_defineProperty({}, name, value ? restrictNumber(value, 0, maxResizeNumber) : value), secondDimensionName, dimensions[secondDimensionName]);
+    var isRatioUnlocked = (_currentSize$ratioUnl = currentSize.ratioUnlocked) !== null && _currentSize$ratioUnl !== void 0 ? _currentSize$ratioUnl : resize.ratioUnlocked;
+    if (!isRatioUnlocked) {
+      var originalImgRatio = originalImgSizeAfterRotation.width / originalImgSizeAfterRotation.height;
+      newResize[secondDimensionName] = isHeight ? Math.round(newResize[name] * originalImgRatio) : Math.round(newResize[name] / originalImgRatio);
+    }
+    if (newResize[name] === resize[name] && newResize[secondDimensionName] === resize[secondDimensionName]) {
+      return;
+    }
+    if (typeof onChange === 'function') {
+      onChange(newResize);
+      return;
+    }
+    dispatch({
+      type: SET_RESIZE,
+      payload: newResize
+    });
+    var dimensUsedInFit = crop.width && crop.height && crop || shownImageDimensions;
+    var updatedResize = _objectSpread(_objectSpread({}, resize), newResize);
+    dispatch({
+      type: ZOOM_CANVAS,
+      payload: {
+        factor: updatedResize.width && updatedResize.height ? getZoomFitFactor(dimensUsedInFit, updatedResize) : DEFAULT_ZOOM_FACTOR,
+        isAbsoluteZoom: true
+      }
+    });
+  };
+  var toggleRatioLock = function toggleRatioLock() {
+    if (typeof onChange === 'function') {
+      onChange({
+        ratioUnlocked: !currentSize.ratioUnlocked
+      });
+      return;
+    }
+    dispatch({
+      type: SET_RESIZE,
+      payload: {
+        ratioUnlocked: !resize.ratioUnlocked
+      }
+    });
+  };
+  var resetResize = function resetResize() {
+    dispatch({
+      type: SET_RESIZE,
+      payload: {
+        width: undefined,
+        height: undefined,
+        ratioUnlocked: false
+      }
+    });
+    var dimensUsedInFit = crop.width && crop.height && crop || shownImageDimensions;
+    dispatch({
+      type: ZOOM_CANVAS,
+      payload: {
+        factor: getZoomFitFactor(dimensUsedInFit, dimensUsedInFit)
+      }
+    });
+  };
+  var isOriginalSize = typeof resize.width === 'undefined' && typeof resize.height === 'undefined' || originalImage.width === resize.width && originalImage.height === resize.height;
+  var isManualChangeDisabled = resize.manualChangeDisabled;
+  var isEmptyEditedWidth = typeof resize.width !== 'undefined' && !resize.width;
+  var isEmptyEditedHeight = typeof resize.height !== 'undefined' && !resize.height;
+  return React.createElement(SFlexBox, {
+    sx: {
+      gap: 1,
+      alignItems: 'flex-end'
+    }
+  }, React.createElement(STextField, {
+    name: "width",
+    value: isEmptyEditedWidth ? '' : dimensions.width,
+    onChange: isManualChangeDisabled ? undefined : changeResize,
+    inputMode: "numeric",
+    label: "".concat(t('width'), " (px)"),
+    disabled: isManualChangeDisabled
+  }), React.createElement(SIconButton, {
+    tooltipOptions: {
+      title: t('toggleRatioLockTitle')
+    },
+    onClick: isManualChangeDisabled ? undefined : toggleRatioLock,
+    disabled: isManualChangeDisabled
+  }, currentSize.ratioUnlocked || resize.ratioUnlocked ? React.createElement(LockOpenOutlined, {
+    color: "success"
+  }) : React.createElement(LockOutlined, {
+    color: "error"
+  })), React.createElement(STextField, {
+    name: "height",
+    value: isEmptyEditedHeight ? '' : dimensions.height,
+    onChange: isManualChangeDisabled ? undefined : changeResize,
+    inputMode: "numeric",
+    label: "".concat(t('height'), " (px)"),
+    disabled: isManualChangeDisabled
+  }), !hideResetButton && React.createElement(SIconButton, {
+    tooltipOptions: {
+      title: t('resetSize')
+    },
+    onClick: isOriginalSize || isManualChangeDisabled ? undefined : resetResize,
+    disabled: isOriginalSize || isManualChangeDisabled
+  }, React.createElement(Refresh, null)));
+};
+export default Resize;

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

@@ -1 +1,2 @@
-export{default as RotateButton}from"./rotate-button";export{default as RotateOptions}from"./rotate-options";
+export { default as RotateButton } from "./rotate-button";
+export { default as RotateOptions } from "./rotate-options";

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

@@ -1 +1,17 @@
-import{RotateLeftOutlined as RotateIcon}from"@mui/icons-material";import ToolsBarItemButton from"components/tools-bar/tools-bar-item-button";import{TOOLS_IDS}from"utils/constants";var RotateButton=function(a){var b=a.selectTool,c=a.isSelected,d=a.t;return React.createElement(ToolsBarItemButton,{id:TOOLS_IDS.ROTATE,label:d("rotateTool"),Icon:RotateIcon,onClick:b,isSelected:void 0!==c&&c})};export default RotateButton;
+import { RotateLeftOutlined as RotateIcon } from '@mui/icons-material';
+import ToolsBarItemButton from 'components/tools-bar/tools-bar-item-button';
+import { TOOLS_IDS } from 'utils/constants';
+var RotateButton = function RotateButton(_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.ROTATE,
+    label: t('rotateTool'),
+    Icon: RotateIcon,
+    onClick: selectTool,
+    isSelected: isSelected
+  });
+};
+export default RotateButton;