Pan and Zoom

Allows you to zoom in on an element.

Usage

new zoom(zoomOptions)

Basic implementation

const grid = new zoom({ element: '.grid' });

zoomOptions

interface ZoomOptions {
    element: string,
    minZoom?: number,
    maxZoom?: number,
    zoomFactor?: number,
    onZoom?: Function
}

element

Type:

type element = string

The element selector.

minZoom

Type:

type minZoom = number

default: 0.1

How much you can zoom out of the element.

maxZoom

Type:

type maxZoom = number

default: Inifinity

How much you can zoom in on the element.

zoomFactor

Type:

type zoomFactor = number

default: 0.1

By how much to zoom in or out of the element.

onZoom

Type:

type onZoom = () => void;

Executes when the element zooms in or out.

Properties

actionName readonly

Type:

type actionName = string

The name of the action that can be used to programmatically zoom the element.

touchEnabled

Type:

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:

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.

interface ZoomAction {
    x: number;
    y: number;
    zoomDirection: number;
}