diff --git a/src/controllers/PageController.ts b/src/controllers/PageController.ts index 7fe0ff88..badba37d 100644 --- a/src/controllers/PageController.ts +++ b/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(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(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(result)); + }; } diff --git a/src/controllers/SubscriberController.ts b/src/controllers/SubscriberController.ts index 72f52619..0ea454e3 100644 --- a/src/controllers/SubscriberController.ts +++ b/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)); + }; } diff --git a/src/index.ts b/src/index.ts index e5ae3ed7..2dd47c75 100644 --- a/src/index.ts +++ b/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, diff --git a/src/interactions/connector.ts b/src/interactions/connector.ts index 101bc8f4..1d987d86 100644 --- a/src/interactions/connector.ts +++ b/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, }, }), ); diff --git a/src/tests/__mocks__/MockEditorAPI.ts b/src/tests/__mocks__/MockEditorAPI.ts index 2062d6c6..39489cf8 100644 --- a/src/tests/__mocks__/MockEditorAPI.ts +++ b/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, diff --git a/src/tests/__mocks__/config.ts b/src/tests/__mocks__/config.ts index 4211ca4c..9ddddea9 100644 --- a/src/tests/__mocks__/config.ts +++ b/src/tests/__mocks__/config.ts @@ -27,5 +27,6 @@ const mockConfig: ConfigType = { onLayoutsChanged: defaultMockReturn, onConnectorEvent: defaultMockReturn, onZoomChanged: defaultMockReturn, + onPageSizeChanged: defaultMockReturn, }; export default mockConfig; diff --git a/src/tests/controllers/PageController.test.ts b/src/tests/controllers/PageController.test.ts index dd6e78f6..6aa4d2b4 100644 --- a/src/tests/controllers/PageController.test.ts +++ b/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'); }); }); diff --git a/src/tests/controllers/SubscriberContoller.test.ts b/src/tests/controllers/SubscriberContoller.test.ts index 08b4f5c4..d8a2494d 100644 --- a/src/tests/controllers/SubscriberContoller.test.ts +++ b/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', () => { diff --git a/src/tests/interactions/connector.test.tsx b/src/tests/interactions/connector.test.tsx index 2f117672..37dc0e63 100644 --- a/src/tests/interactions/connector.test.tsx +++ b/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, ); diff --git a/types/CommonTypes.ts b/types/CommonTypes.ts index 9e2fd9a1..3c2b82c7 100644 --- a/types/CommonTypes.ts +++ b/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 { diff --git a/types/PageTypes.ts b/types/PageTypes.ts index b77746a5..ea6cac2b 100644 --- a/types/PageTypes.ts +++ b/types/PageTypes.ts @@ -1,4 +1,4 @@ -import { Id } from "./CommonTypes"; +import { Id } from './CommonTypes'; export type Page = { pageId: Id; @@ -6,3 +6,9 @@ export type Page = { width?: number; height?: number; }; + +export type PageSize = { + pageId: Id; + width: number; + height: number; +};