@solostylist/image-editor 1.0.9 → 1.0.11

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

@@ -1 +1,97 @@
-import{RotateLeftOutlined,RotateRightOutlined,Rotate90DegreesCwOutlined}from"@mui/icons-material";import Slider from"@mui/material/Slider";import{useDebouncedCallback,usePhoneScreen,useStore}from"hooks";import{CHANGE_ROTATION,SET_RESIZE}from"actions";import restrictNumber from"utils/restrict-number";import getSizeAfterRotation from"utils/get-size-after-rotation";import{TOOLS_IDS}from"utils/constants";import ToolsBarItemButton from"components/tools-bar/tools-bar-item-button";import{SFlexBox,SIconButton}from"@solostylist/ui-kit/core";var RotateOptions=function(){var a=useStore(),b=a.dispatch,c=a.adjustments.rotation,d=void 0===c?0:c,e=a.resize,f=void 0===e?{}:e,g=a.config,h=g[TOOLS_IDS.ROTATE],i=usePhoneScreen(),j=useDebouncedCallback(function(a,c){var d=restrictNumber(c,-180,180);if(b({type:CHANGE_ROTATION,payload:{rotation:d}}),f.width&&f.height){var e=getSizeAfterRotation(f.width,f.height,d);b({type:SET_RESIZE,payload:{width:e.width,height:e.height}})}},20);return"buttons"===h.componentType?React.createElement(React.Fragment,null,React.createElement(ToolsBarItemButton,{id:TOOLS_IDS.IMAGE,label:"-".concat(h.angle,"\xB0"),Icon:RotateLeftOutlined,onClick:function(a){var b=d-h.angle;j(a,b)}}),React.createElement(ToolsBarItemButton,{id:TOOLS_IDS.IMAGE,label:"+".concat(null===h||void 0===h?void 0:h.angle,"\xB0"),Icon:RotateRightOutlined,onClick:function(a){var b=d+h.angle;j(a,b)}})):React.createElement(SFlexBox,{alignItems:"center",gap:2},React.createElement(SIconButton,{onClick:function(a){return j(a,d-90)}},React.createElement(Rotate90DegreesCwOutlined,null)),React.createElement(Slider,{valueLabelDisplay:"auto",marks:!0,min:-180,max:180,step:i?h.angle/3:1,value:d,onChange:j,sx:{width:200,"& .MuiSlider-thumb":{width:12,height:12},"& .MuiSlider-mark":{width:4,height:4,borderRadius:"50%"}}}),React.createElement(SIconButton,{onClick:function(a){return j(a,d+90)}},React.createElement(Rotate90DegreesCwOutlined,{sx:{transform:"scaleX(-1)"}})))};export default RotateOptions;
+import { RotateLeftOutlined, RotateRightOutlined, Rotate90DegreesCwOutlined } from '@mui/icons-material';
+import Slider from '@mui/material/Slider';
+import { useDebouncedCallback, usePhoneScreen, useStore } from "../../../hooks";
+import { CHANGE_ROTATION, SET_RESIZE } from "../../../actions";
+import restrictNumber from "../../../utils/restrict-number";
+import getSizeAfterRotation from "../../../utils/get-size-after-rotation";
+import { TOOLS_IDS } from "../../../utils/constants";
+import ToolsBarItemButton from "../../tools-bar/tools-bar-item-button";
+import { SFlexBox, SIconButton } from '@solostylist/ui-kit/core';
+var RotateOptions = function RotateOptions() {
+  var _useStore = useStore(),
+    dispatch = _useStore.dispatch,
+    _useStore$adjustments = _useStore.adjustments.rotation,
+    rotation = _useStore$adjustments === void 0 ? 0 : _useStore$adjustments,
+    _useStore$resize = _useStore.resize,
+    resize = _useStore$resize === void 0 ? {} : _useStore$resize,
+    config = _useStore.config;
+  var rotateConfig = config[TOOLS_IDS.ROTATE];
+  var isPhoneScreen = usePhoneScreen();
+  var changeRotation = useDebouncedCallback(function (_e, newRotation) {
+    var rotationAngle = restrictNumber(newRotation, -180, 180);
+    dispatch({
+      type: CHANGE_ROTATION,
+      payload: {
+        rotation: rotationAngle
+      }
+    });
+    if (resize.width && resize.height) {
+      var sizeAfterRotation = getSizeAfterRotation(resize.width, resize.height, rotationAngle);
+      dispatch({
+        type: SET_RESIZE,
+        payload: {
+          width: sizeAfterRotation.width,
+          height: sizeAfterRotation.height
+        }
+      });
+    }
+  }, 20);
+  var changeRotationButtonPositive = function changeRotationButtonPositive(e) {
+    var newAngle = rotation + rotateConfig.angle;
+    changeRotation(e, newAngle);
+  };
+  var changeRotationButtonNegative = function changeRotationButtonNegative(e) {
+    var newAngle = rotation - rotateConfig.angle;
+    changeRotation(e, newAngle);
+  };
+  if (rotateConfig.componentType === 'buttons') {
+    return React.createElement(React.Fragment, null, React.createElement(ToolsBarItemButton, {
+      id: TOOLS_IDS.IMAGE,
+      label: "-".concat(rotateConfig.angle, "\xB0"),
+      Icon: RotateLeftOutlined,
+      onClick: changeRotationButtonNegative
+    }), React.createElement(ToolsBarItemButton, {
+      id: TOOLS_IDS.IMAGE,
+      label: "+".concat(rotateConfig === null || rotateConfig === void 0 ? void 0 : rotateConfig.angle, "\xB0"),
+      Icon: RotateRightOutlined,
+      onClick: changeRotationButtonPositive
+    }));
+  }
+  return React.createElement(SFlexBox, {
+    alignItems: "center",
+    gap: 2
+  }, React.createElement(SIconButton, {
+    onClick: function onClick(e) {
+      return changeRotation(e, rotation - 90);
+    }
+  }, React.createElement(Rotate90DegreesCwOutlined, null)), React.createElement(Slider, {
+    valueLabelDisplay: "auto",
+    marks: true,
+    min: -180,
+    max: 180,
+    step: isPhoneScreen ? rotateConfig.angle / 3 : 1,
+    value: rotation,
+    onChange: changeRotation,
+    sx: {
+      width: 200,
+      '& .MuiSlider-thumb': {
+        width: 12,
+        height: 12
+      },
+      '& .MuiSlider-mark': {
+        width: 4,
+        height: 4,
+        borderRadius: '50%'
+      }
+    }
+  }), React.createElement(SIconButton, {
+    onClick: function onClick(e) {
+      return changeRotation(e, rotation + 90);
+    }
+  }, React.createElement(Rotate90DegreesCwOutlined, {
+    sx: {
+      transform: 'scaleX(-1)'
+    }
+  })));
+};
+export default RotateOptions;

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

