Interface ICanvasConfig

A structure containing canvas settings in the editor.

Package: @aurigma/design-editor-iframe

Examples

configuration = {
   canvas: {
       shadowEnabled: false,
       autoItemSelectionEnabled: true,
       floatingToolbar: {
           enabled: true,
           mode: "Inside",
           buttons: [ "Handle", "Select", "Edit" ]
       }
   }
};

Properties

autoItemSelectionEnabled

Allows for auto selecting the first design element in the advanced editing mode. The default value is false.

Declaration

autoItemSelectionEnabled?: boolean;

Property Value

Type	Description
boolean	Allows for auto selecting the first design element in the advanced editing mode. The default value is false.

autoPlaceholderEditModeEnabled

Allows your users to work with the content of image placeholders by clicking a placeholder in either simple or advanced edit mode. If true, the **Handle** does not appear on image placeholders. The default value is false.

Declaration

autoPlaceholderEditModeEnabled?: boolean;

Property Value

Type	Description
boolean	Allows your users to work with the content of image placeholders by clicking a placeholder in either simple or advanced edit mode. If true, the **Handle** does not appear on image placeholders. The default value is false.

canvasItemHoverEnabled

Enables text labels for editable design elements. The default value is false. For details, see the Element Names topic.

Declaration

canvasItemHoverEnabled?: boolean;

Property Value

Type	Description
boolean	Enables text labels for editable design elements. The default value is false. For details, see the Element Names topic.

color

The canvas color; this color is visible if a transparent object is placed on the canvas.

Declaration

color?: string;

Property Value

Type	Description
string	The canvas color; this color is visible if a transparent object is placed on the canvas.

containerColor

The color of the HTML element placed under the canvas.

Deprecation: Use the `color` property instead.

Declaration

containerColor?: string;

Property Value

Type	Description
string	The color of the HTML element placed under the canvas.

curvedTextBaselineDrawStates

Specifies in which states to draw baseline of curved text objects. The default value is [edit, select, resize, rotate]. Possible states are:

• idle - when no action is performed on the object and it is neither selected nor hovered. - edit - when text object is being edited. - select - when text object is selected. - hover - when text object is hovered. - move - when text object is being moved. - resize - when text object is being resized. - rotate - when text object is being rotated.

Declaration

curvedTextBaselineDrawStates?: ItemHandlerState[];

Property Value

Type

Description

ItemHandlerState[]

Specifies in which states to draw baseline of curved text objects. The default value is [edit, select, resize, rotate]. Possible states are: idle - when no action is performed on the object and it is neither selected nor hovered. - edit - when text object is being edited. - select - when text object is selected. - hover - when text object is hovered. - move - when text object is being moved. - resize - when text object is being resized. - rotate - when text object is being rotated.

floatingItemToolbarEnabled

Enables the floating toolbar with the **Select Image**, **Edit**, and **Delete** buttons for the selected design element right on the canvas. The default value is false.

Deprecation: Instead, you can fine-tune the floating toolbar through the [ICanvasConfig.floatingToolbar](xref:@aurigma/design-editor-iframe!ICanvasConfig%23floatingToolbar:member) object.

Declaration

floatingItemToolbarEnabled?: boolean;

Property Value

Type	Description
boolean	Enables the floating toolbar with the **Select Image**, **Edit**, and **Delete** buttons for the selected design element right on the canvas. The default value is false.

floatingToolbar

Defines parameters of the floating toolbar with the **Handle**, **Select Image**, **Edit**, and **Delete** buttons for the selected design element right on the canvas. **Handle** appears image placeholders to manage their content. **Select Image** appears for images and image placeholders to change the image. The **Edit** button allows for editing images and the content of text elements and image placeholders. The default value is false.

Declaration

floatingToolbar?: IFloatingItemToolbarConfig;

Property Value

Type

Description

IFloatingItemToolbarConfig

Defines parameters of the floating toolbar with the **Handle**, **Select Image**, **Edit**, and **Delete** buttons for the selected design element right on the canvas. **Handle** appears image placeholders to manage their content. **Select Image** appears for images and image placeholders to change the image. The **Edit** button allows for editing images and the content of text elements and image placeholders. The default value is false.

gridVisible

Enables the grid when the canvas opens. The default value is false.

