Class Container

A container for design elements.

Inheritance

ModelComponent

Container

Package: @aurigma/design-editor-iframe

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.

The constructor for this class is marked as internal. Third-party code should not call the constructor directly or create subclasses that extend the Container class.

Examples

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

Properties

BG_CONTAINER_NAME

The name of the background container.

Declaration

static readonly BG_CONTAINER_NAME = "Background";

FG_CONTAINER_NAME

The name of the foreground container.

Declaration

static readonly FG_CONTAINER_NAME = "Foreground";

MAIN_CONTAINER_NAME

The name of the main container.

Declaration

static readonly MAIN_CONTAINER_NAME = "Main";

outputColor

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

Declaration

outputColor?: string;

Property Value

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

previewColor

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

Declaration

previewColor?: string;

Property Value

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

texture

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.

Declaration

texture?: string;

Property Value

Type	Description
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.

translationKey

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

Declaration

translationKey?: string;

Property Value

Type	Description
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.

type

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

Declaration

type: ChannelContainerType;

Property Value

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

Methods

update(params)

Updates a channel container with new parameters.

Declaration

update(params: IChannelContainerDefinition): Promise<this>;

Parameters

Type	Name	Description
IChannelContainerDefinition	params	A new container definition. Note, you cannot change the container type.

Returns

Type	Description
Promise<this>	An instance of the updated container.

Examples

  // 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"
      });