[Feature] Anchor to page

packages/sdk/src/controllers/FrameController.ts

@@ -15,6 +15,9 @@ import {
     AutoGrowDeltaUpdate,
     AutoGrowDirection,
     AutoGrowResetUpdate,
+    FrameAnchorType,
+    FrameAnchorProperties,
+    AnchorTarget,
 } from '../types/FrameTypes';
 import { ColorUsage } from '../types/ColorStyleTypes';
 import { ShapeType } from '../types/ShapeTypes';
@@ -836,4 +839,70 @@ export class FrameController {
             .resetAutoGrowSettings(id, JSON.stringify(update))
             .then((result) => getEditorResponseData<null>(result));
     };
+
+    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, JSON.stringify(properties))
+            .then((result) => getEditorResponseData<null>(result));
+    };
+
+    /**
+     * @experimental
+     * 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
+     */
+    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 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);
+    };
+
+    /**
+     * 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<null>(result));
+    };
 }

packages/sdk/src/tests/controllers/FrameController.test.ts

@@ -1,10 +1,15 @@
 import { EditorAPI, Id } from '../../types/CommonTypes';
 import {
+    AnchorTargetEdgeType,
     AutoGrowDirection,
     BlendMode,
     FitMode,
+    FrameAnchorProperties,
+    FrameAnchorTarget,
+    FrameAnchorType,
     FrameTypeEnum,
     ImageSourceTypeEnum,
+    PageAnchorTarget,
     UpdateZIndexMethod,
     VerticalAlign,
 } from '../../types/FrameTypes';
@@ -72,6 +77,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 +135,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 +645,43 @@ describe('Auto grow updating', () => {
         );
     });
 });
+
+describe('Anchoring', () => {
+    it('should be possible to set the vertical anchor settings', async () => {
+        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);
+
+        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 () => {
+        const anchorType = FrameAnchorType.center;
+        const startTarget = new FrameAnchorTarget('target-id', AnchorTargetEdgeType.start);
+
+        await mockedFrameController.setHorizontalAnchor(id, anchorType, startTarget);
+        expect(mockedEditorApi.setAnchorProperties).toHaveBeenCalledTimes(2);
+
+        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 () => {
+        await mockedFrameController.resetAnchoring(id);
+        expect(mockedEditorApi.resetAnchorProperties).toHaveBeenCalledTimes(1);
+        expect(mockedEditorApi.resetAnchorProperties).toHaveBeenLastCalledWith(id);
+    });
+});

packages/sdk/src/types/FrameTypes.ts

@@ -7,6 +7,8 @@ import { CornerRadiusAll, CornerRadiusNone, CornerRadiusOnly, ShapeType } from '
 export type FrameLayoutType = {
     id: Id;
     layoutId: Id;
+    horizontal: FrameAnchor;
+    vertical: FrameAnchor;
     x: PropertyState<number>;
     y: PropertyState<number>;
     width: PropertyState<number>;
@@ -274,3 +276,84 @@ export enum UpdateZIndexMethod {
     bringForward = 'bringForward',
     sendBackward = 'sendBackward',
 }
+
+export enum FrameAnchorType {
+    relative = 'relative',
+    start = 'start',
+    end = 'end',
+    startAndEnd = 'startAndEnd',
+    center = 'center',
+}
+
+export enum AnchorTargetType {
+    page = 'page',
+    frame = 'frame',
+}
+
+export enum AnchorTargetEdgeType {
+    start = 'start',
+    end = 'end',
+    center = 'center',
+}
+
+export class PageAnchorTarget {
+    type = AnchorTargetType.page;
+}
+
+export class FrameAnchorTarget {
+    id: Id;
+    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<number>;
+    end: PropertyState<number>;
+    target: AnchorTarget;
+    type: FrameAnchorType.relative;
+};
+
+export type StartFrameAnchor = {
+    offset: PropertyState<number>;
+    target: AnchorTarget;
+    type: FrameAnchorType.start;
+};
+
+export type EndFrameAnchor = {
+    offset: PropertyState<number>;
+    target: AnchorTarget;
+    type: FrameAnchorType.end;
+};
+
+export type StartAndEndFrameAnchor = {
+    start: PropertyState<number>;
+    end: PropertyState<number>;
+    target: AnchorTarget;
+    type: FrameAnchorType.startAndEnd;
+};
+
+export type CenterFrameAnchor = {
+    offset: PropertyState<number>;
+    target: AnchorTarget;
+    type: FrameAnchorType.center;
+};
+
+export type FrameAnchor =
+    | RelativeFrameAnchor
+    | StartFrameAnchor
+    | EndFrameAnchor
+    | StartAndEndFrameAnchor
+    | CenterFrameAnchor;
+
+export type FrameAnchorProperties = {
+    horizontal: boolean;
+    type: FrameAnchorType;
+    target: AnchorTarget;
+    endTarget?: AnchorTarget | null;
+};