TrophyCustomer's Canvas is honored with a 2020 InterTech Technology Award! Learn more 

Class: AuWidgetDesignEditor

A widget that is used to integrate Customer's Canvas 5 to the editor.

For details, you can refer to the DesignEditor widget topic.

{
  "widgets": [
    {
      "name": "editor",
      "type": "design-editor",
      "title": "Personalize your flyer",
      "params": {
        "initial": {
          "productDefinition": {
            "surfaces": [{
              "width": 436.6,
              "height": 612.2
            }]
          },
          "editorConfig": { "initialMode": "Advanced" }
        }
      }
    },
    {
      "name": "preview",
      "type": "image-carousel",
      "params": {
        "containerColor": "#ccc",
        "images": [{ "url": "{{$['editor'].proofImageUrls[0][0]}}" }]
      }
    }
  ],
  "steps": [
    {
      "name": "design",
      "title": "1. Design",
      "mainPanel": { "name":"editor" }
    },
    {
      "name": "approve",
      "title": "2. Preview",
      "mainPanel": {"name":"preview-image"},
      "onActivate": "{{#function $['editor'].getHiResImages(800,800)}}"
    }
  ]
}

Hierarchy

AuDesignEditor

AuWidgetDesignEditor

Implements

Index

Properties

Accessors

Methods

Properties

actionsFinished

actionsFinished: boolean = false

This property is set to true when the editor enters the idle state.


actionsFinishedPromise

actionsFinishedPromise: Deferred‹string› = new Deferred<string>()


itemsData

itemsData: kvObject‹string, CanvasItemData

Personalization data for design elements.


Optional modifiedItem

modifiedItem? : DesignEditorItemChanges = null

Last modified item on the canvas.


params

params: IDesignEditorDefinitionParams

Overrides AuBaseWidget.params


paramsRaw

paramsRaw: any

Inherited from AuBaseWidget.paramsRaw

Uncompiled widget configuration.

Accessors

allItems

get allItems(): Item[]

Gets all design elements in the product.

Returns:Item[]

An array of ObjectModel.Item elements.


boundsData

get boundsData(): Object

Width, height, and upper-left corner coordinates of the bounding rectangle of all items in a group, in points. For details, see the Calculating Area of Design Layers topic.

Returns:Object


currentSurfaceName

get currentSurfaceName(): string

Gets the name of the current surface.

Returns:string


depositPhotos

get depositPhotos(): IDepositPhotosItem[]

Gets all images added from DepositPhotos.

Returns:IDepositPhotosItem[]


hiResUrls

get hiResUrls(): string[]

Gets URLs that link to high-resolution print files.

Returns:string[]


proofImageUrls

get proofImageUrls(): string[][]

Gets temporary URLs that link to proof images.

Returns:string[][]


stateId

get stateId(): string

Gets the identifier of the last saved state file.

Returns:string


tags

get tags(): ITagsDictionary

Gets product tags.

Returns:ITagsDictionary

An ObjectModel.ITagsDictionary.


token

get token(): string

Returns the current user token.

Returns:string


userChanges

get userChanges(): IUserChanges

Gets an object containing all changes made by the user when personalizing the product.

Returns:IUserChanges

An object representing IUserChanges.


userId

get userId(): string

Gets the identifier of the user who currently works with the editor.

Returns:string


variableData

get variableData(): IVariable[]

Gets all variable items in the product.

Returns:IVariable[]

An array of ObjectModel.IVariable elements.


violationWarningData

get violationWarningData(): IViolationWarningData[]

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.

Returns:IViolationWarningData[]

Methods

addCustomStyles

addCustomStyles(params: any): void

Inherited from AuBaseWidget.addCustomStyles

Applies new styles to a widget.

Parameters:

Name Type
params any

Returns:void


addSurface

addSurface(surface: SurfaceTypes | IStateSurface, position?: number): Promise‹Product›

Adds a product surface.

Parameters:

Name Type Description
surface SurfaceTypes | IStateSurface A surface (page) to add.
position? number Surface position (zero-based, optional).

Returns:Promise‹Product›


addSurfaces

addSurfaces(surfaces: SurfaceTypes[] | IStateSurface, position?: number): Promise‹Product›

Adds product surfaces.

Parameters:

Name Type Description
surfaces SurfaceTypes[] | IStateSurface Surfaces (pages) to add.
position? number Surfaces position (zero-based, optional).

Returns:Promise‹Product›


applyViewerSettings

applyViewerSettings(params: IDesignEditorDefinitionSetViewerSettings): Promise‹any›

