Skip to main content

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​

Implements​

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"
      });
Was this page helpful?