Class PrintArea

A print area.

Inheritance

ModelComponent

PrintArea

Package: @aurigma/design-editor-iframe

Remarks

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

Examples

  // Initialize a product with the "card.psd" template and a channel container.
  const productDefinition = {
      surfaces: [{
          printAreas: [{
              name: "postcard",
              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 in a print area.
  product.currentSurface.printAreas[0].getContainers()[3]
      // Update this container with new parameters.
      .update({
          name: "SilverTexture",
          texture: "silver-texture.jpg"
      });

Properties

containers

An array of channel containers for print embellishments.

Declaration

containers: Container[];

Property Value

Type	Description
Container[]	An array of channel containers for print embellishments.

Examples

// Initialize a product with the "card.psd" template and two channel containers.
  const productDefinition = {
      surfaces: [{
          printAreas: [{
              name: "postcard",
              designFile: "card",
              containers: [
                  {
                      name: "foil",
                      type: "texture",
                      texture: "texture.jpg"
                  },
                  {
                      name: "spot",
                      type: "spotColor",
                      previewColor: "rgba(255,255,0,1)"
                  }
              ]
          }]
      }]
  };

Methods

addContainer(containerDefiniton)

Adds a channel container to the print area.

Declaration

addContainer(containerDefiniton: IChannelContainerDefinition): Promise<Container>;

Parameters

Type	Name	Description
IChannelContainerDefinition	containerDefiniton	A container to add.

Returns

Type	Description
Promise<Container>	An instance of the added container.

Examples

 // Initialize a product with the "card.psd" template.
 const productDefinition = {
     surfaces: ["card"]
 };

 // Load the editor.
 const editor = await CustomersCanvas.IframeApi.loadEditor(iframe, productDefinition)
 // Get the product.
 let product = await editor.getProduct();
 // Add a container to the print area.
 product.currentSurface.printAreas[0].addContainer({
     name: "foil",
     type: "texture",
     texture: "texture.jpg",
     // Expects a translated string for the FOIL key in translations.json.
     translationKey: "ObjectInspector.FOIL"
 });

getContainer(name)

Gets a container by its name.

Declaration

getContainer(name: string): Container;

Parameters

Type	Name	Description
string	name	A name of the container.

Returns

Type	Description
Container

Examples

 // Load the editor.
 const editor = await CustomersCanvas.IframeApi.loadEditor(iframe, productDefinition);
 // Get the product.
 let product = await editor.getProduct();
 // Display a container with the "foil" name.
 console.log(product.currentSurface.printAreas[0].getContainer("foil"));

getContainers()

Gets an array of all containers in the print area.

Declaration

getContainers(): Container[];

Returns

Type	Description
Container[]	An array of all containers in the print area. By default, each print area has three basic containers in the editor: Background, Main, and Foreground.

Examples

 // Load the editor.
 const editor = await CustomersCanvas.IframeApi.loadEditor(iframe, productDefinition);
 // Get the product.
 let product = await editor.getProduct();
 // Display obtained containers.
 console.log(product.currentSurface.printAreas[0].getContainers());

insertContainer(containerDefiniton, index)

Inserts a channel container into the print area.

Declaration

insertContainer(containerDefiniton: IChannelContainerDefinition, index: number | string): Promise<Container>;

Parameters

Type	Name	Description
IChannelContainerDefinition	containerDefiniton	A container to add.
number | string	index	A position of this container in the array of containers, either numeric or string value (a value greater than two). For example, "3".

Returns

Type	Description
Promise<Container>	An instance of the inserted container.

Examples

  // Specify a container definition of a spot color.
  const containerDefinition = {
      name: "spot",
      type: "spotColor",
      previewColor: "rgba(0,255,0,1)"
  };
  const containerIndex = 4;

  // Load the editor.
  const editor = await CustomersCanvas.IframeApi.loadEditor(iframe, productDefinition)
  // Get the product.
  let product = await editor.getProduct();
  // Insert a container.
  product.currentSurface.printAreas[0].insertContainer(containerDefinition, containerIndex);

moveContainer(initialIndex, destinationIndex)

Moves a channel container to a new position in the array of containers.

Declaration

moveContainer(initialIndex: number, destinationIndex: number): Container;

Parameters

Type	Name	Description
number	initialIndex	An index of the channel container to be moved (a value greater than two).
number	destinationIndex	A new index of the container to be moved (a value greater than two).

Returns

Type	Description
Container	An instance of the moved container.

Examples

  const containerIndex = 4;
  const destinationIndex = 3;

  // Load the editor.
  const editor = await CustomersCanvas.IframeApi.loadEditor(iframe, productDefinition)
  // Get the product.
  let product = await editor.getProduct();
  // Move a container.
  product.currentSurface.printAreas[0].moveContainer(containerIndex, destinationIndex);

removeContainer(index)

Removes a channel container from the print area.

Declaration

removeContainer(index: number): void;

Parameters

Type	Name	Description
number	index	An index of the container to be removed (a value greater than two). Note that you cannot remove basic containers: Background, Main, or Foreground.

Returns

Type	Description
void

Examples

 // Load the editor.
 const editor = await CustomersCanvas.IframeApi.loadEditor(iframe, productDefinition)
 // Get the product.
 let product = await editor.getProduct();
 // Remove the fourth container.
 product.currentSurface.printAreas[0].removeContainer(3);
 // Display the remaining containers.
 console.log(product.currentSurface.printAreas[0].getContainers());