Skip to content

Commit 37d5135

Browse files
strausrstrausr
authored
Merge pull request #473 from cloudinary/feature/effect-toJson
Feature/effect to json
2 parents e9e1666 + 920b013 commit 37d5135

File tree

12 files changed

+204
-9
lines changed

12 files changed

+204
-9
lines changed

‎__TESTS_BUNDLE_SIZE__/bundleSizeTestCases.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -88,7 +88,7 @@ const bundleSizeTestCases:ITestCase[] = [
8888
},
8989
{
9090
name: 'Import All Actions',
91-
sizeLimitInKB: 31,
91+
sizeLimitInKB: 32,
9292
importsArray: [
9393
importFromPackage('Actions')
9494
]

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

Lines changed: 127 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import {Transformation} from "../../../src";
22
import {Effect} from "../../../src/actions/effect";
3+
import {halftone4x4Orthogonal} from "../../../src/qualifiers/dither";
34

45

56
describe('Effect toJson()', () => {
@@ -79,4 +80,130 @@ describe('Effect toJson()', () => {
7980
}
8081
]);
8182
});
83+
84+
it('effect.colorize', () => {
85+
const transformation = new Transformation()
86+
.addAction(Effect.colorize(10).color('red'));
87+
expect(transformation.toJson()).toStrictEqual( [
88+
{
89+
actionType: 'colorize',
90+
level: 10,
91+
color: 'red'
92+
}
93+
]);
94+
});
95+
96+
it('effect.oilPaint', () => {
97+
const transformation = new Transformation()
98+
.addAction(Effect.oilPaint().strength(8));
99+
expect(transformation.toJson()).toStrictEqual( [
100+
{
101+
actionType: 'oilPaint',
102+
level: 8,
103+
}
104+
]);
105+
});
106+
107+
it('effect.cartoonify', () => {
108+
const transformation = new Transformation()
109+
.addAction(Effect.cartoonify().lineStrength(70).colorReductionLevel(80));
110+
expect(transformation.toJson()).toStrictEqual( [
111+
{
112+
actionType: 'cartoonify',
113+
colorReductionLevel: 80,
114+
lineStrength: 70
115+
}
116+
]);
117+
});
118+
119+
it('effect.outline', () => {
120+
const transformation = new Transformation()
121+
.addAction(Effect.outline().width(100).color("lightblue"));
122+
expect(transformation.toJson()).toStrictEqual( [
123+
{
124+
actionType: 'outline',
125+
width: 100,
126+
color: 'lightblue'
127+
}
128+
]);
129+
});
130+
131+
it('effect.blackwhite', () => {
132+
const transformation = new Transformation()
133+
.addAction(Effect.blackwhite().threshold(40));
134+
expect(transformation.toJson()).toStrictEqual( [
135+
{
136+
actionType: 'blackwhite',
137+
level: 40,
138+
}
139+
]);
140+
});
141+
142+
it('effect.accelerate', () => {
143+
const transformation = new Transformation()
144+
.addAction(Effect.accelerate().rate(5));
145+
expect(transformation.toJson()).toStrictEqual( [
146+
{
147+
actionType: 'accelerate',
148+
level: 5,
149+
}
150+
]);
151+
});
152+
153+
it('effect.loop', () => {
154+
const transformation = new Transformation()
155+
.addAction(Effect.loop().additionalIterations(5));
156+
expect(transformation.toJson()).toStrictEqual( [
157+
{
158+
actionType: 'loop',
159+
iterations: 5,
160+
}
161+
]);
162+
});
163+
164+
it('effect.make_transparent', () => {
165+
const transformation = new Transformation()
166+
.addAction(Effect.makeTransparent().tolerance(5).colorToReplace('red'));
167+
expect(transformation.toJson()).toStrictEqual( [
168+
{
169+
actionType: 'makeTransparent',
170+
tolerance: 5,
171+
level: 5,
172+
color: 'red'
173+
}
174+
]);
175+
});
176+
177+
it('effect.noise', () => {
178+
const transformation = new Transformation()
179+
.addAction(Effect.noise().level(50));
180+
expect(transformation.toJson()).toStrictEqual( [
181+
{
182+
actionType: 'noise',
183+
level: 50,
184+
}
185+
]);
186+
});
187+
188+
it('effect.vignette', () => {
189+
const transformation = new Transformation()
190+
.addAction(Effect.vignette().strength(5));
191+
expect(transformation.toJson()).toStrictEqual( [
192+
{
193+
actionType: 'vignette',
194+
level: 5,
195+
}
196+
]);
197+
});
198+
199+
it('effect.dither', () => {
200+
const transformation = new Transformation()
201+
.addAction(Effect.dither().type(halftone4x4Orthogonal()));
202+
expect(transformation.toJson()).toStrictEqual( [
203+
{
204+
actionType: 'Dither',
205+
type: 9,
206+
}
207+
]);
208+
});
82209
});

