Skip to main content

Interface: ICanvasConfig

A structure containing canvas settings in the editor.

Example​

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

Properties​

style?​

optional style?: ICanvasStyleConfig

A structure defining the appearance of grips of design elements.

containerColor?​

optional containerColor?: string

The color of the HTML element placed under the canvas.

Deprecated​

Use the color property instead.

color?​

optional color?: string

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

shadowEnabled?​

optional shadowEnabled?: boolean

Enables the canvas shadow. The default value is false.

paddingPct?​

optional paddingPct?: number

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

pinchZoomEnabled?​

optional pinchZoomEnabled?: boolean

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

maskedPlaceholderUnderscoreEnabled?​

optional maskedPlaceholderUnderscoreEnabled?: 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.

canvasItemHoverEnabled?​

optional canvasItemHoverEnabled?: boolean

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

suppressOutOfRegionManipulation?​

optional suppressOutOfRegionManipulation?: 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.

violationWarningButtonsEnabled?​

optional violationWarningButtonsEnabled?: 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.

qualityChangeContainersEnabled?​

optional qualityChangeContainersEnabled?: 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.

floatingItemToolbarEnabled?​

optional floatingItemToolbarEnabled?: 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.

Deprecated​

Instead, you can fine-tune the floating toolbar through the ICanvasConfig.floatingToolbar object.

floatingToolbar?​

optional floatingToolbar?: 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.

autoItemSelectionEnabled?​

optional autoItemSelectionEnabled?: boolean

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

multipleObjectsUpdateOptimizationEnabled?​

optional multipleObjectsUpdateOptimizationEnabled?: boolean

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

autoPlaceholderEditModeEnabled?​

optional 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.

zoom?​

optional zoom?: IRangeParams

Defines the zoom parameters for the canvas.

rulers?​

optional rulers?: IRulersConfig

Defines parameters of rulers.

snapLines?​

optional snapLines?: ISnapLinesConfig

Defines parameters of snap lines.

rotation?​

optional rotation?: 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.

Example​

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

printZone?​

optional printZone?: IPrintZoneConfiguration

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

handlers?​

optional handlers?: IHandlersConfiguration

A structure defining the item processing rules.

Example​

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

gridVisible?​

optional gridVisible?: boolean

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

safetyLinesVisible?​

optional safetyLinesVisible?: boolean

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

snapLinesVisible?​

optional snapLinesVisible?: boolean

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

historySize?​

optional historySize?: number

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

textEditor?​

optional textEditor?: 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.

listSettings?​

optional listSettings?: IListConfiguration

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

mockupMarginWorkaroundEnabled?​

optional mockupMarginWorkaroundEnabled?: boolean

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

curvedTextBaselineDrawStates?​

optional curvedTextBaselineDrawStates?: 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.

rotatedTextInPlaceEditEnabled?​

optional rotatedTextInPlaceEditEnabled?: 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.

inactiveContainerTransparencyEnabled?​

optional inactiveContainerTransparencyEnabled?: 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?​

optional inactiveContainerTransparencyLevel?: 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.

Was this page helpful?