1. Support
  2. The Multistep Editor
  3. UI Framework Reference

UI Framework Reference › AuWidgetCanvas

Class: AuWidgetCanvas

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

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

{
  "widgets": [
    {
      "name": "editor",
      "type": "canvas",
      "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

↳ AuCanvas

↳ AuWidgetCanvas

Implements

Index

Properties

Accessors

Methods

Properties

actionsFinished

• actionsFinished: boolean = false

Defined in src/widgets/au-widget-canvas/au-widget-canvas.ts:104

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

itemsData

• itemsData: kvObject‹string, CanvasItemData›

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

Personalization data for design elements.

Optional modifiedItem

• modifiedItem? : CanvasItemChanges = null

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

Last modified item on the canvas.

params

• params: ICanvasDefinitionParams

Overrides AuBaseWidget.params

Defined in src/widgets/au-widget-canvas/au-widget-canvas.ts:75

Properties of the canvas.

paramsRaw

• paramsRaw: any

Inherited from AuBaseWidget.paramsRaw

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

Uncompiled widget configuration.

Accessors

allItems

• get allItems(): CustomersCanvas.IframeApi.ObjectModel.Item[]

Defined in src/widgets/au-widget-canvas/au-widget-canvas.ts:147

Gets all design elements in the product.

Returns:CustomersCanvas.IframeApi.ObjectModel.Item[]

An array of ObjectModel.Item elements.

currentSurfaceName

• get currentSurfaceName(): string

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

Gets the name of the current surface.

Returns:string

depositPhotos

• get depositPhotos(): IDepositPhotosItem[]

Defined in src/widgets/au-widget-canvas/au-widget-canvas.ts:162

Gets all images added from DepositPhotos.

Returns:IDepositPhotosItem[]

hiResUrls

• get hiResUrls(): string[]

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

Gets URLs that link to high-resolution print files.

Returns:string[]

proofImageUrls

• get proofImageUrls(): string[][]

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

Gets temporary URLs that link to proof images.

Returns:string[][]

stateId

• get stateId(): string

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

Gets the identifier of the last saved state file.

Returns:string

tags

• get tags(): CustomersCanvas.IframeApi.ObjectModel.ITagsDictionary

Defined in src/widgets/au-widget-canvas/au-widget-canvas.ts:170

Gets product tags.

Returns:CustomersCanvas.IframeApi.ObjectModel.ITagsDictionary

An ObjectModel.ITagsDictionary.

userChanges

• get userChanges(): any

Defined in src/widgets/au-widget-canvas/au-widget-canvas.ts:139

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-canvas/au-widget-canvas.ts:130

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

Returns:string

variableData

• get variableData(): CustomersCanvas.IframeApi.ObjectModel.IVariable[]

Defined in src/widgets/au-widget-canvas/au-widget-canvas.ts:155

Gets all variable items in the product.

Returns:CustomersCanvas.IframeApi.ObjectModel.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: ICanvasDefinitionSetViewerSettings): Promise‹any›

Defined in src/widgets/au-widget-canvas/au-widget-canvas.ts:368

Executes the setViewerSettings command.

Parameters:

Name Type Description
params ICanvasDefinitionSetViewerSettings 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-canvas/au-widget-canvas.ts:235

Serializes the canvas 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‹CustomersCanvas.IframeApi.ObjectModel.Item[]›

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

Gets all design elements in the product.

Returns:Promise‹CustomersCanvas.IframeApi.ObjectModel.Item[]›

A promise with an array of ObjectModel.Item elements.

getCanvasItemModel

▸ getCanvasItemModel(changeObject: ItemChangeObject): Promise‹CanvasItemChanges›

Inherited from AuCanvas.getCanvasItemModel

Defined in src/widgets/au-widget-canvas/AuCanvas.ts:133

Gets the object model of the elements on the canvas. @ignore

Parameters:

Name Type
changeObject ItemChangeObject

Returns:Promise‹CanvasItemChanges›

getDepositPhotos

▸ getDepositPhotos(): Promise‹IDepositPhotosItem[]›

Defined in src/widgets/au-widget-canvas/au-widget-canvas.ts:458

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.

getHiResImages

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

Defined in src/widgets/au-widget-canvas/au-widget-canvas.ts:404

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.

getItemText

▸ getItemText(itemName: string): Promise‹string›

Defined in src/widgets/au-widget-canvas/au-widget-canvas.ts:573

Returns the content of text items.

Parameters:

Name Type Description
itemName string The name of a text item from which you want to get the content.

Returns:Promise‹string›

A promise with a string.

getProofImages

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

Defined in src/widgets/au-widget-canvas/au-widget-canvas.ts:380

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‹CustomersCanvas.IframeApi.ObjectModel.ITagsDictionary›

Defined in src/widgets/au-widget-canvas/au-widget-canvas.ts:487

Gets product tags.

Returns:Promise‹CustomersCanvas.IframeApi.ObjectModel.ITagsDictionary›

A promise with an ObjectModel.ITagsDictionary.

getVariableData

▸ getVariableData(): Promise‹CustomersCanvas.IframeApi.ObjectModel.IVariable[]›

Defined in src/widgets/au-widget-canvas/au-widget-canvas.ts:432

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‹CustomersCanvas.IframeApi.ObjectModel.IVariable[]›

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

openAssetManagerFor

▸ openAssetManagerFor(itemName: string): void

Defined in src/widgets/au-widget-canvas/au-widget-canvas.ts:549

Opens the Asset Manager for image items.

Parameters:

Name Type Description
itemName string The name of an image item or a placeholder item for which you want to open the Asset Manager.

Returns:void

restoreWidgetFromData

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

Defined in src/widgets/au-widget-canvas/au-widget-canvas.ts:251

Deserializes the canvas 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‹CustomersCanvas.IframeApi.Editor.ISaveProductResult›

Defined in src/widgets/au-widget-canvas/au-widget-canvas.ts:518

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‹CustomersCanvas.IframeApi.Editor.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-canvas/au-widget-canvas.ts:502

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‹any›

Defined in src/widgets/au-widget-canvas/au-widget-canvas.ts:326

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‹any›

toggleObjectInspector

▸ toggleObjectInspector(): void

Defined in src/widgets/au-widget-canvas/au-widget-canvas.ts:560

Enables or disables the Object Inspector in the editor.

Returns:void