@@ -1 +1,2 @@
-export{default as TextButton}from"./text-button";export{default as TextOptions}from"./text-options";
+export { default as TextButton } from "./text-button";
+export { default as TextOptions } from "./text-options";

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

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

package/lib/components/tools/text/text-options/handle-text-change-area.js

@@ -1 +1,122 @@
-var textarea,textNode,transformer,editFinishCallback,disableTextEditCallback;function deactivateTextChange(){textarea&&textarea.remove(),window&&window.removeEventListener("click",handleOutsideClick),textNode&&textNode.show(),transformer&&transformer.show(),"function"==typeof disableTextEditCallback&&disableTextEditCallback(),textNode=null,textarea=null,transformer=null}function handleOutsideClick(a){if(a.target!==textarea){var b=textarea.value;deactivateTextChange(),editFinishCallback(b)}}var activateTextChange=function(a,b,c,d,e){function f(a){var b=a;b||(b=textNode.placeholder.length*textNode.fontSize());var c=/^((?!chrome|android).)*safari/i.test(navigator.userAgent);(c||k)&&(b=Math.ceil(b));var d=!!document.documentMode||/Edge/.test(navigator.userAgent);d&&(b+=1),textarea.style.width="".concat(b,"px")}editFinishCallback=d,disableTextEditCallback=e,transformer=c,textNode=b.findOne("#".concat(a)),textNode.hide(),transformer.hide();var g=textNode.absolutePosition();textarea=document.createElement("textarea"),b.container().parentNode.appendChild(textarea),textarea.value=textNode.text(),textarea.style.position="absolute",textarea.style.top="".concat(g.y,"px"),textarea.style.left="".concat(g.x,"px"),textarea.style.width="".concat(textNode.width()-2*textNode.padding(),"px"),textarea.style.height="".concat(textNode.height()-2*textNode.padding()+5,"px"),textarea.style.maxWidth="".concat(textNode.width()-2*textNode.padding(),"px"),textarea.style.maxHeight="".concat(textNode.height()-2*textNode.padding()+5,"px"),textarea.style.fontSize="".concat(textNode.fontSize(),"px"),textarea.style.border="1px solid rgba(0, 0, 0, 0.5)",textarea.style.padding="0px",textarea.style.margin="0px",textarea.style.overflow="hidden",textarea.style.background="none",textarea.style.outline="none",textarea.style.resize="none",textarea.style.lineHeight=textNode.lineHeight(),textarea.style.fontFamily=textNode.fontFamily(),textarea.style.transformOrigin="left top",textarea.style.textAlign=textNode.align(),textarea.style.fontStyle=textNode.fontStyle(),textarea.style.letterSpacing=textNode.letterSpacing(),textarea.style.lineHeight=textNode.lineHeight(),textarea.style.color=textNode.fill();var h=textNode.rotation(),i="";h&&(i+="rotateZ(".concat(h,"deg)"));var j=0,k=-1<navigator.userAgent.toLowerCase().indexOf("firefox");k&&(j+=2+Math.round(textNode.fontSize()/20)),i+="translateY(-".concat(j,"px)"),textarea.style.transform=i,textarea.style.height="auto",textarea.style.height="".concat(textarea.scrollHeight+3,"px"),textarea.focus(),textarea.addEventListener("keydown",function(a){if("Enter"===a.key&&!a.shiftKey){var b=textarea.value;deactivateTextChange(),editFinishCallback(b)}"Escape"===a.key&&deactivateTextChange()}),textarea.addEventListener("keydown",function(a){if("Enter"!==a.key&&"Escape"!==a.key){var b=textNode.getAbsoluteScale().x;f(textNode.width()*b),textarea.style.height="auto",textarea.style.height="".concat(textarea.scrollHeight+textNode.fontSize(),"px")}}),window&&setTimeout(function(){window.addEventListener("click",handleOutsideClick)})};export{activateTextChange,deactivateTextChange};
+var textarea;
+var textNode;
+var transformer;
+var editFinishCallback;
+var disableTextEditCallback;
+function deactivateTextChange() {
+  if (textarea) {
+    textarea.remove();
+  }
+  if (window) {
+    window.removeEventListener('click', handleOutsideClick);
+  }
+  if (textNode) {
+    textNode.show();
+  }
+  if (transformer) {
+    transformer.show();
+  }
+  if (typeof disableTextEditCallback === 'function') {
+    disableTextEditCallback();
+  }
+  textNode = null;
+  textarea = null;
+  transformer = null;
+}
+function handleOutsideClick(e) {
+  if (e.target !== textarea) {
+    var textValue = textarea.value;
+    deactivateTextChange();
+    editFinishCallback(textValue);
+  }
+}
+var activateTextChange = function activateTextChange(textNodeId, canvasStage, currentTransformer, finishingCallback, dismissingTextEditing) {
+  editFinishCallback = finishingCallback;
+  disableTextEditCallback = dismissingTextEditing;
+  transformer = currentTransformer;
+  textNode = canvasStage.findOne("#".concat(textNodeId));
+  textNode.hide();
+  transformer.hide();
+  var textPosition = textNode.absolutePosition();
+  textarea = document.createElement('textarea');
+  canvasStage.container().parentNode.appendChild(textarea);
+  textarea.value = textNode.text();
+  textarea.style.position = 'absolute';
+  textarea.style.top = "".concat(textPosition.y, "px");
+  textarea.style.left = "".concat(textPosition.x, "px");
+  textarea.style.width = "".concat(textNode.width() - textNode.padding() * 2, "px");
+  textarea.style.height = "".concat(textNode.height() - textNode.padding() * 2 + 5, "px");
+  textarea.style.maxWidth = "".concat(textNode.width() - textNode.padding() * 2, "px");
+  textarea.style.maxHeight = "".concat(textNode.height() - textNode.padding() * 2 + 5, "px");
+  textarea.style.fontSize = "".concat(textNode.fontSize(), "px");
+  textarea.style.border = '1px solid rgba(0, 0, 0, 0.5)';
+  textarea.style.padding = '0px';
+  textarea.style.margin = '0px';
+  textarea.style.overflow = 'hidden';
+  textarea.style.background = 'none';
+  textarea.style.outline = 'none';
+  textarea.style.resize = 'none';
+  textarea.style.lineHeight = textNode.lineHeight();
+  textarea.style.fontFamily = textNode.fontFamily();
+  textarea.style.transformOrigin = 'left top';
+  textarea.style.textAlign = textNode.align();
+  textarea.style.fontStyle = textNode.fontStyle();
+  textarea.style.letterSpacing = textNode.letterSpacing();
+  textarea.style.lineHeight = textNode.lineHeight();
+  textarea.style.color = textNode.fill();
+  var rotation = textNode.rotation();
+  var transform = '';
+  if (rotation) {
+    transform += "rotateZ(".concat(rotation, "deg)");
+  }
+  var firefoxMovePx = 0;
+  var isFirefox = navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
+  if (isFirefox) {
+    firefoxMovePx += 2 + Math.round(textNode.fontSize() / 20);
+  }
+  transform += "translateY(-".concat(firefoxMovePx, "px)");
+  textarea.style.transform = transform;
+  textarea.style.height = 'auto';
+  textarea.style.height = "".concat(textarea.scrollHeight + 3, "px");
+  textarea.focus();
+  function setTextareaWidth(newTextWidth) {
+    var newWidth = newTextWidth;
+    if (!newWidth) {
+      newWidth = textNode.placeholder.length * textNode.fontSize();
+    }
+    var isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
+    if (isSafari || isFirefox) {
+      newWidth = Math.ceil(newWidth);
+    }
+    var isEdge = !!document.documentMode || /Edge/.test(navigator.userAgent);
+    if (isEdge) {
+      newWidth += 1;
+    }
+    textarea.style.width = "".concat(newWidth, "px");
+  }
+  textarea.addEventListener('keydown', function (event) {
+    if (event.key === 'Enter' && !event.shiftKey) {
+      var textContent = textarea.value;
+      deactivateTextChange();
+      editFinishCallback(textContent);
+    }
+    if (event.key === 'Escape') {
+      deactivateTextChange();
+    }
+  });
+  textarea.addEventListener('keydown', function (event) {
+    if (event.key === 'Enter' || event.key === 'Escape') {
+      return;
+    }
+    var scale = textNode.getAbsoluteScale().x;
+    setTextareaWidth(textNode.width() * scale);
+    textarea.style.height = 'auto';
+    textarea.style.height = "".concat(textarea.scrollHeight + textNode.fontSize(), "px");
+  });
+  if (window) {
+    setTimeout(function () {
+      window.addEventListener('click', handleOutsideClick);
+    });
+  }
+};
+export { activateTextChange, deactivateTextChange };

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

