revert: temporarily revert EIP_CIRCUIT_BREAKER compound rendering
Reverting e8039f9 to diagnose compound rendering regression affecting
all compound types (SPLIT, CHOICE, LOOP, DO_TRY) and error handlers.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
119
.superpowers/brainstorm/10188-1774613058/node-interactions.html
Normal file
119
.superpowers/brainstorm/10188-1774613058/node-interactions.html
Normal file
@@ -0,0 +1,119 @@
|
||||
<h2>Node Interaction Model</h2>
|
||||
<p class="subtitle">What happens when you interact with a processor node on the diagram?</p>
|
||||
|
||||
<div class="cards">
|
||||
<!-- Option A: Click-to-select + context menu -->
|
||||
<div class="card" data-choice="a" onclick="toggleSelect(this)">
|
||||
<div class="card-image" style="padding: 24px; background: #F5F2ED;">
|
||||
<svg width="100%" height="180" viewBox="0 0 420 180">
|
||||
<!-- Normal node -->
|
||||
<g transform="translate(10, 10)">
|
||||
<rect x="0" y="0" width="180" height="56" rx="4" fill="white" stroke="#E4DFD8" stroke-width="1"/>
|
||||
<rect x="0" y="0" width="180" height="6" rx="4" fill="#C6820E"/>
|
||||
<rect x="4" y="0" width="172" height="6" fill="#C6820E"/>
|
||||
<text x="16" y="32" fill="#C6820E" font-size="14">⚙</text>
|
||||
<text x="36" y="30" fill="#1A1612" font-size="11" font-weight="600">LOG</text>
|
||||
<text x="36" y="44" fill="#5C5347" font-size="10">Processing order</text>
|
||||
<text x="96" y="72" fill="#9C9184" font-size="10" text-anchor="middle" font-style="italic">normal state</text>
|
||||
</g>
|
||||
|
||||
<!-- Selected node (amber ring) -->
|
||||
<g transform="translate(10, 100)">
|
||||
<rect x="-2" y="-2" width="184" height="60" rx="6" fill="none" stroke="#C6820E" stroke-width="2.5"/>
|
||||
<rect x="0" y="0" width="180" height="56" rx="4" fill="white" stroke="#C6820E" stroke-width="1"/>
|
||||
<rect x="0" y="0" width="180" height="6" rx="4" fill="#C6820E"/>
|
||||
<rect x="4" y="0" width="172" height="6" fill="#C6820E"/>
|
||||
<text x="16" y="32" fill="#C6820E" font-size="14">⚙</text>
|
||||
<text x="36" y="30" fill="#1A1612" font-size="11" font-weight="600">LOG</text>
|
||||
<text x="36" y="44" fill="#5C5347" font-size="10">Processing order</text>
|
||||
<text x="96" y="72" fill="#C6820E" font-size="10" text-anchor="middle" font-weight="600">click = select</text>
|
||||
</g>
|
||||
|
||||
<!-- Context menu on right-click -->
|
||||
<g transform="translate(220, 10)">
|
||||
<rect x="0" y="0" width="180" height="56" rx="4" fill="white" stroke="#E4DFD8" stroke-width="1"/>
|
||||
<rect x="0" y="0" width="180" height="6" rx="4" fill="#C6820E"/>
|
||||
<rect x="4" y="0" width="172" height="6" fill="#C6820E"/>
|
||||
<text x="16" y="32" fill="#C6820E" font-size="14">⚙</text>
|
||||
<text x="36" y="30" fill="#1A1612" font-size="11" font-weight="600">LOG</text>
|
||||
<text x="36" y="44" fill="#5C5347" font-size="10">Processing order</text>
|
||||
<!-- Context menu -->
|
||||
<g transform="translate(100, 40)">
|
||||
<rect x="0" y="0" width="140" height="96" rx="6" fill="white" stroke="#E4DFD8" stroke-width="1" filter="url(#shadow)"/>
|
||||
<text x="12" y="20" fill="#1A1612" font-size="11">🔍 View Snapshot</text>
|
||||
<line x1="8" y1="28" x2="132" y2="28" stroke="#EDE9E3" stroke-width="1"/>
|
||||
<text x="12" y="44" fill="#1A7F8E" font-size="11">⚙ Enable Tracing</text>
|
||||
<text x="12" y="64" fill="#1A7F8E" font-size="11">📌 Set Tap</text>
|
||||
<line x1="8" y1="72" x2="132" y2="72" stroke="#EDE9E3" stroke-width="1"/>
|
||||
<text x="12" y="88" fill="#5C5347" font-size="11">📋 Copy Processor ID</text>
|
||||
</g>
|
||||
<text x="90" y="152" fill="#9C9184" font-size="10" text-anchor="middle" font-style="italic">right-click = context menu</text>
|
||||
</g>
|
||||
|
||||
<defs>
|
||||
<filter id="shadow" x="-4" y="-2" width="148" height="104">
|
||||
<feDropShadow dx="0" dy="2" stdDeviation="4" flood-opacity="0.12"/>
|
||||
</filter>
|
||||
</defs>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<h3>A: Click-Select + Right-Click Menu</h3>
|
||||
<p>Click to select a node (amber highlight ring). Right-click for context menu with tracing/tap/snapshot actions. Clean separation of concerns. Standard desktop UX.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Option B: Hover toolbar -->
|
||||
<div class="card" data-choice="b" onclick="toggleSelect(this)">
|
||||
<div class="card-image" style="padding: 24px; background: #F5F2ED;">
|
||||
<svg width="100%" height="180" viewBox="0 0 420 180">
|
||||
<!-- Normal node -->
|
||||
<g transform="translate(10, 10)">
|
||||
<rect x="0" y="0" width="180" height="56" rx="4" fill="white" stroke="#E4DFD8" stroke-width="1"/>
|
||||
<rect x="0" y="0" width="180" height="6" rx="4" fill="#C6820E"/>
|
||||
<rect x="4" y="0" width="172" height="6" fill="#C6820E"/>
|
||||
<text x="16" y="32" fill="#C6820E" font-size="14">⚙</text>
|
||||
<text x="36" y="30" fill="#1A1612" font-size="11" font-weight="600">LOG</text>
|
||||
<text x="36" y="44" fill="#5C5347" font-size="10">Processing order</text>
|
||||
<text x="96" y="72" fill="#9C9184" font-size="10" text-anchor="middle" font-style="italic">normal state</text>
|
||||
</g>
|
||||
|
||||
<!-- Hovered node with floating toolbar -->
|
||||
<g transform="translate(10, 100)">
|
||||
<rect x="0" y="0" width="180" height="56" rx="4" fill="#FFFCF5" stroke="#C6820E" stroke-width="1.5"/>
|
||||
<rect x="0" y="0" width="180" height="6" rx="4" fill="#C6820E"/>
|
||||
<rect x="4" y="0" width="172" height="6" fill="#C6820E"/>
|
||||
<text x="16" y="32" fill="#C6820E" font-size="14">⚙</text>
|
||||
<text x="36" y="30" fill="#1A1612" font-size="11" font-weight="600">LOG</text>
|
||||
<text x="36" y="44" fill="#5C5347" font-size="10">Processing order</text>
|
||||
<!-- Floating toolbar above -->
|
||||
<g transform="translate(20, -30)">
|
||||
<rect x="0" y="0" width="140" height="26" rx="13" fill="#1A1612" opacity="0.9"/>
|
||||
<text x="18" y="17" fill="white" font-size="12" title="View">🔍</text>
|
||||
<text x="46" y="17" fill="white" font-size="12" title="Trace">⚙</text>
|
||||
<text x="74" y="17" fill="white" font-size="12" title="Tap">📌</text>
|
||||
<text x="102" y="17" fill="white" font-size="12" title="Copy">📋</text>
|
||||
<text x="124" y="17" fill="white" font-size="12" title="More">⋯</text>
|
||||
</g>
|
||||
<text x="96" y="72" fill="#C6820E" font-size="10" text-anchor="middle" font-weight="600">hover = toolbar appears</text>
|
||||
</g>
|
||||
|
||||
<!-- Click = select (same as A) -->
|
||||
<g transform="translate(220, 50)">
|
||||
<rect x="-2" y="-2" width="184" height="60" rx="6" fill="none" stroke="#C6820E" stroke-width="2.5"/>
|
||||
<rect x="0" y="0" width="180" height="56" rx="4" fill="white" stroke="#C6820E" stroke-width="1"/>
|
||||
<rect x="0" y="0" width="180" height="6" rx="4" fill="#C6820E"/>
|
||||
<rect x="4" y="0" width="172" height="6" fill="#C6820E"/>
|
||||
<text x="16" y="32" fill="#C6820E" font-size="14">⚙</text>
|
||||
<text x="36" y="30" fill="#1A1612" font-size="11" font-weight="600">LOG</text>
|
||||
<text x="36" y="44" fill="#5C5347" font-size="10">Processing order</text>
|
||||
<text x="96" y="72" fill="#C6820E" font-size="10" text-anchor="middle" font-weight="600">click = select</text>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<h3>B: Hover Floating Toolbar</h3>
|
||||
<p>Hover reveals a dark floating icon toolbar above the node. Click still selects. More discoverable than right-click, but can feel cluttered on dense diagrams.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
Reference in New Issue
Block a user