Interface PanZoomOptions

Options for the PanZoom widget. This widget is used internally by the Toolkit and is not something users of the library will need to interact with.

interface PanZoomOptions {
    background?: Background;
    canvasElement: Element;
    clamp?: boolean;
    clampToBackground?: boolean;
    clampToBackgroundExtents?: boolean;
    clampZoom?: boolean;
    consumeRightClick?: boolean;
    enableAnimation?: boolean;
    enablePan?: boolean;
    enabled?: boolean;
    events?: {
        maybeZoom?: Function;
        mousedown?: Function;
        mousemove?: Function;
        mouseup?: Function;
        pan?: Function;
        transformOrigin?: Function;
        zoom?: Function;
    };
    filter?: Function;
    getOffset: ((el) => PointXY);
    getOffsetRelativeToRoot: ((el) => PointXY);
    getSize: ((el) => Size);
    idFunction: ((e) => string);
    panDistance?: number;
    panFilter?: ((el) => boolean);
    panWithMetaKey?: boolean;
    smartMinimumZoom?: boolean;
    viewportElement: Element;
    wheel: WheelOptions;
    zoom?: number;
    zoomRange?: ZoomRange;
}

Properties

background? canvasElement clamp? clampToBackground? clampToBackgroundExtents? clampZoom? consumeRightClick? enableAnimation? enablePan? enabled? events? filter? getOffset getOffsetRelativeToRoot getSize idFunction panDistance? panFilter? panWithMetaKey? smartMinimumZoom? viewportElement wheel zoom? zoomRange?

Properties

Optional background

background?: Background

Optional background. Can also be set via setBackground(..)

canvasElement

canvasElement: Element

The element to apply pan/zoom to.

Optional clamp

clamp?: boolean

Whether to clamp when panning such that there is always content visible. Defaults to true.

Optional clampToBackground

clampToBackground?: boolean

Whether or not to clamp to the background image. This flag means the widget will always ensure at least some of the background is visible. See clampToBackgroundExtents for a variant of this. Defaults to false.

Optional clampToBackgroundExtents

clampToBackgroundExtents?: boolean

Clamps movement so that when zoomed out, the background image always fills the viewport. Defaults to false.

Optional clampZoom

clampZoom?: boolean

Whether to clamp when zooming such that there is always content visible. Defaults to true.

Optional consumeRightClick

consumeRightClick?: boolean

Useful for development: set this to false if you don't want the widget to consume context menu clicks.

Optional enableAnimation

enableAnimation?: boolean

Enable animations for panning. Defaults to true.

Optional enablePan

enablePan?: boolean

Whether or not pan is enabled. Defaults to true.

Optional enabled

enabled?: boolean

Whether or not the widget is enabled, ie. responding to mouse input. Defaults to true.

Optional events

events?: {
    maybeZoom?: Function;
    mousedown?: Function;
    mousemove?: Function;
    mouseup?: Function;
    pan?: Function;
    transformOrigin?: Function;
    zoom?: Function;
}

Optional map of event handlers

Type declaration

  • Optional maybeZoom?: Function

    Optional interceptor for zoom. Returning false prevents zoom from occurring.

  • Optional mousedown?: Function

    Optional function callback for mousedown event.

  • Optional mousemove?: Function

    Optional function callback for mousemove event.

  • Optional mouseup?: Function

    Optional function callback for mouseup event.

  • Optional pan?: Function

    Optional function callback for when pan changes.

  • Optional transformOrigin?: Function

    Optional function callback for transform origin change. This is given the [x,y] (in percent) of the new origin, and the [left, top] (in absolute values) of the canvas.

  • Optional zoom?: Function

    Optional function callback for when zoom changes.

Optional filter

filter?: Function

Optional filter that will be called on down event, with the event target and the event. Returning true from this function means the widget should respond to the event.

getOffset

getOffset: ((el) => PointXY)

A function that can return the x,y location of the given element, relative to the origin of the canvas the pan zoom is controlling.

Type declaration

getOffsetRelativeToRoot

getOffsetRelativeToRoot: ((el) => PointXY)

A function that can return the x,y location of the given element, relative to the document origin

Type declaration

getSize

getSize: ((el) => Size)

Gets the size of some element

Type declaration

    • (el): Size

    • Parameters

      • el: Element

      Returns Size

idFunction

idFunction: ((e) => string)

Function the widget can use to derive an ID for the given element.

Type declaration

    • (e): string

    • Parameters

      • e: Element

      Returns string

Optional panDistance

panDistance?: number

How far, in pixels, to pan on pan nudge. Defaults to 50 pixels.

Optional panFilter

panFilter?: ((el) => boolean)

Optional function which is called at the start of panning and can return false to reject pan starting.

Type declaration

    • (el): boolean

    • Parameters

      • el: Element

      Returns boolean

Optional panWithMetaKey

panWithMetaKey?: boolean

Defaults to false. When true, user must hold down meta key (ctrl on windows) to pan.

Optional smartMinimumZoom

smartMinimumZoom?: boolean

NOT IMPLEMENTED. This is a placeholder for possible future functionality, which will mean that the lower zoom bound refers to a multiple of the content bounds, not the viewport.

viewportElement

viewportElement: Element

The element that will act as the viewport for the canvas.

wheel

wheel: WheelOptions

Options for the wheel.

Optional zoom

zoom?: number

Initial zoom for the widget. Defaults to 1.

Optional zoomRange

zoomRange?: ZoomRange

Zoom range for the widget. Defaults to [0.05, 3].

Settings

Member Visibility

Theme

On This Page

backgroundcanvasElementclampclampToBackgroundclampToBackgroundExtentsclampZoomconsumeRightClickenableAnimationenablePanenabledeventsfiltergetOffsetgetOffsetRelativeToRootgetSizeidFunctionpanDistancepanFilterpanWithMetaKeysmartMinimumZoomviewportElementwheelzoomzoomRange