Add ocr gravity model (#477)

Author: Nir Maoz

__TESTS_BUNDLE_SIZE__/bundleSizeTestCases.ts

@@ -15,7 +15,7 @@ import importFromPackage from "./utils/stringGenerators/importFromPackage";
 const bundleSizeTestCases:ITestCase[] = [
   {
     name: 'Tests CloudinaryImage with Resize',
-    sizeLimitInKB: 19,
+    sizeLimitInKB: 20,
     importsArray: [
       importFromDist('assets/CloudinaryImage', 'CloudinaryImage'),
       importFromDist('instance/Cloudinary', 'Cloudinary'),
@@ -24,7 +24,7 @@ const bundleSizeTestCases:ITestCase[] = [
   },
   {
     name: 'Tests CloudinaryImage with Resize and Adjust',
-    sizeLimitInKB: 23,
+    sizeLimitInKB: 24,
     importsArray: [
       importFromDist('assets/CloudinaryImage', 'CloudinaryImage'),
       importFromDist('instance/Cloudinary', 'Cloudinary'),
@@ -34,7 +34,7 @@ const bundleSizeTestCases:ITestCase[] = [
   },
   {
     name: 'Tests CloudinaryImage with Resize, Adjust and Border',
-    sizeLimitInKB: 23,
+    sizeLimitInKB: 24,
     importsArray: [
       importFromDist('assets/CloudinaryImage', 'CloudinaryImage'),
       importFromDist('instance/Cloudinary', 'Cloudinary'),
@@ -45,7 +45,7 @@ const bundleSizeTestCases:ITestCase[] = [
   },
   {
     name: 'Tests CloudinaryImage image with Resize, adjust and delivery',
-    sizeLimitInKB: 24,
+    sizeLimitInKB: 25,
     importsArray: [
       importFromDist('assets/CloudinaryImage', 'CloudinaryImage'),
       importFromDist('instance/Cloudinary', 'Cloudinary'),
@@ -56,7 +56,7 @@ const bundleSizeTestCases:ITestCase[] = [
   },
   {
     name: 'Tests Overlay imports',
-    sizeLimitInKB: 20,
+    sizeLimitInKB: 21,
     importsArray: [
       importFromDist('assets/CloudinaryImage', 'CloudinaryImage'),
       importFromDist('actions/overlay', 'Overlay'),
@@ -88,7 +88,7 @@ const bundleSizeTestCases:ITestCase[] = [
   },
   {
     name: 'Import All Actions',
-    sizeLimitInKB: 33,
+    sizeLimitInKB: 34,
     importsArray: [
       importFromPackage('Actions')
     ]

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

@@ -7,13 +7,13 @@ describe('resize.fromJson', () => {
       {actionType: 'fit', dimensions: {height: 200, aspectRatio: '16:9'}, relative: true},
       {actionType: 'limitFit', dimensions: {height: 200, aspectRatio: 'ignore_aspect_ratio'}, relative: true},
       {actionType: 'minimumFit', dimensions: {width: 100}, regionRelative: true},
-      {actionType: 'crop', dimensions: {width: 100}, regionRelative: true, gravity: 'north_east', y: 3, zoom: 7},
-      {actionType: 'fill', dimensions: {width: 100}, relative: true, gravity: 'south', x: 4, y: 5},
-      {actionType: 'limitFill', dimensions: {width: 100}, relative: true, gravity: 'south', x: 4, y: 5},
-      {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: 'crop', dimensions: {width: 100}, regionRelative: true, gravity: {gravityType: 'direction', compass: 'north_east'}, y: 3, zoom: 7},
+      {actionType: 'fill', dimensions: {width: 100}, relative: true, gravity: {gravityType: 'ocr'}, x: 4, y: 5},
+      {actionType: 'limitFill', dimensions: {width: 100}, relative: true, gravity: {gravityType: 'direction', compass: 'south'}, x: 4, y: 5},
+      {actionType: 'thumbnail', dimensions: {width: 100}, relative: true, gravity: {gravityType: 'direction', compass: 'south'}, zoom: 4},
+      {actionType: 'pad', dimensions: {width: 100}, relative: true, gravity: {gravityType: 'direction', compass: 'south'}, x: 3, y:4, background: 'white'},
+      {actionType: 'limitPad', dimensions: {width: 100}, relative: true, gravity: {gravityType: 'direction', compass: 'south'}, x: 3, y:4, background: 'white'},
+      {actionType: 'minimumPad', dimensions: {width: 100}, relative: true, gravity: {gravityType: 'direction', compass: 'south'}, x: 3, y:4, background: 'white'},
     ]);
 
     expect(transformation.toString()).toStrictEqual([
@@ -22,7 +22,7 @@ describe('resize.fromJson', () => {
       '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_fill,fl_relative,g_ocr_text,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',

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

@@ -1,6 +1,8 @@
 import {Transformation} from '../../../src';
 import {Resize} from "../../../src/actions";
 import {AspectRatio} from "../../../src/qualifiers";
+import {Gravity} from "../../../src/qualifiers";
+import {FocusOn} from "../../../src/qualifiers/focusOn";
 
 describe('resize.toJson()', () => {
   it('scale', () => {
@@ -28,7 +30,8 @@ describe('resize.toJson()', () => {
       .addAction(Resize.thumbnail(100).gravity('south').zoom(4))
       .addAction(Resize.pad(100).gravity('south').offsetX(3).offsetY(4))
       .addAction(Resize.limitPad(100).gravity('south').offsetX(3).offsetY(4))
-      .addAction(Resize.minimumPad(100).gravity('south').offsetX(3).offsetY(4));
+      .addAction(Resize.minimumPad(100).gravity('south').offsetX(3).offsetY(4))
+      .addAction(Resize.fill(100, 200).gravity(Gravity.focusOn(FocusOn.ocr())));
     expect(transformation.toJson()).toStrictEqual([
       {
         "actionType": "scale",
@@ -142,6 +145,16 @@ describe('resize.toJson()', () => {
         },
         x: 3,
         y: 4
+      },
+      {
+        actionType: "fill",
+        dimensions: {
+          height: 200,
+          width: 100,
+        },
+        gravity: {
+          gravityType: "ocr",
+        },
       }
     ]);
   });

src/actions/resize/ResizeAdvancedAction.ts

@@ -3,14 +3,18 @@ import {IGravity} from "../../qualifiers/gravity/GravityQualifier.js";
 import {Qualifier} from "../../internal/qualifier/Qualifier.js";
 import {IActionModel} from "../../internal/models/IActionModel.js";
 import {createGravityModel} from "../../internal/models/createGravityModel.js";
+import {createGravityFromModel} from "../../internal/models/createGravityFromModel.js";
+import {IResizeAdvancedActionModel} from "../../internal/models/IResizeAdvancedActionModel.js";
 
 /**
  * @description Defines an advanced resize.
  * @extends Actions.Resize.ResizeSimpleAction
  * @memberOf Actions.Resize
  * @see Visit {@link Actions.Resize| Resize} for examples
  */
-class ResizeAdvancedAction extends ResizeSimpleAction {
+class ResizeAdvancedAction extends ResizeSimpleAction{
+  protected _actionModel: IResizeAdvancedActionModel;
+
   /**
    * @description Which part of the original image to include.
    * @param {Qualifiers.Gravity} gravity
@@ -24,7 +28,10 @@ class ResizeAdvancedAction extends ResizeSimpleAction {
 
   static fromJson(actionModel: IActionModel): ResizeAdvancedAction {
     const result = super.fromJson.apply(this, [actionModel]);
-    actionModel.gravity && result.gravity(actionModel.gravity);
+
+    if (actionModel.gravity) {
+      result.gravity(createGravityFromModel(actionModel.gravity));
+    }
 
     return result;
   }

src/actions/resize/ResizeSimpleAction.ts

@@ -17,7 +17,7 @@ import {ACTION_TYPE_TO_CROP_MODE_MAP, CROP_MODE_TO_ACTION_TYPE_MAP} from "../../
  * @see Visit {@link Actions.Resize| Resize} for examples
  */
 class ResizeSimpleAction extends Action {
-  protected _actionModel: IResizeSimpleActionModel = {dimensions: {}};
+  protected _actionModel: IResizeSimpleActionModel;
 
   /**
    * @param {string} cropType
@@ -26,7 +26,7 @@ class ResizeSimpleAction extends Action {
    */
   constructor(cropType: string, cropWidth: number | string, cropHeight?: number | string) {
     super();
-
+    this._actionModel = {dimensions: {}};
     this._actionModel.actionType = CROP_MODE_TO_ACTION_TYPE_MAP[cropType] || cropType;
     this.addQualifier(new Qualifier('c', cropType));
     cropWidth && this.width(cropWidth);

src/internal/models/IResizeAdvancedActionModel.ts

@@ -1,7 +1,8 @@
 import {IResizeSimpleActionModel} from "./IResizeSimpleActionModel.js";
+import {IGravityModel} from "./createGravityModel.js";
 
 interface IResizeAdvancedActionModel extends IResizeSimpleActionModel{
-  gravity: string;
+  gravity: IGravityModel;
 }
 
 export {IResizeAdvancedActionModel};

src/internal/models/createGravityFromModel.ts

@@ -0,0 +1,36 @@
+import {ICompassGravityModel, IGravityModel, IOcrGravityModel} from "./createGravityModel.js";
+import {IGravity} from "../../qualifiers/gravity/GravityQualifier.js";
+import {focusOn} from "../../qualifiers/gravity.js";
+import {ocr} from "../../qualifiers/focusOn.js";
+
+/**
+ * Validates that gravityModel is an ICompassGravityModel
+ * @param gravityModel
+ */
+function isCompassGravityModel(gravityModel: IGravityModel): gravityModel is ICompassGravityModel {
+  return gravityModel.gravityType === 'direction';
+}
+
+/**
+ * Validates that gravityModel is an IOcrGravityModel
+ * @param gravityModel
+ */
+function isOcrGravityModel(gravityModel: IGravityModel): gravityModel is IOcrGravityModel {
+  return gravityModel.gravityType === 'ocr';
+}
+
+/**
+ * Create gravity instance from given gravity model
+ * @param gravityModel
+ */
+function createGravityFromModel(gravityModel: IGravityModel): IGravity{
+  if (isCompassGravityModel(gravityModel)){
+    return gravityModel.compass;
+  }
+
+  if (isOcrGravityModel(gravityModel)) {
+    return focusOn(ocr());
+  }
+}
+
+export {createGravityFromModel};

src/internal/models/createGravityModel.ts

@@ -1,14 +1,24 @@
 import {IGravity} from "../../qualifiers/gravity/GravityQualifier.js";
-import {ICompassGravity, isICompassGravity} from "../../qualifiers/gravity/compassGravity/CompassGravity.js";
+import {ICompassGravity} from "../../qualifiers/gravity/compassGravity/CompassGravity.js";
 
 export interface IGravityModel{
-  gravityType: string;
+  gravityType?: string;
 }
 
 export interface ICompassGravityModel extends IGravityModel{
   compass: ICompassGravity
 }
 
+export interface IOcrGravityModel extends IGravityModel{}
+
+/**
+ * Validate that given val is an ICompassGravity
+ * @param val
+ */
+function isICompassGravity(val: unknown): val is ICompassGravity{
+  return ['north', 'center', 'east', 'west', 'south', 'north_west', 'south_east', 'south_west', 'north_east'].includes(val as string);
+}
+
 /**
  * Creates a compassGravity model
  * @param compass
@@ -20,16 +30,35 @@ function createCompassGravityModel(compass: ICompassGravity): ICompassGravityMod
   };
 }
 
+/**
+ * Validate that given string represents an ocr gravity
+ * @param gravity
+ */
+function isIOcrGravity(gravity: string): boolean {
+  return gravity === 'ocr_text';
+}
+
+/**
+ * Creates an ocr gravity model
+ */
+function createOcrGravityModel(): IOcrGravityModel {
+  return {
+    gravityType: 'ocr'
+  };
+}
+
 /**
  * Create a model of given gravity
  * @param gravity
  */
-export function createGravityModel(gravity: IGravity): ICompassGravityModel | string {
-  const gravityString = (typeof gravity === "string" ? gravity : (gravity).qualifierValue) as string;
+export function createGravityModel(gravity: IGravity): IGravityModel {
+  const gravityString = `${(typeof gravity === "string" ? gravity : gravity.qualifierValue)}`;
 
   if (isICompassGravity(gravityString)) {
     return createCompassGravityModel(gravityString);
   }
 
-  return gravityString;
+  if (isIOcrGravity(gravityString)) {
+    return createOcrGravityModel();
+  }
 }

src/qualifiers/gravity/compassGravity/CompassGravity.ts

@@ -3,14 +3,6 @@ import {CompassQualifier} from "../qualifiers/compass/CompassQualifier.js";
 
 type ICompassGravity = 'north' | 'center' | 'east' | 'west' | 'south' | 'north_west' | 'south_east' | 'south_west' | 'north_east';
 
-/**
- * Validate that given val is an ICompassGravity
- * @param val
- */
-function isICompassGravity(val: unknown): val is ICompassGravity{
-  return ['north', 'center', 'east', 'west', 'south', 'north_west', 'south_east', 'south_west', 'north_east'].includes(val as string);
-}
-
 /**
  * @description The class for the CompassGravity builder
  * @memberOf Qualifiers.Gravity
@@ -25,4 +17,4 @@ class CompassGravity extends GravityQualifier {
   }
 }
 
-export {CompassGravity, ICompassGravity, isICompassGravity};
+export {CompassGravity, ICompassGravity};