Class AuWidgetDesignEditor

A widget that is used to integrate Customer's Canvas 6 or 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"},
      "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.

actionsFinishedPromise

Declaration

public actionsFinishedPromise: Deferred<string> = new Deferred<string>()

Property Value

Type	Description
Deferred<string>

allItems

Gets all design elements in the product.

Declaration

Item[] allItems

Property Value

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

artLinkItems

Gets all images added from ArtLink

Declaration

IArtLinkItem[] artLinkItems

Property Value

Type	Description
IArtLinkItem[]	Gets all images added from ArtLink

boundsData

Width, height, and upper-left corner coordinates of the bounding rectangle of all items in a group, in points. For details, see the Calculating Area of Design Layers topic.

Declaration

Object boundsData

Property Value

Type	Description
Object	Width, height, and upper-left corner coordinates of the bounding rectangle of all items in a group, in points. For details, see the `Calculating Area of Design Layers` topic.

currentSurfaceIndex

Gets the index of the current surface.

Declaration

number currentSurfaceIndex

Property Value

Type	Description
number	Gets the index of the current surface.

currentSurfaceName

Gets the name of the current surface.

Declaration

string currentSurfaceName

Property Value

Type	Description
string	Gets the name of the current surface.

customButtonCb

Declaration

public customButtonCb: (sender: string, customData: any) => void

Property Value

Type	Description
(sender: string, customData: any) => void

depositPhotos

Gets all images added from DepositPhotos.

Declaration

IDepositPhotosItem[] depositPhotos

Property Value

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

dpApi

Declaration

public dpApi: PrivateDesignProcessorApiClient

Property Value

Type	Description
PrivateDesignProcessorApiClient

finishProductDesignResult

Return last computed value by calculateIdentifyingString(string)

Declaration

Editor.IFinishDesignResult finishProductDesignResult

Property Value

Type	Description
Editor.IFinishDesignResult	Return last computed value by calculateIdentifyingString(string)

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.

identifyingString

Return last computed value by calculateIdentifyingString(string)

Declaration

string identifyingString

Property Value

Type	Description
string	Return last computed value by calculateIdentifyingString(string)

itemsData

Personalization data for design elements.

Declaration

public itemsData: kvObject<string, CanvasItemData>

Property Value

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

itemsOnSurfacesCount

Declaration

public itemsOnSurfacesCount: Array<number> = []

Property Value

Type	Description
Array<number>

modifiedItem

Last modified item on the canvas.

Declaration

public modifiedItem?: DesignEditorItemChanges = null

Property Value

Type	Description
DesignEditorItemChanges	Last modified item on the canvas.

params

Declaration

public params: IDesignEditorDefinitionParams

Property Value

Type	Description
IDesignEditorDefinitionParams

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.

proofPdfUrls

Gets temporary URLs that link to proof PDF images.

Declaration

string[] proofPdfUrls

Property Value

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

selectedGroupBoundsData

Declaration

public selectedGroupBoundsData?: IBoundsData

Property Value

Type	Description
IBoundsData

sourcedItems

Gets all items by source

Declaration

ISourcedItemsInfo sourcedItems

Property Value

Type	Description
ISourcedItemsInfo	Gets all items by source

stateId

Gets the identifier of the last saved state file. Sets 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. Sets the identifier of the last saved state file.

surfaceCount

Get the count of surfaces in product.

Declaration

number surfaceCount

Property Value

Type	Description
number	Get the count of surfaces in product.

Type	Description
ITagsDictionary	Gets product tags.

token

Returns the current user token.

Declaration

string token

Property Value

Type	Description
string	Returns the current user token.

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

IVariable[] variableData

Property Value

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

violationData

Declaration

Editor.IViolationWarningData[] violationData

Property Value

Type	Description
Editor.IViolationWarningData[]

violationWarningData

For items having preflight problems, it provides the item name, item type, corresponding surface name and index, and states of violation warnings. This array allows for detecting products that have violations of the image resolution, safety lines, regions, and text clipping.

Declaration

Editor.IViolationWarningData[] violationWarningData

Property Value

Type	Description
Editor.IViolationWarningData[]	For items having preflight problems, it provides the item name, item type, corresponding surface name and index, and states of violation warnings. This array allows for detecting products that have violations of the image resolution, safety lines, regions, and text clipping.

Methods

addSurface(SurfaceTypes | IStateSurface, number)

Adds a product surface.

Declaration

function addSurface(surface: SurfaceTypes | IStateSurface, position?: number)

Parameters

Type	Name	Description
SurfaceTypes \| IStateSurface	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<Product>

