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

# InteractiveZonesHandler

> - [`IInteractiveZonesHandler`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/IInteractiveZonesHandler.md#iinteractivezoneshandler)

## Classes

### InteractiveZonesHandler

#### Implements

#### Constructors

##### Constructor

```ts
new InteractiveZonesHandler(styles, eventManagerEvent): InteractiveZonesHandler;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `styles` | [`IInteractiveZonesStyles`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvasStyle.md#iinteractivezonesstyles) |
| `eventManagerEvent` | `EventObject`\<[`IInteractiveZonesStateChangedEventArgs`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/IInteractiveZonesHandler.md#iinteractivezonesstatechangedeventargs)\> |

###### Returns

[`InteractiveZonesHandler`](#interactivezoneshandler)

#### Accessors

##### activeZone

###### Get Signature

```ts
get activeZone(): InteractiveZone;
```

###### Returns

`InteractiveZone`

###### Set Signature

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

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `value` | `InteractiveZone` |

###### Returns

`void`

###### Implementation of

[`IInteractiveZonesHandler`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/IInteractiveZonesHandler.md#iinteractivezoneshandler).[`activeZone`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/IInteractiveZonesHandler.md#activezone)

##### currentSurface

###### Get Signature

```ts
get currentSurface(): Surface;
```

###### Returns

`Surface`

###### Set Signature

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

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `value` | `Surface` |

###### Returns

`void`

###### Implementation of

[`IInteractiveZonesHandler`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/IInteractiveZonesHandler.md#iinteractivezoneshandler).[`currentSurface`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/IInteractiveZonesHandler.md#currentsurface)

##### highlightZone

###### Get Signature

```ts
get highlightZone(): InteractiveZone;
```

###### Returns

`InteractiveZone`

###### Set Signature

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

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `value` | `InteractiveZone` |

###### Returns

`void`

###### Implementation of

[`IInteractiveZonesHandler`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/IInteractiveZonesHandler.md#iinteractivezoneshandler).[`highlightZone`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/IInteractiveZonesHandler.md#highlightzone)

##### interactiveZones

###### Get Signature

```ts
get interactiveZones(): InteractiveZone[];
```

###### Returns

`InteractiveZone`[]

###### Implementation of

[`IInteractiveZonesHandler`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/IInteractiveZonesHandler.md#iinteractivezoneshandler).[`interactiveZones`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/IInteractiveZonesHandler.md#interactivezones)

##### stateChangedEvent

###### Get Signature

```ts
get stateChangedEvent(): EventObject<IInteractiveZonesStateChangedEventArgs>;
```

###### Returns

`EventObject`\<[`IInteractiveZonesStateChangedEventArgs`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/IInteractiveZonesHandler.md#iinteractivezonesstatechangedeventargs)\>

###### Implementation of

[`IInteractiveZonesHandler`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/IInteractiveZonesHandler.md#iinteractivezoneshandler).[`stateChangedEvent`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/IInteractiveZonesHandler.md#statechangedevent)

#### Methods

##### getSnapLines()

```ts
getSnapLines(): RectangleF[];
```

###### Returns

`RectangleF`[]

###### Implementation of

[`IInteractiveZonesHandler`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/IInteractiveZonesHandler.md#iinteractivezoneshandler).[`getSnapLines`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/IInteractiveZonesHandler.md#getsnaplines)

##### getZoneBounds()

```ts
getZoneBounds(zone): any;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `zone` | `InteractiveZone` |

###### Returns

`any`

###### Implementation of

[`IInteractiveZonesHandler`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/IInteractiveZonesHandler.md#iinteractivezoneshandler).[`getZoneBounds`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/IInteractiveZonesHandler.md#getzonebounds)

##### getZoneStyle()

```ts
getZoneStyle(
   zone, 
   isActive, 
   isHover): IInteractiveZoneStateStyle;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `zone` | `InteractiveZone` |
| `isActive` | `boolean` |
| `isHover` | `boolean` |

###### Returns

[`IInteractiveZoneStateStyle`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvasStyle.md#iinteractivezonestatestyle)

###### Implementation of

[`IInteractiveZonesHandler`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/IInteractiveZonesHandler.md#iinteractivezoneshandler).[`getZoneStyle`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/IInteractiveZonesHandler.md#getzonestyle)

##### isReady()

```ts
isReady(): boolean;
```

###### Returns

`boolean`

###### Implementation of

[`IInteractiveZonesHandler`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/IInteractiveZonesHandler.md#iinteractivezoneshandler).[`isReady`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/IInteractiveZonesHandler.md#isready)

##### propertyOf()

```ts
propertyOf<TObj>(name): keyof TObj;
```

###### Type Parameters

| Type Parameter |
| ------ |
| `TObj` |

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `name` | keyof `TObj` |

###### Returns

keyof `TObj`

##### setInputManager()

```ts
setInputManager(inputManager): void;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `inputManager` | [`IInputManager`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/IInputManager.md#iinputmanager) |

###### Returns

`void`

###### Implementation of

[`IInteractiveZonesHandler`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/IInteractiveZonesHandler.md#iinteractivezoneshandler).[`setInputManager`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/IInteractiveZonesHandler.md#setinputmanager)

##### setOffset()

```ts
setOffset(offset): void;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `offset` | `PointF` |

###### Returns

`void`

###### Implementation of

[`IInteractiveZonesHandler`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/IInteractiveZonesHandler.md#iinteractivezoneshandler).[`setOffset`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/IInteractiveZonesHandler.md#setoffset)

##### setSelectionHandler()

```ts
setSelectionHandler(selection): void;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `selection` | [`ISelectionHandler`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ISelectionHandler.md#iselectionhandler) |

###### Returns

`void`

###### Implementation of

[`IInteractiveZonesHandler`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/IInteractiveZonesHandler.md#iinteractivezoneshandler).[`setSelectionHandler`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/IInteractiveZonesHandler.md#setselectionhandler)

##### setStyles()

```ts
setStyles(styles): void;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `styles` | [`IInteractiveZonesStyles`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ICanvasStyle.md#iinteractivezonesstyles) |

###### Returns

`void`

###### Implementation of

[`IInteractiveZonesHandler`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/IInteractiveZonesHandler.md#iinteractivezoneshandler).[`setStyles`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/IInteractiveZonesHandler.md#setstyles)

##### setTextWhizz()

```ts
setTextWhizz(textWhizz): void;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `textWhizz` | `any` |

###### Returns

`void`

###### Implementation of

[`IInteractiveZonesHandler`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/IInteractiveZonesHandler.md#iinteractivezoneshandler).[`setTextWhizz`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/IInteractiveZonesHandler.md#settextwhizz)