--- title: "au-widget-design-editor/IAuWidgetDesignEditor | Customer's Canvas On-Premises" canonical: "https://customerscanvas.com/docs/on-premises/ui-framework/widgets/reference/au-widget-design-editor.IAuWidgetDesignEditor/" --- # au-widget-design-editor/IAuWidgetDesignEditor > Product size origin. ## Enumerations ### SurfaceDimensionsValue #### 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. ```json { "widgets": [{ "type": "design-editor", "name": "editor", "params": { "inital": { ... }, "actionsErrorToast": { "show": true, "duration": 15000 } } }] } ``` #### Constructors ##### Constructor ```ts new ActionsErrorToastConfig(): ActionsErrorToastConfig; ``` ###### Returns [`ActionsErrorToastConfig`](#actionserrortoastconfig) #### Properties ##### duration ```ts duration: number; ``` Toast duration, in milliseconds. ##### show ```ts show: boolean; ``` If `true`, displays a toast. *** ### ChangedSurface #### Constructors ##### Constructor ```ts new ChangedSurface( definition, surfaceIndex, all): ChangedSurface; ``` ###### Parameters | Parameter | Type | | ------ | ------ | | `definition` | `any` | | `surfaceIndex` | `any` | | `all` | `any` | ###### Returns [`ChangedSurface`](#changedsurface) #### Properties ##### all ```ts all: IDesignEditorDefinitionChangeLayout; ``` ##### definition ```ts definition: SurfaceTypes; ``` ##### surfaceIndex ```ts surfaceIndex: number; ``` ## Interfaces ### IArtLinkItem #### Properties ##### artLinkId ```ts artLinkId: string; ``` ##### imageId ```ts imageId: string; ``` *** ### IArtLinkItemExtended #### Properties ##### artLinkId ```ts artLinkId: string; ``` ##### data? ```ts optional data?: any; ``` ##### imageId ```ts imageId: string; ``` *** ### IConfiglResizeArgs Provides parameters to resize the whole product or some items. For details, you can refer to the [docs](https://customerscanvas.com/dev/editors/iframe-api/howto/resizing-designs.html). ```json { "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? ```ts optional containerOptions?: object; ``` ###### Index Signature ```ts [key: string]: IContainerResizeOptions ``` ##### defaultOptions? ```ts optional defaultOptions?: IContainerResizeOptions; ``` ##### height ```ts height: string | number; ``` ##### targets ```ts targets: string[]; ``` ##### targetType ```ts targetType: "surfaces" | "product" | "items" | "printArea"; ``` ##### width ```ts 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. ```json { "widgets": [{ "type": "design-editor", "name": "editor", "params": { "inital": { ... }, "setViewerSettings": "{{vars.zoomSettings[$['flyer-size']._.title]}}", "setPrintArea": { "data": { "designFile": "{{$['flyer-gallery']._.name}}" }, "after": [ "setViewerSettings" ] } } }] } ``` #### Extends - [`IDesignEditorCommandDefinition`](#idesigneditorcommanddefinition) #### Properties ##### after? ```ts optional after?: string | string[]; ``` The next commands to be executed after this command completes. ###### Inherited from [`IDesignEditorCommandDefinition`](#idesigneditorcommanddefinition).[`after`](#after-1) ##### autoCompile? ```ts optional autoCompile?: boolean; ``` If `false`, action will never execute automatically. ###### Inherited from [`IDesignEditorCommandDefinition`](#idesigneditorcommanddefinition).[`autoCompile`](#autocompile-1) ##### 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`](#idesigneditorcommanddefinition).[`executeOnce`](#executeonce-1) ##### executeOnlyAfter? ```ts 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`](#idesigneditorcommanddefinition).[`executeOnlyAfter`](#executeonlyafter-1) ##### lock? ```ts optional lock?: string[]; ``` Name of widgets that show preloader when command executed. ###### Inherited from [`IDesignEditorCommandDefinition`](#idesigneditorcommanddefinition).[`lock`](#lock-1) ##### message? ```ts optional message?: string | string[]; ``` The message for preloader. ###### Inherited from [`IDesignEditorCommandDefinition`](#idesigneditorcommanddefinition).[`message`](#message-1) ##### name ```ts name: string; ``` Name for a layer for OI ##### onExecuted? ```ts optional onExecuted?: Function | Function[]; ``` Functions that executed after command ###### Inherited from [`IDesignEditorCommandDefinition`](#idesigneditorcommanddefinition).[`onExecuted`](#onexecuted-1) ##### position ```ts position: object; ``` Position on Print Area ###### x ```ts x: number; ``` ###### y ```ts y: number; ``` ##### showPreloader? ```ts optional showPreloader?: boolean; ``` If `true`, displays the preloader while executing this command. ###### Inherited from [`IDesignEditorCommandDefinition`](#idesigneditorcommanddefinition).[`showPreloader`](#showpreloader-1) ##### size ```ts size: object; ``` Size on Print Area ###### height ```ts height: number; ``` ###### width ```ts width: number; ``` ##### surfaceIndex? ```ts optional surfaceIndex?: number; ``` ##### timeout? ```ts optional timeout?: number; ``` The timeout for switching preloader messages. ###### Inherited from [`IDesignEditorCommandDefinition`](#idesigneditorcommanddefinition).[`timeout`](#timeout-1) ##### url ```ts url: string; ``` Link or public:image as object which will be inserted. *** ### IDepositPhotosItem #### Properties ##### depositPhotosId ```ts depositPhotosId: string; ``` ##### imageId ```ts imageId: string; ``` *** ### IDepositPhotosItemExtended #### Properties ##### data? ```ts optional data?: any; ``` ##### depositPhotosId ```ts depositPhotosId: string; ``` ##### imageId ```ts 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. ```json { "widgets": [{ "type": "design-editor", "name": "editor", "params": { "inital": { ... }, "setViewerSettings": "{{vars.zoomSettings[$['flyer-size']._.title]}}", "setPrintArea": { "data": { "designFile": "{{$['flyer-gallery']._.name}}" }, "after": [ "setViewerSettings" ] } } }] } ``` #### Extended by - [`IChangeDesignVariantCommandDefinition`](https://customerscanvas.com/docs/on-premises/ui-framework/widgets/reference/au-widget-design-editor.Commands.change-design-variant-command.md#ichangedesignvariantcommanddefinition) - [`IDesignEditorLoadUserInfoParams`](https://customerscanvas.com/docs/on-premises/ui-framework/widgets/reference/au-widget-design-editor.Commands.load-user-info-command.md#idesigneditorloaduserinfoparams) - [`ISetSerializedProductConfig`](https://customerscanvas.com/docs/on-premises/ui-framework/widgets/reference/au-widget-design-editor.Commands.set-serialized-product.md#isetserializedproductconfig) - [`ISwapSurfacesCommandDefinition`](https://customerscanvas.com/docs/on-premises/ui-framework/widgets/reference/au-widget-design-editor.Commands.swap-surfaces-command.md#iswapsurfacescommanddefinition) - [`IUpdateItemsCommandDefinition`](https://customerscanvas.com/docs/on-premises/ui-framework/widgets/reference/au-widget-design-editor.Commands.update-items.md#iupdateitemscommanddefinition) - [`IUpdateSurfacesCommandDefinition`](https://customerscanvas.com/docs/on-premises/ui-framework/widgets/reference/au-widget-design-editor.Commands.update-surfaces-command.md#iupdatesurfacescommanddefinition) - [`IDesignEditorDefinitionSetTheme`](#idesigneditordefinitionsettheme) - [`IDesignEditorDefinitionResizeItems`](#idesigneditordefinitionresizeitems) - [`IDesignEditorDefinitionTranslateItems`](#idesigneditordefinitiontranslateitems) - [`IDesignEditorDefinitionSetViewerSettings`](#idesigneditordefinitionsetviewersettings) - [`IDesignEditorDefinitionInitial`](#idesigneditordefinitioninitial) - [`IDesignEditorDefinitionChangeLayout`](#idesigneditordefinitionchangelayout) - [`IDesignEditorDefinitionSetBackground`](#idesigneditordefinitionsetbackground) - [`IDesignEditorDefinitionSetPrintArea`](#idesigneditordefinitionsetprintarea) - [`IDesignEditorDefinitionChangeMockup`](#idesigneditordefinitionchangemockup) - [`ISetRemoteMockup`](#isetremotemockup) - [`ISetSurfacesOptions`](#isetsurfacesoptions) - [`ISetBackgroundParam`](#isetbackgroundparam) - [`ICreateImageItem`](#icreateimageitem) - [`IDuplicateSurfacesCommandDefinition`](#iduplicatesurfacescommanddefinition) #### Properties ##### after? ```ts optional after?: string | string[]; ``` The next commands to be executed after this command completes. ##### autoCompile? ```ts optional autoCompile?: boolean; ``` If `false`, action will never execute automatically. ##### 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. ##### executeOnlyAfter? ```ts 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? ```ts optional lock?: string[]; ``` Name of widgets that show preloader when command executed. ##### message? ```ts optional message?: string | string[]; ``` The message for preloader. ##### onExecuted? ```ts optional onExecuted?: Function | Function[]; ``` Functions that executed after command ##### showPreloader? ```ts optional showPreloader?: boolean; ``` If `true`, displays the preloader while executing this command. ##### timeout? ```ts optional timeout?: number; ``` The timeout for switching preloader messages. *** ### IDesignEditorDefinitionChangeLayout Provides properties to replace design elements in the editor. ```json { "type": "design-editor", "name": "editor", "params": { "initial": { ... }, "changeLayout": [{ "discardChanges": false, "data": { "printAreas": [{ "designFile": "{{'flyer/'+$['layout']._.props.design}}" }] } }] } } ``` #### Extends - [`IDesignEditorCommandDefinition`](#idesigneditorcommanddefinition) #### Properties ##### after? ```ts optional after?: string | string[]; ``` The next commands to be executed after this command completes. ###### Inherited from [`IDesignEditorCommandDefinition`](#idesigneditorcommanddefinition).[`after`](#after-1) ##### autoCompile? ```ts optional autoCompile?: boolean; ``` If `false`, action will never execute automatically. ###### Inherited from [`IDesignEditorCommandDefinition`](#idesigneditorcommanddefinition).[`autoCompile`](#autocompile-1) ##### data ```ts data: SurfaceTypes; ``` A product definition. ##### dimesions? ```ts 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? ```ts optional discardChanges?: boolean; ``` If `true`, a design always loaded from scratch. if `false` or omitted, merges placeholders and text elements. ##### 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`](#idesigneditorcommanddefinition).[`executeOnce`](#executeonce-1) ##### executeOnlyAfter? ```ts 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`](#idesigneditorcommanddefinition).[`executeOnlyAfter`](#executeonlyafter-1) ##### lock? ```ts optional lock?: string[]; ``` Name of widgets that show preloader when command executed. ###### Inherited from [`IDesignEditorCommandDefinition`](#idesigneditorcommanddefinition).[`lock`](#lock-1) ##### message? ```ts optional message?: string | string[]; ``` The message for preloader. ###### Inherited from [`IDesignEditorCommandDefinition`](#idesigneditorcommanddefinition).[`message`](#message-1) ##### onExecuted? ```ts optional onExecuted?: Function | Function[]; ``` Functions that executed after command ###### Inherited from [`IDesignEditorCommandDefinition`](#idesigneditorcommanddefinition).[`onExecuted`](#onexecuted-1) ##### removeBackground ```ts removeBackground: boolean; ``` If `true`, removes the background image. ##### showPreloader? ```ts optional showPreloader?: boolean; ``` If `true`, displays the preloader while executing this command. ###### Inherited from [`IDesignEditorCommandDefinition`](#idesigneditorcommanddefinition).[`showPreloader`](#showpreloader-1) ##### sourceSurfaceIndex? ```ts optional sourceSurfaceIndex?: number; ``` Specifies what page to be used as a layout if `data` refers to a multipage template. ##### surfaceIndex? ```ts optional surfaceIndex?: number; ``` The index of a surface that should be modified (the current surface if omitted). ##### timeout? ```ts optional timeout?: number; ``` The timeout for switching preloader messages. ###### Inherited from [`IDesignEditorCommandDefinition`](#idesigneditorcommanddefinition).[`timeout`](#timeout-1) ##### viewerSettings? ```ts optional viewerSettings?: IDesignEditorDefinitionSetViewerSettings; ``` Zoom properties. *** ### IDesignEditorDefinitionChangeMockup Provides properties to change mockups. For details, you can refer to the [ChangeMockup command](https://customerscanvas.com/dev/ui-framework/widgets/design-editor-commands/change-mockup.html). ```json { "type": "design-editor", "name": "editor", "params": { "initial": { ... }, "changeMockup": [{ "data": { "mockup": { "down": "{{$['color']._.props.mockup}}" }, "previewMockups": "{{$['color']._.props.previews}}" } }] } } ``` #### Extends - [`IDesignEditorCommandDefinition`](#idesigneditorcommanddefinition) #### Properties ##### after? ```ts optional after?: string | string[]; ``` The next commands to be executed after this command completes. ###### Inherited from [`IDesignEditorCommandDefinition`](#idesigneditorcommanddefinition).[`after`](#after-1) ##### autoCompile? ```ts optional autoCompile?: boolean; ``` If `false`, action will never execute automatically. ###### Inherited from [`IDesignEditorCommandDefinition`](#idesigneditorcommanddefinition).[`autoCompile`](#autocompile-1) ##### data ```ts 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`](#idesigneditorcommanddefinition).[`executeOnce`](#executeonce-1) ##### executeOnlyAfter? ```ts 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`](#idesigneditorcommanddefinition).[`executeOnlyAfter`](#executeonlyafter-1) ##### lock? ```ts optional lock?: string[]; ``` Name of widgets that show preloader when command executed. ###### Inherited from [`IDesignEditorCommandDefinition`](#idesigneditorcommanddefinition).[`lock`](#lock-1) ##### message? ```ts optional message?: string | string[]; ``` The message for preloader. ###### Inherited from [`IDesignEditorCommandDefinition`](#idesigneditorcommanddefinition).[`message`](#message-1) ##### onExecuted? ```ts optional onExecuted?: Function | Function[]; ``` Functions that executed after command ###### Inherited from [`IDesignEditorCommandDefinition`](#idesigneditorcommanddefinition).[`onExecuted`](#onexecuted-1) ##### options ```ts options: object; ``` ###### addToHistory ```ts addToHistory: boolean; ``` If `false`, the new mockup cannot be reverted using the **Undo** button. ###### updateRevertData ```ts 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 ```ts 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? ```ts optional showPreloader?: boolean; ``` If `true`, displays the preloader while executing this command. ###### Inherited from [`IDesignEditorCommandDefinition`](#idesigneditorcommanddefinition).[`showPreloader`](#showpreloader-1) ##### timeout? ```ts optional timeout?: number; ``` The timeout for switching preloader messages. ###### Inherited from [`IDesignEditorCommandDefinition`](#idesigneditorcommanddefinition).[`timeout`](#timeout-1) *** ### IDesignEditorDefinitionInitial Provides properties to initialize a product in the editor. For details, you can refer to the [Initial command](https://customerscanvas.com/dev/ui-framework/widgets/design-editor-commands/initial.html). ```json { "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 - [`IDesignEditorCommandDefinition`](#idesigneditorcommanddefinition) #### Properties ##### after? ```ts optional after?: string | string[]; ``` The next commands to be executed after this command completes. ###### Inherited from [`IDesignEditorCommandDefinition`](#idesigneditorcommanddefinition).[`after`](#after-1) ##### autoCompile? ```ts optional autoCompile?: boolean; ``` If `false`, action will never execute automatically. ###### Inherited from [`IDesignEditorCommandDefinition`](#idesigneditorcommanddefinition).[`autoCompile`](#autocompile-1) ##### editorConfig? ```ts optional editorConfig?: IConfiguration; ``` The configuration of the editor. ##### 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`](#idesigneditorcommanddefinition).[`executeOnce`](#executeonce-1) ##### executeOnlyAfter? ```ts 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`](#idesigneditorcommanddefinition).[`executeOnlyAfter`](#executeonlyafter-1) ##### initSurfaceIndex? ```ts optional initSurfaceIndex?: number; ``` Initial surface index ##### lock? ```ts optional lock?: string[]; ``` Name of widgets that show preloader when command executed. ###### Inherited from [`IDesignEditorCommandDefinition`](#idesigneditorcommanddefinition).[`lock`](#lock-1) ##### maximizeAssetManager? ```ts optional maximizeAssetManager?: boolean; ``` Opens the Asset Manager in the full-window mode. ##### message? ```ts optional message?: string | string[]; ``` The message for preloader. ###### Inherited from [`IDesignEditorCommandDefinition`](#idesigneditorcommanddefinition).[`message`](#message-1) ##### OnBoundsNotificationCb? ```ts 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`](https://customerscanvas.com/docs/on-premises/ui-framework/widgets/reference/au-widget-design-editor.interfaces.bounds-data.md#iboundsdata) | ###### Returns `void` \| (`sender`, `customData`) => `void`[] ##### onCustomButtonClicked? ```ts 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? ```ts optional onExecuted?: Function | Function[]; ``` Functions that executed after command ###### Inherited from [`IDesignEditorCommandDefinition`](#idesigneditorcommanddefinition).[`onExecuted`](#onexecuted-1) ##### OnImageDpiChanged? ```ts optional OnImageDpiChanged?: Function | Function[]; ``` A function that is executed after changing an image item DPI. ##### onInit? ```ts optional onInit?: Function | Function[]; ``` ##### onItemAdded? ```ts optional onItemAdded?: Function | Function[]; ``` A function that is executed after adding an item. ##### onItemChanged? ```ts optional onItemChanged?: Function | Function[]; ``` A function that is executed after changing an item. ##### onItemRemoved? ```ts optional onItemRemoved?: Function | Function[]; ``` A function that is executed after removing an item. ##### onProductRevert? ```ts optional onProductRevert?: Function | Function[]; ``` A function that is executed after clicking the `Revert Product` button. ##### OnRedoProduct? ```ts optional OnRedoProduct?: Function | Function[]; ``` A function that is executed after redo product. ##### OnUndoProduct? ```ts optional OnUndoProduct?: Function | Function[]; ``` A function that is executed after undo product. ##### productDefinition ```ts productDefinition: IProductDefinition; ``` PSD/IDML templates to open. For details, see the [topic about defining products](https://customerscanvas.com/dev/editors/iframe-api/product-definition/multiple-pages.html). ##### resourceId? ```ts optional resourceId?: string; ``` A design identifier of a product variant. ##### showPreloader? ```ts optional showPreloader?: boolean; ``` If `true`, displays the preloader while executing this command. ###### Inherited from [`IDesignEditorCommandDefinition`](#idesigneditorcommanddefinition).[`showPreloader`](#showpreloader-1) ##### timeout? ```ts optional timeout?: number; ``` The timeout for switching preloader messages. ###### Inherited from [`IDesignEditorCommandDefinition`](#idesigneditorcommanddefinition).[`timeout`](#timeout-1) ##### viewerSettings? ```ts optional viewerSettings?: IDesignEditorDefinitionSetViewerSettings; ``` Canvas zoom properties. *** ### IDesignEditorDefinitionParams Provides commands used in the `design-editor` widget. #### Properties ##### actionsErrorToast ```ts actionsErrorToast: ActionsErrorToastConfig; ``` Enables a toast to display errors. ##### changeDesignVariant? ```ts optional changeDesignVariant?: IChangeDesignVariantCommandDefinition; ``` A command that changes product design variants. ##### changeLayout? ```ts optional changeLayout?: IDesignEditorDefinitionChangeLayout; ``` Replaces design elements. ##### changeMockup? ```ts optional changeMockup?: IDesignEditorDefinitionChangeMockup; ``` Changes mockup images in the editor. This command uses images from the Customer's Canvas back end. ##### initial? ```ts optional initial?: IDesignEditorDefinitionInitial; ``` Initializes the editor. ##### modifyItems? ```ts optional modifyItems?: IDesignEditorDefinitionModifyItems; ``` Changes properties of design elements in the editor. ##### preloader? ```ts optional preloader?: IDesignEditorPreloaderConfig; ``` preloader messages for initial loading and actions executing ##### replaceInterpolationPlaceholders? ```ts optional replaceInterpolationPlaceholders?: boolean; ``` If `true`, executes the replaceInterloationPlaceholders() method after initialization to convert interpolation placeholders to in-string placeholders. ##### setBackground? ```ts optional setBackground?: IDesignEditorDefinitionSetBackground; ``` Sets a new background image. ##### setPrintArea? ```ts optional setPrintArea?: IDesignEditorDefinitionSetPrintArea; ``` Applies a new print area definition to the product. ##### setRemoteMockup? ```ts optional setRemoteMockup?: ISetRemoteMockupParams; ``` Changes mockup images in the editor. This command uses remote images through URLs. ##### setSerializedProduct? ```ts optional setSerializedProduct?: ISetSerializedProductConfig; ``` ##### setTheme? ```ts optional setTheme?: IDesignEditorDefinitionSetTheme; ``` Applies a product theme. ##### setViewerSettings? ```ts optional setViewerSettings?: IDesignEditorDefinitionSetViewerSettings; ``` Changes product zoom properties in the editor. ##### updateItems? ```ts 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. ```json { "widgets": [{ "type": "design-editor", "name": "editor", "params": { "inital": { ... }, "setViewerSettings": "{{vars.zoomSettings[$['flyer-size']._.title]}}", "setPrintArea": { "data": { "designFile": "{{$['flyer-gallery']._.name}}" }, "after": [ "setViewerSettings" ] } } }] } ``` #### Extends - [`IDesignEditorCommandDefinition`](#idesigneditorcommanddefinition) #### Properties ##### after? ```ts optional after?: string | string[]; ``` The next commands to be executed after this command completes. ###### Inherited from [`IDesignEditorCommandDefinition`](#idesigneditorcommanddefinition).[`after`](#after-1) ##### autoCompile? ```ts optional autoCompile?: boolean; ``` If `false`, action will never execute automatically. ###### Inherited from [`IDesignEditorCommandDefinition`](#idesigneditorcommanddefinition).[`autoCompile`](#autocompile-1) ##### 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`](#idesigneditorcommanddefinition).[`executeOnce`](#executeonce-1) ##### executeOnlyAfter? ```ts 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`](#idesigneditorcommanddefinition).[`executeOnlyAfter`](#executeonlyafter-1) ##### lock? ```ts optional lock?: string[]; ``` Name of widgets that show preloader when command executed. ###### Inherited from [`IDesignEditorCommandDefinition`](#idesigneditorcommanddefinition).[`lock`](#lock-1) ##### message? ```ts optional message?: string | string[]; ``` The message for preloader. ###### Inherited from [`IDesignEditorCommandDefinition`](#idesigneditorcommanddefinition).[`message`](#message-1) ##### onExecuted? ```ts optional onExecuted?: Function | Function[]; ``` Functions that executed after command ###### Inherited from [`IDesignEditorCommandDefinition`](#idesigneditorcommanddefinition).[`onExecuted`](#onexecuted-1) ##### resizeParams ```ts resizeParams: any; ``` ##### showPreloader? ```ts optional showPreloader?: boolean; ``` If `true`, displays the preloader while executing this command. ###### Inherited from [`IDesignEditorCommandDefinition`](#idesigneditorcommanddefinition).[`showPreloader`](#showpreloader-1) ##### timeout? ```ts optional timeout?: number; ``` The timeout for switching preloader messages. ###### Inherited from [`IDesignEditorCommandDefinition`](#idesigneditorcommanddefinition).[`timeout`](#timeout-1) *** ### IDesignEditorDefinitionSetBackground Provides properties to set a design background. For details, you can refer to the [SetBackground command](https://customerscanvas.com/dev/ui-framework/widgets/design-editor-commands/set-background.html). ```json { "type": "design-editor", "name": "editor", "params": { "initial": { ... }, "setBackground": { "url": "public:bg_123.pdf" } } } ``` #### Extends - [`IDesignEditorCommandDefinition`](#idesigneditorcommanddefinition) #### Properties ##### after? ```ts optional after?: string | string[]; ``` The next commands to be executed after this command completes. ###### Inherited from [`IDesignEditorCommandDefinition`](#idesigneditorcommanddefinition).[`after`](#after-1) ##### autoCompile? ```ts optional autoCompile?: boolean; ``` If `false`, action will never execute automatically. ###### Inherited from [`IDesignEditorCommandDefinition`](#idesigneditorcommanddefinition).[`autoCompile`](#autocompile-1) ##### autoResize? ```ts optional autoResize?: boolean; ``` If `true`, resizes the background image to fill the entire product. ##### 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`](#idesigneditorcommanddefinition).[`executeOnce`](#executeonce-1) ##### executeOnlyAfter? ```ts 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`](#idesigneditorcommanddefinition).[`executeOnlyAfter`](#executeonlyafter-1) ##### lock? ```ts optional lock?: string[]; ``` Name of widgets that show preloader when command executed. ###### Inherited from [`IDesignEditorCommandDefinition`](#idesigneditorcommanddefinition).[`lock`](#lock-1) ##### message? ```ts optional message?: string | string[]; ``` The message for preloader. ###### Inherited from [`IDesignEditorCommandDefinition`](#idesigneditorcommanddefinition).[`message`](#message-1) ##### onExecuted? ```ts optional onExecuted?: Function | Function[]; ``` Functions that executed after command ###### Inherited from [`IDesignEditorCommandDefinition`](#idesigneditorcommanddefinition).[`onExecuted`](#onexecuted-1) ##### showPreloader? ```ts optional showPreloader?: boolean; ``` If `true`, displays the preloader while executing this command. ###### Inherited from [`IDesignEditorCommandDefinition`](#idesigneditorcommanddefinition).[`showPreloader`](#showpreloader-1) ##### surfaceIndex? ```ts optional surfaceIndex?: number; ``` The index of a surface that should be modified (the current surface if omitted). ##### timeout? ```ts optional timeout?: number; ``` The timeout for switching preloader messages. ###### Inherited from [`IDesignEditorCommandDefinition`](#idesigneditorcommanddefinition).[`timeout`](#timeout-1) ##### toTile? ```ts optional toTile?: boolean; ``` If `true`, the background image tiles the entire product. ##### url ```ts 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](https://customerscanvas.com/dev/ui-framework/widgets/design-editor-commands/set-print-area.html). ```json { "type": "design-editor", "name": "editor", "params": { "initial": { ... }, "setPrintArea": { "options": { "preserveUserChanges": true, "updateRevertData": false }, "data": { "designFile": "{{vars.designRoot + '/' + $['card-size']._.title}}" } } } } ``` #### Extends - [`IDesignEditorCommandDefinition`](#idesigneditorcommanddefinition) #### Properties ##### after? ```ts optional after?: string | string[]; ``` The next commands to be executed after this command completes. ###### Inherited from [`IDesignEditorCommandDefinition`](#idesigneditorcommanddefinition).[`after`](#after-1) ##### autoCompile? ```ts optional autoCompile?: boolean; ``` If `false`, action will never execute automatically. ###### Inherited from [`IDesignEditorCommandDefinition`](#idesigneditorcommanddefinition).[`autoCompile`](#autocompile-1) ##### data ```ts data: IPrintAreaTemplate | IPrintAreaDefinition; ``` The print area [definition](https://customerscanvas.com/dev/editors/iframe-api/howto/update-surfaces.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`](#idesigneditorcommanddefinition).[`executeOnce`](#executeonce-1) ##### executeOnlyAfter? ```ts 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`](#idesigneditorcommanddefinition).[`executeOnlyAfter`](#executeonlyafter-1) ##### lock? ```ts optional lock?: string[]; ``` Name of widgets that show preloader when command executed. ###### Inherited from [`IDesignEditorCommandDefinition`](#idesigneditorcommanddefinition).[`lock`](#lock-1) ##### message? ```ts optional message?: string | string[]; ``` The message for preloader. ###### Inherited from [`IDesignEditorCommandDefinition`](#idesigneditorcommanddefinition).[`message`](#message-1) ##### onExecuted? ```ts optional onExecuted?: Function | Function[]; ``` Functions that executed after command ###### Inherited from [`IDesignEditorCommandDefinition`](#idesigneditorcommanddefinition).[`onExecuted`](#onexecuted-1) ##### options ```ts options: ISetPrintAreaOptions; ``` Additional configuration parameters. For details, see the [reference](https://customerscanvas.com/dev/editors/iframe-api/howto/update-surfaces.html). ##### showPreloader? ```ts optional showPreloader?: boolean; ``` If `true`, displays the preloader while executing this command. ###### Inherited from [`IDesignEditorCommandDefinition`](#idesigneditorcommanddefinition).[`showPreloader`](#showpreloader-1) ##### surfaceIndex? ```ts optional surfaceIndex?: number; ``` The index of a surface that should be modified (the current surface if omitted). ##### timeout? ```ts optional timeout?: number; ``` The timeout for switching preloader messages. ###### Inherited from [`IDesignEditorCommandDefinition`](#idesigneditorcommanddefinition).[`timeout`](#timeout-1) *** ### IDesignEditorDefinitionSetTheme Provides properties to define a product theme. For details, you can refer to the [SetTheme command](https://customerscanvas.com/dev/ui-framework/widgets/design-editor-commands/set-theme.html). ```json { "type": "design-editor", "name": "editor", "params": { "initial": { ... }, "setTheme": { "primary": "{{ "#f00" }}", "secondary": "{{ "#0f0" }}" } } } ``` #### Extends - [`IDesignEditorCommandDefinition`](#idesigneditorcommanddefinition) #### Properties ##### after? ```ts optional after?: string | string[]; ``` The next commands to be executed after this command completes. ###### Inherited from [`IDesignEditorCommandDefinition`](#idesigneditorcommanddefinition).[`after`](#after-1) ##### autoCompile? ```ts optional autoCompile?: boolean; ``` If `false`, action will never execute automatically. ###### Inherited from [`IDesignEditorCommandDefinition`](#idesigneditorcommanddefinition).[`autoCompile`](#autocompile-1) ##### 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`](#idesigneditorcommanddefinition).[`executeOnce`](#executeonce-1) ##### executeOnlyAfter? ```ts 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`](#idesigneditorcommanddefinition).[`executeOnlyAfter`](#executeonlyafter-1) ##### lock? ```ts optional lock?: string[]; ``` Name of widgets that show preloader when command executed. ###### Inherited from [`IDesignEditorCommandDefinition`](#idesigneditorcommanddefinition).[`lock`](#lock-1) ##### message? ```ts optional message?: string | string[]; ``` The message for preloader. ###### Inherited from [`IDesignEditorCommandDefinition`](#idesigneditorcommanddefinition).[`message`](#message-1) ##### onExecuted? ```ts optional onExecuted?: Function | Function[]; ``` Functions that executed after command ###### Inherited from [`IDesignEditorCommandDefinition`](#idesigneditorcommanddefinition).[`onExecuted`](#onexecuted-1) ##### showPreloader? ```ts optional showPreloader?: boolean; ``` If `true`, displays the preloader while executing this command. ###### Inherited from [`IDesignEditorCommandDefinition`](#idesigneditorcommanddefinition).[`showPreloader`](#showpreloader-1) ##### theme ```ts theme: any; ``` Typically, it is a theme name as a string, but you can also pass a [structure describing an "ad-hoc" theme](https://customerscanvas.com/dev/editors/iframe-api/howto/change-theme.html). ##### timeout? ```ts optional timeout?: number; ``` The timeout for switching preloader messages. ###### Inherited from [`IDesignEditorCommandDefinition`](#idesigneditorcommanddefinition).[`timeout`](#timeout-1) *** ### IDesignEditorDefinitionSetViewerSettings Provides properties to define the canvas zoom. ```json { "type": "design-editor", "name": "editor", "params": { "initial": { ... }, "setViewerSettings": { "zoom": 0.1, "zoomMode": 'bestFit', "scrollPosition": {x: 0, y: 0} } } } ``` #### Extends - [`IDesignEditorCommandDefinition`](#idesigneditorcommanddefinition) #### Properties ##### after? ```ts optional after?: string | string[]; ``` The next commands to be executed after this command completes. ###### Inherited from [`IDesignEditorCommandDefinition`](#idesigneditorcommanddefinition).[`after`](#after-1) ##### autoCompile? ```ts optional autoCompile?: boolean; ``` If `false`, action will never execute automatically. ###### Inherited from [`IDesignEditorCommandDefinition`](#idesigneditorcommanddefinition).[`autoCompile`](#autocompile-1) ##### 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`](#idesigneditorcommanddefinition).[`executeOnce`](#executeonce-1) ##### executeOnlyAfter? ```ts 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`](#idesigneditorcommanddefinition).[`executeOnlyAfter`](#executeonlyafter-1) ##### lock? ```ts optional lock?: string[]; ``` Name of widgets that show preloader when command executed. ###### Inherited from [`IDesignEditorCommandDefinition`](#idesigneditorcommanddefinition).[`lock`](#lock-1) ##### message? ```ts optional message?: string | string[]; ``` The message for preloader. ###### Inherited from [`IDesignEditorCommandDefinition`](#idesigneditorcommanddefinition).[`message`](#message-1) ##### onExecuted? ```ts optional onExecuted?: Function | Function[]; ``` Functions that executed after command ###### Inherited from [`IDesignEditorCommandDefinition`](#idesigneditorcommanddefinition).[`onExecuted`](#onexecuted-1) ##### scrollPosition? ```ts optional scrollPosition?: PointF; ``` X and Y coordinates of the visible area. ##### showPreloader? ```ts optional showPreloader?: boolean; ``` If `true`, displays the preloader while executing this command. ###### Inherited from [`IDesignEditorCommandDefinition`](#idesigneditorcommanddefinition).[`showPreloader`](#showpreloader-1) ##### timeout? ```ts optional timeout?: number; ``` The timeout for switching preloader messages. ###### Inherited from [`IDesignEditorCommandDefinition`](#idesigneditorcommanddefinition).[`timeout`](#timeout-1) ##### zoom? ```ts optional zoom?: number; ``` The zoom level (`1` stands for 100%). ##### zoomMode? ```ts 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. ```json { "widgets": [{ "type": "design-editor", "name": "editor", "params": { "inital": { ... }, "setViewerSettings": "{{vars.zoomSettings[$['flyer-size']._.title]}}", "setPrintArea": { "data": { "designFile": "{{$['flyer-gallery']._.name}}" }, "after": [ "setViewerSettings" ] } } }] } ``` #### Extends - [`IDesignEditorCommandDefinition`](#idesigneditorcommanddefinition) #### Properties ##### after? ```ts optional after?: string | string[]; ``` The next commands to be executed after this command completes. ###### Inherited from [`IDesignEditorCommandDefinition`](#idesigneditorcommanddefinition).[`after`](#after-1) ##### autoCompile? ```ts optional autoCompile?: boolean; ``` If `false`, action will never execute automatically. ###### Inherited from [`IDesignEditorCommandDefinition`](#idesigneditorcommanddefinition).[`autoCompile`](#autocompile-1) ##### 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`](#idesigneditorcommanddefinition).[`executeOnce`](#executeonce-1) ##### executeOnlyAfter? ```ts 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`](#idesigneditorcommanddefinition).[`executeOnlyAfter`](#executeonlyafter-1) ##### lock? ```ts optional lock?: string[]; ``` Name of widgets that show preloader when command executed. ###### Inherited from [`IDesignEditorCommandDefinition`](#idesigneditorcommanddefinition).[`lock`](#lock-1) ##### message? ```ts optional message?: string | string[]; ``` The message for preloader. ###### Inherited from [`IDesignEditorCommandDefinition`](#idesigneditorcommanddefinition).[`message`](#message-1) ##### onExecuted? ```ts optional onExecuted?: Function | Function[]; ``` Functions that executed after command ###### Inherited from [`IDesignEditorCommandDefinition`](#idesigneditorcommanddefinition).[`onExecuted`](#onexecuted-1) ##### showPreloader? ```ts optional showPreloader?: boolean; ``` If `true`, displays the preloader while executing this command. ###### Inherited from [`IDesignEditorCommandDefinition`](#idesigneditorcommanddefinition).[`showPreloader`](#showpreloader-1) ##### timeout? ```ts optional timeout?: number; ``` The timeout for switching preloader messages. ###### Inherited from [`IDesignEditorCommandDefinition`](#idesigneditorcommanddefinition).[`timeout`](#timeout-1) ##### translateParams ```ts translateParams: any; ``` *** ### IDesignEditorPreloaderConfig #### Properties ##### actionsMessage ```ts actionsMessage: string; ``` ##### initialMessage ```ts 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. ```json { "widgets": [{ "type": "design-editor", "name": "editor", "params": { "inital": { ... }, "setViewerSettings": "{{vars.zoomSettings[$['flyer-size']._.title]}}", "setPrintArea": { "data": { "designFile": "{{$['flyer-gallery']._.name}}" }, "after": [ "setViewerSettings" ] } } }] } ``` #### Extends - [`IDesignEditorCommandDefinition`](#idesigneditorcommanddefinition) #### Properties ##### after? ```ts optional after?: string | string[]; ``` The next commands to be executed after this command completes. ###### Inherited from [`IDesignEditorCommandDefinition`](#idesigneditorcommanddefinition).[`after`](#after-1) ##### autoCompile? ```ts optional autoCompile?: boolean; ``` If `false`, action will never execute automatically. ###### Inherited from [`IDesignEditorCommandDefinition`](#idesigneditorcommanddefinition).[`autoCompile`](#autocompile-1) ##### 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`](#idesigneditorcommanddefinition).[`executeOnce`](#executeonce-1) ##### executeOnlyAfter? ```ts 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`](#idesigneditorcommanddefinition).[`executeOnlyAfter`](#executeonlyafter-1) ##### lock? ```ts optional lock?: string[]; ``` Name of widgets that show preloader when command executed. ###### Inherited from [`IDesignEditorCommandDefinition`](#idesigneditorcommanddefinition).[`lock`](#lock-1) ##### message? ```ts optional message?: string | string[]; ``` The message for preloader. ###### Inherited from [`IDesignEditorCommandDefinition`](#idesigneditorcommanddefinition).[`message`](#message-1) ##### onExecuted? ```ts optional onExecuted?: Function | Function[]; ``` Functions that executed after command ###### Inherited from [`IDesignEditorCommandDefinition`](#idesigneditorcommanddefinition).[`onExecuted`](#onexecuted-1) ##### showPreloader? ```ts optional showPreloader?: boolean; ``` If `true`, displays the preloader while executing this command. ###### Inherited from [`IDesignEditorCommandDefinition`](#idesigneditorcommanddefinition).[`showPreloader`](#showpreloader-1) ##### surfacesToChangeIds ```ts surfacesToChangeIds: number[]; ``` ##### surfaceToDuplicateId ```ts surfaceToDuplicateId: number; ``` ##### timeout? ```ts optional timeout?: number; ``` The timeout for switching preloader messages. ###### Inherited from [`IDesignEditorCommandDefinition`](#idesigneditorcommanddefinition).[`timeout`](#timeout-1) *** ### IItemFromSource #### Properties ##### data? ```ts optional data?: any; ``` ##### imageId ```ts imageId: string; ``` ##### sourceId ```ts 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. ```json { "widgets": [{ "type": "design-editor", "name": "editor", "params": { "inital": { ... }, "setViewerSettings": "{{vars.zoomSettings[$['flyer-size']._.title]}}", "setPrintArea": { "data": { "designFile": "{{$['flyer-gallery']._.name}}" }, "after": [ "setViewerSettings" ] } } }] } ``` #### Extends - [`IDesignEditorCommandDefinition`](#idesigneditorcommanddefinition) #### Properties ##### after? ```ts optional after?: string | string[]; ``` The next commands to be executed after this command completes. ###### Inherited from [`IDesignEditorCommandDefinition`](#idesigneditorcommanddefinition).[`after`](#after-1) ##### autoCompile? ```ts optional autoCompile?: boolean; ``` If `false`, action will never execute automatically. ###### Inherited from [`IDesignEditorCommandDefinition`](#idesigneditorcommanddefinition).[`autoCompile`](#autocompile-1) ##### autoResize? ```ts optional autoResize?: boolean; ``` If `true`, resizes the background image to fill the entire product. ##### 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`](#idesigneditorcommanddefinition).[`executeOnce`](#executeonce-1) ##### executeOnlyAfter? ```ts 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`](#idesigneditorcommanddefinition).[`executeOnlyAfter`](#executeonlyafter-1) ##### lock? ```ts optional lock?: string[]; ``` Name of widgets that show preloader when command executed. ###### Inherited from [`IDesignEditorCommandDefinition`](#idesigneditorcommanddefinition).[`lock`](#lock-1) ##### message? ```ts optional message?: string | string[]; ``` The message for preloader. ###### Inherited from [`IDesignEditorCommandDefinition`](#idesigneditorcommanddefinition).[`message`](#message-1) ##### onExecuted? ```ts optional onExecuted?: Function | Function[]; ``` Functions that executed after command ###### Inherited from [`IDesignEditorCommandDefinition`](#idesigneditorcommanddefinition).[`onExecuted`](#onexecuted-1) ##### showPreloader? ```ts optional showPreloader?: boolean; ``` If `true`, displays the preloader while executing this command. ###### Inherited from [`IDesignEditorCommandDefinition`](#idesigneditorcommanddefinition).[`showPreloader`](#showpreloader-1) ##### surfaceIndex? ```ts optional surfaceIndex?: number; ``` The index of a surface that should be modified (the current surface if omitted). ##### timeout? ```ts optional timeout?: number; ``` The timeout for switching preloader messages. ###### Inherited from [`IDesignEditorCommandDefinition`](#idesigneditorcommanddefinition).[`timeout`](#timeout-1) ##### toTile? ```ts optional toTile?: boolean; ``` If `true`, the background image tiles the entire product. ##### url ```ts 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 ```ts 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 ```ts 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 ```ts 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 ```ts 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 ```ts 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](https://customerscanvas.com/dev/ui-framework/widgets/design-editor-commands/change-mockup.html). ```json { "type": "design-editor", "name": "editor", "params": { "initial": { ... }, "setRemoteMockup": `[{ "surfaceIndex": 0, "mockup": "down", "url": "http://example.com/mockup.png" }]` } } ``` #### Extends - [`IDesignEditorCommandDefinition`](#idesigneditorcommanddefinition) #### Properties ##### after? ```ts optional after?: string | string[]; ``` The next commands to be executed after this command completes. ###### Inherited from [`IDesignEditorCommandDefinition`](#idesigneditorcommanddefinition).[`after`](#after-1) ##### autoCompile? ```ts optional autoCompile?: boolean; ``` If `false`, action will never execute automatically. ###### Inherited from [`IDesignEditorCommandDefinition`](#idesigneditorcommanddefinition).[`autoCompile`](#autocompile-1) ##### 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`](#idesigneditorcommanddefinition).[`executeOnce`](#executeonce-1) ##### executeOnlyAfter? ```ts 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`](#idesigneditorcommanddefinition).[`executeOnlyAfter`](#executeonlyafter-1) ##### lock? ```ts optional lock?: string[]; ``` Name of widgets that show preloader when command executed. ###### Inherited from [`IDesignEditorCommandDefinition`](#idesigneditorcommanddefinition).[`lock`](#lock-1) ##### message? ```ts optional message?: string | string[]; ``` The message for preloader. ###### Inherited from [`IDesignEditorCommandDefinition`](#idesigneditorcommanddefinition).[`message`](#message-1) ##### mockup ```ts mockup: "up" | "down"; ``` `up` for overlay mockups, and `down` for background mockups. ##### onExecuted? ```ts optional onExecuted?: Function | Function[]; ``` Functions that executed after command ###### Inherited from [`IDesignEditorCommandDefinition`](#idesigneditorcommanddefinition).[`onExecuted`](#onexecuted-1) ##### showPreloader? ```ts optional showPreloader?: boolean; ``` If `true`, displays the preloader while executing this command. ###### Inherited from [`IDesignEditorCommandDefinition`](#idesigneditorcommanddefinition).[`showPreloader`](#showpreloader-1) ##### surfaceIndex ```ts surfaceIndex: number; ``` The index of a surface that should be modified (the current surface if omitted). ##### timeout? ```ts optional timeout?: number; ``` The timeout for switching preloader messages. ###### Inherited from [`IDesignEditorCommandDefinition`](#idesigneditorcommanddefinition).[`timeout`](#timeout-1) ##### url ```ts 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](https://customerscanvas.com/dev/ui-framework/widgets/design-editor-commands/set-surfaces.html). #### Extends - [`IDesignEditorCommandDefinition`](#idesigneditorcommanddefinition) #### Properties ##### after? ```ts optional after?: string | string[]; ``` The next commands to be executed after this command completes. ###### Inherited from [`IDesignEditorCommandDefinition`](#idesigneditorcommanddefinition).[`after`](#after-1) ##### autoCompile? ```ts optional autoCompile?: boolean; ``` If `false`, action will never execute automatically. ###### Inherited from [`IDesignEditorCommandDefinition`](#idesigneditorcommanddefinition).[`autoCompile`](#autocompile-1) ##### 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`](#idesigneditorcommanddefinition).[`executeOnce`](#executeonce-1) ##### executeOnlyAfter? ```ts 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`](#idesigneditorcommanddefinition).[`executeOnlyAfter`](#executeonlyafter-1) ##### lock? ```ts optional lock?: string[]; ``` Name of widgets that show preloader when command executed. ###### Inherited from [`IDesignEditorCommandDefinition`](#idesigneditorcommanddefinition).[`lock`](#lock-1) ##### message? ```ts optional message?: string | string[]; ``` The message for preloader. ###### Inherited from [`IDesignEditorCommandDefinition`](#idesigneditorcommanddefinition).[`message`](#message-1) ##### onExecuted? ```ts optional onExecuted?: Function | Function[]; ``` Functions that executed after command ###### Inherited from [`IDesignEditorCommandDefinition`](#idesigneditorcommanddefinition).[`onExecuted`](#onexecuted-1) ##### showPreloader? ```ts optional showPreloader?: boolean; ``` If `true`, displays the preloader while executing this command. ###### Inherited from [`IDesignEditorCommandDefinition`](#idesigneditorcommanddefinition).[`showPreloader`](#showpreloader-1) ##### surfaces ```ts surfaces: SurfaceTypes[]; ``` An array of definitions of the new surfaces. ##### timeout? ```ts optional timeout?: number; ``` The timeout for switching preloader messages. ###### Inherited from [`IDesignEditorCommandDefinition`](#idesigneditorcommanddefinition).[`timeout`](#timeout-1) *** ### ISourcedItemsInfo #### Properties ##### items ```ts items: IItemFromSource[]; ``` ##### source ```ts source: string; ``` *** ### ITranslateItemCommandConfigArgs Provides parameters to resize a product or some items. For details, you can refer to the [docs](https://customerscanvas.com/dev/editors/iframe-api/howto/resizing-designs.html). ```json { "type": "design-editor", "name": "editor", "params": { "initial": { ... }, "translate": { "translateParams": { "items": ["Name"], // the item name "translateX": "10", "translateY": "10" } } } } ``` #### Properties ##### items ```ts items: string[]; ``` ##### translateX ```ts translateX: string | number; ``` ##### translateY ```ts translateY: string | number; ``` ## Type Aliases ### ISetRemoteMockupParams ```ts type ISetRemoteMockupParams = ISetRemoteMockup[]; ```