Class: Container

A container for design elements.

Remarks

Print areas have three basic containers in the editor: Background, Main, and Foreground. You can also add channel containers implementing spot colors and textures in Design Editor.

Example

const productDefinition = {
  surfaces: [
    {
      printAreas: [
        {
          designFile: "texture",
          containers: [
            {
              name: "foil",
              type: "texture",
              texture: "texture.jpg",
            },
            {
              name: "spot",
              type: "spotColor",
              previewColor: "rgba(255,255,0,1)",
            },
          ],
        },
      ],
    },
  ],
};

Extends

• ModelComponent

Implements

• IChannelContainerDefinition

Constructors

Constructor

new Container(rawContainer, context): Container

Parameters

rawContainer

{ } | IChannelContainerDefinition

context

IContext

Returns

Container

Overrides

ModelComponent.constructor

Properties

id

id: string

A unique identifier.

Inherited from

ModelComponent.id

---

name

name: string

The item name.

Implementation of

IChannelContainerDefinition.name

Inherited from

ModelComponent.name

---

NAME

readonly static NAME: "Background" = "Background"

The name of the background container.

---

NAME

readonly static NAME: "Main" = "Main"

The name of the main container.

---

NAME

readonly static NAME: "Foreground" = "Foreground"

The name of the foreground container.

---

type

type: ChannelContainerType

A type of the channel container, either texture or spot color.

Implementation of

IChannelContainerDefinition.type

---

translationKey?

optional translationKey?: string

The translation key of the channel tab caption in the Object Inspector. The corresponding string should be defined in the ~/Configuration/translations.json file.

Implementation of

IChannelContainerDefinition.translationKey

---

previewColor?

optional previewColor?: string

An RGB color representing a spot color on the canvas and proof images.

Implementation of

IChannelContainerDefinition.previewColor

---

texture?

optional texture?: string

A texture image used for rendering elements of the container on the canvas and proof images. This value is relative to the ~/assets/helpers/ folder.

Implementation of

IChannelContainerDefinition.texture

---

outputColor?

optional outputColor?: string

The color that is used in hires. This could be, for example, black rgb or cmyk color, or some specific Spot color.

Implementation of

IChannelContainerDefinition.outputColor

Methods

update()

update(params): Promise<Container>

Updates a channel container with new parameters.

Parameters

params

IChannelContainerDefinition

A new container definition. Note, you cannot change the container type.

Returns

Promise<Container>

An instance of the updated container.

Example

  // Initialize a product with the "card.psd" template and a channel container.
  const productDefinition = {
      surfaces: `[{
          printAreas: [{
              designFile: "card",
              containers: [{
                  name: "foil",
                  type: "texture",
                  texture: "texture.jpg"
              }]`
          }]
      }]
  };

  // Load the editor.
  const editor = await CustomersCanvas.IframeApi.loadEditor(iframe, productDefinition)
  // Get the product.
  let product = await editor.getProduct();
  // Get the fourth container.
  product.currentSurface.printAreas[0].getContainers()[3]
      // Update this container with new parameters.
      .update({
          name: "SilverTexture",
          texture: "silver-texture.jpg",
          // Expects a translated string for the SILVER key in translations.json.
          translationKey: "ObjectInspector.SILVER"
      });