@aurigma/design-editor-iframe/ObjectModel/ObjectModel.d.ts

Using this module you can embed Design Editor (a part of Customer's Canvas) to your page through the IFrame API.

/**
 * Specifies product definitions used as arguments in the `loadEditor` method.
 * @public
 */
export declare type SurfaceTypes = string | IPrintAreaTemplate | ISurfaceDefinition | ISurfaceTemplate | ISurfaceFromState;
import { IProductThemeConfig } from "./../Configuration/ConfigurationInterfaces";
import { Editor } from "../Editor";
import { Product as CCProduct } from "@aurigma/design-atoms-model/Product/Product";
import { BaseItem as CCBaseItem } from "@aurigma/design-atoms-model/Product/Items/BaseItem";
import { IVariable } from "@aurigma/design-atoms/Services/VariableItemHelper";
import { PointF } from "@aurigma/design-atoms-model/Math/PointF";
import { ImageMetaData } from "@aurigma/design-atoms-model/Product/Items/ImageMetaData";
import { Color } from "@aurigma/design-atoms-model/Colors/Color";
import { ShapeItem } from "@aurigma/design-atoms-model/Product/Items/ShapeItem";
import { IMargin } from "@aurigma/design-atoms-model/Math/Margin";
import { RotatedRectangleF } from "@aurigma/design-atoms-model/Math";
/**
 * A basic component containing a name of a surface.
 * @public
 */
export interface IModelComponent {
    /**
     * A name of a surface (a page) in the product.
     * @remarks In multipage products, it allows you to use a name mask for product surfaces. If this string contains the `{0}` placeholder, it will be replaced with a page number, starting from `1`. For example, `name: "Page {0}"` specifies the following page captions in the Bottom toolbar: `Page 1`, `Page 2`, and so on.
     * */
    name?: string;
}
/**
 * A structure holding settings to create a product.
 * @example
 * ``` js
 * const productDefinition = {
 *   surfaces: {
 *       // Get surfaces from the folder.
 *       designFolder: "myphotoBook",
 *       // Name surfaces as "Page 1", "Page 2", and so on.
 *       name: "Page {0}",
 *       // Get mockups from the folder.
 *       mockupFolder: { up: "photoBookMockups" }
 *   },
 *   // Define safety lines for all surfaces (product pages).
 *   defaultSafetyLines: [{
 *       margin: 5,
 *       color: "rgba(0,0,0,1)"
 *   }]
 * };
 * ```
 * @public
 */
export interface IProductDefinition extends IModelComponent {
    /** A collection of safety lines defined for every surface (page) in the product. */
    defaultSafetyLines?: ISafetyLine[];
    /** Coordinates of the design relative to the upper-left corner of the mockup, in points. */
    defaultDesignLocation?: IPointF;
    /** A collection of default crop marks defined for every surface (page) in the product. */
    defaultCropMarks?: ICropMark[];
    /** A collection of surfaces (pages) defined in the product. */
    surfaces: SurfaceTypes[] | ISurfacesFromFolder | ISurfacesFromMultipageTemplate;
}
/**
 * A structure holding settings to create a channel container.
 * @remarks For details, see the {@link https://customerscanvas.com/dev/editors/iframe-api/product-definition/post-press-finishing-layers.html|Defining Channel Containers} topic.
 * @example
 * ``` js
 * const productDefinition = {
 *       surfaces: [{
 *           printAreas: [{
 *               designFile: "texture",
 *               containers: [
 *                   {
 *                       name: "foil",
 *                       type: "texture",
 *                       texture: "texture.jpg"
 *                   },
 *                   {
 *                       name: "spot",
 *                       type: "spotColor",
 *                       previewColor: "rgba(255,255,0,1)"
 *                   }]
 *           }]
 *       }]
 *   };
 * ```
 * @public
 */
export interface IChannelContainerDefinition {
    /**  A type of the channel container, either texture or spot color. */
    type?: ChannelContainerType;
    /** A unique container name. */
    name?: string;
    /** The translation key of the channel tab caption in the Object Inspector. The corresponding string should be defined in the `~/Configuration/translations.json` file. */
    translationKey?: string;
    /** An RGB color representing a spot color on the canvas and proof images. */
    previewColor?: string;
    /** A texture image used for rendering elements of the container on the canvas and proof images. This value is relative to the `~/assets/helpers/` folder. */
    texture?: string;
    /** The color that is used in hires. This could be, for example, black rgb or cmyk color, or some specific Spot color. */
    outputColor?: string;
}
/**
 * Channel container types.
 * @public
 */
export declare enum ChannelContainerType {
    Texture = 0,
    SpotColor = 1
}
/**
 * A structure representing basic surface features.
 * @public
 */
export interface IBaseSurfaceDefinition extends IModelComponent {
    /** A collection of folding lines defined in the surface (page). */
    foldingLines?: IFoldingLine[];
    /** A collection of spines defined in the surface (page). */
    spines?: ISpine[];
    /** Parameters of the background folding mode. */
    bgFoldingMode?: IBgFoldingModeParams;
    /** Settings of proof images. */
    proofImage?: IProofImage;
}
/**
* A structure holding settings to create an empty surface.
* @example
* ```js
* const emptyProduct = {
*    surfaces: [{
*        width: 720,
*        height: 504,
*        proofImage: {
*            fileFormat: "PNG",
*            rgbColorProfileName: "Adobe RGB (1998)",
*            mockupEnabled: false
*        }
*    }]
* };
* ```
* @public
*/
export interface ISurfaceDefinition extends IBaseSurfaceDefinition {
    /** A surface width, in points. */
    width: number;
    /** A surface height, in points. */
    height: number;
    /** A collection of print areas defined in the surface (page). */
    printAreas?: IPrintAreaDefinition[];
    /** A collection of channel containers. 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. */
    containers?: IChannelContainerDefinition[];
    /** If `true`, only spot containers defined in IDML or PSD templates will be created in a product, without the default containers Main, Background, and Foreground. The default value is `false`. */
    useSpecifiedContainersOnly?: boolean;
}
/**
* A structure holding settings to create overlaying and background mockups from PSD templates or raster images.
* @example
* ``` js
* CustomersCanvas.IframeApi.loadEditor(
*    iframe,
*    {
*        surfaces: [{
*            mockup: {
*                up: "stamp",
*                down: "envelope"
*            },
*            previewMockups: [{ down: "envelope" }],
*            printAreas: [{
*                designFile: "envelopeDesign"
*            }]
*        }]
*    }
* );
* ```
* @public
*/
export interface IMockupTemplate extends IModelComponent {
    /** A background mockup: the mockup lays below the design template. This property represents a file name without an extension. */
    down?: string;
    /** An overlaying mockup: the mockup lays above the design template. This property represents a file name without an extension. */
    up?: string;
}
/**
* A structure holding settings to create a surface from a PSD template.
* @example
* ``` js
* CustomersCanvas.IframeApi.loadEditor(
*    iframe,
*    {
*        surfaces: [{
*            name: "Front Side",
*            printAreas: [{
*                designFile: "stamp"
*            }],
*            mockup: { down: "envelope" },
*            previewMockups: [{ down: "previewMockup" }]
*        }]
*    }
* );
* ```
* @public
*/
export interface ISurfaceTemplate extends IBaseSurfaceDefinition {
    /** A mockup applied to the surface. */
    mockup?: IMockupTemplate;
    /** A collection of preview mockups for proof images. */
    previewMockups?: IMockupTemplate[];
    /** A collection of print areas defined in the surface (page). */
    printAreas?: (IPrintAreaTemplate | IPrintAreaDefinition)[];
    /** A collection of channel containers. 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. */
    containers?: IChannelContainerDefinition[];
    /** If `true`, only spot containers defined in IDML or PSD templates will be created in a product, without the default containers Main, Background, and Foreground. The default value is `false`. */
    useSpecifiedContainersOnly?: boolean;
}
/**
* A structure holding names of folders containing the overlaying and background mockups.
* @remarks This interface uses mockups that are grouped by folders.
* @example
* ``` js
* const productDefinition = {
*    surfaces: {
*        // Get surfaces from the folder.
*        designFolder: "myphotoBook",
*        // Get mockups from the folder.
*        mockupFolder: { up: "photoBookMockups" }
*    }
* };
* ```
* @public
*/
export interface IMockupFolders {
    /** A name of the folder containing the overlaying mockup files. */
    up?: string;
    /** A name of the folder containing the background mockup files. */
    down?: string;
}
/**
* A structure holding basic features of multipage templates.
* @example
* ``` js
* const productDefinition = {
*    surfaces: {
*        // Get surfaces from a folder containing three PSD templates.
*        designFolder: "BookCover",
*        // Name the surfaces.
*        names: ["Front cover", "Endpapers", "Back cover"]
*    }
* };
* ```
* @public
*/
export interface IBaseSurfacesDefinition extends IBaseSurfaceDefinition {
    /** An array of surface names. The number of array elements must match the number of surfaces. Otherwise, the default page captions appear in the Bottom toolbar. */
    names?: string[];
}
/**
* A structure holding settings to create a set of template-based surfaces.
* @remarks This interface uses PSD templates that are grouped by folders. For details, see the {@link https://customerscanvas.com/dev/editors/iframe-api/product-definition/multiple-pages.html|Loading Pages from a Folder} topic.
* @example
* ``` js
* const productDefinition = {
*    surfaces: {
*        // Get surfaces from the folder.
*        designFolder: "myphotoBook",
*        // Name surfaces as "Page 1", "Page 2", and so on.
*        name: "Page {0}",
*        // Get mockups from the folder.
*        mockupFolder: { up: "photoBookMockups" }
*    }
* };
* ```
* @public
*/
export interface ISurfacesFromFolder extends IBaseSurfacesDefinition {
    /** A name of the folder containing PSD page templates of the multipage product. */
    designFolder?: string;
    /** A name of the folder containing mockup files. */
    mockupFolder?: IMockupFolders;
    /** A name of the folder containing preview mockup files. */
    previewMockupFolder?: string | IMockupFolders;
}
/**
* A structure holding settings to create a set of template-based surfaces.
* @remarks This interface uses pages of an IDML template. For details, see the {@link https://customerscanvas.com/dev/editors/iframe-api/product-definition/multiple-pages.html|Loading Multipage Products} topic.
* @example
* ``` js
* const productDefinition = {
*    surfaces: {
*        // Get surfaces from the three-page template "BookCover.idml".
*        file: "BookCover",
*        // Name the surfaces.
*        names: ["Front cover", "Endpapers", "Back cover"]
*    }
* };
* ```
* @public
*/
export interface ISurfacesFromMultipageTemplate extends IBaseSurfacesDefinition {
    /** The name of an IDML template. */
    file?: string;
    /** Product mockups. */
    pageTemplates?: IPageTemplate[];
    /** Settings of the hi-res output. */
    hiResOutput?: IHiResOutput;
}
/**
* A structure holding settings to create mockups and preview mockups for multipage IDML templates.
* @example
* ``` js
* const productDefinition = {
*    surfaces: {
*        // Get surfaces from the multipage template "Booklet.idml".
*        file: "Booklet",
*        name: "Page {0}",
*        pageTemplates: [
*        {
*            // The default mockup for all pages.
*            mockup: {
*                down: "bookletPages"
*            }
*            // The default preview mockup.
*            previewMockups: [{ down: "previewBookletPages" }]
*        },
*        {
*            // A mockup and a preview mockup for the first page.
*            name: "Page 1",
*            mockup: {
*                up: "cover"
*            },
*            location: { X: "30", Y: "83" },
*            previewMockups: [{ up: "previewCover" }]
*        }]
*    }
* };
* ```
* @public
*/
export interface IPageTemplate extends ISurfaceTemplate {
    /** The index of a product page, starting from `0`. */
    index?: number;
    /** The template position relative to the mockup. */
    location?: PointF;
}
/**
* A structure holding settings to create a surface from a state file.
* @example
* ``` js
* const productDefinition = {
*    surfaces: [{
*        // Initialize a surface through a state file.
*        stateId: "ed867273-5679-4927-b718-a53e92d6802c",
*        // Select a surface index in the state file.
*        surface: 2,
*        // Apply a background mockup to the surface.
*        mockup: {
*            down: "tshirt"
*        },
*        // Specify the design location relative to the mockup.
*        location: { x: 120, y: 0 }
*    }]
* };
* ```
* @public
*/
export interface ISurfaceFromState extends ISurfaceTemplate {
    /** The name of a state file. */
    stateId: string;
    /** A surface index in the state file. The default value is `0` that stands for the first surface. */
    surface?: number;
    /** Coordinates of the design relative to the upper-left corner of the mockup, in points. */
    location?: PointF;
}
/**
* A structure holding parameters of the folding mode of backgrounds.
* @example
* ``` js
* const product = {
*    surfaces: [{
*        foldingLines: [{ pen: { color: "white" } }],
*        bgFoldingMode: {
*            enabled: true,
*            flip: {
*                enabled: true,
*                order: "Odd"
*            }
*        },
*        printAreas: [{ designFile: "leaflet" }]
*    }]
* };
* ```
* @public
*/
export interface IBgFoldingModeParams {
    /** Enables the folding mode for backgrounds. If `true`, Design Editor replicates a background image in design areas separated by folding lines. The default value is `false`. */
    enabled?: boolean;
    /** Settings of the background flip for products with folding lines. */
    flip?: {
        /** Allows you to flip backgrounds in the folding mode. The default value is `false`. */
        enabled?: boolean;
        /** The flip order for backgrounds in the folding mode. The `"Even"` order adds the original image to the background first and then the flipped image. The `"Odd"` order places the flipped image first. The default value is `"Even"`. */
        order?: "Even" | "Odd";
    };
}
/**
* A structure holding settings for a folding line.
* @remarks For details, see the {@link https://customerscanvas.com/dev/editors/iframe-api/product-definition/folding-lines-and-spines.html|Folding lines} topic.
* @example
* ``` js
* const fold = {
*    isVertical: false,
*    bleed: 10,
*    pen: { color: "green" }
* };
*
* // Load the editor.
* CustomersCanvas.IframeApi.loadEditor(
*    iframe,
*    {
*        surfaces: [{
*            height: 600, width: 800,
*            foldingLines: [fold]
*        }]
*    }
* );
* ```
* @public
*/
export interface IFoldingLine {
    /** If `true`, then the folding line is vertical, otherwise it is horizontal. The default value is `true`. */
    isVertical?: boolean;
    /** Defines the absolute or relative location of the folding line on the product, in points or percent. For vertical lines, it defines the x-axis offset from the left edge. For horizontal lines, it defines the y-axis offset from the top edge of the product. To set the relative offset in percent, add the percent sign to the number. The default value is `"50%"`. */
    margin?: string;
    /** Defines offset for the folding line, in points, depending on its orientation. It is a top/bottom offset for the vertical line and a left/right offset for the horizontal line. The default value is `0`. */
    bleed?: number;
    /**  Configures the outline of the folding line. */
    pen?: {
        /** Line width. */
        width?: number;
        /** A dash step, in pixels. */
        dashStep?: number;
        /** The main color of the folding line. */
        color?: string;
        /** The alt color of the folding line. */
        altColor?: string;
    };
}
/**
 * A structure holding spine settings.
 * @remarks For details, see the {@link https://customerscanvas.com/dev/editors/iframe-api/product-definition/folding-lines-and-spines.html|Folding lines and spines} topic.
 * @example
 * ``` js
 * const productDefinition = {
 *   surfaces: [{
 *       spines: [{
 *           isVertical: false,
 *           width: 20,
 *           bleed: 10,
 *           pen: {
 *               color: "green"
 *           },
 *           fillColor: "lightGreen"
 *       }],
 *       printAreas: [{
 *           designFile: "book"
 *       }]
 *   }]
 * };
 * ```
 * @public
 */
export interface ISpine extends IFoldingLine {
    /** Spine width, in points. */
    width?: number;
    /** Spine fill color. */
    fillColor?: string;
}
/**
 * A structure representing basic print area features.
 * @example
 * ``` js
 * const productDefinition = {
 *   surfaces: [{
 *       printAreas: [{
 *           designFile: "texture",
 *           containers: [
 *               {
 *                   name: "foil",
 *                   type: "texture",
 *                   texture: "texture.jpg"
 *               },
 *               {
 *                   name: "spot",
 *                   type: "spotColor",
 *                   previewColor: "rgba(255,255,0,1)"
 *               }
 *           ],
 *           bleed: {
 *               top: 20, bottom: 20, left: 20, right: 20
 *           },
 *           slug: {
 *               top: 20, bottom: 20, left: 20, right: 20
 *           }
 *       }]
 *   }]
 * };
 * ```
 * @public
 */
export interface IBasePrintAreaDefinition extends IModelComponent {
    /** A collection of safety lines defined in the print area. */
    safetyLines?: ISafetyLine[];
    /** A collection of crop marks defined in the print area. */
    cropMarks?: ICropMark[];
    /** A collection of texture and spot color containers defined in the print area.
     * @remarks For backward compatibility only!
     */
    containers?: IChannelContainerDefinition[];
    /** Margins of the bleed area. */
    bleed?: IMargin;
    /** Margins of the slug area. The editor expands the product boundaries to accommodate the slug area. */
    slug?: IMargin;
    /** Properties of the hi-res output defined in the print area. */
    hiResOutput?: IHiResOutput;
}
/**
* A structure used for creating an empty print area.
* @example
* ``` js
* // Defining the product.
* let w = 720, h = 504; // in points (1 point = 1/72 inch)
*
* let emptyProduct = {
*    surfaces: [{
*        width: w,
*        height: h,
*        printAreas: [{
*            bounds: {
*                x: 0, y: 0, width: w, height: h
*            },
*            safetyLines: [{
*                margin: 8.5,
*                color: 'rgba(0,255,0,1)',
*                stepPx: 5,
*                widthPx: 1
*            }]
*        }]
*    }]
* };
* ```
* @public
*/
export interface IPrintAreaDefinition extends IBasePrintAreaDefinition {
    /** The print area bounds. */
    bounds: IRectangleF;
}
/**
* A structure creating a print area based on a PSD/IDML template.
* @example
* ``` js
* const productDefinition = {
*     surfaces: [{
*         printAreas: [{
*             designFile: "stamp",
*             safetyLines: [{
*                 margin: 5,
*                 color: "rgba(0,0,255,1)",
*                 altColor: "rgba(255,255,255,0)"
*             }]
*         }]
*     }]
* );
* ```
* @public
*/
export interface IPrintAreaTemplate extends IBasePrintAreaDefinition {
    /** The name of either PSD or IDML file, without extension. */
    designFile: string;
    /** Coordinates of the upper-left corner of the design relative to the mockup. */
    designLocation?: IPointF;
}
/**
* PDF page boxes.
* @public
*/
export declare enum PdfBox {
    /** CropBox */
    Crop = "Crop",
    /** TrimBox */
    Trim = "Trim",
    /** BleedBox */
    Bleed = "Bleed"
}
/**
 * A structure representing horizontal and vertical margins.
 * @remarks {@link ICropMark} and {@link ISafetyLine} use this structure.
 * @example
 * ```js
 * margin: {
 *     horizontal: 10,
 *     vertical: 8
 * }
 * ```
 * @public
 */
export interface IMarginHV {
    /** The horizontal margin. This value is used for both left and right margins. */
    horizontal: number;
    /** The vertical margin. This value is used for both top and bottom margins. */
    vertical: number;
}
/**
 * A structure representing left, top, right, and bottom margins.
 * @remarks {@link ISafetyLine} uses this structure.
 * @example
 * ``` js
 * margin: {
 *     left: 20,
 *     top: 10,
 *     right:10,
 *     bottom: 10
 * }
 * ```
 * @public
 */
export interface IMarginLTRB {
    /** The left margin. */
    left: number;
    /** The top margin. */
    top: number;
    /** The right margin. */
    right: number;
    /** The bottom margin. */
    bottom: number;
}
/**
* A structure holding settings for a safety line.
* @remarks For details, see the {@link https://customerscanvas.com/dev/editors/iframe-api/product-definition/bleeds-and-safety-zone.html|Bleed and Safety Zones} topic.
* @example
* ``` js
* // Defining the product.
* let w = 720, h = 504; // in points (1 point = 1/72 inch)
* let emptyProduct = {
*    surfaces: [{
*        width: w, height: h,
*        printAreas: [{
*            bounds: {
*                x: 0, y: 0, width: w, height: h
*            },
*            safetyLines: [{
*                margin: 8.5,
*                color: 'rgba(0,255,0,1)',
*                borderRadius: "10",
*                stepPx: 5,
*                widthPx: 1,
*                pdfBox: "Trim"
*            }]
*        }]
*    }]
* };
* ```
* @public
*/
export interface ISafetyLine {
    /** The name of the safety line. */
    name?: string;
    /** The distance between the safety line and the print area bounds, in points. The default value is `10` pt. */
    margin?: number | IMarginHV | IMarginLTRB;
    /** The main color; a CSS-style color value. The default value is <code>"rgba(255,255,255,1)"</code>. */
    color?: string;
    /** The alternate color; a CSS-style color value. The default value is <code>"rgba(0,0,0,1)"</code>. */
    altColor?: string;
    /** The dash length in pixels; the safety line is always a dashed line. The default value is `10` px. */
    stepPx?: number;
    /** The line width, in pixels. The default value is `1` px. */
    widthPx?: number;
    /** The definition of rounded corners in the CSS format. You can set up the radius in points, in percent, or through the width and height of ellipses. By default, the safety zone is not rounded. */
    borderRadius?: string;
    /** The rectangle to wich the hi-res outputs are cropped: to CropBox, TrimBox, or BleedBox. By default, resulting PDF images are not cropped. Design Editor applies margins of the safety line to the corresponding PDF page box. */
    pdfBox?: PdfBox;
}
/**
* Text alignment options.
* @public
*/
export declare enum CropMarkTextAlignment {
    Left = 0,
    Center = 1,
    Right = 2
}
/**
 * A structure holding settings for page information on hi-res outputs.
 * @remarks For details, see the {@link https://customerscanvas.com/dev/editors/iframe-api/rendering/cropping-marks.html|Cropping marks} topic.
 * @example
 * ``` js
 * const product = {
 *   surfaces: [{
 *       printAreas: [{
 *           designFile: "envelope",
 *           designLocation: { X: 4.1, Y: 4.1 },
 *           cropMarks: [{
 *               margin: 8.5,
 *               color: "cmyk(0, 1, 1, 0, 1)",
 *               widthPx: 1,
 *               length: 6,
 *               fontSize: 4,
 *               leftNotes: [{
 *                   text: "Page information"
 *               }]
 *           }]
 *       }]
 *   }
 * ]
* ```
* @public
*/
export interface ICropMarkText {
    /** The page information alignment. The default value is `"Left"`. */
    alignment?: CropMarkTextAlignment;
    /** The font size of the text. The default value is `3`. */
    fontSize?: number;
    /** The page information to be placed on the hi-res output. */
    text: string;
}
/**
 * A structure holding settings for a crop mark.
 * @remarks For details, see the {@link https://customerscanvas.com/dev/editors/iframe-api/rendering/cropping-marks.html|Cropping marks} topic.
 * @example
 * ``` js
 * const product = {
 *   surfaces: [{
 *       printAreas: [{
 *           designFile: "envelope",
 *           designLocation: { X: 4.1, Y: 4.1 },
 *           cropMarks: [{
 *               margin: 8.5,
 *               color: "cmyk(0, 1, 1, 0, 1)",
 *               widthPx: 1,
 *               length: 6,
 *               fontSize: 4,
 *               leftNotes: [{
 *                   text: "Page information"
 *               }]
 *           }]
 *       }]
 *   }]
 * };
* ```
* @public
*/
export interface ICropMark {
    /** The name of the crop mark. */
    name?: string;
    /** The distance between a crop mark and the surface bounds, in points. The default value is `10`. */
    margin?: number | IMarginHV;
    /** The color of crop marks, in the CSS color format. The default value is black, <code>"rgba(0,0,0,1)"</code>. */
    color?: string;
    /** The line width, in pixels. The default value is `1`. */
    widthPx?: number;
    /** The length of the crop mark, in points. The default value is `8`. */
    length?: number | IMarginHV;
    /** The page information. */
    texts?: ICropMarkText[];
}
/**
 * A structure holding settings for proof images.
 * @example
 * ``` js
 * const emptyProduct = {
 *    surfaces: [{
 *       width: 720,
 *       height: 504,
 *       proofImage: {
 *           fileFormat: "PNG",
 *           rgbColorProfileName: "Adobe RGB (1998)",
 *           mockupEnabled: false
 *       }
 *    }]
 * };
 * ```
 * @public
 */
export interface IProofImage {
    /** The type of preview files. It can be either `"JPEG"` or `"PNG"`. The default value is `"JPEG"`. */
    fileFormat?: string;
    /** Allows for drawing safety lines on proof images. The default value is `true`. */
    safetyLinesEnabled?: 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. */
    cropSafetyLineName?: string;
    /** Displays spines and folding lines on proof images. The default value is `true`. */
    spineAndFoldingLinesEnabled?: boolean;
    /** Displays mockups on proof images. The default value is `true`. */
    mockupEnabled?: boolean;
    /** Displays stub images and text hints in unfilled placeholders. The default value is `false`. */
    showStubContent?: boolean;
    /** The flip mode of proof images. Allows for flipping proof images. Possible values are `"none"`, `"vertical"`, `"horizontal"`, and `"both"`. The default value is `"none"`. */
    flipMode?: 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"`. */
    rotateMode?: string;
    /** The interpolation algorithm used for resizing proof images. You can find the list of supported algorithms in the specification of the <a href="https://www.graphicsmill.com/docs/gm/T_Aurigma_GraphicsMill_Transforms_ResizeInterpolationMode.htm" target="_blank" class="external">Aurigma Graphics Mill</a> library. For example, you can use `"Lanczos"`, `"NearestNeighbour"`, and other algorithms. By default, no interpolation algorithms are applied to resize proof images. */
    interpolationMode?: string;
    /** If `true`, displays hints for unfilled in-string placeholders on proof images. The default value is `false`. */
    inStringPlaceholderHintsEnabled?: boolean;
}
/**
 * A structure holding the hi-res output settings.
 * @example
 * ``` js
 * const product = {
 *   surfaces: [{
 *       printAreas: [{
 *           designFile: "Envelope",
 *           hiResOutput: {
 *               fileFormat: "PDF",
 *               cmykColorProfileName: "US Sheetfed Coated v2",
 *               dpi: 400,
 *               flipMode: "both",
 *               rotateMode: "rotate90"
 *           }
 *       }]
 *   }]
 * };
 * ```
 * @public
 */
export interface IHiResOutput {
    /** Hi-res output resolution in dots per inch (DPI). */
    dpi?: 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"`. */
    fileFormat?: string;
    /** The color space of the hi-res output. It can have one of the following values: `"RGB"`, `"CMYK"`, or `"Grayscale"`. */
    colorSpace?: string;
    /** The background color of the hi-res output. */
    backgroundColor?: 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"`. */
    compression?: 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`. */
    jpegCompressionQuality?: number;
    /** The flip mode of 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"`. */
    flipMode?: 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"`. */
    rotateMode?: string;
    /** If `true`, displays hints for unfilled in-string placeholders in hi-res outputs. The default value is `false`. */
    inStringPlaceholderHintsEnabled?: string;
}
/**
* A structure holding the mockup settings.
* @public
*/
export interface IMockupData {
    /** The product surface where the mockup sets to. */
    surface: Surface;
    /** The mockup to set. */
    mockup?: IMockupTemplate;
    /** The preview mockups to set. */
    previewMockups?: IMockupTemplate[];
}
/**
 * A structure holding a state file name and an array of surface names.
 * @example
 * ``` js
 * let product = await editor.getProduct();
 *
 * // Add the first three pages from the state file to the product.
 * await product.addSurfaces({
 *     stateId: "3c040958-bfa8-4a3e-b3af-cff9257e7fa1",
 *     surfaces: ["0", "surface_1", "surface_2"]
 * })
 * // If an error occurred while adding pages to the product.
 * .catch(error => console.error("Adding surfaces failed with exception: ", error));
 * ```
 * @public
 */
export interface IStateSurfaces {
    /** The name of a state file. */
    stateId: string;
    /** An array of surface names or indexes starting from `0`. When you skip this array, all pages of the state file are added to a product. */
    surfaces?: string[];
    /** A new name of surfaces. */
    name?: string;
}
/**
 * A structure holding a state file name and a surface name or a surface index.
 * @example
 * ``` js
 * let product = await editor.getProduct();
 *
 * // Add the third page from the state file.
 * await product.addSurface({
 *     stateId: "3c040958-bfa8-4a3e-b3af-cff9257e7fa1",
 *     surface: "2"
 * })
 * // If an error occurred while adding the page to the product.
 * .catch(error => console.error("Adding surfaces failed with exception: ", error));
 * ```
 * @public
 */
export interface IStateSurface {
    /** The name of a state file. */
    stateId: string;
    /** Either name or index of a surface to be added to your product. The surface indexes start from `0`. By default, the first page is added to a product. */
    surface?: string;
    /** A new name of surface. */
    name?: string;
}
/**
 * A structure defining options for managing history and surface size when changing mockups.
 * @remarks {@link Product.setMockups} uses this structure.
 * @example
 * ``` js
 * options: {
 *     updateRevertData: false,
 *     addToHistory: false,
 *     updateSurfaceSize: true,
 *     resetHistory: true
 * }
 * ```
 * @public
 */
export interface ISetMockupOptions {
    /** If `true`, the new mockup is stored as one to restore when the product is reverted. Otherwise, the previously stored mockup is restored on a product revert. The default value is `true`. */
    updateRevertData?: boolean;
    /** If `true`, adds a new user action to the history to allow your users to revert new mockups by using the **Undo** button. If `false`, will not add a single action to the history, because of that the mockup can be reverted together with the following user action. The default value is `true`. */
    addToHistory?: boolean;
    /** If `true`, changes the surface size to match the new mockup. If `false`, the surface size remains unchanged. The default value is `false`. */
    updateSurfaceSize?: boolean;
    /** If `true`, resets the history of user actions after changing the mockups. The default value is `false`. */
    resetHistory?: boolean;
}
/**
 * A structure defining options for managing history when changing a product theme.
 * @remarks {@link Editor.applyProductTheme} uses this structure.
 * @example
 * ``` js
 * options: {
 *     addToHistory: false
 * }
 * ```
 * @public
 */
export interface IApplyProductThemeOptions {
    /** If `true`, adds a new user action to the history to allow your users to revert the applied theme using the **Undo** button. The default value is `true`. */
    addToHistory?: boolean;
}
/**
 * A basic component containing the name and ID of a component.
 * @public
 */
export declare class ModelComponent {
    /** A unique identifier. */
    id: string;
    /** The item name. */
    name: string;
    /** @internal */
    constructor(rawComponent: {});
}
/**
 * A Customer's Canvas product.
 * @public
 */
export declare class Product extends ModelComponent {
    private _context;
    /**
     * Product surfaces (pages).
     * @example
     * ``` js
     * editor.getProduct()
     *   .then(function (product) {
     *       // Get the current surface index.
     *       const indexOfCurrentSurface = product.surfaces.lastIndexOf(product.currentSurface);
     *       if (indexOfCurrentSurface < 0)
     *           throw "Surface not found!";
     *
     *       let indexOfNextSurface = indexOfCurrentSurface + 1;
     *       if (indexOfNextSurface > (product.surfaces.length - 1))
     *           indexOfNextSurface = 0;
     *
     *       // Switch to the next surface.
     *       return product.switchTo(product.surfaces[indexOfNextSurface]);
     *   })
     *   .then(function(result) {
     *       console.log("Surface switched");
     *   })
     *   .catch(function (error) {
     *       console.error("Switching the surfaces failed with exception: ", error);
     *   });
     * ```
     */
    surfaces: Surface[];
    /**
     * A surface (page) currently opened in the editor.
     * @example
     * ``` js
     * editor.getProduct()
     *   .then(function (product) {
     *       // Remove the current surface.
     *       product.removeSurface(product.currentSurface)
     *           .then(function(result) {
     *               console.log("Surface removed");
     *           });
     *   })
     *   // If there was an error thrown while removing the surface.
     *   .catch(function (error) {
     *       console.error("Removing the surface failed with exception: ", error);
     *   });
     * ```
     */
    currentSurface: Surface;
    /** @internal */
    constructor(rawProduct: {}, _context: Editor.IContext);
    /**
     * Swaps two surfaces (pages) in the product.
     * @param lhsSurface - The first surface (page) to swap.
     * @param rhsSurface - The second surface (page) to swap.
     * @returns The product instance where the surfaces (pages) were swapped.
     * @example
     * ``` js
     * let product = await editor.getProduct();
     *
     * // Swap the first and last pages in the product.
     * product = await product.swapSurfaces(product.surfaces[0], product.surfaces[product.surfaces.length - 1])
     *       // If an error occurred while swapping pages in the product.
     *       .catch(error => console.error("Swapping surfaces failed with exception: ", error));
     * ```
     */
    swapSurfaces(lhsSurface: Surface, rhsSurface: Surface): Promise<Product>;
    /**
     * Replaces a product.
     * @param surfaces - An array of the new surfaces.
     * @returns The product instance with the new surfaces.
     * @example
     * ``` js
     * let product = await editor.getProduct();
     *
     * // Replace the product with two new pages.
     * product = await product.setSurfaces([
     *     { width: 300, height: 300 },
     *     { designFile: "postcard" }
     * ])
     * // If an error occurred while replacing pages in the product.
     * .catch(error => console.error("Setting surfaces failed with exception: ", error));
     * ```
     */
    setSurfaces(surfaces: SurfaceTypes[]): Promise<Product>;
    /**
     * Adds a number of surfaces (pages) to the product.
     * @param surfaces - An array of surfaces (pages) to add.
     * @param position - A position in the surface array where new surfaces should be added. The index of the first surface is `0`. By default, this method adds pages to the end of the surface array.
     * @returns The product instance where the surfaces (pages) were added.
     * @example
     * ``` js
     * let product = await editor.getProduct();
     *
     * // Add an empty page and the "postcard" template to the beginning.
     * product = await product.addSurfaces(
     *     [{ width: 300, height: 300 }, { designFile: "postcard" }],
     *     0
     * )
     * // If an error occurred while adding pages to the product.
     * .catch(error => console.error("Adding surfaces failed with exception: ", error));
     * ```
     */
    addSurfaces(surfaces: SurfaceTypes[] | IStateSurfaces, position?: number): Promise<Product>;
    /**
     * Adds the given surface (page) to the product.
     * @param surface - A surface (page) to add.
     * @param position - A position in the surface array where the new surface (page) should be added. The index of the first surface is `0`. By default, this method adds pages to the end of the surface array.
     * @returns The product instance where the surface (page) was added.
     * @example
     * ``` js
     *   // Let us add a back side to the postcard.
     *   editor.getProduct()
     *       // When we get the product.
     *       .then(function(product) {
     *           // If postcard has no back side.
     *           if (product.surfaces.length < 2) {
     *               // Adding the back to the loaded product.
     *               return product.addSurface(
     *                   {
     *                       // Defining the template file.
     *                       printAreas: [{ designFile: "postcard_side2"}]
     *                   })
     *                   // If the back side is added to the postcard.
     *                   .then(function(newProduct) {
     *                       // Replace the loaded product with the new one.
     *                       product = newProduct;
     *                   });
     *           }
     *       })
     *       // If there was an error while getting the product or adding a back side to the postcard.
     *       .catch(function (error) {
     *           console.error("Adding surface failed with exception: ", error);
     *       });
     * ```
     */
    addSurface(surface: SurfaceTypes | IStateSurface, position?: number): Promise<Product>;
    /**
     * Removes the given surface (page) from the product.
     * @param surface - A surface (page) to remove.
     * @returns The product instance where the surface (page) was removed from.
     * @example
     * ``` js
     * let product = await editor.getProduct();
     *
     * // Remove the current surface.
     * product = await product.removeSurface(product.currentSurface)
     *     // If there was an error thrown while removing the surface.
     *     .catch(error => console.error("Removing the surface failed with exception: ", error));
     * ```
     */
    removeSurface(surface: Surface): Promise<Product>;
    /**
     * Opens the given product surface in the designer.
     * @param surface - A surface (page) to open.
     * @returns The product with the given surface (page) opened.
     * @example
     * ``` js
     * editor.getProduct()
     *   .then(function (product) {
     *       // Get the current surface index.
     *       const indexOfCurrentSurface = product.surfaces.lastIndexOf(product.currentSurface);
     *       if (indexOfCurrentSurface < 0)
     *           throw "Surface not found!";
     *
     *       let indexOfNextSurface = indexOfCurrentSurface + 1;
     *       if (indexOfNextSurface > (product.surfaces.length - 1))
     *           indexOfNextSurface = 0;
     *
     *       // Switch to the next surface.
     *       return product.switchTo(product.surfaces[indexOfNextSurface]);
     *   })
     *   .then(function(result) {
     *       console.log("Surface switched");
     *   })
     *   .catch(function (error) {
     *       console.error("Switching the surfaces failed with exception: ", error);
     *   });
     * ```
     */
    switchTo(surface: Surface): Promise<Product>;
    /**
     * Reads product tags.
     * @returns The dictionary of product tags.
     */
    getTags(): Promise<ITagsDictionary>;
    /**
     * Specifies tags for the product.
     * @param tags - The tags that you want to specify for the product.
     * @example
     * ``` js
     * let newTags = {
     *     "product": "postcard",
     *     "design": "flowers",
     *     "colorTheme": "red"
     * };
     *
     * let product = await editor.getProduct();
     * await product.setTags(newTags)
     *     .catch(error => console.error("Setting tags failed with exception: ", error));
     * ```
     */
    setTags(tags: ITagsDictionary): Promise<void>;
    /**
     * Sets mockups for several product pages.
     * @param mockupsData - The product surface with mockups and preview mockups.
     * @param options - Additional options for managing history and surface size.
     * @returns A new product instance containing the changed surfaces.
     * @example
     * ``` js
     *   let newMockups = [
     *       {
     *           surface: product.surfaces[0],
     *           mockup: null
     *       }, {
     *           surface: product.surfaces[1],
     *           mockup: { up: "mockup1" }
     *       }, {
     *           surface: product.surfaces[2],
     *           mockup: { up: "mockup2" }
     *       }
     *   ];
     *   let options = {
     *       addToHistory: false,
     *       resetHistory: true,
     *       updateSurfaceSize: true
     *   };
     *   let product = await editor.getProduct();
     *   product = await product.setMockups(newMockups, options)
     *       .catch(error => console.error("Failed to set up the mockups: ", error));
     * ```
     */
    setMockups(mockupsData: IMockupData[], options?: ISetMockupOptions): Promise<Product>;
    /**
    * Applies a color theme to the product.
    * @param theme - A name of a color theme defined for the current product or through the **clientConfig.json** file.
    * @param options - Options for managing the history of user actions.
    * @example
    * ``` js
    * // Define a color theme.
    * const productTheme = {
    *     "violet": {
    *         "C01": "rgb(102,45,145)",
    *         "C02": "rgb(150,67,214)",
    *         "C03": "rgb(190,107,255)",
    *         "C04": "rgb(32,18,77)"
    *     }
    * };
    *
    * // Enable the violet theme.
    * const editor = await CustomersCanvas.IframeApi.loadEditor(iframe, productDefinition,
    *     { productThemes: productTheme, defaultProductTheme: "violet" })
    *                        // If an error occurred while loading the editor.
    *                        .catch(e => console.log(e));
    *
    * // If the editor has been successfully loaded, change the color theme.
    * await editor.applyProductTheme({
    *             "C01": "rgb(241,160,175)",
    *             "C02": "rgb(255,200,214)",
    *             "C03": "rgb(255,255,255)",
    *             "C04": "rgb(224,102,102)"
    *         },
    * // Don't save the theme change in the history.
    *         {
    *             addToHistory: false
    *         });
    * ```
    */
    applyProductTheme(theme: string | IProductThemeConfig, options?: IApplyProductThemeOptions): Promise<void>;
    /**
    * Lists all design elements in the product.
    * @param options - Additional parameters. You can pass `options.includeMockup` with the value `false` to not add mockup items to the list. By default, mockup items will be added to the resulting array.
    * @returns An array of elements from all product pages.
    * @example
    * ``` js
    * let product = await editor.getProduct();
    * // Get the item list.
    * const items = await product.getAllItems({includeMockup: false});
    * console.log("The product contains " + items.length + " design elements");
    * ```
    */
    getAllItems(options?: {
        includeMockup: boolean;
    }): Promise<Item[]>;
    getProductModel(): Promise<CCProduct>;
    setProductModel(product: CCProduct): Promise<unknown>;
    /**
    * Gets the bounding rectangles for design elements with regard to their rotation.
    * @param ids - An array of item identifiers.
    * @returns An array of item bounds, in points.
    * @example In the following example, `toRectangleF()` returns the bounds without taking into account the item rotation, i.e. the vertically or horizontally oriented rectangle, whereas `rotatedRect` contains the rotation `angle` and `bounds`.
    * ``` js
    * const ids = (await editor.getSelectedItems()).map(item => item.id);
    * if (ids.length > 0) {
    *
    *    var product = await editor.getProduct();
    *    var rectangles = await product.getItemRectangles(ids);
    *    var message = "";
    *    for (let i = 0; i < rectangles.length; i++) {
    *        const rotatedRect = rectangles[i];
    *        const rect = rotatedRect.toRectangleF();
    *        message += "Item with " + ids[i] +
    *            " has: width: " + rect.width.toFixed(2) +
    *            ", height: " + rect.height.toFixed(2) +
    *            ", location: (" + rect.left.toFixed(2) + ", " + rect.top.toFixed(2) + ")" +
    *            ", angle: " + rotatedRect.angle.toFixed(2) + "\n";
    *    }
    *
    *    console.log(message);
    * }
    * ```
    */
    getItemRectangles(ids: string[]): Promise<RotatedRectangleF[]>;
    getItems(predicate: (item: CCBaseItem, args?: object) => boolean, args?: object): Promise<CCBaseItem[]>;
    setItem(item: CCBaseItem): Promise<unknown>;
    getItemById(id: string): Promise<CCBaseItem>;
    getItemByName(name: string): Promise<CCBaseItem>;
    removeItems(predicate: (item: CCBaseItem, args?: object) => boolean, args?: object): Promise<string[]>;
    removeItemById(id: string): Promise<void>;
    removeItemByName(name: string): Promise<void>;
    /**
    * Lists all variable items in the product.
    * @returns An array of variable items. The `isVariable` property of these design elements is set to `true`. Also, this array contains in-string and interpolation placeholders.
    * @example
    * ``` js
    * let product = await editor.getProduct();
    * let items = await product.getVariableItems();
    * if (items.length)
    *     items.forEach(item => console.log(item.name));
    * else
    *     console.log("This product contains no variable items.");
    * ```
    */
    getVariableItems(): Promise<IVariable[]>;
    get currentSurfaceIndex(): number;
    /**
    * Sets an image or a plain color to the background.
    * @param surfaces - An array of surfaces where the background should be changed.
    * @param data - Either an object representing the image metadata or a string representing th