au-widget-design-editor/au-widget-design-editor

Classes

AuWidgetDesignEditor

A widget that is used to integrate Design Editor 5+.

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

Extends

• AuDesignEditor

Implements

• IRestorableWidget

Constructors

Constructor

new AuWidgetDesignEditor(): AuWidgetDesignEditor;

Returns

AuWidgetDesignEditor

Inherited from

AuDesignEditor.constructor

Properties

actionsFinished

actionsFinished: boolean = false;

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

actionsFinishedPromise

actionsFinishedPromise: Deferred<string>;

customButtonCb

customButtonCb: (sender, customData) => void;

Parameters

Parameter	Type
sender	string
customData	any

Returns

void

dpApi

dpApi: PrivateDesignProcessorApiClient;

isRestored

isRestored: boolean = false;

itemsData

itemsData: kvObject<string, CanvasItemData> = {};

Personalization data for design elements.

itemsOnSurfacesCount

itemsOnSurfacesCount: number[] = [];

modifiedItem?

optional modifiedItem?: DesignEditorItemChanges = null;

Last modified item on the canvas.

params

params: IDesignEditorDefinitionParams;

Compiled widget configuration.

Overrides

AuDesignEditor.params

selectedGroupBoundsData?

optional selectedGroupBoundsData?: IBoundsData;

Accessors

allItems

Get Signature

get allItems(): Item[];

Gets all design elements in the product.

Returns

Item[]

An array of ObjectModel.Item elements.

artLinkItems

Get Signature

get artLinkItems(): IArtLinkItem[];

Gets all images added from ArtLink

Returns

IArtLinkItem[]

boundsData

Get Signature

get boundsData(): 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.

Returns

Object

currentSurfaceIndex

Get Signature

get currentSurfaceIndex(): number;

Gets the index of the current surface.

Returns

number

currentSurfaceName

Get Signature

get currentSurfaceName(): string;

Gets the name of the current surface.

Returns

string

depositPhotos

Get Signature

get depositPhotos(): IDepositPhotosItem[];

Gets all images added from DepositPhotos.

Returns

IDepositPhotosItem[]

finishProductDesignResult

Get Signature

get finishProductDesignResult(): IFinishDesignResult;

Return last computed value by calculateIdentifyingString(string)

Returns

IFinishDesignResult

hiResUrls

Get Signature

get hiResUrls(): string[];

Gets URLs that link to high-resolution print files.

Returns

string[]

identifyingString

Get Signature

get identifyingString(): string;

Return last computed value by calculateIdentifyingString(string)

Returns

string

proofImageUrls

Get Signature

get proofImageUrls(): string[][];

Gets temporary URLs that link to proof images.

Returns

string[][]

proofPdfUrls

Get Signature

get proofPdfUrls(): string[];

Gets temporary URLs that link to proof PDF images.

Returns

string[]

sourcedItems

Get Signature

get sourcedItems(): ISourcedItemsInfo;

Gets all items by source

Returns

ISourcedItemsInfo

stateId

Get Signature

get stateId(): string;

Gets the identifier of the last saved state file.

Returns

string

Set Signature

set stateId(value): void;

Sets the identifier of the last saved state file.

Parameters

Parameter	Type
value	string

Returns

void

surfaceCount

Get Signature

get surfaceCount(): number;

Get the count of surfaces in product.

Returns

number

tags

Get Signature

get tags(): ITagsDictionary;

Gets product tags.

Returns

ITagsDictionary

An ObjectModel.ITagsDictionary.

token

Get Signature

get token(): string;

Returns the current user token.

Returns

string

userChanges

Get Signature

get userChanges(): IUserChanges;

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

Returns

IUserChanges

An object representing IUserChanges.

userId

Get Signature

get userId(): string;

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

Returns

string

variableData

Get Signature

get variableData(): IVariable[];

Gets all variable items in the product.

Returns

IVariable[]

An array of ObjectModel.IVariable elements.

violationData

Get Signature

get violationData(): IViolationWarningData[];

Returns

IViolationWarningData[]

violationWarningData

Get Signature

get violationWarningData(): 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.

Returns

IViolationWarningData[]

Methods

addSurface()

addSurface(surface, position?): Promise<Product>;

Adds a product surface.

Parameters

Parameter	Type	Description
surface	any	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<Product>

addSurfaces()