addSurfaces(SurfaceTypes[] | IStateSurface, number)

Adds product surfaces.

Declaration

function addSurfaces(surfaces: SurfaceTypes[] | IStateSurface, position?: number)

Parameters

Type	Name	Description
SurfaceTypes[] \| IStateSurface	surfaces	Surfaces (pages) to add.
number	position	Surfaces position (zero-based, optional).

Returns

Type	Description
Promise<Product>

applyViewerSettings(IDesignEditorDefinitionSetViewerSettings)

Executes the setViewerSettings command.

Declaration

function applyViewerSettings(params: IDesignEditorDefinitionSetViewerSettings)

Parameters

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

Returns

Type	Description
Promise<any>

calculateIdentifyingString(string)

Calculate identifyig string by template.

Declaration

function calculateIdentifyingString(template: string)

Parameters

Type	Name	Description
string	template	template string

Returns

Type	Description
Promise<string>

checkInitDependenciesWidgets()

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

Declaration

function checkInitDependenciesWidgets()

Returns

Type	Description
string[]

colorToHex(Color)

Declaration

function colorToHex(color: Color)

Parameters

Type	Name	Description
Color	color

Returns

Type	Description
string

countItemsOnSurfaces(boolean)

Count items on surfaces and push counters to this.itemsOnSurfacesCount

Declaration

function countItemsOnSurfaces(onPrintArea: boolean)

Parameters

Type	Name	Description
boolean	onPrintArea	boolean flag showing if we should count only items laying inside print areas; working only with DE 6.3.0+

Returns

Type	Description
Promise<void>

createPrivateDesignFromPublicDesign(string)

Declaration

function createPrivateDesignFromPublicDesign(stateId: string)

Parameters

Type	Name	Description
string	stateId

Returns

Type	Description
Promise<string>

createPrivateDesignFromResources(string)

Declaration

function createPrivateDesignFromResources(resourceId: string)

Parameters

Type	Name	Description
string	resourceId

Returns

Type	Description
Promise<string>

exportWidgetData(boolean)