@@ -1 +1,17 @@
-import _slicedToArray from"@babel/runtime/helpers/slicedToArray";import{useAnnotation}from"hooks";import{TOOLS_IDS}from"utils/constants";import TextControls from"./text-controls";var TextOptions=function(){var a=useAnnotation({name:TOOLS_IDS.TEXT}),b=_slicedToArray(a,2),c=b[0],d=b[1];return React.createElement(TextControls,{text:c,saveText:d})};export default TextOptions;
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import { useAnnotation } from "../../../../hooks";
+import { TOOLS_IDS } from "../../../../utils/constants";
+import TextControls from "./text-controls";
+var TextOptions = function TextOptions() {
+  var _useAnnotation = useAnnotation({
+      name: TOOLS_IDS.TEXT
+    }),
+    _useAnnotation2 = _slicedToArray(_useAnnotation, 2),
+    text = _useAnnotation2[0],
+    saveText = _useAnnotation2[1];
+  return React.createElement(TextControls, {
+    text: text,
+    saveText: saveText
+  });
+};
+export default TextOptions;

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

@@ -1 +1,38 @@
-import{FormatAlignCenterOutlined,FormatAlignLeftOutlined}from"@mui/icons-material";import{SFlexBox}from"@solostylist/ui-kit/core";import SIconButtonWrapper from"components/common/icon-wrapper";import{TextAlignment}from"types/annotations";var rightAlignmentCssTransform={transform:"scaleX(-1)"},TextAlignmentFields=function(a){var b=a.annotation,c=a.updateAnnotation,d=b.align,e=function(a){c({align:a})};return React.createElement(SFlexBox,{gap:1},React.createElement(SIconButtonWrapper,{onClick:function(){return e(TextAlignment.LEFT)},active:d===TextAlignment.LEFT},React.createElement(FormatAlignLeftOutlined,null)),React.createElement(SIconButtonWrapper,{onClick:function(){return e(TextAlignment.CENTER)},active:d===TextAlignment.CENTER},React.createElement(FormatAlignCenterOutlined,null)),React.createElement(SIconButtonWrapper,{onClick:function(){return e(TextAlignment.RIGHT)},active:d===TextAlignment.RIGHT},React.createElement(FormatAlignLeftOutlined,{style:rightAlignmentCssTransform})))};export default TextAlignmentFields;
+import { FormatAlignCenterOutlined, FormatAlignLeftOutlined } from '@mui/icons-material';
+import { SFlexBox } from '@solostylist/ui-kit/core';
+import SIconButtonWrapper from "../../../common/icon-wrapper";
+import { TextAlignment } from "../../../../types/annotations";
+var rightAlignmentCssTransform = {
+  transform: 'scaleX(-1)'
+};
+var TextAlignmentFields = function TextAlignmentFields(_ref) {
+  var text = _ref.annotation,
+    updateText = _ref.updateAnnotation;
+  var align = text.align;
+  var changeHorizontalAlignment = function changeHorizontalAlignment(newHorizonalAlignment) {
+    updateText({
+      align: newHorizonalAlignment
+    });
+  };
+  return React.createElement(SFlexBox, {
+    gap: 1
+  }, React.createElement(SIconButtonWrapper, {
+    onClick: function onClick() {
+      return changeHorizontalAlignment(TextAlignment.LEFT);
+    },
+    active: align === TextAlignment.LEFT
+  }, React.createElement(FormatAlignLeftOutlined, null)), React.createElement(SIconButtonWrapper, {
+    onClick: function onClick() {
+      return changeHorizontalAlignment(TextAlignment.CENTER);
+    },
+    active: align === TextAlignment.CENTER
+  }, React.createElement(FormatAlignCenterOutlined, null)), React.createElement(SIconButtonWrapper, {
+    onClick: function onClick() {
+      return changeHorizontalAlignment(TextAlignment.RIGHT);
+    },
+    active: align === TextAlignment.RIGHT
+  }, React.createElement(FormatAlignLeftOutlined, {
+    style: rightAlignmentCssTransform
+  })));
+};
+export default TextAlignmentFields;

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

