Learnify - Tool Selector Modes - Select/Hand Toggle

Overview

The tool selector allows switching between Select mode (default) and Hand mode (pan) for navigating the canvas.

Key File

  • Location: /blocksuite/affine/gfx/pointer/src/quick-tool/default-tool-button.ts
  • Main Function: _changeTool() (lines 24-48)

Mode Types

  1. Select Mode (Default Tool)

    • Icon: SelectIcon()
    • Used for selecting and editing elements
    • Keyboard shortcut: V

  2. Hand Mode (Pan Tool)

    • Icon: HandIcon()
    • Used for panning/dragging the canvas
    • Keyboard shortcut: H
    • Implementation: /blocksuite/affine/gfx/pointer/src/tools/pan-tool.ts

Toggle Logic

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
_changeTool() {
  const type = this.edgelessTool?.toolType?.toolName;
  
  // If neither mode active, restore last used tool
  if (!['default', 'pan'].includes(type)) {
    // Restore from localStorage
  }
  
  // Toggle between modes
  if (type === 'default') {
    this.setEdgelessTool(PanTool, { panning: false });
  } else {
    this.setEdgelessTool(DefaultTool);
  }
}

Tool Controller

  • Main controller: /blocksuite/framework/std/src/gfx/tool/tool-controller.ts
  • Key method: setTool()

Visual Feedback

The button icon changes based on current mode:

  • Select mode shows selection cursor icon
  • Hand mode shows hand/grab icon