Fix: resize isn't considered in developer's transform function

scaleflex · Jun 6, 2023 · d6f43d1 · d6f43d1
1 parent 9a73270
commit d6f43d1
Show file tree

Hide file tree

Showing 6 changed files with 27 additions and 9 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -34,6 +34,10 @@ module.exports = {
     'react/prefer-read-only-props': 'error',
     'react/jsx-key': ['error', { checkKeyMustBeforeSpread: true }],
     'react/react-in-jsx-scope': 'off',
+    'react/function-component-definition': [
+      2,
+      { namedComponents: 'arrow-function' },
+    ],
   },
   settings: {
     'import/resolver': {

diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -28,6 +28,7 @@ Types of changes:
 
 - Crop doesn't work if no action with the canvas's UI ([Issue #298](https://github.com/scaleflex/filerobot-image-editor/issues/298))
 - Bug of having error on unmounting the component with textarea opened while adding text ([Issue #322](https://github.com/scaleflex/filerobot-image-editor/issues/322))
+- Resize isn't considered in developer's transform function `getCurrentImgDataFnRef` ([Issue #344](https://github.com/scaleflex/filerobot-image-editor/issues/344))
 
 ### Improved
 

diff --git a/packages/react-filerobot-image-editor/src/components/Topbar/SaveButton.jsx b/packages/react-filerobot-image-editor/src/components/Topbar/SaveButton.jsx
@@ -7,10 +7,12 @@ import Label from '@scaleflex/ui/core/label';
 /** Internal Dependencies */
 import { useStore, useTransformedImgData } from 'hooks';
 import getFileFullName from 'utils/getFileFullName';
+import getDefaultSaveQuality from 'utils/getDefaultSaveQuality';
 import {
   CLOSING_REASONS,
   ELLIPSE_CROP,
   SUPPORTED_IMAGE_TYPES,
+  DEFAULT_SAVE_QUALITY,
 } from 'utils/constants';
 import { HIDE_LOADER, SET_FEEDBACK, SHOW_LOADER } from 'actions';
 import Modal from 'components/common/Modal';
@@ -25,8 +27,6 @@ import {
   StyledResizeOnSave,
 } from './Topbar.styled';
 
-const DEFAULT_QUALITY_VAL = 0.92;
-
 const sliderStyle = { marginBottom: 16 };
 const saveButtonWrapperStyle = { width: 67 }; // 67px same width as tabs bar
 const saveButtonMenuStyle = { marginLeft: 12 };
@@ -54,17 +54,14 @@ const SaveButton = () => {
       forceToPngInEllipticalCrop,
       defaultSavedImageName,
       defaultSavedImageType,
-      defaultSavedImageQuality = DEFAULT_QUALITY_VAL,
+      defaultSavedImageQuality = DEFAULT_SAVE_QUALITY,
       useCloudimage,
       moreSaveOptions,
     },
   } = state;
   const [isModalOpened, setIsModalOpened] = useState(false);
   const [imageFileInfo, setImageFileInfo] = useState({
-    quality:
-      defaultSavedImageQuality <= 0 || defaultSavedImageQuality > 1
-        ? DEFAULT_QUALITY_VAL
-        : defaultSavedImageQuality,
+    quality: getDefaultSaveQuality(defaultSavedImageQuality),
   });
   const transformImgFn = useTransformedImgData();
   const isQualityAcceptable = ['jpeg', 'jpg', 'webp'].includes(
@@ -268,6 +265,7 @@ const SaveButton = () => {
         <Modal
           className="FIE_save-modal"
           title={t('saveAsModalLabel')}
+          // eslint-disable-next-line react/no-unstable-nested-components
           Icon={(props) => (
             <SaveAs color={theme.palette['accent-primary']} {...props} />
           )}

diff --git a/packages/react-filerobot-image-editor/src/hooks/useTransformedImgData.js b/packages/react-filerobot-image-editor/src/hooks/useTransformedImgData.js
@@ -24,6 +24,7 @@ const useTransformedImgData = () => {
     designLayer,
     shownImageDimensions,
     originalImage,
+    resize,
     adjustments: { crop, rotation = 0, isFlippedX, isFlippedY },
     config: {
       savingPixelRatio,
@@ -71,6 +72,10 @@ const useTransformedImgData = () => {
     pixelRatio = false,
     keepLoadingSpinnerShown = false,
   ) => {
+    const currentImgFileInfo = {
+      size: resize,
+      ...imageFileInfo,
+    };
     Konva.pixelRatio = pixelRatio || savingPixelRatio;
     const { clipWidth, clipHeight, clipX, clipY } = designLayer.attrs;
 
@@ -110,7 +115,7 @@ const useTransformedImgData = () => {
       quality = 92,
       size = {},
     } = {
-      ...((!imageFileInfo.name || !imageFileInfo.extension) &&
+      ...((!currentImgFileInfo.name || !currentImgFileInfo.extension) &&
         getFileFullName(
           originalImage.name,
           forceToPngInEllipticalCrop && crop.ratio === ELLIPSE_CROP
@@ -119,7 +124,7 @@ const useTransformedImgData = () => {
                 defaultSavedImageType?.toLowerCase(),
               ) && defaultSavedImageType,
         )),
-      ...imageFileInfo,
+      ...currentImgFileInfo,
     };
 
     const isQualityAcceptable = ['jpeg', 'jpg', 'webp'].includes(extension);

diff --git a/packages/react-filerobot-image-editor/src/utils/constants.js b/packages/react-filerobot-image-editor/src/utils/constants.js
@@ -8,6 +8,8 @@ export const WATERMARK_ANNOTATION_ID = 'watermark';
 
 export const TRANSLATIONS_GRID_UUID = '353297d2-40b4-4684-a875-45a2178a8157';
 
+export const DEFAULT_SAVE_QUALITY = 0.92;
+
 export const TABS_IDS = {
   FINETUNE: 'Finetune',
   FILTERS: 'Filters',

diff --git a/packages/react-filerobot-image-editor/src/utils/getDefaultSaveQuality.js b/packages/react-filerobot-image-editor/src/utils/getDefaultSaveQuality.js
@@ -0,0 +1,8 @@
+import { DEFAULT_SAVE_QUALITY } from './constants';
+
+const getDefaultSaveQuality = (providedDefaultQuality) =>
+  providedDefaultQuality <= 0 || providedDefaultQuality > 1
+    ? DEFAULT_SAVE_QUALITY
+    : providedDefaultQuality;
+
+export default getDefaultSaveQuality;