react-svg-pan-zoom.d.ts

react-svg-pan-zoom.d.ts

declare module 'react-svg-pan-zoom' {

  import * as React from 'react'

  type Tool = 'auto' | 'none' | 'pan' | 'zoom-in' | 'zoom-out'
  type ToolBarPosition = 'none' | 'top' | 'right' | 'bottom' | 'left'

  export const ReactSVGPanZoom: ReactSVGPanZoom

  interface ReactSVGPanZoom extends React.ComponentClass<ReactSVGPanZoomProps> {}
  export class ReactSVGPanZoomComponent extends React.Component<ReactSVGPanZoomProps, {}> {
    pan(SVGDeltaX: number, SVGDeltaY): void
    zoom(SVGPointX: number, SVGPointY: number, scaleFactor: number): void
    fitSelection(selectionSVGPointX: number, selectionSVGPointY: number, selectionWidth: number, selectionHeight: number): void
    fitToViewer(): void
    setPointOnlyViewerCenter(SVGPointX: number, SVGPointY: number, zoomLevel: number): void
    reset(): void
    zoomOnViewerCenter(scaleFactor: number): void
    getValue(): Value
    setValue(value: Value): void
    getTool(): Tool
    setTool(tool: Tool): void
  }

  export interface ReactSVGPanZoomProps extends React.Props<ReactSVGPanZoomComponent> {
    width: number
    height: number
    background?: string
    SVGBackground?: string
    value?: Value
    style?: Object
    className?: string
    detectWheel?: boolean
    detectAutoPan?: boolean
    toolbarPosition?: ToolBarPosition
    onChangeValue?(value: Value): void
    onChangeTool?(tool: Tool): void
    onClick?(e: ViewerMouseEvent): void
    onDoubleClick?(e: ViewerMouseEvent): void
    onMouseUp?(e: ViewerMouseEvent): void
    onMouseMove?(e: ViewerMouseEvent): void
    onMouseDown?(e: ViewerMouseEvent): void
    onTouchStart?(e: ViewerTouchEvent): void
    onTouchMove?(e: ViewerTouchEvent): void
    onTouchEnd?(e: ViewerTouchEvent): void
    onTouchCancel?(e: ViewerTouchEvent): void
    tool?: Tool
    modifierKeys?: string[]
    customToolber?: Function
  }

  export interface Value {
    version: number
    mode: 'idle' | 'panning' | 'zooming'
    focus: boolean
    a: number
    b: number
    c: number
    d: number
    e: number
    f: number
    viewerWidth: number
    viewerHeight: number
    SVGWidth: number
    SVGHeight: number
    startX?: number
    startY?: number
    endX?: number
    endY?: number
  }

  interface ViewerEvent {
    originalEvent: UIEvent
    SVGViewer: SVGViewElement
    scaleFactor: number
    translationX: number
    translationY: number
    preventDefault(): void
    stopPropagation(): void
  }

  export interface ViewerMouseEvent extends ViewerEvent {
    point: {
      x: number
      y: number
    }
    x: number
    y: number
  }

  export interface ViewerTouchEvent extends ViewerEvent {
    points: {
      x: number
      y: number
      identifier: number
    }[]
    changedPoints: {
      x: number
      y: number
      identifier: number
    }[]
  }

}