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

  • Called when the tool is removed/when the editor is destroyed. Subclasses that override this method must call super.onDestroy().

    Returns void

  • 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.

    Parameters

    Returns void

  • 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