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: Surface

A surface representing a product page.

Example​

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

Extends​

Constructors​

Constructor​

new Surface(rawSurface, parentProduct, context): Surface

Parameters​

rawSurface​
parentProduct​

Product

context​

IContext

Returns​

Surface

Overrides​

ModelComponent.constructor

Properties​

id​

id: string

A unique identifier.

Inherited from​

ModelComponent.id

name​

name: string

The item name.

Inherited from​

ModelComponent.name

width​

width: number

A surface width.

height​

height: number

A surface height.

mockup​

mockup: SurfaceMockup

A surface mockup.

previewMockups​

previewMockups: SurfaceMockup[]

An array of preview mockups.

printAreas​

printAreas: PrintArea[]

An array of print areas.

containers​

containers: Container[] = []

An array of channel containers for print embellishments.

Methods​

setMockup()​

setMockup(mockup, previewMockups?, options?): Promise<Product>

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

Parameters​

mockup​

IMockupTemplate

A mockup to set.

previewMockups?​

IMockupTemplate[]

A collection of preview mockups for proof images.

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.

updateRevertData?​

boolean

Returns​

Promise<Product>

A new product instance containing the changed surface.

Example​

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

changeBackground()​

changeBackground(data): Promise<ShapeItem>

Parameters​

data​

any

Returns​

Promise<ShapeItem>

setPrintAreas()​

setPrintAreas(printAreas, options?): Promise<Product>

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

Parameters​

printAreas​

(IPrintAreaTemplate | IPrintAreaDefinition)[]

New print areas.

options?​

ISetPrintAreasOptions

Additional configuration settings for the print areas.

Returns​

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.

Example​

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

getContainer()​

getContainer(name): Container

Parameters​

name​

string

Returns​

Container

getContainers()​

getContainers(): Container[]

Returns​

Container[]

addContainer()​

addContainer(containerDefiniton): Promise<Container>

Parameters​

containerDefiniton​

IChannelContainerDefinition

Returns​

Promise<Container>

insertContainer()​

insertContainer(containerDefiniton, index): Promise<Container>

Parameters​

containerDefiniton​

IChannelContainerDefinition

index​

string | number

Returns​

Promise<Container>

removeContainer()​

removeContainer(index): void

Parameters​

index​

number

Returns​

void

moveContainer()​

moveContainer(initialIndex, destinationIndex): Container

Parameters​

initialIndex​

number

destinationIndex​

number

Returns​

Container

insertItem()​

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

Parameters​

item​

CCBaseItem

index?​

number

containerIndex?​

number

Returns​

Promise<CCBaseItem>

Was this page helpful?