@@ -1 +1,147 @@
-import _typeof from"@babel/runtime/helpers/typeof";import _slicedToArray from"@babel/runtime/helpers/slicedToArray";import _defineProperty from"@babel/runtime/helpers/defineProperty";import{useCallback,useEffect}from"react";import{FormatBoldOutlined,FormatItalicOutlined}from"@mui/icons-material";import{TOOLS_IDS,TRANSFORMERS_LAYER_ID}from"utils/constants";import AnnotationOptions from"components/common/annotation-options";import SIconButtonWrapper from"components/common/icon-wrapper";import{ENABLE_TEXT_CONTENT_EDIT}from"actions";import restrictNumber from"utils/restrict-number";import{useStore}from"hooks";import{SFlexBox,SSelect,STextField}from"@solostylist/ui-kit/core";import{textOptionsPopupComponents,TEXT_POPPABLE_OPTIONS}from"./text-options.constants";import{activateTextChange,deactivateTextChange}from"./handle-text-change-area";var TextControls=function(a){var b=a.text,c=a.saveText,d=a.children,e=useStore(),f=e.dispatch,g=e.textIdOfEditableContent,h=e.designLayer,i=e.t,j=e.config,k=j[TOOLS_IDS.TEXT]||{},l=k.fonts,m=void 0===l?[]:l,n=k.onFontChange,o=useCallback(function(a){var b=a.target,d=b.name,e=b.value,f=b.type;c(function(a){return _defineProperty({id:a.id},d,"number"===f?restrictNumber(+e,1,500):e)})},[c]),p=useCallback(function(a){if(o({target:{name:"fontFamily",value:a}}),b.fontFamily!==a&&"function"==typeof n){var c=h.draw.bind(h);n(a,c)}},[o,b.fontFamily,n,h]),q=useCallback(function(a){var c,d=(null===(c=b.fontStyle)||void 0===c?void 0:c.replace("normal","").split(" "))||[];0<Object.keys(d).length&&d.includes(a)?d=d.filter(function(b){return b!==a}):d.push(a),o({target:{name:"fontStyle",value:d.join(" ").trim()||"normal"}})},[b.fontStyle,o]),r=useCallback(function(){f({type:ENABLE_TEXT_CONTENT_EDIT,payload:{textIdOfEditableContent:null}})},[]),s=useCallback(function(a){o({target:{name:"text",value:a}}),r()},[]);return useEffect(function(){var a;if(g&&b.id===g){var c=h.getStage(),d=c.findOne("#".concat(TRANSFORMERS_LAYER_ID));if(d){var e=d.children||[],f=_slicedToArray(e,1);a=f[0],activateTextChange(g,c,a,s,r)}}return function(){a&&g&&deactivateTextChange()}},[g]),React.createElement(AnnotationOptions,{annotation:b,updateAnnotation:c,morePoppableOptionsPrepended:TEXT_POPPABLE_OPTIONS,moreOptionsPopupComponentsObj:textOptionsPopupComponents},React.createElement(SFlexBox,{sx:{gap:1,alignItems:"center"}},Array.isArray(m)&&1<m.length&&React.createElement(SSelect,{onChange:function(a){return p(a.target.value)},value:b.fontFamily,placeholder:i("fontFamily"),options:m,optionLabel:"object"===_typeof(m[0])?"label":void 0,optionValue:"object"===_typeof(m[0])?"value":void 0,sx:{width:150,textAlign:"left"}}),React.createElement(STextField,{value:b.fontSize||"",name:"fontSize",onChange:o,inputMode:"numeric",type:"number",sx:{width:150},placeholder:i("size")}),React.createElement(SIconButtonWrapper,{active:(b.fontStyle||"").includes("bold"),onClick:function(){return q("bold")}},React.createElement(FormatBoldOutlined,null)),React.createElement(SIconButtonWrapper,{active:(b.fontStyle||"").includes("italic"),onClick:function(){return q("italic")}},React.createElement(FormatItalicOutlined,null)),d))};export default TextControls;
+import _typeof from "@babel/runtime/helpers/typeof";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import { useCallback, useEffect } from 'react';
+import { FormatBoldOutlined, FormatItalicOutlined } from '@mui/icons-material';
+import { TOOLS_IDS, TRANSFORMERS_LAYER_ID } from "../../../../utils/constants";
+import AnnotationOptions from "../../../common/annotation-options";
+import SIconButtonWrapper from "../../../common/icon-wrapper";
+import { ENABLE_TEXT_CONTENT_EDIT } from "../../../../actions";
+import restrictNumber from "../../../../utils/restrict-number";
+import { useStore } from "../../../../hooks";
+import { SFlexBox, SSelect, STextField } from '@solostylist/ui-kit/core';
+import { textOptionsPopupComponents, TEXT_POPPABLE_OPTIONS } from "./text-options.constants";
+import { activateTextChange, deactivateTextChange } from "./handle-text-change-area";
+var TextControls = function TextControls(_ref) {
+  var text = _ref.text,
+    saveText = _ref.saveText,
+    children = _ref.children;
+  var _useStore = useStore(),
+    dispatch = _useStore.dispatch,
+    textIdOfEditableContent = _useStore.textIdOfEditableContent,
+    designLayer = _useStore.designLayer,
+    t = _useStore.t,
+    config = _useStore.config;
+  var textConfig = config[TOOLS_IDS.TEXT] || {};
+  var _textConfig$fonts = textConfig.fonts,
+    fonts = _textConfig$fonts === void 0 ? [] : _textConfig$fonts,
+    onFontChange = textConfig.onFontChange;
+  var changeTextProps = useCallback(function (e) {
+    var _e$target = e.target,
+      name = _e$target.name,
+      value = _e$target.value,
+      type = _e$target.type;
+    saveText(function (latestText) {
+      return _defineProperty({
+        id: latestText.id
+      }, name, type === 'number' ? restrictNumber(Number(value), 1, 500) : value);
+    });
+  }, [saveText]);
+  var changeFontFamily = useCallback(function (newFontFamily) {
+    changeTextProps({
+      target: {
+        name: 'fontFamily',
+        value: newFontFamily
+      }
+    });
+    if (text.fontFamily !== newFontFamily && typeof onFontChange === 'function') {
+      var reRenderCanvasFn = designLayer.draw.bind(designLayer);
+      onFontChange(newFontFamily, reRenderCanvasFn);
+    }
+  }, [changeTextProps, text.fontFamily, onFontChange, designLayer]);
+  var changeFontStyle = useCallback(function (newStyle) {
+    var _text$fontStyle;
+    var fontStyle = ((_text$fontStyle = text.fontStyle) === null || _text$fontStyle === void 0 ? void 0 : _text$fontStyle.replace('normal', '').split(' ')) || [];
+    if (Object.keys(fontStyle).length > 0 && fontStyle.includes(newStyle)) {
+      fontStyle = fontStyle.filter(function (style) {
+        return style !== newStyle;
+      });
+    } else {
+      fontStyle.push(newStyle);
+    }
+    changeTextProps({
+      target: {
+        name: 'fontStyle',
+        value: fontStyle.join(' ').trim() || 'normal'
+      }
+    });
+  }, [text.fontStyle, changeTextProps]);
+  var disableTextEdit = useCallback(function () {
+    dispatch({
+      type: ENABLE_TEXT_CONTENT_EDIT,
+      payload: {
+        textIdOfEditableContent: null
+      }
+    });
+  }, []);
+  var changeTextContent = useCallback(function (newContent) {
+    changeTextProps({
+      target: {
+        name: 'text',
+        value: newContent
+      }
+    });
+    disableTextEdit();
+  }, []);
+  useEffect(function () {
+    var transformer;
+    if (textIdOfEditableContent && text.id === textIdOfEditableContent) {
+      var canvasStage = designLayer.getStage();
+      var transformersLayer = canvasStage.findOne("#".concat(TRANSFORMERS_LAYER_ID));
+      if (transformersLayer) {
+        var _ref3 = transformersLayer.children || [];
+        var _ref4 = _slicedToArray(_ref3, 1);
+        transformer = _ref4[0];
+        activateTextChange(textIdOfEditableContent, canvasStage, transformer, changeTextContent, disableTextEdit);
+      }
+    }
+    return function () {
+      if (transformer && textIdOfEditableContent) deactivateTextChange();
+    };
+  }, [textIdOfEditableContent]);
+  return React.createElement(AnnotationOptions, {
+    annotation: text,
+    updateAnnotation: saveText,
+    morePoppableOptionsPrepended: TEXT_POPPABLE_OPTIONS,
+    moreOptionsPopupComponentsObj: textOptionsPopupComponents
+  }, React.createElement(SFlexBox, {
+    sx: {
+      gap: 1,
+      alignItems: 'center'
+    }
+  }, Array.isArray(fonts) && fonts.length > 1 && React.createElement(SSelect, {
+    onChange: function onChange(e) {
+      return changeFontFamily(e.target.value);
+    },
+    value: text.fontFamily,
+    placeholder: t('fontFamily'),
+    options: fonts,
+    optionLabel: _typeof(fonts[0]) === 'object' ? 'label' : undefined,
+    optionValue: _typeof(fonts[0]) === 'object' ? 'value' : undefined,
+    sx: {
+      width: 150,
+      textAlign: 'left'
+    }
+  }), React.createElement(STextField, {
+    value: text.fontSize || '',
+    name: "fontSize",
+    onChange: changeTextProps,
+    inputMode: "numeric",
+    type: "number",
+    sx: {
+      width: 150
+    },
+    placeholder: t('size')
+  }), React.createElement(SIconButtonWrapper, {
+    active: (text.fontStyle || '').includes('bold'),
+    onClick: function onClick() {
+      return changeFontStyle('bold');
+    }
+  }, React.createElement(FormatBoldOutlined, null)), React.createElement(SIconButtonWrapper, {
+    active: (text.fontStyle || '').includes('italic'),
+    onClick: function onClick() {
+      return changeFontStyle('italic');
+    }
+  }, React.createElement(FormatItalicOutlined, null)), children));
+};
+export default TextControls;

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

