Class AuWidgetCanvas

A widget that is used to integrate Customer's Canvas 4 to the editor. Deprecated. Instead, you can use the Design Editor widget.

{
  "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)}}"
    }
  ]
}

Package: ui-framework

Properties

actionsFinished

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

Declaration

public actionsFinished: boolean = false

Property Value

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

allItems

Gets all design elements in the product.

Declaration

CustomersCanvas.IframeApi.ObjectModel.Item[] allItems

Property Value

Type	Description
CustomersCanvas.IframeApi.ObjectModel.Item[]	Gets all design elements in the product.

boundsData

Gets CC boundsData

Declaration

Object boundsData

Property Value

Type	Description
Object	Gets CC boundsData

currentSurfaceName

Gets the name of the current surface.

Declaration

string currentSurfaceName

Property Value

Type	Description
string	Gets the name of the current surface.

depositPhotos

Gets all images added from DepositPhotos.

Declaration

IDepositPhotosItem[] depositPhotos

Property Value

Type	Description
IDepositPhotosItem[]	Gets all images added from DepositPhotos.

hiResUrls

Gets URLs that link to high-resolution print files.

Declaration

string[] hiResUrls

Property Value

Type	Description
string[]	Gets URLs that link to high-resolution print files.

itemsData

Personalization data for design elements.

Declaration

public itemsData: kvObject<string, CanvasItemData>

Property Value

Type	Description
kvObject<string, CanvasItemData>	Personalization data for design elements.

modifiedItem

Last modified item on the canvas.

Declaration

public modifiedItem?: CanvasItemChanges = null

Property Value

Type	Description
CanvasItemChanges	Last modified item on the canvas.

params

Properties of the canvas.

Declaration

public params: ICanvasDefinitionParams

Property Value

Type	Description
ICanvasDefinitionParams	Properties of the canvas.

proofImageUrls

Gets temporary URLs that link to proof images.

Declaration

string[][] proofImageUrls

Property Value

Type	Description
string[][]	Gets temporary URLs that link to proof images.

stateId

Gets the identifier of the last saved state file.

Declaration

string stateId

Property Value

Type	Description
string	Gets the identifier of the last saved state file.

tags

Gets product tags.

Declaration

CustomersCanvas.IframeApi.ObjectModel.ITagsDictionary tags

Property Value

Type	Description
CustomersCanvas.IframeApi.ObjectModel.ITagsDictionary	Gets product tags.

userChanges

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

Declaration

any userChanges

Property Value

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

userId

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

Declaration

string userId

Property Value

Type	Description
string	Gets the identifier of the user who currently works with the editor.

variableData

Gets all variable items in the product.

Declaration

CustomersCanvas.IframeApi.ObjectModel.IVariable[] variableData

Property Value

Type	Description
CustomersCanvas.IframeApi.ObjectModel.IVariable[]	Gets all variable items in the product.

violationWarningData

Gets violation warnings

Declaration

CustomersCanvas.IframeApi.Editor.IViolationWarningData[] violationWarningData

Property Value

Type	Description
CustomersCanvas.IframeApi.Editor.IViolationWarningData[]	Gets violation warnings

Methods

addSurface(CustomersCanvas, number)

Adds a product surface.

Declaration

function addSurface(surface: CustomersCanvas, position?: number)

Parameters

Type	Name	Description
CustomersCanvas	surface	A surface (page) to add.
number	position	Surface position (zero-based, optional). By default, this method adds pages to the end of the surface array.

Returns

Type	Description
Promise<CustomersCanvas.IframeApi.ObjectModel.Product>

addSurfaces(CustomersCanvas.IframeApi.ObjectModel.SurfaceTypes[] | CustomersCanvas.IframeApi.ObjectModel.IStateSurface, number)

Adds several product surfaces.

Declaration

function addSurfaces(surfaces: CustomersCanvas.IframeApi.ObjectModel.SurfaceTypes[] | CustomersCanvas.IframeApi.ObjectModel.IStateSurface, position?: number)

Parameters

Type	Name	Description
CustomersCanvas.IframeApi.ObjectModel.SurfaceTypes[] | CustomersCanvas.IframeApi.ObjectModel.IStateSurface	surfaces	Surfaces (pages) as an array of surface definitions or a .
number	position	The position from which new pages will be inserted. (zero-based, optional).

Returns

Type	Description
Promise<CustomersCanvas.IframeApi.ObjectModel.Product>

applyViewerSettings(ICanvasDefinitionSetViewerSettings)

Executes the setViewerSettings command.

Declaration

function applyViewerSettings(params: ICanvasDefinitionSetViewerSettings)

Parameters

Type	Name	Description
ICanvasDefinitionSetViewerSettings	params	The settings of the zoom level in the editor.

Returns

Type	Description
Promise<any>

checkInitDependenciesWidgets()

Returns an array of widget names, due to which the current widget cannot receive parameters.

Declaration

function checkInitDependenciesWidgets()

Returns

Type	Description
string[]

exportWidgetData(boolean)

Serializes the canvas widget.

Declaration

function exportWidgetData(force: boolean)

Parameters

Type	Name	Description
boolean	force	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

Type	Description
Promise<CanvasData>	A promise with the stateId property. { stateId: string }

getAllItems()

Gets all design elements in the product.

Declaration

function getAllItems()

Returns

