Back to Website
Show / Hide Table of Contents

Package @aurigma/design-editor-iframe

Classes

CommandManager

Performs operations on the product and its design elements.

Container

A container for design elements.

Editor

Represents the Design Editor.

EditorBuilder

Using this class you can load Editor instances to a specified iframe element and initialize them with a specified product and configuration.

Events

Events supported in the Design Editor.

Item

A design element.

ModelComponent

A basic component containing the name and ID of a component.

PrintArea

A print area.

Product

A Customer's Canvas product.

RuntimeConfiguration

Allows you to get and set the user ID and PDF metadata of a product at runtime.

StateId

Surface

A surface representing a product page.

SurfaceMockup

A mockup set for a surface.

UIElementStateChangeEventArgs

Arguments of the UIElementStateChange event.

Interfaces

Editor.IFinishDesignResult

A structure used by Editor.finishProductDesign() to store a return value.

Editor.IFinishProductDesignOptions

Parameters of rendering the hi-res and preview images.

Editor.IGetProofImagesOptions

Parameters of rendering the preview images.

Editor.IProofResult

A structure used by Editor.getProofImages() to store a return value.

Editor.ISaveProductOptions

Parameters defining how the personalization data should be applied.

Editor.ISaveProductResult

A structure used by Editor.saveProduct() to store a return value.

Editor.ISurfacesChanges

A structure containing changes the user made to the product on a per-surface basis.

Editor.ISurfaceUserInfo

A structure containing user data for a specific product page.

Editor.IUnchangedItems

A structure used by Editor.getUnchangedItems() to store a return value.

Editor.IUserChanges

A structure containing all changes the user made to the product when personalizing it.

Editor.IUserInfo

A structure containing user data for populating products.

Editor.IValidationResult

A structure used by Editor.validateUserInfo() to store results of the UserInfo validation.

Editor.IVdpData

Parameters of variable data printing.

Editor.IViewerSettings

Parameters of displaying the product on the canvas.

Editor.IViolationWarningData

A structure containing details about design elements that have preflight problems.

IActionMode

A structure defining how to import SVG, PDF, and PSD graphics.

IAssetManagerConfig

A structure defining tabs of the Asset Manager.

IAssetManagerConfig.ITabConfig

A structure defining tabs of the Asset Manager.

IAssetSources

A structure defining sources for the Image Manager.

IAssetSources.IAssetSourceConfig

A structure defining the source type of the Image Manager.

IAssetSources.IDepositPhotosConfig

A structure defining properties of the Depositphotos source.

IAssetSources.IDepositPhotosLightboxConfig

A structure defining properties of the Depositphotos lightbox source.

IAssetSources.IGallerySourceConfig

A structure defining properties of the user gallery and public gallery.

IAssetSources.IGallerySourceConfig.ICategory

A structure restricting folders in the public gallery.

IAssetSources.IMemorySourceConfig

A structure defining asset sources through direct URLs.

IAssetSources.IMemorySourceConfig.ICategory

A structure defining an asset category.

IAssetSources.IMemorySourceConfig.IUrlAsset

A structure defining links to images.

IAssetSources.IPrivateSourceConfig

A structure defining properties of the private user gallery.

IAssetSources.IRemoteSourceConfig

A structure defining properties of the Google Drive and Amazon S3 sources.

IAssetSources.IRemoteSourceConfig.IRootFolderConfig

A structure defining the appearance of the root folder.

IAssetSources.IRemoteSourceConfig.ISortType

A structure defining options to sort assets.

IAssetSources.ISocialNetworkSourceConfig

A structure defining the API key of social networking services.

IAssetSources.IStatesSourceConfig

A structure defining properties of the user states gallery.

IAutoZoomConfig

A structure containing auto-zoom configuration of the Rich text editor.

IBarcodeData

A structure containing data that can be encoded into barcodes.

IBarcodeDialogConfig

A structure containing the configuration of the Barcode dialog.

IBasePrintAreaDefinition

A structure representing basic print area features.

IBaseSurfaceDefinition

A structure representing basic surface features.

IBaseSurfacesDefinition

A structure holding basic features of multipage templates.

IBgButton

A structure defining configuration of the Toolbox for customizing the background layer.

IBgFoldingModeParams

A structure holding parameters of the folding mode of backgrounds.

IBottomToolbarConfig

A structure containing the configuration of the Bottom toolbar.

IButton

A structure defining configuration of the Toolbox using an array of buttons.

ICanvasConfig

A structure containing canvas settings in the editor.

ICanvasStyleConfig