@@ -1 +1,16 @@
-import _defineProperty from"@babel/runtime/helpers/defineProperty";import{FormatAlignCenterOutlined,FormatLineSpacingOutlined}from"@mui/icons-material";import TextAlignmentFields from"./text-alignment-fields";import TextSpacingsFields from"./text-spacings-fields";export var TEXT_ALIGNMENT="text-alignment";export var TEXT_SPACINGS="text-spacings";export var TEXT_POPPABLE_OPTIONS=[{titleKey:"textAlignment",name:"text-alignment",Icon:FormatAlignCenterOutlined},{titleKey:"textSpacings",name:"text-spacings",Icon:FormatLineSpacingOutlined}];export var textOptionsPopupComponents=_defineProperty(_defineProperty({},"text-alignment",TextAlignmentFields),"text-spacings",TextSpacingsFields);
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import { FormatAlignCenterOutlined, FormatLineSpacingOutlined } from '@mui/icons-material';
+import TextAlignmentFields from "./text-alignment-fields";
+import TextSpacingsFields from "./text-spacings-fields";
+export var TEXT_ALIGNMENT = 'text-alignment';
+export var TEXT_SPACINGS = 'text-spacings';
+export var TEXT_POPPABLE_OPTIONS = [{
+  titleKey: 'textAlignment',
+  name: TEXT_ALIGNMENT,
+  Icon: FormatAlignCenterOutlined
+}, {
+  titleKey: 'textSpacings',
+  name: TEXT_SPACINGS,
+  Icon: FormatLineSpacingOutlined
+}];
+export var textOptionsPopupComponents = _defineProperty(_defineProperty({}, TEXT_ALIGNMENT, TextAlignmentFields), TEXT_SPACINGS, TextSpacingsFields);

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