Serializes the DesignEditor 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 }`

finishProductDesign(Editor.IFinishProductDesignOptions, Editor.IVdpData)

Call finishProductDesign from Editor.

Declaration

function finishProductDesign(options?: Editor.IFinishProductDesignOptions, data?: Editor.IVdpData)

Parameters

Type	Name	Description
Editor.IFinishProductDesignOptions	options
Editor.IVdpData	data

Returns

Type	Description
Promise<IFinishDesignResult>

getAllItems()

Gets all design elements in the product.

Declaration

function getAllItems()

Returns

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

getArtLinkItems()

Gets info about images added from ArtLink. For more details, you can refer to the topic describing how Customers's Canvas works with Depositphotos Assets.

Declaration

function getArtLinkItems()

Returns

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

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.

getDesignEditorItemModel(BaseTextItem | PlaceholderItem | ShapeItem)

Declaration

function getDesignEditorItemModel(item: BaseTextItem | PlaceholderItem | ShapeItem)

Parameters

Type	Name	Description
BaseTextItem \| PlaceholderItem \| ShapeItem	item

Returns

Type	Description
Promise<DesignEditorItemChanges>

getEditor()

Returns a promise with an instance of the DesignEditor.

Declaration

function getEditor()

Returns

Type	Description
Promise<Editor>

getHiResImages(number, number, string | object, boolean, string, Editor.IVdpData, THiResImagesOptions)

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 | object, pregeneratePreviewImages: boolean, filename?: string, data?: Editor.IVdpData, options?: THiResImagesOptions)

Parameters

Type	Name	Description
number	width	The maximum width of proof images.
number	height	The maximum height of proof images.
string \| object	stateId	A custom state file name without an extension, up to 36 symbols length.
boolean	pregeneratePreviewImages	If `true`, this method starts generating preview images in the background when called. In this case, the resulting links to these images will be obtained before the image generation is complete. If `false`, this method only updates links to these images and starts generating the preview images when a request to download them is received.
string	filename	The name of the downloaded file
Editor.IVdpData	data	The VDP data.
THiResImagesOptions	options

Returns

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

getItemsBySource(string)

Declaration

function getItemsBySource(sourceType: string)

Parameters

Type	Name	Description
string	sourceType

Returns

Type	Description
Promise<ISourcedItemsInfo>

getItemText(string)

Returns the content of a text item.

Declaration

function getItemText(itemName: string)

Parameters

Type	Name	Description
string	itemName	The name of the text item.

Returns

Type	Description
Promise<string>

getProduct()

Returns a promise with the product opened in the DesignEditor.

Declaration

function getProduct()

Returns

Type	Description
Promise<Product>

getProofImages(number | Object, number, boolean | object, boolean, boolean, number, number, Editor.IVdpData, TProofImagesOptions)

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 | Object, height: number, pregeneratePreviewImages: boolean | object, generateProductProof: boolean, generateLargePreviews: boolean, largePreviewMaxWidth: number, largePreviewMaxHeight: number, data?: Editor.IVdpData, options?: TProofImagesOptions)

Parameters

Type	Name	Description
number \| Object	width	If number, defines the maximum width of proof images. If object, contains parameters for the `editor.getProofImages()` method; in this case, other parameters will be ignored.
number	height	The maximum height of proof images.
boolean \| object	pregeneratePreviewImages	If `true`, this method starts generating preview images in the background when called. In this case, the resulting links to these images will be returned before the image generation is complete. If `false`, this method only returns links to these images and starts generating the preview images when a request to download them is received.
boolean	generateProductProof	If `true`, this method renders previews of all product pages to a multi-page PDF file.
boolean	generateLargePreviews	If `true`, this method renders real-size preview images.
number	largePreviewMaxWidth	The maximum width of large preview images.
number	largePreviewMaxHeight	The maximum height of large preview images.
Editor.IVdpData	data	The VDP data.
TProofImagesOptions	options

Returns

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

getProofPdf(Editor.IVdpData, IGetProofImagesOptions, boolean)

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

Declaration

function getProofPdf(data?: Editor.IVdpData, paramsObj: IGetProofImagesOptions, isForce: boolean)

Parameters

Type	Name	Description
Editor.IVdpData	data	The VDP data.
IGetProofImagesOptions	paramsObj
boolean	isForce

Returns

Type	Description
Promise<string[]>

getSurfaceCount()

Get the surface count from product and set surfaceCount prop value

Declaration

function getSurfaceCount()

Returns

Type	Description
Promise<number>

getTags()

Gets product tags.

Declaration

function getTags()

Returns

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

getToken()

Generates the current user token based on the token property.

Declaration

function getToken()

Returns

Type	Description
Promise<string>

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<IVariable[]>	A promise with an array of names and values of the variable fields.

getViolationData()

Get violation data from DesignEditor.

Declaration

function getViolationData()

Returns

Type	Description
Promise<IViolationWarningData[]>

initDpApi()

Declaration

function initDpApi()

openAssetManagerFor(string)

Opens the Asset manager to select the content of an image placeholder.

Declaration

function openAssetManagerFor(itemName: string)

Parameters

Type	Name	Description
string	itemName	The name of the placeholder item.

Returns

Type	Description
Promise<void>

openGalleryForBackground()

Opens the Asset manager to select the background.

Declaration

function openGalleryForBackground()

Returns

Type	Description
Promise<void>

removeSurface(number)

Removes a product surface.

Declaration

function removeSurface(surfaceIndex: number)

Parameters

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

Returns

Type	Description
Promise<Product>

replaceInterpolationPlaceholder()

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

Declaration

function replaceInterpolationPlaceholder()

Returns

Type	Description
Promise<void>

resetPreloaderState()

Declaration

function resetPreloaderState()

restoreWidgetFromData(CanvasData, boolean)

Deserializes the DesignEditor 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, Editor.IVdpData)

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

Declaration

function saveProduct(stateId?: string, data?: Editor.IVdpData)

Parameters

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

Returns

Type	Description
Promise<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.

swapSurfaces(number, number)

Swaps two surfaces (pages) in the product.

Declaration

function swapSurfaces(lhsSurfaceIndex: number, rhsSurfaceIndex: number)

Parameters

Type	Name	Description
number	lhsSurfaceIndex	Index of the first surface (page) to swap.
number	rhsSurfaceIndex	Index of the second surface (page) to swap.

Returns

Type	Description
Promise<Product>

switchItemContent(SwitchItemContentModel)

Declaration

function switchItemContent(model: SwitchItemContentModel)

Parameters

Type	Name	Description
SwitchItemContentModel	model

Returns

Type	Description
Promise<void>

switchSurfaceTo(number)

Changes product pages in Customer's Canvas.

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<Product>

updateSurfaces(string, SurfaceTypes | IStateSurface | number)

Adds or removes a surface.

Declaration

function updateSurfaces(mode: string, update: SurfaceTypes | IStateSurface | number)

Parameters

Type	Name	Description
string	mode	Update mode - 'add' or 'remove'.
SurfaceTypes \| IStateSurface \| number	update	The index of a surface to be removed or a surface to be added (depends on the mode).

Returns

Type	Description
Promise<Product>