[Feature] Add Image Crop Methods

src/controllers/FrameController.ts

@@ -618,4 +618,42 @@ export class FrameController {
         const res = await this.#editorAPI;
         return res.setFrameBlendMode(frameId, blendMode).then((result) => getEditorResponseData<null>(result));
     };
+
+    /**
+     * This method will make the specified image frame go into cropping mode.
+     * @param frameId The ID of a specific image frame
+     * @returns
+     */
+    enterCropMode = async (frameId: Id) => {
+        const res = await this.#editorAPI;
+        return res.enterCropMode(frameId).then((result) => getEditorResponseData<null>(result));
+    };
+
+    /**
+     * This method will exit cropping mode while saving the applied crop.
+     * @returns
+     */
+    applyCropMode = async () => {
+        const res = await this.#editorAPI;
+        return res.applyCropMode().then((result) => getEditorResponseData<null>(result));
+    };
+
+    /**
+     * This method will reset the currently applied crop mode and apply the last selected fit mode again.
+     * @param frameId The ID of a specific image frame
+     * @returns
+     */
+    resetCropMode = async (frameId: Id) => {
+        const res = await this.#editorAPI;
+        return res.resetCropMode(frameId).then((result) => getEditorResponseData<null>(result));
+    };
+
+    /**
+     * This method will exit cropping mode without saving the applied crop.
+     * @returns
+     */
+    cancelCropMode = async () => {
+        const res = await this.#editorAPI;
+        return res.cancelCropMode().then((result) => getEditorResponseData<null>(result));
+    };
 }

src/tests/controllers/FrameController.test.ts

@@ -62,6 +62,10 @@ const mockedEditorApi: EditorAPI = {
     setFrameBlendMode: async () => getEditorResponseData(castToEditorResponse(null)),
     renameFrame: async () => getEditorResponseData(castToEditorResponse(null)),
     setImageSource: async () => getEditorResponseData(castToEditorResponse(null)),
+    enterCropMode: async () => getEditorResponseData(castToEditorResponse(null)),
+    applyCropMode: async () => getEditorResponseData(castToEditorResponse(null)),
+    resetCropMode: async () => getEditorResponseData(castToEditorResponse(null)),
+    cancelCropMode: async () => getEditorResponseData(castToEditorResponse(null)),
 };
 
 beforeEach(() => {
@@ -111,6 +115,10 @@ beforeEach(() => {
     jest.spyOn(mockedEditorApi, 'setFrameBlendMode');
     jest.spyOn(mockedEditorApi, 'renameFrame');
     jest.spyOn(mockedEditorApi, 'setImageSource');
+    jest.spyOn(mockedEditorApi, 'enterCropMode');
+    jest.spyOn(mockedEditorApi, 'applyCropMode');
+    jest.spyOn(mockedEditorApi, 'resetCropMode');
+    jest.spyOn(mockedEditorApi, 'cancelCropMode');
 
     frameId = mockSelectFrame.frameId;
 });
@@ -356,6 +364,28 @@ describe('FrameController', () => {
         expect(mockedEditorApi.setFrameBlendMode).toHaveBeenCalledTimes(1);
         expect(mockedEditorApi.setFrameBlendMode).toHaveBeenCalledWith(frameId, BlendMode.darken);
     });
+
+    it('Should be possible to enter cropping mode on a specific frame', async () => {
+        await mockedFrameController.enterCropMode(frameId);
+        expect(mockedEditorApi.enterCropMode).toHaveBeenCalledTimes(1);
+        expect(mockedEditorApi.enterCropMode).toHaveBeenCalledWith(frameId);
+    });
+
+    it('Should be possible to apply the current image crop to the frame', async () => {
+        await mockedFrameController.applyCropMode();
+        expect(mockedEditorApi.applyCropMode).toHaveBeenCalledTimes(1);
+    });
+
+    it('Should be possible to reset cropping mode on a specific frame', async () => {
+        await mockedFrameController.resetCropMode(frameId);
+        expect(mockedEditorApi.resetCropMode).toHaveBeenCalledTimes(1);
+        expect(mockedEditorApi.resetCropMode).toHaveBeenCalledWith(frameId);
+    });
+
+    it('Should be possible to cancel the current image crop', async () => {
+        await mockedFrameController.cancelCropMode();
+        expect(mockedEditorApi.cancelCropMode).toHaveBeenCalledTimes(1);
+    });
 });
 
 describe('ImageFrameSource manipulations', () => {

src/types/FrameTypes.ts

@@ -15,6 +15,7 @@ export type FrameLayoutType = {
     scaleY: PropertyState<number>;
     included: PropertyState<boolean>;
     fitMode: PropertyState<FitMode>;
+    hasImageCrop: PropertyState<boolean>;
     minCopyfitting: PropertyState<number>;
     maxCopyfitting: PropertyState<number>;
     enableCopyfitting: PropertyState<boolean>;
@@ -59,6 +60,7 @@ export type ImageFrame = {
     src?: ImageFrameSource;
     blendMode: BlendMode;
     constrainProportions: boolean;
+    crop?: CropSettings | NoCropSettings;
 };
 
 export type ShapeFrame = {
@@ -102,6 +104,19 @@ export type TextFrame = {
     constrainProportions: boolean;
 };
 
+export type CropSettings = {
+    left: number;
+    top: number;
+    width: number;
+    height: number;
+    rotationDegrees: number;
+    type: 'default';
+};
+
+export type NoCropSettings = {
+    type: 'noCrop';
+};
+
 export enum ImageSourceTypeEnum {
     url = 'url',
     variable = 'variable',