UI Framework ReferenceAuWidgetDesignEditor

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

Defined in src/widgets/au-widget-design-editor/au-widget-design-editor.ts:107

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


Optional modifiedItem

modifiedItem? : CanvasItemChanges = null

Defined in src/widgets/au-widget-design-editor/au-widget-design-editor.ts:81

Last modified item on the canvas.


params

params: IDesignEditorDefinitionParams

Overrides AuBaseWidget.params

Defined in src/widgets/au-widget-design-editor/au-widget-design-editor.ts:78


paramsRaw

paramsRaw: any

Inherited from AuBaseWidget.paramsRaw

Defined in src/widgets/widget/AuBaseWidget.ts:53

Uncompiled widget configuration.

Accessors

allItems

get allItems(): Item[]

Defined in src/widgets/au-widget-design-editor/au-widget-design-editor.ts:146

Gets all design elements in the product.

Returns:Item[]

An array of ObjectModel.Item elements.


currentSurfaceName

get currentSurfaceName(): string

Defined in src/widgets/au-widget-design-editor/au-widget-design-editor.ts:110

Gets the name of the current surface.

Returns:string


depositPhotos

get depositPhotos(): IDepositPhotosItem[]

Defined in src/widgets/au-widget-design-editor/au-widget-design-editor.ts:161

Gets all images added from DepositPhotos.

Returns:IDepositPhotosItem[]


hiResUrls

get hiResUrls(): string[]

Defined in src/widgets/au-widget-design-editor/au-widget-design-editor.ts:120

Gets URLs that link to high-resolution print files.

Returns:string[]


proofImageUrls

get proofImageUrls(): string[][]

Defined in src/widgets/au-widget-design-editor/au-widget-design-editor.ts:115

Gets temporary URLs that link to proof images.

Returns:string[][]


stateId

get stateId(): string

Defined in src/widgets/au-widget-design-editor/au-widget-design-editor.ts:125

Gets the identifier of the last saved state file.

Returns:string


tags

get tags(): ITagsDictionary

Defined in src/widgets/au-widget-design-editor/au-widget-design-editor.ts:169

Gets product tags.

Returns:ITagsDictionary

An ObjectModel.ITagsDictionary.


userChanges

get userChanges(): any

Defined in src/widgets/au-widget-design-editor/au-widget-design-editor.ts:133

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

Returns:any

An object representing IUserChanges.


userId

get userId(): string

Defined in src/widgets/au-widget-design-editor/au-widget-design-editor.ts:138

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

Returns:string


variableData

get variableData(): IVariable[]

Defined in src/widgets/au-widget-design-editor/au-widget-design-editor.ts:154

Gets all variable items in the product.

Returns:IVariable[]

An array of ObjectModel.IVariable elements.

Methods

addCustomStyles

addCustomStyles(params: any): void

Inherited from AuBaseWidget.addCustomStyles

Defined in src/widgets/widget/AuBaseWidget.ts:352

Applies new styles to a widget.

Parameters:

Name Type
params any

Returns:void


applyViewerSettings

applyViewerSettings(params: IDesignEditorDefinitionSetViewerSettings): Promise‹any›

Defined in src/widgets/au-widget-design-editor/au-widget-design-editor.ts:344

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

Defined in src/widgets/widget/AuBaseWidget.ts:185

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

Defined in src/widgets/widget/AuBaseWidget.ts:161

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

Defined in src/widgets/au-widget-design-editor/au-widget-design-editor.ts:226

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[]›

Defined in src/widgets/au-widget-design-editor/au-widget-design-editor.ts:411

Gets all design elements in the product.

Returns:Promise‹Item[]›

A promise with an array of ObjectModel.Item elements.


getDepositPhotos

getDepositPhotos(): Promise‹IDepositPhotosItem[]›

Defined in src/widgets/au-widget-design-editor/au-widget-design-editor.ts:424

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.


getEditor

getEditor(): Promise‹Editor›

Inherited from AuDesignEditor.getEditor

Defined in src/widgets/au-widget-design-editor/AuDesignEditor.ts:48

Returns a promise with an instance of the DesignEditor.

Returns:Promise‹Editor›


getHiResImages

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

Defined in src/widgets/au-widget-design-editor/au-widget-design-editor.ts:373

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.

Returns:Promise‹string[]›

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


getProduct

getProduct(): Promise‹Product›

Inherited from AuDesignEditor.getProduct

Defined in src/widgets/au-widget-design-editor/AuDesignEditor.ts:39

Returns a promise with the product opened in the DesignEditor.

Returns:Promise‹Product›


getProofImages

getProofImages(width: number, height: number): Promise‹string[]›

Defined in src/widgets/au-widget-design-editor/au-widget-design-editor.ts:356

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 800 The maximum width of proof images.
height number 800 The maximum height of proof images.

Returns:Promise‹string[]›

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


getTags

getTags(): Promise‹ITagsDictionary›

Defined in src/widgets/au-widget-design-editor/au-widget-design-editor.ts:444

Gets product tags.

Returns:Promise‹ITagsDictionary›

A promise with an ObjectModel.ITagsDictionary.


getVariableData

getVariableData(): Promise‹IVariable[]›

Defined in src/widgets/au-widget-design-editor/au-widget-design-editor.ts:400

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.


replaceInterpolationPlaceholder

replaceInterpolationPlaceholder(): Promise‹void›

Defined in src/widgets/au-widget-design-editor/au-widget-design-editor.ts:486

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

Returns:Promise‹void›


restoreWidgetFromData

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

Defined in src/widgets/au-widget-design-editor/au-widget-design-editor.ts:242

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›

Defined in src/widgets/au-widget-design-editor/au-widget-design-editor.ts:474

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›

Defined in src/widgets/au-widget-design-editor/au-widget-design-editor.ts:460

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

Defined in src/widgets/widget/AuBaseWidget.ts:250

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

Defined in src/widgets/widget/AuBaseWidget.ts:514

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›

Defined in src/widgets/au-widget-design-editor/au-widget-design-editor.ts:308

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›