The FrameController is responsible for all communication regarding Frames. Methods inside this controller can be called by window.SDK.frame.{method-name}

Methods

applyCropMode applyGradientMode applySubjectMode cancelGradientMode create createBarcodeFrame createShapeFrame deselectAll duplicateFrames enterCropMode enterGradientMode enterSubjectMode exitCropMode exitSubjectMode getAll getAllByPageId getAllLayoutProperties getById getByName getConfiguration getLayoutProperties getPropertiesOnSelectedLayout getSelected remove removeFrames removeImageSource rename reorderFrames reset resetAllAssetCropOverrides resetAnchoring resetAssetCropOverride resetAutoGrow resetAutoGrowDirections resetAutoGrowMaxHeight resetAutoGrowMaxWidth resetAutoGrowMinHeight resetAutoGrowMinWidth resetAutoGrowSettingsEnabled resetCropMode resetEnableCopyfitting resetHeight resetImageFrameFitMode resetMaxCopyfitting resetMinCopyfitting resetRotation resetSize resetTransformation resetVisibility resetWidth resetX resetY select selectMultiple setAutoGrowDirections setAutoGrowMaxHeight setAutoGrowMaxWidth setAutoGrowMinHeight setAutoGrowMinWidth setBlendMode setBrandKitGradient setEnableAutoGrow setEnableCopyfitting setFrameConstrainProportions setGradientApplied setHeight setHorizontalAnchor setImageFrameFitMode setImageFrameFitModePosition setImageFromConnector setImageFromUrl setIsVisible setLocalGradient setMaxCopyfitting setMinCopyfitting setRotation setShadowAngleDegrees setShadowBlurRadius setShadowColor setShadowDistance setShadowEnabled setShapeFrameEnableFill setShapeFrameEnableStroke setShapeFrameFillColor setShapeFrameStrokeColor setShapeFrameStrokeWeight setVerticalAlign setVerticalAnchor setVisibility setWidth setX setY setZIndex

