Class PanZoomTool

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, a PanZoom tool with mode = PanZoomMode.TwoFingerTouchGestures|PanZoomMode.RightClickDrags would respond to right-click drag events and two-finger touch gestures.

Hierarchy (View Summary)

Constructors

Properties

description: string

Methods

  • Changes the types of gestures used by this pan/zoom tool.

    Parameters

    Returns void

    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);
    
OpenSource licenses