You’re viewing outdated documentation. View the latest Customer’s Canvas On-Premises documentation.

Default Parameters of Design Elements

Applies to: Customer's Canvas On-Premises; Design Editor 6.15.0, 6.x (may differ) · Archived documentation

Customer's Canvas allows you to specify configuration parameters of design elements being added to the canvas. These parameters define the initial appearance and behavior of the elements. After your users have added the elements to the canvas, they can change the appearance of these elements.

The following example demonstrates how you can specify the default parameters of text, lines, and images through IConfiguration.

JavaScript

configuration = {
    defaultItemsConfig: {
        text: {
            font: {
                postScriptName: "Impact",
                size: "10%",
                fauxBold: true,
                fauxItalic: true
            },
            themeBinding: {
                text: "MainColor"
            },
            isVertical: true,
            verticalAlignment: "center",
            overflowStrategy: "FitToWidth",
            maxLineCount: 2,
            maxLineLength: 20
        },
        line: {
            width: 3,
            color: "rgb(255,0,0)",
            linePermissions: {
                allowChangeLineWidth: false
            }
        },
        image: {
            blendMode: "multiply",
            manipulationPermissions: {
                allowMoveHorizontal: false,
                allowMoveVertical: false,
                resizeGrips: {
                    edge: true,
                    corner: ["Arbitrary"]
                }
            }
        }
    }
};

CustomersCanvas.IframeApi.loadEditor(document.getElementById("editorFrame"),
                                     productDefinition, configuration);

To apply default parameters to SVG images imported in the Shape mode, define them as the shape element.

JavaScript

configuration = {
    defaultItemsConfig: {
        shape: {
            borderWidth: 2,
            fillColor: "cmyk(0%, 0%, 0%, 25%, 100%)",
            shapePermissions: {
                allowChangeBorderWidth: false
            }
        }
    }
}

Note that default parameters may depend on corresponding properties of widgets. For example, you can disallow your users to change the opacity of only images being added to the canvas if you set the allowOpacityChange permission for images to false. If you disable the Select opacity slider in the TopToolbar, you prevent your users from changing the opacity of all images and other design elements in their products.

json

{
  "defaultItemsConfig": {
    "image": {
      "itemPermissions": {
        "allowOpacityChange": false
      }
    }
  },
  "widgets": {
    "TopToolbar": {
      "opacitySliderEnabled": true
    }
  }
}

Default Parameters of Design Elements

See Also

Manual

IFrame API Reference