fix(image-editor): fix flip operation serialization (#595)

Co-authored-by: nd0ut <[email protected]>
uploadcare · Jan 30, 2024 · 140df3a · 140df3a
1 parent b169794
commit 140df3a
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 16 deletions.
diff --git a/blocks/CloudImageEditor/src/lib/transformationUtils.js b/blocks/CloudImageEditor/src/lib/transformationUtils.js
@@ -2,7 +2,8 @@
 import { joinCdnOperations } from '../../../../utils/cdn-utils.js';
 import { stringToArray } from '../../../../utils/stringToArray.js';
 
-export const OPERATIONS_ZEROS = Object.freeze({
+/** @type {Record<keyof import('../types').Transformations, unknown>} */
+export const OPERATIONS_DEFAULTS = Object.freeze({
   brightness: 0,
   exposure: 0,
   gamma: 100,
@@ -14,8 +15,11 @@ export const OPERATIONS_ZEROS = Object.freeze({
   filter: 0,
   rotate: 0,
   mirror: false,
+  flip: false,
+  crop: undefined,
 });
 
+/** @type {readonly (keyof import('../types').Transformations)[]} */
 const SUPPORTED_OPERATIONS_ORDERED = /** @type {const} */ ([
   'enhance',
   'brightness',
@@ -40,19 +44,17 @@ const SUPPORTED_OPERATIONS_ORDERED = /** @type {const} */ ([
 function transformationToStr(operation, options) {
   if (typeof options === 'number') {
     const value = options;
-    return OPERATIONS_ZEROS[/** @type {keyof typeof OPERATIONS_ZEROS} */ (operation)] !== value
-      ? `${operation}/${value}`
-      : '';
+    return OPERATIONS_DEFAULTS[operation] !== value ? `${operation}/${value}` : '';
   }
 
   if (typeof options === 'boolean') {
     const value = options;
-    return OPERATIONS_ZEROS[/** @type {keyof typeof OPERATIONS_ZEROS} */ (operation)] !== value ? `${operation}` : '';
+    return OPERATIONS_DEFAULTS[operation] !== value ? `${operation}` : '';
   }
 
   if (operation === 'filter' && options) {
     const { name, amount } = /** @type {NonNullable<import('../types').Transformations['filter']>} */ (options);
-    if (OPERATIONS_ZEROS.filter === amount) {
+    if (OPERATIONS_DEFAULTS.filter === amount) {
       return '';
     }
     return `${operation}/${name}/${amount}`;

diff --git a/blocks/CloudImageEditor/src/toolbar-constants.js b/blocks/CloudImageEditor/src/toolbar-constants.js
@@ -1,5 +1,5 @@
 // @ts-check
-import { OPERATIONS_ZEROS } from './lib/transformationUtils.js';
+import { OPERATIONS_DEFAULTS } from './lib/transformationUtils.js';
 
 export const TabId = Object.freeze({
   CROP: 'crop',
@@ -67,47 +67,47 @@ export const ALL_CROP_OPERATIONS = ['rotate', 'mirror', 'flip'];
 /** KeypointsNumber is the number of keypoints loaded from each side of zero, not total number */
 export const COLOR_OPERATIONS_CONFIG = Object.freeze({
   brightness: {
-    zero: OPERATIONS_ZEROS.brightness,
+    zero: OPERATIONS_DEFAULTS.brightness,
     range: [-100, 100],
     keypointsNumber: 2,
   },
   exposure: {
-    zero: OPERATIONS_ZEROS.exposure,
+    zero: OPERATIONS_DEFAULTS.exposure,
     range: [-500, 500],
     keypointsNumber: 2,
   },
   gamma: {
-    zero: OPERATIONS_ZEROS.gamma,
+    zero: OPERATIONS_DEFAULTS.gamma,
     range: [0, 1000],
     keypointsNumber: 2,
   },
   contrast: {
-    zero: OPERATIONS_ZEROS.contrast,
+    zero: OPERATIONS_DEFAULTS.contrast,
     range: [-100, 500],
     keypointsNumber: 2,
   },
   saturation: {
-    zero: OPERATIONS_ZEROS.saturation,
+    zero: OPERATIONS_DEFAULTS.saturation,
     range: [-100, 500],
     keypointsNumber: 1,
   },
   vibrance: {
-    zero: OPERATIONS_ZEROS.vibrance,
+    zero: OPERATIONS_DEFAULTS.vibrance,
     range: [-100, 500],
     keypointsNumber: 1,
   },
   warmth: {
-    zero: OPERATIONS_ZEROS.warmth,
+    zero: OPERATIONS_DEFAULTS.warmth,
     range: [-100, 100],
     keypointsNumber: 1,
   },
   enhance: {
-    zero: OPERATIONS_ZEROS.enhance,
+    zero: OPERATIONS_DEFAULTS.enhance,
     range: [0, 100],
     keypointsNumber: 1,
   },
   filter: {
-    zero: OPERATIONS_ZEROS.filter,
+    zero: OPERATIONS_DEFAULTS.filter,
     range: [0, 100],
     keypointsNumber: 1,
   },