‎src/actions/effect/Cartoonify.ts‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import {Qualifier} from "../../internal/qualifier/Qualifier.js";
22
import {QualifierValue} from "../../internal/qualifier/QualifierValue.js";
33
import {Action} from "../../internal/Action.js";
4+
import {ICartoonifyEffectModel} from "../../internal/models/IEffectActionModel.js";
45

56
/**
67
* @description Applies a cartoon effect to an image.
@@ -9,6 +10,7 @@ import {Action} from "../../internal/Action.js";
910
* @see Visit {@link Actions.Effect|Effect} for an example
1011
*/
1112
class CartoonifyEffect extends Action {
13+
protected _actionModel: ICartoonifyEffectModel = {};
1214
private colorReduction: number | string;
1315
private cartoonifyStrength: number;
1416
private effectName: string;
@@ -17,6 +19,7 @@ class CartoonifyEffect extends Action {
1719
super();
1820
this.cartoonifyStrength = strength;
1921
this.effectName = effectName;
22+
this._actionModel.actionType = effectName;
2023
}
2124

2225
/**
@@ -26,6 +29,7 @@ class CartoonifyEffect extends Action {
2629
*/
2730
lineStrength(lineStrength: number): this {
2831
this.cartoonifyStrength = lineStrength;
32+
this._actionModel.lineStrength = lineStrength;
2933
return this;
3034
}
3135

@@ -34,6 +38,7 @@ class CartoonifyEffect extends Action {
3438
* @return {this}
3539
*/
3640
blackwhite(): this {
41+
this._actionModel.blackAndWhite = true;
3742
this.colorReduction = 'bw';
3843
return this;
3944
}
@@ -46,6 +51,7 @@ class CartoonifyEffect extends Action {
4651
* @return {this}
4752
*/
4853
colorReductionLevel(level: number): this {
54+
this._actionModel.colorReductionLevel = level;
4955
this.colorReduction = level;
5056
return this;
5157
}

‎src/actions/effect/Colorize.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ class ColorizeEffectAction extends EffectActionWithLevel {
1717
* @return {this}
1818
*/
1919
color(color: SystemColors): this {
20+
this._actionModel.color = color;
2021
return this.addQualifier(new Qualifier('co', new QualifierValue(prepareColor(color))));
2122
}
2223
}

‎src/actions/effect/Dither.ts‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import {LeveledEffectAction} from "./EffectActions/LeveledEffectAction.js";
2+
import {IDitherModel} from "../../internal/models/IEffectActionModel.js";
23

34
/**
45
* @description Applies an ordered dither filter to the image.
@@ -7,13 +8,17 @@ import {LeveledEffectAction} from "./EffectActions/LeveledEffectAction.js";
78
* @see Visit {@link Actions.Effect|Effect} for an example
89
*/
910
class DitherEffectAction extends LeveledEffectAction {
11+
protected _actionModel: IDitherModel = {actionType: 'Dither'};
1012
/**
1113
*
1214
* @param {Qualifiers.Dither} ditherType - The dither type applied to the image
1315
* @return {this}
1416
*/
1517
type(ditherType:number): this {
16-
return this.setLevel(ditherType);
18+
this._actionModel.type = ditherType;
19+
const qualifierEffect = this.createEffectQualifier(this.effectType, ditherType);
20+
this.addQualifier(qualifierEffect);
21+
return this;
1722
}
1823
}
1924

‎src/actions/effect/EffectActions/EffectActionWithLevel.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import {LeveledEffectAction} from "./LeveledEffectAction.js";
88
*/
99
class EffectActionWithLevel extends LeveledEffectAction {
1010
level(value: number | string): this {
11+
this._actionModel.level = value as number;
1112
return this.setLevel(value);
1213
}
1314
}

‎src/actions/effect/EffectActions/LeveledEffectAction.ts‎

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import {SimpleEffectAction} from "./SimpleEffectAction.js";
22
import {ExpressionQualifier} from "../../../qualifiers/expression/ExpressionQualifier.js";
3-
import {IEffectActionWithLevelModel} from "../../../internal/models/IEffectActionModel.js";
3+
import {IColorizeModel, IEffectActionWithLevelModel} from "../../../internal/models/IEffectActionModel.js";
4+
import {EFFECT_MODE_TO_ACTION_TYPE_MAP} from "../../../internal/internalConstants.js";
45

56
/**
67
* @description A base class for effects with a level, the extending class needs to implement a method that calls setLevel()
@@ -9,12 +10,16 @@ import {IEffectActionWithLevelModel} from "../../../internal/models/IEffectActio
910
* @see Visit {@link Actions.Effect|Effect} for an example
1011
*/
1112
class LeveledEffectAction extends SimpleEffectAction {
12-
protected _actionModel: IEffectActionWithLevelModel = {};
13+
protected _actionModel: IEffectActionWithLevelModel | IColorizeModel = {};
1314
protected effectType: string;
1415
constructor(effectType?: string, level?: number|string) {
1516
super(effectType, level);
1617
this.effectType = effectType;
17-
this._actionModel.actionType = effectType;
18+
this._actionModel.actionType = EFFECT_MODE_TO_ACTION_TYPE_MAP[effectType] || effectType;
19+
20+
if(level){
21+
this._actionModel.level = level as number;
22+
}
1823
}
1924

2025
/**

‎src/actions/effect/Outline.ts‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import {Qualifier} from "../../internal/qualifier/Qualifier.js";
44
import {prepareColor} from "../../internal/utils/prepareColor.js";
55
import {SystemColors} from "../../qualifiers/color.js";
66
import {OutlineModeType} from "../../types/types.js";
7+
import {IEffectOutlineModel} from "../../internal/models/IEffectActionModel.js";
78

89
/**
910
* @description Adds an outline to a transparent image. For examples, see the Image Transformations guide.
@@ -14,10 +15,12 @@ import {OutlineModeType} from "../../types/types.js";
1415
class EffectOutline extends Action {
1516
private _mode: string;
1617
private _width: number | string;
17-
private _blurLevel : number | string
18+
private _blurLevel : number | string;
19+
protected _actionModel: IEffectOutlineModel = {};
1820

1921
constructor() {
2022
super();
23+
this._actionModel.actionType = 'outline';
2124
}
2225

2326
/**
@@ -28,6 +31,7 @@ class EffectOutline extends Action {
2831
* @return {this}
2932
*/
3033
mode(mode?: OutlineModeType|string): this{
34+
this._actionModel.mode = mode;
3135
this._mode = mode;
3236
return this;
3337
}
@@ -38,6 +42,7 @@ class EffectOutline extends Action {
3842
* @return {this}
3943
*/
4044
width(width?:number | string): this {
45+
this._actionModel.width = width as number;
4146
this._width = width;
4247
return this;
4348
}
@@ -50,6 +55,7 @@ class EffectOutline extends Action {
5055
* @return {this}
5156
*/
5257
blurLevel(lvl?: number | string): this {
58+
this._actionModel.blurLevel = lvl as number;
5359
this._blurLevel = lvl;
5460
return this;
5561
}
@@ -59,6 +65,7 @@ class EffectOutline extends Action {
5965
* @return {this}
6066
*/
6167
color(color:SystemColors): this {
68+
this._actionModel.color = color;
6269
return this.addQualifier(new Qualifier('co', prepareColor(color)));
6370
}
6471

‎src/actions/effect/leveled/Loop.ts‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,10 @@ import {LeveledEffectAction} from "../EffectActions/LeveledEffectAction.js";
88
*/
99
class LoopEffectAction extends LeveledEffectAction {
1010
additionalIterations(value: number | string): this {
11-
return this.setLevel(value);
11+
this._actionModel.iterations = value;
12+
const qualifierEffect = this.createEffectQualifier(this.effectType, value);
13+
this.addQualifier(qualifierEffect);
14+
return this;
1215
}
1316
}
1417

‎src/actions/effect/leveled/MakeTransparent.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import {Qualifier} from "../../../internal/qualifier/Qualifier.js";
33
import {QualifierValue} from "../../../internal/qualifier/QualifierValue.js";
44
import {prepareColor} from "../../../internal/utils/prepareColor.js";
55
import {SystemColors} from "../../../qualifiers/color.js";
6+
import {IMakeTransparentEffectModel} from "../../../internal/models/IEffectActionModel.js";
67

78
/**
89
* @description Makes the background of the image transparent (or solid white for formats that do not support transparency).
@@ -11,11 +12,13 @@ import {SystemColors} from "../../../qualifiers/color.js";
1112
* @see Visit {@link Actions.Effect|Effect} for an example
1213
*/
1314
class MakeTransparentEffectAction extends LeveledEffectAction {
15+
protected _actionModel: IMakeTransparentEffectModel = {actionType: 'makeTransparent'};
1416
/**
1517
* @description Sets the tolerance used to accommodate variance in the background color.
1618
* @param {number | string} value The tolerance used to accommodate variance in the background color. (Range: 0 to 100, Server default: 10)
1719
*/
1820
tolerance(value: number | string): this {
21+
this._actionModel.tolerance = value as number;
1922
return this.setLevel(value);
2023
}
2124

@@ -25,6 +28,7 @@ class MakeTransparentEffectAction extends LeveledEffectAction {
2528
* @return {this}
2629
*/
2730
colorToReplace(color: SystemColors): this {
31+
this._actionModel.color = color;
2832
return this.addQualifier(new Qualifier('co', new QualifierValue(prepareColor(color))));
2933
}
3034
}

0 commit comments

Comments
 (0)