Pan Buttons

Provides the buttons around the perimeter of the Surface canvas that allow the user to nudge the pan.

Setup

Vanilla JS

React

Angular

Vue

Svelte

import { newInstance,
	PanButtonsPlugin } from "@jsplumbtoolkit/browser-ui"

const toolkit = newInstance()
    
const surface = toolkit.render(someElement, {
  "plugins": [
    PanButtonsPlugin.type
  ]
});

Options

Interface PanButtonsPluginOptions

Name	Type	Description
panDistance	number	Amount in pixels to pan the surface by when one of the buttons is pressed and released. Defaults to 50.
panRepeatDistance?	number	Amount in pixels to adjust pan by each time the timer fires. Defaults to 10.
panRepeatInterval?	number	Time in milliseconds between successive adjustment to the pan. Defaults to 60.
startPanTimeout?	number	Time in milliseconds after the mouse button is pressed before panning should start. Defaults to 150.