Merge pull request #474 from cloudinary/feature/add-effect-toJson

Feature/add effect to json

Author: strausr

__TESTS_BUNDLE_SIZE__/bundleSizeTestCases.ts

@@ -88,7 +88,7 @@ const bundleSizeTestCases:ITestCase[] = [
   },
   {
     name: 'Import All Actions',
-    sizeLimitInKB: 32,
+    sizeLimitInKB: 33,
     importsArray: [
       importFromPackage('Actions')
     ]

__TESTS__/unit/toJson/effect.toJson.test.ts

@@ -1,6 +1,8 @@
 import {Transformation} from "../../../src";
 import {Effect} from "../../../src/actions/effect";
 import {halftone4x4Orthogonal} from "../../../src/qualifiers/dither";
+import {rodMonochromacy} from "../../../src/qualifiers/simulateColorBlind";
+import {Region} from "../../../src/qualifiers";
 
 
 describe('Effect toJson()', () => {
@@ -206,4 +208,88 @@ describe('Effect toJson()', () => {
       }
     ]);
   });
+
+  it('effect.vectorize', () => {
+    const transformation = new Transformation()
+      .addAction(Effect.vectorize().numOfColors(17).detailsLevel(100));
+    expect(transformation.toJson()).toStrictEqual( [
+      {
+        actionType: 'vectorize',
+        numOfColors: 17,
+        detailLevel: 100
+      }
+    ]);
+  });
+
+  it('effect.gradientFade', () => {
+    const transformation = new Transformation()
+      .addAction(Effect.gradientFade()
+        .strength(5)
+        .horizontalStartPoint(10)
+        .verticalStartPoint(20));
+    expect(transformation.toJson()).toStrictEqual( [
+      {
+        actionType: 'GradientFade',
+        strength: 5,
+        horizontalStartPoint: 10,
+        verticalStartPoint: 20
+      }
+    ]);
+  });
+
+  it('effect.assistColorBlind', () => {
+    const transformation = new Transformation()
+      .addAction(Effect.assistColorBlind().stripesStrength(20));
+    expect(transformation.toJson()).toStrictEqual( [
+      {
+        actionType: 'assistColorblind',
+        type: 'stripes',
+        stripesStrength: 20
+      }
+    ]);
+  });
+
+  it('effect.simulateColorBlind', () => {
+    const transformation = new Transformation()
+      .addAction(Effect.simulateColorBlind().condition(rodMonochromacy()));
+    expect(transformation.toJson()).toStrictEqual( [
+      { actionType: 'simulateColorblind',
+        condition: 'rod_monochromacy'
+      }
+    ]);
+  });
+
+  it('effect.deshake', () => {
+    const transformation = new Transformation()
+      .addAction(Effect.deshake().shakeStrength(16));
+    expect(transformation.toJson()).toStrictEqual( [
+      {
+        actionType: 'deshake',
+        pixels: 16
+      }
+    ]);
+  });
+
+  it('effect.pixelate', () => {
+    const transformation = new Transformation()
+      .addAction(Effect.pixelate().squareSize(15).region(Region.faces()));
+    expect(transformation.toJson()).toStrictEqual( [
+      {
+        actionType: 'pixelate',
+        squareSize: 15,
+        region: { RegionType: 'faces' }
+      }
+    ]);
+  });
+
+  it('effect.blur', () => {
+    const transformation = new Transformation()
+      .addAction(Effect.blur().strength(5));
+    expect(transformation.toJson()).toStrictEqual( [
+      {
+        actionType: 'blur',
+        strength: 5,
+      }
+    ]);
+  });
 });

src/actions/effect/AssistColorBlind.ts

@@ -1,6 +1,7 @@
 import {Action} from "../../internal/Action.js";
 import {QualifierValue} from "../../internal/qualifier/QualifierValue.js";
 import {Qualifier} from "../../internal/qualifier/Qualifier.js";