Methods

  • This method will create a new frame of 'type' to the template positioned on the requested coordinates.

    Parameters

    • type: FrameTypeEnum

      the type of frame to create

    • x: number

      X coordinate of the new frame within the template

    • y: number

      Y coordinate of the new frame within the template

    • width: number

      Width of the new frame within the template

    • height: number

      Height of the new frame within the template

    Returns Promise<EditorResponse<string>>

    the newly created frame's id

  • Experimental

    This method will create a new barcode frame of 'type' type to the layout positioned on the requested coordinates. Any coordinate that is not specified will default to 'center'.

    Parameters

    • type: BarcodeType

      the type of barcode to create

    • Optionalposition: { x?: number; y?: number }

      optional position object where you can specify the x, y of the barcode frame

    Returns Promise<EditorResponse<string>>

  • This method will create a new frame of 'type' type to the template positioned on the requested coordinates.

    Parameters

    • type: ShapeType

      the type of frame to create

    • x: number

      X coordinate of the new frame within the template

    • y: number

      Y coordinate of the new frame within the template

    • width: number

      Width of the new frame within the template

    • height: number

      Height of the new frame within the template

    Returns Promise<EditorResponse<string>>

    the newly created shape frame's id

  • This method changes the order of frames in the z-index list.

    Parameters

    • order: number

      the index in the list to move to

    • ids: string[]

      An array of all IDs you want to move to the given index

    Returns Promise<EditorResponse<null>>

  • 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

    Parameters

    • id: string

      the id of a specific frame

    Returns Promise<EditorResponse<null>>

    Use 'resetTransformation' instead

  • 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

    Parameters

    • id: string

      the id of a specific frame

    Returns Promise<EditorResponse<null>>

    Use 'resetTransformation' instead

  • 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

    Parameters

    • id: string

      the id of a specific frame

    Returns Promise<EditorResponse<null>>

    Use 'resetTransformation' instead

  • 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

    Parameters

    • id: string

      the id of a specific frame

    Returns Promise<EditorResponse<null>>

    Use 'resetTransformation' instead

  • 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

    Parameters

    • id: string

      the id of a specific frame

    Returns Promise<EditorResponse<null>>

  • 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

    Parameters

    • id: string

      the id of a specific frame

    Returns Promise<EditorResponse<null>>

    Use 'resetTransformation' instead

  • 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

    Parameters

    • id: string

      the id of a specific frame

    Returns Promise<EditorResponse<null>>

    Use 'resetTransformation' instead

  • 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

    Parameters

    • id: string

      the id of a specific frame

    Returns Promise<EditorResponse<null>>

    Use 'resetTransformation' instead

  • This method will set the maxHeight for auto-grow of a specified frame. Set to null to remove the value.

    Parameters

    • id: string

      the id of the frame that needs to get updated

    • value: null | string

      the new maxHeight value to be set

    Returns Promise<EditorResponse<null>>

  • This method will set the maxWidth for auto-grow of a specified frame. Set to null to remove the value.

    Parameters

    • id: string

      the id of the frame that needs to get updated

    • value: null | string

      the new maxWidth value to be set

    Returns Promise<EditorResponse<null>>

  • This method will set the minHeight for auto-grow of a specified frame. Set to null to remove the value.

    Parameters

    • id: string

      the id of the frame that needs to get updated

    • value: null | string

      the new minHeight value to be set

    Returns Promise<EditorResponse<null>>

  • This method will set the minWidth for auto-grow of a specified frame. Set to null to remove the value.

    Parameters

    • id: string

      the id of the frame that needs to get updated

    • value: null | string

      the new minWidth value to be set

    Returns Promise<EditorResponse<null>>

  • This method will update (or set) the frame to use the provided brand kit gradient

    Parameters

    • id: string

      the id of the frame that needs to get updated

    • value: string

      the id of an existing brandkit gradient

    Returns Promise<EditorResponse<null>>

  • Parameters

    • _id: string

      the id of the frame that needs to get updated.

    • _constrainProportions: boolean

      The new constraint that you want to set to the frame.

    Returns Promise<EditorResponse<null>>

    the constrain proportions setter is not supported anymore.

    This method will set the constrainProportions property of a specified frame. If constrainProportionsReadOnly is true, the frame's constrainProportions property cannot be changed and this method will return an error.

  • This method will set the height of a specific frame

    Parameters

    • id: string

      the id of a specific frame

    • height: string

      the string value that will be calculated (f.e. 1+1 will result in 2) The notation is in pixels

    Returns Promise<EditorResponse<null>>

  • This method will set the fitMode property of a specified image frame.

    Parameters

    • imageFrameId: string

      the id of the imageFrame that needs to get updated.

    • fitMode: FitMode

      the new fitMode that you want to set to the imageFrame.

    Returns Promise<EditorResponse<null>>

  • This method will assign an image from a mediaConnector to the correct ImageFrame

    Parameters

    • imageFrameId: string

      the id of the imageFrame where an image needs to be assigned to

    • connectorId: string
    • assetId: string

      Unique id of the asset that you want to assign to the imageFrame

    Returns Promise<EditorResponse<null>>

  • This method will assign an image from url to the correct ImageFrame Make sure the url can be accessed by the editor.

    Parameters

    • imageFrameId: string

      the id of the imageFrame where an image needs to be assigned to

    • url: string

      A valid image uri

    Returns Promise<EditorResponse<null>>

  • This method will set the isVisible property of a specified frame. If set to false the frame will be invisible and vice versa.

    Parameters

    • id: string

      the id of the frame that needs to get updated

    • value: boolean

      True means the frame gets visible, false means the frame gets invisible

    Returns Promise<EditorResponse<null>>

  • This method will set the max copyFitting property of a specified frame.

    Parameters

    • id: string

      the id of the frame that needs to get updated

    • value: string

      the new max copyFitting value to be set to the frame.

    Returns Promise<EditorResponse<null>>

  • This method will set the min copyFitting property of a specified frame.

    Parameters

    • id: string

      the id of the frame that needs to get updated

    • value: string

      the new min copyFitting value to be set to the frame.

    Returns Promise<EditorResponse<null>>

  • This method will set the rotation angle of a specific frame

    Parameters

    • id: string

      the id of a specific frame

    • rotation: string

      the string value that will be calculated (f.e. 1+1 will result in 2) The notation is in pixels

    Returns Promise<EditorResponse<null>>

  • This method will set the visibility of the shape fill.

    Parameters

    • shapeFrameId: string

      the id of the shapeFrame that needs to get updated.

    • enableFill: boolean

      Whether the shape fill is visible.

    Returns Promise<EditorResponse<null>>

  • This method will set the visibility of the shape stroke.

    Parameters

    • shapeFrameId: string

      the id of the shapeFrame that needs to get updated.

    • enableStroke: boolean

      Whether the shape stroke is visible.

    Returns Promise<EditorResponse<null>>

  • This method will set the shape stroke color of a specified shape frame.

    Parameters

    • shapeFrameId: string

      the id of the shapeFrame that needs to get updated.

    • strokeColor: ColorUsage

      the new shape stroke color that you want to set to the shapeFrame.

    Returns Promise<EditorResponse<null>>

  • This method will set the shape stroke weight of a specified shape frame.

    Parameters

    • shapeFrameId: string

      the id of the shapeFrame that needs to get updated.

    • strokeWeight: number

      the new shape stroke weight that you want to set to the shapeFrame.

    Returns Promise<EditorResponse<null>>

  • Parameters

    • id: string

      the id of the frame that needs to get updated

    • value: boolean

      True means the frame gets visible, false means the frame gets invisible

    Returns Promise<EditorResponse<null>>

    Use setIsVisible instead.

    This method will set the visibility property of a specified frame. If set to false the frame will be invisible and vice versa.

  • This method will set the width of a specific frame

    Parameters

    • id: string

      the id of a specific frame

    • width: string

      the string value that will be calculated (f.e. 1+1 will result in 2) The notation is in pixels

    Returns Promise<EditorResponse<null>>

  • This method will set the x value of a specific frame

    Parameters

    • id: string

      the id of a specific frame

    • XValue: string

      the string value that will be calculated (f.e. 1+1 will result in 2) The notation is in pixels

    Returns Promise<EditorResponse<null>>

  • This method will set the y value of a specific frame

    Parameters

    • id: string

      the id of a specific frame

    • YValue: string

      the string value that will be calculated (f.e. 1+1 will result in 2) The notation is in pixels

    Returns Promise<EditorResponse<null>>