Declaration

gridVisible?: boolean;

Property Value

Type	Description
boolean	Enables the grid when the canvas opens. The default value is false.

handlers

A structure defining the item processing rules.

Declaration

handlers?: IHandlersConfiguration;

Property Value

Type	Description
IHandlersConfiguration	A structure defining the item processing rules.

Examples

configuration = {
    canvas: {
        handlers: {
            placeholderEditingViewMode: "normal"
        }
    }
};

historySize

The number of actions in the Design Editor that can be reverted by using the **Undo** button. The default value is 10.

Declaration

historySize?: number;

Property Value

Type	Description
number	The number of actions in the Design Editor that can be reverted by using the **Undo** button. The default value is 10.

inactiveContainerTransparencyEnabled

If not defined or true, displays the content of spot containers transparent. The default value is true. For more details, refer to the Post Press Finishing topic.

Declaration

inactiveContainerTransparencyEnabled?: boolean;

Property Value

Type	Description
boolean	If not defined or true, displays the content of spot containers transparent. The default value is true. For more details, refer to the Post Press Finishing topic.

inactiveContainerTransparencyLevel

Defines how transparent inactive containers should be. Its value is in the range [0, 1]. If 0, the content of inactive containers becomes completely opaque. If 1, it becomes 100% transparent. The default value is 0.8. For more details, refer to the Post Press Finishing topic.

Declaration

inactiveContainerTransparencyLevel?: number;

Property Value

Type	Description
number	Defines how transparent inactive containers should be. Its value is in the range [0, 1]. If 0, the content of inactive containers becomes completely opaque. If 1, it becomes 100% transparent. The default value is 0.8. For more details, refer to the Post Press Finishing topic.

listSettings

A structure containing the configuration of text lists. For more details, see Text lists.

Declaration

listSettings?: IListConfiguration;

Property Value

Type	Description
IListConfiguration	A structure containing the configuration of text lists. For more details, see Text lists.

maskedPlaceholderUnderscoreEnabled

Enables displaying underscores in blank masked text layers. If false and the user has partially filled the text placeholder in, then the rest blank symbols are displayed as spaces. If true, the blank portion of the text layer displays underscores. The default value is true.

Declaration

maskedPlaceholderUnderscoreEnabled?: boolean;

Property Value

Type	Description
boolean	Enables displaying underscores in blank masked text layers. If false and the user has partially filled the text placeholder in, then the rest blank symbols are displayed as spaces. If true, the blank portion of the text layer displays underscores. The default value is true.

mockupMarginWorkaroundEnabled

Enables white margin around design to prevent drawing of phantom 1 pixel lines when the design has the same size as the mockup.

Declaration

mockupMarginWorkaroundEnabled?: boolean;

Property Value

Type	Description
boolean	Enables white margin around design to prevent drawing of phantom 1 pixel lines when the design has the same size as the mockup.

multipleObjectsUpdateOptimizationEnabled

Optimizes the load time of templates consisting of a large number of layers. The default value is true.

Declaration

multipleObjectsUpdateOptimizationEnabled?: boolean;

Property Value

Type	Description
boolean	Optimizes the load time of templates consisting of a large number of layers. The default value is true.

paddingPct

Padding between the canvas and the canvas viewer, in percent.

Declaration

paddingPct?: number;

Property Value

Type	Description
number	Padding between the canvas and the canvas viewer, in percent.

pinchZoomEnabled

Allows users to zoom the canvas using the pinch gesture on mobile devices. The default value is true.

Declaration

pinchZoomEnabled?: boolean;

Property Value

Type	Description
boolean	Allows users to zoom the canvas using the pinch gesture on mobile devices. The default value is true.

printZone

Defines the appearance of the bleed zone. For details, see Changing the Appearance of the Bleed Zone.

Declaration

printZone?: IPrintZoneConfiguration;

Property Value

Type	Description
IPrintZoneConfiguration	Defines the appearance of the bleed zone. For details, see Changing the Appearance of the Bleed Zone.

qualityChangeContainersEnabled

Enables a bar displaying the DPI value of images on the canvas. If true, then the bar appears when your users resizing images or image placeholder. The default value is false.

Declaration

qualityChangeContainersEnabled?: boolean;