Type	Description
Promise<CustomersCanvas.IframeApi.ObjectModel.Item[]>	A promise with an array of ObjectModel.Item elements.

getCanvasItemModel(ItemChangeObject)

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

Declaration

function getCanvasItemModel(changeObject: ItemChangeObject)

Parameters

Type	Name	Description
ItemChangeObject	changeObject

Returns

Type	Description
Promise<CanvasItemChanges>

getDepositPhotos()

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.

Declaration

function getDepositPhotos()

Returns

Type	Description
Promise<IDepositPhotosItem[]>	A promise with an array of names and values of the variable fields.

getHiResImages(number, number, string, 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.

Declaration

function getHiResImages(width: number, height: number, stateId?: string, filename?: string)

Parameters

Type	Name	Description
number	width	The maximum width of proof images.
number	height	The maximum height of proof images.
string	stateId	A custom state file name without an extension, up to 36 symbols length.
string	filename	The name of the downloaded file.

Returns

Type	Description
Promise<string[]>	A promise with an array of URLs that link to the rendered print files.

getItemText(string)

Returns the content of text items.

Declaration

function getItemText(itemName: string)

Parameters

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

Returns

Type	Description
Promise<string>	A promise with a string.

getProofImages(number, number)

Renders proof images and returns URLs that link to these images. This method is equivalent to editor.getProofImages in the IFrame API.

Declaration

function getProofImages(width: number, height: number)

Parameters

Type	Name	Description
number	width	The maximum width of proof images.
number	height	The maximum height of proof images.

Returns

Type	Description
Promise<string[]>	A promise with an array of temporary links to proof images.

getTags()

Gets product tags.

Declaration

function getTags()

Returns

Type	Description
Promise<CustomersCanvas.IframeApi.ObjectModel.ITagsDictionary>	A promise with an ObjectModel.ITagsDictionary.

getVariableData()

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.

Declaration

function getVariableData()

Returns

Type	Description
Promise<CustomersCanvas.IframeApi.ObjectModel.IVariable[]>	A promise with an array of names and values of the variable fields.

openAssetManagerFor(string)

Opens the Asset Manager for image items.

Declaration

function openAssetManagerFor(itemName: string)

Parameters

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

removeSurface(number)

Removes a product surface.

Declaration

function removeSurface(surfaceIndex: number)

Parameters

Type	Name	Description
number	surfaceIndex	A zero-based index of the surface that you want to remove.

Returns

Type	Description
Promise<CustomersCanvas.IframeApi.ObjectModel.Product>

resetPreloaderState()

Declaration

function resetPreloaderState()

restoreWidgetFromData(CanvasData, boolean)

Deserializes the canvas widget. In a common scenario, the multistep editor restores a canvas when it is initialized.

Declaration

function restoreWidgetFromData(widgetData: CanvasData, force: boolean)

Parameters

Type	Name	Description
CanvasData	widgetData	An object containing the stateId property.
boolean	force	If true, gets a product definition from the state file and then executes the initial command. If false, it does nothing.

Returns

Type	Description
Promise<void>

saveProduct(string)

Saves a product. This method is equivalent to editor.saveProduct from the IFrame API.

Declaration

function saveProduct(stateId?: string)

Parameters

Type	Name	Description
string	stateId	A custom state file name without an extension, up to 36 symbols length.

Returns

Type	Description
Promise<CustomersCanvas.IframeApi.Editor.ISaveProductResult>	A promise with identifiers of the user and the saved state file.

setTags(any)

Sets product tags. This method is equivalent to product.setTags from the IFrame API.

Declaration

function setTags(newTags: any)

Parameters

Type	Name	Description
any	newTags	The tags that you want to specify for the product. These tags will reset existing product tags.

Returns

Type	Description
Promise<void>

showPreloader(boolean, string | string[], number)

Shows a preloader.

"onClick": [
  "{{#function main.showPreloader(true, 'Creating print files...')}}",
  "{{#function $['editor'].getHiResImages(800,800)}}",
  "{{#function main.showPreloader(false)}}"
]

Declaration

function showPreloader(isPreload: boolean, message: string | string[], timeout: number)

Parameters

Type	Name	Description
boolean	isPreload	If true, enables the preloader.
string | string[]	message	A text message that appears next to the preloader.
number	timeout

showToast(string, number)

Shows a toast.

return editor.loadUserInfo(data)
    .catch(err => {
        this.widget.showToast("Error: Invalid data");
        console.log(err);
    });

Declaration

function showToast(data?: string, duration?: number)

Parameters

Type	Name	Description
string	data	A string message to display in the toast.
number	duration	Defines how long to show the toast for.

switchSurfaceTo(number)

Changes product pages in the Design Editor.

Declaration

function switchSurfaceTo(surfaceIndex: number)

Parameters

Type	Name	Description
number	surfaceIndex	A zero-based index of the surface on which you want to switch.

Returns

Type	Description
Promise<any>

toggleObjectInspector()

Enables or disables the Object Inspector in the editor.

Declaration

function toggleObjectInspector()

updateSurfaces(string, CustomersCanvas)

Add or remove surface.

Declaration

function updateSurfaces(mode: string, update: CustomersCanvas)

Parameters

Type	Name	Description
string	mode	Update mode - 'add' or 'remove'.
CustomersCanvas	update	Update value - index of surface to remove or surface to add (depends on mode).

Returns

Type	Description
Promise<CustomersCanvas.IframeApi.ObjectModel.Product>