@aurigma/design-editor-iframe
Version:
Using this module you can embed Design Editor (a part of Customer's Canvas) to your page through the IFrame API.
1,094 lines • 52.5 kB
TypeScript
import { ModelMode, FontListMode } from "./ConfigurationTypes";
import { IAssetSources, IPerSurfaceConfiguration } from "./Ui/ConfigurationInterfacesExtended";
import { IWidgetsConfig } from "./WidgetConfigurationInterfaces";
import { IRangeParams } from "./WidgetConfigurationInterfaces";
import * as ProductInterfaces from "@aurigma/design-atoms-model/Product/Interfaces";
import { IBarcodeData } from "./Barcode";
import { IInteractiveZonesStyles, IPrintZoneConfiguration, ValidationSeverity } from "@aurigma/design-atoms/Viewer/Interfaces";
import { IFloatingItemToolbarConfig } from "@aurigma/design-atoms/Services/FloatingToolbar/FloatingToolbarManager";
import { ItemHandlerState } from "@aurigma/design-atoms/ItemHandlers";
/**
* A structure containing the hi-res output and proof images configuration.
* @remarks For details, see {@link https://customerscanvas.com/dev/editors/iframe-api/rendering/print-files.html|Configuring Print Files} topic.
* @example
* ``` js
* configuration = {
* rendering: {
* proofImageSafetyLinesEnabled: true,
* proofImageSpineAndFoldingLinesEnabled: false,
* proofImageInterpolationMode: "NearestNeighbour",
* proofImageRotateMode: "auto"
* }
* };
* ```
* @public
*/
export interface IRenderingProperty {
/** If `true`, the hi-res output for each page of a multipage product will be put in a separate file. The default value is `false`. */
hiResOutputToSeparateFiles?: boolean;
/** If `true`, enables rendering spot colors and textures to {@link https://customerscanvas.com/dev/editors/iframe-api/rendering/print-files.html|separate PDF files}. The default value is `false`. */
hiResOutputChannelContainersToSeparateFiles?: boolean;
/** To maintain the same number of pages in output files of the base design and channel containers, this parameter allows you to add {@link https://customerscanvas.com/dev/editors/iframe-api/rendering/print-files.html|empty pages} to PDF with spot colors and textures if the corresponding pages of the base design do not have channel containers. The default value is `true`. */
hiResOutputChannelContainersRenderEmptyPage?: boolean;
/** Hi-res output resolution in dots per inch (DPI). The default value is `300`. */
hiResOutputDpi?: number;
/** The type of the hi-res output. It can have one of the following values: `"pdf"`, `"jpeg"`, `"png"`, or `"tiff"`. The default value is `"pdf"`. */
hiResOutputFileFormat?: string;
/** The color space of the hi-res output. It can have one of the following values: `"rgb"`, `"cmyk"`, or `"grayscale"`. The default value is `"cmyk"`. */
hiResOutputColorSpace?: string;
/** The background color for the hi-res output. The default value is `"rgba(255,255,255,0)"`. */
hiResOutputBackgroundColor?: string;
/** The type of hi-res output compression; `"jpeg"` and `"zip"` are supported for PDF files only, whereas `"lzw"` is supported for TIFF files; it can have one of the following values: `"jpeg"`, `"zip"`, `"none"`, or `"lzw"`. The default value is `"jpeg"`. */
hiResOutputCompression?: string;
/** JPEG compression quality in percent; this parameter makes sense only for JPEG and PDF formats. For PDF it should be used along with `hiResOutputCompression="jpeg"`. The default value is `90`. */
hiResOutputJpegCompressionQuality?: number;
/** The flip mode of the hi-res outputs. Allows for flipping hi-res output images. It can have one of the following values: `"none"`, `"vertical"`, `"horizontal"`, or `"both"`. The default value is `"none"`. */
hiResOutputFlipMode?: string;
/** The rotate mode of hi-res outputs. Allows for rotating hi-res output images. It can have one of the following values: `"none"`, `"rotate90"`, `"rotate180"`, or `"rotate270"`. The default value is `"none"`. */
hiResOutputRotateMode?: string;
/** PDF metadata to be saved in the hi-res output. You can save such data as a document title, author and creator names, keywords, and a document subject. */
hiResOutputPdfMetadata?: ProductInterfaces.IPdfMetadata;
/** If `true`, displays hints for unfilled in-string placeholders in hi-res outputs. The default value is `false`. */
hiResOutputInStringPlaceholderHintsEnabled?: boolean;
/** The name of an RGB color profile for the hi-res output. By default, the editor uses the `sRGB IEC61966-2.1` profile to render hi-res outputs in RGB. */
hiResOutputRgbColorProfileName?: string;
/** The name of a CMYK color profile for the hi-res output. By default, the editor uses the `SWOP (Coated) 20%, GCR, Medium` profile to render hi-res outputs in CMYK. */
hiResOutputCmykColorProfileName?: string;
/** The name of a color profile for grayscale outputs. By default, the editor uses the `Dot Gain 30%` profile to render hi-res outputs in grayscale. */
hiResOutputGrayscaleColorProfileName?: string;
/** The name of the destination color profile for hi-res outputs. If present then cmyk-mode is enabled with the corresponding destination color profile. */
hiResOutputDestinationColorProfileName?: string;
/** The type of proof image files; it can be either `"JPEG"` or `"PNG"`. The default value is `"JPEG"`. */
proofImageFileFormat?: string;
/** Allows for drawing safety lines on proof images. The default value is `true`. */
proofImageSafetyLinesEnabled?: boolean;
/** The name of a safety line which proof images are cropped to; if there is no safety line with the given name, proof images are not cropped. The default value is an empty string. For details, see the {@link https://customerscanvas.com/dev/editors/iframe-api/rendering/proof-images.html|Configuring Proof Images} topic. */
proofImageCropSafetyLine?: string;
/** The flip mode of proof images. Allows for flipping proof images. Possible values are `"none"`, `"vertical"`, `"horizontal"`, or `"both"`. The default value is `"none"`. */
proofImageFlipMode?: string;
/** The rotate mode of proof images. Allows for rotating proof images. Possible values are `"none"`, `"auto"`, `"rotate90"`, `"rotate180"`, and `"rotate270"`. The default value is `"none"`. */
proofImageRotateMode?: string;
/** Displays spines and folding lines on proof images. The default value is `true`. */
proofImageSpineAndFoldingLinesEnabled?: boolean;
/** Displays mockups on proof images. The default value is `true`. */
proofImageMockupEnabled?: boolean;
/** Displays stub images and text hints in unfilled placeholders. The default value is `false`. */
proofImageShowStubContent?: boolean;
/** An interpolation algorithm used for resizing proof images. You can find the list of supported algorithms in the specification of the {@link https://www.graphicsmill.com/docs/gm/T_Aurigma_GraphicsMill_Transforms_ResizeInterpolationMode.htm|Aurigma Graphics Mill} library. For example, you can use `"Lanczos"`, `"NearestNeighbour"`, and others. By default, no interpolation algorithms are applied to resize proof images. */
proofImageInterpolationMode?: string;
/** If `true`, displays hints for unfilled in-string placeholders on proof images. The default value is `false`. */
proofImageInStringPlaceholderHintsEnabled?: boolean;
/** The name of an RGB color profile for proof images. By default, the editor uses the `sRGB IEC61966-2.1` profile to render proof images. */
proofImageRgbColorProfileName?: string;
}
/**
* A structure containing the grid configuration.
* @remarks For details, see the {@link https://customerscanvas.com/dev/editors/iframe-api/editor-configuration/rulers-grids-snaplines.html|Grids} topic.
* @example
* ``` js
*configuration = {
* grid: {
* stepX: 0.1,
* stepY: 0.1
* }
*};
* ```
* @public
*/
export interface IGridConfig {
/** Color of the horizontal grid lines. */
horizontalColor?: string;
/** Color of the vertical grid lines. */
verticalColor?: string;
/** Distance between vertical grid lines. */
stepX?: number;
/** Distance between horizontal grid lines. */
stepY?: number;
/** Width of grid lines in pixels. */
lineWidthPx?: number;
/** Displays the grid; if the grid is displayed it can be toggled by the **Grid** button. */
enabled?: boolean;
}
/**
* A structure containing the configuration of preflight warnings.
* @remarks For details, see the {@link https://customerscanvas.com/dev/editors/iframe-api/editor-configuration/warnings.html|Warnings} topic.
* @example
* ``` json
* {
* "violationWarningsSettings": {
* "qualityMeter": {
* "enabled": true,
* "qualityLevels": {
* "warning": "99",
* "bad": "50"
* }
* },
* "regionViolationWarningEnabled": true,
* "tolerance": 0.01,
* "safetyLines": {
* "enabled": true,
* "mode": "InsideAll"
* }
* }
* }
* ```
* @public
*/
export interface IViolationWarningsSettingsConfig {
/** Enables a warning displayed if a selected image has a resolution that is too low. */
qualityMeter?: IQualityMeterConfig;
/** Enables a warning displayed if an item crosses a safety line. */
safetyLines?: ISafetyLinesConfig;
/**
* Enables a warning displayed if an item crosses a safety line. The default value is `true`.
* @deprecated Use {@link IViolationWarningsSettingsConfig.safetyLines} instead.
*/
safetyLineViolationWarningEnabled?: boolean;
/** Enables a warning displayed if an item enters the bleed zone. */
bleedViolationWarningEnabled?: boolean;
/** Enables a warning displayed if an item goes out of a region. The default value is `true`. */
regionViolationWarningEnabled?: boolean;
/** Enables a warning displayed if the text is too long for the bounding rectangle, and some strings are clipped. The default value is `true`. */
textCropViolationWarningEnabled?: boolean;
/** Enables a warning displayed when text elements have font sizes smaller thanthe minimum required for the printing technique. The default value is `true`. */
minFontSize?: IMinFontSizeConfig;
/** Enables a warning displayed when vector elements contain embedded raster images that are not allowed in the selected container. The default value is `true`. */
rasterElements?: IRasterElementsConfig;
/** Enables a warning displayed if the Asset Manager can import PDF and SVG graphics only with the loss of colors and raster images. The default value is `true`. */
shapeViolationsEnabled?: boolean;
/** Enables warnings displayed when text elements have properties that are not supported in the {@link https://customerscanvas.com/dev/editors/concepts/text-engines.html|WYSIWYG text engine} and when the Classic text engine will render this text. The default value is `false`. */
inPlaceNotSupportedWarningEnabled?: boolean;
/** Defines a distance, in points, within which no warnings about violations of safety lines or the bleed zone will be displayed. */
tolerance?: number;
}
/**
* A structure containing the configuration of the image quality meter.
* @remarks {@link IViolationWarningsSettingsConfig} uses this interface. For details, see the {@link https://customerscanvas.com/dev/editors/iframe-api/editor-configuration/warnings.html|Warnings} topic.
* @example
* ``` json
* {
* "violationWarningsSettings": {
* "qualityMeter": {
* "enabled": true,
* "qualityLevels": {
* "warning": "99",
* "bad": "50"
* }
* }
* }
* }
* ```
* @public
*/
export interface IQualityMeterConfig {
/** Defines the image quality levels, in percent of the hi-res output DPI specified in the {@link IRenderingProperty.hiResOutputDpi} property. */
qualityLevels?: IQualityLevelsConfig;
/** If `true`, enables the quality meter and low DPI warnings. The default value is `true`. */
enabled?: boolean;
}
/**
* A structure defining the image quality levels of the Quality meter.
* @remarks {@link IQualityMeterConfig} uses this interface. For details, see the {@link https://customerscanvas.com/dev/editors/iframe-api/editor-configuration/warnings.html|Warnings} topic.
* @example
* ``` json
* {
* "violationWarningsSettings": {
* "qualityMeter": {
* "enabled": true,
* "qualityLevels": {
* "warning": "99",
* "bad": "50"
* }
* }
* }
* }
* ```
* @public
*/
export interface IQualityLevelsConfig {
/** Defines the unacceptable image quality level, comparing to the hi-res output DPI, in percent. This value should be less than or equal to the `warning` value. The default is `50`. */
bad: number;
/** Defines the warning image quality level, comparing to the hi-res output DPI, in percent. This value should be greater than or equal to the `bad` value. The default is `100`. */
warning: number;
}
/**
* A structure defining the validation of safety lines and the bleed zone.
* @remarks {@link IViolationWarningsSettingsConfig} uses this interface. You can also specify {@link IViolationWarningsSettingsConfig.tolerance|tolerance} to disable warnings about violations of safety lines or the bleed zone when an object is close enough to them. For details, see the {@link https://customerscanvas.com/dev/editors/iframe-api/editor-configuration/warnings.html|Warnings} topic.
* @example
* ``` js
* {
* "violationWarningsSettings": {
* "tolerance": 0.01,
* "safetyLines": {
* "enabled": true,
* "mode": "InsideAll"
* }
* }
* }
* ```
* @public
*/
export interface ISafetyLinesConfig {
/** If `true`, enables the bleed zone validation. The default value is `true`. */
enabled: boolean;
/**
* The validation mode, one of:
*
* - `"InsideAll"` - a warning does not appear only if the element is inside all safety lines.
*
* - `"PartiallyInsideAny"` - a warning does not appear if at least one safety zone contains the element. This is the default value.
*
* - `"InsideAny"` - a warning does not appear if at least one safety zone contains the element, however, no safety lines should intersect the element.
*/
mode: SafetyLineViolationMode;
}
/**
* Configuration for raster elements validation
* @public
*/
export interface IRasterElementsConfig {
/** If true, enables validation for raster elements */
enabled: boolean;
/** Severity level for violations */
severity: ValidationSeverity;
}
/**
* Configuration for minimum font size validation
* @public
*/
export interface IMinFontSizeConfig {
/** If true, enables validation for minimum font size */
enabled: boolean;
/** Severity level for violations */
severity: ValidationSeverity;
}
/**
* A structure containing the configuration of snap lines.
* @remarks For details, see the {@link https://customerscanvas.com/dev/editors/iframe-api/editor-configuration/rulers-grids-snaplines.html|Snap lines} topic.
* @example
* ``` js
* configuration = {
* canvas: {
* snapLines: {
* items: {
* enabled: true,
* color: "rgb(255,0,0)",
* tolerance: 5,
* priority: 2
* }
* }
* }
* };
* ```
* @public
*/
export interface ISnapLinesConfig {
/** The configuration of snap lines that clings to design elements. */
items: ISnapElementConfiguration;
/** The configuration of snap lines that clings to the product page. */
printArea: ISnapElementConfiguration;
/** The configuration of snap lines that clings to safety lines. */
safetyLines: ISnapElementConfiguration;
interactiveZones: ISnapElementConfiguration;
}
/**
* A structure containing the advanced configuration of snap lines.
* @remarks {@link ISnapLinesConfig} uses this interface. For details, see the {@link https://customerscanvas.com/dev/editors/iframe-api/editor-configuration/rulers-grids-snaplines.html|Snap lines} topic.
* @example
* ``` js
* configuration = {
* canvas: {
* gridVisible: false,
* safetyLinesVisible: true,
* // Displays snap lines when the canvas opens.
* snapLinesVisible: true,
* // Configure three types of snap lines that cling to design elements, product pages, and safety lines.
* snapLines: {
* items: {
* enabled: true,
* color: "rgb(255,0,0)",
* tolerance: 5,
* priority: 1
* },
* printArea: {
* // Disable this type of snap lines.
* enabled: false,
* color: "rgb(0,255,0)",
* tolerance: 20,
* priority: 2
* },
* safetyLines: {
* enabled: true,
* color: "rgb(0,0,255)",
* tolerance: 5,
* priority: 1
* }
* }
* },
* widgets: {
* BottomToolbar: {
* // Disable the button in the Bottom Toolbar.
* snapLinesPrintAreaCheckboxEnabled: false
* }
* }
* };
* ```
* @public
*/
export interface ISnapElementConfiguration {
/** The distance between an object and a snap line where the object clings to the line. It is measured in pixels. The default value is `5`. */
tolerance?: number;
/** The color of snap lines of this type. The default value is `"rgb(255,0,255)"`. */
color?: string;
/** Displays snap lines of this type. The default is `true`. */
enabled?: boolean;
/** The priority of these snap lines. In the case of overlapping tolerance zones, a snap line with the highest priority is displayed on the canvas. The higher this value, the higher the priority. The default value is `0`. */
priority?: number;
}
/**
* A structure containing parameters of the canvas rotation.
* @example
* ``` js
* configuration = {
* canvas: {
* rotation: {
* type: "Rotate90"
* }
* }
* };
* ```
* @public
*/
export interface IRotationConfig {
/** The angle to which the canvas is rotated when clicking the **Rotate** button in the Bottom Toolbar. This angle is a multiple of 90 degrees, and the value can be `"Rotate90"`, `"Rotate180"`, or `"Rotate270"`. The default value is `"Rotate90"`. */
type?: RotationType;
}
/**
* A structure containing the configuration of rulers.
* @remarks For details, see the {@link https://customerscanvas.com/dev/editors/iframe-api/editor-configuration/rulers-grids-snaplines.html|Rulers} topic.
* @example
* ``` js
* configuration = {
* canvas: {
* rulers: {
* origin: { X: -1.15, Y: -1.67 }
* },
* shadowEnabled: false
* }
* };
* ```
* @public
*/
export interface IRulersConfig {
/** Displays rulers. The default value is `true`. */
enabled?: boolean;
/** Rulers measurement unit. */
unit?: RulersConfigUnit;
/** The ratio of the custom unit to points; this parameter is applied only if the unit parameter described above is set to `"custom"`. */
customUnitScale?: number;
/** The point of origin relatively to the upper-left corner of the design; the coordinates are measured in the units specified by the {@link IRulersConfig.unit} parameter. */
origin?: {
X: number;
Y: number;
};
}
/**
* A structure defining the appearance of grips of design elements.
* @example
* ``` js
* configuration = {
* canvas: {
* style: {
* hover: {
* color: "green",
* width: 5,
* fillColor: "rgba(230, 250, 236, 0.5)",
* dashPattern: [2, 2],
* textColor: "green"
* }
* }
* }
* };
* ```
* @public
*/
export interface ICanvasStyleConfig {
/** One or more selected design elements.*/
selection: ISelectionStyle;
/** The object that the cursor is hovering over.*/
hover: IHoverStyle;
/** A highlighted object.*/
spotlight: ISpotlightStyle;
/** A selected area when the left mouse button is holding down (or when the touchscreen is tapped). */
rubberband: IRubberbandStyle;
interactiveZones: IInteractiveZonesStyles;
}
/**
* A structure defining the appearance of selected design elements.
* @example
* ``` json
* "canvas": {
* "style": {
* "selection": {
* "color": "red",
* "fillColor": "rgba(255,32,128,0.3)",
* "dashPattern": [1, 1, 1, 10],
* "rotationGripSize": 15,
* "rotationGripSizeOnTouchDevice": 33,
* "resizeGripColor": "pink",
* "resizeGripLineColor": "red",
* "resizeGripLineWidth": 1,
* "resizeGripLineDashPattern": [1, 10],
* "resizeGripSize": 10
* }
* }
* }
* ```
* @public
*/
export interface ISelectionStyle {
/** The color of the selection border, in the RGBA format. The default value is "rgb(48, 194, 255)". */
color: string;
/** The selection border width, in pixels. The default value is 2. */
width: number;
/** The fill color of the selection, in the RGBA format. */
fillColor: string;
/** The style of dashes of the selection border, as an array of numbers, which mean the length of the dash or gap in the dashed line. */
dashPattern: number[];
/** The diameter of the rotation grip, in pixels. The default value is 24. */
rotationGripSize: number;
/** The diameter of the rotation grip on touch devices, in pixels. The default value is 24. */
rotationGripSizeOnTouchDevice: number;
/** The fill color of the resizing grips, in the RGBA format. The default value is "rgba(255,255,255,1)". */
resizeGripColor: string;
/** The color of the resizing grip border, in the RGBA format. The default value is "rgba(255,0,0,1)". */
resizeGripLineColor: string;
/** The border width of resizing grips, in pixels. The default value is 1. */
resizeGripLineWidth: number;
/** The size of the resizing grip, in pixels. The default value is 11. */
resizeGripSize: number;
}
/**
* A structure defining the appearance of the object that the cursor is hovering over.
* @example
* ``` json
* "canvas": {
* "style": {
* "hover": {
* "color": "gold",
* "width": 4,
* "fillColor": "rgba(255,192,0,0.3)",
* "dashPattern": [1, 1, 1, 10],
* "showLabel": false,
* "textStyle": "Italic Bold 14px Flomaster",
* "textColor": "rgb(192,128,0)"
* }
* }
* }
* ```
* @public
*/
export interface IHoverStyle {
/** The color of the selection border, in the RGBA format. The default value is "rgba(255,0,0,1)". */
color: string;
/** The selection border width, in pixels. The default value is 2. */
width: number;
/** The fill color of the selection, in the RGBA format. */
fillColor: string;
/** If true, displays the design element name. The default value is true. */
showLabel: boolean;
/** The text style of the design element name. The default value is "normal 12px Roboto". */
textStyle: string;
/** The color of the design element name, in the RGBA format. */
textColor: string;
/** The style of dashes of the selection border, as an array of numbers, which mean the length of the dash or gap in the dashed line. */
dashPattern: number[];
}
/**
* A structure defining the appearance of highlighted objects.
* @example
* ``` json
* "canvas": {
* "style": {
* "spotlight": {
* "color": "orange",
* "width": 1,
* "fillColor": "rgba(0,192,0,0.3)",
* "dashPattern": [1, 3, 2],
* "showLabel": false,
* "textColor": "rgb(0,0,192)"
* }
* }
* }
* ```
* @public
*/
export interface ISpotlightStyle {
/** The color of the selection border, in the RGBA format. The default value is "rgba(255,0,0,1)". */
color: string;
/** The selection border width, in pixels. The default value is 2. */
width: number;
/** The fill color of the selection, in the RGBA format. */
fillColor: string;
/** If true, displays the design element name. The default value is true. */
showLabel: boolean;
/** The text style of the design element name. The default value is "normal 12px Roboto". */
textStyle: string;
/** The color of the design element name, in the RGBA format. */
textColor: string;
/** The style of dashes of the selection border, as an array of numbers, which mean the length of the dash or gap in the dashed line. */
dashPattern: number[];
}
/**
* A structure defining the appearance of a selected area when the left mouse button is holding down.
* @public
*/
export interface IRubberbandStyle {
/** The color of the selection border, in the RGBA format. The default value is "rgba(0,0,0,1)". */
color: string;
/** The selection border width, in pixels. The default value is 1. */
width: number;
/** The fill color of the selection, in the RGBA format. The default value is "rgba(0,0,0,0)". */
fillColor: string;
/** The style of dashes of the selection border, as an array of numbers, which mean the length of the dash or gap in the dashed line. By default, the array is [2, 2]. */
dashPattern: number[];
}
/**
* A structure containing canvas settings in the editor.
* @example
* ``` js
* configuration = {
* canvas: {
* shadowEnabled: false,
* autoItemSelectionEnabled: true,
* floatingToolbar: {
* enabled: true,
* mode: "Inside",
* buttons: [ "Handle", "Select", "Edit" ]
* }
* }
* };
* ```
* @public
*/
export interface ICanvasConfig {
/** A structure defining the appearance of grips of design elements. */
style?: ICanvasStyleConfig;
/** The color of the HTML element placed under the canvas.
* @deprecated Use the `color` property instead.
*/
containerColor?: string;
/** The canvas color; this color is visible if a transparent object is placed on the canvas. */
color?: string;
/** Enables the canvas shadow. The default value is `false`. */
shadowEnabled?: boolean;
/** Padding between the canvas and the canvas viewer, in percent. */
paddingPct?: number;
/** Allows users to zoom the canvas using the pinch gesture on mobile devices. The default value is `true`. */
pinchZoomEnabled?: 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`. */
maskedPlaceholderUnderscoreEnabled?: boolean;
/** Enables text labels for editable design elements. The default value is `false`. For details, see the {@link https://customerscanvas.com/dev/editors/iframe-api/editor-configuration/element-names.html|Element Names} topic. */
canvasItemHoverEnabled?: 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`. */
suppressOutOfRegionManipulation?: 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`. */
violationWarningButtonsEnabled?: 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`. */
qualityChangeContainersEnabled?: 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 {@link ICanvasConfig.floatingToolbar} object.
*/
floatingItemToolbarEnabled?: boolean;
/** 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`. */
floatingToolbar?: IFloatingItemToolbarConfig;
/** Allows for auto selecting the first design element in the advanced editing mode. The default value is `false`. */
autoItemSelectionEnabled?: boolean;
/** Optimizes the load time of templates consisting of a large number of layers. The default value is `true`. */
multipleObjectsUpdateOptimizationEnabled?: 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`. */
autoPlaceholderEditModeEnabled?: boolean;
/** Defines the zoom parameters for the canvas. */
zoom?: IRangeParams;
/** Defines parameters of rulers. */
rulers?: IRulersConfig;
/** Defines parameters of snap lines. */
snapLines?: ISnapLinesConfig;
/**
* 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 You can enable the rotation at 180 degrees as follows:
* ``` js
* configuration = {
* canvas: {
* rotation: {
* type: "Rotate180"
* }
* }
* };
* ```
*/
rotation?: IRotationConfig;
/**
* Defines the appearance of the bleed zone. For details, see {@link https://customerscanvas.com/dev/editors/iframe-api/product-definition/bleeds-and-safety-zone.html|Changing the Appearance of the Bleed Zone}.
*/
printZone?: IPrintZoneConfiguration;
/**
* A structure defining the item processing rules.
* @example
* ``` js
* configuration = {
* canvas: {
* handlers: {
* placeholderEditingViewMode: "normal"
* }
* }
* };
* ```
*/
handlers?: IHandlersConfiguration;
/** Enables the grid when the canvas opens. The default value is `false`. */
gridVisible?: boolean;
/** Enables safety lines when the canvas opens. The default value is `true`. */
safetyLinesVisible?: boolean;
/** Enables snap lines when the canvas opens. The default value is `true`. */
snapLinesVisible?: boolean;
/** The number of actions in the Design Editor that can be reverted by using the **Undo** button. The default value is `10`. */
historySize?: number;
/**
* 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.
*/
textEditor?: TextEditorMode;
/**
* A structure containing the configuration of text lists. For more details, see {@link https://customerscanvas.com/dev/editors/iframe-api/editor-configuration/lists.html|Text lists}.
*/
listSettings?: IListConfiguration;
/** Enables white margin around design to prevent drawing of phantom 1 pixel lines when the design has the same size as the mockup. */
mockupMarginWorkaroundEnabled?: boolean;
/** 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.
*/
curvedTextBaselineDrawStates?: ItemHandlerState[];
/** 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. */
rotatedTextInPlaceEditEnabled?: boolean;
/** If not defined or `true`, displays the content of spot containers transparent. The default value is `true`. For more details, refer to the {@link https://customerscanvas.com/dev/editors/iframe-api/product-definition/post-press-finishing-layers.html|Post Press Finishing} topic. */
inactiveContainerTransparencyEnabled?: boolean;
/** 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 {@link https://customerscanvas.com/dev/editors/iframe-api/product-definition/post-press-finishing-layers.html|Post Press Finishing} topic. */
inactiveContainerTransparencyLevel?: number;
}
/**
* The configuration of new design elements that the user will add to the product.
* @remarks For details, see the {@link https://customerscanvas.com/dev/editors/iframe-api/editor-configuration/toolbox.html|Toolbox} topic.
* @example
* ``` js
* var configuration = {
* defaultItemsConfig: {
* text: {
* font: {
* postScriptName: "Impact",
* size: 33,
* fauxBold: true,
* fauxItalic: true
* },
* color: "rgb(0,255,255)",
* verticalAlignment: "center",
* isVertical: true,
* tracking: 27,
* leading: 125
* },
* line: {
* width: 3,
* color: "rgb(255,0,0)",
* linePermissions: {
* allowChangeLineWidth: false
* }
* },
* image: {
* manipulationPermissions: {
* allowMoveHorizontal: false,
* allowMoveVertical: false,
* resizeGrips: {
* edge: true,
* corner: ["Arbitrary"]
* }
* },
* themeBinding: {
* img: "main"
* }
* }
* }
* };
*
* var editor = await CustomersCanvas.IframeApi.loadEditor(iframe, productDefinition, configuration);
* ```
* @public
*/
export interface IDefaultItemsConfig {
/** Default parameters of images, which users add to the canvas. */
image?: IGalleryItemConfig;
/** Default parameters of custom shapes, which users add to the canvas. */
shape?: IShapeItemData;
/** Default parameters of barcodes, which users add to the canvas. */
barcode?: IBarcodeItemData;
/** Default parameters of text, which users add to the canvas. */
text?: ITextItemData;
/** Default parameters of rich formatted text elements, which users add to the canvas. */
richText?: IRichTextData;
/** Default parameters of arched text elements, which users add to the canvas. */
archedText?: IArchedTextItemData;
/** Default parameters of lines, which users add to the canvas. */
line?: ILineItemData;
/** Default parameters of rectangles, which users add to the canvas. */
rectangle?: IRectangleItemData;
/** Default parameters of ellipses, which users add to the canvas. */
ellipse?: IEllipseItemData;
/** Default parameters of image placeholders, which users add to the canvas. */
placeholder?: IPlaceholderItemData;
/** Default parameters of groups, which users add to the canvas. */
group?: IGroupItemData;
/** Default parameters of clipart, which users add to the canvas. */
clipart?: IClipartItemData;
}
/**
* A configuration of watermark text.
* @remarks {@link IWatermarkConfig} uses this interface.
* @example
* ``` js
* configuration = {
* watermark: {
* text: {
* text: "watermark",
* fontSettings: {
* postScriptName: "LucidaSans-Italic",
* size: 14,
* fauxBold: false,
* fauxItalic: false
* },
* scale: 0.28,
* opacity: 0.5
* },
* visibility: {
* proof: true,
* canvas: true
* }
* }
* };
* ```
* @public
*/
export interface IWatermarkTextConfig {
/** The text of the watermark. */
text?: string;
/** The font settings of watermark text. */
fontSettings?: IFontSettings;
/** The scale of watermark text. The default value is `0.28`. */
scale?: number;
/** The opacity of watermark text. The default value is `0.1`. */
opacity?: number;
}
/**
* A configuration of watermark image.
* @remarks {@link IWatermarkConfig} uses this interface.
* @example
* ``` js
* configuration = {
* watermark: {
* image: {
* name: "watermark.png",
* repeat: true,
* opacity: 0.1
* },
* visibility: {
* proof: true,
* canvas: true
* }
* }
* };
* ```
* @public
*/
export interface IWatermarkImageConfig {
/** The file name of the watermark image. This file is in the `~/assets/helpers/` folder. */
name?: string;
/** Enables repeating the watermark image on the canvas and proof images. If `false`, the image is shown in the center of the canvas. The default value is `true`. */
repeat?: boolean;
/** The opacity of the watermark image. The default value is `0.1`. */
opacity?: number;
}
/**
* A configuration of watermark visibility.
* @remarks {@link IWatermarkConfig} uses this interface.
* @example
* ``` js
* configuration = {
* watermark: {
* image: {
* name: "watermark.png",
* repeat: true,
* opacity: 0.1
* },
* visibility: {
* proof: true,
* canvas: true
* }
* }
* };
* ```
* @public
*/
export interface IWatermarkVisibilityConfig {
/** Enables the watermark on the canvas. The default value is `false`. */
canvas?: boolean;
/** Enables the watermark on the proof images. The default value is `false`. */
proof?: boolean;
}
/**
* A configuration of watermarks.
* @remarks For more details, see the {@link https://customerscanvas.com/dev/editors/iframe-api/rendering/watermarks.html|Watermarks} topic.
* @example
* ``` js
* configuration = {
* watermark: {
* text: {
* text: "watermark",
* fontSettings: {
* postScriptName: "LucidaSans-Italic",
* size: 14,
* fauxBold: false,
* fauxItalic: false
* },
* scale: 0.28,
* opacity: 0.5
* },
* image: {
* name: "watermark.png",
* repeat: true,
* opacity: 0.1
* },
* visibility: {
* proof: true,
* canvas: true
* }
* }
* };
* ```
* @public
*/
export interface IWatermarkConfig {
/** Configures the text of the watermark. */
text?: IWatermarkTextConfig;
/** Configures the image of the watermark. */
image?: IWatermarkImageConfig;
/** Configures visibility of the watermark. */
visibility?: IWatermarkVisibilityConfig;
}
/**
* A structure defining the appearance of stub barcode placeholders.
* @example
* ``` js
* configuration = {
* stubImages: {
* barcode: {
* "postScriptName": "LucidaSans-Italic",
* "text": "Define a Barcode"
* }
* }
* };
*```
* @public
*/
export interface IStubImagesConfig {
/** Configures the message displayed on stub images. */
barcode?: IStubImagesBarcodeConfig;
}
/**
* A configuration of messages in stub barcode placeholders.
* @example
* ``` js
* configuration = {
* stubImages: {
* barcode: {
* "postScriptName": "LucidaSans-Italic",
* "text": "Define a Barcode",
* "errorText": "ERROR"
* }
* }
* };
*```
* @public
*/
export interface IStubImagesBarcodeConfig {
/** The message to be displayed on stub barcodes. The default value is `"Sample"`. */
text?: string;
/** The message to be displayed on barcodes with invalid content. The default value is `"Error"`. */
errorText?: string;
/** The font name of text. The default value is `"Roboto-Regular"`. */
postScriptName?: string;
}
import { IGalleryItemConfig } from "./DefaultConfigurationInterfaces";
import { IShapeItemData, IRichTextData, ILineItemData, IRectangleItemData, IEllipseItemData, IPlaceholderItemData, IBarcodeItemData, ITextItemData, IArchedTextItemData, IGroupItemData, IClipartItemData } from "@aurigma/design-atoms/Services/ItemsDataApplierInterfaces";
import { RulersConfigUnit, IHandlersConfiguration, TextEditorMode, SafetyLineViolationMode, IListConfiguration } from "@aurigma/design-atoms/Viewer/Interfaces";
/**
* The basic structure for {@link IConfiguration}, defines the editor settings.
* @public
*/
export interface IUiConfig {
/** A default interface language. The default value is `"en"`. For details, see the {@link https://customerscanvas.com/dev/editors/iframe-api/customization/localization.html|Localization} topic. */
defaultLanguage?: string;
/** A structure containing canvas settings. */
canvas?: ICanvasConfig;
/** The grid configuration. For details, see the {@link https://customerscanvas.com/dev/editors/iframe-api/editor-configuration/rulers-grids-snaplines.html|Grid} topic. */
grid?: IGridConfig;
/** The watermark configuration. */
watermark?: IWatermarkConfig;
/** A name of a safety line to which an item will be aligned; if there is no safety line with the name, then the item will be aligned to the first safety line in the safety lines array. The default value is `"bleed"`. */
alignToSafetyLineName?: string;
/** The initial mode of the editor, either `"Simple"` or `"Advanced"`. The default value is `"Simple"`. */
initialMode?: ModelMode.ModelModeType;
/** The edit mode allowing you to hide all interface elements but the canvas. The default value is `false`. */
canvasOnlyMode?: boolean;
/** Displays the **Load my info** button. The default value is `false`. For details, see the {@link https://customerscanvas.com/dev/editors/iframe-api/howto/user-info.html|Populating designs with user info} topic. */
loadUserInfoButtonEnabled?: boolean;
/** If `true`, then a product is automatically populated with predefined data when it is loaded into the editor; the **Load my info** button is not displayed. The default value is `false`. For details, see the {@link https://customerscanvas.com/dev/editors/iframe-api/howto/user-info.html|Populating designs with user info} topic. */
autoLoadUserInfo?: boolean;
/** Enables the Image Editor. The default value is `true`. */
imageEditorEnabled?: boolean;
/** Enables the confirmation dialog when deleting an item from a product. The default value is `false`. */
deleteItemConfirmationEnabled?: boolean;
/** Enables the confirmation dialog when reverting a product to its initial state. The default value is `true`. */
revertProductConfirmationEnabled?: boolean;
/** Enables restoring a product state when the design page is reloaded in the browser; if `false`, the product is reverted on reloading. The default value is `false`. */
restoreProductOnReloadEnabled?: boolean;
/** Enables spell checking for product text fields and for the Rich text dialog. The default value is `false`. */
spellCheckEnabled?: boolean;
/** A symbol marking design elements as variable items. By default, it is `"%"`. */
variableItemsMaskSymbol?: string;
/** A list of fonts available for a user in the editor; all these fonts should be uploaded to the font folder on server, by default it is `~/Fonts/`. For details, see the {@link https://customerscanvas.com/dev/editors/iframe-api/editor-configuration/font-list.html|Font list} topic. */
fontList?: string[] | {
appFonts?: string[];
};
/** A mode of the font list, either `"Simple"` or `"Advanced"`. The simple mode allows a user to select font and set font size; the advanced mode also provides an ability to change font style. The default value is `"Advanced"`. */
fontListMode?: FontListMode.FontListModeType;
/** The configuration of design elements being added to a product. For details, see the {@link https://customerscanvas.com/dev/editors/iframe-api/editor-configuration/toolbox.html|Toolbox} topic. */
defaultItemsConfig?: IDefaultItemsConfig;
/** The configuration of the editor widgets. For details, see the {@link https://customerscanvas.com/dev/editors/iframe-api/editor-configuration/ui-overview.html|UI overview} topic. */
widgets?: IWidgetsConfig;
/** Data to populate the loaded product template with. */
userInfo?: {
[key: string]: string | IBarcodeData;
};
/** A configuration of widgets, that is defined for separate surfaces. */
perSurfaceConfiguration?: IPerSurfaceConfiguration;
/** A predefined set of color themes and text styles for the product. */
productThemes?: {
[name: string]: IProductThemeConfig;
};
/** Allows for specifying the default color theme. */
defaultProductTheme?: string;
/** Asset sources defined for the {@link https://customerscanvas.com/dev/editors/iframe-api/editor-configuration/image-manager.html|Asset Manager}. */
assetSources?: IAssetSources;
enableTrace?: boolean;
/** Defines the primary theme color and a new image for the standard preloader. */
themeConfiguration?: IThemeConfiguration;
}
/**
* A structure containing the properties that redefine the appearance of the UI theme.
* @example
* ``` js
* let product = {
* "surfaces": { designFolder: "photobook" }
* };
*
* let config = {
* "themeConfiguration": {
* "primaryColor": "#0090FF",
* "logo": "https://example.com/logo.svg"
* }
* };
*
* var editor = await CustomersCanvas.IframeApi.loadEditor(
* document.getElementById("editorFrame"), product, config);
* ```
* @public
*/
export interface IThemeConfiguration {
/** The primary color of the UI theme, a string in the CSS format. For example, `"#78187b"` or `"rgb(120,24,123)"`. */
primaryColor: string;
/**
* The image of the standard preloader. You can define it through:
*
* - a URL, for example: `https://example.com/logo.svg`
*
* - an SVG element, for example: `<svg viewBox="0 0 32 32" ... fill="#0090FF"/></svg>`
*
* - a base64 string, for example: `data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiIGhldD0iMzIi...dmc+`
*/
logo: string;
/** The preloader color of the UI theme, a string in the CSS format. For example, `"#78187b"` or `"rgb(120,24,123)"`.*/
preloaderColor: string;
}
/**
* A structure containing the settings of the hi-res output and proof images.
* @example
* ``` js
* configuration = {
* rendering: {
* proofImageSafetyLinesEnabled: true,
* proofImageSpineAndFoldingLinesEnabled: false,
* proofImageInterpolationMode: "NearestNeighbour",
* proofImageRotateMode: "auto"
* }
* };
* ```
* @public
*/
export interface IPublicApiConfig {
/** The {@link https://customerscanvas.com/dev/editors/iframe-api/rendering/print-files.html|hi-res output} and {@link https://customerscanvas.com/dev/editors/iframe-api/rendering/proof-images.html|proof images} configuration. */
rendering?: IRenderingProperty;
}
/**
* A structure containing the web-to-print editor configuration.
* @remarks Extends {@link IUiConfig}.
* @example
* ``` js
* // Defining the editor configuration.
* var configuration = {
* canvas: {
* color: "grey"
* },
* grid: {
* stepX: 0.5,
* stepY: 0.5
* },
* initialMode: "Advanced",
* customStyle: "mySiteStyles",
* rendering: {
* proofImageMockupEnabled: false
* },
* userInfo: {
* "FirstName": "John",
* "LastName": "Wood",
* "Phone": "1234567890"
* },
* widgets: {
* ObjectInspector: {
* dndEnabled: false
* }
* },
* tokenId: "95c16577-75fe-4145-87ff-c0ba49d1a554"
* };
*
* // Loading the editor with