White paper: Templates in web-to-print.  Free download

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

Return 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


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›


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›

Return content of text item.

Parameters:

Name Type Description
itemName string name of 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 The maximum width of proof images OR parameter object for editor.getProofImages() method. if it is an object, then it is passed to the editor.getProofImages() method, and the remaining parameters are 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 -
generateLargePreviews boolean false -
largePreviewMaxWidth number 1000 -
largePreviewMaxHeight number 1000 -

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›

Generate current user token for 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›

Open asset manager for image placeholder item.

Parameters:

Name Type Description
itemName string name of placeholder item.

Returns:Promise‹void›


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›