49 lines
3.5 KiB
Markdown
49 lines
3.5 KiB
Markdown
# OMR Metadata Creator — Features
|
||
|
||
## Core
|
||
- **Load template image** (JPG/PNG) via dialog, drag-and-drop, or click placeholder
|
||
- **Load existing metadata.json** to edit previous work
|
||
- **Manual ROI (Section) drawing** via click-and-drag on canvas with live preview grid
|
||
- **Multiple blocks**, each with multiple sections
|
||
- **Section move** — drag any section on canvas (manual stage-level interaction, no Konva artifacts)
|
||
- **Section resize** — 8 circular handles (4 corners + 4 edge midpoints) with directional cursors
|
||
- **Default rows/cols** — set before drawing so the preview grid appears during draw
|
||
- **Live grid preview** (dashed red) inside section boxes during draw and resize
|
||
- **Grid lines** (dashed red) shown inside sections based on rows×columns
|
||
- **Zoom**: 15%–500% via toolbar buttons, Ctrl+scroll, or 1:1 reset
|
||
- **Scroll/pan**: scroll wheel (vertical), Shift+scroll (horizontal), middle-mouse drag (any tool mode), Pan tool (left-click drag)
|
||
- **Undo** (Ctrl+Z) — full state snapshots up to 50 deep
|
||
- **Quick range generation** for Options/QCount using `parseRangeInput`: `1-9`, `A-D`, comma-separated like `1-5,8,10-12`
|
||
- **Keyboard shortcuts**: S/D/P (tools), Del/Backspace (delete section), Ctrl+O (load template), Ctrl+S (export), Ctrl+Z (undo)
|
||
- **Clear workspace** with undo support
|
||
|
||
## Validation & Export
|
||
- **Validation**: checks template dimensions, block/section existence, coordinate validity, row/col/align consistency, matrix options shape
|
||
- **Export metadata.json** — valid JSON for the OMR pipeline (Electron native dialog or browser download)
|
||
- **Web-compatible** — export works in both Electron mode (native dialog) and browser dev mode (Blob download)
|
||
|
||
## UI / Layout (React/Electron — Stitch design system dark theme)
|
||
- **Dark theme** with full Material 3 Stitch token palette (surface, primary, secondary, error, outline variants)
|
||
- **Toolbar** (56px): tool buttons (Select/Draw/Pan) with active highlight, centered zoom slider in pill container, Load Template/Load metadata/Export, +Block, Undo, Clear
|
||
- **Left sidebar** (280px): blocks listed with 3px active left border, block delete on hover, sections indented with radio icons, stats footer
|
||
- **Properties panel** (320px): live-editable fields with commit-on-blur for coords, block type selector, rows/cols, align type, Options/QCount with Generate buttons, MC Limit, Advanced Config (fill threshold, whitepatch, padding, shape)
|
||
- **Canvas**: Konva-based with template image, section overlays (per-block colors), grid preview, 8 circular resize handles, dynamic cursors, middle-mouse pan, scroll-to-pan
|
||
- **Status bar** (32px): green status dot, system message, zoom percentage, block/section indicator
|
||
- **Selection sync** between sidebar ↔ canvas (click block → highlight; click section → select)
|
||
- **File drop overlay** — drag-and-drop files onto canvas area (image→template, JSON→metadata)
|
||
|
||
## Range Parser
|
||
- Supports ranges: `A-D`, `1-10`, `-1--9` (negative numbers)
|
||
- Comma-separated mixed: `A-D, E, F-H`
|
||
- JSON array: `["A","B","C"]`
|
||
- Used by both Options and Question Count Generate buttons
|
||
|
||
## Architecture
|
||
- **Electron** main process with IPC handlers for file dialogs, read/write, image base64
|
||
- **React 18** + **TypeScript** — strict typing, no `any`
|
||
- **Zustand** for state management with undo stack
|
||
- **react-konva** for canvas interactions
|
||
- **Tailwind CSS v4** with 40+ Stitch design tokens
|
||
- **vite-plugin-electron** for dev hot-reload
|
||
- **Web-compatible** — most features work in browser mode (`pnpm dev:web`) via `<input>` fallbacks and Blob download
|