Using TypeScript

Zoomist is built with TypeScript, so you can easily use Zoomist in your TypeScript projects.

For example:

import Zoomist from 'zoomist'
import { ZoomerOptions } from 'zoomist/types'


const options: ZoomistOptions = {
  slider: true,
  zoomer: true
}


const zoomist = new Zoomist('.zoomist-container', options)

Options types

You can import types from 'zoomist/types'

Here’s some options types you may need:

ZoomistOptions

interface ZoomistOptions {
  draggable?: boolean
  wheelable?: boolean
  pinchable?: boolean
  bounds?: boolean
  zoomRatio?: number
  minScale?: number
  maxScale?: number
  initScale?: number | null
  dragReleaseOnBounds: boolean
  wheelReleaseOnMinMax: boolean
  disableDraggingClass: string
  disableWheelingClass: string
  smooth: boolean | SmoothOptions
  slider?: boolean | SliderOptions
  zoomer?: boolean | ZoomerOptions
  on?: {
    [event in EventTypes]?: EventOptions[event]
  }
}

SmoothOptions

interface SmoothOptions {
  damping: number
}

SliderOptions

interface SliderOptions {
  el: HTMLElement | string | null
  direction: 'horizontal' | 'vertical'
}

ZoomerOptions

interface ZoomerOptions {
  el: string | HTMLElement | null
  inEl: string | HTMLElement | null
  outEl: string | HTMLElement | null
  resetEl: string | HTMLElement | null
  disabledClass: string | false | null
}

EventOptions

interface EventOptions {
  drag: (zoomist: Zoomist, transform: { x: number; y: number }, event: Event) => void
  dragStart: (zoomist: Zoomist, transform: { x: number; y: number }, event: Event) => void
  dragEnd: (zoomist: Zoomist, transform: { x: number; y: number }, event: Event) => void
  pinch: (zoomist: Zoomist, scale: number, event: Event) => void
  pinchStart: (zoomist: Zoomist, scale: number, event: Event) => void
  pinchEnd: (zoomist: Zoomist, scale: number, event: Event) => void
  slide: (zoomist: Zoomist, value: number, event: Event) => void
  slideStart: (zoomist: Zoomist, value: number, event: Event) => void
  slideEnd: (zoomist: Zoomist, value: number, event: Event) => void
  wheel: (zoomist: Zoomist, scale: number, event: WheelEvent) => void
  zoom: (zoomist: Zoomist, scale: number) => void
  ready: (zoomist: Zoomist) => void
  reset: (zoomist: Zoomist) => void
  resize: (zoomist: Zoomist) => void
  beforeDestroy: (zoomist: Zoomist) => void
  destroy: (zoomist: Zoomist) => void
  beforeUpdate: (zoomist: Zoomist) => void
  update: (zoomist: Zoomist) => void
}

Properties types

After Zoomist initialized, you can get some data from instance properties.

If you need types for data:

zoomist.transform

interface ZoomistTransfrom {
  scale: number
  translateX: number
  translateY: number
}

zoomist.states

interface ZoomistStates {
  dragging?: boolean
  pinching?: boolean
  wheeling?: boolean
}

zoomist.data

interface ZoomistData {
  imageData: ImageData
  containerData: ContainerData
  dragData?: DragData
  touchData?: touchData
}