[EDT-814] Add Page Width, Height and OnPageSizeChanged (#255)

[EDT-814] Add Page Width, Height and OnPageSizeChanged methods and event.

src/controllers/PageController.ts

@@ -1,6 +1,7 @@
 import { EditorAPI, Id } from '../../types/CommonTypes';
 import { getEditorResponseData } from '../utils/EditorResponseData';
 import { Page } from '../../types/PageTypes';
+import { getCalculatedValue } from '../utils/getCalculatedValue';
 
 /**
  * The PageController is responsible for all communication regarding Pages.
@@ -37,4 +38,44 @@ export class PageController {
         const res = await this.#editorAPI;
         return res.getPageById(pageId).then((result) => getEditorResponseData<Page>(result));
     };
+
+    /**
+     * This method will set the width of the page to a specific value.
+     * This only works if the document is a project.
+     * @param pageId The ID of a specific page
+     * @param value The string value that will be calculated (f.e. 1+1 will result in 2) The notation is in pixels
+     * @returns
+     */
+    setPageWidth = async (pageId: Id, value: string) => {
+        const res = await this.#editorAPI;
+        const calc = getCalculatedValue(value);
+
+        if (calc === null || calc === Infinity) {
+            return null;
+        }
+
+        return res
+            .setPageWidth(pageId, parseFloat(calc.toString()))
+            .then((result) => getEditorResponseData<null>(result));
+    };
+
+    /**
+     * This method will set the height of the page to a specific value.
+     * This only works if the document is a project.
+     * @param pageId The ID of a specific page
+     * @param value The string value that will be calculated (f.e. 1+1 will result in 2) The notation is in pixels
+     * @returns
+     */
+    setPageHeight = async (pageId: Id, value: string) => {
+        const res = await this.#editorAPI;
+        const calc = getCalculatedValue(value);
+
+        if (calc === null || calc === Infinity) {
+            return null;
+        }
+
+        return res
+            .setPageHeight(pageId, parseFloat(calc.toString()))
+            .then((result) => getEditorResponseData<null>(result));
+    };
 }

src/controllers/SubscriberController.ts

@@ -214,4 +214,14 @@ export class SubscriberController {
         const callBack = this.config.onConnectorEvent;
         callBack && callBack(JSON.parse(connectorEvent));
     };
+
+    /**
+     * Listener on page size, this listener will get triggered when the page size is changed, while the document is a `project`.
+     * This will not emit anything if your document is a `template`.
+     * @param pageSize Stringified object of the PageSize
+     */
+    onPageSizeChanged = (pageSize: string) => {
+        const callBack = this.config.onPageSizeChanged;
+        callBack && callBack(JSON.parse(pageSize));
+    };
 }

src/index.ts

@@ -238,6 +238,7 @@ export class SDK {
                 onLayoutsChanged: this.subscriber.onLayoutsChanged,
                 onConnectorEvent: this.subscriber.onConnectorEvent,
                 onZoomChanged: this.subscriber.onZoomChanged,
+                onPageSizeChanged: this.subscriber.onPageSizeChanged,
             },
             this.setConnection,
             this.config.editorId,

src/interactions/connector.ts

@@ -63,6 +63,7 @@ interface ConfigParameterTypes {
     onLayoutsChanged: (layouts: string) => void;
     onConnectorEvent: (state: string) => void;
     onZoomChanged: (scaleFactor: string) => void;
+    onPageSizeChanged: (scaleFactor: string) => void;
 }
 
 const Connect = (
@@ -122,6 +123,7 @@ const Connect = (
                 layoutListChanged: params.onLayoutsChanged,
                 connectorEvent: params.onConnectorEvent,
                 zoomChanged: params.onZoomChanged,
+                pageSizeChanged: params.onPageSizeChanged,
             },
         }),
     );

src/tests/__mocks__/MockEditorAPI.ts

