← Cycles
Qpixel · c2
Diagramming & Text
archivedcreated 2026-04-15· last activity 2026-08-15
Why
The editor was limited to block art — no way to draw connections, label things, or type text. To be useful for diagrams (boxes, flowcharts, labeled icons), it needed line-drawing primitives, a text input tool, and selection/copy/paste for repositioning.
Objective
Add diagramming character palette, a text typing tool, canvas nudge controls, and selection-based copy/paste.
Scope
- Box-drawing character palette (lines, heavy, double, rounded, dashed, arrows)
- Text tool with keyboard input and cursor
- Canvas nudge (shift content up/down/left/right)
- Select tool with drag-to-select, auto-copy, click-to-paste
Key Changes
- Diagramming palette — 7 new character groups: lines (light), heavy, double, rounded corners, dashed, arrows, diagonals
- Text tool — click to place blinking cursor, type characters left-to-right in active color, arrow keys to move, Backspace to delete, Enter for next row, Escape to exit. Supports clipboard paste for multi-char text.
- Palette auto-switches to paint — selecting any character in the palette switches the active tool to paint
- Nudge controls — 4 arrow buttons beneath size sliders to shift entire canvas content by one cell in any direction
- Select tool — drag to highlight a rectangular region, auto-copies on mouse release, next click pastes at that position (empty cells are skipped to preserve background). Cut mode checkbox clears the source region on paste.
- Design system colors — color palette expanded from 6 swatches to full Grape/Leaf/Grey ramps plus semantic colors (error, warning, blue)
- Preview font — switched to Menlo with emoji fallback stack, tuned line-height (1.03)
Outcome
Editor now supports diagramming workflows: draw boxes with line characters, label with the text tool, reposition content with nudge or select/copy/paste (with cut). The tool type expanded from 3 to 5 (paint, recolor, text, select, erase). Color palette aligned to the Qpoint design system.