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

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

itemsData

• itemsData: kvObject‹string, CanvasItemData›

Personalization data for design elements.

`Optional` modifiedItem

• modifiedItem? : CanvasItemChanges = null

Last modified item on the canvas.

params

• params: ICanvasDefinitionParams

Overrides AuBaseWidget.params

Properties of the canvas.

paramsRaw

• paramsRaw: any

Inherited from AuBaseWidget.paramsRaw

Uncompiled widget configuration.

Accessors

allItems

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

Gets all design elements in the product.

Returns:CustomersCanvas.IframeApi.ObjectModel.Item[]

An array of ObjectModel.Item elements.

boundsData

• get boundsData(): Object

Gets CC boundsData

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

userChanges

• get userChanges(): any

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

Returns:any

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(): CustomersCanvas.IframeApi.ObjectModel.IVariable[]

Gets all variable items in the product.

Returns:CustomersCanvas.IframeApi.ObjectModel.IVariable[]

An array of ObjectModel.IVariable elements.

violationWarningData

• get violationWarningData(): CustomersCanvas.IframeApi.Editor.IViolationWarningData[]

Gets violation warnings

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

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

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

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

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

Parameters:

Name	Type
`changeObject`	ItemChangeObject

Returns:Promise‹CanvasItemChanges›

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.

getHiResImages

▸ getHiResImages(width: number, height: number, stateId?: string, 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.
`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 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[]›

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›

Gets product tags.

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

A promise with an ObjectModel.ITagsDictionary.

getVariableData

▸ getVariableData(): Promise‹CustomersCanvas.IframeApi.ObjectModel.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‹CustomersCanvas.IframeApi.ObjectModel.IVariable[]›

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

openAssetManagerFor

▸ openAssetManagerFor(itemName: string): void

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›

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›

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›

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

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

Enables or disables the Object Inspector in the editor.

Returns:void

Class: AuWidgetCanvas

Hierarchy

Implements

Index

Properties

Accessors

Methods

Properties

actionsFinished

itemsData

Optional modifiedItem

params

paramsRaw

Accessors

allItems

boundsData

currentSurfaceName

depositPhotos

hiResUrls

proofImageUrls

stateId

tags

userChanges

userId

variableData

violationWarningData

Methods

addCustomStyles

applyViewerSettings

compile

emitChange

exportWidgetData

getAllItems

getCanvasItemModel

getDepositPhotos

getHiResImages

getItemText

getProofImages

getTags

getVariableData

openAssetManagerFor

restoreWidgetFromData

saveProduct

setTags

showPreloader

showToast

switchSurfaceTo

toggleObjectInspector

`Optional` modifiedItem