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"},
"onActivate": "{{#function $['editor'].getHiResImages(800,800)}}"
}
]
}
Hierarchy
↳ AuCanvas
↳ AuWidgetCanvas
Implements
Index
Properties
Accessors
- allItems
- boundsData
- currentSurfaceName
- depositPhotos
- hiResUrls
- proofImageUrls
- stateId
- tags
- userChanges
- userId
- variableData
- violationWarningData
Methods
- addCssStyles
- addCustomStyles
- addSurface
- addSurfaces
- applyViewerSettings
- checkInitDependenciesWidgets
- compile
- emitChange
- exportWidgetData
- getAllItems
- getCanvasItemModel
- getDepositPhotos
- getHiResImages
- getItemText
- getProofImages
- getTags
- getVariableData
- openAssetManagerFor
- removeSurface
- restoreWidgetFromData
- saveProduct
- setTags
- showPreloader
- showToast
- switchSurfaceTo
- toggleObjectInspector
- updateSurfaces
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
tags
• get tags(): CustomersCanvas.IframeApi.ObjectModel.ITagsDictionary
Gets product tags.
Returns:CustomersCanvas.IframeApi.ObjectModel.ITagsDictionary
An ObjectModel.ITagsDictionary
.
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
addCssStyles
▸ addCssStyles(params
: any): void
Inherited from AuBaseWidget.addCssStyles
Parameters:
Name | Type |
---|---|
params |
any |
Returns:void
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
: CustomersCanvas.IframeApi.ObjectModel.SurfaceTypes | CustomersCanvas.IframeApi.ObjectModel.IStateSurface, position?
: number): Promise‹CustomersCanvas.IframeApi.ObjectModel.Product›
Adds a product surface.
Parameters:
Name | Type | Description |
---|---|---|
surface |
CustomersCanvas.IframeApi.ObjectModel.SurfaceTypes | CustomersCanvas.IframeApi.ObjectModel.IStateSurface | A surface (page) to add. |
position? |
number | Surface position (zero-based, optional). By default, this method adds pages to the end of the surface array. |
Returns:Promise‹CustomersCanvas.IframeApi.ObjectModel.Product›
addSurfaces
▸ addSurfaces(surfaces
: CustomersCanvas.IframeApi.ObjectModel.SurfaceTypes[] | CustomersCanvas.IframeApi.ObjectModel.IStateSurface, position?
: number): Promise‹CustomersCanvas.IframeApi.ObjectModel.Product›
Adds several product surfaces.
Parameters:
Name | Type | Description |
---|---|---|
surfaces |
CustomersCanvas.IframeApi.ObjectModel.SurfaceTypes[] | CustomersCanvas.IframeApi.ObjectModel.IStateSurface | Surfaces (pages) as an array of surface definitions or a . |
position? |
number | The position from which new pages will be inserted. (zero-based, optional). |
Returns:Promise‹CustomersCanvas.IframeApi.ObjectModel.Product›
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›
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 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 in 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. |
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
removeSurface
▸ removeSurface(surfaceIndex
: number): Promise‹CustomersCanvas.IframeApi.ObjectModel.Product›
Removes a product surface.
Parameters:
Name | Type | Description |
---|---|---|
surfaceIndex |
number | A zero-based index of the surface that you want to remove. |
Returns:Promise‹CustomersCanvas.IframeApi.ObjectModel.Product›
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 the Design Editor.
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
updateSurfaces
▸ updateSurfaces(mode
: string, update
: CustomersCanvas.IframeApi.ObjectModel.SurfaceTypes | CustomersCanvas.IframeApi.ObjectModel.IStateSurface | number): Promise‹CustomersCanvas.IframeApi.ObjectModel.Product›
Add or remove surface.
Parameters:
Name | Type | Description |
---|---|---|
mode |
string | Update mode - 'add' or 'remove'. |
update |
CustomersCanvas.IframeApi.ObjectModel.SurfaceTypes | CustomersCanvas.IframeApi.ObjectModel.IStateSurface | number | Update value - index of surface to remove or surface to add (depends on mode). |
Returns:Promise‹CustomersCanvas.IframeApi.ObjectModel.Product›