@@ -75,6 +75,8 @@ export const mockExitTextEditMode = jest.fn().mockResolvedValue({ success: true,
 export const mockResetAnimation = jest.fn().mockResolvedValue({ success: true, status: 0 });
 export const mockGetPages = jest.fn().mockResolvedValue({ success: true, status: 0 });
 export const mockGetPageById = jest.fn().mockResolvedValue({ success: true, status: 0 });
+export const mockSetPageHeight = jest.fn().mockResolvedValue({ success: true, status: 0 });
+export const mockSetPageWidth = jest.fn().mockResolvedValue({ success: true, status: 0 });
 export const mockGetAnimationsOnSelectedLayout = jest.fn().mockResolvedValue({ success: true, status: 0 });
 export const mockGetAnimationByFrameId = jest.fn().mockResolvedValue({ success: true, status: 0 });
 export const mockGetAnimationsByLayoutId = jest.fn().mockResolvedValue({ success: true, status: 0 });
@@ -268,6 +270,8 @@ const MockEditorAPI = {
     setTool: mockSetTool,
     getPages: mockGetPages,
     getPageById: mockGetPageById,
+    setPageWidth: mockSetPageWidth,
+    setPageHeight: mockSetPageHeight,
     getLogs: mockGetLogs,
     enableDebug: mockEnableDebug,
     disableDebug: mockDisableDebug,

src/tests/__mocks__/config.ts

@@ -27,5 +27,6 @@ const mockConfig: ConfigType = {
     onLayoutsChanged: defaultMockReturn,
     onConnectorEvent: defaultMockReturn,
     onZoomChanged: defaultMockReturn,
+    onPageSizeChanged: defaultMockReturn,
 };
 export default mockConfig;

src/tests/controllers/PageController.test.ts

@@ -7,6 +7,8 @@ beforeEach(() => {
     mockedPageProperties = new PageController(MockEditorAPI);
     jest.spyOn(mockedPageProperties, 'getPages');
     jest.spyOn(mockedPageProperties, 'getPageById');
+    jest.spyOn(mockedPageProperties, 'setPageWidth');
+    jest.spyOn(mockedPageProperties, 'setPageHeight');
 });
 
 afterAll(() => {
@@ -20,5 +22,13 @@ describe('PageProperties', () => {
         mockedPageProperties.getPageById('4');
         expect(mockedPageProperties.getPageById).toHaveBeenCalledTimes(1);
         expect(mockedPageProperties.getPageById).toHaveBeenCalledWith('4');
+
+        mockedPageProperties.setPageWidth('id', '4');
+        expect(mockedPageProperties.setPageWidth).toHaveBeenCalledTimes(1);
+        expect(mockedPageProperties.setPageWidth).toHaveBeenCalledWith('id', '4');
+
+        mockedPageProperties.setPageHeight('id', '4');
+        expect(mockedPageProperties.setPageHeight).toHaveBeenCalledTimes(1);
+        expect(mockedPageProperties.setPageHeight).toHaveBeenCalledWith('id', '4');
     });
 });

src/tests/controllers/SubscriberContoller.test.ts

@@ -8,6 +8,7 @@ import { VariableType } from '../../../types/VariableTypes';
 
 import { ToolType } from '../../utils/enums';
 import { ConnectorStateType } from '../../../types/ConnectorTypes';
+import { PageSize } from '../../../types/PageTypes';
 
 let mockedSDK: SDK;
 let mockedAnimation: FrameAnimationType;
@@ -39,6 +40,7 @@ beforeEach(() => {
     jest.spyOn(mockedSubscribers, 'onConnectorEvent');
     jest.spyOn(mockedSubscribers, 'onZoomChanged');
     jest.spyOn(mockedSubscribers, 'onActionsChanged');
+    jest.spyOn(mockedSubscribers, 'onPageSizeChanged');
 });
 
 afterEach(() => {
@@ -124,6 +126,11 @@ describe('Subscriber methods', () => {
         mockedSubscribers.onActionsChanged(JSON.stringify(actions));
         expect(mockedSDK.config.onActionsChanged).toHaveBeenCalledTimes(18);
         expect(mockedSDK.config.onActionsChanged).toHaveBeenCalledWith(actions);
+
+        const pageSize: PageSize = { pageId: 'pageId', width: 123, height: 456 };
+
+        mockedSubscribers.onPageSizeChanged(JSON.stringify(pageSize));
+        expect(mockedSDK.config.onPageSizeChanged).toHaveBeenCalledWith(pageSize);
     });
 
     it('Should call trigger the SelectedToolChanged subscriber when triggered', () => {

src/tests/interactions/connector.test.tsx

@@ -32,6 +32,7 @@ describe.skip('Editor Link Validator', () => {
                 onLayoutsChanged: () => null,
                 onConnectorEvent: () => null,
                 onZoomChanged: () => null,
+                onPageSizeChanged: () => null,
             },
             () => null,
         );
@@ -71,6 +72,7 @@ describe.skip('Editor Link Validator', () => {
                 onLayoutsChanged: () => null,
                 onConnectorEvent: () => null,
                 onZoomChanged: () => null,
+                onPageSizeChanged: () => null,
             },
             () => null,
         );
@@ -109,6 +111,7 @@ describe.skip('Editor Link Validator', () => {
                 onLayoutsChanged: () => null,
                 onConnectorEvent: () => null,
                 onZoomChanged: () => null,
+                onPageSizeChanged: () => null,
             },
             () => null,
         );

types/CommonTypes.ts

@@ -11,6 +11,7 @@ import { ParagraphStyle } from './ParagraphStyleTypes';
 import { DocumentFont } from './FontTypes';
 import { CharacterStyle } from './CharacterStyleTypes';
 import { ConnectorEvent } from './ConnectorTypes';
+import { PageSize } from './PageTypes';
 
 export type Id = string;
 
@@ -40,6 +41,7 @@ export type ConfigType = {
     onLayoutsChanged?: (layouts: LayoutListItemType[]) => void;
     onConnectorEvent?: (event: ConnectorEvent) => void;
     onZoomChanged?: (scaleFactor: number) => void;
+    onPageSizeChanged?: (pageSize: PageSize) => void;
 };
 
 export interface EditorResponse<T> {

types/PageTypes.ts

@@ -1,8 +1,14 @@
-import { Id } from "./CommonTypes";
+import { Id } from './CommonTypes';
 
 export type Page = {
     pageId: Id;
     pageNumber: number;
     width?: number;
     height?: number;
 };
+
+export type PageSize = {
+    pageId: Id;
+    width: number;
+    height: number;
+};