Property Value

Type	Description
boolean	Enables a bar displaying the DPI value of images on the canvas. If true, then the bar appears when your users resizing images or image placeholder. The default value is false.

rotatedTextInPlaceEditEnabled

If false, any text rotated by any angle will be edited in a plain text pop up, and non-rotated text will be edited in place. By default, this property is true, and rotated text will be turned to 0 degrees when being edited on the canvas.

Declaration

rotatedTextInPlaceEditEnabled?: boolean;

Property Value

Type	Description
boolean	If false, any text rotated by any angle will be edited in a plain text pop up, and non-rotated text will be edited in place. By default, this property is true, and rotated text will be turned to 0 degrees when being edited on the canvas.

rotation

Defines the canvas rotation parameters. By default, the user can rotate canvas at 90 degrees when clicking the **Rotate** button in the Bottom Toolbar.

Declaration

rotation?: IRotationConfig;

Property Value

Type	Description
IRotationConfig	Defines the canvas rotation parameters. By default, the user can rotate canvas at 90 degrees when clicking the **Rotate** button in the Bottom Toolbar.

Examples

You can enable the rotation at 180 degrees as follows:

configuration = {
    canvas: {
        rotation: {
            type: "Rotate180"
        }
    }
};

rulers

Defines parameters of rulers.

Declaration

rulers?: IRulersConfig;

Property Value

Type	Description
IRulersConfig	Defines parameters of rulers.

safetyLinesVisible

Enables safety lines when the canvas opens. The default value is true.

Declaration

safetyLinesVisible?: boolean;

Property Value

Type	Description
boolean	Enables safety lines when the canvas opens. The default value is true.

shadowEnabled

Enables the canvas shadow. The default value is false.

Declaration

shadowEnabled?: boolean;

Property Value

Type	Description
boolean	Enables the canvas shadow. The default value is false.

snapLines

Defines parameters of snap lines.

Declaration

snapLines?: ISnapLinesConfig;

Property Value

Type	Description
ISnapLinesConfig	Defines parameters of snap lines.

snapLinesVisible

Enables snap lines when the canvas opens. The default value is true.

Declaration

snapLinesVisible?: boolean;

Property Value

Type	Description
boolean	Enables snap lines when the canvas opens. The default value is true.

style

A structure defining the appearance of grips of design elements.

Declaration

style?: ICanvasStyleConfig;

Property Value

Type	Description
ICanvasStyleConfig	A structure defining the appearance of grips of design elements.

suppressOutOfRegionManipulation

Disallows working with elements outside of regions on the canvas. If true, then your users cannot manipulate items out of regions. The default value is true.

Declaration

suppressOutOfRegionManipulation?: boolean;

Property Value

Type	Description
boolean	Disallows working with elements outside of regions on the canvas. If true, then your users cannot manipulate items out of regions. The default value is true.

textEditor

Specifies the text editor mode when the WYSIWYG editor is active:

• The "default" mode enables an editor depending on the desktop or mobile platform (TextWhizz or HTML).

• The "html" mode enables an HTML-based editor, which allows you to use the Input Method Editor.

• The "none" mode enables the Classic editor with popup-boxes and the Rich text editor.

Declaration

textEditor?: TextEditorMode;

Property Value

Type	Description
TextEditorMode	Specifies the text editor mode when the WYSIWYG editor is active: The "default" mode enables an editor depending on the desktop or mobile platform (TextWhizz or HTML). The "html" mode enables an HTML-based editor, which allows you to use the Input Method Editor. The "none" mode enables the Classic editor with popup-boxes and the Rich text editor.

violationWarningButtonsEnabled

Allows for displaying the image quality warnings on the canvas. If true, then notifying icons appear on such violation warnings as low image resolution, safety line violation, region violation, and clipping text. The default value is false.

Declaration

violationWarningButtonsEnabled?: boolean;

Property Value

Type	Description
boolean	Allows for displaying the image quality warnings on the canvas. If true, then notifying icons appear on such violation warnings as low image resolution, safety line violation, region violation, and clipping text. The default value is false.

zoom

Defines the zoom parameters for the canvas.

Declaration

zoom?: IRangeParams;

Property Value

Type	Description
IRangeParams	Defines the zoom parameters for the canvas.