Skip to content

Commit f87c4b3

Browse files
strausrstrausr
authored
Merge pull request #478 from cloudinary/feature/effect-fromJson
Feature/effect from json
2 parents b3adb3e + 313fd4b commit f87c4b3

File tree

20 files changed

+348
-14
lines changed

20 files changed

+348
-14
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: 34,
91+
sizeLimitInKB: 36,
9292
importsArray: [
9393
importFromPackage('Actions')
9494
]

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

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
import {fromJson} from "../../../src/internal/fromJson";
2+
3+
describe('effect.fromJson', () => {
4+
it('should generate a url with resize actions from array of models', function () {
5+
const transformation = fromJson([
6+
{ actionType: 'sepia' },
7+
{ actionType: 'boomerang' },
8+
{ actionType: 'grayscale' },
9+
{ actionType: 'advancedRedEye' },
10+
{ actionType: 'negate' },
11+
{ actionType: 'redEye' },
12+
{ actionType: 'reverse' },
13+
{ actionType: 'transition' },
14+
{ actionType: 'shadow', offsetX: 5, color: 'red'},
15+
{ actionType: 'colorize', level: 10, color: 'red' },
16+
{ actionType: 'oilPaint', level: 8 },
17+
{ actionType: 'cartoonify', colorReductionLevel: 80, lineStrength: 70 },
18+
{ actionType: 'outline', width: 100, color: 'lightblue' },
19+
{ actionType: 'blackwhite', level: 40 },
20+
{ actionType: 'accelerate' },
21+
{ actionType: 'loop', iterations: 5 },
22+
{ actionType: 'makeTransparent', tolerance: 5, color: 'red' },
23+
{ actionType: 'noise', level: 50 },
24+
{ actionType: 'vignette', level: 5 },
25+
{ actionType: 'dither', type: 9 },
26+
{ actionType: 'vectorize', numOfColors: 17, detailLevel: 100 },
27+
{ actionType: 'gradientFade', strength: 5, horizontalStartPoint: 10, verticalStartPoint: 20 },
28+
{ actionType: 'assistColorblind', type: 'stripes', stripesStrength: 20 },
29+
{ actionType: 'assistColorblind', type: 'xray' },
30+
{ actionType: 'simulateColorblind', condition: 'rod_monochromacy' },
31+
{ actionType: 'deshake', pixels: 16 },
32+
{ actionType: 'pixelate', squareSize: 15, region: { RegionType: 'faces' }},
33+
{ actionType: 'blur', strength: 5 }
34+
]);
35+
36+
expect(transformation.toString()).toStrictEqual([
37+
'e_sepia',
38+
'e_boomerang',
39+
'e_grayscale',
40+
'e_adv_redeye',
41+
'e_negate',
42+
'e_redeye',
43+
'e_reverse',
44+
'e_transition',
45+
'co_red,e_shadow,x_5',
46+
'co_red,e_colorize:10',
47+
'e_oil_paint:8',
48+
'e_cartoonify:70:80',
49+
'co_lightblue,e_outline:100',
50+
'e_blackwhite:40',
51+
'e_accelerate',
52+
'e_loop:5',
53+
'co_red,e_makeTransparent:5',
54+
'e_noise:50',
55+
'e_vignette:5',
56+
'e_dither:9',
57+
'e_vectorize:colors:17:detail:100',
58+
'e_gradient_fade:5,x_10,y_20',
59+
'e_assist_colorblind:20',
60+
'e_assist_colorblind:xray',
61+
'e_simulate_colorblind:rod_monochromacy',
62+
'e_deshake:16',
63+
'e_pixelate_faces:15',
64+
'e_blur:5'
65+
].join('/'));
66+
});
67+
});

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

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -170,7 +170,6 @@ describe('Effect toJson()', () => {
170170
{
171171
actionType: 'makeTransparent',
172172
tolerance: 5,
173-
level: 5,
174173
color: 'red'
175174
}
176175
]);
@@ -203,7 +202,7 @@ describe('Effect toJson()', () => {
203202
.addAction(Effect.dither().type(halftone4x4Orthogonal()));
204203
expect(transformation.toJson()).toStrictEqual( [
205204
{
206-
actionType: 'Dither',
205+
actionType: 'dither',
207206
type: 9,
208207
}
209208
]);
@@ -229,7 +228,7 @@ describe('Effect toJson()', () => {
229228
.verticalStartPoint(20));
230229
expect(transformation.toJson()).toStrictEqual( [
231230
{
232-
actionType: 'GradientFade',
231+
actionType: 'gradientFade',
233232
strength: 5,
234233
horizontalStartPoint: 10,
235234
verticalStartPoint: 20

‎src/actions/effect/AssistColorBlind.ts‎

Lines changed: 18 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import {Action} from "../../internal/Action.js";
22
import {QualifierValue} from "../../internal/qualifier/QualifierValue.js";
33
import {Qualifier} from "../../internal/qualifier/Qualifier.js";
44
import {IAssistColorBlindEffectModel} from "../../internal/models/IEffectActionModel.js";
5+
import {IActionModel} from "../../internal/models/IActionModel.js";
56

67
/**
78
* @description Applies stripes to the image to help people with common color-blind conditions to differentiate between colors that are similar for them.
@@ -34,9 +35,25 @@ class AssistColorBlindEffectAction extends Action {
3435
*/
3536
stripesStrength(strength:number | string): this {
3637
this._actionModel.type = 'stripes';
37-
this._actionModel.stripesStrength = strength;
38+
this._actionModel.stripesStrength = strength as number;
3839
return this.addQualifier(new Qualifier('e', new QualifierValue(['assist_colorblind', strength]).setDelimiter(':')));
3940
}
41+
42+
static fromJson(actionModel: IActionModel): AssistColorBlindEffectAction {
43+
const {actionType, type, stripesStrength} = (actionModel as IAssistColorBlindEffectModel);
44+
45+
// We are using this() to allow inheriting classes to use super.fromJson.apply(this, [actionModel])
46+
// This allows the inheriting classes to determine the class to be created
47+
const result = new this();
48+
if (type === 'xray'){
49+
result.xray();
50+
}
51+
if (type === 'stripes'){
52+
stripesStrength && result.stripesStrength(stripesStrength);
53+
}
54+
55+
return result;
56+
}
4057
}
4158

4259
export {AssistColorBlindEffectAction};

‎src/actions/effect/Cartoonify.ts‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import {Qualifier} from "../../internal/qualifier/Qualifier.js";
22
import {QualifierValue} from "../../internal/qualifier/QualifierValue.js";
33
import {Action} from "../../internal/Action.js";
44
import {ICartoonifyEffectModel} from "../../internal/models/IEffectActionModel.js";
5+
import {IActionModel} from "../../internal/models/IActionModel.js";
56

67
/**
78
* @description Applies a cartoon effect to an image.
@@ -60,6 +61,19 @@ class CartoonifyEffect extends Action {
6061
this.addQualifier(new Qualifier('e', new QualifierValue([this.effectName, this.cartoonifyStrength, this.colorReduction])));
6162
return;
6263
}
64+
65+
static fromJson(actionModel: IActionModel): CartoonifyEffect {
66+
const {actionType, lineStrength, blackAndWhite, colorReductionLevel} = (actionModel as ICartoonifyEffectModel);
67+
68+
// We are using this() to allow inheriting classes to use super.fromJson.apply(this, [actionModel])
69+
// This allows the inheriting classes to determine the class to be created
70+
const result = new this(actionType, lineStrength);
71+
blackAndWhite && result.blackwhite();
72+
colorReductionLevel && result.colorReductionLevel(colorReductionLevel);
73+
lineStrength && result.lineStrength(lineStrength);
74+
75+
return result;
76+
}
6377
}
6478

6579

‎src/actions/effect/Colorize.ts‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,8 @@ import {Qualifier} from "../../internal/qualifier/Qualifier.js";
33
import {prepareColor} from "../../internal/utils/prepareColor.js";
44
import {EffectActionWithLevel}from "./EffectActions/EffectActionWithLevel.js";
55
import {SystemColors} from "../../qualifiers/color.js";
6+
import {IActionModel} from "../../internal/models/IActionModel.js";
7+
import {IColorizeModel} from "../../internal/models/IEffectActionModel.js";
68

79
/**
810
* @description Applies a colorizing filter to the asset, use the methods in the class to adjust the filter
@@ -20,6 +22,17 @@ class ColorizeEffectAction extends EffectActionWithLevel {
2022
this._actionModel.color = color;
2123
return this.addQualifier(new Qualifier('co', new QualifierValue(prepareColor(color))));
2224
}
25+
26+
static fromJson(actionModel: IActionModel): ColorizeEffectAction {
27+
const {actionType, level, color} = (actionModel as IColorizeModel);
28+
29+
// We are using this() to allow inheriting classes to use super.fromJson.apply(this, [actionModel])
30+
// This allows the inheriting classes to determine the class to be created
31+
const result = new this(actionType, level);
32+
color && result.color(color);
33+
34+
return result;
35+
}
2336
}
2437

2538

‎src/actions/effect/Dither.ts‎

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

45
/**
56
* @description Applies an ordered dither filter to the image.
@@ -8,7 +9,7 @@ import {IDitherModel} from "../../internal/models/IEffectActionModel.js";
89
* @see Visit {@link Actions.Effect|Effect} for an example
910
*/
1011
class DitherEffectAction extends LeveledEffectAction {
11-
protected _actionModel: IDitherModel = {actionType: 'Dither'};
12+
protected _actionModel: IDitherModel = {actionType: 'dither'};
1213
/**
1314
*
1415
* @param {Qualifiers.Dither} ditherType - The dither type applied to the image
@@ -20,6 +21,17 @@ class DitherEffectAction extends LeveledEffectAction {
2021
this.addQualifier(qualifierEffect);
2122
return this;
2223
}
24+
25+
static fromJson(actionModel: IActionModel): DitherEffectAction {
26+
const {actionType, type} = (actionModel as IDitherModel);
27+
28+
// We are using this() to allow inheriting classes to use super.fromJson.apply(this, [actionModel])
29+
// This allows the inheriting classes to determine the class to be created
30+
const result = new this(actionType);
31+
type && result.type(type);
32+
33+
return result;
34+
}
2335
}
2436

2537

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

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,10 @@ import {Action} from "../../../internal/Action.js";
22
import {QualifierValue} from "../../../internal/qualifier/QualifierValue.js";
33
import {Qualifier} from "../../../internal/qualifier/Qualifier.js";
44
import {ExpressionQualifier} from "../../../qualifiers/expression/ExpressionQualifier.js";
5-
import {EFFECT_MODE_TO_ACTION_TYPE_MAP} from "../../../internal/internalConstants.js";
5+
import {ACTION_TYPE_TO_EFFECT_MODE_MAP, EFFECT_MODE_TO_ACTION_TYPE_MAP} from "../../../internal/internalConstants.js";
66
import {ISimpleEffectActionModel} from "../../../internal/models/IEffectActionModel.js";
7+
import {IActionModel} from "../../../internal/models/IActionModel.js";
8+
import {IEffectActionWithLevelModel} from "../../../internal/models/IEffectActionModel.js";
79

810
/**
911
* @description A class that defines a simple effect of the type e_{effectName}
@@ -29,6 +31,17 @@ class SimpleEffectAction extends Action {
2931
}
3032
return new Qualifier('e', qualifierValue);
3133
}
34+
35+
static fromJson(actionModel: IActionModel): SimpleEffectAction {
36+
const {actionType, level} = (actionModel as IEffectActionWithLevelModel);
37+
const effectType = ACTION_TYPE_TO_EFFECT_MODE_MAP[actionType] || actionType;
38+
39+
// We are using this() to allow inheriting classes to use super.fromJson.apply(this, [actionModel])
40+
// This allows the inheriting classes to determine the class to be created
41+
const result = new this(effectType, level);
42+
43+
return result;
44+
}
3245
}
3346

3447
export {SimpleEffectAction};

‎src/actions/effect/GradientFade.ts‎

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

56
/**
67
* @description Applies a gradient fade effect from one edge of the image.
@@ -11,7 +12,7 @@ import {IGradientFadeEffecModel} from "../../internal/models/IEffectActionModel.
1112
class GradientFadeEffectAction extends Action {
1213
private _strength: number;
1314
private _type: string;
14-
protected _actionModel: IGradientFadeEffecModel = {actionType: 'GradientFade'};
15+
protected _actionModel: IGradientFadeEffecModel = {actionType: 'gradientFade'};
1516

1617
/**
1718
* @description Sets the strength of the fade effect.
@@ -63,6 +64,20 @@ class GradientFadeEffectAction extends Action {
6364

6465
this.addQualifier(new Qualifier('e', str));
6566
}
67+
68+
static fromJson(actionModel: IActionModel): GradientFadeEffectAction {
69+
const {actionType, verticalStartPoint, horizontalStartPoint, type, strength} = (actionModel as IGradientFadeEffecModel);
70+
71+
// We are using this() to allow inheriting classes to use super.fromJson.apply(this, [actionModel])
72+
// This allows the inheriting classes to determine the class to be created
73+
const result = new this();
74+
verticalStartPoint && result.verticalStartPoint(verticalStartPoint);
75+
horizontalStartPoint && result.horizontalStartPoint(horizontalStartPoint);
76+
type && result.type(type);
77+
strength && result.strength(strength);
78+
79+
return result;
80+
}
6681
}
6782

6883
export {GradientFadeEffectAction};

‎src/actions/effect/Outline.ts‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import {prepareColor} from "../../internal/utils/prepareColor.js";
55
import {SystemColors} from "../../qualifiers/color.js";
66
import {OutlineModeType} from "../../types/types.js";
77
import {IEffectOutlineModel} from "../../internal/models/IEffectActionModel.js";
8+
import {IActionModel} from "../../internal/models/IActionModel.js";
89

910
/**
1011
* @description Adds an outline to a transparent image. For examples, see the Image Transformations guide.
@@ -75,6 +76,20 @@ class EffectOutline extends Action {
7576
new QualifierValue(['outline', this._mode, this._width, this._blurLevel]).setDelimiter(':'))
7677
);
7778
}
79+
80+
static fromJson(actionModel: IActionModel): EffectOutline {
81+
const {actionType, mode, color, blurLevel, width} = (actionModel as IEffectOutlineModel);
82+
83+
// We are using this() to allow inheriting classes to use super.fromJson.apply(this, [actionModel])
84+
// This allows the inheriting classes to determine the class to be created
85+
const result = new this();
86+
mode && result.mode(mode);
87+
color && result.color(color);
88+
blurLevel && result.blurLevel(blurLevel);
89+
width && result.width(width);
90+
91+
return result;
92+
}
7893
}
7994

8095

0 commit comments

Comments
 (0)