Feature/color space from json (#466)

Nir Maoz · web-flow · commit 33b31b8b7a3e · 2021-11-01T16:20:24.000+02:00
diff --git a/__TESTS_BUNDLE_SIZE__/bundleSizeTestCases.ts b/__TESTS_BUNDLE_SIZE__/bundleSizeTestCases.ts
@@ -45,7 +45,7 @@ const bundleSizeTestCases:ITestCase[] = [
   },
   {
     name: 'Tests CloudinaryImage image with Resize, adjust and delivery',
-    sizeLimitInKB: 23,
+    sizeLimitInKB: 24,
     importsArray: [
       importFromDist('assets/CloudinaryImage', 'CloudinaryImage'),
       importFromDist('instance/Cloudinary', 'Cloudinary'),
@@ -88,7 +88,7 @@ const bundleSizeTestCases:ITestCase[] = [
   },
   {
     name: 'Import All Actions',
-    sizeLimitInKB: 30,
+    sizeLimitInKB: 31,
     importsArray: [
       importFromPackage('Actions')
     ]
diff --git a/__TESTS__/unit/fromJson/fromJson.test.ts b/__TESTS__/unit/fromJson/fromJson.test.ts
@@ -14,10 +14,30 @@ describe('fromJson', () => {
       {actionType: 'thumbnail', dimensions: {width: 100}, relative: true, gravity: 'south', zoom: 4},
       {actionType: 'pad', dimensions: {width: 100}, relative: true, gravity: 'south', x: 3, y:4, background: 'white'},
       {actionType: 'limitPad', dimensions: {width: 100}, relative: true, gravity: 'south', x: 3, y:4, background: 'white'},
-      {actionType: 'minimumPad', dimensions: {width: 100}, relative: true, gravity: 'south', x: 3, y:4, background: 'white'}
+      {actionType: 'minimumPad', dimensions: {width: 100}, relative: true, gravity: 'south', x: 3, y:4, background: 'white'},
     ]);
 
-    expect(transformation.toString()).toStrictEqual('ar_7.0,c_scale,w_100/ar_16:9,c_fit,fl_relative,h_200/c_limit,fl_ignore_aspect_ratio,fl_relative,h_200/c_mfit,fl_region_relative,w_100/c_crop,fl_region_relative,g_north_east,w_100,y_3,z_7/c_fill,fl_relative,g_south,w_100,x_4,y_5/c_lfill,fl_relative,g_south,w_100,x_4,y_5/c_thumb,fl_relative,g_south,w_100,z_4/b_white,c_pad,fl_relative,g_south,w_100,x_3,y_4/b_white,c_lpad,fl_relative,g_south,w_100,x_3,y_4/b_white,c_mpad,fl_relative,g_south,w_100,x_3,y_4');
+    expect(transformation.toString()).toStrictEqual([
+      'ar_7.0,c_scale,w_100',
+      'ar_16:9,c_fit,fl_relative,h_200',
+      'c_limit,fl_ignore_aspect_ratio,fl_relative,h_200',
+      'c_mfit,fl_region_relative,w_100',
+      'c_crop,fl_region_relative,g_north_east,w_100,y_3,z_7',
+      'c_fill,fl_relative,g_south,w_100,x_4,y_5',
+      'c_lfill,fl_relative,g_south,w_100,x_4,y_5',
+      'c_thumb,fl_relative,g_south,w_100,z_4',
+      'b_white,c_pad,fl_relative,g_south,w_100,x_3,y_4',
+      'b_white,c_lpad,fl_relative,g_south,w_100,x_3,y_4',
+      'b_white,c_mpad,fl_relative,g_south,w_100,x_3,y_4',
+    ].join('/'));
+  });
+
+  it('should generate a transformation string from colorSpace action', function () {
+    const transformation = fromJson([
+      {actionType: 'colorSpace', mode: 'srgbTrueColor'}
+    ]);
+
+    expect(transformation.toString()).toStrictEqual('cs_srgb:truecolor');
   });
 
   it('should generate an error for array that includes an unsupported action', function () {
diff --git a/__TESTS__/unit/toJson/toJson.test.ts b/__TESTS__/unit/toJson/toJson.test.ts
@@ -2,11 +2,12 @@ import {Transformation} from '../../../src';
 import {Delivery, Resize} from "../../../src/actions";
 import {UnsupportedError} from "../../../src/internal/utils/unsupportedError";
 import {Action} from "../../../src/internal/Action";
-import {AspectRatio} from "../../../src/qualifiers";
+import {AspectRatio, ColorSpace} from "../../../src/qualifiers";
 import {Format} from "../../../src/qualifiers/format";
 import {Progressive} from "../../../src/qualifiers/progressive";
 import {Quality} from "../../../src/qualifiers/quality";
 import {ChromaSubSampling} from "../../../src/qualifiers";
+import {trueColor} from "../../../src/qualifiers/colorSpace";
 
 describe('Transformation.toJson()', () => {
   it('scale', () => {
@@ -133,11 +134,11 @@ describe('Transformation.toJson()', () => {
 
   it('delivery.colorSpace', () => {
     const transformation = new Transformation()
-      .addAction(Delivery.colorSpace('srgb'));
+      .addAction(Delivery.colorSpace(ColorSpace.trueColor()));
     expect(transformation.toJson()).toStrictEqual([
       {
         actionType: 'colorSpace',
-        colorSpaceType: 'srgb'
+        mode: 'srgbTrueColor'
       }
     ]
     );
diff --git a/package.json b/package.json
@@ -11,6 +11,7 @@
     "test:unit:watch": "jest --watch --reporters default",
     "test:types": "tsc --project tsconfig.test.json",
     "test:import:require": "cd testApps/testImportAndRequire && npm run test",
+    "test:model": "jest json.test.ts",
     "build": "bash ./scripts/build.sh",
     "build:ESM": "tsc --project tsconfig.json --outDir dist --declaration true",
     "build:rollup": "rollup -c",
diff --git a/src/actions/delivery.ts b/src/actions/delivery.ts
@@ -15,8 +15,9 @@ import {DeliveryAction} from "./delivery/DeliveryAction.js";
 import {ColorSpaceType} from "../types/types.js";
 import {QualityTypes} from "../types/types.js";
 import {ImageFormatType, VideoFormatType} from "../types/types.js";
+import {DeliveryColorSpaceAction} from "./delivery/DeliveryColorSpaceAction.js";
 
-export type IDeliveryAction = DeliveryAction | DeliveryColorSpaceFromICC;
+export type IDeliveryAction = DeliveryAction | DeliveryColorSpaceAction | DeliveryColorSpaceFromICC;
 
 /**
  * @summary action
@@ -156,8 +157,8 @@ function defaultImage(publicIdWithExtension:string) :DeliveryAction {
  *  colorSpace(trueColor()),
  * );
  */
-function colorSpace(mode:ColorSpaceType|string): DeliveryAction {
-  return new DeliveryAction('cs', mode, 'colorSpaceType');
+function colorSpace(mode: ColorSpaceType): DeliveryColorSpaceAction {
+  return new DeliveryColorSpaceAction(mode);
 }
 
 
diff --git a/src/actions/delivery/DeliveryColorSpaceAction.ts b/src/actions/delivery/DeliveryColorSpaceAction.ts
@@ -0,0 +1,49 @@
+import {Action} from "../../internal/Action.js";
+import {Qualifier} from "../../internal/qualifier/Qualifier.js";
+import {
+  ColorSpaceModeType,
+  IDeliveryColorSpaceActionModel
+} from "../../internal/models/IDeliveryColorSpaceActionModel.js";
+import {IActionModel} from "../../internal/models/IActionModel.js";
+import {ColorSpace} from "../../qualifiers/colorSpace.js";
+import {ColorSpaceType} from "../../types/types.js";
+import {
+  COLOR_SPACE_MODE_TO_COLOR_SPACE_MODEL_MODE_MAP,
+  COLOR_SPACE_MODEL_MODE_TO_COLOR_SPACE_MODE_MAP
+} from "../../internal/internalConstants.js";
+
+/**
+ * @description Specifies the color space to use.
+ * @memberOf Actions.Delivery
+ * @extends SDK.Action
+ * @see Visit {@link Actions.Delivery|Delivery} for an example
+ */
+class DeliveryColorSpaceAction extends Action {
+  protected _actionModel: IDeliveryColorSpaceActionModel = {};
+
+  /**
+   * Create a new DeliveryColorSpaceAction
+   * @param mode
+   */
+  constructor(mode: ColorSpaceType) {
+    super();
+
+    this._actionModel = {
+      actionType: 'colorSpace',
+      mode: (COLOR_SPACE_MODE_TO_COLOR_SPACE_MODEL_MODE_MAP[mode] || mode) as ColorSpaceModeType
+    };
+
+    this.addQualifier(new Qualifier('cs', ColorSpace[mode] ? ColorSpace[mode]() : mode));
+  }
+
+  static fromJson(actionModel: IActionModel): DeliveryColorSpaceAction {
+    const {mode} = (actionModel as IDeliveryColorSpaceActionModel);
+    const colorSpaceMode = COLOR_SPACE_MODEL_MODE_TO_COLOR_SPACE_MODE_MAP[mode] || mode;
+
+    // We are using this() to allow inheriting classes to use super.fromJson.apply(this, [actionModel])
+    // This allows the inheriting classes to determine the class to be created
+    return new this(colorSpaceMode);
+  }
+}
+
+export {DeliveryColorSpaceAction};
diff --git a/src/internal/fromJson.ts b/src/internal/fromJson.ts
@@ -15,6 +15,7 @@ import {ThumbResizeAction} from "../actions/resize/ThumbnailAction.js";
 import {ResizePadAction} from "../actions/resize/ResizePadAction.js";
 import {ResizeLimitPadAction} from "../actions/resize/ResizeLimitPadAction.js";
 import {ResizeMinimumPadAction} from "../actions/resize/ResizeMinimumPadAction.js";
+import {DeliveryColorSpaceAction} from "../actions/delivery/DeliveryColorSpaceAction.js";
 
 const ActionModelMap: Record<string, IHasFromJson> = {
   scale: ResizeScaleAction,
@@ -27,7 +28,8 @@ const ActionModelMap: Record<string, IHasFromJson> = {
   thumbnail: ThumbResizeAction,
   pad: ResizePadAction,
   limitPad: ResizeLimitPadAction,
-  minimumPad: ResizeMinimumPadAction
+  minimumPad: ResizeMinimumPadAction,
+  colorSpace: DeliveryColorSpaceAction
 };
 
 /**
diff --git a/src/internal/internalConstants.ts b/src/internal/internalConstants.ts
@@ -111,6 +111,15 @@ export const ACTION_TYPE_TO_CHROMA_MAP: Record<number, string> = {
   420: "CHROMA_420"
 };
 
+export const COLOR_SPACE_MODEL_MODE_TO_COLOR_SPACE_MODE_MAP: Record<string, string> = {
+  'noCmyk': 'no_cmyk',
+  'keepCmyk': 'keep_cmyk',
+  'tinySrgb': 'tinysrgb',
+  'srgbTrueColor': 'srgb:truecolor'
+};
+
+export const COLOR_SPACE_MODE_TO_COLOR_SPACE_MODEL_MODE_MAP = objectFlip(COLOR_SPACE_MODEL_MODE_TO_COLOR_SPACE_MODE_MAP);
+
 export const CROP_MODE_TO_ACTION_TYPE_MAP = objectFlip(ACTION_TYPE_TO_CROP_MODE_MAP);
 
 export const DELIVERY_MODE_TO_ACTION_TYPE_MAP = objectFlip(ACTION_TYPE_TO_DELIVERY_MODE_MAP);
diff --git a/src/internal/models/IDeliveryColorSpaceActionModel.ts b/src/internal/models/IDeliveryColorSpaceActionModel.ts
@@ -0,0 +1,9 @@
+import {IActionModel} from "./IActionModel.js";
+
+type ColorSpaceModeType = "srgb" | "srgbTrueColor" | "tinySrgb" | "cmyk" | "noCmyk" | "keepCmyk";
+
+interface IDeliveryColorSpaceActionModel extends IActionModel{
+  mode?: ColorSpaceModeType
+}
+
+export {ColorSpaceModeType, IDeliveryColorSpaceActionModel};
diff --git a/src/qualifiers/colorSpace.ts b/src/qualifiers/colorSpace.ts
@@ -5,19 +5,21 @@
  * @see Visit {@link Actions.Delivery.colorSpace|Delivery Color Space} for an example
  */
 
+import {ColorSpaceType} from "../types/types.js";
+
 /**
  * @summary qualifier
  * @memberOf Qualifiers.ColorSpace
  */
-function srgb(): string {
+function srgb(): ColorSpaceType {
   return 'srgb';
 }
 
 /**
  * @summary qualifier
  * @memberOf Qualifiers.ColorSpace
  */
-function trueColor(): string {
+function trueColor(): ColorSpaceType {
   return 'srgb:truecolor';
 }
 
@@ -26,7 +28,7 @@ function trueColor(): string {
  * @summary qualifier
  * @memberOf Qualifiers.ColorSpace
  */
-function tinySrgb(): string {
+function tinySrgb(): ColorSpaceType {
   return 'tinysrgb';
 }
 
@@ -35,7 +37,7 @@ function tinySrgb(): string {
  * @summary qualifier
  * @memberOf Qualifiers.ColorSpace
  */
-function cmyk(): string | number {
+function cmyk(): ColorSpaceType {
   return 'cmyk';
 }
 
@@ -44,7 +46,7 @@ function cmyk(): string | number {
  * @summary qualifier
  * @memberOf Qualifiers.ColorSpace
  */
-function noCmyk(): string {
+function noCmyk(): ColorSpaceType {
   return 'no_cmyk';
 }
 
@@ -53,11 +55,11 @@ function noCmyk(): string {
  * @summary qualifier
  * @memberOf Qualifiers.ColorSpace
  */
-function keepCmyk(): string {
+function keepCmyk(): ColorSpaceType {
   return 'keep_cmyk';
 }
 
-const ColorSpace = {
+const ColorSpace: Record<string, ()=>ColorSpaceType> = {
   cmyk,
   keepCmyk,
   noCmyk,

Original file line number	Diff line number	Diff line change
`@@ -45,7 +45,7 @@ const bundleSizeTestCases:ITestCase[] = [`
`45`	`45`	`},`
`46`	`46`	`{`
`47`	`47`	`name: 'Tests CloudinaryImage image with Resize, adjust and delivery',`
`48`		`- sizeLimitInKB: 23,`
	`48`	`+ sizeLimitInKB: 24,`
`49`	`49`	`importsArray: [`
`50`	`50`	`importFromDist('assets/CloudinaryImage', 'CloudinaryImage'),`
`51`	`51`	`importFromDist('instance/Cloudinary', 'Cloudinary'),`
`@@ -88,7 +88,7 @@ const bundleSizeTestCases:ITestCase[] = [`
`88`	`88`	`},`
`89`	`89`	`{`
`90`	`90`	`name: 'Import All Actions',`
`91`		`- sizeLimitInKB: 30,`
	`91`	`+ sizeLimitInKB: 31,`
`92`	`92`	`importsArray: [`
`93`	`93`	`importFromPackage('Actions')`
`94`	`94`	`]`