A structure defining the appearance of grips of design elements.

IChannelContainerDefinition

A structure holding settings to create a channel container.

IColorPickerConfig

A structure defining the Color picker.

IColorPickerConfigSection

A structure defining basic properties of Color picker sections.

ICommonConfig

A structure for common settings of widgets.

IConfiguration

A structure containing the web-to-print editor configuration.

ICropMark

A structure holding settings for a crop mark.

ICropMarkText

A structure holding settings for page information on hi-res outputs.

IDefaultItemsConfig

The configuration of new design elements that the user will add to the product.

IDefaultTextStroke

A structure defining a range of values, a color, and a size of text stroke.

IFinishButtonConfig

The configuration of the Finish design button.

IFitTextRectangleSettings

A structure defining when and how the editor fits bounding rectangles to rich formatted text.

IFoldingLine

A structure holding settings for a folding line.

IGalleryButton

A structure defining configuration of the Toolbox for launching the Asset Manager in a predefined mode.

IGalleryDefaultConfig

A structure defining the default parameters of the image gallery.

IGalleryItemConfig

A structure defining the default parameters of gallery tabs.

IGridConfig

A structure containing the grid configuration.

IHiResOutput

A structure holding the hi-res output settings.

IHoverStyle

A structure defining the appearance of the object that the cursor is hovering over.

IImageEditorDialogConfig

A structure defining settings of the Image editor dialog.

IItem

A structure defining common properties of buttons in the Toolbox.

IItemMenuConfig

A structure defining commands in the Item menu.

IManipulationPermissions

A structure defining the manipulation permissions.

IMarginHV

A structure representing horizontal and vertical margins.

IMarginLTRB

A structure representing left, top, right, and bottom margins.

IMessage

IMockupData

A structure holding the mockup settings.

IMockupFolders

A structure holding names of folders containing the overlaying and background mockups.

IMockupTemplate

A structure holding settings to create overlaying and background mockups from PSD templates or raster images.

IModelComponent

A basic component containing a name of a surface.

INoColorSection

A structure defining the No Color section in the Color picker.

IObjectInspectorConfig

A structure containing the configuration of the Object inspector.

IPageTemplate

A structure holding settings to create mockups and preview mockups for multipage IDML templates.

IPaletteSection

A structure defining the section of swatches in the Color picker.

IPerSurfaceConfiguration

A configuration of widgets, that is defined for separate surfaces.

IPointF

A structure representing a point in a two-dimensional plane.

IPrintAreaDefinition

A structure used for creating an empty print area.

IPrintAreaTemplate

A structure creating a print area based on a PSD/IDML template.

IProductDefinition

A structure holding settings to create a product.

IProofImage

A structure holding settings for proof images.

IPublicApiConfig

A structure containing the settings of the hi-res output and proof images.

IQualityLevelsConfig

A structure defining the image quality levels of the Quality meter.

IQualityMeterConfig

A structure containing the configuration of the image quality meter.

IRangeParams

A structure defining a range of values.

IRecentSection

A structure defining the section of recently selected colors in the Color picker.

IRectangleF

A structure representing a rectangle in a two-dimensional plane.

IRenderingProperty

A structure containing the hi-res output and proof images configuration.

IResizeGripsPermissions

A structure defining the grips that appear on bounding rectangles.

IRichComboValuesConfig

An object defining the indent and padding values for the Rich text editor.

IRichTextDialogConfig

The dialog providing text formatting options.

IRotationConfig

A structure containing parameters of the canvas rotation.

IRubberbandStyle

A structure defining the appearance of a selected area when the left mouse button is holding down.

IRulersConfig

A structure containing the configuration of rulers.

ISafetyLine

A structure holding settings for a safety line.

ISafetyLinesConfig

A structure defining the validation of safety lines and the bleed zone.

ISelectionStyle

A structure defining the appearance of selected design elements.

ISetMockupOptions

A structure defining options for managing history and surface size when changing mockups.

ISetPrintAreasOptions

A structure holding settings to migrate data when replacing print areas or surfaces in a product.

IShowHintSettings

The settings enabling hints for drop-down lists in the toolbar of the Rich text editor.

IShowInputSettings

The settings enabling the user input for drop-down lists in the toolbar of the Rich text editor.

ISingleButton

A structure defining configuration of the Toolbox using the action property.

ISize

A structure representing size of a two-dimensional object.

ISnapElementConfiguration

A structure containing the advanced configuration of snap lines.

ISnapLinesConfig

A structure containing the configuration of snap lines.

ISpine

