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.
Signature:
export interface PanZoomOptions
Properties
| Property | Modifiers | Type | Description |
|---|---|---|---|
| background? | Background | (Optional) Optional background. Can also be set via setBackground(..) | |
| canvasElement | Element | The 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. | |
| directRender? | boolean | (Optional) | |
| 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. | |
| 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. | |
| getOffset | (el: Element) => 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. | |
| getOffsetRelativeToRoot | (el: Element) => PointXY | A function that can return the x,y location of the given element, relative to the document origin | |
| getSize | (el: Element) => Size | Gets the size of some element | |
| idFunction | (e: Element) => string | Function the widget can use to derive an ID for the given element. | |
| 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. | |
| viewport | Viewport<{ E: Element; }> | ||
| viewportElement | Element | The element that will act as the viewport for the canvas. | |
| wheel | WheelOptions | Options for the wheel. | |
| zoom? | number | (Optional) Initial zoom for the widget. Defaults to 1. | |
| zoomRange? | ZoomRange | (Optional) Zoom range for the widget. Defaults to [0.05, 3]. |