1. 1
2. 2
3. 3
4. 4
5. 5
6. 6
7. 7
8. 8
9. 9
10. 10
11. 11
12. 12
13. 13
14. 14
15. 15
16. 16
17. 17
18. 18
19. 19
20. 20
21. 21
22. 22
23. 23
24. 24
25. 25
26. 26
27. 27
28. 28
29. 29
30. 30
31. 31
32. 32
33. 33
34. 34

# FrameCanvas internals

## <kbd>Space</kbd> key drag mode state machine

In `Dragging` state, pointer movements cause viewport pan.

```mermaid
stateDiagram-v2
  [*] --> Disabled
  Idle --> Dragging: pointerdown
  Dragging --> Idle: pointerup
  Dragging --> Disabled: keyup
  Disabled --> Idle: keydown
```

## Touch gesture state machine

In `Panning` state, touch movements cause viewport pan.

In `Scaling` state, touch movements cause viewport scaling.
Scaling factor depends on distance between touch points.

```mermaid
stateDiagram-v2
  [*] --> Idle
  Idle --> Touching: touchstart
  Touching --> Idle: touchend (touches = 0), touchcancel
  state Touching {
    [*] --> Panning: touches = 1
    [*] --> Scaling: touches >= 2
    Panning --> Scaling: touchstart (touches >= 2)
    Scaling --> Panning: touchend (touches = 1)
  }
```