---
title: "Surface | Customer's Canvas On-Premises"
canonical: "https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-model/Surface/"
---

# Surface

> - [`ModelComponent`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-model/ModelComponent.md#abstract-modelcomponent)

## Classes

### Surface

#### Extends

#### Constructors

##### Constructor

```ts
new Surface(
   width?, 
   height?, 
   mockup?, 
   printAreas?, 
   id?, 
   name?, 
   initDefaultContainers?): Surface;
```

###### Parameters

| Parameter | Type | Default value |
| ------ | ------ | ------ |
| `width?` | `number` | `undefined` |
| `height?` | `number` | `undefined` |
| `mockup?` | [`SurfaceMockup`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-model/SurfaceMockup.md#surfacemockup) | `undefined` |
| `printAreas?` | [`PrintArea`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-model/PrintArea.md#printarea)[] | `[]` |
| `id?` | `string` | `undefined` |
| `name?` | `string` | `undefined` |
| `initDefaultContainers?` | `boolean` | `undefined` |

###### Returns

[`Surface`](#surface)

###### Overrides

[`ModelComponent`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-model/ModelComponent.md#abstract-modelcomponent).[`constructor`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-model/ModelComponent.md#constructor)

#### Properties

##### id

```ts
id: string;
```

###### Inherited from

[`ModelComponent`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-model/ModelComponent.md#abstract-modelcomponent).[`id`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-model/ModelComponent.md#id)

##### parentProduct

```ts
parentProduct: Product;
```

##### watermark

```ts
watermark: Watermark = null;
```

#### Accessors

##### containers

###### Get Signature

```ts
get containers(): Collection<Container>;
```

###### Returns

[`Collection`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-model/Collection.md#collection)\<[`Container`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-model/Container.md#container)\>

###### Set Signature

```ts
set containers(value): void;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `value` | [`Collection`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-model/Collection.md#collection)\<[`Container`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-model/Container.md#container)\> |

###### Returns

`void`

##### height

###### Get Signature

```ts
get height(): number;
```

###### Returns

`number`

###### Set Signature

```ts
set height(value): void;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `value` | `number` |

###### Returns

`void`

##### interactiveZones

###### Get Signature

```ts
get interactiveZones(): Collection<InteractiveZone>;
```

###### Returns

[`Collection`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-model/Collection.md#collection)\<[`InteractiveZone`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-model/InteractiveZone.md#interactivezone)\>

###### Set Signature

```ts
set interactiveZones(value): void;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `value` | [`Collection`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-model/Collection.md#collection)\<[`InteractiveZone`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-model/InteractiveZone.md#interactivezone)\> |

###### Returns

`void`

##### mockup

###### Get Signature

```ts
get mockup(): SurfaceMockup;
```

###### Returns

[`SurfaceMockup`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-model/SurfaceMockup.md#surfacemockup)

###### Set Signature

```ts
set mockup(value): void;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `value` | [`SurfaceMockup`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-model/SurfaceMockup.md#surfacemockup) |

###### Returns

`void`

##### name

###### Get Signature

```ts
get name(): string;
```

###### Returns

`string`

###### Set Signature

```ts
set name(value): void;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `value` | `string` |

###### Returns

`void`

###### Inherited from

[`ModelComponent`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-model/ModelComponent.md#abstract-modelcomponent).[`name`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-model/ModelComponent.md#name)

##### nonChannelContainerItems

###### Get Signature

```ts
get nonChannelContainerItems(): Item[];
```

###### Returns

[`Item`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-model/Item.md#item)[]

##### previewMockups

###### Get Signature

```ts
get previewMockups(): Collection<SurfaceMockup>;
```

###### Returns

[`Collection`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-model/Collection.md#collection)\<[`SurfaceMockup`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-model/SurfaceMockup.md#surfacemockup)\>

###### Set Signature

```ts
set previewMockups(value): void;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `value` | [`Collection`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-model/Collection.md#collection)\<[`SurfaceMockup`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-model/SurfaceMockup.md#surfacemockup)\> |

###### Returns

`void`

##### printAreas

###### Get Signature

```ts
get printAreas(): Collection<PrintArea>;
```

###### Returns

[`Collection`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-model/Collection.md#collection)\<[`PrintArea`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-model/PrintArea.md#printarea)\>

###### Set Signature

```ts
set printAreas(value): void;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `value` | [`Collection`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-model/Collection.md#collection)\<[`PrintArea`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-model/PrintArea.md#printarea)\> |

###### Returns

`void`

##### rotateAngle

###### Get Signature

```ts
get rotateAngle(): number;
```

###### Returns

`number`

###### Set Signature

```ts
set rotateAngle(value): void;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `value` | `number` |

###### Returns

`void`

##### tags

###### Get Signature

```ts
get tags(): object;
```

###### Returns

`object`

###### Set Signature

```ts
set tags(value): void;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `value` | \{ \[`key`: `string`\]: `any`; \} |

###### Returns

`void`

###### Inherited from

[`ModelComponent`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-model/ModelComponent.md#abstract-modelcomponent).[`tags`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-model/ModelComponent.md#tags)

##### version

###### Get Signature

```ts
get version(): string;
```

###### Returns

`string`

###### Inherited from

[`ModelComponent`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-model/ModelComponent.md#abstract-modelcomponent).[`version`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-model/ModelComponent.md#version)

##### width

###### Get Signature

```ts
get width(): number;
```

###### Returns

`number`

###### Set Signature

```ts
set width(value): void;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `value` | `number` |

###### Returns

`void`

#### Methods

##### addPropertyChanged()

```ts
addPropertyChanged(listener): void;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `listener` | (`sender`, `eventArgs`) => `void` |

###### Returns

`void`

###### Inherited from

[`ModelComponent`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-model/ModelComponent.md#abstract-modelcomponent).[`addPropertyChanged`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-model/ModelComponent.md#addpropertychanged)

##### clone()

```ts
clone(generateNewIds?): Surface;
```

###### Parameters

| Parameter | Type | Default value |
| ------ | ------ | ------ |
| `generateNewIds` | `boolean` | `false` |

###### Returns

[`Surface`](#surface)

##### equals()

```ts
equals(other): boolean;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `other` | [`ModelComponent`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-model/ModelComponent.md#abstract-modelcomponent) |

###### Returns

`boolean`

###### Inherited from

[`ModelComponent`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-model/ModelComponent.md#abstract-modelcomponent).[`equals`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-model/ModelComponent.md#equals)

##### generateNewIds()

```ts
generateNewIds(): void;
```

###### Returns

`void`

###### Overrides

[`ModelComponent`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-model/ModelComponent.md#abstract-modelcomponent).[`generateNewIds`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-model/ModelComponent.md#generatenewids)

##### getAllItems()

```ts
getAllItems(options?): IEnumerable<Item>;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `options` | [`IGetAllItemsOptions`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-model/IGetAllItemsOptions.md#igetallitemsoptions) |

###### Returns

`IEnumerable`\<[`Item`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-model/Item.md#item)\>

##### getBackgroundItem()

```ts
getBackgroundItem(): Item;
```

###### Returns

[`Item`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-model/Item.md#item)

##### getSimplifiedObject()

```ts
getSimplifiedObject(): object;
```

###### Returns

`object`

###### Overrides

[`ModelComponent`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-model/ModelComponent.md#abstract-modelcomponent).[`getSimplifiedObject`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-model/ModelComponent.md#getsimplifiedobject)

##### printAreaAdded()

```ts
printAreaAdded(h): void;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `h` | `any` |

###### Returns

`void`

##### printAreaAdded()

```ts
printAreaAdded(h): void;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `h` | `any` |

###### Returns

`void`

##### printAreaRemoved()

```ts
printAreaRemoved(h): void;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `h` | `any` |

###### Returns

`void`

##### printAreaRemoved()

```ts
printAreaRemoved(h): void;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `h` | `any` |

###### Returns

`void`

##### removePropertyChanged()

```ts
removePropertyChanged(listener): void;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `listener` | (`sender`, `eventArgs`) => `void` |

###### Returns

`void`

###### Inherited from

[`ModelComponent`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-model/ModelComponent.md#abstract-modelcomponent).[`removePropertyChanged`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-model/ModelComponent.md#removepropertychanged)

##### toString()

```ts
toString(): string;
```

Returns a string representation of an object.

###### Returns

`string`

###### Inherited from

[`ModelComponent`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-model/ModelComponent.md#abstract-modelcomponent).[`toString`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-model/ModelComponent.md#tostring)

##### getAllItems()

```ts
static getAllItems(surfaces, options?): IEnumerable<Item>;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `surfaces` | `any` |
| `options` | [`IGetAllItemsOptions`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-model/IGetAllItemsOptions.md#igetallitemsoptions) |

###### Returns

`IEnumerable`\<[`Item`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-model/Item.md#item)\>

##### getItems()

```ts
static getItems(surfaces, options): Item[];
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `surfaces` | `any` |
| `options` | [`IGetAllItemsOptions`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-model/IGetAllItemsOptions.md#igetallitemsoptions) |

###### Returns

[`Item`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-model/Item.md#item)[]