Class Surface

A surface representing a product page.

Inheritance

ModelComponent

Surface

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 Surface class.

Examples

const surface = {
  width: 200, height: 150,
  printAreas: [{
      bounds: { x:0, y:0, width: 200, height: 150}
  }],
  mockup: {
      down: "envelope"
  },
  previewMockups: [{ down: "previewEnvelope" }]
}

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.

height

A surface height.

Declaration

height: number;

Property Value

Type	Description
number	A surface height.

mockup

A surface mockup.

Declaration

mockup: SurfaceMockup;

Property Value

Type	Description
SurfaceMockup	A surface mockup.

previewMockups

An array of preview mockups.

Declaration

previewMockups: SurfaceMockup[];

Property Value

Type	Description
SurfaceMockup[]	An array of preview mockups.

printAreas

An array of print areas.

Declaration

printAreas: PrintArea[];

Property Value

Type	Description
PrintArea[]	An array of print areas.

width

A surface width.

Declaration

width: number;

Property Value

Type	Description
number	A surface width.

Methods

addContainer(containerDefiniton)

Declaration

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

Parameters

Type	Name	Description
IChannelContainerDefinition	containerDefiniton

Returns

Type	Description
Promise<Container>

changeBackground(data)

Declaration

changeBackground(data: ImageMetaData | Color): Promise<ShapeItem>;

Parameters

Type	Name	Description
ImageMetaData | Color	data

Returns

Type	Description
Promise<ShapeItem>

getContainer(name)

Declaration

getContainer(name: string): Container;

Parameters

Type	Name	Description
string	name

Returns

Type	Description
Container

getContainers()

Declaration

getContainers(): Container[];

Returns

Type	Description
Container[]

insertContainer(containerDefiniton, index)

Declaration

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

Parameters

Type	Name	Description
IChannelContainerDefinition	containerDefiniton
number | string	index

Returns

Type	Description
Promise<Container>

insertItem(item, index, containerIndex)

Declaration

insertItem(item: CCBaseItem, index?: number, containerIndex?: number): Promise<CCBaseItem>;

Parameters

Type	Name	Description
CCBaseItem	item
number	index
number	containerIndex

Returns

Type	Description
Promise<BaseItem>

moveContainer(initialIndex, destinationIndex)

Declaration

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

Parameters

Type	Name	Description
number	initialIndex
number	destinationIndex

Returns

Type	Description
Container

removeContainer(index)

Declaration

removeContainer(index: number): void;

Parameters

Type	Name	Description
number	index

Returns

Type	Description
void

setMockup(mockup, previewMockups, options)

Sets a new surface mockup and returns a new product instance containing the changed surface.

Declaration

setMockup(mockup: IMockupTemplate, previewMockups?: IMockupTemplate[], options?: {
        updateRevertData?: boolean;
    }): Promise<Product>;

Parameters

Type	Name	Description
IMockupTemplate	mockup	A mockup to set.
IMockupTemplate[]	previewMockups	A collection of preview mockups for proof images.
{ updateRevertData?: boolean; }	options	Additional configuration of mockups. In the current implementation, you can only pass options.updateRevertData. This option defines whether this mockup should be reverted or not when the user reverts product changes. If true, the new mockup is stored as one to restore when the product is reverted. Otherwise, the previously stored mockup is restored on a product revert. The default value is true.

Returns

Type	Description
Promise<Product>	A new product instance containing the changed surface.

Examples

const mockup = {
  up: "envelopeMockup"
}

let product = await editor.getProduct();
product = await product.surfaces[0].setMockup(mockup)
         .catch(error => console.error("Failed to set up the mockup: ", error));

setPrintAreas(printAreas, options)

Sets a new print area for the surface and returns a new product instance containing the changed surface.

Declaration

setPrintAreas(printAreas: (IPrintAreaTemplate | IPrintAreaDefinition)[], options?: ISetPrintAreasOptions): Promise<Product>;

Parameters

Type	Name	Description
(IPrintAreaTemplate | IPrintAreaDefinition)[]	printAreas	New print areas.
ISetPrintAreasOptions	options	Additional configuration settings for the print areas.

Returns

Type	Description
Promise<Product>	A new product instance containing the changed surface.

Remarks

By default, setPrintAreas moves only texts and image placeholders to new positions and drops other design elements. Note that this method changes the content of placeholders having the same layer names on the current Surface and in the new layout. To maintain the rest elements, set the replaceAll option to true. In this case, the rest of placeholders take content in a random order according to their type. If the old layout had more placeholders than the new layout, then extra placeholders are removed.

If the current print area and the new print area have different sizes, you can specify whether to update the surface size to match the new print area by using the updateSurfaceSize option.

Examples

  const newPrintAreas = [{ designFile: "stamp" }];
  const options = {
      replaceAll: true,
      preserveSafetyLines: false,
      updateSurfaceSize: true
  };
  let produt = await editor.getProduct();
  product = product.surfaces[0].setPrintAreas(newPrintAreas, options);
      .catch(error => console.error("Failed to set up the print area: ", error));