Returns a ReactiveValue that updates based on whether this tool is enabled.
Returns a bitmask indicating the currently-enabled modes.
Returns true iff the tool handled the event and thus should receive additional events.
Returns true iff there are additional pointers down and the tool should remain active to handle the additional events.
For most purposes, this should return false
or nothing.
Sets all modes for this tool using a bitmask.
Changes the types of gestures used by this pan/zoom tool.
import { Editor, PanZoomTool, PanZoomMode } from 'js-draw'; const editor = new Editor(document.body); // By default, there are multiple PanZoom tools that handle different events. // This gets all PanZoomTools. const panZoomToolList = editor.toolController.getMatchingTools(PanZoomTool); // The first PanZoomTool is the highest priority -- by default, // this tool is responsible for handling multi-finger touch gestures. // // Lower-priority PanZoomTools handle one-finger touch gestures and // key-presses. const panZoomTool = panZoomToolList[0]; // Lock rotation for multi-finger touch gestures. panZoomTool.setModeEnabled(PanZoomMode.RotationLocked, true);
Connect this tool to a set of other tools, ensuring that at most one of the tools in the group is enabled.
This tool moves the viewport in response to touchpad, touchscreen, mouse, and keyboard events.
Which events are handled, and which are skipped, are determined by the tool's
mode
. For example, aPanZoom
tool withmode = PanZoomMode.TwoFingerTouchGestures|PanZoomMode.RightClickDrags
would respond to right-click drag events and two-finger touch gestures.See
setModeEnabled