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

# IInteractiveZonesHandler

> `RectangleF`[]

## Interfaces

### IInteractiveZonesHandler

#### Properties

##### activeZone

```ts
activeZone: InteractiveZone;
```

##### currentSurface

```ts
currentSurface: Surface;
```

##### highlightZone

```ts
highlightZone: InteractiveZone;
```

##### interactiveZones

```ts
interactiveZones: InteractiveZone[];
```

##### stateChangedEvent

```ts
stateChangedEvent: EventObject<IInteractiveZonesStateChangedEventArgs>;
```

#### Methods

##### getSnapLines()

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

###### Returns

##### getZoneBounds()

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

###### Parameters

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

###### Returns

`RectangleF`

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

##### isReady()

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

###### Returns

`boolean`

##### setInputManager()

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

###### Parameters

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

###### Returns

`any`

##### setOffset()

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

###### Parameters

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

###### Returns

`any`

##### setSelectionHandler()

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

###### Parameters

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

###### Returns

`unknown`

##### setStyles()

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

###### Parameters

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

###### Returns

`any`

##### setTextWhizz()

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

###### Parameters

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

###### Returns

`any`

***

### IInteractiveZonesStateChangedEventArgs

#### Properties

##### active

```ts
active: InteractiveZone;
```

##### highlighted

```ts
highlighted: InteractiveZone;
```