ICanvasConfig Interface

A structure containing canvas settings in the editor.

example
configuration = {
    canvas: {
        rulers: {
            origin: {
                X: -1.15,
                Y: -1.67
            }
        },
        shadowEnabled: false,
        floatingItemToolbarEnabled: true,
        autoItemSelectionEnabled: true
    }
};

Properties

Optional autoItemSelectionEnabled

autoItemSelectionEnabled: boolean

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

Optional autoPlaceholderEditModeEnabled

autoPlaceholderEditModeEnabled: 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.

Optional canvasItemHoverEnabled

canvasItemHoverEnabled: boolean

Enables text labels for design elements. The default value is false.

Optional color

color: string

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

Optional containerColor

containerColor: string

The color of the HTML element placed under the canvas.

Optional floatingItemToolbarEnabled

floatingItemToolbarEnabled: boolean

Enables the floating toolbar with the Select Image, Edit, and Delete buttons for a highlighted design element right on the canvas. Select Image appears for images and image placeholders. The Edit button allows for editing images and the content of text elements and image placeholders. You can configure this toolbar by using IItemToolbarPermissionsConfig. The default value is false.

Optional maskedPlaceholderUnderscoreEnabled

maskedPlaceholderUnderscoreEnabled: boolean

Enables displaying underscores in blank masked text layers. If it is 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.

Optional multipleObjectsUpdateOptimizationEnabled

multipleObjectsUpdateOptimizationEnabled: boolean

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

Optional paddingPct

paddingPct: number

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

Optional pinchZoomEnabled

pinchZoomEnabled: boolean

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

Optional qualityChangeContainersEnabled

qualityChangeContainersEnabled: boolean

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

Optional rulers

rulers: IRulersConfig

A structure containing the configuration of rulers. For details, see the Markings topic.

Optional shadowEnabled

shadowEnabled: boolean

Enables the product shadow.

Optional showGrid

showGrid: boolean

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

Optional showSafetyLines

showSafetyLines: boolean

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

Optional showSnapLines

showSnapLines: boolean

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

Optional snapLines

snapLines: ISnapLinesConfig

A structure containing the configuration of snap lines.

Optional suppressOutOfRegionManipulation

suppressOutOfRegionManipulation: boolean

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

Optional violationWarningButtonsEnabled

violationWarningButtonsEnabled: boolean

Allows for displaying the image quality warnings on the canvas. If it is 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.

Optional zoomStep

zoomStep: number

The step of increasing or decreasing the zoom level.