initial

Initializes the DesignEditor widget. 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.

Params

• productDefinition - a list of pages (surfaces) and PSD/IDML templates to open. For more details, see product definitions.

• editorConfig - the configuration of the editor. For more details, see the Customer's Canvas configuration.

• 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}.

For the complete list of parameters, you can refer to IDesignEditorDefinitionInitial.

Example

{  
    "name": "design-editor",
    "type": "design-editor",
    "params": {  
        "initial": {  
            "productDefinition": {  
                "surfaces": [{
                    "printAreas": [{
                        "designFile": "mytemplate"
                    }]
                }]
            },
            "editorConfig": {
                "canvas": {
                    "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 }
            }
        }
    }
}