Skip to content

Commit 919a7db

Browse files
author
Nir Maoz
authored
Feature/add background model (#481)
1 parent 056f347 commit 919a7db

File tree

12 files changed

+564
-19
lines changed

12 files changed

+564
-19
lines changed

‎__TESTS_BUNDLE_SIZE__/bundleSizeTestCases.ts‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ import importFromPackage from "./utils/stringGenerators/importFromPackage";
1515
const bundleSizeTestCases:ITestCase[] = [
1616
{
1717
name: 'Tests CloudinaryImage with Resize',
18-
sizeLimitInKB: 21,
18+
sizeLimitInKB: 25,
1919
importsArray: [
2020
importFromDist('assets/CloudinaryImage', 'CloudinaryImage'),
2121
importFromDist('instance/Cloudinary', 'Cloudinary'),
@@ -24,7 +24,7 @@ const bundleSizeTestCases:ITestCase[] = [
2424
},
2525
{
2626
name: 'Tests CloudinaryImage with Resize and Adjust',
27-
sizeLimitInKB: 25,
27+
sizeLimitInKB: 29,
2828
importsArray: [
2929
importFromDist('assets/CloudinaryImage', 'CloudinaryImage'),
3030
importFromDist('instance/Cloudinary', 'Cloudinary'),
@@ -34,7 +34,7 @@ const bundleSizeTestCases:ITestCase[] = [
3434
},
3535
{
3636
name: 'Tests CloudinaryImage with Resize, Adjust and Border',
37-
sizeLimitInKB: 26,
37+
sizeLimitInKB: 30,
3838
importsArray: [
3939
importFromDist('assets/CloudinaryImage', 'CloudinaryImage'),
4040
importFromDist('instance/Cloudinary', 'Cloudinary'),
@@ -45,7 +45,7 @@ const bundleSizeTestCases:ITestCase[] = [
4545
},
4646
{
4747
name: 'Tests CloudinaryImage image with Resize, adjust and delivery',
48-
sizeLimitInKB: 27,
48+
sizeLimitInKB: 31,
4949
importsArray: [
5050
importFromDist('assets/CloudinaryImage', 'CloudinaryImage'),
5151
importFromDist('instance/Cloudinary', 'Cloudinary'),
@@ -88,7 +88,7 @@ const bundleSizeTestCases:ITestCase[] = [
8888
},
8989
{
9090
name: 'Import All Actions',
91-
sizeLimitInKB: 38,
91+
sizeLimitInKB: 42,
9292
importsArray: [
9393
importFromPackage('Actions')
9494
]

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

Lines changed: 53 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -15,9 +15,9 @@ describe('resize.fromJson', () => {
1515
{actionType: 'fill', dimensions: {width: 100}, relative: true, gravity: {gravityType: 'ocr'}, x: 4, y: 5},
1616
{actionType: 'limitFill', dimensions: {width: 100}, relative: true, gravity: {gravityType: 'direction', compass: 'south'}, x: 4, y: 5},
1717
{actionType: 'thumbnail', dimensions: {width: 100}, relative: true, gravity: {gravityType: 'direction', compass: 'south'}, zoom: 4},
18-
{actionType: 'pad', dimensions: {width: 100}, relative: true, gravity: {gravityType: 'direction', compass: 'south'}, x: 3, y:4, background: 'white'},
19-
{actionType: 'limitPad', dimensions: {width: 100}, relative: true, gravity: {gravityType: 'direction', compass: 'south'}, x: 3, y:4, background: 'white'},
20-
{actionType: 'minimumPad', dimensions: {width: 100}, relative: true, gravity: {gravityType: 'direction', compass: 'south'}, x: 3, y:4, background: 'white'},
18+
{actionType: 'pad', dimensions: {width: 100}, relative: true, gravity: {gravityType: 'direction', compass: 'south'}, x: 3, y:4},
19+
{actionType: 'limitPad', dimensions: {width: 100}, relative: true, gravity: {gravityType: 'direction', compass: 'south'}, x: 3, y:4},
20+
{actionType: 'minimumPad', dimensions: {width: 100}, relative: true, gravity: {gravityType: 'direction', compass: 'south'}, x: 3, y:4, background: {backgroundType: 'color', color: 'white'}},
2121
{
2222
actionType: 'crop',
2323
dimensions: {width: 200},
@@ -55,8 +55,8 @@ describe('resize.fromJson', () => {
5555
'c_fill,fl_relative,g_ocr_text,w_100,x_4,y_5',
5656
'c_lfill,fl_relative,g_south,w_100,x_4,y_5',
5757
'c_thumb,fl_relative,g_south,w_100,z_4',
58-
'b_white,c_pad,fl_relative,g_south,w_100,x_3,y_4',
59-
'b_white,c_lpad,fl_relative,g_south,w_100,x_3,y_4',
58+
'c_pad,fl_relative,g_south,w_100,x_3,y_4',
59+
'c_lpad,fl_relative,g_south,w_100,x_3,y_4',
6060
'b_white,c_mpad,fl_relative,g_south,w_100,x_3,y_4',
6161
'c_crop,g_auto:person_100:cat_avoid,w_200',
6262
'c_crop,g_dog:auto:bird_30:cat_avoid,w_200',
@@ -72,4 +72,52 @@ describe('resize.fromJson', () => {
7272
expect(transformation).toMatchObject(fromJson(json));
7373
expect(transformation.toString()).toStrictEqual(fromJson(json).toString());
7474
});
75+
76+
it('Should generate AutoBackground from model', ()=>{
77+
const transformation = fromJson([
78+
{actionType: 'pad', dimensions: {width: 100}, background: {backgroundType: 'auto'}},
79+
]);
80+
81+
expect(transformation.toString()).toStrictEqual('b_auto,c_pad,w_100');
82+
});
83+
84+
it('Should generate ColorBackground from model', ()=>{
85+
const transformation = fromJson([
86+
{actionType: 'pad', dimensions: {width: 100}, background: {backgroundType: 'color', color: 'red'}},
87+
]);
88+
89+
expect(transformation.toString()).toStrictEqual('b_red,c_pad,w_100');
90+
});
91+
92+
it('Should generate BorderBackground from model', ()=>{
93+
const transformation = fromJson([
94+
{actionType: 'pad', dimensions: {width: 100}, background: {backgroundType: 'border', contrast: true, palette: ['red', 'blue']}},
95+
]);
96+
97+
expect(transformation.toString()).toStrictEqual('b_auto:border_contrast:palette_red_blue,c_pad,w_100');
98+
});
99+
100+
it('Should generate BorderGradientBackground from model', ()=>{
101+
const transformation = fromJson([
102+
{actionType: 'pad', dimensions: {width: 100}, background: {backgroundType: 'borderGradient', contrast: true, palette: ['red', 'blue'], gradientColors: 4, gradientDirection: 'diagonal_desc'}},
103+
]);
104+
105+
expect(transformation.toString()).toStrictEqual('b_auto:border_gradient_contrast:4:diagonal_desc:palette_red_blue,c_pad,w_100');
106+
});
107+
108+
it('Should generate PredominantBackground from model', ()=>{
109+
const transformation = fromJson([
110+
{actionType: 'pad', dimensions: {width: 100}, background: {backgroundType: 'predominant', contrast: true, palette: ['red', 'blue']}},
111+
]);
112+
113+
expect(transformation.toString()).toStrictEqual('b_auto:predominant_contrast:palette_red_blue,c_pad,w_100');
114+
});
115+
116+
it('Should generate PredominantGradientBackground from model', ()=>{
117+
const transformation = fromJson([
118+
{actionType: 'pad', dimensions: {width: 100}, background: {backgroundType: 'predominantGradient', contrast: true, palette: ['red', 'blue'], gradientColors: 4, gradientDirection: 'diagonal_desc'}},
119+
]);
120+
121+
expect(transformation.toString()).toStrictEqual('b_auto:predominant_gradient_contrast:4:diagonal_desc:palette_red_blue,c_pad,w_100');
122+
});
75123
});

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

Lines changed: 150 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import {Transformation} from '../../../src';
22
import {Resize} from "../../../src/actions";
3-
import {AspectRatio} from "../../../src/qualifiers";
3+
import {AspectRatio, Background, GradientDirection} from "../../../src/qualifiers";
44
import {Gravity} from "../../../src/qualifiers";
55
import {FocusOn} from "../../../src/qualifiers/focusOn";
66
import {AutoFocus} from "../../../src/qualifiers/autoFocus";
@@ -214,4 +214,153 @@ describe('resize.toJson()', () => {
214214
}
215215
]);
216216
});
217+
218+
it('should generate an AutoBackgroundModel', () => {
219+
const transformation = new Transformation()
220+
.addAction(Resize.pad(200).background(Background.auto()));
221+
222+
const model = transformation.toJson();
223+
224+
expect(model).toStrictEqual([
225+
{
226+
actionType: 'pad',
227+
dimensions: {
228+
width: 200
229+
},
230+
background: {
231+
backgroundType: 'auto'
232+
}
233+
}
234+
]);
235+
});
236+
237+
it('should generate a BlurredBackgroundModel', () => {
238+
const transformation = new Transformation()
239+
.addAction(Resize.pad(200).background(Background.blurred().intensity(10).brightness(20)));
240+
241+
const model = transformation.toJson();
242+
243+
expect(model).toStrictEqual([
244+
{
245+
actionType: 'pad',
246+
dimensions: {
247+
width: 200
248+
},
249+
background: {
250+
backgroundType: 'blurred',
251+
brightness: 20,
252+
intensity: 10
253+
}
254+
}
255+
]);
256+
});
257+
258+
it('should generate a BorderBackgroundModel', () => {
259+
const transformation = new Transformation()
260+
.addAction(Resize.pad(200).background(Background.border().contrast().palette('RED', 'GREEN', 'BLUE')));
261+
262+
const model = transformation.toJson();
263+
264+
expect(model).toStrictEqual([
265+
{
266+
actionType: 'pad',
267+
dimensions: {
268+
width: 200
269+
},
270+
background: {
271+
backgroundType: 'border',
272+
palette: ['RED', 'GREEN', 'BLUE'],
273+
contrast: true
274+
}
275+
}
276+
]);
277+
});
278+
279+
it('should generate a BorderGradientBackgroundModel', () => {
280+
const transformation = new Transformation()
281+
.addAction(Resize.pad(200).background(Background.borderGradient().contrast().palette('RED', 'GREEN', 'BLUE').gradientColors(2).gradientDirection(GradientDirection.diagonalAsc())));
282+
283+
const model = transformation.toJson();
284+
285+
expect(model).toStrictEqual([
286+
{
287+
actionType: 'pad',
288+
dimensions: {
289+
width: 200
290+
},
291+
background: {
292+
backgroundType: 'borderGradient',
293+
palette: ['RED', 'GREEN', 'BLUE'],
294+
contrast: true,
295+
gradientColors: 2,
296+
gradientDirection: 'diagonal_asc'
297+
}
298+
}
299+
]);
300+
});
301+
302+
it('should generate a PredominantBackgroundModel', () => {
303+
const transformation = new Transformation()
304+
.addAction(Resize.pad(200).background(Background.predominant().contrast().palette('RED', 'GREEN', 'BLUE')));
305+
306+
const model = transformation.toJson();
307+
308+
expect(model).toStrictEqual([
309+
{
310+
actionType: 'pad',
311+
dimensions: {
312+
width: 200
313+
},
314+
background: {
315+
backgroundType: 'predominant',
316+
palette: ['RED', 'GREEN', 'BLUE'],
317+
contrast: true
318+
}
319+
}
320+
]);
321+
});
322+
323+
it('should generate a PredominantGradientBackgroundModel', () => {
324+
const transformation = new Transformation()
325+
.addAction(Resize.pad(200).background(Background.predominantGradient().contrast().palette('RED', 'GREEN', 'BLUE').gradientColors(2).gradientDirection(GradientDirection.diagonalAsc())));
326+
327+
const model = transformation.toJson();
328+
329+
expect(model).toStrictEqual([
330+
{
331+
actionType: 'pad',
332+
dimensions: {
333+
width: 200
334+
},
335+
background: {
336+
backgroundType: 'predominantGradient',
337+
palette: ['RED', 'GREEN', 'BLUE'],
338+
contrast: true,
339+
gradientColors: 2,
340+
gradientDirection: 'diagonal_asc'
341+
}
342+
}
343+
]);
344+
});
345+
346+
it('should generate a ColorBackgroundModel', () => {
347+
const transformation = new Transformation()
348+
.addAction(Resize.pad(200).background(Background.color('red')));
349+
350+
const model = transformation.toJson();
351+
352+
expect(model).toStrictEqual([
353+
{
354+
actionType: 'pad',
355+
dimensions: {
356+
width: 200
357+
},
358+
background: {
359+
backgroundType: 'color',
360+
color: 'red'
361+
}
362+
}
363+
]);
364+
});
365+
217366
});

‎src/actions/resize/ResizePadAction.ts‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,8 @@ import {Qualifier} from "../../internal/qualifier/Qualifier.js";
44
import {ResizeAdvancedAction} from "./ResizeAdvancedAction.js";
55
import {IActionModel} from "../../internal/models/IActionModel.js";
66
import {CompassGravity} from "../../qualifiers/gravity/compassGravity/CompassGravity.js";
7+
import {createBackgroundModel, IBackgroundModel} from "../../internal/models/createBackgroundModel.js";
8+
import {createBackgroundFromModel} from "../../internal/models/createBackgroundFromModel.js";
79

810
/**
911
* @description Defines an advanced resize with padding.
@@ -18,7 +20,7 @@ class ResizePadAction<GravityType extends IGravity> extends ResizeAdvancedAction
1820
* transparent background areas or when resizing with padding.
1921
*/
2022
background(backgroundQualifier: BackgroundQualifier): this {
21-
this._actionModel.background = backgroundQualifier.qualifierValue;
23+
this._actionModel.background = createBackgroundModel(backgroundQualifier);
2224
return this.addQualifier(backgroundQualifier);
2325
}
2426

@@ -42,7 +44,7 @@ class ResizePadAction<GravityType extends IGravity> extends ResizeAdvancedAction
4244

4345
static fromJson(actionModel: IActionModel): ResizePadAction<CompassGravity> {
4446
const result = super.fromJson.apply(this, [actionModel]);
45-
actionModel.background && result.background(new BackgroundQualifier(actionModel.background as string));
47+
actionModel.background && result.background(createBackgroundFromModel(actionModel.background as IBackgroundModel));
4648
actionModel.x && result.offsetX(actionModel.x);
4749
actionModel.y && result.offsetY(actionModel.y);
4850
actionModel.zoom && result.zoom(actionModel.zoom as string);

‎src/internal/models/IColorModel.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
type IColorModel = string;
2+
3+
export {IColorModel};

0 commit comments

Comments
 (0)