@aurigma/ui-framework/docs/widgets/canvas-commands/change-layout.md

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

Command: ChangeLayout
=====================

This command partially replaces design with a specified design. It ignores the background of a design, tries to merge the placeholder and text content and may add/remove some elements (depending on markers). See the [Layouts toolbox button](https://customerscanvas.com/docs/cc/using-image-gallery.htm#layouts) description for details.  

## Params

- `data` - the same syntax as a `productDefinition` (although instead of an array only one item is allowed). You may also pass a stateId instead of a surface definition. 
- `discardChanges` - when `true`, a design always loaded from a scratch, if `false` or omitted - trying to merge a design as explained above.
- `sourceSurfaceIndex` - if we are loading a multipage state as a design, it specifies what surface is used as a layout.  
-  `dimesions` - `canvas` | `config` - if the design and the currently loaded product have different dimensions, which size is preferred.

## Example

``` json
{
   "type": "option",
   "name": "layout",
   "params": {
       "title": "Layouts",
       "prompt": "Choose a flyer layout",
       "type": "list",
       "values": [
          { "title": "Full-page", "props": { "design": "full-page" }, "preselected": true },
          { "title": "50/50", "props": { "design": "half-to-full" } },
          { "title": "25/25/50", "props": { "design": "three" } }
      ]
   } 
},
...
{
    "type": "canvas", 
    "name": "cc",
    "params": {
        "initial": { ... }, 
        "changeLayout": [{
            "discardChanges": false,
            "data": {
                  "printAreas": [{
                      "designFile": "{{'demos/flyer/'+$['layout']._.props.design}}"
                 }]
            }
        }]
     }
}
```