Executes the setViewerSettings command.

Parameters:

Name Type Description
params IDesignEditorDefinitionSetViewerSettings The settings of the zoom level in the editor.

Returns:Promise‹any›


checkInitDependenciesWidgets

checkInitDependenciesWidgets(): string[]

Inherited from AuBaseWidget.checkInitDependenciesWidgets

Returns an array of widget names, due to which the current widget cannot receive parameters.

Returns:string[]


compile

compile(additionalParam: any): Promise‹any›

Inherited from AuBaseWidget.compile

Compiles the widget config.

"steps": [{
  "name": "card-size",
  "title": "Step 1. Card Options",
  "description": "Choose a card size.",
  "toolPanel": {
    "name": "options"
  },
  "onActivate": [
    "{{#function $['logo'].compile() }}"
  ]
},
...

Parameters:

Name Type Default Description
additionalParam any Parameters for widget config compilation.

Returns:Promise‹any›

The compiled widget configuration.


emitChange

emitChange(data: any, forceRecompile: boolean): void

Inherited from AuBaseWidget.emitChange

Sends a message about the widget state changes.

"steps": [{
  "name": "card-size",
  "title": "Step 1. Card Options",
  "description": "Choose a card size.",
  "toolPanel": {
    "name": "options"
  },
  "onActivate": [
    "{{#function $['options'].emitChange()}}"
  ]
},
...

Parameters:

Name Type Default Description
data any Data for updating the widget.
forceRecompile boolean false If true, runs widget recompilation to apply the updated parameters.

Returns:void


exportWidgetData

exportWidgetData(force: boolean): Promise‹CanvasData›

Implementation of IRestorableWidget

Serializes the DesignEditor widget.

Parameters:

Name Type Description
force boolean If true, saves the product to a state file and returns its ID. If false, only returns the identifier of a previously saved state.

Returns:Promise‹CanvasData›

A promise with the stateId property.

{ stateId: string }

getAllItems

getAllItems(): Promise‹Item[]›

Gets all design elements in the product.

Returns:Promise‹Item[]›

A promise with an array of ObjectModel.Item elements.


getDepositPhotos

getDepositPhotos(): Promise‹IDepositPhotosItem[]›

Gets info about images added from DepositPhotos.

For more details, you can refer to the topic describing how Customers's Canvas works with Depositphotos Assets.

Returns:Promise‹IDepositPhotosItem[]›

A promise with an array of names and values of the variable fields.


getDesignEditorItemModel

getDesignEditorItemModel(item: BaseTextItem | PlaceholderItem): Promise‹DesignEditorItemChanges

Inherited from AuDesignEditor.getDesignEditorItemModel

Parameters:

Name Type
item BaseTextItem | PlaceholderItem

Returns:Promise‹DesignEditorItemChanges


getEditor

getEditor(): Promise‹Editor›

Inherited from AuDesignEditor.getEditor

Returns a promise with an instance of the DesignEditor.

Returns:Promise‹Editor›


getHiResImages

getHiResImages(width: number, height: number, stateId?: string, pregeneratePreviewImages: boolean, filename?: string): Promise‹string[]›

Saves a state, renders print files and proof images, and returns links to the print files.

This method is equivalent to editor.finishProductDesign from the IFrame API.

Parameters:

Name Type Default Description
width number 800 The maximum width of proof images.
height number 800 The maximum height of proof images.
stateId? string - A custom state file name without an extension, up to 36 symbols length.
pregeneratePreviewImages boolean false 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.
filename? string - The name of the downloaded file

Returns:Promise‹string[]›

A promise with an array of URLs that link to the rendered print files.


getItemText

getItemText(itemName: string): Promise‹string›

Returns the content of a text item.

Parameters:

Name Type Description
itemName string The name of the text item.

Returns:Promise‹string›


getProduct

getProduct(): Promise‹Product›

Inherited from AuDesignEditor.getProduct

Returns a promise with the product opened in the DesignEditor.

Returns:Promise‹Product›


getProofImages

getProofImages(width: number | Object, height: number, pregeneratePreviewImages: boolean, generateProductProof: boolean, generateLargePreviews: boolean, largePreviewMaxWidth: number, largePreviewMaxHeight: number): Promise‹string[]›

Renders proof images and returns URLs that link to these images.

This method is equivalent to editor.getProofImages from IFrame the API.

Parameters:

Name Type Default Description
width number | Object 800 If number, defines the maximum width of proof images. If object, contains parameters for the editor.getProofImages() method; in this case, other parameters will be ignored.
height number 800 The maximum height of proof images.
pregeneratePreviewImages boolean false 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.
generateProductProof boolean false If true, this method renders previews of all product pages to a multi-page PDF file.
generateLargePreviews boolean false If true, this method renders real-size preview images.
largePreviewMaxWidth number 1000 The maximum width of large preview images.
largePreviewMaxHeight number 1000 The maximum height of large preview images.

Returns:Promise‹string[]›

A promise with an array of temporary links to proof images.


getTags

getTags(): Promise‹ITagsDictionary›

Gets product tags.

Returns:Promise‹ITagsDictionary›

A promise with an ObjectModel.ITagsDictionary.


getToken

getToken(): Promise‹string›

Generates the current user token based on the token property.

Returns:Promise‹string›


getVariableData

getVariableData(): Promise‹IVariable[]›

Detects what particular variable fields are used in the design and returns an array of such fields.

This method is equivalent to product.getVariableItems from the IFrame API.

Returns:Promise‹IVariable[]›

A promise with an array of names and values of the variable fields.


openAssetManagerFor

openAssetManagerFor(itemName: string): Promise‹void›

Opens the Asset manager to select the content of an image placeholder.

Parameters:

Name Type Description
itemName string The name of the placeholder item.

Returns:Promise‹void›


openGalleryForBackground

openGalleryForBackground(): Promise‹void›

Opens the Asset manager to select the background.

Returns:Promise‹void›


removeSurface

removeSurface(surfaceIndex: number): Promise‹Product›

Removes a product surface.

Parameters:

Name Type Description
surfaceIndex number A zero-based index of the surface which you want to remove.

Returns:Promise‹Product›


replaceInterpolationPlaceholder

replaceInterpolationPlaceholder(): Promise‹void›

Replace interpolation to in-string placeholders (#3529 workaround) @ignore

Returns:Promise‹void›


restoreWidgetFromData

restoreWidgetFromData(widgetData: CanvasData, force: boolean): Promise‹void›

Deserializes the DesignEditor widget.

In a common scenario, the multistep editor restores a canvas when it is initialized.

Parameters:

Name Type Default Description
widgetData CanvasData - An object containing the stateId property.
force boolean false If true, gets a product definition from the state file and then executes the initial command. If false, it does nothing.

Returns:Promise‹void›


saveProduct

saveProduct(stateId?: string): Promise‹ISaveProductResult›

Saves a product.

This method is equivalent to editor.saveProduct from the IFrame API.

Parameters:

Name Type Description
stateId? string A custom state file name without an extension, up to 36 symbols length.

Returns:Promise‹ISaveProductResult›

A promise with identifiers of the user and the saved state file.


setTags

setTags(newTags: any): Promise‹void›

Sets product tags.

This method is equivalent to product.setTags from the IFrame API.

Parameters:

Name Type Description
newTags any The tags that you want to specify for the product. These tags will reset existing product tags.

Returns:Promise‹void›


showPreloader

showPreloader(isPreload: boolean, message: string): void

Inherited from AuBaseWidget.showPreloader

Shows a preloader.

"onClick": [
  "{{#function main.showPreloader(true, 'Creating print files...')}}",
  "{{#function $['editor'].getHiResImages(800,800)}}",
  "{{#function main.showPreloader(false)}}"
]

Parameters:

Name Type Default Description
isPreload boolean - If true, enables the preloader.
message string undefined A text message that appears next to the preloader.

Returns:void


showToast

showToast(data?: string, duration?: number): void

Inherited from AuBaseWidget.showToast

Shows a toast.

return editor.loadUserInfo(data)
    .catch(err => {
        this.widget.showToast("Error: Invalid data");
        console.log(err);
    });

Parameters:

Name Type Description
data? string A string message to display in the toast.
duration? number Defines how long to show the toast for.

Returns:void


switchSurfaceTo

switchSurfaceTo(surfaceIndex: number): Promise‹Product›

Changes product pages in Customer's Canvas.

Parameters:

Name Type Description
surfaceIndex number A zero-based index of the surface on which you want to switch.

Returns:Promise‹Product›


updateSurfaces

updateSurfaces(mode: string, update: SurfaceTypes | IStateSurface | number): Promise‹Product›

Adds or removes a surface.

Parameters:

Name Type Description
mode string Update mode - 'add' or 'remove'.
update SurfaceTypes | IStateSurface | number The index of a surface to be removed or a surface to be added (depends on the mode).

Returns:Promise‹Product›