@@ -1 +1,34 @@
-import _defineProperty from"@babel/runtime/helpers/defineProperty";import Slider from"components/common/slider";import restrictNumber from"utils/restrict-number";var MIN_VALUE=0,MAX_VALUE=100,SLIDER_STEP=1,TextSpacingsFields=function(a){var b=a.annotation,c=a.updateAnnotation,d=a.t,e=b.letterSpacing,f=b.lineHeight,g=function(a,b){c(_defineProperty({},a,restrictNumber(b,MIN_VALUE,MAX_VALUE)))};return React.createElement(React.Fragment,null,React.createElement(Slider,{annotation:"px",label:d("letterSpacing"),onChange:function(a){return g("letterSpacing",a)},value:e,step:SLIDER_STEP}),React.createElement(Slider,{annotation:"px",label:d("lineHeight"),onChange:function(a){return g("lineHeight",a)},value:f,step:SLIDER_STEP}))};export default TextSpacingsFields;
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import Slider from "../../../common/slider";
+import restrictNumber from "../../../../utils/restrict-number";
+var MIN_VALUE = 0;
+var MAX_VALUE = 100;
+var SLIDER_STEP = 1;
+var TextSpacingsFields = function TextSpacingsFields(_ref) {
+  var text = _ref.annotation,
+    updateText = _ref.updateAnnotation,
+    t = _ref.t;
+  var letterSpacing = text.letterSpacing,
+    lineHeight = text.lineHeight;
+  var updateValue = function updateValue(prop, val) {
+    updateText(_defineProperty({}, prop, restrictNumber(val, MIN_VALUE, MAX_VALUE)));
+  };
+  return React.createElement(React.Fragment, null, React.createElement(Slider, {
+    annotation: "px",
+    label: t('letterSpacing'),
+    onChange: function onChange(val) {
+      return updateValue('letterSpacing', val);
+    },
+    value: letterSpacing,
+    step: SLIDER_STEP
+  }), React.createElement(Slider, {
+    annotation: "px",
+    label: t('lineHeight'),
+    onChange: function onChange(val) {
+      return updateValue('lineHeight', val);
+    },
+    value: lineHeight,
+    step: SLIDER_STEP
+  }));
+};
+export default TextSpacingsFields;

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

