Skip to main content
⚠️ Archived Version

You are viewing documentation for Design Editor version 7.3, which is no longer actively maintained. For the latest features and updates, please refer to the current version (7.4).

Class: PrintArea

A print area.

Example​

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

Extends​

Constructors​

Constructor​

new PrintArea(rawPrintArea, surface): PrintArea

Parameters​

rawPrintArea​
surface​

Surface

Returns​

PrintArea

Overrides​

ModelComponent.constructor

Properties​

id​

id: string

A unique identifier.

Inherited from​

ModelComponent.id

name​

name: string

The item name.

Inherited from​

ModelComponent.name

containers​

containers: Container[] = []

An array of channel containers for print embellishments.

Example​

// 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​

getContainer()​

getContainer(name): Container

Gets a container by its name.

Parameters​

name​

string

A name of the container.

Returns​

Container

Example​

 // 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()​

getContainers(): Container[]

Gets an array of all containers in the print area.

Returns​

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.

Example​

 // 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());

addContainer()​

addContainer(containerDefiniton): Promise<Container>

Adds a channel container to the print area.

Parameters​

containerDefiniton​

IChannelContainerDefinition

A container to add.

Returns​

Promise<Container>

An instance of the added container.

Example​

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

insertContainer()​

insertContainer(containerDefiniton, index): Promise<Container>

Inserts a channel container into the print area.

Parameters​

containerDefiniton​

IChannelContainerDefinition

A container to add.

index​

string | number

A position of this container in the array of containers, either numeric or string value (a value greater than two). For example, "3".

Returns​

Promise<Container>

An instance of the inserted container.

Example​

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

removeContainer()​

removeContainer(index): void

Removes a channel container from the print area.

Parameters​

index​

number

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​

void

Example​

 // 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());

moveContainer()​

moveContainer(initialIndex, destinationIndex): Container

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

Parameters​

initialIndex​

number

An index of the channel container to be moved (a value greater than two).

destinationIndex​

number

A new index of the container to be moved (a value greater than two).

Returns​

Container

An instance of the moved container.

Example​

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