import { RuntimeConfiguration } from "./RuntimeConfiguration"; import { Product, Item, IApplyProductThemeOptions } from "./ObjectModel/ObjectModel"; import { Client } from "./PostMessage/Client"; import { Item as CcItem } from "@aurigma/design-atoms-model/Product/Items"; import { PointF } from "@aurigma/design-atoms-model/Math"; import { ZoomMode } from "@aurigma/design-atoms/Viewer"; import { IDataSet, IItemsData } from "@aurigma/design-atoms-model/Product/Interfaces"; import { IConfiguration, IProductThemeConfig, IThemeConfiguration } from "./Configuration/ConfigurationInterfaces"; import { IBarcodeData } from "./Configuration/Barcode"; import { CommandManager } from "./CommandManager"; /** * Represents the Design Editor. * @public */ export declare class Editor { private _iframe; /** Performs operations on design elements, surfaces, print areas, and the entire product. */ commandManager: CommandManager; private _postMessageClient; private _context; private _configuration; static get version(): string; /** @internal */ constructor(_iframe: HTMLIFrameElement, postMessageClient: Client, editorUrl: string, config?: IConfiguration); /** * Renders proof images (72 DPI). * @param options - Parameters of proof images. Note, when defining the width and height, the resulting image will be proportionally resized to fit the defined rectangle. For example, if the maximum width and height are both set to `640` pixels, then a `1280 x 960` px image will be resized to `640 x 480` px. When using _mockups_, specify the size of proof images more than or equal to the preview mockup size to avoid loss of the image quality. * @param data - Parameters of variable data printing. You can pass either `dataSet` or `itemsData` into this method. * @returns Returns an array of temporary links to proof images. * @example * ``` js * // Getting links to proof images. * const renderingResults = await editor.getProofImages({maxHeight: 720, maxWidth: 720, pregeneratePreviewImages: true}) * // If an error occurred while getting links to proof images. * .catch(error => console.error("Getting proof images failed with exception: ", error)); * * // If the links to proof images were generated successfully, get the links from the promise properties. * proofImageUrls = renderingResults.proofImageUrls; * ``` */ getProofImages(options?: Editor.IGetProofImagesOptions, data?: Editor.IVdpData): Promise; /** * Saves the current product state and returns links to the hi-res output. * @param options - Parameters of the hi-res and preview images. * @param data - Parameters of variable data printing. You can pass either `dataSet` or `itemsData` into this method. * @returns Returns a promise with the resulting product details: the bounding rectangle, links to the hi-res output, permanent links to proof images, a return-to-edit URL, user changes, userId, and stateId. * @example * ``` js * // Completing product customization. * const productDetails = await editor.finishProductDesign() * // If an error occurred while completing product customization. * .catch(error => console.error("Completing product customization failed with exception: ", error)); * * // If product customization is completed successfully, get the promise properties. * stateId = productDetails.stateId; * userId = productDetails.userId; * userChanges = productDetails.userChanges; * console.log("Text user changes: ", userChanges.texts); * ``` */ finishProductDesign(options?: Editor.IFinishProductDesignOptions, data?: Editor.IVdpData): Promise; /** * Saves a product current state. * @param stateId - Specifies a state file name without an extension, up to 36 symbols length. If such a file exists, it will be overwritten. You can pass this parameter for any user except `master` and `default`. If you omit this parameter, then a new file name is generated. * @param data - Data for personalization. You can pass either `dataSet` or `itemsData` into this method. * @param options - Define how the personalization data should be applied. * @returns Returns a promise with a return-to-edit URL, userId, and stateId. * @example * ``` js * // Saving a product to the "t-shirt.st" file. * const savingResults = await editor.saveProduct("t-shirt") * // If an error occurred while saving the product. * .catch(error => console.error("Saving product failed with exception: ", error)); * * // If the product is saved correctly, get the promise properties. * userId = savingResults.userId; * stateId = savingResults.stateId; * returnToEditUrl = savingResults.returnToEditUrl; * console.log("User " + userId + " successfully saved state " + stateId); * ``` */ saveProduct(stateId?: string, data?: Editor.IVdpData, options?: Editor.ISaveProductOptions): Promise; /** * Cancels all changes made by a user. * @param revertToinitial - Enables reverting the user changes to the initial product state. `false` allows for reverting to the print areas which were set by `Surface.setPrintAreas()` with `updateRevertData` set to `true`. `true` allows for reverting to the initial product despite the `updateRevertData` parameter. The default value is `false`. */ revertProduct(revertToinitial?: boolean): Promise; /** * Reverts the last user action on the canvas. */ undo(): Promise; /** * Recovers the last user action on the canvas, which was reverted by the **Undo** command/button. */ redo(): Promise; /** * Populates a product with user data. * @remarks Warning! This method is time-consuming. For optimization, you can populate a product template when it is loading into the editor with {@link https://customerscanvas.com/dev/editors/iframe-api/howto/user-info.html|autoLoadUserInfo} enabled. * @param data - An object holding key-value pairs. The key is a layer name or an in-string placeholder name without markers and extra symbols. The value is a text or barcode data you want to insert into it. If you omit this parameter, then the `userInfo` passed to the editor during the initial `loadEditor` call is used. * @param options - Options defining how the user info should be reflected in the history. You can now skip adding these changes to the history as well as replace the last snapshot. * @example * ``` js * let data = { * "Name": "Alex Smith", * "Position": "Manager", * "ID": { * "BarcodeFormat": "EAN_8", * "BarcodeValue": "1234567" * } * }; * * // Load the web-to-print editor. * let editor = await CustomersCanvas.IframeApi.loadEditor(iframe, productDefinition, configuration); * * // Populate the product with user data. * editor.loadUserInfo(data); * ``` */ loadUserInfo(data?: Editor.IUserInfo, options?: Editor.ILoadUserInfoOptions): Promise; /** * Validates the provided user info. * @param data - An object holdsing key-value pairs. The key is a layer name or an in-string placeholder name without markers and extra symbols. The value is a text or barcode date you want to load into the editor. * @example * ``` js * const data = { * "Name": "Alex Smith", * "Position": "Manager", * "ID": { * "BarcodeFormat": "EAN_8", * "BarcodeValue": "1234567" * } * }; * * // Load the web-to-print editor. * const editor = await CustomersCanvas.IframeApi.loadEditor(iframe, productDefinition, configuration)) * // If an error occurred while loading the editor. * .catch(e => console.log(e)); * * // Validate userInfo. * const validationResults = await editor.validateUserInfo(data); * if (validationResults.error) { * // Output the error. * console.error(validationResults); * return; * } * * // Populate the product with valid user data. * editor.loadUserInfo(data); * ``` */ validateUserInfo(data: Editor.IUserInfo): Promise; /** * Gets a list of layers that have not been personalized by the user. * @remarks The resulting list will only contain text items and placeholders that were not changed by the user. * @returns A list of layers that have not been personalized by the user. * @example * ``` js * const unchangedItems = editor.getUnchangedItems(); * * if (unchangedItems.items.length > 0) { * unchangedItems.items.forEach(function (logItems) { * console.log(logItems); * }); * } * else * { * console.log("There are no unchanged items"); * } * ``` */ getUnchangedItems(): Promise; /** * Links an event with a handler function. * @remarks The `Events` object contains the supported events. * @param event - The event to link the handler function with. * @param handler - The handler function to link with the given event. * @example The following snippet subscribes to the `Events.BoundsNotification` event and outputs the event arguments to the console: * ``` js * const editor = await CustomersCanvas.IframeApi.loadEditor(iframe, productDefinition); * editor.subscribe(CustomersCanvas.IframeApi.PostMessage.Events.BoundsNotification, (args) => { * console.log("BoundsNotification was triggered."); * console.log(JSON.stringify(args, null, 4)); * }); * editor.subscribe(CustomersCanvas.IframeApi.PostMessage.Events.PrintAreaBoundsChanged, (args) => { * console.log("PrintAreaBoundsChanged"); * console.log(args); * }); * ``` */ subscribe(event: string, handler: (...args: any[]) => void): void; /** * Returns the product currently loaded in the editor. * @returns The product loaded in the editor. * @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 an error occurred while getting the product or adding a back side to the postcard. * .catch(function (error) { * console.error("Adding surface failed with exception: ", error); * }); * ``` */ getProduct(): Promise; /** @internal */ replaceInterpolationPlaceholders(): void; /** @internal */ get configuration(): RuntimeConfiguration; /** * Applies a color theme to the loaded product. * @param theme - The name of a color theme defined for the configuration or a theme definition. * @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(error => console.error("The editor failed to load with an exception: ", error)); * * // 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 to the history. * { * addToHistory: false * }); * ``` */ applyProductTheme(theme: string | IProductThemeConfig, options?: IApplyProductThemeOptions): Promise; /** @internal */ eval(code: string | Function, ...args: any[]): Promise; /** * Releases all resources used by the editor. */ dispose(): void; /** * Gets an array of selected design elements. * @example * ``` 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); * } * ``` */ getSelectedItems(): Promise; /** * Selects the specified design elements on the current surface. * @remarks You can call {@link (Editor:class).getSelectedItems} to access the items. * @param items - An array of objects that contain design element names. * @example * ``` js * editor.selectItems([ * { * "name": "Contact" * }, * { * "name": "Address" * } * ]); * ``` */ selectItems(items: CcItem[]): Promise; /** * Deselects design elements on the current surface. * @example * ``` js * editor.clearSelection(); * ``` */ clearSelection(): Promise; /** * Selects all design elements on the current surface. * @remarks You can call {@link (Editor:class).getSelectedItems} to access the items. * @example * ``` js * editor.selectAllItems(); * ``` */ selectAllItems(): Promise; /** * Changes Parameters of displaying the propuct on the canvas. * @param settings - An object defining the appearance of the canvas. * @example * ``` js * // Changing the zoom and scroll position. * editor.setViewerSettings({zoom: 0.1, zoomMode: 'bestFit', scrollPosition: {x: 0, y: 0}}) * .catch(error => { * console.error("Changing the canvas settings failed with exception: ", error); * }); * ``` * @public */ setViewerSettings(settings: Editor.IViewerSettings): Promise; /** * Opens the Asset Manager with the listed asset tabs to add a new image to the design. * @param params - Parameters defining the appearance of the Asset Manager. In the `params.tabs` array, pass the names of the required asset sources. * @param action - An action that should be applied to the product, either `"layout"` to change layouts or `"fillPlaceholders"` to automatically fill out image placeholders. By default, the Action Manager opens to add an image to the design. * @example After you have defined the "My Files" and "Deposit Photos" asset sources, you can open the gallery with these tabs as follows: * ``` js * let editor = await CustomersCanvas.IframeApi.loadEditor(iframe, product, config); * editor.openGallery({ tabs: ["My Files", "Deposit Photos"] }); * ``` * * @example You can also open the Action Manager to change product layouts as follows: * ``` js * editor.openGallery({ tabs: ["Layouts"] }, "layout"); * ``` */ openGallery(params?: { tabs?: string[]; }, action?: "layout" | "fillPlaceholders"): Promise; /** * Opens the Asset Manager to select an image for the background layer. * @param params - Parameters defining the appearance of the Asset Manager. In the `params.tabs` array, pass the names of the required asset sources. * @example * ``` js * let editor = await CustomersCanvas.IframeApi.loadEditor(iframe, product, config); * editor.openGalleryForBackground({ tabs: ["Backgrounds"] }); * ``` */ openGalleryForBackground(params?: { tabs?: string[]; }): Promise; /** * Opens the Asset Manager to select an image for the specified item. * @param name - The name of the image you want to change. * @param params - Parameters defining the appearance of the Asset Manager. In the `params.tabs` array, pass the names of the required asset sources. * @example * ``` js * let editor = await CustomersCanvas.IframeApi.loadEditor(iframe, product, config); * editor.openGalleryForItem("Company Logo", { tabs: ["Logos"] }); * ``` */ openGalleryForItem(name: string, params?: { tabs?: string[]; }): Promise; /** * Changes a preloader image and the primary theme color. * @param conf - Defines the primary color and a new image for the standard preloader. * @example * ``` js * let editor = await CustomersCanvas.IframeApi.loadEditor(iframe, product, config); * await editor.setThemeConfiguration({ primaryColor: "rgb(120, 24, 123)" }); * ``` */ setThemeConfiguration(conf: IThemeConfiguration): Promise; updateConfiguration(config: IConfiguration): Promise; /** * Changes the visibility of the Object Inspector. It allows for displaying or hiding the Object Inspector during the editing process. * @example * ```js * let editor = await CustomersCanvas.IframeApi.loadEditor(iframe, product, config); * await editor.toggleObjectInspector(); * ``` */ toggleObjectInspector(): Promise; private _checkParams; } /** * Represents the Design Editor. * @remarks These interfaces define properties of the objects used as arguments of the methods of the Customer's Canvas IFrame API. * @public */ export declare namespace Editor { /** * A structure used by {@link (Editor:class).getProofImages} to store a return value. * @example * ``` js * // Getting links to proof images. * let links = await editor.getProofImages({maxHeight: 720, maxWidth: 720, pregeneratePreviewImages: true}) * // If an error occurred while getting links to proof images. * .catch(error => console.error("Getting proof images failed with exception: ", error)); * * // When the links to proof images have been generated successfully, get them from the promise properties. * let proofImageUrls = links.proofImageUrls; * ``` */ interface IProofResult { /** An array of temporary links to proof images. */ proofImageUrls: string[][]; } /** * A structure used by {@link (Editor:class).finishProductDesign} to store a return value. * @example * ``` js * let renderingResult = await editor.finishProductDesign() * // If an error occurred while completing product customization. * .catch(error => console.error("Completing product customization failed with exception: ", error)); * * // When product customization has been completed successfully, get the promise properties. * let stateId = renderingResult.stateId; * let userId = renderingResult.userId; * let userChanges = renderingResult.userChanges; * console.log("Text user changes: ", userChanges.texts); * ``` */ interface IFinishDesignResult { /** An array of permanent links to proof images. */ proofImageUrls: string[][]; /** An array of links to the hi-res output. */ hiResOutputUrls: string[]; /** A return-to-edit URL. This property is provided for backward compatibility only; it utilizes the old API based on a query string. */ returnToEditUrl: string; /** A product state identifier. */ stateId: string; /** The identifier of the user who currently works with the editor. Note that you can not use custom file names for saving states, working under the default user or the master user. */ userId: string; /** Returns an object containing all changes made by the user when personalizing the product. */ userChanges: IUserChanges; /** Coordinates of the rectangle bounding all items on the current surface, in points. For details, see the {@link https://customerscanvas.com/dev/editors/iframe-api/howto/calculating-design-area.html|Calculating a print area} topic. */ boundsData: { /** Width, height, and upper-left corner coordinates of the bounding rectangle of all items in the current surface, in points. */ currentSurface: { /** X-coordinate of the upper-left corner of bounding rectangle (relative to the print area). */ Left: number; /** Y-coordinate of the upper-left corner of bounding rectangle (relative to the print area). */ Top: number; /** Width of the bounding rectangle. */ Width: number; /** Height of the bounding rectangle. */ Height: number; }; }; /** For items having preflight problems, it provides the item name, item type, corresponding surface name and index, and states of violation warnings. This array allows for detecting products that have violations of the image resolution, safety lines, regions, and text clipping. */ violationWarningData: IViolationWarningData[]; } /** * A structure containing all changes the user made to the product when personalizing it. * @example * ``` js * // Completing product customization. * let renderingResult = await editor.finishProductDesign() * // If an error occurred while completing product customization. * .catch(error => console.error("Completing product customization failed with exception: ", error)); * * // When product customization has been completed successfully, get the promise properties. * let stateId = renderingResult.stateId; * let userId = renderingResult.userId; * let userChanges = renderingResult.userChanges; * console.log("Text user changes: ", userChanges.texts); * ``` */ interface IUserChanges { /** An array of texts entered by the user in text elements. For each text element, which was changed by the user, the corresponding object contains its name and new value. */ texts: { /** A name of the text element. */ name: string; /** A new value of the text element. */ usersValue: string; /** Defines whether the user added this text element to the canvas. This property is `true` for new elements and `false` for changed elements. */ isNewItem: boolean; /** Defines whether the user removed this text element from the canvas. This property is `true` for removed elements and `false` for changed elements. */ isRemovedItem?: boolean; }[]; /** An array of texts entered by the user in text placeholders. For each text placeholder, which was changed by the user, the corresponding object contains its name and new value. */ inStringPlaceholders: { /** A name of the in-string placeholder. */ name: string; /** A new value of the in-string placeholder. */ usersValue: string; }[]; /** An object containing array of mockups that the user set up. For each mockup, which was applied to a surface, the corresponding object contains the surface and mockup names. */ mockups: { /** The name of a mockup defined for a surface. */ [surfaceName: string]: string; }; /** An object containing user changes on a per-surface basis. Each surface, where the user changes text elements, has `texts` and `inStringPlaceholders` arrays with the element name and new value. */ surfaces: ISurfacesChanges; } /** * A structure containing changes the user made to the product on a per-surface basis. * @remarks For example, you may obtain an `IUserChanges` structure if the user changed the `Name` and `Position` fields on two pages. * @example * ``` js * { "surfaces": { * "surface_0": { * "texts": [ * { "name": "Name", "usersValue": "John Wood", "isNewItem": false }, * { "name": "Position", "usersValue": "Designer", "isNewItem": false } * ] * }, * "surface_1": { * "texts": [ * { "name": "Name", "usersValue": "Christopher Bennett", "isNewItem": false }, * { "name": "Position", "usersValue": "Manager", "isNewItem": false } * ] * } * }, * "texts": [ * { "name": "Name", "usersValue": "John Wood", "isNewItem": false }, * { "name": "Position", "usersValue": "Designer", "isNewItem": false }, * { "name": "Name", "usersValue": "Christopher Bennett", "isNewItem": false }, * { "name": "Position", "usersValue": "Manager", "isNewItem": false } * ]} * ``` * */ interface ISurfacesChanges { /** The surface name. */ [surfaceName: string]: { /** An array of texts entered by the user in text elements. */ texts: { name: string; usersValue: string; isNewItem: boolean; isRemovedItem?: boolean; }[]; /** An array of texts entered by the user in text placeholders. */ inStringPlaceholders: { name: string; usersValue: string; }[]; }; } /** * A structure used by {@link (Editor:class).saveProduct} to store a return value. * @example * ``` js * const savingResult = await editor.saveProduct("mug"); * * // When the product has been saved correctly, get the promise properties through ISaveProductResult. * let userId = savingResult.userId; * let stateId = savingResult.stateId; * let returnToEditUrl = savingResult.returnToEditUrl; * console.log("User " + userId + " successfully saved state " + stateId); * ``` */ interface ISaveProductResult { /** A product state identifier */ stateId: string; /** The identifier of the user who currently works with the editor. Note that you can not use custom file names for saving states, working under the default user or the master user. */ userId: string; /** A return-to-edit URL. This property is provided for backward compatibility only; it utilizes the old API based on query string. */ returnToEditUrl: string; } /** @internal */ interface IContext { editor: Editor; client: Client; config: IConfiguration; /** The URL to your Design Editor instance. You should specify it only if you are not set the identificator of the `IframeApi.js` script to `CcIframeApiScript`. */ editorUrl: string; } /** * A structure used by {@link (Editor:class).getUnchangedItems} to store a return value. * @example * ``` js * const unchangedItems = await editor.getUnchangedItems(); * * // When unchanged items have been obtained successfully. * if (unchangedItems.items.length > 0) { * unchangedItems.items.forEach(function (logItems) { * console.log(logItems); * }); * } * else * { * console.log("There are no unchanged items"); * } * ``` */ interface IUnchangedItems { /** An array of unchanged items. */ items: { /** The item name. */ name: string; /** The surface (page) associated with the item. */ surface: number; }[]; } /** * A structure containing details about design elements that have preflight problems. * @example * ``` js * const renderingResult = await editor.finishProductDesign() * // If an error occurred while completing product customization. * .catch(error => console.error("Completing product customization failed with exception: ", error)); * * // If product customization is completed successfully, get the promise properties. * stateId = renderingResult.stateId; * userId = renderingResult.userId; * returnToEditUrl = renderingResult.returnToEditUrl; * preflightProblems = renderingResult.violationWarningData; * * console.log("User " + userId + " successfully saved state " + stateId); * if (preflightProblems.length > 0) { * console.log("The preflight check found some problems."); * } * ``` */ interface IViolationWarningData { /** A type of the design element, for example, `PlainTextItem` or `ImageItem`. */ type: string; /** A name of the design element. */ name: string; /** A name of the surface containing the design element. */ surfaceName: string; /** An index of the surface containing the design element. */ surfaceIndex: number; /** A resolution of images or image placeholders that have the `Warning` or `Bad` states of the resolution check. */ dpiValue?: number; /** A state of the resolution check of images and image placeholders. This value is either `Good`, `Warning`, or `Bad`. */ qualityViolationState?: ViolationState; /** A state of the safety zone violation check. If `Warning`, the design element goes out of the safety lines. */ safetyLineViolationState?: ViolationState.Warning | ViolationState.Good | ViolationState.None; /** A state of the out-of-region check. If `Warning`, the design element goes out of the region. */ regionViolationState?: ViolationState.Warning | ViolationState.Good | ViolationState.None; /** A state of the text clipping check. */ textCropViolationState?: ViolationState.Warning | ViolationState.Good | ViolationState.None; /** * A state of the font size violation check. * The state depends on container configuration: * - If font size is smaller than required and configuration has `severity: "warning"`, will be `Warning` * - If font size is smaller than required and configuration has `severity: "error"`, will be `Bad` */ fontSizeViolationState?: ViolationState; /** * A state of the raster elements violation check. * The state depends on container configuration: * - If element contains raster images and configuration has `severity: "warning"`, will be `Warning` * - If element contains raster images and configuration has `severity: "error"`, will be `Bad` */ rasterElementsViolationState?: ViolationState; /** A state of SVG and PDF upload check. Such graphics should appear on the canvas without any losses after uploading in the `Shape` mode. */ shapeViolationState?: ViolationState.Warning | ViolationState.Good | ViolationState.None; /** A state of the bleed zone violation check. If `Warning`, the design element goes out of the bleed zone. */ bleedViolationState?: ViolationState.Warning | ViolationState.Good | ViolationState.None; } /** Results of preflight check. */ enum ViolationState { /** The preflight check was not performed, `0`. */ None = 0, /** The preflight check is successful, `1`. */ Good = 1, /** The preflight check results in a warning, `2`. */ Warning = 2, /** The preflight check results in an error, `3`. */ Bad = 3 } /** * A structure used by {@link (Editor:class).validateUserInfo} to store results of the UserInfo validation. * @example * ``` js * // Validate userInfo. * const validationResults = await editor.validateUserInfo(data); * if (validationResults.error) { * // Output the error. * console.error(validationResults); * return; * } * * // Populate the product with valid user data. * editor.loadUserInfo(data); * ``` */ interface IValidationResult { /** The validation status. If `true`, then the input contains errors. */ error: boolean; /** The error message. */ errorMessage?: string; } /** * A structure containing user data for populating products. * @remarks For details, see the {@link https://customerscanvas.com/dev/editors/iframe-api/howto/user-info.html|Load User Info} topic. * @example * ``` js * // Define your user data. * let data = { * // These text elements apply to the entire product. * "Name": "Alex Smith", * "Position": "Manager", * // This barcode applies to the entire product. * "ID": { * "BarcodeFormat": "EAN_8", * "BarcodeValue": "1234567" * }, * // This user data applies to single product pages. * "surfaces": { * // The content of the "Name" and "Phone" fields applied to the "surface_0" page. * "surface_0": { * "Name": "Christopher Bennett", * "Phone": "18005551255" * } * } * }; * * // Load the web-to-print editor. * let editor = await CustomersCanvas.IframeApi.loadEditor(iframe, product, configuration); * ... * // Populate the product with your user data. * editor.loadUserInfo(data); * ``` */ interface IUserInfo { /** A dictionary holding the content of design elements. The key is a design element name. The value is a text or barcode date you want to assign to this element. You can also use the `surfaces` object to set values on specific product pages. */ [key: string]: string | IBarcodeData | ISurfaceUserInfo; } /** * Parameters defining how loadUserInfo command works with history. * @remarks {@link (Editor:class).loadUserInfo} uses these parameters. */ interface ILoadUserInfoOptions { /** If `true`, the **LoadUserInfo** command changes will be added to the history. The default value is `true`. */ addSnapshot?: boolean; /** If `true`, the **LoadUserInfo** command changes replace last history snapshot. The default value is `false`. */ replaceLastSnapshot?: boolean; } /** * A structure containing user data for a specific product page. * @example * ``` js * // Define your user data. * let data = { * // This user data applies to single product pages. * "surfaces": { * // The content of the "Name" and "Phone" fields applied to the "surface_0" page. * "surface_0": { * "Name": "Christopher Bennett", * "Phone": "18005551255" * } * } * }; * * // Load the web-to-print editor. * let editor = await CustomersCanvas.IframeApi.loadEditor(iframe, product, configuration); * ... * // Populate the product with your user data. * editor.loadUserInfo(data); * ``` */ interface ISurfaceUserInfo { /** A dictionary holding the content of design elements. The key is a design element name. The value is a text or barcode date you want to assign to this element. */ [key: string]: IUserInfo; } /** * Parameters of displaying the product on the canvas. * @remarks {@link (Editor:class).setViewerSettings} takes these options. * @example * ``` js * // Changing the zoom and scroll position. * editor.setViewerSettings({zoom: 0.1, zoomMode: 'bestFit', scrollPosition: {x: 0, y: 0}}) * .catch(error => { * console.error("Changing the canvas settings failed with exception: ", error); * }); * ``` * @public */ interface IViewerSettings { /** The zoom value. */ zoom?: number; /** Zoom modes for displaying images. */ zoomMode?: ZoomMode; /** Scrolls the canvas to the specified point. */ scrollingPosition?: PointF; /** Defines the rotation angle for the content of placeholders. */ contentAngle?: number; /** Clears the selection when the user clicks the canvas. The default value is `false`. */ clearSelectionOnViewerClick?: boolean; /** Clears the selection when the user clicks the browser window. The default value is `false`. */ clearSelectionOnDocumentClick?: boolean; } /** * Parameters of rendering the hi-res and preview images. * @remarks {@link (Editor:class).finishProductDesign} takes these options. * @example * ``` js * // Rendering the product. * const renderingResult = await editor.finishProductDesign(); * // Get the promise properties. * stateId = renderingResult.stateId; * userId = renderingResult.userId; * ``` * @public */ interface IFinishProductDesignOptions { /** The maximum width of proof images, in pixels. This value is `500` by default. */ proofMaxWidth?: number; /** The maximum height of proof images, in pixels. This value is `500` by default. */ proofMaxHeight?: number; /** The name of the resulting print file. This name is only used when you allow end-users directly downloading hi-res files using the links returned by the `finishProductDesign` method. The file name is combined with a file extension of configured output format. For example, if you pass `business_card` as a value of the argument and configure Customer's Canvas to save results in PDF, the result file name will be `business_card.pdf`. */ fileName?: string; /** Specifies a state file name without an extension, up to 36 symbols length. If such a file exists, it will be overwritten. You can pass this parameter for any user except `master` and `default`. If you omit this parameter, then a new file name is generated. */ stateId?: string; /** If `true`, this method starts generating hi-res outputs in the background when called. In this case, the resulting links to hi-res outputs will be obtained before the image generation is complete. If `false`, this method only updates links and starts generating print files when a request to download them is received. The default value is `false`. */ pregenerateHiRes?: boolean; /** If `true`, this method starts generating preview images in the background when called. In this case, the resulting links to these images will be obtained before the image generation is complete. If `false`, this method only updates links to these images and starts generating the preview images when a request to download them is received. The default value is `false`. */ pregeneratePreviewImages?: boolean; /** If `true`, this method renders previews of all product pages to a multi-page `PDF` file. The default value is `false`. */ generateProductProof?: boolean; /** If `true`, this method renders real-size proof images. If `largePreviewMaxWidth` and `largePreviewMaxHeight` are not set, then this method will take the size of the rendered surface. The default value is `false`. */ generateLargePreviews?: boolean; /** The maximum width of large proof images. By default, this value is equal to the surface width. */ largePreviewMaxWidth?: number; /** The maximum height of large proof images. By default, this value is equal to the surface height. */ largePreviewMaxHeight?: number; /** if `true`, saves personalization data to state files. In this case, a state file will represent the initial product design without applying this data. If `false`, then the resulting state file will contain a set of personalized product copies but will not include the personalization data. The default value is `true`. */ storeDataInState?: boolean; /** if `false`, applies personalization data to any field with the specified name; if `true`, the data applies only to fields marked as variable. The default value is `false`. */ applyDataToVariablesOnly?: boolean; /** Specifies the indexes of the product surfaces to be included in the output PDF file. You can specify comma-separated numbers as well as page ranges (two numbers separated by a dash "-"), in any order. Any negative values are not allowed. For multiple entries of an index, only one surface copy will be rendered to the file. By default, the resulting PDF will contain all product surfaces. * @example * "0,1,2,3,4" * "3,4,1,0,2" the result is equal to "0,1,2,3,4" * "1,1,2,0,0" the result is equal to "0,1,2" * "0-4" * "0-4,6,8-10,12"*/ productProofPageIndexes?: string; } /** * Parameters defining how the personalization data should be applied. * @remarks {@link (Editor:class).saveProduct} takes these options. * @example * ``` js * // Saving a product to the "t-shirt.st" file. * editor.saveProduct("t-shirt"); * ``` * @public */ interface ISaveProductOptions { /** if `true`, saves personalization data to state files. In this case, a state file will represent the initial product design without applying this data. If `false`, then the resulting state file will contain a set of personalized product copies but will not include the personalization data. The default value is `true`. */ storeDataInState?: boolean; /** if `false`, applies personalization data to any field with the specified name; if `true`, the data applies only to fields marked as variable. The default value is `false`. */ applyDataToVariablesOnly?: boolean; } /** * Parameters of rendering the preview images. * @remarks {@link (Editor:class).getProofImages} takes these options. * * When defining the width and height, the resulting image will be proportionally resized to fit the defined rectangle. For example, if the maximum width and height are both set to `640` pixels, then a `1280 x 960` px image will be resized to `640 x 480` px. When using _mockups_, specify the size of proof images more than or equal to the preview mockup size to avoid loss of the image quality. * @example * ``` js * // Getting links to proof images. * const links = await editor.getProofImages({maxHeight: 720, maxWidth: 720, pregeneratePreviewImages: true}); * // Get the links from the promise properties. * proofImageUrls = links.proofImageUrls; * ``` * @public */ interface IGetProofImagesOptions { /** The maximum width of proof images. This value is `500` by default. */ maxWidth?: number; /** The maximum height of proof images. This value is `500` by default. */ maxHeight?: number; /** If `true`, this method starts generating preview images in the background when called. In this case, the resulting links to these images will be returned before the image generation is complete. If `false`, this method only returns links to these images and starts generating the preview images when a request to download them is received. The default value is `false`. */ pregeneratePreviewImages?: boolean; /** * If `true`, this method renders previews of all product pages to a multi-page `PDF` file. In this case, the file format specified in `proofImageFileFormat` will be ignored. The default value is `false`. * @remarks When you generate product previews in PDF files and allow your users to directly download these files using the links returned by this method, you can pass the `filename` query parameter that enables the download and customizes the resulting file name. For example, to download a `booklet.pdf` file: * **https://example.com/api/rendering/GetProofImage/JohnWood/06047be9-78fb-4b89-98c5-8b1712ba1b51/-1_-1.pdf?filename=booklet** */ generateProductProof?: boolean; /** If `true`, this method renders real-size proof images. If `largePreviewMaxWidth` and `largePreviewMaxHeight` are not set, then this method will take the size of the rendered surface. The default value is `false`. */ generateLargePreviews?: boolean; /** The maximum width of large proof images. By default, this value is equal to the surface width. */ largePreviewMaxWidth?: number; /** The maximum height of large proof images. By default, this value is equal to the surface height. */ largePreviewMaxHeight?: number; /** if `false`, applies personalization data to any field with the specified name; if `true`, the data applies only to fields marked as variable. The default value is `false`. */ applyDataToVariablesOnly?: boolean; /** Specifies the indexes of the product surfaces to be included in the output PDF file. You can specify comma-separated numbers as well as page ranges (two numbers separated by a dash "-"), in any order. Any negative values are not allowed. For multiple entries of an index, only one surface copy will be rendered to the file. By default, the resulting PDF will contain all product surfaces. * @example * "0,1,2,3,4" * "3,4,1,0,2" the result is equal to "0,1,2,3,4" * "1,1,2,0,0" the result is equal to "0,1,2" * "0-4" * "0-4,6,8-10,12"*/ productProofPageIndexes?: string; } /** * Parameters of variable data printing. * @remarks {@link (Editor:class).saveProduct} takes these parameters. * * You can pass either `dataSet` or `itemsData` into this method. * @public */ interface IVdpData { /** Creates a new product from the initial product definition and applies variable data to it. */ dataSet?: IDataSet; /** Applies a single set of variable data to the product. */ itemsData?: IItemsData; } }