@@ -1 +1,98 @@
-import _defineProperty from"@babel/runtime/helpers/defineProperty";var _TOOLS_ITEMS;import{TABS_IDS,TOOLS_IDS}from"utils/constants";import{ArrowButton,ArrowOptions}from"./arrow";import{Blur,BlurOptions}from"./blur";import{Brightness,BrightnessOptions}from"./brightness";import{Contrast,ContrastOptions}from"./contrast";import{Crop}from"./crop";import{EllipseButton,EllipseOptions}from"./ellipse";import{Filters}from"./filters";import{FlipX,FlipY}from"./flip";import{HSV,HSVOptions}from"./hsv";import{ImageButton,ImageOptions}from"./image";import{LineButton,LineOptions}from"./line";import{PenButton,PenOptions}from"./pen";import{PolygonButton,PolygonOptions}from"./polygon";import{RectButton,RectOptions}from"./rect";import{Resize}from"./resize";import{RotateButton,RotateOptions}from"./rotate";import{TextButton,TextOptions}from"./text";import{Warmth,WarmthOptions}from"./warmth";import{Watermark}from"./watermark";export var TOOLS_ITEMS=(_TOOLS_ITEMS={},_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_TOOLS_ITEMS,TOOLS_IDS.CROP,{id:TOOLS_IDS.CROP,Item:Crop}),TOOLS_IDS.ROTATE,{id:TOOLS_IDS.ROTATE,Item:RotateButton,ItemOptions:RotateOptions}),TOOLS_IDS.FLIP_X,{id:TOOLS_IDS.FLIP_X,Item:FlipX}),TOOLS_IDS.FLIP_Y,{id:TOOLS_IDS.FLIP_Y,Item:FlipY}),TOOLS_IDS.BRIGHTNESS,{id:TOOLS_IDS.BRIGHTNESS,Item:Brightness,ItemOptions:BrightnessOptions}),TOOLS_IDS.CONTRAST,{id:TOOLS_IDS.CONTRAST,Item:Contrast,ItemOptions:ContrastOptions}),TOOLS_IDS.HSV,{id:TOOLS_IDS.HSV,Item:HSV,ItemOptions:HSVOptions}),TOOLS_IDS.BLUR,{id:TOOLS_IDS.BLUR,Item:Blur,ItemOptions:BlurOptions}),TOOLS_IDS.WARMTH,{id:TOOLS_IDS.WARMTH,Item:Warmth,ItemOptions:WarmthOptions}),TOOLS_IDS.FILTERS,{id:TOOLS_IDS.FILTERS,Item:Filters}),_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_TOOLS_ITEMS,TOOLS_IDS.WATERMARK,{id:TOOLS_IDS.WATERMARK,Item:Watermark}),TOOLS_IDS.TEXT,{id:TOOLS_IDS.TEXT,Item:TextButton,ItemOptions:TextOptions}),TOOLS_IDS.IMAGE,{id:TOOLS_IDS.IMAGE,Item:ImageButton,ItemOptions:ImageOptions}),TOOLS_IDS.RECT,{id:TOOLS_IDS.RECT,Item:RectButton,ItemOptions:RectOptions}),TOOLS_IDS.POLYGON,{id:TOOLS_IDS.POLYGON,Item:PolygonButton,ItemOptions:PolygonOptions}),TOOLS_IDS.ELLIPSE,{id:TOOLS_IDS.ELLIPSE,Item:EllipseButton,ItemOptions:EllipseOptions}),TOOLS_IDS.PEN,{id:TOOLS_IDS.PEN,Item:PenButton,ItemOptions:PenOptions}),TOOLS_IDS.LINE,{id:TOOLS_IDS.LINE,Item:LineButton,ItemOptions:LineOptions}),TOOLS_IDS.ARROW,{id:TOOLS_IDS.ARROW,Item:ArrowButton,ItemOptions:ArrowOptions}),TOOLS_IDS.RESIZE,{id:TOOLS_IDS.RESIZE,Item:Resize}));export var TABS_TOOLS=_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({},TABS_IDS.ADJUST,[TOOLS_IDS.CROP,TOOLS_IDS.ROTATE,TOOLS_IDS.FLIP_X,TOOLS_IDS.FLIP_Y]),TABS_IDS.FINETUNE,[TOOLS_IDS.BRIGHTNESS,TOOLS_IDS.CONTRAST,TOOLS_IDS.HSV,TOOLS_IDS.BLUR,TOOLS_IDS.WARMTH]),TABS_IDS.FILTERS,[TOOLS_IDS.FILTERS]),TABS_IDS.WATERMARK,[TOOLS_IDS.WATERMARK]),TABS_IDS.ANNOTATE,[TOOLS_IDS.TEXT,TOOLS_IDS.IMAGE,TOOLS_IDS.RECT,TOOLS_IDS.ELLIPSE,TOOLS_IDS.POLYGON,TOOLS_IDS.PEN,TOOLS_IDS.LINE,TOOLS_IDS.ARROW]),TABS_IDS.RESIZE,[TOOLS_IDS.RESIZE]);
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+var _TOOLS_ITEMS;
+import { TABS_IDS, TOOLS_IDS } from "../../utils/constants";
+import { ArrowButton, ArrowOptions } from "./arrow";
+import { Blur, BlurOptions } from "./blur";
+import { Brightness, BrightnessOptions } from "./brightness";
+import { Contrast, ContrastOptions } from "./contrast";
+import { Crop } from "./crop";
+import { EllipseButton, EllipseOptions } from "./ellipse";
+import { Filters } from "./filters";
+import { FlipX, FlipY } from "./flip";
+import { HSV, HSVOptions } from "./hsv";
+import { ImageButton, ImageOptions } from "./image";
+import { LineButton, LineOptions } from "./line";
+import { PenButton, PenOptions } from "./pen";
+import { PolygonButton, PolygonOptions } from "./polygon";
+import { RectButton, RectOptions } from "./rect";
+import { Resize } from "./resize";
+import { RotateButton, RotateOptions } from "./rotate";
+import { TextButton, TextOptions } from "./text";
+import { Warmth, WarmthOptions } from "./warmth";
+import { Watermark } from "./watermark";
+export var TOOLS_ITEMS = (_TOOLS_ITEMS = {}, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_TOOLS_ITEMS, TOOLS_IDS.CROP, {
+  id: TOOLS_IDS.CROP,
+  Item: Crop
+}), TOOLS_IDS.ROTATE, {
+  id: TOOLS_IDS.ROTATE,
+  Item: RotateButton,
+  ItemOptions: RotateOptions
+}), TOOLS_IDS.FLIP_X, {
+  id: TOOLS_IDS.FLIP_X,
+  Item: FlipX
+}), TOOLS_IDS.FLIP_Y, {
+  id: TOOLS_IDS.FLIP_Y,
+  Item: FlipY
+}), TOOLS_IDS.BRIGHTNESS, {
+  id: TOOLS_IDS.BRIGHTNESS,
+  Item: Brightness,
+  ItemOptions: BrightnessOptions
+}), TOOLS_IDS.CONTRAST, {
+  id: TOOLS_IDS.CONTRAST,
+  Item: Contrast,
+  ItemOptions: ContrastOptions
+}), TOOLS_IDS.HSV, {
+  id: TOOLS_IDS.HSV,
+  Item: HSV,
+  ItemOptions: HSVOptions
+}), TOOLS_IDS.BLUR, {
+  id: TOOLS_IDS.BLUR,
+  Item: Blur,
+  ItemOptions: BlurOptions
+}), TOOLS_IDS.WARMTH, {
+  id: TOOLS_IDS.WARMTH,
+  Item: Warmth,
+  ItemOptions: WarmthOptions
+}), TOOLS_IDS.FILTERS, {
+  id: TOOLS_IDS.FILTERS,
+  Item: Filters
+}), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_TOOLS_ITEMS, TOOLS_IDS.WATERMARK, {
+  id: TOOLS_IDS.WATERMARK,
+  Item: Watermark
+}), TOOLS_IDS.TEXT, {
+  id: TOOLS_IDS.TEXT,
+  Item: TextButton,
+  ItemOptions: TextOptions
+}), TOOLS_IDS.IMAGE, {
+  id: TOOLS_IDS.IMAGE,
+  Item: ImageButton,
+  ItemOptions: ImageOptions
+}), TOOLS_IDS.RECT, {
+  id: TOOLS_IDS.RECT,
+  Item: RectButton,
+  ItemOptions: RectOptions
+}), TOOLS_IDS.POLYGON, {
+  id: TOOLS_IDS.POLYGON,
+  Item: PolygonButton,
+  ItemOptions: PolygonOptions
+}), TOOLS_IDS.ELLIPSE, {
+  id: TOOLS_IDS.ELLIPSE,
+  Item: EllipseButton,
+  ItemOptions: EllipseOptions
+}), TOOLS_IDS.PEN, {
+  id: TOOLS_IDS.PEN,
+  Item: PenButton,
+  ItemOptions: PenOptions
+}), TOOLS_IDS.LINE, {
+  id: TOOLS_IDS.LINE,
+  Item: LineButton,
+  ItemOptions: LineOptions
+}), TOOLS_IDS.ARROW, {
+  id: TOOLS_IDS.ARROW,
+  Item: ArrowButton,
+  ItemOptions: ArrowOptions
+}), TOOLS_IDS.RESIZE, {
+  id: TOOLS_IDS.RESIZE,
+  Item: Resize
+}));
+export var TABS_TOOLS = _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, TABS_IDS.ADJUST, [TOOLS_IDS.CROP, TOOLS_IDS.ROTATE, TOOLS_IDS.FLIP_X, TOOLS_IDS.FLIP_Y]), TABS_IDS.FINETUNE, [TOOLS_IDS.BRIGHTNESS, TOOLS_IDS.CONTRAST, TOOLS_IDS.HSV, TOOLS_IDS.BLUR, TOOLS_IDS.WARMTH]), TABS_IDS.FILTERS, [TOOLS_IDS.FILTERS]), TABS_IDS.WATERMARK, [TOOLS_IDS.WATERMARK]), TABS_IDS.ANNOTATE, [TOOLS_IDS.TEXT, TOOLS_IDS.IMAGE, TOOLS_IDS.RECT, TOOLS_IDS.ELLIPSE, TOOLS_IDS.POLYGON, TOOLS_IDS.PEN, TOOLS_IDS.LINE, TOOLS_IDS.ARROW]), TABS_IDS.RESIZE, [TOOLS_IDS.RESIZE]);

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

@@ -1 +1,2 @@
-export{default as Warmth}from"./warmth";export{default as WarmthOptions}from"./warmth-options";
+export { default as Warmth } from "./warmth";
+export { default as WarmthOptions } from "./warmth-options";