ryan/stickman
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add visual harmonization tests for editor UI components and ground finish chooser

Browse Source 
- Implemented `test_editor_visual_harmonization.gd` to validate the Stickman editor and prop editor UI layouts, ensuring proper functionality and visual consistency.
- Created `test_editor_visual_theme.gd` to verify the loading and application of visual themes in the editor, including semantic overrides and default values.
- Introduced `test_phase19_ground_finish_chooser.gd` to test the ground finish chooser's functionality, including layout responsiveness, selection behavior, and interaction with the stage.
- Added new scripts for ground finish preview and chooser UI components to enhance the editor's visual representation of ground finishes.
This commit is contained in:
ryan
2026-10-23 15:20:12 -04:00
parent 0a5ef0a61e
commit ddb298f631
40 changed files with 3442 additions and 434 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/plans/assets/editor_visual_harmonization/phase0a_design_directions.svg
+191
View File
@@ -0,0 +1,191 @@
<svg xmlns="http://www.w3.org/2000/svg" width="1800" height="1260" viewBox="0 0 1800 1260" role="img" aria-labelledby="title desc">
<title id="title">Editor visual harmonization: three design directions</title>
<desc id="desc">A comparison board showing Familiar Studio, Adaptive Studio, and Focused Maker concepts for the Prop and Stickman Editors.</desc>
<defs>
<style>
.bg { fill: #171b24; }
.card { fill: #202633; stroke: #465064; stroke-width: 2; }
.card-rec { fill: #202b39; stroke: #22c6ff; stroke-width: 3; }
.surface { fill: #252b38; stroke: #596477; stroke-width: 1.5; }
.work { fill: #171d28; stroke: #657184; stroke-width: 1.5; }
.canvas { fill: #20232b; stroke: #7f8ca0; stroke-width: 1.5; }
.cyan { fill: #22c6ff; }
.cyan-stroke { stroke: #22c6ff; }
.blue { fill: #087dba; }
.muted { fill: #aab2c0; }
.text { fill: #f5f7fa; font-family: Arial, sans-serif; }
.small { font-size: 17px; }
.body { font-size: 20px; }
.label { font-size: 18px; font-weight: 700; }
.h2 { font-size: 30px; font-weight: 700; }
.title { font-size: 40px; font-weight: 700; }
.chip { fill: #2d3748; stroke: #596477; stroke-width: 1; }
.active-chip { fill: #103b4c; stroke: #22c6ff; stroke-width: 2; }
.line { stroke: #667286; stroke-width: 1.5; }
.accent-line { stroke: #22c6ff; stroke-width: 3; }
.selected { fill: none; stroke: #22c6ff; stroke-width: 3; }
.outline { fill: none; stroke: #f5f7fa; stroke-width: 2; }
.figure { fill: none; stroke: #aab2c0; stroke-width: 4; stroke-linecap: round; }
</style>
</defs>
<rect class="bg" width="1800" height="1260"/>
<text class="text title" x="48" y="62">Two editors, one visual language</text>
<text class="text body muted" x="48" y="98">Phase 0a · Three layout directions · Shared tokens and accessible states in every option</text>
<!-- Concept A -->
<g transform="translate(42,132)">
<rect class="card" width="556" height="1080" rx="20"/>
<text class="text h2" x="26" y="46">A. Familiar Studio</text>
<text class="text small muted" x="26" y="76">Keep today’s workspace arrangement</text>
<rect class="chip" x="26" y="94" width="176" height="34" rx="17"/>
<text class="text label small" x="42" y="117">LOWEST CHANGE</text>
<text class="text label" x="26" y="166">PROP EDITOR · WIDE</text>
<rect class="surface" x="26" y="180" width="504" height="260" rx="12"/>
<rect class="surface" x="36" y="190" width="484" height="38" rx="8"/>
<text class="text small" x="48" y="215">File Save <tspan fill="#aab2c0">Unsaved changes</tspan></text>
<rect class="active-chip" x="319" y="197" width="82" height="26" rx="13"/>
<text class="text small" x="330" y="216">Arrange</text>
<rect class="chip" x="405" y="197" width="68" height="26" rx="13"/>
<text class="text small" x="415" y="216">Reshape</text>
<rect class="chip" x="477" y="197" width="36" height="26" rx="13"/>
<text class="text small" x="484" y="216">…</text>
<rect class="canvas" x="36" y="237" width="322" height="192" rx="8"/>
<path class="figure" d="M196 278 L196 363 M196 297 L151 337 M196 297 L242 337 M196 363 L163 406 M196 363 L230 406"/>
<circle class="selected" cx="196" cy="278" r="16"/>
<rect class="surface" x="368" y="237" width="152" height="192" rx="8"/>
<text class="text small" x="381" y="263">Inspector</text>
<rect class="chip" x="380" y="275" width="128" height="34" rx="7"/>
<text class="text small" x="393" y="298">Fill color</text>
<rect class="chip" x="380" y="317" width="128" height="34" rx="7"/>
<text class="text small" x="393" y="340">Outline</text>
<rect class="blue" x="380" y="365" width="128" height="42" rx="9"/>
<text class="text small" x="403" y="392">Add Shape</text>
<text class="text label" x="26" y="484">STICKMAN EDITOR · WIDE</text>
<rect class="surface" x="26" y="498" width="504" height="330" rx="12"/>
<rect class="surface" x="36" y="508" width="484" height="35" rx="8"/>
<text class="text small" x="48" y="532">File Save View <tspan fill="#aab2c0">Saved</tspan></text>
<rect class="work" x="36" y="552" width="148" height="264" rx="8"/>
<rect class="work" x="194" y="552" width="148" height="264" rx="8"/>
<rect class="work" x="352" y="552" width="158" height="264" rx="8"/>
<text class="text small" x="48" y="577">Head · Torso</text>
<text class="text small" x="206" y="577">Arms · Legs</text>
<text class="text small" x="364" y="577">Whole Stickman</text>
<g fill="#252b38" stroke="#586477">
<rect x="46" y="591" width="58" height="62" rx="6"/><rect x="113" y="591" width="58" height="62" rx="6"/>
<rect x="46" y="662" width="58" height="62" rx="6"/><rect x="113" y="662" width="58" height="62" rx="6"/>
<rect x="46" y="733" width="58" height="62" rx="6"/><rect x="113" y="733" width="58" height="62" rx="6"/>
<rect x="204" y="591" width="58" height="62" rx="6"/><rect x="271" y="591" width="58" height="62" rx="6"/>
<rect x="204" y="662" width="58" height="62" rx="6"/><rect x="271" y="662" width="58" height="62" rx="6"/>
</g>
<rect class="selected" x="45" y="590" width="60" height="64" rx="7"/>
<path class="figure" d="M431 603 L431 708 M431 623 L405 651 M431 623 L457 651 M431 708 L411 760 M431 708 L451 760"/>
<text class="text small muted" x="26" y="858">Update styling, targets, focus, and dialogs;</text>
<text class="text small muted" x="26" y="882">keep all ten drawing panels visible.</text>
<line class="line" x1="26" y1="918" x2="530" y2="918"/>
<text class="text label" x="26" y="955">Tradeoff</text>
<text class="text body" x="26" y="986">Least workflow change. The ten small canvases</text>
<text class="text body" x="26" y="1014">stay dense; narrow windows may hide the preview.</text>
</g>
<!-- Concept B -->
<g transform="translate(622,132)">
<rect class="card-rec" width="556" height="1080" rx="20"/>
<text class="text h2" x="26" y="46">B. Adaptive Studio</text>
<text class="text small muted" x="26" y="76">Keep overview; add a workspace that can grow</text>
<rect class="active-chip" x="26" y="94" width="198" height="34" rx="17"/>
<text class="text label small" x="42" y="117">RECOMMENDED</text>
<text class="text label" x="26" y="166">PROP EDITOR · WIDE</text>
<rect class="surface" x="26" y="180" width="504" height="220" rx="12"/>
<rect class="surface" x="36" y="190" width="484" height="38" rx="8"/>
<text class="text small" x="48" y="215">File Save <tspan fill="#aab2c0">Saved</tspan></text>
<rect class="active-chip" x="312" y="197" width="82" height="26" rx="13"/>
<text class="text small" x="323" y="216">Arrange</text>
<rect class="chip" x="398" y="197" width="68" height="26" rx="13"/>
<text class="text small" x="408" y="216">Reshape</text>
<rect class="chip" x="470" y="197" width="42" height="26" rx="13"/>
<text class="text small" x="478" y="216">Attach</text>
<rect class="canvas" x="36" y="237" width="318" height="152" rx="8"/>
<path class="figure" d="M192 265 L192 337 M192 281 L154 312 M192 281 L230 312 M192 337 L164 375 M192 337 L221 375"/>
<circle class="selected" cx="192" cy="265" r="14"/>
<rect class="surface" x="364" y="237" width="156" height="152" rx="8"/>
<text class="text small" x="376" y="263">Scroll settings</text>
<rect class="chip" x="376" y="276" width="132" height="30" rx="7"/>
<rect class="chip" x="376" y="314" width="132" height="30" rx="7"/>
<rect class="blue" x="376" y="352" width="132" height="28" rx="7"/>
<text class="text small" x="399" y="372">Add Shape</text>
<text class="text label" x="26" y="446">STICKMAN · FOCUS ON PART</text>
<rect class="surface" x="26" y="460" width="504" height="354" rx="12"/>
<rect class="surface" x="36" y="470" width="484" height="36" rx="8"/>
<text class="text small" x="48" y="495">File Save <tspan fill="#aab2c0">Unsaved changes</tspan></text>
<rect class="chip" x="36" y="514" width="224" height="34" rx="8"/>
<text class="text small" x="95" y="537">Overview · 10 parts</text>
<rect class="active-chip" x="268" y="514" width="252" height="34" rx="8"/>
<text class="text small" x="330" y="537">Focus on Part</text>
<rect class="active-chip" x="36" y="556" width="484" height="38" rx="8"/>
<text class="text label" x="51" y="581">Body part: Head ▾</text>
<rect class="canvas" x="36" y="602" width="294" height="170" rx="8"/>
<text class="text small muted" x="50" y="625">Head drawing canvas</text>
<circle class="outline" cx="181" cy="688" r="43"/>
<circle class="selected" cx="181" cy="688" r="48"/>
<rect class="surface" x="340" y="602" width="180" height="170" rx="8"/>
<text class="text small" x="354" y="627">Whole Stickman</text>
<path class="figure" d="M430 643 L430 707 M430 656 L410 674 M430 656 L450 674 M430 707 L414 750 M430 707 L446 750"/>
<rect class="surface" x="36" y="780" width="484" height="26" rx="8"/>
<text class="text small" x="48" y="800">Add Shape Arrange Reshape Color + Future tools</text>
<text class="text small muted" x="26" y="848">Overview keeps all ten panels available; Focus makes</text>
<text class="text small muted" x="26" y="874">room for new tools and is useful at any window size.</text>
<line class="line" x1="26" y1="918" x2="530" y2="918"/>
<text class="text label" x="26" y="955">Tradeoff</text>
<text class="text body" x="26" y="986">More workspace and state work; switching views</text>
<text class="text body" x="26" y="1014">must preserve selection and drawing context.</text>
</g>
<!-- Concept C -->
<g transform="translate(1202,132)">
<rect class="card" width="556" height="1080" rx="20"/>
<text class="text h2" x="26" y="46">C. Focused Maker</text>
<text class="text small muted" x="26" y="76">Make one task and canvas the center of both editors</text>
<rect class="chip" x="26" y="94" width="205" height="34" rx="17"/>
<text class="text label small" x="42" y="117">LARGEST REDESIGN</text>
<text class="text label" x="26" y="166">ONE SHARED WORKSPACE PATTERN</text>
<rect class="surface" x="26" y="180" width="504" height="552" rx="12"/>
<rect class="surface" x="36" y="190" width="484" height="38" rx="8"/>
<text class="text small" x="48" y="215">File Save <tspan fill="#aab2c0">Saved</tspan></text>
<rect class="surface" x="36" y="238" width="484" height="50" rx="8"/>
<text class="text label" x="52" y="270">Choose task or body part ▾</text>
<rect class="canvas" x="36" y="298" width="318" height="338" rx="8"/>
<text class="text small muted" x="51" y="324">Large active canvas</text>
<path class="figure" d="M195 382 L195 500 M195 405 L151 444 M195 405 L239 444 M195 500 L160 570 M195 500 L230 570"/>
<circle class="selected" cx="195" cy="382" r="26"/>
<rect class="surface" x="364" y="298" width="156" height="338" rx="8"/>
<text class="text small" x="377" y="325">For this task</text>
<rect class="chip" x="376" y="340" width="132" height="39" rx="7"/>
<text class="text small" x="389" y="366">Color</text>
<rect class="chip" x="376" y="388" width="132" height="39" rx="7"/>
<text class="text small" x="389" y="414">Shape</text>
<rect class="blue" x="376" y="440" width="132" height="42" rx="8"/>
<text class="text small" x="392" y="467">Add Shape</text>
<rect class="chip" x="376" y="492" width="132" height="39" rx="7"/>
<text class="text small" x="389" y="518">Erase Shape</text>
<rect class="active-chip" x="36" y="646" width="484" height="72" rx="9"/>
<text class="text label" x="53" y="675">Preview drawer</text>
<text class="text small" x="53" y="702">Whole Stickman · Attach preview · Open</text>
<text class="text small muted" x="26" y="770">The same task-first frame in Prop and Stickman.</text>
<text class="text small muted" x="26" y="796">The preview opens only when needed.</text>
<line class="line" x1="26" y1="918" x2="530" y2="918"/>
<text class="text label" x="26" y="955">Tradeoff</text>
<text class="text body" x="26" y="986">Strongest focus and consistency, but most users</text>
<text class="text body" x="26" y="1014">must relearn navigation; all ten parts are no</text>
<text class="text body" x="26" y="1042">longer visible at once.</text>
</g>
<text class="text small muted" x="48" y="1240">For discussion only · Palette and labels follow the Editor Visual Style Guide; this is not final UI styling.</text>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 12 KiB

docs/plans/assets/ground_finish_picker_mockups/01_modal_gallery.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.5 MiB

docs/plans/assets/ground_finish_picker_mockups/02_anchored_picker.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.4 MiB

docs/plans/assets/ground_finish_picker_mockups/03_persistent_tray.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.5 MiB