A structure holding spine settings.

ISpotlightStyle

A structure defining the appearance of highlighted objects.

IStateSurface

A structure holding a state file name and a surface name or a surface index.

IStateSurfaces

A structure holding a state file name and an array of surface names.

IStubImagesBarcodeConfig

A configuration of messages in stub barcode placeholders.

IStubImagesConfig

A structure defining the appearance of stub barcode placeholders.

ISurfaceDefinition

A structure holding settings to create an empty surface.

ISurfaceFromState

A structure holding settings to create a surface from a state file.

ISurfacesFromFolder

A structure holding settings to create a set of template-based surfaces.

ISurfacesFromMultipageTemplate

A structure holding settings to create a set of template-based surfaces.

ISurfaceSwitchConfig

A structure defining the configuration of the navigation area in the Bottom toolbar.

ISurfaceTemplate

A structure holding settings to create a surface from a PSD template.

ITagsDictionary

A structure holding the product tags.

ITextOutline

The text outline for low-contrast texts in the Rich text editor. This feature is turned off by default.

ITextShadowParam

A structure defining a range of text shadow parameters.

IThemeConfiguration

A structure containing the properties that redefine the appearance of the UI theme.

IThemeSection

A structure defining the section of theme colors in the Color picker.

IToolboxConfig

A structure defining the configuration of the Toolbox.

ITopToolbarConfig

A structure containing the configuration of the Top toolbar.

IUiConfig

The basic structure for IConfiguration, defines the editor settings.

IUpdateSurfaceOptions

A structure holding settings to migrate data when replacing surfaces in a product.

IUpdateSurfaceOptionsByDefinition

A structure holding settings to migrate data when replacing surfaces in a product.

IViolationWarningsSettingsConfig

A structure containing the configuration of preflight warnings.

IWatermarkConfig

A configuration of watermarks.

IWatermarkImageConfig

A configuration of watermark image.

IWatermarkTextConfig

A configuration of watermark text.

IWatermarkVisibilityConfig

A configuration of watermark visibility.

IWidgetConfigsForSurface

A structure defining the configuration of widgets for a separate surface.

IWidgetsConfig

The configuration of Design Editor's widgets.

IZoomConfig

A structure containing text zoom configuration of the Rich text editor.

IZOrderConfig

A structure containing the configuration of the z-order control.

Enums

BarcodeFormat

An enumeration of barcode formats.

BarcodeSubType

An enumeration of QR code subtypes.

BarcodeType

Supported barcode types.

ChannelContainerType

Channel container types.

ColorPickerSectionViewType

The appearance of the Color picker sections.

ColorPickerTarget

Targets for color sections of Color picker.

ColorSpace.ColorSpaceType

Available color spaces.

CropMarkTextAlignment

Text alignment options.

CrossOriginMode.CrossOriginModeType

Modes of using the crossOrigin attribute when requesting images from domains using CORS policy.

Editor.ViolationState

Results of preflight check.

IAssetSources.SocialNetwotkSourceType

Supported social networks.

ImageSize.ImageSizeType

Sizes of images provided by Depositphotos.

InStringPlaceholderMode.InStringPlaceholderModeType

Display modes of linked in-string placeholders in the Object Inspector.

PdfBox

PDF page boxes.

SectionType

Sections of the predefined colors in the Color picker.

UpdateSurfaceBehavior

Surface insertion mode.

WindowMode

Screen modes enumeration.

Functions

loadEditor(editorFrame, product, config, onFirstLoad)

Loads the web-to-print editor.

Declaration
export declare function loadEditor(editorFrame: HTMLIFrameElement, product: string | string[] | IProductDefinition, config?: IConfiguration, onFirstLoad?: () => void): Promise<Editor>;
Parameters
Type Name Description
HTMLIFrameElement editorFrame

The iframe element to place the editor to.

string | string[] | IProductDefinition product

The product to load into the editor.

IConfiguration config

Editor configuration.

() => void onFirstLoad

Outdated. A function that handles the first product launch. For details, see Preloader topic.

Returns
Type Description
Promise<Editor>

An instance of the web-to-print editor.

