au-widget-design-editor/IAuWidgetDesignEditor
Enumerations
SurfaceDimensionsValue
Product size origin.
Canvas
Mantains the size of the loaded product.
Conig
Changes the product size to one defined in the layout template.
Enumeration Members
| Enumeration Member | Value |
|---|---|
canvas | "canvas" |
config | "config" |
Classes
ActionsErrorToastConfig
Represents a toast to display errors.
{
"widgets": [{
"type": "design-editor",
"name": "editor",
"params": {
"inital": { ... },
"actionsErrorToast": {
"show": true,
"duration": 15000
}
}
}]
}
Constructors
Constructor
new ActionsErrorToastConfig(): ActionsErrorToastConfig;
Returns
Properties
duration
duration: number;
Toast duration, in milliseconds.
show
show: boolean;
If true, displays a toast.
ChangedSurface
Constructors
Constructor
new ChangedSurface(
definition,
surfaceIndex,
all): ChangedSurface;
Parameters
| Parameter | Type |
|---|---|
definition | any |
surfaceIndex | any |
all | any |
Returns
Properties
all
all: IDesignEditorDefinitionChangeLayout;
definition
definition: SurfaceTypes;
surfaceIndex
surfaceIndex: number;
Interfaces
IArtLinkItem
Properties
artLinkId
artLinkId: string;
imageId
imageId: string;
IArtLinkItemExtended
Properties
artLinkId
artLinkId: string;
data?
optional data?: any;
imageId
imageId: string;
IConfiglResizeArgs
Provides parameters to resize the whole product or some items.
For details, you can refer to the docs.
{
"type": "design-editor",
"name": "editor",
"params": {
"initial": { ... },
"resize": {
"resizeParams": {
"targetType": "items",
"targets": [ "itemName1", "itemName2" ],
"width": "60%",
"height": "60%",
"defaultOptions": {
"resize": 0, // available resize modes: Fit (0, default), Fill (1), Arbitrary (2), Original (3)
"resetPlaceholderContent": false
},
"containerOptions": {
"Background": {
"resize": 2, // available resize modes: Fit (0, default), Fill (1), Arbitrary (2), Original (3)
"resetPlaceholderContent": true
}
}
}
}
}
}
Properties
containerOptions?
optional containerOptions?: object;
Index Signature
[key: string]: IContainerResizeOptions
defaultOptions?
optional defaultOptions?: IContainerResizeOptions;
height
height: string | number;
targets
targets: string[];
targetType
targetType: "surfaces" | "product" | "items" | "printArea";
width
width: string | number;
ICreateImageItem
Provides the after property to support a queue of commands.
The following example illustrates how you can run the setViewerSettings command after setPrintArea completes.
{
"widgets": [{
"type": "design-editor",
"name": "editor",
"params": {
"inital": { ... },
"setViewerSettings": "{{vars.zoomSettings[$['flyer-size']._.title]}}",
"setPrintArea": {
"data": {
"designFile": "{{$['flyer-gallery']._.name}}"
},
"after": [
"setViewerSettings"
]
}
}
}]
}
Extends
Properties
after?
optional after?: string | string[];
The next commands to be executed after this command completes.
Inherited from
IDesignEditorCommandDefinition.after
autoCompile?
optional autoCompile?: boolean;
If false, action will never execute automatically.
Inherited from
IDesignEditorCommandDefinition.autoCompile
executeOnce?
optional executeOnce?: boolean;
If true, this command will be executed only once.
You can use it for initial command.
For example, we need to change surface depending on the option value.
We write for initial and for updateSurfaces the same productDefinition with $['option]._
And set executeOnce = true for initial. And initial will be executed only once.
Inherited from
IDesignEditorCommandDefinition.executeOnce
executeOnlyAfter?
optional executeOnlyAfter?: string[];
Current command will be executed in a next update only after all commands executed in this param.
The same example from executeOnce param.
We need to execute updateSurface on all next updates, exclude the first one.
And we set executeOnlyAfter = ['initial'] for updateSurface command.
Inherited from
IDesignEditorCommandDefinition.executeOnlyAfter
lock?
optional lock?: string[];
Name of widgets that show preloader when command executed.
Inherited from
IDesignEditorCommandDefinition.lock
message?
optional message?: string | string[];
The message for preloader.
Inherited from
IDesignEditorCommandDefinition.message
name
name: string;
Name for a layer for OI
onExecuted?
optional onExecuted?: Function | Function[];
Functions that executed after command
Inherited from
IDesignEditorCommandDefinition.onExecuted
position
position: object;
Position on Print Area
x
x: number;
y
y: number;
showPreloader?
optional showPreloader?: boolean;
If true, displays the preloader while executing this command.
Inherited from
IDesignEditorCommandDefinition.showPreloader
size
size: object;
Size on Print Area
height
height: number;
width
width: number;
surfaceIndex?
optional surfaceIndex?: number;
timeout?
optional timeout?: number;
The timeout for switching preloader messages.
Inherited from
IDesignEditorCommandDefinition.timeout
url
url: string;
Link or public:image as object which will be inserted.
IDepositPhotosItem
Properties
depositPhotosId
depositPhotosId: string;
imageId
imageId: string;
IDepositPhotosItemExtended
Properties
data?
optional data?: any;
depositPhotosId
depositPhotosId: string;
imageId
imageId: string;
IDesignEditorCommandDefinition
Provides the after property to support a queue of commands.
The following example illustrates how you can run the setViewerSettings command after setPrintArea completes.
{
"widgets": [{
"type": "design-editor",
"name": "editor",
"params": {
"inital": { ... },
"setViewerSettings": "{{vars.zoomSettings[$['flyer-size']._.title]}}",
"setPrintArea": {
"data": {
"designFile": "{{$['flyer-gallery']._.name}}"
},
"after": [
"setViewerSettings"
]
}
}
}]
}
Extended by
IChangeDesignVariantCommandDefinitionIDesignEditorLoadUserInfoParamsISetSerializedProductConfigISwapSurfacesCommandDefinitionIUpdateItemsCommandDefinitionIUpdateSurfacesCommandDefinitionIDesignEditorDefinitionSetThemeIDesignEditorDefinitionResizeItemsIDesignEditorDefinitionTranslateItemsIDesignEditorDefinitionSetViewerSettingsIDesignEditorDefinitionInitialIDesignEditorDefinitionChangeLayoutIDesignEditorDefinitionSetBackgroundIDesignEditorDefinitionSetPrintAreaIDesignEditorDefinitionChangeMockupISetRemoteMockupISetSurfacesOptionsISetBackgroundParamICreateImageItemIDuplicateSurfacesCommandDefinition
Properties
after?
optional after?: string | string[];
The next commands to be executed after this command completes.
autoCompile?
optional autoCompile?: boolean;
If false, action will never execute automatically.
executeOnce?
optional executeOnce?: boolean;
If true, this command will be executed only once.
You can use it for initial command.
For example, we need to change surface depending on the option value.
We write for initial and for updateSurfaces the same productDefinition with $['option]._
And set executeOnce = true for initial. And initial will be executed only once.
executeOnlyAfter?
optional executeOnlyAfter?: string[];
Current command will be executed in a next update only after all commands executed in this param.
The same example from executeOnce param.
We need to execute updateSurface on all next updates, exclude the first one.
And we set executeOnlyAfter = ['initial'] for updateSurface command.
lock?
optional lock?: string[];
Name of widgets that show preloader when command executed.
message?
optional message?: string | string[];
The message for preloader.
onExecuted?
optional onExecuted?: Function | Function[];
Functions that executed after command
showPreloader?
optional showPreloader?: boolean;
If true, displays the preloader while executing this command.
timeout?
optional timeout?: number;
The timeout for switching preloader messages.
IDesignEditorDefinitionChangeLayout
Provides properties to replace design elements in the editor.
{
"type": "design-editor",
"name": "editor",
"params": {
"initial": { ... },
"changeLayout": [{
"discardChanges": false,
"data": {
"printAreas": [{
"designFile": "{{'flyer/'+$['layout']._.props.design}}"
}]
}
}]
}
}
Extends
Properties
after?
optional after?: string | string[];
The next commands to be executed after this command completes.
Inherited from
IDesignEditorCommandDefinition.after
autoCompile?
optional autoCompile?: boolean;
If false, action will never execute automatically.
Inherited from
IDesignEditorCommandDefinition.autoCompile
data
data: SurfaceTypes;
A product definition.
dimesions?
optional dimesions?: SurfaceDimensionsValue;
If the layout and the currently loaded product have different dimensions, you can enable the size of either config or canvas, correspondingly.
discardChanges?
optional discardChanges?: boolean;
If true, a design always loaded from scratch. if false or omitted, merges placeholders and text elements.
executeOnce?
optional executeOnce?: boolean;
If true, this command will be executed only once.
You can use it for initial command.
For example, we need to change surface depending on the option value.
We write for initial and for updateSurfaces the same productDefinition with $['option]._
And set executeOnce = true for initial. And initial will be executed only once.
Inherited from
IDesignEditorCommandDefinition.executeOnce
executeOnlyAfter?
optional executeOnlyAfter?: string[];
Current command will be executed in a next update only after all commands executed in this param.
The same example from executeOnce param.
We need to execute updateSurface on all next updates, exclude the first one.
And we set executeOnlyAfter = ['initial'] for updateSurface command.
Inherited from
IDesignEditorCommandDefinition.executeOnlyAfter
lock?
optional lock?: string[];
Name of widgets that show preloader when command executed.
Inherited from
IDesignEditorCommandDefinition.lock
message?
optional message?: string | string[];
The message for preloader.
Inherited from
IDesignEditorCommandDefinition.message
onExecuted?
optional onExecuted?: Function | Function[];
Functions that executed after command
Inherited from
IDesignEditorCommandDefinition.onExecuted
removeBackground
removeBackground: boolean;
If true, removes the background image.
showPreloader?
optional showPreloader?: boolean;
If true, displays the preloader while executing this command.
Inherited from
IDesignEditorCommandDefinition.showPreloader
sourceSurfaceIndex?
optional sourceSurfaceIndex?: number;
Specifies what page to be used as a layout if data refers to a multipage template.
surfaceIndex?
optional surfaceIndex?: number;
The index of a surface that should be modified (the current surface if omitted).
timeout?
optional timeout?: number;
The timeout for switching preloader messages.
Inherited from
IDesignEditorCommandDefinition.timeout
viewerSettings?
optional viewerSettings?: IDesignEditorDefinitionSetViewerSettings;
Zoom properties.
IDesignEditorDefinitionChangeMockup
Provides properties to change mockups.
For details, you can refer to the ChangeMockup command.
{
"type": "design-editor",
"name": "editor",
"params": {
"initial": { ... },
"changeMockup": [{
"data": {
"mockup": {
"down": "{{$['color']._.props.mockup}}"
},
"previewMockups": "{{$['color']._.props.previews}}"
}
}]
}
}
Extends
Properties
after?
optional after?: string | string[];
The next commands to be executed after this command completes.
Inherited from
IDesignEditorCommandDefinition.after
autoCompile?
optional autoCompile?: boolean;
If false, action will never execute automatically.
Inherited from
IDesignEditorCommandDefinition.autoCompile
data
data: IMockupData[];
```json
[Mockup settings](https://customerscanvas.com/dev/editors/iframe-api/reference/design-editor-iframe/imockupdata.html).
##### executeOnce?
```ts
optional executeOnce?: boolean;
If true, this command will be executed only once.
You can use it for initial command.
For example, we need to change surface depending on the option value.
We write for initial and for updateSurfaces the same productDefinition with $['option]._
And set executeOnce = true for initial. And initial will be executed only once.
Inherited from
IDesignEditorCommandDefinition.executeOnce
executeOnlyAfter?
optional executeOnlyAfter?: string[];
Current command will be executed in a next update only after all commands executed in this param.
The same example from executeOnce param.
We need to execute updateSurface on all next updates, exclude the first one.
And we set executeOnlyAfter = ['initial'] for updateSurface command.
Inherited from
IDesignEditorCommandDefinition.executeOnlyAfter
lock?
optional lock?: string[];
Name of widgets that show preloader when command executed.
Inherited from
IDesignEditorCommandDefinition.lock
message?
optional message?: string | string[];
The message for preloader.
Inherited from
IDesignEditorCommandDefinition.message
onExecuted?
optional onExecuted?: Function | Function[];
Functions that executed after command
Inherited from
IDesignEditorCommandDefinition.onExecuted
options
options: object;
addToHistory
addToHistory: boolean;
If false, the new mockup cannot be reverted using the Undo button.
updateRevertData
updateRevertData: boolean;
If true, the new mockup is stored as one to restore when the product is reverted. Otherwise, the previously stored mockup is restored on a product revert.
updateSurfaceSize
updateSurfaceSize: boolean;
If true, changes the surface size to match the new mockup. If false, the surface size remains unchanged. The default value is false.
showPreloader?
optional showPreloader?: boolean;
If true, displays the preloader while executing this command.
Inherited from
IDesignEditorCommandDefinition.showPreloader
timeout?
optional timeout?: number;
The timeout for switching preloader messages.
Inherited from
IDesignEditorCommandDefinition.timeout
IDesignEditorDefinitionInitial
Provides properties to initialize a product in the editor.
For details, you can refer to the Initial command.
{
"type": "design-editor",
"name": "editor",
"params": {
"initial": {
"OnBoundsNotificationCb": "{{ #function(arg) console.log(arg) }}",
...
},
"setViewerSettings": {
"zoom": 0.1,
"zoomMode": 'bestFit',
"scrollPosition": {x: 0, y: 0}
}
}
}
Extends
Properties
after?
optional after?: string | string[];
The next commands to be executed after this command completes.
Inherited from
IDesignEditorCommandDefinition.after
autoCompile?
optional autoCompile?: boolean;
If false, action will never execute automatically.
Inherited from
IDesignEditorCommandDefinition.autoCompile
editorConfig?
optional editorConfig?: IConfiguration;
The configuration of the editor.
executeOnce?
optional executeOnce?: boolean;
If true, this command will be executed only once.
You can use it for initial command.
For example, we need to change surface depending on the option value.
We write for initial and for updateSurfaces the same productDefinition with $['option]._
And set executeOnce = true for initial. And initial will be executed only once.
Inherited from
IDesignEditorCommandDefinition.executeOnce
executeOnlyAfter?
optional executeOnlyAfter?: string[];
Current command will be executed in a next update only after all commands executed in this param.
The same example from executeOnce param.
We need to execute updateSurface on all next updates, exclude the first one.
And we set executeOnlyAfter = ['initial'] for updateSurface command.
Inherited from
IDesignEditorCommandDefinition.executeOnlyAfter
initSurfaceIndex?
optional initSurfaceIndex?: number;
Initial surface index
lock?
optional lock?: string[];
Name of widgets that show preloader when command executed.
Inherited from
IDesignEditorCommandDefinition.lock
maximizeAssetManager?
optional maximizeAssetManager?: boolean;
Opens the Asset Manager in the full-window mode.
message?
optional message?: string | string[];
The message for preloader.
Inherited from
IDesignEditorCommandDefinition.message
OnBoundsNotificationCb?
optional OnBoundsNotificationCb?: (boundsData) => void | (sender, customData) => void[];
A function that is executed after changing the bounds of the printable area.
Parameters
| Parameter | Type |
|---|---|
boundsData | IBoundsData |
Returns
void | (sender, customData) => void[]
onCustomButtonClicked?
optional onCustomButtonClicked?: (sender, customData) => void | (sender, customData) => void[];
A function that is executed after customButton clicked.
Parameters
| Parameter | Type |
|---|---|
sender | string |
customData | any |
Returns
void | (sender, customData) => void[]
onExecuted?
optional onExecuted?: Function | Function[];
Functions that executed after command
Inherited from
IDesignEditorCommandDefinition.onExecuted
OnImageDpiChanged?
optional OnImageDpiChanged?: Function | Function[];
A function that is executed after changing an image item DPI.
onInit?
optional onInit?: Function | Function[];
onItemAdded?
optional onItemAdded?: Function | Function[];
A function that is executed after adding an item.
onItemChanged?
optional onItemChanged?: Function | Function[];
A function that is executed after changing an item.
onItemRemoved?
optional onItemRemoved?: Function | Function[];
A function that is executed after removing an item.
onProductRevert?
optional onProductRevert?: Function | Function[];
A function that is executed after clicking the Revert Product button.
OnRedoProduct?
optional OnRedoProduct?: Function | Function[];
A function that is executed after redo product.
OnUndoProduct?
optional OnUndoProduct?: Function | Function[];
A function that is executed after undo product.
productDefinition
productDefinition: IProductDefinition;
PSD/IDML templates to open. For details, see the topic about defining products.
resourceId?
optional resourceId?: string;
A design identifier of a product variant.
showPreloader?
optional showPreloader?: boolean;
If true, displays the preloader while executing this command.
Inherited from
IDesignEditorCommandDefinition.showPreloader
timeout?
optional timeout?: number;
The timeout for switching preloader messages.
Inherited from
IDesignEditorCommandDefinition.timeout
viewerSettings?
optional viewerSettings?: IDesignEditorDefinitionSetViewerSettings;
Canvas zoom properties.
IDesignEditorDefinitionParams
Provides commands used in the design-editor widget.
Properties
actionsErrorToast
actionsErrorToast: ActionsErrorToastConfig;
Enables a toast to display errors.
changeDesignVariant?
optional changeDesignVariant?: IChangeDesignVariantCommandDefinition;
A command that changes product design variants.
changeLayout?
optional changeLayout?: IDesignEditorDefinitionChangeLayout;
Replaces design elements.
changeMockup?
optional changeMockup?: IDesignEditorDefinitionChangeMockup;
Changes mockup images in the editor. This command uses images from the Customer's Canvas back end.
initial?
optional initial?: IDesignEditorDefinitionInitial;
Initializes the editor.
modifyItems?
optional modifyItems?: IDesignEditorDefinitionModifyItems;
Changes properties of design elements in the editor.
preloader?
optional preloader?: IDesignEditorPreloaderConfig;
preloader messages for initial loading and actions executing
replaceInterpolationPlaceholders?
optional replaceInterpolationPlaceholders?: boolean;
If true, executes the replaceInterloationPlaceholders() method after initialization
to convert interpolation placeholders to in-string placeholders.
setBackground?
optional setBackground?: IDesignEditorDefinitionSetBackground;
Sets a new background image.
setPrintArea?
optional setPrintArea?: IDesignEditorDefinitionSetPrintArea;
Applies a new print area definition to the product.
setRemoteMockup?
optional setRemoteMockup?: ISetRemoteMockupParams;
Changes mockup images in the editor. This command uses remote images through URLs.
setSerializedProduct?
optional setSerializedProduct?: ISetSerializedProductConfig;
setTheme?
optional setTheme?: IDesignEditorDefinitionSetTheme;
Applies a product theme.
setViewerSettings?
optional setViewerSettings?: IDesignEditorDefinitionSetViewerSettings;
Changes product zoom properties in the editor.
updateItems?
optional updateItems?: IUpdateItemsCommandDefinition;
Updates design elements.
IDesignEditorDefinitionResizeItems
Provides the after property to support a queue of commands.
The following example illustrates how you can run the setViewerSettings command after setPrintArea completes.
{
"widgets": [{
"type": "design-editor",
"name": "editor",
"params": {
"inital": { ... },
"setViewerSettings": "{{vars.zoomSettings[$['flyer-size']._.title]}}",
"setPrintArea": {
"data": {
"designFile": "{{$['flyer-gallery']._.name}}"
},
"after": [
"setViewerSettings"
]
}
}
}]
}
Extends
Properties
after?
optional after?: string | string[];
The next commands to be executed after this command completes.
Inherited from
IDesignEditorCommandDefinition.after
autoCompile?
optional autoCompile?: boolean;
If false, action will never execute automatically.
Inherited from
IDesignEditorCommandDefinition.autoCompile
executeOnce?
optional executeOnce?: boolean;
If true, this command will be executed only once.
You can use it for initial command.
For example, we need to change surface depending on the option value.
We write for initial and for updateSurfaces the same productDefinition with $['option]._
And set executeOnce = true for initial. And initial will be executed only once.
Inherited from
IDesignEditorCommandDefinition.executeOnce
executeOnlyAfter?
optional executeOnlyAfter?: string[];
Current command will be executed in a next update only after all commands executed in this param.
The same example from executeOnce param.
We need to execute updateSurface on all next updates, exclude the first one.
And we set executeOnlyAfter = ['initial'] for updateSurface command.
Inherited from
IDesignEditorCommandDefinition.executeOnlyAfter
lock?
optional lock?: string[];
Name of widgets that show preloader when command executed.
Inherited from
IDesignEditorCommandDefinition.lock
message?
optional message?: string | string[];
The message for preloader.
Inherited from
IDesignEditorCommandDefinition.message
onExecuted?
optional onExecuted?: Function | Function[];
Functions that executed after command
Inherited from
IDesignEditorCommandDefinition.onExecuted
resizeParams
resizeParams: any;
showPreloader?
optional showPreloader?: boolean;
If true, displays the preloader while executing this command.
Inherited from
IDesignEditorCommandDefinition.showPreloader
timeout?
optional timeout?: number;
The timeout for switching preloader messages.
Inherited from
IDesignEditorCommandDefinition.timeout
IDesignEditorDefinitionSetBackground
Provides properties to set a design background.
For details, you can refer to the SetBackground command.
{
"type": "design-editor",
"name": "editor",
"params": {
"initial": { ... },
"setBackground": {
"url": "public:bg_123.pdf"
}
}
}
Extends
Properties
after?
optional after?: string | string[];
The next commands to be executed after this command completes.
Inherited from
IDesignEditorCommandDefinition.after
autoCompile?
optional autoCompile?: boolean;
If false, action will never execute automatically.
Inherited from
IDesignEditorCommandDefinition.autoCompile
autoResize?
optional autoResize?: boolean;
If true, resizes the background image to fill the entire product.
executeOnce?
optional executeOnce?: boolean;
If true, this command will be executed only once.
You can use it for initial command.
For example, we need to change surface depending on the option value.
We write for initial and for updateSurfaces the same productDefinition with $['option]._
And set executeOnce = true for initial. And initial will be executed only once.
Inherited from
IDesignEditorCommandDefinition.executeOnce
executeOnlyAfter?
optional executeOnlyAfter?: string[];
Current command will be executed in a next update only after all commands executed in this param.
The same example from executeOnce param.
We need to execute updateSurface on all next updates, exclude the first one.
And we set executeOnlyAfter = ['initial'] for updateSurface command.
Inherited from
IDesignEditorCommandDefinition.executeOnlyAfter
lock?
optional lock?: string[];
Name of widgets that show preloader when command executed.
Inherited from
IDesignEditorCommandDefinition.lock
message?
optional message?: string | string[];
The message for preloader.
Inherited from
IDesignEditorCommandDefinition.message
onExecuted?
optional onExecuted?: Function | Function[];
Functions that executed after command
Inherited from
IDesignEditorCommandDefinition.onExecuted
showPreloader?
optional showPreloader?: boolean;
If true, displays the preloader while executing this command.
Inherited from
IDesignEditorCommandDefinition.showPreloader
surfaceIndex?
optional surfaceIndex?: number;
The index of a surface that should be modified (the current surface if omitted).
timeout?
optional timeout?: number;
The timeout for switching preloader messages.
Inherited from
IDesignEditorCommandDefinition.timeout
toTile?
optional toTile?: boolean;
If true, the background image tiles the entire product.
url
url: string;
A URL to the image or a path in Customer's Canvas public gallery.
IDesignEditorDefinitionSetPrintArea
Provides properties to set up a print area.
For details, you can refer to the SetPrintArea command.
{
"type": "design-editor",
"name": "editor",
"params": {
"initial": { ... },
"setPrintArea": {
"options": {
"preserveUserChanges": true,
"updateRevertData": false
},
"data": {
"designFile": "{{vars.designRoot + '/' + $['card-size']._.title}}"
}
}
}
}
Extends
Properties
after?
optional after?: string | string[];
The next commands to be executed after this command completes.
Inherited from
IDesignEditorCommandDefinition.after
autoCompile?
optional autoCompile?: boolean;
If false, action will never execute automatically.
Inherited from
IDesignEditorCommandDefinition.autoCompile
data
data: IPrintAreaTemplate | IPrintAreaDefinition;
The print area definition.
executeOnce?
optional executeOnce?: boolean;
If true, this command will be executed only once.
You can use it for initial command.
For example, we need to change surface depending on the option value.
We write for initial and for updateSurfaces the same productDefinition with $['option]._
And set executeOnce = true for initial. And initial will be executed only once.
Inherited from
IDesignEditorCommandDefinition.executeOnce
executeOnlyAfter?
optional executeOnlyAfter?: string[];
Current command will be executed in a next update only after all commands executed in this param.
The same example from executeOnce param.
We need to execute updateSurface on all next updates, exclude the first one.
And we set executeOnlyAfter = ['initial'] for updateSurface command.
Inherited from
IDesignEditorCommandDefinition.executeOnlyAfter
lock?
optional lock?: string[];
Name of widgets that show preloader when command executed.
Inherited from
IDesignEditorCommandDefinition.lock
message?
optional message?: string | string[];
The message for preloader.
Inherited from
IDesignEditorCommandDefinition.message
onExecuted?
optional onExecuted?: Function | Function[];
Functions that executed after command
Inherited from
IDesignEditorCommandDefinition.onExecuted
options
options: ISetPrintAreaOptions;
Additional configuration parameters. For details, see the reference.
showPreloader?
optional showPreloader?: boolean;
If true, displays the preloader while executing this command.
Inherited from
IDesignEditorCommandDefinition.showPreloader
surfaceIndex?
optional surfaceIndex?: number;
The index of a surface that should be modified (the current surface if omitted).
timeout?
optional timeout?: number;
The timeout for switching preloader messages.
Inherited from
IDesignEditorCommandDefinition.timeout
IDesignEditorDefinitionSetTheme
Provides properties to define a product theme.
For details, you can refer to the SetTheme command.
{
"type": "design-editor",
"name": "editor",
"params": {
"initial": { ... },
"setTheme": {
"primary": "{{ "#f00" }}",
"secondary": "{{ "#0f0" }}"
}
}
}
Extends
Properties
after?
optional after?: string | string[];
The next commands to be executed after this command completes.
Inherited from
IDesignEditorCommandDefinition.after
autoCompile?
optional autoCompile?: boolean;
If false, action will never execute automatically.
Inherited from
IDesignEditorCommandDefinition.autoCompile
executeOnce?
optional executeOnce?: boolean;
If true, this command will be executed only once.
You can use it for initial command.
For example, we need to change surface depending on the option value.
We write for initial and for updateSurfaces the same productDefinition with $['option]._
And set executeOnce = true for initial. And initial will be executed only once.
Inherited from
IDesignEditorCommandDefinition.executeOnce
executeOnlyAfter?
optional executeOnlyAfter?: string[];
Current command will be executed in a next update only after all commands executed in this param.
The same example from executeOnce param.
We need to execute updateSurface on all next updates, exclude the first one.
And we set executeOnlyAfter = ['initial'] for updateSurface command.
Inherited from
IDesignEditorCommandDefinition.executeOnlyAfter
lock?
optional lock?: string[];
Name of widgets that show preloader when command executed.
Inherited from
IDesignEditorCommandDefinition.lock
message?
optional message?: string | string[];
The message for preloader.
Inherited from
IDesignEditorCommandDefinition.message
onExecuted?
optional onExecuted?: Function | Function[];
Functions that executed after command
Inherited from
IDesignEditorCommandDefinition.onExecuted
showPreloader?
optional showPreloader?: boolean;
If true, displays the preloader while executing this command.
Inherited from
IDesignEditorCommandDefinition.showPreloader
theme
theme: any;
Typically, it is a theme name as a string, but you can also pass a structure describing an "ad-hoc" theme.
timeout?
optional timeout?: number;
The timeout for switching preloader messages.
Inherited from
IDesignEditorCommandDefinition.timeout
IDesignEditorDefinitionSetViewerSettings
Provides properties to define the canvas zoom.
{
"type": "design-editor",
"name": "editor",
"params": {
"initial": { ... },
"setViewerSettings": {
"zoom": 0.1,
"zoomMode": 'bestFit',
"scrollPosition": {x: 0, y: 0}
}
}
}
Extends
Properties
after?
optional after?: string | string[];
The next commands to be executed after this command completes.
Inherited from
IDesignEditorCommandDefinition.after
autoCompile?
optional autoCompile?: boolean;
If false, action will never execute automatically.
Inherited from
IDesignEditorCommandDefinition.autoCompile
executeOnce?
optional executeOnce?: boolean;
If true, this command will be executed only once.
You can use it for initial command.
For example, we need to change surface depending on the option value.
We write for initial and for updateSurfaces the same productDefinition with $['option]._
And set executeOnce = true for initial. And initial will be executed only once.
Inherited from
IDesignEditorCommandDefinition.executeOnce
executeOnlyAfter?
optional executeOnlyAfter?: string[];
Current command will be executed in a next update only after all commands executed in this param.
The same example from executeOnce param.
We need to execute updateSurface on all next updates, exclude the first one.
And we set executeOnlyAfter = ['initial'] for updateSurface command.
Inherited from
IDesignEditorCommandDefinition.executeOnlyAfter
lock?
optional lock?: string[];
Name of widgets that show preloader when command executed.
Inherited from
IDesignEditorCommandDefinition.lock
message?
optional message?: string | string[];
The message for preloader.
Inherited from
IDesignEditorCommandDefinition.message
onExecuted?
optional onExecuted?: Function | Function[];
Functions that executed after command
Inherited from
IDesignEditorCommandDefinition.onExecuted
scrollPosition?
optional scrollPosition?: PointF;
X and Y coordinates of the visible area.
showPreloader?
optional showPreloader?: boolean;
If true, displays the preloader while executing this command.
Inherited from
IDesignEditorCommandDefinition.showPreloader
timeout?
optional timeout?: number;
The timeout for switching preloader messages.
Inherited from
IDesignEditorCommandDefinition.timeout
zoom?
optional zoom?: number;
The zoom level (1 stands for 100%).
zoomMode?
optional zoomMode?: string;
none, bestFit, bestFitShrinkOnly, fitToWidth, fitToHeight, zoomControl, fitToWidthShrinkOnly, fitToHeightShrinkOnly
IDesignEditorDefinitionTranslateItems
Provides the after property to support a queue of commands.
The following example illustrates how you can run the setViewerSettings command after setPrintArea completes.
{
"widgets": [{
"type": "design-editor",
"name": "editor",
"params": {
"inital": { ... },
"setViewerSettings": "{{vars.zoomSettings[$['flyer-size']._.title]}}",
"setPrintArea": {
"data": {
"designFile": "{{$['flyer-gallery']._.name}}"
},
"after": [
"setViewerSettings"
]
}
}
}]
}
Extends
Properties
after?
optional after?: string | string[];
The next commands to be executed after this command completes.
Inherited from
IDesignEditorCommandDefinition.after
autoCompile?
optional autoCompile?: boolean;
If false, action will never execute automatically.
Inherited from
IDesignEditorCommandDefinition.autoCompile
executeOnce?
optional executeOnce?: boolean;
If true, this command will be executed only once.
You can use it for initial command.
For example, we need to change surface depending on the option value.
We write for initial and for updateSurfaces the same productDefinition with $['option]._
And set executeOnce = true for initial. And initial will be executed only once.
Inherited from
IDesignEditorCommandDefinition.executeOnce
executeOnlyAfter?
optional executeOnlyAfter?: string[];
Current command will be executed in a next update only after all commands executed in this param.
The same example from executeOnce param.
We need to execute updateSurface on all next updates, exclude the first one.
And we set executeOnlyAfter = ['initial'] for updateSurface command.
Inherited from
IDesignEditorCommandDefinition.executeOnlyAfter
lock?
optional lock?: string[];
Name of widgets that show preloader when command executed.
Inherited from
IDesignEditorCommandDefinition.lock
message?
optional message?: string | string[];
The message for preloader.
Inherited from
IDesignEditorCommandDefinition.message
onExecuted?
optional onExecuted?: Function | Function[];
Functions that executed after command
Inherited from
IDesignEditorCommandDefinition.onExecuted
showPreloader?
optional showPreloader?: boolean;
If true, displays the preloader while executing this command.
Inherited from
IDesignEditorCommandDefinition.showPreloader
timeout?
optional timeout?: number;
The timeout for switching preloader messages.
Inherited from
IDesignEditorCommandDefinition.timeout
translateParams
translateParams: any;
IDesignEditorPreloaderConfig
Properties
actionsMessage
actionsMessage: string;
initialMessage
initialMessage: string;
IDuplicateSurfacesCommandDefinition
Provides the after property to support a queue of commands.
The following example illustrates how you can run the setViewerSettings command after setPrintArea completes.
{
"widgets": [{
"type": "design-editor",
"name": "editor",
"params": {
"inital": { ... },
"setViewerSettings": "{{vars.zoomSettings[$['flyer-size']._.title]}}",
"setPrintArea": {
"data": {
"designFile": "{{$['flyer-gallery']._.name}}"
},
"after": [
"setViewerSettings"
]
}
}
}]
}
Extends
Properties
after?
optional after?: string | string[];
The next commands to be executed after this command completes.
Inherited from
IDesignEditorCommandDefinition.after
autoCompile?
optional autoCompile?: boolean;
If false, action will never execute automatically.
Inherited from
IDesignEditorCommandDefinition.autoCompile
executeOnce?
optional executeOnce?: boolean;
If true, this command will be executed only once.
You can use it for initial command.
For example, we need to change surface depending on the option value.
We write for initial and for updateSurfaces the same productDefinition with $['option]._
And set executeOnce = true for initial. And initial will be executed only once.
Inherited from
IDesignEditorCommandDefinition.executeOnce
executeOnlyAfter?
optional executeOnlyAfter?: string[];
Current command will be executed in a next update only after all commands executed in this param.
The same example from executeOnce param.
We need to execute updateSurface on all next updates, exclude the first one.
And we set executeOnlyAfter = ['initial'] for updateSurface command.
Inherited from
IDesignEditorCommandDefinition.executeOnlyAfter
lock?
optional lock?: string[];
Name of widgets that show preloader when command executed.
Inherited from
IDesignEditorCommandDefinition.lock
message?
optional message?: string | string[];
The message for preloader.
Inherited from
IDesignEditorCommandDefinition.message
onExecuted?
optional onExecuted?: Function | Function[];
Functions that executed after command
Inherited from
IDesignEditorCommandDefinition.onExecuted
showPreloader?
optional showPreloader?: boolean;
If true, displays the preloader while executing this command.
Inherited from
IDesignEditorCommandDefinition.showPreloader
surfacesToChangeIds
surfacesToChangeIds: number[];
surfaceToDuplicateId
surfaceToDuplicateId: number;
timeout?
optional timeout?: number;
The timeout for switching preloader messages.
Inherited from
IDesignEditorCommandDefinition.timeout
IItemFromSource
Properties
data?
optional data?: any;
imageId
imageId: string;
sourceId
sourceId: string;
ISetBackgroundParam
Provides the after property to support a queue of commands.
The following example illustrates how you can run the setViewerSettings command after setPrintArea completes.
{
"widgets": [{
"type": "design-editor",
"name": "editor",
"params": {
"inital": { ... },
"setViewerSettings": "{{vars.zoomSettings[$['flyer-size']._.title]}}",
"setPrintArea": {
"data": {
"designFile": "{{$['flyer-gallery']._.name}}"
},
"after": [
"setViewerSettings"
]
}
}
}]
}
Extends
Properties
after?
optional after?: string | string[];
The next commands to be executed after this command completes.
Inherited from
IDesignEditorCommandDefinition.after
autoCompile?
optional autoCompile?: boolean;
If false, action will never execute automatically.
Inherited from
IDesignEditorCommandDefinition.autoCompile
autoResize?
optional autoResize?: boolean;
If true, resizes the background image to fill the entire product.
executeOnce?
optional executeOnce?: boolean;
If true, this command will be executed only once.
You can use it for initial command.
For example, we need to change surface depending on the option value.
We write for initial and for updateSurfaces the same productDefinition with $['option]._
And set executeOnce = true for initial. And initial will be executed only once.
Inherited from
IDesignEditorCommandDefinition.executeOnce
executeOnlyAfter?
optional executeOnlyAfter?: string[];
Current command will be executed in a next update only after all commands executed in this param.
The same example from executeOnce param.
We need to execute updateSurface on all next updates, exclude the first one.
And we set executeOnlyAfter = ['initial'] for updateSurface command.
Inherited from
IDesignEditorCommandDefinition.executeOnlyAfter
lock?
optional lock?: string[];
Name of widgets that show preloader when command executed.
Inherited from
IDesignEditorCommandDefinition.lock
message?
optional message?: string | string[];
The message for preloader.
Inherited from
IDesignEditorCommandDefinition.message
onExecuted?
optional onExecuted?: Function | Function[];
Functions that executed after command
Inherited from
IDesignEditorCommandDefinition.onExecuted
showPreloader?
optional showPreloader?: boolean;
If true, displays the preloader while executing this command.
Inherited from
IDesignEditorCommandDefinition.showPreloader
surfaceIndex?
optional surfaceIndex?: number;
The index of a surface that should be modified (the current surface if omitted).
timeout?
optional timeout?: number;
The timeout for switching preloader messages.
Inherited from
IDesignEditorCommandDefinition.timeout
toTile?
optional toTile?: boolean;
If true, the background image tiles the entire product.
url
url: string;
A URL to the image or a path in Customer's Canvas public gallery.
ISetPrintAreaOptions
Additional configuration settings for the print areas.
Properties
preserveSafetyLines
preserveSafetyLines: boolean;
If true, the current safety lines, if any, are restored in new print areas. If false, safety lines from new print areas are applied. The default value is true.
preserveUserChanges
preserveUserChanges: boolean;
If true, the changes made by a user are restored in the new print areas if it is possible. Otherwise, all changes made by the user are wiped. The default value is true.
replaceAll
replaceAll: boolean;
If true, design elements whose names do not match move to the new print area in a random order according to their types. If false, only design elements with the same names are moved to the new print area. The default value is false.
updateRevertData
updateRevertData: boolean;
If true, the new print areas are stored as ones to restore when the product is reverted. Otherwise, the previously stored print areas are restored on product revert. The default value is true.
updateSurfaceSize
updateSurfaceSize: boolean;
If true, changes the surface size to match the new print area. If it's false and a mockup is defined, then the surface size remains unchanged. By default, updateSurfaceSize is false, and the surface size changes only if no mockups are specified for the surface.
ISetRemoteMockup
Provides properties to change mockups by using direct URLs.
For details, you can refer to the ChangeMockup command.
{
"type": "design-editor",
"name": "editor",
"params": {
"initial": { ... },
"setRemoteMockup": `[{
"surfaceIndex": 0,
"mockup": "down",
"url": "http://example.com/mockup.png"
}]`
}
}
Extends
Properties
after?
optional after?: string | string[];
The next commands to be executed after this command completes.
Inherited from
IDesignEditorCommandDefinition.after
autoCompile?
optional autoCompile?: boolean;
If false, action will never execute automatically.
Inherited from
IDesignEditorCommandDefinition.autoCompile
executeOnce?
optional executeOnce?: boolean;
If true, this command will be executed only once.
You can use it for initial command.
For example, we need to change surface depending on the option value.
We write for initial and for updateSurfaces the same productDefinition with $['option]._
And set executeOnce = true for initial. And initial will be executed only once.
Inherited from
IDesignEditorCommandDefinition.executeOnce
executeOnlyAfter?
optional executeOnlyAfter?: string[];
Current command will be executed in a next update only after all commands executed in this param.
The same example from executeOnce param.
We need to execute updateSurface on all next updates, exclude the first one.
And we set executeOnlyAfter = ['initial'] for updateSurface command.
Inherited from
IDesignEditorCommandDefinition.executeOnlyAfter
lock?
optional lock?: string[];
Name of widgets that show preloader when command executed.
Inherited from
IDesignEditorCommandDefinition.lock
message?
optional message?: string | string[];
The message for preloader.
Inherited from
IDesignEditorCommandDefinition.message
mockup
mockup: "up" | "down";
up for overlay mockups, and down for background mockups.
onExecuted?
optional onExecuted?: Function | Function[];
Functions that executed after command
Inherited from
IDesignEditorCommandDefinition.onExecuted
showPreloader?
optional showPreloader?: boolean;
If true, displays the preloader while executing this command.
Inherited from
IDesignEditorCommandDefinition.showPreloader
surfaceIndex
surfaceIndex: number;
The index of a surface that should be modified (the current surface if omitted).
timeout?
optional timeout?: number;
The timeout for switching preloader messages.
Inherited from
IDesignEditorCommandDefinition.timeout
url
url: string;
A URL that links to the mockup image.
ISetSurfacesOptions
Provides properties to replace design elements in the editor.
For details, you can refer to the setSurfaces command.
Extends
Properties
after?
optional after?: string | string[];
The next commands to be executed after this command completes.
Inherited from
IDesignEditorCommandDefinition.after
autoCompile?
optional autoCompile?: boolean;
If false, action will never execute automatically.
Inherited from
IDesignEditorCommandDefinition.autoCompile
executeOnce?
optional executeOnce?: boolean;
If true, this command will be executed only once.
You can use it for initial command.
For example, we need to change surface depending on the option value.
We write for initial and for updateSurfaces the same productDefinition with $['option]._
And set executeOnce = true for initial. And initial will be executed only once.
Inherited from
IDesignEditorCommandDefinition.executeOnce
executeOnlyAfter?
optional executeOnlyAfter?: string[];
Current command will be executed in a next update only after all commands executed in this param.
The same example from executeOnce param.
We need to execute updateSurface on all next updates, exclude the first one.
And we set executeOnlyAfter = ['initial'] for updateSurface command.
Inherited from
IDesignEditorCommandDefinition.executeOnlyAfter
lock?
optional lock?: string[];
Name of widgets that show preloader when command executed.
Inherited from
IDesignEditorCommandDefinition.lock
message?
optional message?: string | string[];
The message for preloader.
Inherited from
IDesignEditorCommandDefinition.message
onExecuted?
optional onExecuted?: Function | Function[];
Functions that executed after command
Inherited from
IDesignEditorCommandDefinition.onExecuted
showPreloader?
optional showPreloader?: boolean;
If true, displays the preloader while executing this command.
Inherited from
IDesignEditorCommandDefinition.showPreloader
surfaces
surfaces: SurfaceTypes[];
An array of definitions of the new surfaces.
timeout?
optional timeout?: number;
The timeout for switching preloader messages.
Inherited from
IDesignEditorCommandDefinition.timeout
ISourcedItemsInfo
Properties
items
items: IItemFromSource[];
source
source: string;
ITranslateItemCommandConfigArgs
Provides parameters to resize a product or some items.
For details, you can refer to the docs.
{
"type": "design-editor",
"name": "editor",
"params": {
"initial": { ... },
"translate": {
"translateParams": {
"items": ["Name"], // the item name
"translateX": "10",
"translateY": "10"
}
}
}
}
Properties
items
items: string[];
translateX
translateX: string | number;
translateY
translateY: string | number;
Type Aliases
ISetRemoteMockupParams
type ISetRemoteMockupParams = ISetRemoteMockup[];