@aurigma/ui-framework/docs/widgets/design-editor-commands/initial.md

A platform which allows building print product personalization editors based on Aurigma's Customer's Canvas.

Command: initial
================

Initializes the [DesignEditor widget](../design-editor.md). You must always specify this command when using the DesignEditor.

_**Important:** It is highly discouraged to make this command dynamic (as it will cause a "hard reload" of the product in the editor)._

If you are familiar with the Customer's Canvas IFrame API, it is very similar to the [CustomersCanvas.IframeApi.loadEditor() method](https://customerscanvas.com/docs/cc/customerscanvas.iframeapi.loadeditor.htm).

## Params

- `productDefinition` - a list of pages (surfaces) and PSD/IDML templates to open. For more details, see [product definitions](https://customerscanvas.com/docs/cc/quick-start.htm).
- `editorConfig` - the configuration of the editor. For more details, see the [Customer's Canvas configuration](https://customerscanvas.com/docs/cc/client-config.htm).
- `maximizeAssetManager` - an optional boolean value that defines whether the **Asset Manager** dialog box opens in full-window mode. The default value is `false`.
- `onItemAdded` - a single function or an array of functions that will be called when a design item is added.
- `onItemChanged` - a single function or an array of functions that will be called when an item is changed.
- `onItemRemoved` - a single function or an array of functions that will be called when a design item is removed.
- `onProductRevert` - a single function or an array of functions that will be called when the product is reverted.
- `viewerSettings` - initial zoom parameters unavailable through the `editorConfig`:

    - `zoomMode` - auto-zoom mode. Possible values are: `none`, `bestFit`, `bestFitShrinkOnly`, `fitToWidth`, `fitToHeight`, `zoomControl`, `fitToWidthShrinkOnly`, and `fitToHeightShrinkOnly`.
    - `zoom` - zoom level as a number (1 = 100%).
    - `scrollPosition` - scroll position as an object like `{x: number, y: number}`.

## Example

``` json
{  
    "name": "design-editor",
    "type": "design-editor",
    "params": {  
        "initial": {  
            "productDefinition": {  
                "surfaces": [{
                    "printAreas": [{
                        "designFile": "mytemplate"
                    }]
                }]
            },
            "editorConfig": {
                "canvas": {
                    "containerColor": "#fff",
                    "color": "#fff",
                    "shadowEnabled": true,
                    "rulers": {
                        "enabled": false
                    }
                },
                "fontList": {
                    "appFonts": ["*"]
                },
                "initialMode": "SimpleOnly",
                "restoreProductOnReloadEnabled": false,
                "widgets": {
                    "ObjectInspector": {
                        "position": "Right",
                        "bgItemEnabled": false
                    },
                    "FinishButton": {
                        "mode": "Disabled"
                    }
                }
            },
            "onItemChanged": [
                "{{ #asyncFunction await $['cc'].getProofImages() }}"
            ],
            "viewerSettings": {
                "zoom": 1,
                "scrollPosition": { "x": 0, "y": 0 }
            }
        }
    }
}
```