coherent-gameface-interaction-manager
Version:
Library for the most common UI interactions
139 lines (88 loc) • 2.13 kB
text/mdx
---
title: Pan and Zoom
---
import IMExample from '@components/IMExample.astro';
import { Badge } from '@astrojs/starlight/components';
Allows you to zoom in on an element.
## Usage
```ts
new zoom(zoomOptions)
```
## Basic implementation
```ts
const grid = new zoom({ element: '.grid' });
```
<IMExample path="/im-demo/demo/Zoom/pan-zoom.html" height="600"/>
## zoomOptions
```ts
interface ZoomOptions {
element: string,
minZoom?: number,
maxZoom?: number,
zoomFactor?: number,
onZoom?: Function
}
```
### element
Type:
```ts
type element = string
```
The element selector.
### minZoom
Type:
```ts
type minZoom = number
```
`default: 0.1`
How much you can zoom out of the element.
### maxZoom
Type:
```ts
type maxZoom = number
```
`default: Inifinity`
How much you can zoom in on the element.
### zoomFactor
Type:
```ts
type zoomFactor = number
```
`default: 0.1`
By how much to zoom in or out of the element.
### onZoom
Type:
```ts
type onZoom = () => void;
```
Executes when the element zooms in or out.
## Properties
### actionName <Badge text="readonly" size="medium" variant="note" />
Type:
```ts
type actionName = string
```
The name of the action that can be used to programmatically zoom the element.
### touchEnabled
Type:
```ts
type touchEnabled = boolean
```
Enables or disables touch events. Default is `false`.
## Methods
### deinit()
Removes the event listeners and disables the zoom functionality.
## Actions
You are able to zoom elements using actions. Since every zoom action is unique you can do the following:
```ts
const element = new zoom({ element: '.grid' });
actions.execute(element.actionName, {x: 100, y: 100, zoomDirection: -1});
```
Where you need to provide the x and y coordinates of the element, where you want to zoom to and the `zoomDirection` which can be -1 for zoom out and 1 for zoom in.
```ts
interface ZoomAction {
x: number;
y: number;
zoomDirection: number;
}
```