Examples
<!DOCTYPE html>

   <html lang="en">

   <head>
       <meta charset="utf-8" />
       <title>Customer's Canvas Quick Start Sample Page</title>
       <!-- The IFrame API script. IMPORTANT! Do not remove or change the ID. -->
       <script id="CcIframeApiScript" type="text/javascript" src="/cc/Resources/Generated/IframeApi.js">
       </script>
       <!-- Preloading resources of the editor. -->
       <script>CustomersCanvas.IframeApi.preload();</script>
   </head>

   <body>
       <!-- The iframe to display the editor in. -->
       <iframe id="editorFrame" width="100%" height="800px"></iframe>
   </body>

   <script>
       // Initializing a product with only one template - "BusinessCard.psd".
       var productDefinition = { surfaces: ["BusinessCard"] };
       // Providing the tokenId, which is required in the Secure Mode.
       var config = { tokenId: "95c16577-75fe-4145-87ff-c0ba49d1a554" };
       // Getting the iframe element to display the editor in.
       var iframe = document.getElementById("editorFrame");
       var editor = null;
       // Loading the editor.
       CustomersCanvas.IframeApi.loadEditor(iframe, productDefinition, config)
           // If the editor has been successfully loaded.
           .then(function (e) {
               editor = e;
           })
           // If there was an error thrown when loading the editor.
           .catch(function (error) {
               console.error("The editor failed to load with an exception: ", error);
           });
   </script>

   </html>

preload()

Preloads resources of the web-to-print editor.

Declaration
export declare function preload(): void;
Returns
Type Description
void
Examples
   <head>
       <meta charset="utf-8" />
       <title>Customer's Canvas Quick Start Sample Page</title>
       <!-- The IFrame API script. IMPORTANT! Do not remove or change the ID. -->
       <script id="CcIframeApiScript" type="text/javascript" src="/cc/Resources/Generated/IframeApi.js">
       </script>
       <!-- Preloading resources of the editor. -->
       <script>CustomersCanvas.IframeApi.preload();</script>
   </head>

Variables

Cpd

Declaration
Cpd: RotataAlgorithmType

editorUrl

URL to your Customer's Canvas instance.

Declaration
editorUrl: string
Remarks

Typically, you do not have to specify this URL explicitly. If you add id="CcIframeApiScript" to the script tag which links the IframeApi.js, Design Editor automatically detects this URL from the script source. However, if for any reasons you do not want to use the id in the script tag, you can use this property to specify the URL to the Design Editor instance explicitly.

Examples
<script>
  CustomersCanvas = {
      IframeApi: {
          editorUrl: "http://example.com/"
      }
  };
</script>

<script type="text/javascript" src="http://example.com/Resources/Generated/IframeApi.js">
</script>

<script>
  //....
  var editor = null;
  CustomersCanvas.IframeApi.loadEditor(iframe, productDefinition)
      .then(function(e) {
          editor = e
      });
</script>

FinishButtonMode.Disabled

Disabled hides the button and enables the callback.

Declaration
Disabled: FinishButtonModeType

FinishButtonMode.Download

Download enables a debug mode that shows the button and disables the callback, but allows downloading the hi-res output.

Declaration
Download: FinishButtonModeType

FontListMode.Advanced

The Advanced mode allows users to select a font, set the font size, and change the font style.

Declaration
Advanced: FontListModeType

FontListMode.Simple

The Simple mode allows users to select a font and set the font size.

Declaration
Simple: FontListModeType

GallerySource.InMemorySource

Gallery assets are predefined and located in the memory.

Declaration
InMemorySource: GallerySourceType

ModelMode.Advanced

The Advanced mode provides all the functions of the web-to-print editor like adding, changing, and removing design elements.

Declaration
Advanced: ModelModeType

ModelMode.Simple

The Simple mode provides only basic functions like changing texts and images. It allows you for switching to the Advanced mode.

Declaration
Simple: ModelModeType

ModelMode.SimpleOnly

The SimpleOnly mode provides only basic functions. It does not allow you for switching to the Advanced mode.

Declaration
SimpleOnly: ModelModeType

ObjectInspectorPosition.Left

The Left position places the Object Inspector on the left of the canvas.

Declaration
Left: ObjectInspectorPositionType

ObjectInspectorPosition.Right

The Right position places the Object Inspector on the right of the canvas.

Declaration
Right: ObjectInspectorPositionType

PdfActionMode.Group

In this mode, a PDF file opens as a set of shapes and appears on the canvas as a group element.

Declaration
Group: PdfActionModeType

PdfActionMode.Shape

In this mode, a PDF file opens as a combination of shapes in one color and width. This mode eliminates raster images. To check if losses occur, you can use the shapeViolationsEnabled warning.

Declaration
Shape: PdfActionModeType

PdfActionMode.Vector

In this mode, a PDF file opens as a vector image.

Declaration
Vector: PdfActionModeType

PsdActionMode.Design

In this mode, a PSD file opens as a set of design elements.

