@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,127 lines (1,126 loc) • 48.4 kB
TypeScript
import { FinishButtonMode, ObjectInspectorPosition, BarcodeType, InStringPlaceholderMode } from "./ConfigurationTypes";
import { IGalleryDefaultConfig } from "./DefaultConfigurationInterfaces";
import * as ColorPicker from "./Ui/IColorPickerConfigParsed";
import { IAssetManagerConfig, ICheckboxConfig, TextRectangleFitMode } from "./Ui/WidgetConfigurationInterfacesExtended";
import { ButtonType } from "./Ui/IToolboxConfigParsed";
/**
* The configuration of the Finish design button.
* @example
* ``` js
* configuration = {
* widgets: {
* FinishButton: {
* mode: "Disabled"
* }
* }
* };
* ```
* @public
*/
export interface IFinishButtonConfig {
/** Defines the behavior of the **Finish design** button:
*
* - `"Disabled"` hides the button and enables the callback that could be handled.
*
* - `"Download"` is a debug mode that shows the button and disables the callback, but allows downloading the hi-res output.
*/
mode: FinishButtonMode.FinishButtonModeType;
}
/**
* A structure defining the configuration of the navigation area in the Bottom toolbar.
* @example
* ``` js
* configuration = {
* widgets: {
* BottomToolbar: {
* zoomValueEnabled: false,
* zoomButtonsEnabled: false,
* fullWindowButtonEnabled: false,
* fullScreenButtonEnabled: false,
*
* // Enable only page names in the navigation area by default.
* surfaceSwitch: {
* enabled: true,
* showThumbnails: false,
* showSurfaceNames: true,
* scrollPageButtonsEnabled: false,
* toggleSurfaceButtonsEnabled: false,
* firstAndLastButtonsEnabled: false,
* specificForSurfaceCount: {
* // Disable the navigation area for single-page products.
* 1: {
* enabled: false
* },
* // Enable only page names for two-page products.
* 2: {
* showSurfaceNames: true,
* showThumbnails: false,
* scrollPageButtonsEnabled: false,
* toggleSurfaceButtonsEnabled: false,
* firstAndLastButtonsEnabled: false
* }
* }
* }
* }
* }
* };
* ```
* @public
*/
export interface ISurfaceSwitchConfig {
/** Enables the pagination control. The default value is `true`. */
enabled?: boolean;
/** Displays page thumbnails. The default value is `false`. */
showThumbnails?: boolean;
/** Displays page names in the pagination control. If it is `true` and you name your product surfaces, then these names are shown in the navigation area. Otherwise, surface indexes are shown. The default value is `false`. */
showSurfaceNames?: boolean;
/** Displays the **Next** and **Previous** buttons, which allow for scrolling the page selector. The default value is `true`. */
scrollPageButtonsEnabled?: boolean;
/** Displays the **Next** and **Previous** buttons, which allow for switching between pages. The default value is `false`. */
toggleSurfaceButtonsEnabled?: boolean;
/** Displays the **First** and **Last** buttons for the page navigation. The default value is `true`. */
firstAndLastButtonsEnabled?: boolean;
/** Defines the pagination control for products consisting of the certain number of pages. There are the default settings for single-page, two-page, and three-page products. */
specificForSurfaceCount?: {
[countOfSurfaces: string]: ISurfaceSwitchConfig;
};
}
/**
* A structure containing the configuration of the Bottom toolbar.
* @example
* This is how you can disable all the buttons and enable only page names in the navigation area.
* ``` js
* const productDefinition = {
* surfaces: [
* {
* name: "Left",
* printAreas: [{ designFile: "TriFold_Side1" }]
* },
* {
* name: "Middle",
* printAreas: [{ designFile: "TriFold_Side2" }]
* },
* {
* name: "Right",
* printAreas: [{ designFile: "TriFold_Side3" }]
* }
* ]
* };
*
* const configuration = {
* widgets: {
* BottomToolbar: {
* // Disable buttons in the Bottom Toolbar.
* zoomValueEnabled: false,
* zoomButtonsEnabled: false,
* rotateButtonEnabled: false,
* fullScreenButtonEnabled: false,
* safetyLinesCheckboxEnabled: false,
* previewModeCheckboxEnabled: false,
* gridCheckboxEnabled: false,
* snapLinesItemsCheckboxEnabled: false,
* snapLinesPrintAreaCheckboxEnabled: false,
* snapLinesSafetyLinesCheckboxEnabled: false,
* // Enable only page names in the navigation area.
* surfaceSwitch: {
* enabled: true,
* showThumbnails: false,
* showSurfaceNames: true,
* scrollPageButtonsEnabled: false,
* toggleSurfaceButtonsEnabled: false,
* firstAndLastButtonsEnabled: false
* }
* }
* }
* };
*
* CustomersCanvas.IframeApi.loadEditor(iframe, productDefinition, configuration);
* ```
* @public
*/
export interface IBottomToolbarConfig {
/** Displays the Full window button. The default value is `true`. */
fullWindowButtonEnabled?: boolean;
/** Displays the Full screen button; the full-screen mode is not supported in Internet Explorer and Safari, so the related button is not displayed in these browsers even if it is enabled. The default value is `true`. */
fullScreenButtonEnabled?: boolean;
/** Displays current zoom value. The default value is `true`. */
zoomValueEnabled?: boolean;
/** Displays the Zoom in and Zoom out buttons. The default value is `true`. */
zoomButtonsEnabled?: boolean;
/** Displays the Rotate button to rotate the canvas at the angle predefined in {@link IRotationConfig}. The default value is `false`. */
rotateButtonEnabled?: boolean;
/** Displays the safety lines toggle button. The default value is `true`. */
safetyLinesCheckboxEnabled?: boolean | ICheckboxConfig;
/** Displays the **Preview mode** check box on the **Marking** menu. The default value is `false`. */
previewModeCheckboxEnabled?: boolean | ICheckboxConfig;
/** Displays the grid toggle button. The default value is `true`. */
gridCheckboxEnabled?: boolean | ICheckboxConfig;
/** Displays the **Snap to page** check box on the **Marking** menu. The default value is `true`. */
snapLinesPrintAreaCheckboxEnabled?: boolean | ICheckboxConfig;
/** Displays the **Snap to safety lines** check box on the **Marking** menu. The default value is `true`. */
snapLinesSafetyLinesCheckboxEnabled?: boolean | ICheckboxConfig;
/** Displays the **Snap to items** check box on the **Marking** menu. The default value is `true`. */
snapLinesItemsCheckboxEnabled?: boolean | ICheckboxConfig;
/** Displays the **Snap to interactive zones** check box on the **Marking** menu. The default value is `true`. */
snapLinesInteractiveZonesCheckboxEnabled?: boolean | ICheckboxConfig;
/** Defines the pagination control in the Bottom toolbar. */
surfaceSwitch?: ISurfaceSwitchConfig;
/** Displays the marking menu flat. */
flatMarkingMenuEnabled?: boolean;
}
/**
* A structure for common settings of widgets.
* @example
* ```js
* configuration = {
* widgets: {
* common: {
* fontSize: { max: 50, min: 5, step: 5 },
* tracking: { max: 100, min: -50, step: 25 },
* leading: { max: 50, min: 5, step: 5 }
* }
* }
* };
* ```
* @public
*/
export interface ICommonConfig {
/** Sets font size range. */
fontSize?: IRangeParams;
/** Sets font tracking range. */
tracking?: IRangeParams;
/** Sets font leading range. */
leading?: IRangeParams;
/** If `true`, allows for changing the rich text format. This parameter is applied to text layers with the `<TATF_null>` marker. The default value is `true`. */
textFormattingEnabled?: boolean;
/** Specifies default settings of the Gallery. */
gallery?: IGalleryDefaultConfig;
}
/**
* A structure defining the grips that appear on bounding rectangles.
* @example You can enable proportional resizing on dragging the corner grips and arbitrarily resizing on dragging the corner griips with holding the `Shift` key as follows:
* ```json
* {
* "defaultItemsConfig": {
* "image": {
* "manipulationPermissions": {
* "resizeGrips": {
* "corner": ["Proportional", "Arbitrary"],
* "edge": false
* }
* }
* }
* }
* }
* ```
* @public
*/
export interface IResizeGripsPermissions {
/** Enables side grips to resize elements arbitrarily. */
edge: boolean;
/** An array of one or two elements enabling corner grips. The array elements are either `"Proportional"` or `"Arbitrary"`. The second element of the `corner` array defines how design elements should be resized when the user drags corner grips while holding down the Shift key. To disallow any rotation, pass an empty array. */
corner: string[];
}
/**
* A structure defining the manipulation permissions.
* @example You can prevent elements from moving horizontally and enable corner grips with the following config.
* ```json
* {
* "defaultItemsConfig": {
* "rectangle": {
* "manipulationPermissions": {
* "allowMoveHorizontal": false,
* "resizeGrips": {
* "edge": false,
* "corner": ["Proportional"]
* }
* }
* }
* }
* }
* ```
* @public
*/
export interface IManipulationPermissions {
/** Allows deleting elements. The default value is `true`. */
allowDelete?: boolean;
/** Allows moving elements horizontally. The default value is `true`. */
allowMoveHorizontal?: boolean;
/** Allows moving elements vertically. The default value is `true`. */
allowMoveVertical?: boolean;
/** Allows rotating elements. The default value is `true`. */
allowRotate?: boolean;
/** Allows dragging the content of image placeholders when they have the `<PH><MAMH_f><MAMV_f>` markers. The default value is `true`. */
allowDragAndDrop?: boolean;
/** Enables the corner and side grips to resize elements. */
resizeGrips?: IResizeGripsPermissions;
}
/**
* @deprecated Use {@link (IToolboxConfig:interface)} instead.
* @internal
*/
export interface ILeftToolbarConfig {
imageButtonEnabled?: boolean;
textButtonEnabled?: boolean;
lineButtonEnabled?: boolean;
rectangleButtonEnabled?: boolean;
ellipseButtonEnabled?: boolean;
linearBarcodeButtonEnabled?: boolean;
qrCodeButtonEnabled?: boolean;
richTextButtonEnabled?: boolean;
disabled?: boolean;
buttons?: ILeftToolbarConfig.ButtonType[];
}
/** @internal */
export declare namespace ILeftToolbarConfig {
interface IItem {
translationKey: string;
translationKeyTitle: string;
iconClass: string;
}
interface IButton extends IItem {
buttons: ButtonType[];
}
interface ISingleButton extends IItem {
action: ButtonAction;
}
interface IGalleryButton extends ISingleButton {
tabs: string[];
defaultTabName: string;
}
type ButtonAction =
/** Qr codes */
"QrCode" | "LinearBarcode" | "DataMatrixBarcode" |
/** Shapes */
"Line" | "Rectangle" | "Ellipse" |
/** Text items */
"Text" | "RichText" |
/** Galleries */
"Image" | "Background" | "Layout" | "FillPlaceholders" | "State";
type SingleButtonType = ISingleButton | IGalleryButton | ButtonAction;
type ButtonType = IButton | SingleButtonType;
}
/**
* A structure containing the configuration of the Object inspector.
* @example
* ``` js
* configuration = {
* widgets: {
* ObjectInspector: {
* bgItemEnabled: false,
* dndEnabled: false,
* toggleEnabled: true,
* inStringPlaceholderMode: "Single",
* violationWarningsEnabled: false
* }
* }
* };
* ```
* @public
*/
export interface IObjectInspectorConfig {
/** Displays the background element in the Object inspector. The default value is `true`. */
bgItemEnabled?: boolean;
/** Allows your users to drag-and-drop layers in the Object inspector. The default value is `true`. */
dndEnabled?: boolean;
/** Enables preflight of user designs and displaying warnings in the Object inspector. The default value is `true`. For details, see {@link https://customerscanvas.com/dev/editors/iframe-api/editor-configuration/ui-overview.html|User interface overview}. */
violationWarningsEnabled?: boolean;
/** Enables variable data printing for texts and images. If `true`, you can mark design elements as variable items in the editor and then customize them in your e-commerce system. The default value is `false`. */
variableItemsEnabled?: boolean;
/** Enables the message displayed in the Object inspector when loaded template has no customizable layers. */
emptyListTextEnabled?: boolean;
/** Defines where the Object Inspector shows - on the left or on the right side of the canvas. The default value is `Left`. */
position?: ObjectInspectorPosition.ObjectInspectorPositionType;
/** Allows you to show the Object Inspector above the canvas. If `true`, the Object Inspector appears above the canvas when you work on small-screen devices; otherwise, it appears from the left side of the canvas. The default value is `true`. */
aboveCanvasOnSmallScreenEnabled?: boolean;
/** Allows for hiding the Object Inspector. The default value is `false`. */
isHidden?: boolean;
/** Enables the Toggle button, which allows your users to toggle the Object Inspector. The default value is `false`. */
toggleEnabled?: boolean;
/** Defines how the Object Inspector displays in-string placeholders. In the `"Single"` mode, all items appear at the top of the item list. In the `"Multiple"` mode, linked in-string placeholders appear separately and keep the order defined in PSD templates. The default value is `"Multiple"`. */
inStringPlaceholderMode?: InStringPlaceholderMode.InStringPlaceholderModeType;
/** Enables text labels for design elements in the Object Inspector. 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. */
showItemName?: boolean;
/** If `true`, the user can rename group names in the Object Inspector. The default value is `true`. */
groupRenameEnabled?: boolean;
/** If `true`, automatically expands groups in the Object Inspector when loading a product. If `false`, groups of design elements appear collapsed. The default value is `false`. */
groupsExpandedByDefault?: boolean;
/** If `true`, allows the user to expand all nested groups when clicking the parent group in the Object Inspector. If `false`, the user has to click the groups one by one to expand them all. The value in the config is `false`. */
expandNestedGroups?: boolean;
}
/**
* A structure defining commands in the Item menu.
* @example
* ``` js
* configuration = {
* widgets: {
* ItemMenu: {
* verticalAlignmentEnabled: false,
* horizontalAlignmentEnabled: false,
* renameEnabled: true
* }
* }
* };
* ```
* @public
*/
export interface IItemMenuConfig {
/** Enables deleting and cloning items in a product. The default value is `true`. */
objectManipulationEnabled?: boolean;
/** Enables vertical alignment of items to the safe area and group alignment (to select several items use `Ctrl`). The default value is `true`. */
verticalAlignmentEnabled?: boolean;
/** Enables horizontal alignment of items to the safe area and group alignment (to select several items use `Ctrl`). The default value is `true`. */
horizontalAlignmentEnabled?: boolean;
/** Enables changing Z-order of items. The default value is `true`. */
changeZOrderEnabled?: boolean;
/** Enables renaming items. The default value is `false`. */
renameEnabled?: boolean;
/** Enables grouping items. The default value is `true`. */
groupItemsEnabled?: boolean;
/** Enables cloning items in a product. The default value is `true`. */
cloneItemsEnabled?: boolean;
}
/**
* A structure defining a range of values.
* @example
* ```js
* configuration = {
* widgets: {
* common: {
* fontSize: { max: 50, min: 5, step: 5 },
* tracking: { max: 100, min: -50, step: 25 },
* leading: { max: 50, min: 5, step: 5 }
* }
* }
* };
* ```
* @public
*/
export interface IRangeParams {
/** Sets a max value of a range. */
min?: number;
/** Sets a min value of a range. */
max?: number;
/** The parameter changes by this step value. */
step?: number;
}
/**
* A structure defining a range of values, a color, and a size of text stroke.
* @example
* ```js
* configuration = {
* widgets: {
* TopToolbar: {
* textStrokeButtonEnabled: true,
* textStrokeColorButtonEnabled: true,
* textStroke: { max: 1, min: 0.1, step: 0.1, color: "azure" }
* }
* }
* };
* ```
* @public
*/
export interface IDefaultTextStroke extends IRangeParams {
/** The text color, in CSS format. */
color?: string;
/** The text stroke size. */
size?: number;
}
/**
* A structure defining a range of text shadow parameters.
* @example
* ``` js
* configuration = {
* widgets: {
* TopToolbar: {
* textShadowButtonEnabled: true,
* textShadow: {
* angle: { max: 70, min: 20, step: 5 },
* distance: { max: 5, min: 0, step: 0.1 },
* size: { max: 2, min: 0, step: 0.1 }
* }
* }
* }
* };
* ```
* @public
*/
export interface ITextShadowParam {
/** An angle of the text shadow, measured in degrees. The default value is calculated based on the text font size. */
angle: IRangeParams;
/** An indent of the text shadow, measured in points. The default value is calculated based on the text font size. */
distance: IRangeParams;
/** A size of the shadow blur, measured in pixels. The default value is calculated based on the text font size. */
size: IRangeParams;
}
/**
* A structure containing the configuration of the Top toolbar.
* @example
* ```js
* let configuration = {
* widgets: {
* TopToolbar: {
* multiRowModeEnabled:true,
* textShadowButtonEnabled: true,
* textShadow: {
* angle: { max: 70, min: 20, step: 5 },
* distance: { max: 5, min: 0, step: 0.1 },
* size: { max: 2, min: 0, step: 0.1 }
* },
* textStrokeButtonEnabled: false,
* textStroke: { max: 1, min: 0, step: 0.1 }
* }
* }
* };
* ```
* @public
*/
export interface ITopToolbarConfig {
/** Displays button captions in the Top Toolbar. The default value is `false`. */
displayCaptionInButtons?: boolean;
/** Displays the vertical alignment buttons (**Top**, **Center**, **Bottom**). The default value is `true`. */
alignButtonsEnabled?: boolean;
/** Displays the alignment buttons as a drop-down list. The default value is `true`. */
displayAlignButtonsAsDropdown?: boolean;
/** Displays the **Undo** and **Redo** buttons. The default value is `true`. */
historyButtonsEnabled?: boolean;
/** Displays the **Delete** button. The default value is `false`. */
deleteButtonEnabled?: boolean;
/** Displays the **Revert** button. The default value is `true`. */
revertButtonEnabled?: boolean;
/** Displays buttons for changing the z-Order of design elements. By default, the Top toolbar displays the z-Order buttons. */
zOrder?: IZOrderConfig;
/** Displays the z-order buttons as a drop-down list. The default value is `true`. */
displayZOrderButtonsAsDropdown?: boolean;
/** Displays the **Clone object** button. The default value is `false`. */
cloneButtonEnabled?: boolean;
/** Displays the **Edit** button for text elements. The default value is `false`. */
editTextButtonEnabled: boolean;
/** Displays the text vertical alignment buttons. The default value is `true`. */
textVAlignmentButtonsEnabled?: boolean;
/** Displays the **Columns** box for rich formatted text. The default value is `true`. */
textAllowChangeColumnCount?: boolean;
/** Displays the text alignment buttons. The default value is `true`. */
textAlignmentButtonsEnabled?: boolean;
/** Displays the faux text style buttons (<b>bold</b>, <i>italic</i>, and <u>underlined</u>). The default value is `true`. */
textEmphasisButtonsEnabled?: boolean;
/** Displays the font list. The default value is `true`. */
textFontFamilyButtonEnabled?: boolean;
/** Displays the font style list. The default value is `true`. */
textFontStyleButtonEnabled?: boolean;
/** Displays the font size spinner. The default value is `true`. */
textFontSizeButtonEnabled?: boolean;
/** Displays the text color picker. The default value is `true`. */
textFontColorButtonEnabled?: boolean;
/** Displays the **Arched text bend** button to configure the arch bend. The default value is `true`. */
textBendButtonEnabled?: boolean;
/** Displays the **Paragraph** button to configure paragraph indents. The default value is `true`. */
textParagraphButtonEnabled?: boolean;
/** Displays the group of buttons to create and manipulate text lists. By default, the Top toolbar displays the list buttons for text elements. */
textListButtonsEnabled?: boolean;
/** Displays the **Select fill color** button. The default value is `true`. */
fillColorButtonEnabled?: boolean;
/** Displays the **Select text fill color** button. The default value is `false`. */
textFillColorButtonEnabled?: boolean;
/** If `true`, the **Select font** drop-down list closes after a user selects a font; otherwise, it closes only when a user clicks anywhere outside the list. The default value is `true`. */
closeFontMenuOnClickEnabled?: boolean;
/** If `true`, provides the ability to change layer opacity via the **Select opacity** slider in the Top toolbar. The default value is `true`. */
opacitySliderEnabled?: boolean;
/** Displays the **Leading** list for text. The default value is `true`. */
textLeadingButtonEnabled?: boolean;
/** Displays the **Tracking** list for text. The default value is `true`. */
textTrackingButtonEnabled?: boolean;
/** Displays the Top toolbar in the multi row mode to fit all the buttons for a screen. The default value is `false`. */
multiRowModeEnabled?: boolean;
/** Displays the **Select border color** button in the Top toolbar. The default value is `true`. */
borderColorButtonEnabled?: boolean;
/** Displays the **Select overlay color** button in the Top toolbar. The default value is `true`. */
overlayColorButtonEnabled?: boolean;
/** Displays the **Select barcode color** button. The default value is `true`. */
barcodeColorButtonEnabled?: boolean;
/** Displays the **Select border width** button in the Top toolbar. The default value is `true`. */
borderWidthButtonEnabled?: boolean;
/** Displays the **Edit** button for images in the Top toolbar. The default value is `true`. */
imageEditButtonEnabled?: boolean;
/** Displays the **Select image** button for images. The default value is `true`. */
imageSelectButtonEnabled?: boolean;
/** Displays the **Edit** button for image placeholders in the Top toolbar. The default value is `true`. */
placeholderEditButtonEnabled?: boolean;
/** Displays the **Select image** button for image placeholders. The default value is `true`. */
placeholderSelectButtonEnabled?: boolean;
/** Displays the **Select placeholder content scale** button for image placeholders. The default value is `true`. */
placeholderScaleButtonEnabled?: boolean;
/** Displays the **Reset placeholder content** button for image placeholders. The default value is `true`. */
placeholderResetContentButtonEnabled?: boolean;
/** Displays the **Rotate content** buttons for image placeholders to rotate the content to 90, 180, and 270 degrees. The default value is `true`. */
placeholderRotateContentButtonsEnabled?: boolean;
/** Displays the **Change barcode type** drop-down list for barcode placeholders. The default value is `true`. */
changeBarcodeTypeButtonEnabled?: boolean;
/** The font size used to display font names in the **Select font** drop-down list. The default value is `17`. */
fontPreviewSize?: number;
/** Specifies parameters of the **Font size** spinner. */
fontSize?: IRangeParams;
/** Displays the **Shadow** button. The default value is `true`. */
textShadowButtonEnabled?: boolean;
/** An angle in degrees, an indent in points, and a blur value in pixels of the text shadow. The default values are calculated based on the text font size. */
textShadow?: ITextShadowParam;
/** Displays the **Stroke** button. The default value is `true`. */
textStrokeButtonEnabled?: boolean;
/** Min and max values of the text stroke width in points, including the color and the size. The default values are calculated based on the text font size. */
textStroke?: IDefaultTextStroke;
/** Displays the **Smart group** button to configure the auto-layout settings of grouped design elements. The default value is `true`. */
layoutItemSettingsButtonEnabled?: boolean;
/** Displays the **Stroke color** button to change the color of text stroke. If `true`, the user can change the stroke color. If `false`, the color is maintained the same as the text color. The default value is `true`. */
textStrokeColorButtonEnabled?: boolean;
/** Displays the **Place in** button to fit the selected design elements to an area bounded by safety lines. The default value is `true`. */
placeInSafetyAreaButtonEnabled?: boolean;
/** Displays the **Group/Ungroup** button for items. The default value is `true`. */
groupButtonEnabled?: boolean;
/** Obsolete. Left for compatibility. Works like groupButtonEnabled */
groupItemsEnabled?: boolean;
}
/**
* A structure containing the configuration of the z-order control.
* @remarks {@link ITopToolbarConfig} uses this structure.
* @example
* ``` js
* configuration = {
* widgets: {
* TopToolbar: {
* displayZOrderButtonsAsDropdown: true,
* zOrder: {
* zOrderLevelButtonsEnabled: true,
* zOrderSendToButtonsEnabled: true
* }
* }
* }
* };
* ```
* @public
*/
export interface IZOrderConfig {
/** Enables the **Level up** and **Level down** buttons in the Top toolbar. The default value is `false`. */
zOrderLevelButtonsEnabled?: boolean;
/** Enables the **Send to front** and **Send to bottom** buttons in the Top toolbar. The default value is `false`. */
zOrderSendToButtonsEnabled?: boolean;
}
/**
* A structure containing the configuration of the Barcode dialog.
* @public
*/
export interface IBarcodeDialogConfig {
/** Sets the default type for the Barcode dialog. */
defaultType: BarcodeType;
}
/**
* The text outline for low-contrast texts in the Rich text editor. This feature is turned off by default.
* @remarks You can use these settings in {@link IRichTextDialogConfig}.
* @example
* ``` js
* configuration = {
* widgets: {
* RichTextDialog: {
* bgColor: "black",
* textOutline: {
* enabled: true,
* color: "rgba(255, 0, 0, 0.5)"
* }
* }
* }
* };
* ```
* @public
*/
export interface ITextOutline {
/** Enables text outline. The text is outlined in the Rich text dialog if the difference between the text and background colors is below the hue or the brightness threshold. The default value is `false`. */
enabled?: boolean;
/** The hue threshold. The default value is `74`. */
hueThreshold?: number;
/** The brightness threshold. The default value is `5`. */
brightnessThreshold?: number;
/** The outline color. The default value is `"rgba(0, 0, 0, 0.2)"`. */
color?: string;
}
/**
* The settings enabling hints for drop-down lists in the toolbar of the Rich text editor.
* @remarks You can use these settings in {@link IRichTextDialogConfig}. These hints are turned on by default.
* @example This is how you can disable all the hints in the Rich text editor.
* ``` js
* configuration = {
* widgets: {
* RichTextDialog: {
* showHint: {
* font: false,
* style: false,
* size: false,
* tracking: false,
* leading: false,
* firstLineIndent: false,
* paddingTop: false,
* paddingBottom: false,
* paddingLeft: false,
* paddingRight: false
* }
* }
* }
* };
* ```
* @public
*/
export interface IShowHintSettings {
/** Enables the hint for the **Font name**. The default value is `true`. */
font?: boolean;
/** Enables the hint for the **Font style**. The default value is `true`. */
style?: boolean;
/** Enables the hint for the **Font size**. The default value is `true`. */
size?: boolean;
/** Enables the hint for **Tracking**. The default value is `true`. */
tracking?: boolean;
/** Enables the hint for **Leading**. The default value is `true`. */
leading?: boolean;
/** Enables the hint for the **First line indent**. The default value is `true`. */
firstLineIndent?: boolean;
/** Enables the hint for the **Before paragraph** space. The default value is `true`. */
paddingTop?: boolean;
/** Enables the hint for the **After paragraph** space. The default value is `true`. */
paddingBottom?: boolean;
/** Enables the hint for the **Left indent**. The default value is `true`. */
paddingLeft?: boolean;
/** Enables the hint for the **Right indent**. The default value is `true`. */
paddingRight?: boolean;
}
/**
* The settings enabling the user input for drop-down lists in the toolbar of the Rich text editor.
* @remarks You can use these settings in {@link IRichTextDialogConfig}. The user input is turned on by default.
* @example
* ``` js
* configuration = {
* widgets: {
* RichTextDialog: {
* showInput: {
* size: false
* }
* }
* }
* }
* ```
* @public
*/
export interface IShowInputSettings {
/** Enables the user input for the **Font size**. The default value is `true`. */
size?: boolean;
}
/**
* An object defining the indent and padding values for the Rich text editor.
* @remarks You can use these settings in {@link IRichTextDialogConfig}.
* @example
* ``` js
* configuration = {
* widgets: {
* RichTextDialog: {
* bgColor: "lightgray",
* richComboValues: {
* padding: { max: 50, min: 5, step: 5 }
* }
* }
* }
* };
* ```
* @public
*/
export interface IRichComboValuesConfig {
/** Sets indent values for formatted text. */
indent?: IRangeParams;
/** Sets padding values for formatted text. */
padding?: IRangeParams;
}
/**
* A structure containing text zoom configuration of the Rich text editor.
* @remarks You can use these settings in {@link IRichTextDialogConfig}.
* @example
* ``` json
* "RichTextDialog": {
* "zoom": {
* // Enables the zoom slider in the Rich text editor.
* "enabled": true,
* "minZoomPct": 10,
* "maxZoomPct": 500,
* "autoZoom": {
* // Enables auto-zoom at opening the text editor.
* "enabled": true,
* // Auto-zooms the text in if the text font size is less than this threshold.
* "minFontSizeThresholdPt": 12,
* // Auto-zooms the text out if the text font size is more than this threshold.
* "maxFontSizeThresholdPt": 36
* }
* }
* }
* ```
* @public
*/
export interface IZoomConfig {
/** Enables a slider to show the zoom level. The default value is `false`. */
enabled?: boolean;
/** Zoom percentage. The least value of the zoom slider, must be less than 100. The default value is `10`. */
minZoomPct?: number;
/** Zoom percentage. The most value of the zoom slider, must be more than 100. The default value is `500`. */
maxZoomPct?: number;
/** Auto-zoom configuration of the Rich text editor. */
autoZoom?: IAutoZoomConfig;
}
/**
* A structure containing auto-zoom configuration of the Rich text editor.
* @remarks You can use these settings in {@link IRichTextDialogConfig}.
* @example
* ``` json
* "RichTextDialog": {
* "zoom": {
* // Enables the zoom slider in the Rich text editor.
* "enabled": true,
* "minZoomPct": 10,
* "maxZoomPct": 500,
* "autoZoom": {
* // Enables auto-zoom at opening the text editor.
* "enabled": true,
* // Auto-zooms the text in if the text font size is less than this threshold.
* "minFontSizeThresholdPt": 12,
* // Auto-zooms the text out if the text font size is more than this threshold.
* "maxFontSizeThresholdPt": 36
* }
* }
* }
* ```
* @public
*/
export interface IAutoZoomConfig {
/** Enables auto-zoom at opening the Rich text editor. The default value is `false`. */
enabled?: boolean;
/** The font size threshold, in points. If the text font size is less than this threshold, the text is auto-zoomed in. The default value is `12`. */
minFontSizeThresholdPt?: number;
/** The font size threshold, in points. If the text font size is more than this threshold, the text is auto-zoomed out. The default value is `36`. */
maxFontSizeThresholdPt?: number;
}
/**
* The dialog providing text formatting options.
* @remarks For details, see the {@link https://customerscanvas.com/dev/editors/iframe-api/editor-configuration/rte.html|Rich text editor} topic.
* @example
* ``` js
* configuration = {
* widgets: {
* RichTextDialog: {
* bgColor: "lightgray",
* ckeditorConfig:{
* specialChars: [""", "’", [ "@", "Custom label" ] ]
* },
* fitTextRectangle: {
* onAdd: "shrinkOrStretchToContentHeight",
* onUpdate: "stretchToContentHeight"
* },
* richComboValues: {
* padding: { max: 50, min: 5, step: 5 }
* },
* textOutline: {
* enabled: true
* },
* toolbarConfig: [
* { name: "clipboard", items: ["Cut", "Copy", "Paste", "-", "Undo", "Redo"] }, "/",
* { name: "basicstyles", items: ["Bold", "Italic", "Underline", "-", "RemoveFormat"] }
* ],
* wysiwygMode: true
* }
* }
* };
* ```
* @public
*/
export interface IRichTextDialogConfig {
/** internal */
forcePasteAsPlainText?: boolean;
/** The text background color in the Rich text dialog. The default value is `"white"`. */
bgColor?: string;
/** Allows for creating multicolumn text. If `true`, the **Columns** drop-down list appears in the **Top toolbar** for formatted text elements. The default value is `false`. */
createMultiColumnText?: boolean;
/** Allows you to apply formatting to a whole text field despite a text selection. This text mode is turned off by default. */
applyToAllTextMode?: boolean;
/** If `true`, the editor adjusts the text in the Rich text dialog to the appearance on the canvas as close as possible. The default value is `false`. */
wysiwygMode?: boolean;
/** Enables hints in the drop-down lists. By default, the hints are enabled. */
showHint: IShowHintSettings;
/** Enables user input in the drop-down lists. By default, the user input is enabled. */
showInput?: IShowInputSettings;
/** Enables the text outline for low-contrast texts in the Rich text dialog. The feature is turned off by default. */
textOutline?: ITextOutline;
/**
* An array defining configuration of the toolbar. The default configuration is:
* ``` js
* [
* { name: "clipboard", items: ["Cut", "Copy", "Paste", "PasteText", "PasteFromWord", "-", "Undo", "Redo"] },
* { name: "editing", items: ["Find", "Replace", "-", "SelectAll"] },
* { name: "insert", items: ["SpecialChar"] },
* "/",
* { name: "basicstyles", items: ["Bold", "Italic", "Underline", "-", "RemoveFormat"] },
* { name: "styles", items: ["Font", "FontStyle", "FontSize"] },
* { name: "colors", items: ["cc_textcolor_button"] },
* { name: "tracking", items: ["cctracking"] },
* "/",
* { name: "paragraph", items: ["JustifyLeft", "JustifyCenter", "JustifyRight"] },
* { name: "lists", items: ["NumberedList", "BulletedList"] },
* { name: "customerscanvas", items: ["ccleading", "cctextindent"] },
* "/",
* { name: "customerscanvas", items: ["ccpaddingtop", "ccpaddingbottom", "ccpaddingleft", "ccpaddingright"] }
* ]
* ```
*/
toolbarConfig?: ({
name: string;
items: string[];
} | string)[];
/**
* An array defining the **Special character** list. The default list is:
* ``` js
* ["!", """, "#", "$", "%", "&", "'", "(", ")", "*", "+", "-", ".", "/",
* "0", "1", "2", "3", "4", "5", "6", "7", "8", "9", ":", ";", "<", "=", ">", "?", "@",
* "A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R","S",
* "T", "U", "V", "W", "X", "Y", "Z", "[", "]", "^", "_", "`", "a", "b", "c", "d", "e", "f", "g",
* "h", "i", "j", "k", "l", "m", "n", "o", "p", "q", "r", "s", "t", "u", "v", "w", "x", "y", "z",
* "{", "|", "}", "~", "€", "‘", "’", "“", "”", "–", "—",
* "¡", "¢", "£", "¤", "¥", "¦", "§", "¨", "©",
* "ª", "«", "¬", "®", "¯", "°", "²", "³", "´",
* "µ", "¶", "·", "¸", "¹", "º", "»", "¼",
* "½", "¾", "¿", "À", "Á", "Â", "Ã", "Ä",
* "Å", "Æ", "Ç", "È", "É", "Ê", "Ë", "Ì",
* "Í", "Î", "Ï", "Ð", "Ñ", "Ò", "Ó", "Ô",
* "Õ", "Ö", "×", "Ø", "Ù", "Ú", "Û", "Ü",
* "Ý", "Þ", "ß", "à", "á", "â", "ã", "ä",
* "å", "æ", "ç", "è", "é", "ê", "ë", "ì",
* "í", "î", "ï", "ð", "ñ", "ò", "ó", "ô",
* "õ", "ö", "÷", "ø", "ù", "ú", "û", "ü",
* "ý", "þ", "ÿ", "Œ", "œ", "Ŵ", "Ŷ", "ŵ", "ŷ",
* "‚", "‛", "„", "…", "™", "►", "•", "→", "⇒",
* "⇔", "♦", "≈"]
* ```
*/
ckeditorConfig?: any;
/** A structure containing text zoom configuration. */
zoom?: IZoomConfig;
/** An object defining the indent and padding values for the Rich text dialog. */
richComboValues?: IRichComboValuesConfig;
/** Allows for fitting the bounding rectangle to the text size. */
fitTextRectangle?: IFitTextRectangleSettings;
}
/**
* A structure defining when and how the editor fits bounding rectangles to rich formatted text.
* @remarks You can use these settings in {@link IRichTextDialogConfig}.
* @example
* ``` js
* configuration = {
* widgets: {
* RichTextDialog: {
* bgColor: "lightgray",
* fitTextRectangle: {
* onAdd: "shrinkOrStretchToContent",
* onUpdate: "shrinkOrStretchToContent"
* },
* wysiwygMode: true
* }
* }
* };
* ```
* @public
*/
export interface IFitTextRectangleSettings {
/** The fit mode for adding the text to the canvas. */
onAdd?: TextRectangleFitMode;
/** The fit mode for updating the text. */
onUpdate?: TextRectangleFitMode;
}
/**
* @deprecated Use {@link (IColorPickerConfigParsed:interface)} instead.
* @internal
*/
export interface IColorPickerConfig {
showPaletteOnly?: boolean;
palette?: string[][];
}
/**
* A structure defining settings of the Image editor dialog.
* @example
* ``` js
* configuration = {
* widgets: {
* ImageEditorDialog: {
* colorAdjustButtonEnabled: false
* }
* }
* };
* ```
* @public
*/
export interface IImageEditorDialogConfig {
/** Displays the **Adjust** button in the **Image Editor**. The default value is `true`. */
colorAdjustButtonEnabled?: boolean;
/** Displays the **Crop** button in the **Image Editor**. The default value is `true`. */
cropButtonEnabled?: boolean;
/** Displays the **Background** button in the **Image Editor**. The default value is `true`. */
backgroundEraseButtonEnabled?: boolean;
/** If `true`, the **Image Editor** opens in the full-screen mode on mobile devices. The default value is `true`. */
fullscreenOnTouchDevice?: boolean;
/** If `true`, the **Image Editor** allow to open contextmenu by rightclick. The default value is `true`. */
imageContextMenuEnabled?: boolean;
}
/** @internal */
export interface ITextPopupConfig {
}
/**
* The configuration of Design Editor's widgets.
* @remarks For details, see {@link https://customerscanvas.com/dev/editors/iframe-api/editor-configuration/ui-overview.html|UI overview}.
* @example
* ```js
* configuration = {
* widgets: {
* ColorPicker: {
* showPaletteOnly: true
* },
* FinishButton: {
* mode: "Disabled"
* },
* ImageEditorDialog: {
* colorAdjustButtonEnabled: false
* },
* ObjectInspector: {
* bgItemEnabled: false
* },
* RichTextDialog: {
* bgColor: "lightgray"
* }
* }
* };
* ```
* @public
*/
export interface IWidgetsConfig {
/** Common settings of widgets. */
common?: ICommonConfig;
/** Settings of the Finish design button. */
FinishButton?: IFinishButtonConfig;
/** Settings of the Bottom toolbar. */
BottomToolbar?: IBottomToolbarConfig;
/** Settings of the Toolbox. */
Toolbox?: IToolboxConfig;
/** Settings of the Object inspector. */
ObjectInspector?: IObjectInspectorConfig;
/** Settings of the Item menu. */
ItemMenu?: IItemMenuConfig;
/** Settings of the Top toolbar. */
TopToolbar?: ITopToolbarConfig;
/** Settings of the Qr code dialog. */
QrCodeDialog?: IBarcodeDialogConfig;
/** Settings of the Linear barcode dialog. */
LinearBarcodeDialog?: IBarcodeDialogConfig;
/** Settings of the Rich text dialog. */
RichTextDialog?: IRichTextDialogConfig;
/** Settings of the Color picker. */
ColorPicker?: ColorPicker.IColorPickerConfig;
/** Settings of the Image editor dialog. */
ImageEditorDialog?: IImageEditorDialogConfig;
/** Settings of the Image manager dialog. */
AssetManager?: IAssetManagerConfig;
}
/**
* A structure defining the configuration of the Toolbox.
* @remarks For details, see the {@link https://customerscanvas.com/dev/editors/iframe-api/editor-configuration/toolbox.html|Toolbox} topic.
* @example
* ``` js
* configuration = {
* widgets: {
* Toolbox: {
* buttons: [{
* translationKey: "Toolbox.TEXT",
* translationKeyTitle: "Toolbox.TITLE_ADD_TEXT",
* iconClass: "cc-icon-add-text",
* buttons: ["Text", "BoundedText"]
* }]
* }
* }
* };
* ```
* @example This is how you can define different toolboxes for different containers.
* ``` json
* "Toolbox": {
* "containerToolboxes": {
* "foil": {
* "buttons": [ "Text", "Image" ]
* },
* "texture": {
* "buttons": [ "Image" ]
* },
* "spot": {
* "buttons": [ "Rectangle", "Image" ]
* }
* }
* }
* ```
* @public
*/
export interface IToolboxConfig {
/** If `false`, hides the Toolbox. The default value is `false`. */
enabled?: boolean;
/** Is obsoleted. Left for compatibility */
disabled?: boolean;
/** Defines configuration of Toolbox buttons. */
buttons: ButtonType[];
/** Allows for defining different toolboxes for different containers of spot colors and textures. */
containerToolboxes?: {
[key: string]: IToolboxConfig;
};
/** If `true`, every new element will be added at the top of other layers. By default, this property is `false`, and when you add images, they appear below text elements. */
insertOnTop?: boolean;
}
/**
* A structure defining the configuration of widgets for a separate surface.
* @remarks For details, see {@link https://customerscanvas.com/dev/editors/iframe-api/editor-configuration/multipage-config.html|Configuring UI on different pages}.
* @example
* ```js
* product = {
* surfaces: [{
* name: "surface1",
* printAreas: [{ designFile: "Postcard_side1" }]
* },
* {
* name: "surface2",
* printAreas: [{ designFile: "Postcard_side2" }]
* }
* ]
* };
*
* config = {
* perSurfaceConfiguration: {
* "surface2": {
* widgets: {
* ObjectInspector: {
* bgItemEnabled: false
* },
* ColorPicker: {
* showPaletteOnly: false,
* sections: [
* {
* type: "PaletteSection",
* palette: [["rgb(0,0,0)", "rgb(255,255,255)"]]
* }
* ]
* }
* }
* }
* }
* };
* ```
* @public
*/
export interface IWidgetConfigsForSurface {
/** Settings of design elements that can be added to a canvas from the Toolbox. */
Toolbox?: IToolboxConfig;
/** Settings defining a position of the Object Inspector, an appearance of layers, and messages. */
ObjectInspector?: IObjectInspectorConfig;
/** Settings defining a color selection in the editor. */
ColorPicker?: ColorPicker.IColorPickerConfig;
}