addSurfaces(surfaces, position?): Promise<Product>;

Adds product surfaces.

Parameters

Parameter	Type	Description
surfaces	any	Surfaces (pages) to add.
position?	number	Surfaces position (zero-based, optional).

Returns

Promise<Product>

applyViewerSettings()

applyViewerSettings(params): Promise<any>;

Executes the setViewerSettings command.

Parameters

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

Returns

Promise<any>

calculateIdentifyingString()

calculateIdentifyingString(template): Promise<string>;

Calculate identifyig string by template.

Parameters

Parameter	Type	Description
template	string	template string

Returns

Promise<string>

checkInitDependenciesWidgets()

checkInitDependenciesWidgets(): string[];

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

Returns

string[]

Inherited from

AuDesignEditor.checkInitDependenciesWidgets

colorToHex()

colorToHex(color): Promise<string>;

Parameters

Parameter	Type
color	Color

Returns

Promise<string>

Inherited from

AuDesignEditor.colorToHex

countItemsOnSurfaces()

countItemsOnSurfaces(onPrintArea?): Promise<void>;

Count items on surfaces and push counters to this.itemsOnSurfacesCount

Parameters

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

Returns

Promise<void>

createPrivateDesignFromPublicDesign()

createPrivateDesignFromPublicDesign(stateId): Promise<string>;

Parameters

Parameter	Type
stateId	string

Returns

Promise<string>

createPrivateDesignFromResources()

createPrivateDesignFromResources(resourceId): Promise<string>;

Parameters

Parameter	Type
resourceId	string

Returns

Promise<string>

exportWidgetData()

exportWidgetData(force): Promise<CanvasData>;

Serializes the DesignEditor widget.

Parameters

Parameter	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 }

Implementation of

IRestorableWidget.exportWidgetData

finishProductDesign()

finishProductDesign(options?, data?): Promise<any>;

Call finishProductDesign from Editor.

Parameters

Parameter	Type
options?	IFinishProductDesignOptions
data?	IVdpData

Returns

Promise<any>

getAllItems()

getAllItems(): Promise<Item[]>;

Gets all design elements in the product.

Returns

Promise<Item[]>

A promise with an array of ObjectModel.Item elements.

getArtLinkItems()

getArtLinkItems(): Promise<IArtLinkItem[]>;

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.

Returns

Promise<IArtLinkItem[]>

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

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.

getDesignEditorItemModel()

getDesignEditorItemModel(item): Promise<DesignEditorItemChanges>;

Parameters

Parameter	Type
item	any

Returns

Promise<DesignEditorItemChanges>

Inherited from

AuDesignEditor.getDesignEditorItemModel

getEditor()

getEditor(): Promise<Editor>;

Returns a promise with an instance of the DesignEditor.

Returns

Promise<Editor>

Inherited from

AuDesignEditor.getEditor

getHiResImages()

getHiResImages(
   width?, 
   height?, 
   stateId?, 
   pregeneratePreviewImages?, 
   filename?, 
   data?, 
options?): 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

Parameter	Type	Default value	Description
width	number	800	The maximum width of proof images.
height	number	800	The maximum height of proof images.
stateId?	string | object	undefined	A custom state file name without an extension, up to 36 symbols length.
pregeneratePreviewImages?	boolean	false	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.
filename?	string	undefined	The name of the downloaded file
data?	IVdpData	undefined	The VDP data.
options?	THiResImagesOptions	undefined	-

Returns

Promise<string[]>

A promise with an array of URLs that link to the rendered print files.

getItemsBySource()

getItemsBySource(sourceType): Promise<ISourcedItemsInfo>;

Parameters

Parameter	Type
sourceType	string

Returns

Promise<ISourcedItemsInfo>

getItemText()

getItemText(itemName): Promise<string>;

Returns the content of a text item.

Parameters

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

Returns

Promise<string>

getProduct()

getProduct(): Promise<Product>;

Returns a promise with the product opened in the DesignEditor.

Returns

Promise<Product>

Inherited from

AuDesignEditor.getProduct

getProofImages()

getProofImages(
   width?, 
   height?, 
   pregeneratePreviewImages?, 
   generateProductProof?, 
   generateLargePreviews?, 
   largePreviewMaxWidth?, 
   largePreviewMaxHeight?, 
   data?, 
options?): 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

