initial

• 1 minute to read

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