+import {IAssistColorBlindEffectModel} from "../../internal/models/IEffectActionModel.js";
 
 /**
  * @description Applies stripes to the image to help people with common color-blind conditions to differentiate between colors that are similar for them.
@@ -10,8 +11,10 @@ import {Qualifier} from "../../internal/qualifier/Qualifier.js";
  * @see Visit {@link Actions.Effect|Effect} for an example
  */
 class AssistColorBlindEffectAction extends Action {
+  protected _actionModel: IAssistColorBlindEffectModel = {};
   constructor() {
     super();
+    this._actionModel.actionType = 'assistColorblind';
     this.addQualifier(new Qualifier('e', new QualifierValue('assist_colorblind')));
   }
 
@@ -20,6 +23,7 @@ class AssistColorBlindEffectAction extends Action {
    * @return {this}
    */
   xray(): this{
+    this._actionModel.type = 'xray';
     return this.addQualifier(new Qualifier('e', new QualifierValue(['assist_colorblind', 'xray']).setDelimiter(':')));
   }
 
@@ -29,6 +33,8 @@ class AssistColorBlindEffectAction extends Action {
    * @return {this}
    */
   stripesStrength(strength:number | string): this {
+    this._actionModel.type = 'stripes';
+    this._actionModel.stripesStrength = strength;
     return this.addQualifier(new Qualifier('e', new QualifierValue(['assist_colorblind', strength]).setDelimiter(':')));
   }
 }

src/actions/effect/GradientFade.ts

@@ -1,5 +1,6 @@
 import {Action} from "../../internal/Action.js";
 import {Qualifier} from "../../internal/qualifier/Qualifier.js";
+import {IGradientFadeEffecModel} from "../../internal/models/IEffectActionModel.js";
 
 /**
  * @description Applies a gradient fade effect from one edge of the image.
@@ -10,12 +11,14 @@ import {Qualifier} from "../../internal/qualifier/Qualifier.js";
 class GradientFadeEffectAction extends Action {
   private _strength: number;
   private _type: string;
+  protected _actionModel: IGradientFadeEffecModel = {actionType: 'GradientFade'};
 
   /**
    * @description Sets the strength of the fade effect.
    * @param {number} strength The strength of the fade effect. (Range: 0 to 100, Server default: 20)
    */
   strength(strength:number): this {
+    this._actionModel.strength = strength;
     this._strength = strength;
     return this;
   }
@@ -25,6 +28,7 @@ class GradientFadeEffectAction extends Action {
    * @param {string | Qualifiers.GradientFade} type The mode of gradient fade.
    */
   type(type:string): this {
+    this._actionModel.type = type;
     this._type = type;
     return this;
   }
@@ -34,6 +38,7 @@ class GradientFadeEffectAction extends Action {
    * @param {number | string} x The x dimension of the start point.
    */
   horizontalStartPoint(x:number | string): this {
+    this._actionModel.horizontalStartPoint = x as string;
     return this.addQualifier(new Qualifier('x', x));
   }
 
@@ -42,6 +47,7 @@ class GradientFadeEffectAction extends Action {
    * @param {number | string} y The y dimension of the start point.
    */
   verticalStartPoint(y:number | string): this {
+    this._actionModel.verticalStartPoint = y as string;
     return this.addQualifier(new Qualifier('y', y));
   }
 

src/actions/effect/SimulateColorBlind.ts

@@ -1,6 +1,7 @@
 import {Action} from "../../internal/Action.js";
 import {Qualifier} from "../../internal/qualifier/Qualifier.js";
 import {SimulateColorBlindType} from "../../types/types.js";
+import {ISimulateColorBlindEffectModel} from "../../internal/models/IEffectActionModel.js";
 
 /**
  * @description Simulates the way an image would appear to someone with the specified color blind condition
@@ -9,8 +10,10 @@ import {SimulateColorBlindType} from "../../types/types.js";
  * @see Visit {@link Actions.Effect|Effect} for an example
  */
 class SimulateColorBlindEffectAction extends Action {
+  protected _actionModel: ISimulateColorBlindEffectModel = {};
   constructor() {
     super();
+    this._actionModel.actionType = 'simulateColorblind';
     this.addQualifier(new Qualifier('e', `simulate_colorblind`));
   }
 
@@ -28,6 +31,7 @@ class SimulateColorBlindEffectAction extends Action {
    * @return {this}
    */
   condition(cond: SimulateColorBlindType | string): this {
+    this._actionModel.condition = cond;
     return this.setQualifier(cond);
   }
 }

src/actions/effect/Vectorize.ts

@@ -1,6 +1,7 @@
 import {Action} from "../../internal/Action.js";
 import {Qualifier} from "../../internal/qualifier/Qualifier.js";
 import {QualifierValue} from "../../internal/qualifier/QualifierValue.js";
+import {IVectorizeEffectModel} from "../../internal/models/IEffectActionModel.js";
 
 /**
  * @description Vectorizes the image.
@@ -14,8 +15,10 @@ class VectorizeEffectAction extends Action {
   private _despeckleLevel: number | string;
   private _cornersLevel: number | string;
   private _paths: number | string;
+  protected _actionModel: IVectorizeEffectModel = {};
   constructor() {
     super();
+    this._actionModel.actionType = 'vectorize';
   }
 
   /**
@@ -24,6 +27,7 @@ class VectorizeEffectAction extends Action {
    * @return {this}
    */
   numOfColors(num: number | string): this {
+    this._actionModel.numOfColors = num as number;
     this._numOfColors = num;
     return this;
   }
@@ -34,6 +38,7 @@ class VectorizeEffectAction extends Action {
    * @return {this}
    */
   detailsLevel(num: number | string): this {
+    this._actionModel.detailLevel = num as number;
     this._detailsLevel = num;
     return this;
   }
@@ -44,6 +49,7 @@ class VectorizeEffectAction extends Action {
    * @return {this}
    */
   despeckleLevel(num: number | string):this {
+    this._actionModel.despeckleLevel = num as number;
     this._despeckleLevel = num;
     return this;
   }
@@ -54,6 +60,7 @@ class VectorizeEffectAction extends Action {
    * @return {this}
    */
   cornersLevel(num: number | string): this {
+    this._actionModel.cornersLevel = num as number;
     this._cornersLevel = num;
     return this;
   }
@@ -64,6 +71,7 @@ class VectorizeEffectAction extends Action {
    * @return {this}
    */
   paths(num: number):this {
+    this._actionModel.paths = num;
     this._paths = num;
     return this;
   }

src/actions/effect/blur/Blur.ts

@@ -1,6 +1,7 @@
 import {NamedRegion} from "../../../qualifiers/region/NamedRegion.js";
 import {Qualifier} from "../../../internal/qualifier/Qualifier.js";
 import {Action} from "../../../internal/Action.js";
+import {IBlurModel} from "../../../internal/models/IEffectActionModel.js";
 
 /**
  * @description The Action class of the blur Builder.
@@ -11,17 +12,21 @@ import {Action} from "../../../internal/Action.js";
 class BlurAction extends Action {
   private _region?: NamedRegion;
   private _strength: number | string;
+  protected _actionModel: IBlurModel = {};
 
   constructor(strength: number | string) {
     super();
     this._strength = strength;
+    this._actionModel.actionType = 'blur';
+    this._actionModel.strength = strength as number;
   }
 
   /**
    * @description Specifies the region to blur.
    * @param {NamedRegion} blurRegion
    */
   region(blurRegion: NamedRegion): this {
+    this._actionModel.region = {RegionType: blurRegion.regionType};
     this._region = blurRegion;
     return this;
   }
@@ -32,6 +37,7 @@ class BlurAction extends Action {
    */
   strength(strength: number | string): this {
     this._strength = strength;
+    this._actionModel.strength = strength as number;
     return this;
   }
 

src/actions/effect/leveled/Deshake.ts

@@ -1,5 +1,6 @@
 import {LeveledEffectAction} from "../EffectActions/LeveledEffectAction.js";
 import {ExpressionQualifier} from "../../../qualifiers/expression/ExpressionQualifier.js";
+import {IDeshakeEffectModel} from "../../../internal/models/IEffectActionModel.js";
 
 /**
  * @description Removes small motion shifts from the video. with a maximum extent of movement in the horizontal and vertical direction of 32 pixels
@@ -8,12 +9,16 @@ import {ExpressionQualifier} from "../../../qualifiers/expression/ExpressionQual
  * @see Visit {@link Actions.Effect|Effect} for an example
  */
 class DeshakeEffectAction extends LeveledEffectAction {
+  protected _actionModel: IDeshakeEffectModel = {actionType: 'deshake'};
   /**
    * The maximum number of pixels in the horizontal and vertical direction that will be addressed. (Possible values: 16, 32, 48, 64. Server default: 16)
    * @param value Possible values: 16, 32, 48, 64.  Server default: 16.
    */
   shakeStrength(value: 16 | 32 | 48 | 64 | string | ExpressionQualifier): this {
-    return this.setLevel(value);
+    this._actionModel.pixels = value as number;
+    const qualifierEffect = this.createEffectQualifier(this.effectType, value);
+    this.addQualifier(qualifierEffect);
+    return this;
   }
 }
 

src/actions/effect/pixelate/Pixelate.ts

@@ -1,6 +1,7 @@
 import {NamedRegion} from "../../../qualifiers/region/NamedRegion.js";
 import {Qualifier} from "../../../internal/qualifier/Qualifier.js";
 import {Action} from "../../../internal/Action.js";
+import {IPixelateModel} from "../../../internal/models/IEffectActionModel.js";
 
 /**
  * @description The Action class of the pixelate Builder
@@ -11,10 +12,13 @@ import {Action} from "../../../internal/Action.js";
 class Pixelate extends Action {
   private _region?: NamedRegion;
   private _squareSize: number | string;
+  protected _actionModel: IPixelateModel = {};
 
   constructor(squareSize: number | string) {
     super();
     this._squareSize = squareSize;
+    this._actionModel.actionType = 'pixelate';
+    this._actionModel.squareSize = squareSize as number;
   }
 
   /**
@@ -23,6 +27,7 @@ class Pixelate extends Action {
    */
   region(pixelateRegion: NamedRegion): this {
     this._region = pixelateRegion;
+    this._actionModel.region = {RegionType: this._region.regionType};
     return this;
   }
 
@@ -32,6 +37,7 @@ class Pixelate extends Action {
    */
   squareSize(squareSize: number | string): this {
     this._squareSize = squareSize;
+    this._actionModel.squareSize = squareSize as number;
     return this;
   }