Skip to main content

Home > @jsplumbtoolkit/browser-ui > PanZoomOptions

PanZoomOptions interface#

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.


export interface PanZoomOptions 


background?BackgroundOptions(Optional) Optional background image parameters
canvasElementElementThe element to apply pan/zoom to.
clamp?boolean(Optional) Whether to clamp when panning such that there is always content visible. Defaults to true.
clampToBackground?boolean(Optional) 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.
clampToBackgroundExtents?boolean(Optional) Clamps movement so that when zoomed out, the background image always fills the viewport. Defaults to false.
clampZoom?boolean(Optional) Whether to clamp when zooming such that there is always content visible. Defaults to true.
consumeRightClick?boolean(Optional) Useful for development: set this to false if you don't want the widget to consume context menu clicks.
enableAnimation?boolean(Optional) Enable animations for panning. Defaults to true.
enabled?boolean(Optional) Whether or not the widget is enabled, ie. responding to mouse input. Defaults to true.
enablePan?boolean(Optional) Whether or not pan is enabled. Defaults to true.
enableWheelZoom?boolean(Optional) Whether or not wheel zoom is enabled. Defaults to true.
events?{ zoom?: Function; pan?: Function; mouseup?: Function; mousedown?: Function; maybeZoom?: Function; mousemove?: Function; transformOrigin?: Function; }(Optional) Optional map of event handlers
filter?Function(Optional) 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.
idFunction(e: Element) => stringFunction the widget can use to derive an ID for the given element.
padding?[number, number](Optional) Optional values for padding in the x/y axes to leave around the content. This is only of any use if you have disabled panning via mouse drag, since in that case the user sees only scroll bars and has no way of navigating beyond the content. Some padding makes the UI nicer to use. Default is [0,0].
panDistance?number(Optional) How far, in pixels, to pan on pan nudge. Defaults to 50 pixels.
smartMinimumZoom?boolean(Optional) 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.
viewportViewport<{ E: Element; }>
viewportElementElementThe element that will act as the viewport for the canvas.
wheelFilter?(e: MouseEvent) => boolean(Optional) Optional function to call to check if wheel zooming should be enabled for the current event target.
wheelReverse?boolean(Optional) Defaults to false. If true, the zoom direction is reversed: wheel up zooms out, and wheel down zooms in.
wheelZoomMetaKey?boolean(Optional) If true, the "meta" key (CMD on Mac, Ctrl on windows/linux) must be pressed in order for wheel zoom to operate. This can be useful if your UI fills the screen in one or more axes and your users would not be able to scroll past the Surface widget.
zoom?number(Optional) Initial zoom for the widget. Defaults to 1.
zoomRange?ZoomRange(Optional) Zoom range for the widget. Defaults to [0.05, 3].