RunicGateway/docs
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Hero Phase 3: element select / drag / edit (text_block + buttons)

Browse Source 
Third phase of the hero canvas editor (see HERO_EDITOR.md).

- HeroElement: editor mode — inner content made non-interactive so the wrapper
  handles select/drag; selection outline; box width now canvas-relative
  (calc(100% - 36px)) so text blocks fit the smaller editor canvas
- HeroEditor: element tray (+ Text / + Buttons), click-to-select, native
  Pointer Events drag (position as % of the canvas, clamped), Delete key + panel
  delete, z-order (send back / bring forward), and per-type property panels:
  - text_block: per-line text / tag / font size (px) / color / bold, add+remove
    lines, alignment
  - buttons: per-item label / path / variant, add+remove, alignment
  empty-canvas click deselects (back to the background panel)
- theme.css: .hero-el-editable outline/hover/selected + grid helper

Verified in-browser: selecting shows the line editor, editing updates the canvas
live, drag repositions, add/delete and z-order work, deselect returns to the
background panel; no console errors. Moon/badge/image + resize + snap are Phase 4.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Colby Whitlock
2026-06-28 08:40:52 -05:00
parent 3b076df09b
commit 0cb19a08d5
1 changed files with 7 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
website/HERO_EDITOR.md
View File

@@ -108,9 +108,13 @@ layout adapts across viewports without breakpoint data. `version` is validated
reads the draft (admin) with a banner; revert. Verified: overlay/position update reads the draft (admin) with a banner; revert. Verified: overlay/position update
the canvas, auto-save writes the draft, publish writes live, preview shows the the canvas, auto-save writes the draft, publish writes live, preview shows the
draft while the normal portal shows live. draft while the normal portal shows live.
- **Phase 3 — Elements: select / drag / text_block / buttons.** Add/select/move - **Phase 3 — Elements: select / drag / text_block / buttons** ✅ (verified
(native pointer)/delete/z-order; text_block + buttons property panels. *Exit:* 2026-06-28). Element tray (+ Text / + Buttons); click-to-select with outline;
add a heading + CTA row, drag to place, publish, see it live. native Pointer Events drag (% of canvas); Delete key + panel delete; z-order
(send back / bring forward); text_block line editor (text/tag/size/color/bold,
add/remove lines, align) and buttons editor (label/path/variant, add/remove).
Verified: select shows the line editor, editing a line updates the canvas live,
drag moved 50%→65%, add→3/delete→2 elements, empty-canvas click deselects.
- **Phase 4 — moon + badge + image + resize + snap grid.** Remaining element types, - **Phase 4 — moon + badge + image + resize + snap grid.** Remaining element types,
resize handles, 8px snap. *Exit:* place a moon and an uploaded image, resize, publish. resize handles, 8px snap. *Exit:* place a moon and an uploaded image, resize, publish.