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: 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)

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)

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