@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.
257 lines (256 loc) • 8.92 kB
TypeScript
import { IImageItemData, IBarcodeItemData, ITextItemData } from "@aurigma/design-atoms/Services/ItemsDataApplierInterfaces";
/** @internal */
export declare namespace IToolboxConfigParsed {
const injectName = "$cc.IToolboxConfigParsed";
}
/** @internal */
export interface IToolboxConfigParsed {
/** If `false`, hides the Toolbox. The default value is `true`. */
enabled?: boolean;
/** Is obsoleted. Left for compatibility */
disabled?: boolean;
/** Defines configuration of Toolbox custom buttons. */
customButtons: CustomButton[];
/** Defines configuration of Toolbox buttons. */
buttons: ButtonType[];
/** Allows for defining different toolboxes for different containers of spot colors and textures. */
containerToolboxes: {
[key: string]: IToolboxConfigParsed;
};
/** 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 common properties of buttons in the Toolbox.
* @example
* ``` json
* "Toolbox": {
* "buttons": [
* {
* "translationKey": "Toolbox.ADD_TEXT",
* "translationKeyTitle": "Toolbox.TITLE_ADD_TEXT",
* "nameDialogEnabled": true,
* "iconClass": "cc-icon-add-text",
* "action": "Text"
* },
* {
* "translationKey": "Toolbox.IMAGE",
* "translationKeyTitle": "Toolbox.TITLE_ADD_IMAGE",
* "nameDialogEnabled": true,
* "iconClass": "cc-icon-add-image",
* "action": "Image"
* }
* ]
* }
* ```
* @public
*/
export interface IItem {
/** The translation key of the button caption. The corresponding string should be defined in the `~/Configuration/translations.json` file. */
translationKey: string;
/** The translation key of the button tooltip. The corresponding string should be defined in the `~/Configuration/translations.json` file. */
translationKeyTitle: string;
/** The class of the button icon. You can learn how to customize icons in the {@link https://customerscanvas.com/dev/editors/iframe-api/customization/icons.html|Custom icons} topic. */
iconClass: string;
/** A structure containing the default configuration of new design elements. */
itemConfig?: ITextItemData | IImageItemData | IBarcodeItemData;
/** Enables a dialog box to type in the name of a new design element. The default value is `false`. */
nameDialogEnabled: boolean;
}
/**
* A structure defining configuration of the Toolbox using an array of buttons.
* @example
* ``` js
* configuration = {
* widgets: {
* Toolbox: {
* buttons: [
* {
* translationKey: "Toolbox.TEXT",
* translationKeyTitle: "Toolbox.TITLE_ADD_TEXT",
* iconClass: "cc-icon-add-text",
* buttons: ["PointText", "BoundedText", "ArchedText"]
* },
* "Image"
* ]
* }
* }
* };
* ```
* @public
*/
export interface IButton extends IItem {
/** The array containing button definitions. */
buttons: ButtonType[];
}
/**
* A structure defining configuration of the Toolbox using the action property.
* @example The following two examples are equal and result in the same toolbar configuration.
* ``` json
* "Toolbox": {
* "buttons": [
* {
* "translationKey": "Toolbox.TEXT",
* "translationKeyTitle": "Toolbox.TITLE_ADD_TEXT",
* "iconClass": "cc-icon-add-text",
* "buttons": [
* {
* "translationKey": "Toolbox.ADD_TEXT",
* "translationKeyTitle": "Toolbox.TITLE_ADD_TEXT",
* "iconClass": "cc-icon-add-text",
* "action": "Text"
* },
* {
* "translationKey": "Toolbox.BOUNDEDTEXT",
* "translationKeyTitle": "Toolbox.TITLE_ADD_BOUNDEDTEXT",
* "iconClass": "cc-icon-rich-text",
* "action": "BoundedText"
* }
* ]
* },
* {
* "translationKey": "Toolbox.IMAGE",
* "translationKeyTitle": "Toolbox.TITLE_ADD_IMAGE",
* "iconClass": "cc-icon-add-image",
* "action": "Image"
* }
* ]
* }
*
* "Toolbox": {
* "buttons": [
* {
* "translationKey": "Toolbox.TEXT",
* "translationKeyTitle": "Toolbox.TITLE_ADD_TEXT",
* "iconClass": "cc-icon-add-text",
* "buttons": [
* "Text",
* "BoundedText"
* ]
* },
* "Image"
* ]
* }
* ```
* @public
*/
export interface ISingleButton extends IItem {
/** The action that the button performs. You can define the Toolbox by using the actions alone. */
action: ButtonAction;
}
/**
* A structure defining configuration of the Toolbox for launching the Asset Manager in a predefined mode.
* @remarks For details, refer to the {@link https://customerscanvas.com/dev/editors/iframe-api/editor-configuration/image-manager.html|Image manager} topic.
* @example
* ``` json
* {
* "assetSources": {
* "Backgrounds": {
* "type": "PublicSource",
* "allowedExtensions": [ "jpg", "png" ]
* },
* "Instagram": {
* "type": "SocialNetworkSource",
* "network": "instagram",
* "apiKey": "88884444aaaa222288883333ffff6666"
* }
* },
* "widgets": {
* "AssetManager": {
* "tabs": [
* {
* "name": "Backgrounds",
* "assetSourceInstance": "Backgrounds"
* },
* {
* "name": "Instagram",
* "assetSourceInstance": "Instagram"
* }
* ]
* },
* "Toolbox": {
* "buttons": [
* {
* "translationKey": "Toolbox.IMAGE",
* "translationKeyTitle": "Toolbox.TITLE_ADD_IMAGE",
* "iconClass": "cc-icon-add-image",
* "buttons": [
* "Image",
* {
* "action": "Image",
* "translationKey": "Toolbox.INSTAGRAM",
* "translationKeyTitle": "Toolbox.INSTAGRAM",
* "iconClass": "cc-icon-add-instagram",
* "tabs": [ "Instagram" ]
* },
* {
* "action": "Image",
* "translationKey": "Toolbox.BACKGROUNDS",
* "translationKeyTitle": "Toolbox.BACKGROUNDS",
* "iconClass": "cc-icon-add-background",
* "tabs": [ "Backgrounds" ]
* }
* ]
* }
* ]
* }
* }
* }
* ```
* @public
*/
export interface IGalleryButton extends ISingleButton {
/** An array of available tab names in the Asset Manager. By default, all defined tabs are displayed. */
tabs: string[];
/** A tab to be displayed when the Asset Manager opens. By default, the first tab opens. */
defaultTabName: string;
}
/**
* A structure defining configuration of the Toolbox for customizing the background layer.
* @example
* ``` json
* "Toolbox": {
* "buttons": [
* {
* "translationKey": "Toolbox.CHANGE_BACKGROUND",
* "translationKeyTitle": "Toolbox.TITLE_CHANGE_BACKGROUND",
* "iconClass": "cc-icon-background",
* "action": "Background",
* "onlyImage": false
* }
* ]
* }
* ```
* @public
*/
export interface IBgButton extends ISingleButton {
/** If `false`, allows users to select an image in the Asset Manager or a color in the picker. By default, this property is `true`, and users can only select an image. */
onlyImage: boolean;
}
/**
* The standard actions that can be assigned to toolbox buttons. <em>The `"RichText"` button action is deprecated, since every text element may support rich formatting in Customers Canvas 6.</em>
* @public
*/
export declare type ButtonAction = "QrCode" | "LinearBarcode" | "DataMatrixBarcode" | // Qr codes
"Line" | "Rectangle" | "Ellipse" | // Shapes
"Text" | "RichText" | "BoundedText" | "CustomText" | "PointText" | // Text items
"Image" | "Background" | "BackgroundParams" | "Layout" | "FillPlaceholders" | "State" | // Galleries
"Custom";
/**
* A way of defining a button.
* @public
*/
export declare type SingleButtonType = ISingleButton | IGalleryButton | ButtonAction;
/**
* A button type.
* @public
*/
export declare type ButtonType = IButton | SingleButtonType;
export declare type CustomButton = {
translationKey: string;
translationKeyTitle: string;
iconUrl: string;
action?: string;
buttonId: string;
customData: any;
};