Parameter	Type	Default value	Description
width	number | Object	800	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.
height	number	800	The maximum height of proof images.
pregeneratePreviewImages	boolean | object	true	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.
generateProductProof	boolean	false	If true, this method renders previews of all product pages to a multi-page PDF file.
generateLargePreviews	boolean	false	If true, this method renders real-size preview images.
largePreviewMaxWidth	number	1000	The maximum width of large preview images.
largePreviewMaxHeight	number	1000	The maximum height of large preview images.
data?	IVdpData	undefined	The VDP data.
options?	TProofImagesOptions	undefined	-

Returns

Promise<string[]>

A promise with an array of temporary links to proof images.

getProofPdf()

getProofPdf(
   data?, 
   paramsObj?, 
isForce?): Promise<string[]>;

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.

Parameters

Parameter	Type	Default value	Description
data?	IVdpData	undefined	The VDP data.
paramsObj?	IGetProofImagesOptions	{}	-
isForce?	boolean	false	-

Returns

Promise<string[]>

getSurfaceCount()

getSurfaceCount(): Promise<number>;

Get the surface count from product and set surfaceCount prop value

Returns

Promise<number>

getTags()

getTags(): Promise<ITagsDictionary>;

Gets product tags.

Returns

Promise<ITagsDictionary>

A promise with an ObjectModel.ITagsDictionary.

getToken()

getToken(): Promise<string>;

Generates the current user token based on the token property.

Returns

Promise<string>

getVariableData()

getVariableData(): Promise<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<IVariable[]>

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

getViolationData()

getViolationData(): Promise<IViolationWarningData[]>;

Get violation data from DesignEditor.

Returns

Promise<IViolationWarningData[]>

initDpApi()

initDpApi(): void;

Returns

void

openAssetManagerFor()

openAssetManagerFor(itemName): Promise<void>;

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

Parameters

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

Returns

Promise<void>

openGalleryForBackground()

openGalleryForBackground(): Promise<void>;

Opens the Asset manager to select the background.

Returns

Promise<void>

removeSurface()

removeSurface(surfaceIndex): Promise<Product>;

Removes a product surface.

Parameters

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

Returns

Promise<Product>

resetPreloaderState()

resetPreloaderState(): void;

Returns

void

Inherited from

AuDesignEditor.resetPreloaderState

restoreWidgetFromData()

restoreWidgetFromData(widgetData, force?): Promise<void>;

Deserializes the DesignEditor widget.

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

Parameters

Parameter	Type	Default value	Description
widgetData	CanvasData	undefined	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>

Implementation of

IRestorableWidget.restoreWidgetFromData

saveProduct()

saveProduct(stateId?, data?): Promise<ISaveProductResult>;

Saves a product.

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

Parameters

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

Returns

Promise<ISaveProductResult>

A promise with identifiers of the user and the saved state file.

setTags()

setTags(newTags): Promise<void>;

Sets product tags.

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

Parameters

Parameter	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, 
   message?, 
   timeout?): void;

Shows a preloader.

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

Parameters

Parameter	Type	Default value	Description
isPreload	boolean	undefined	If true, enables the preloader.
message	string | string[]	...	A text message that appears next to the preloader.
timeout	number	5	-

Returns

void

Inherited from

AuDesignEditor.showPreloader

showToast()

showToast(data?, duration?): void;

Shows a toast.

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

Parameters

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

Returns

void

Inherited from

AuDesignEditor.showToast

swapSurfaces()

swapSurfaces(lhsSurfaceIndex, rhsSurfaceIndex): Promise<Product>;

Swaps two surfaces (pages) in the product.

Parameters

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

Returns

Promise<Product>

switchItemContent()

switchItemContent(model): Promise<void>;

Parameters

Parameter	Type
model	SwitchItemContentModel

Returns

Promise<void>

switchSurfaceTo()

switchSurfaceTo(surfaceIndex): Promise<Product>;

Changes product pages in Customer's Canvas.

Parameters

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

Returns

Promise<Product>

updateSurfaces()

updateSurfaces(mode, update): Promise<Product>;

Adds or removes a surface.

Parameters

Parameter	Type	Description
mode	string	Update mode - 'add' or 'remove'.
update	any	The index of a surface to be removed or a surface to be added (depends on the mode).

Returns

Promise<Product>

References

widget

Renames and re-exports AuWidgetDesignEditor