DrawerPen

DrawerPen is an open-source, cross-platform on-screen annotation tool built with Tauri v2 (Rust) and React. It provides a transparent always-on-top overlay for annotating over any content with low latency.

Features

• Transparent overlay window with annotate and click-through modes
• Pen, highlighter, eraser, shapes (rectangle/line/arrow), text placeholders
• Undo/redo, clear canvas, draggable toolbar
• Session save/load with forward-compatible JSON
• Global hotkeys (toggle overlay/mode, tool selection)
• Tray integration for quick toggles
• Multi-monitor ready overlay configuration

Repo structure

• src/ – React frontend
  • core/ – stroke model, state, drawing engine
  • ui/ – overlay canvas and toolbar UI
  • platform/ – frontend hooks for platform integration
• src-tauri/ – Rust backend for windowing, tray, hotkeys
• .github/workflows/ – CI for build/test
• src/tests/ – unit tests (Vitest)

Development setup

1. Install Rust and Node.js 18+.
2. Install dependencies: npm install.
3. Run frontend + Tauri dev: npm run tauri (starts Vite + Tauri). If only frontend: npm run dev.
4. Run tests: npm run test.

Build

• Frontend: npm run build (outputs to dist/).
• Desktop app: npm run tauri build (requires platform toolchains; produces OS-specific bundles).

Safe hotkeys

• Toggle overlay: Ctrl+Shift+O
• Toggle annotate/passive: Ctrl+Shift+E
• Pen: P, Highlighter: H, Eraser: E
• Undo/Redo: Ctrl+Z / Ctrl+Shift+Z
• Clear: Ctrl+Shift+C

Accessibility

• High-contrast toolbar, keyboard shortcuts for all primary actions, focusable buttons, and click-through mode to avoid trapping input.

Roadmap

• Phase 2: full shapes, arrows, text editing, color/thickness sliders
• Phase 3: laser pointer, spotlight, whiteboard background toggle
• Phase 4: screenshot/export (merged & transparent), settings UI for hotkeys
• Phase 5: performance tuning, multi-monitor polish, installers
• Phase 6: expanded tests, CI matrix, release automation

Packaging

• Windows: npm run tauri build (requires MSVC + Webview2). Generates .msi.
• macOS: npm run tauri build (requires Xcode CLT). Generates .app + .dmg.
• Linux: npm run tauri build (requires libwebkit packages). Generates .AppImage/.deb.

Known limitations

• Shapes/text are placeholders (basic rendering only).
• No screenshot/export yet; stubs only.
• Multi-monitor window spawning uses primary display; secondary support pending.
• Hotkey customization UI not implemented yet.

Contributing

See CONTRIBUTING.md for guidelines. MIT licensed.