From 4ca806ca2cb49f60a0918ec1d7b89f5bf81a0d08 Mon Sep 17 00:00:00 2001 From: brapoprod Date: Fri, 6 Sep 2024 16:25:24 +0200 Subject: [PATCH 01/14] [Feature][PROPOSAL] Anchor to page --- .../sdk/src/controllers/FrameController.ts | 35 ++++++++++++++++++ .../tests/controllers/FrameController.test.ts | 36 +++++++++++++++++++ packages/sdk/src/types/FrameTypes.ts | 32 +++++++++++++++++ 3 files changed, 103 insertions(+) diff --git a/packages/sdk/src/controllers/FrameController.ts b/packages/sdk/src/controllers/FrameController.ts index 5e9b5466..77b72bb4 100644 --- a/packages/sdk/src/controllers/FrameController.ts +++ b/packages/sdk/src/controllers/FrameController.ts @@ -15,6 +15,9 @@ import { AutoGrowDeltaUpdate, AutoGrowDirection, AutoGrowResetUpdate, + VerticalAnchorPosition, + HorizontalAnchorPosition, + AnchorDirection, } from '../types/FrameTypes'; import { ColorUsage } from '../types/ColorStyleTypes'; import { ShapeType } from '../types/ShapeTypes'; @@ -836,4 +839,36 @@ export class FrameController { .resetAutoGrowSettings(id, JSON.stringify(update)) .then((result) => getEditorResponseData(result)); }; + + /** + * This method will set the vertical anchor to page on a specified frame. + * @param id the id of the frame that needs to get a page anchor set + * @param anchor the new page-anchor position to be set to the frame. + * @returns + */ + setVerticalPageAnchor = async (id: Id, anchor: VerticalAnchorPosition) => { + const res = await this.#editorAPI; + return res.setAnchorProperties(id, AnchorDirection.vertical, anchor).then((result) => getEditorResponseData(result)); + }; + + /** + * This method will set the horizontal anchor to page on a specified frame. + * @param id the id of the frame that needs to get a page anchor set + * @param anchor the new page-anchor position to be set to the frame. + * @returns + */ + setHorizontalPageAnchor = async (id: Id, anchor: HorizontalAnchorPosition) => { + const res = await this.#editorAPI; + return res.setAnchorProperties(id, AnchorDirection.horizontal, anchor).then((result) => getEditorResponseData(result)); + }; + + /** + * This method will reset all anchoring properties of a specified frame to their original values + * @param id the id of the frame that needs to get reset + * @returns + */ + resetAnchoring = async (id: Id) => { + const res = await this.#editorAPI; + return res.resetAnchorProperties(id).then((result) => getEditorResponseData(result)); + }; } diff --git a/packages/sdk/src/tests/controllers/FrameController.test.ts b/packages/sdk/src/tests/controllers/FrameController.test.ts index 7a0d35bb..fd1ddcb7 100644 --- a/packages/sdk/src/tests/controllers/FrameController.test.ts +++ b/packages/sdk/src/tests/controllers/FrameController.test.ts @@ -1,10 +1,13 @@ import { EditorAPI, Id } from '../../types/CommonTypes'; import { + AnchorDirection, AutoGrowDirection, BlendMode, FitMode, FrameTypeEnum, ImageSourceTypeEnum, + SpecificHorizontalAnchorPosition, + SpecificVerticalAnchorPosition, UpdateZIndexMethod, VerticalAlign, } from '../../types/FrameTypes'; @@ -72,6 +75,8 @@ const mockedEditorApi: EditorAPI = { cancelCropMode: async () => getEditorResponseData(castToEditorResponse(null)), resetAutoGrowSettings: async () => getEditorResponseData(castToEditorResponse(null)), updateAutoGrowSettings: async () => getEditorResponseData(castToEditorResponse(null)), + setAnchorProperties: async () => getEditorResponseData(castToEditorResponse(null)), + resetAnchorProperties: async () => getEditorResponseData(castToEditorResponse(null)), }; beforeEach(() => { @@ -128,6 +133,8 @@ beforeEach(() => { jest.spyOn(mockedEditorApi, 'cancelCropMode'); jest.spyOn(mockedEditorApi, 'resetAutoGrowSettings'); jest.spyOn(mockedEditorApi, 'updateAutoGrowSettings'); + jest.spyOn(mockedEditorApi, 'setAnchorProperties'); + jest.spyOn(mockedEditorApi, 'resetAnchorProperties'); id = mockSelectFrame.id; }); @@ -636,3 +643,32 @@ describe('Auto grow updating', () => { ); }); }); + +describe('Anchoring', () => { + it('should be possible to set the vertical anchor settings', async () => { + await mockedFrameController.setVerticalPageAnchor(id, SpecificVerticalAnchorPosition.top); + expect(mockedEditorApi.setAnchorProperties).toHaveBeenCalledTimes(1); + expect(mockedEditorApi.setAnchorProperties).toHaveBeenCalledWith( + id, + AnchorDirection.vertical, + SpecificVerticalAnchorPosition.top, + ); + }); + it('should be possible to set the horizontal anchor settings', async () => { + await mockedFrameController.setHorizontalPageAnchor(id, SpecificHorizontalAnchorPosition.leftRight); + expect(mockedEditorApi.setAnchorProperties).toHaveBeenCalledTimes(2); + expect(mockedEditorApi.setAnchorProperties).toHaveBeenLastCalledWith( + id, + AnchorDirection.horizontal, + SpecificHorizontalAnchorPosition.leftRight, + ); + }); + + it('should be possible to reset anchor settings', async () => { + await mockedFrameController.resetAnchoring(id); + expect(mockedEditorApi.resetAnchorProperties).toHaveBeenCalledTimes(1); + expect(mockedEditorApi.resetAnchorProperties).toHaveBeenLastCalledWith( + id, + ); + }); +}); diff --git a/packages/sdk/src/types/FrameTypes.ts b/packages/sdk/src/types/FrameTypes.ts index 0017ac9d..e1399ce3 100644 --- a/packages/sdk/src/types/FrameTypes.ts +++ b/packages/sdk/src/types/FrameTypes.ts @@ -21,6 +21,7 @@ export type FrameLayoutType = { maxCopyfitting: PropertyState; enableCopyfitting: PropertyState; autoGrow: AutoGrowSettings; + anchoring: AnchorSettings; } | null; //Frame.image @@ -274,3 +275,34 @@ export enum UpdateZIndexMethod { bringForward = 'bringForward', sendBackward = 'sendBackward', } + +export enum SharedAnchorPosition { + relative = 'relative', + center = 'center', +} + +export enum SpecificVerticalAnchorPosition { + top = 'top', + bottom = 'bottom', + topBottom = 'topBottom', +} + +export enum SpecificHorizontalAnchorPosition { + right = 'right', + left = 'left', + leftRight = 'leftRight', +} + +export enum AnchorDirection { + horizontal = 'horizontal', + vertical = 'vertical', +} + +export type VerticalAnchorPosition = SharedAnchorPosition | SpecificVerticalAnchorPosition; +export type HorizontalAnchorPosition = SharedAnchorPosition | SpecificHorizontalAnchorPosition; + +export type AnchorSettings = { + vertical: PropertyState; + horizontal: PropertyState; + frameId?: PropertyState; +}; From 367d9fb2e6c939de5ab1dc58d57e95f2693938f9 Mon Sep 17 00:00:00 2001 From: Laurent Raymond <1528484+Dvergar@users.noreply.github.com> Date: Thu, 12 Sep 2024 17:22:00 +0200 Subject: [PATCH 02/14] [Feature] Updated to match engine --- .../sdk/src/controllers/FrameController.ts | 28 +++++--- .../tests/controllers/FrameController.test.ts | 23 +++--- packages/sdk/src/types/FrameTypes.ts | 71 +++++++++++++------ 3 files changed, 78 insertions(+), 44 deletions(-) diff --git a/packages/sdk/src/controllers/FrameController.ts b/packages/sdk/src/controllers/FrameController.ts index 77b72bb4..0fb72b90 100644 --- a/packages/sdk/src/controllers/FrameController.ts +++ b/packages/sdk/src/controllers/FrameController.ts @@ -15,9 +15,8 @@ import { AutoGrowDeltaUpdate, AutoGrowDirection, AutoGrowResetUpdate, - VerticalAnchorPosition, - HorizontalAnchorPosition, - AnchorDirection, + AnchorTargetType, + FrameAnchorType, } from '../types/FrameTypes'; import { ColorUsage } from '../types/ColorStyleTypes'; import { ShapeType } from '../types/ShapeTypes'; @@ -840,26 +839,33 @@ export class FrameController { .then((result) => getEditorResponseData(result)); }; + private setPageAnchor = async (id: Id, anchorType: FrameAnchorType, horizontal: boolean) => { + const res = await this.#editorAPI; + return res + .setAnchorProperties(id, horizontal, anchorType, AnchorTargetType.page) + .then((result) => getEditorResponseData(result)); + }; + /** + * @experimental * This method will set the vertical anchor to page on a specified frame. * @param id the id of the frame that needs to get a page anchor set - * @param anchor the new page-anchor position to be set to the frame. + * @param anchorType the new page-anchor position to be set to the frame. * @returns */ - setVerticalPageAnchor = async (id: Id, anchor: VerticalAnchorPosition) => { - const res = await this.#editorAPI; - return res.setAnchorProperties(id, AnchorDirection.vertical, anchor).then((result) => getEditorResponseData(result)); + setVerticalPageAnchor = async (id: Id, anchorType: FrameAnchorType) => { + return this.setPageAnchor(id, anchorType, false); }; /** + * @experimental * This method will set the horizontal anchor to page on a specified frame. * @param id the id of the frame that needs to get a page anchor set - * @param anchor the new page-anchor position to be set to the frame. + * @param anchorType the new page-anchor position to be set to the frame. * @returns */ - setHorizontalPageAnchor = async (id: Id, anchor: HorizontalAnchorPosition) => { - const res = await this.#editorAPI; - return res.setAnchorProperties(id, AnchorDirection.horizontal, anchor).then((result) => getEditorResponseData(result)); + setHorizontalPageAnchor = async (id: Id, anchorType: FrameAnchorType) => { + return this.setPageAnchor(id, anchorType, true); }; /** diff --git a/packages/sdk/src/tests/controllers/FrameController.test.ts b/packages/sdk/src/tests/controllers/FrameController.test.ts index fd1ddcb7..30b0fab3 100644 --- a/packages/sdk/src/tests/controllers/FrameController.test.ts +++ b/packages/sdk/src/tests/controllers/FrameController.test.ts @@ -1,13 +1,12 @@ import { EditorAPI, Id } from '../../types/CommonTypes'; import { - AnchorDirection, + AnchorTargetType, AutoGrowDirection, BlendMode, FitMode, + FrameAnchorType, FrameTypeEnum, ImageSourceTypeEnum, - SpecificHorizontalAnchorPosition, - SpecificVerticalAnchorPosition, UpdateZIndexMethod, VerticalAlign, } from '../../types/FrameTypes'; @@ -646,29 +645,29 @@ describe('Auto grow updating', () => { describe('Anchoring', () => { it('should be possible to set the vertical anchor settings', async () => { - await mockedFrameController.setVerticalPageAnchor(id, SpecificVerticalAnchorPosition.top); + await mockedFrameController.setVerticalPageAnchor(id, FrameAnchorType.center); expect(mockedEditorApi.setAnchorProperties).toHaveBeenCalledTimes(1); expect(mockedEditorApi.setAnchorProperties).toHaveBeenCalledWith( id, - AnchorDirection.vertical, - SpecificVerticalAnchorPosition.top, + false, + FrameAnchorType.center, + AnchorTargetType.page, ); }); it('should be possible to set the horizontal anchor settings', async () => { - await mockedFrameController.setHorizontalPageAnchor(id, SpecificHorizontalAnchorPosition.leftRight); + await mockedFrameController.setHorizontalPageAnchor(id, FrameAnchorType.startAndEnd); expect(mockedEditorApi.setAnchorProperties).toHaveBeenCalledTimes(2); expect(mockedEditorApi.setAnchorProperties).toHaveBeenLastCalledWith( id, - AnchorDirection.horizontal, - SpecificHorizontalAnchorPosition.leftRight, + true, + FrameAnchorType.startAndEnd, + AnchorTargetType.page, ); }); it('should be possible to reset anchor settings', async () => { await mockedFrameController.resetAnchoring(id); expect(mockedEditorApi.resetAnchorProperties).toHaveBeenCalledTimes(1); - expect(mockedEditorApi.resetAnchorProperties).toHaveBeenLastCalledWith( - id, - ); + expect(mockedEditorApi.resetAnchorProperties).toHaveBeenLastCalledWith(id); }); }); diff --git a/packages/sdk/src/types/FrameTypes.ts b/packages/sdk/src/types/FrameTypes.ts index e1399ce3..fe9a6640 100644 --- a/packages/sdk/src/types/FrameTypes.ts +++ b/packages/sdk/src/types/FrameTypes.ts @@ -7,6 +7,8 @@ import { CornerRadiusAll, CornerRadiusNone, CornerRadiusOnly, ShapeType } from ' export type FrameLayoutType = { id: Id; layoutId: Id; + horizontal: FrameAnchorType; + vertical: FrameAnchorType; x: PropertyState; y: PropertyState; width: PropertyState; @@ -21,7 +23,6 @@ export type FrameLayoutType = { maxCopyfitting: PropertyState; enableCopyfitting: PropertyState; autoGrow: AutoGrowSettings; - anchoring: AnchorSettings; } | null; //Frame.image @@ -276,33 +277,61 @@ export enum UpdateZIndexMethod { sendBackward = 'sendBackward', } -export enum SharedAnchorPosition { +export enum FrameAnchorType { relative = 'relative', + start = 'start', + end = 'end', + startAndEnd = 'startAndEnd', center = 'center', } -export enum SpecificVerticalAnchorPosition { - top = 'top', - bottom = 'bottom', - topBottom = 'topBottom', +export enum AnchorTargetType { + page = 'page', + // frame = 'frame', // will be added later } -export enum SpecificHorizontalAnchorPosition { - right = 'right', - left = 'left', - leftRight = 'leftRight', -} +export type PageAnchorTarget = { + type: AnchorTargetType; +}; -export enum AnchorDirection { - horizontal = 'horizontal', - vertical = 'vertical', -} +export type FrameAnchorTarget = { + id: Id; + type: AnchorTargetType; +}; + +export type AnchorTarget = PageAnchorTarget | FrameAnchorTarget; + +export type RelativeFrameAnchor = { + start: PropertyState; + end: PropertyState; + target: PropertyState; +}; + +export type StartFrameAnchor = { + offset: PropertyState; + target: PropertyState; +}; -export type VerticalAnchorPosition = SharedAnchorPosition | SpecificVerticalAnchorPosition; -export type HorizontalAnchorPosition = SharedAnchorPosition | SpecificHorizontalAnchorPosition; +export type EndFrameAnchor = { + offset: PropertyState; + target: PropertyState; +}; -export type AnchorSettings = { - vertical: PropertyState; - horizontal: PropertyState; - frameId?: PropertyState; +export type StartAndEndFrameAnchor = { + start: PropertyState; + end: PropertyState; + target: PropertyState; }; + +export type CenterFrameAnchor = { + offset: PropertyState; + size: PropertyState; + target: PropertyState; +}; + +export type FrameAnchor = + | RelativeFrameAnchor + | StartFrameAnchor + | EndFrameAnchor + | StartAndEndFrameAnchor + | CenterFrameAnchor; From f27fb9df2cc352108014b355f5c7ecec51e5605f Mon Sep 17 00:00:00 2001 From: Laurent Raymond <1528484+Dvergar@users.noreply.github.com> Date: Mon, 16 Sep 2024 14:11:38 +0200 Subject: [PATCH 03/14] [Feature] Removed unused properties for anchor --- packages/sdk/src/types/FrameTypes.ts | 2 -- 1 file changed, 2 deletions(-) diff --git a/packages/sdk/src/types/FrameTypes.ts b/packages/sdk/src/types/FrameTypes.ts index fe9a6640..a0aafe3f 100644 --- a/packages/sdk/src/types/FrameTypes.ts +++ b/packages/sdk/src/types/FrameTypes.ts @@ -324,8 +324,6 @@ export type StartAndEndFrameAnchor = { }; export type CenterFrameAnchor = { - offset: PropertyState; - size: PropertyState; target: PropertyState; }; From 79ab43ce1925c1c859f90f8eae408e04ac1294c5 Mon Sep 17 00:00:00 2001 From: Brian Roels <54845569+brapoprod@users.noreply.github.com> Date: Tue, 17 Sep 2024 13:36:09 +0200 Subject: [PATCH 04/14] Add property state --- packages/sdk/src/types/FrameTypes.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/sdk/src/types/FrameTypes.ts b/packages/sdk/src/types/FrameTypes.ts index a0aafe3f..3b5f94d4 100644 --- a/packages/sdk/src/types/FrameTypes.ts +++ b/packages/sdk/src/types/FrameTypes.ts @@ -7,8 +7,8 @@ import { CornerRadiusAll, CornerRadiusNone, CornerRadiusOnly, ShapeType } from ' export type FrameLayoutType = { id: Id; layoutId: Id; - horizontal: FrameAnchorType; - vertical: FrameAnchorType; + horizontal: PropertyState; + vertical: PropertyState; x: PropertyState; y: PropertyState; width: PropertyState; From f9d9308e6cd005186fb8fd6c3103e82737f884a7 Mon Sep 17 00:00:00 2001 From: Laurent Raymond <1528484+Dvergar@users.noreply.github.com> Date: Wed, 18 Sep 2024 14:36:39 +0200 Subject: [PATCH 05/14] [Feature] Fix wrong model used --- packages/sdk/src/types/FrameTypes.ts | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/packages/sdk/src/types/FrameTypes.ts b/packages/sdk/src/types/FrameTypes.ts index 3b5f94d4..5d6017fa 100644 --- a/packages/sdk/src/types/FrameTypes.ts +++ b/packages/sdk/src/types/FrameTypes.ts @@ -7,8 +7,8 @@ import { CornerRadiusAll, CornerRadiusNone, CornerRadiusOnly, ShapeType } from ' export type FrameLayoutType = { id: Id; layoutId: Id; - horizontal: PropertyState; - vertical: PropertyState; + horizontal: FrameAnchor; + vertical: FrameAnchor; x: PropertyState; y: PropertyState; width: PropertyState; @@ -305,26 +305,31 @@ export type RelativeFrameAnchor = { start: PropertyState; end: PropertyState; target: PropertyState; + type: FrameAnchorType; }; export type StartFrameAnchor = { offset: PropertyState; target: PropertyState; + type: FrameAnchorType; }; export type EndFrameAnchor = { offset: PropertyState; target: PropertyState; + type: FrameAnchorType; }; export type StartAndEndFrameAnchor = { start: PropertyState; end: PropertyState; target: PropertyState; + type: FrameAnchorType; }; export type CenterFrameAnchor = { target: PropertyState; + type: FrameAnchorType; }; export type FrameAnchor = From 15e5ff76096b302b0b274e6a8996e844834c4665 Mon Sep 17 00:00:00 2001 From: Laurent Raymond <1528484+Dvergar@users.noreply.github.com> Date: Fri, 20 Sep 2024 16:24:47 +0200 Subject: [PATCH 06/14] [Feature] Added anchor to frame --- .../sdk/src/controllers/FrameController.ts | 58 ++++++++++++++----- .../tests/controllers/FrameController.test.ts | 44 +++++++++----- packages/sdk/src/types/FrameTypes.ts | 53 +++++++++++------ 3 files changed, 108 insertions(+), 47 deletions(-) diff --git a/packages/sdk/src/controllers/FrameController.ts b/packages/sdk/src/controllers/FrameController.ts index 0fb72b90..ede9696d 100644 --- a/packages/sdk/src/controllers/FrameController.ts +++ b/packages/sdk/src/controllers/FrameController.ts @@ -15,8 +15,9 @@ import { AutoGrowDeltaUpdate, AutoGrowDirection, AutoGrowResetUpdate, - AnchorTargetType, FrameAnchorType, + FrameAnchorProperties, + AnchorTarget, } from '../types/FrameTypes'; import { ColorUsage } from '../types/ColorStyleTypes'; import { ShapeType } from '../types/ShapeTypes'; @@ -839,33 +840,60 @@ export class FrameController { .then((result) => getEditorResponseData(result)); }; - private setPageAnchor = async (id: Id, anchorType: FrameAnchorType, horizontal: boolean) => { + private setAnchor = async ( + id: Id, + horizontal: boolean, + anchorType: FrameAnchorType, + anchorTarget: AnchorTarget, + endAnchorTarget?: AnchorTarget | null, + ) => { + const properties: FrameAnchorProperties = { + horizontal: horizontal, + type: anchorType, + target: anchorTarget, + endTarget: endAnchorTarget, + }; + const res = await this.#editorAPI; return res - .setAnchorProperties(id, horizontal, anchorType, AnchorTargetType.page) + .setAnchorProperties(id, JSON.stringify(properties)) .then((result) => getEditorResponseData(result)); }; /** * @experimental - * This method will set the vertical anchor to page on a specified frame. - * @param id the id of the frame that needs to get a page anchor set - * @param anchorType the new page-anchor position to be set to the frame. + * This method will set the vertical anchor to target frame on a specified frame. + * @param id the id of the frame that needs to get a frame anchor set + * @param anchorType the type of positioning to be set to the frame + * @param anchorTarget the target frame to which it is anchored + * @param endAnchorTarget the target (end) frame to which it can be anchored * @returns */ - setVerticalPageAnchor = async (id: Id, anchorType: FrameAnchorType) => { - return this.setPageAnchor(id, anchorType, false); + setVerticalAnchor = async ( + id: Id, + anchorType: FrameAnchorType, + anchorTarget: AnchorTarget, + endAnchorTarget?: AnchorTarget | null, + ) => { + return this.setAnchor(id, false, anchorType, anchorTarget, endAnchorTarget); }; /** * @experimental - * This method will set the horizontal anchor to page on a specified frame. - * @param id the id of the frame that needs to get a page anchor set - * @param anchorType the new page-anchor position to be set to the frame. - * @returns - */ - setHorizontalPageAnchor = async (id: Id, anchorType: FrameAnchorType) => { - return this.setPageAnchor(id, anchorType, true); + * This method will set the horizontal anchor to target frame on a specified frame. + * @param id the id of the frame that needs to get a frame anchor set + * @param anchorType the type of positioning to be set to the frame + * @param anchorTarget the target frame to which it is anchored + * @param endAnchorTarget the target (end) frame to which it can be anchored + * @returns + */ + setHorizontalAnchor = async ( + id: Id, + anchorType: FrameAnchorType, + anchorTarget: AnchorTarget, + endAnchorTarget?: AnchorTarget | null, + ) => { + return this.setAnchor(id, true, anchorType, anchorTarget, endAnchorTarget); }; /** diff --git a/packages/sdk/src/tests/controllers/FrameController.test.ts b/packages/sdk/src/tests/controllers/FrameController.test.ts index 30b0fab3..639e4183 100644 --- a/packages/sdk/src/tests/controllers/FrameController.test.ts +++ b/packages/sdk/src/tests/controllers/FrameController.test.ts @@ -1,12 +1,15 @@ import { EditorAPI, Id } from '../../types/CommonTypes'; import { - AnchorTargetType, + AnchorTargetEdgeType, AutoGrowDirection, BlendMode, FitMode, + FrameAnchorProperties, + FrameAnchorTarget, FrameAnchorType, FrameTypeEnum, ImageSourceTypeEnum, + PageAnchorTarget, UpdateZIndexMethod, VerticalAlign, } from '../../types/FrameTypes'; @@ -645,24 +648,35 @@ describe('Auto grow updating', () => { describe('Anchoring', () => { it('should be possible to set the vertical anchor settings', async () => { - await mockedFrameController.setVerticalPageAnchor(id, FrameAnchorType.center); + const anchorType = FrameAnchorType.startAndEnd; + const startTarget = new FrameAnchorTarget('target-id', AnchorTargetEdgeType.end); + const endTarget = new PageAnchorTarget(); + + await mockedFrameController.setVerticalAnchor(id, anchorType, startTarget, endTarget); expect(mockedEditorApi.setAnchorProperties).toHaveBeenCalledTimes(1); - expect(mockedEditorApi.setAnchorProperties).toHaveBeenCalledWith( - id, - false, - FrameAnchorType.center, - AnchorTargetType.page, - ); + + const expectedProperties: FrameAnchorProperties = { + horizontal: false, + type: anchorType, + target: startTarget, + endTarget: endTarget, + }; + expect(mockedEditorApi.setAnchorProperties).toHaveBeenCalledWith(id, JSON.stringify(expectedProperties)); }); + it('should be possible to set the horizontal anchor settings', async () => { - await mockedFrameController.setHorizontalPageAnchor(id, FrameAnchorType.startAndEnd); + const anchorType = FrameAnchorType.center; + const startTarget = new FrameAnchorTarget('target-id', AnchorTargetEdgeType.start); + + await mockedFrameController.setHorizontalAnchor(id, anchorType, startTarget); expect(mockedEditorApi.setAnchorProperties).toHaveBeenCalledTimes(2); - expect(mockedEditorApi.setAnchorProperties).toHaveBeenLastCalledWith( - id, - true, - FrameAnchorType.startAndEnd, - AnchorTargetType.page, - ); + + const expectedProperties: FrameAnchorProperties = { + horizontal: true, + type: anchorType, + target: startTarget, + }; + expect(mockedEditorApi.setAnchorProperties).toHaveBeenCalledWith(id, JSON.stringify(expectedProperties)); }); it('should be possible to reset anchor settings', async () => { diff --git a/packages/sdk/src/types/FrameTypes.ts b/packages/sdk/src/types/FrameTypes.ts index 5d6017fa..8f21a51b 100644 --- a/packages/sdk/src/types/FrameTypes.ts +++ b/packages/sdk/src/types/FrameTypes.ts @@ -287,49 +287,61 @@ export enum FrameAnchorType { export enum AnchorTargetType { page = 'page', - // frame = 'frame', // will be added later + frame = 'frame', } -export type PageAnchorTarget = { - type: AnchorTargetType; -}; +export enum AnchorTargetEdgeType { + start = 'start', + end = 'end', + center = 'center', +} -export type FrameAnchorTarget = { +export class PageAnchorTarget { + type = AnchorTargetType.page; +} + +export class FrameAnchorTarget { id: Id; - type: AnchorTargetType; -}; + edge: AnchorTargetEdgeType; + type = AnchorTargetType.frame; + + constructor(id: Id, edge: AnchorTargetEdgeType) { + (this.id = id), (this.edge = edge); + } +} export type AnchorTarget = PageAnchorTarget | FrameAnchorTarget; export type RelativeFrameAnchor = { start: PropertyState; end: PropertyState; - target: PropertyState; - type: FrameAnchorType; + target: AnchorTarget; + type: FrameAnchorType.relative; }; export type StartFrameAnchor = { offset: PropertyState; - target: PropertyState; - type: FrameAnchorType; + target: AnchorTarget; + type: FrameAnchorType.start; }; export type EndFrameAnchor = { offset: PropertyState; - target: PropertyState; - type: FrameAnchorType; + target: AnchorTarget; + type: FrameAnchorType.end; }; export type StartAndEndFrameAnchor = { start: PropertyState; end: PropertyState; - target: PropertyState; - type: FrameAnchorType; + target: AnchorTarget; + type: FrameAnchorType.startAndEnd; }; export type CenterFrameAnchor = { - target: PropertyState; - type: FrameAnchorType; + offset: PropertyState; + target: AnchorTarget; + type: FrameAnchorType.center; }; export type FrameAnchor = @@ -338,3 +350,10 @@ export type FrameAnchor = | EndFrameAnchor | StartAndEndFrameAnchor | CenterFrameAnchor; + +export type FrameAnchorProperties = { + horizontal: boolean; + type: FrameAnchorType; + target: AnchorTarget; + endTarget?: AnchorTarget | null; +}; From c63c1557aaf5694d85c71147af7bfe431a958a04 Mon Sep 17 00:00:00 2001 From: Abdelhalim Khouas Date: Tue, 24 Sep 2024 16:34:58 +0300 Subject: [PATCH 07/14] export missing types --- packages/sdk/src/index.ts | 3 +++ 1 file changed, 3 insertions(+) diff --git a/packages/sdk/src/index.ts b/packages/sdk/src/index.ts index c10edd1e..386faefd 100644 --- a/packages/sdk/src/index.ts +++ b/packages/sdk/src/index.ts @@ -21,6 +21,8 @@ export { ImageSourceTypeEnum, BarcodeSourceTypeEnum, AutoGrowDirection, + AnchorTargetType, + FrameAnchorType, } from './types/FrameTypes'; export { DocumentType } from './types/DocumentTypes'; @@ -48,6 +50,7 @@ export type { ImageFrameVariableSource, ImageFrameUrlSource, AutoGrowSettings, + AnchorTarget, } from './types/FrameTypes'; export type { Variable, From 49a63e60dc888fc22cd5dc34668b64daeafeb79b Mon Sep 17 00:00:00 2001 From: Abdelhalim Khouas Date: Tue, 24 Sep 2024 17:49:17 +0300 Subject: [PATCH 08/14] export FrameAnchor --- packages/sdk/src/index.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/sdk/src/index.ts b/packages/sdk/src/index.ts index 386faefd..f120b2d0 100644 --- a/packages/sdk/src/index.ts +++ b/packages/sdk/src/index.ts @@ -51,6 +51,7 @@ export type { ImageFrameUrlSource, AutoGrowSettings, AnchorTarget, + FrameAnchor, } from './types/FrameTypes'; export type { Variable, From 387678bf4212e22a97ea5dad527d0704e3d0a470 Mon Sep 17 00:00:00 2001 From: Laurent Raymond <1528484+Dvergar@users.noreply.github.com> Date: Mon, 30 Sep 2024 10:13:52 +0200 Subject: [PATCH 09/14] [Feature] Added note on future feature --- packages/sdk/src/types/FrameTypes.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/sdk/src/types/FrameTypes.ts b/packages/sdk/src/types/FrameTypes.ts index 8f21a51b..f20d10dd 100644 --- a/packages/sdk/src/types/FrameTypes.ts +++ b/packages/sdk/src/types/FrameTypes.ts @@ -300,6 +300,7 @@ export class PageAnchorTarget { type = AnchorTargetType.page; } +// Future future, do NOT export in index export class FrameAnchorTarget { id: Id; edge: AnchorTargetEdgeType; From 99b038febcf22c83f42b3fbd830a52cdb2f9664c Mon Sep 17 00:00:00 2001 From: Nicola Verbeeck Date: Tue, 8 Oct 2024 14:28:53 +0200 Subject: [PATCH 10/14] [EDT-1669] Rework resetting frame positional properties --- .../sdk/src/controllers/FrameController.ts | 65 +++++++++++++------ .../tests/controllers/FrameController.test.ts | 50 +++++++------- 2 files changed, 67 insertions(+), 48 deletions(-) diff --git a/packages/sdk/src/controllers/FrameController.ts b/packages/sdk/src/controllers/FrameController.ts index ede9696d..e2329c14 100644 --- a/packages/sdk/src/controllers/FrameController.ts +++ b/packages/sdk/src/controllers/FrameController.ts @@ -130,13 +130,26 @@ export class FrameController { }; /** - * This method will reset the frame size (width and height) to the frame's original value + * This method will reset the frame's transformation properties (x, y, width, height, rotation, anchors) + * to the frame's to be inherited from the parent layout * @param id the id of a specific frame * @returns */ + resetTransformation = async (id: Id) => { + const res = await this.#editorAPI; + return res.resetFrameTransformation(id).then((result) => getEditorResponseData(result)); + }; + + /** + * This method will reset the frame's transformation properties (x, y, width, height, rotation, anchors) + * to the frame's to be inherited from the parent layout + * @param id the id of a specific frame + * @returns + * @deprecated Use 'resetTransformation' instead + */ resetSize = async (id: Id) => { const res = await this.#editorAPI; - return res.resetFrameSize(id).then((result) => getEditorResponseData(result)); + return res.resetFrameTransformation(id).then((result) => getEditorResponseData(result)); }; /** @@ -257,53 +270,63 @@ export class FrameController { return res.resetFrame(id).then((result) => getEditorResponseData(result)); }; /** - * This method will reset the x value of a specific frame to its original value - * @param id the id of the frame that needs to get reset + * This method will reset the frame's transformation properties (x, y, width, height, rotation, anchors) + * to the frame's to be inherited from the parent layout + * @param id the id of a specific frame * @returns + * @deprecated Use 'resetTransformation' instead */ resetX = async (id: Id) => { const res = await this.#editorAPI; - return res.resetFrameX(id).then((result) => getEditorResponseData(result)); + return res.resetFrameTransformation(id).then((result) => getEditorResponseData(result)); }; /** - * This method will reset the y value of a specific frame to its original value - * @param id the id of the frame that needs to get reset + * This method will reset the frame's transformation properties (x, y, width, height, rotation, anchors) + * to the frame's to be inherited from the parent layout + * @param id the id of a specific frame * @returns + * @deprecated Use 'resetTransformation' instead */ resetY = async (id: Id) => { const res = await this.#editorAPI; - return res.resetFrameY(id).then((result) => getEditorResponseData(result)); + return res.resetFrameTransformation(id).then((result) => getEditorResponseData(result)); }; /** - * This method will reset the rotation value of a specific frame to its original value - * @param id the id of the frame that needs to get reset + * This method will reset the frame's transformation properties (x, y, width, height, rotation, anchors) + * to the frame's to be inherited from the parent layout + * @param id the id of a specific frame * @returns + * @deprecated Use 'resetTransformation' instead */ resetRotation = async (id: Id) => { const res = await this.#editorAPI; - return res.resetFrameRotation(id).then((result) => getEditorResponseData(result)); + return res.resetFrameTransformation(id).then((result) => getEditorResponseData(result)); }; /** - * This method will reset the width of a specific frame to its original value - * @param id the id of the frame that needs to get reset + * This method will reset the frame's transformation properties (x, y, width, height, rotation, anchors) + * to the frame's to be inherited from the parent layout + * @param id the id of a specific frame * @returns + * @deprecated Use 'resetTransformation' instead */ resetWidth = async (id: Id) => { const res = await this.#editorAPI; - return res.resetFrameWidth(id).then((result) => getEditorResponseData(result)); + return res.resetFrameTransformation(id).then((result) => getEditorResponseData(result)); }; /** - * This method will reset the height of a specific frame to its original value - * @param id the id of the frame that needs to get reset + * This method will reset the frame's transformation properties (x, y, width, height, rotation, anchors) + * to the frame's to be inherited from the parent layout + * @param id the id of a specific frame * @returns + * @deprecated Use 'resetTransformation' instead */ resetHeight = async (id: Id) => { const res = await this.#editorAPI; - return res.resetFrameHeight(id).then((result) => getEditorResponseData(result)); + return res.resetFrameTransformation(id).then((result) => getEditorResponseData(result)); }; /** @@ -897,12 +920,14 @@ export class FrameController { }; /** - * This method will reset all anchoring properties of a specified frame to their original values - * @param id the id of the frame that needs to get reset + * This method will reset the frame's transformation properties (x, y, width, height, rotation, anchors) + * to the frame's to be inherited from the parent layout + * @param id the id of a specific frame * @returns + * @deprecated Use 'resetTransformation' instead */ resetAnchoring = async (id: Id) => { const res = await this.#editorAPI; - return res.resetAnchorProperties(id).then((result) => getEditorResponseData(result)); + return res.resetFrameTransformation(id).then((result) => getEditorResponseData(result)); }; } diff --git a/packages/sdk/src/tests/controllers/FrameController.test.ts b/packages/sdk/src/tests/controllers/FrameController.test.ts index 639e4183..209f8e03 100644 --- a/packages/sdk/src/tests/controllers/FrameController.test.ts +++ b/packages/sdk/src/tests/controllers/FrameController.test.ts @@ -45,12 +45,7 @@ const mockedEditorApi: EditorAPI = { removeFrame: async () => getEditorResponseData(castToEditorResponse(null)), removeFrames: async () => getEditorResponseData(castToEditorResponse(null)), resetFrame: async () => getEditorResponseData(castToEditorResponse(null)), - resetFrameX: async () => getEditorResponseData(castToEditorResponse(null)), - resetFrameY: async () => getEditorResponseData(castToEditorResponse(null)), - resetFrameHeight: async () => getEditorResponseData(castToEditorResponse(null)), - resetFrameWidth: async () => getEditorResponseData(castToEditorResponse(null)), - resetFrameRotation: async () => getEditorResponseData(castToEditorResponse(null)), - resetFrameSize: async () => getEditorResponseData(castToEditorResponse(null)), + resetFrameTransformation: async () => getEditorResponseData(castToEditorResponse(null)), resetImageFrameFitMode: async () => getEditorResponseData(castToEditorResponse(null)), removeImageSource: async () => getEditorResponseData(castToEditorResponse(null)), selectFrames: async () => getEditorResponseData(castToEditorResponse(null)), @@ -78,7 +73,6 @@ const mockedEditorApi: EditorAPI = { resetAutoGrowSettings: async () => getEditorResponseData(castToEditorResponse(null)), updateAutoGrowSettings: async () => getEditorResponseData(castToEditorResponse(null)), setAnchorProperties: async () => getEditorResponseData(castToEditorResponse(null)), - resetAnchorProperties: async () => getEditorResponseData(castToEditorResponse(null)), }; beforeEach(() => { @@ -103,12 +97,7 @@ beforeEach(() => { jest.spyOn(mockedEditorApi, 'setFrameIsVisible'); jest.spyOn(mockedEditorApi, 'removeFrames'); jest.spyOn(mockedEditorApi, 'resetFrame'); - jest.spyOn(mockedEditorApi, 'resetFrameX'); - jest.spyOn(mockedEditorApi, 'resetFrameY'); - jest.spyOn(mockedEditorApi, 'resetFrameHeight'); - jest.spyOn(mockedEditorApi, 'resetFrameWidth'); - jest.spyOn(mockedEditorApi, 'resetFrameRotation'); - jest.spyOn(mockedEditorApi, 'resetFrameSize'); + jest.spyOn(mockedEditorApi, 'resetFrameTransformation'); jest.spyOn(mockedEditorApi, 'resetImageFrameFitMode'); jest.spyOn(mockedEditorApi, 'removeImageSource'); jest.spyOn(mockedEditorApi, 'selectFrames'); @@ -136,7 +125,6 @@ beforeEach(() => { jest.spyOn(mockedEditorApi, 'resetAutoGrowSettings'); jest.spyOn(mockedEditorApi, 'updateAutoGrowSettings'); jest.spyOn(mockedEditorApi, 'setAnchorProperties'); - jest.spyOn(mockedEditorApi, 'resetAnchorProperties'); id = mockSelectFrame.id; }); @@ -289,38 +277,44 @@ describe('FrameController', () => { it("Should be possible to reset a frame's x position", async () => { await mockedFrameController.resetX(id); - expect(mockedEditorApi.resetFrameX).toHaveBeenCalledTimes(1); - expect(mockedEditorApi.resetFrameX).toHaveBeenCalledWith(id); + expect(mockedEditorApi.resetFrameTransformation).toHaveBeenCalledTimes(1); + expect(mockedEditorApi.resetFrameTransformation).toHaveBeenCalledWith(id); }); it("Should be possible to reset a frame's y position", async () => { await mockedFrameController.resetY(id); - expect(mockedEditorApi.resetFrameY).toHaveBeenCalledTimes(1); - expect(mockedEditorApi.resetFrameY).toHaveBeenCalledWith(id); + expect(mockedEditorApi.resetFrameTransformation).toHaveBeenCalledTimes(2); + expect(mockedEditorApi.resetFrameTransformation).toHaveBeenCalledWith(id); }); it('Should be possible to reset the frame rotation', async () => { await mockedFrameController.resetRotation(id); - expect(mockedEditorApi.resetFrameRotation).toHaveBeenCalledTimes(1); - expect(mockedEditorApi.resetFrameRotation).toHaveBeenCalledWith(id); + expect(mockedEditorApi.resetFrameTransformation).toHaveBeenCalledTimes(3); + expect(mockedEditorApi.resetFrameTransformation).toHaveBeenCalledWith(id); }); it('Should be possible to reset the frame height', async () => { await mockedFrameController.resetHeight(id); - expect(mockedEditorApi.resetFrameHeight).toHaveBeenCalledTimes(1); - expect(mockedEditorApi.resetFrameHeight).toHaveBeenCalledWith(id); + expect(mockedEditorApi.resetFrameTransformation).toHaveBeenCalledTimes(4); + expect(mockedEditorApi.resetFrameTransformation).toHaveBeenCalledWith(id); }); it('Should be possible to reset the frame width', async () => { await mockedFrameController.resetWidth(id); - expect(mockedEditorApi.resetFrameWidth).toHaveBeenCalledTimes(1); - expect(mockedEditorApi.resetFrameWidth).toHaveBeenCalledWith(id); + expect(mockedEditorApi.resetFrameTransformation).toHaveBeenCalledTimes(5); + expect(mockedEditorApi.resetFrameTransformation).toHaveBeenCalledWith(id); }); it('Should be possible to reset the frame size', async () => { await mockedFrameController.resetSize(id); - expect(mockedEditorApi.resetFrameSize).toHaveBeenCalledTimes(1); - expect(mockedEditorApi.resetFrameSize).toHaveBeenCalledWith(id); + expect(mockedEditorApi.resetFrameTransformation).toHaveBeenCalledTimes(6); + expect(mockedEditorApi.resetFrameTransformation).toHaveBeenCalledWith(id); + }); + + it('Should be possible to reset the frame size', async () => { + await mockedFrameController.resetTransformation(id); + expect(mockedEditorApi.resetFrameTransformation).toHaveBeenCalledTimes(7); + expect(mockedEditorApi.resetFrameTransformation).toHaveBeenCalledWith(id); }); it('Should be possible to reset the image frame fit mode', async () => { @@ -681,7 +675,7 @@ describe('Anchoring', () => { it('should be possible to reset anchor settings', async () => { await mockedFrameController.resetAnchoring(id); - expect(mockedEditorApi.resetAnchorProperties).toHaveBeenCalledTimes(1); - expect(mockedEditorApi.resetAnchorProperties).toHaveBeenLastCalledWith(id); + expect(mockedEditorApi.resetFrameTransformation).toHaveBeenCalledTimes(1); + expect(mockedEditorApi.resetFrameTransformation).toHaveBeenLastCalledWith(id); }); }); From 12e5553b1dc7982e09702cb95b944ced8addd071 Mon Sep 17 00:00:00 2001 From: Abdelhalim Khouas Date: Mon, 14 Oct 2024 11:49:50 +0300 Subject: [PATCH 11/14] fix StartAndEndFrameAnchor type --- packages/sdk/src/types/FrameTypes.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/sdk/src/types/FrameTypes.ts b/packages/sdk/src/types/FrameTypes.ts index f20d10dd..fa4083dd 100644 --- a/packages/sdk/src/types/FrameTypes.ts +++ b/packages/sdk/src/types/FrameTypes.ts @@ -334,8 +334,9 @@ export type EndFrameAnchor = { export type StartAndEndFrameAnchor = { start: PropertyState; + startTarget: AnchorTarget; end: PropertyState; - target: AnchorTarget; + endTarget: AnchorTarget; type: FrameAnchorType.startAndEnd; }; From 94f655d2ed29807842cc24a54bc5ce5d421ff218 Mon Sep 17 00:00:00 2001 From: Alexandra Bri Date: Mon, 14 Oct 2024 18:16:30 +0300 Subject: [PATCH 12/14] add missing types --- packages/sdk/src/index.ts | 3 +++ packages/sdk/src/types/FrameTypes.ts | 5 ++--- 2 files changed, 5 insertions(+), 3 deletions(-) diff --git a/packages/sdk/src/index.ts b/packages/sdk/src/index.ts index f4aada5d..98e402a8 100644 --- a/packages/sdk/src/index.ts +++ b/packages/sdk/src/index.ts @@ -24,6 +24,7 @@ export { AutoGrowDirection, AnchorTargetType, FrameAnchorType, + AnchorTargetEdgeType, } from './types/FrameTypes'; export { DocumentType } from './types/DocumentTypes'; @@ -53,6 +54,8 @@ export type { AutoGrowSettings, AnchorTarget, FrameAnchor, + PageAnchorTarget, + FrameAnchorTarget, } from './types/FrameTypes'; export type { Variable, diff --git a/packages/sdk/src/types/FrameTypes.ts b/packages/sdk/src/types/FrameTypes.ts index fa4083dd..d109ef59 100644 --- a/packages/sdk/src/types/FrameTypes.ts +++ b/packages/sdk/src/types/FrameTypes.ts @@ -300,14 +300,13 @@ export class PageAnchorTarget { type = AnchorTargetType.page; } -// Future future, do NOT export in index export class FrameAnchorTarget { - id: Id; + frameId: Id; edge: AnchorTargetEdgeType; type = AnchorTargetType.frame; constructor(id: Id, edge: AnchorTargetEdgeType) { - (this.id = id), (this.edge = edge); + (this.frameId = id), (this.edge = edge); } } From 4f65d4720389438dda56dab4643390b5bd5535f8 Mon Sep 17 00:00:00 2001 From: Alexandra Bri Date: Tue, 15 Oct 2024 13:48:26 +0300 Subject: [PATCH 13/14] export StartAndEndFrameAnchor --- packages/sdk/src/index.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/sdk/src/index.ts b/packages/sdk/src/index.ts index 98e402a8..80053873 100644 --- a/packages/sdk/src/index.ts +++ b/packages/sdk/src/index.ts @@ -56,6 +56,7 @@ export type { FrameAnchor, PageAnchorTarget, FrameAnchorTarget, + StartAndEndFrameAnchor, } from './types/FrameTypes'; export type { Variable, From e9c16edfd21a579e5a307b07e4073869b6270704 Mon Sep 17 00:00:00 2001 From: sebastian-mereuta Date: Tue, 15 Oct 2024 16:21:01 +0300 Subject: [PATCH 14/14] export missing types --- packages/sdk/src/index.ts | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/sdk/src/index.ts b/packages/sdk/src/index.ts index 80053873..1b0d9276 100644 --- a/packages/sdk/src/index.ts +++ b/packages/sdk/src/index.ts @@ -56,7 +56,11 @@ export type { FrameAnchor, PageAnchorTarget, FrameAnchorTarget, + RelativeFrameAnchor, + StartFrameAnchor, + EndFrameAnchor, StartAndEndFrameAnchor, + CenterFrameAnchor } from './types/FrameTypes'; export type { Variable,