Declaration
Design: PsdActionModeType

PsdActionMode.Group

In this mode, a PSD file opens as a group of design elements.

Declaration
Group: PsdActionModeType

PsdActionMode.Merged

In this mode, a PSD file opens as a merged raster image.

Declaration
Merged: PsdActionModeType

SvgActionMode.Clipart

In this mode, an SVG file opens as a combination of multicolor shapes and appears on the canvas as a shape element.

Declaration
Clipart: SvgActionModeType

SvgActionMode.Group

In this mode, an SVG file opens as a set of SVG paths and appears on the canvas as a group element.

Declaration
Group: SvgActionModeType

SvgActionMode.Shape

In this mode, an SVG file opens as a combination of shapes in one color and width and appears on the canvas as a shape element. This mode eliminates raster images. To check if losses occur, you can use the shapeViolationsEnabled warning.

Declaration
Shape: SvgActionModeType

SvgActionMode.Vector

In this mode, an SVG file opens as a vector image and appears on the canvas as an image element.

Declaration
Vector: SvgActionModeType

TextAlignment.Center

Align text along the center.

Declaration
Center: TextAlignmentType

TextAlignment.Justify

Align text along both the left and right edges.

Declaration
Justify: TextAlignmentType

TextAlignment.LastCenter

Justify text and center its last line.

Declaration
LastCenter: TextAlignmentType

TextAlignment.LastLeft

Justify text and align its last line to the left.

Declaration
LastLeft: TextAlignmentType

TextAlignment.LastRight

Justify text and align its last line to the right.

Declaration
LastRight: TextAlignmentType

TextAlignment.Left

Align text along the left edge.

Declaration
Left: TextAlignmentType

TextAlignment.Right

Align text along the right edge.

Declaration
Right: TextAlignmentType

Type Aliases

ButtonAction

The standard actions that can be assigned to toolbox buttons. The "RichText" button action is deprecated, since every text element may support rich formatting in Customers Canvas 6.

Declaration
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";

ButtonType

A button type.

Declaration
export declare type ButtonType = IButton | SingleButtonType;

CustomButton

Declaration
export declare type CustomButton = {
    translationKey: string;
    translationKeyTitle: string;
    iconUrl: string;
    action?: string;
    buttonId: string;
    customData: any;
};

FinishButtonModeType

Defines the behavior of the Finish button.

Declaration
type FinishButtonModeType = "Disabled" | "Download" | "Post";

FontListModeType

Defiles whether the user can change only the font size or all the font style settings.

Declaration
type FontListModeType = "Simple" | "Advanced";

GallerySource.GallerySourceType

Sources of the Gallery widget.

Declaration
type GallerySourceType = "InMemorySource";

GroupsMode.GroupsModeType

Base only groups elements, whereas Smart also applies the auto layout to grouped elements.

Declaration
type GroupsModeType = "Base" | "Smart";

ModelModeType

Defiles whether the user can change the product layout or only the content of provided elements.

Declaration
type ModelModeType = "Simple" | "Advanced" | "SimpleOnly";

ObjectInspectorPositionType

Defines where to display the Object Inspector.

Declaration
type ObjectInspectorPositionType = "Left" | "Right";

PdfActionModeType

PDF upload modes.

Declaration
type PdfActionModeType = "Shape" | "Vector" | "Group";

PsdActionModeType

Defines how to upload PSD iles.

Declaration
type PsdActionModeType = "Merged" | "Design" | "Group";

RotataAlgorithmType

Declaration
export declare type RotataAlgorithmType = "Cpd";

SingleButtonType

A way of defining a button.

Declaration
export declare type SingleButtonType = ISingleButton | IGalleryButton | ButtonAction;

SurfaceTypes

Specifies product definitions used as arguments in the loadEditor method.

Declaration
export declare type SurfaceTypes = string | IPrintAreaTemplate | ISurfaceDefinition | ISurfaceTemplate | ISurfaceFromState;

SvgActionModeType

SVG upload modes.

Declaration
type SvgActionModeType = "Shape" | "Vector" | "Group" | "Clipart";

TextAlignmentType

Defines how to align text.

Declaration
type TextAlignmentType = "Left" | "Center" | "Right" | "Justify" | "LastLeft" | "LastRight" | "LastCenter";
Was this page helpful?
Thanks for your feedback!
Back to top Copyright © 2001–2022 Aurigma, Inc. All rights reserved.
Loading...
    Thank for your vote
    Your opinion is important to us. To provide details, send feedback.
    Send feedback