@aurigma/ui-framework
Version:
A platform which allows building print product personalization editors based on Aurigma's Customer's Canvas.
74 lines (64 loc) • 2.81 kB
Markdown
Command: initial
================
Initializes the [Canvas widget](../canvas.md). You must always specify this command when using the Canvas.
_**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 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.
- `editorConfig` - the configuration of the editor as explained in [Customer's Canvas documentation](https://customerscanvas.com/docs/cc/client-config.htm).
Both these parameters are passed directly to the [CustomersCanvas.IframeApi.loadEditor() method](https://customerscanvas.com/docs/cc/customerscanvas.iframeapi.loadeditor.htm), so refer the Customer's Canvas documentation for more details.
Also, it supports an aditional settings unavailable through the `editorConfig`:
- `viewerSettings`
- `zoomMode` - auto-zoom mode. Possible values are: `none`, `bestFit`, `bestFitShrinkOnly`, `fitToWidth`, `fitToHeight`, `zoomControl`, `fitToWidthShrinkOnly`, `fitToHeightShrinkOnly`
- `zoom` - zoom level as a number (1 = 100%)
- `scrollPosition` - scroll position as a object like `{x: number, y: number}`
## Example
``` json
{
"name":"editor",
"type":"canvas",
"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":{
"isHidden":false,
"position":"Right",
"bgItemEnabled":false,
"variableItemsEnabled":false
},
"FinishButton":{
"mode":"Disabled"
}
}
}
}
}
}
```