JosLe/reaktor
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: robust wire connections via data attributes + chiptune demo preset

Browse Source 
- Replace fragile DOM position matching in finishConnection with
  data-module-id/data-port-name/data-port-direction attributes
- Add nearby port detection (8px radius) for easier connections
- Wire glow effects with drop-shadow filters
- Port dots z-index above wires for reliable click targeting
- Chiptune demo preset: 2x square osc, envelopes, VCAs, mixer,
  filter, delay, distortion, scope — full 8-bit signal chain
- "Chiptune Demo" toolbar button to load the example

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Jose Luis
2026-03-21 01:17:56 +01:00
parent 95054a70df
commit 4a003f2af2
4 changed files with 156 additions and 99 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
src/index.css
View File

@@ -73,16 +73,19 @@ html, body, #root {
.node-canvas.connecting { cursor: crosshair; }
.wires-svg {
position: absolute; inset: 0; pointer-events: none; z-index: 1;
position: absolute; inset: 0; pointer-events: none; z-index: 3;
overflow: visible;
}
.wires-svg path {
fill: none; stroke-width: 2.5; stroke-linecap: round;
pointer-events: stroke; cursor: pointer;
filter: drop-shadow(0 0 3px rgba(0,229,255,0.3));
}
.wires-svg path.audio { stroke: var(--wire-audio); opacity: 0.75; }
.wires-svg path.control { stroke: var(--wire-control); opacity: 0.75; }
.wires-svg path.trigger { stroke: var(--wire-trigger); opacity: 0.75; }
.wires-svg path.temp { stroke-dasharray: 6 4; opacity: 0.5; }
.wires-svg path:hover { stroke-width: 4; opacity: 1; }
.wires-svg path.audio { stroke: var(--wire-audio); opacity: 0.8; }
.wires-svg path.control { stroke: var(--wire-control); opacity: 0.8; }
.wires-svg path.trigger { stroke: var(--wire-trigger); opacity: 0.8; }
.wires-svg path.temp { stroke-dasharray: 6 4; opacity: 0.5; filter: none; }
.wires-svg path:hover { stroke-width: 4; opacity: 1; filter: drop-shadow(0 0 6px rgba(0,229,255,0.6)); }
/* ===== Modules ===== */
.module {
@@ -128,7 +131,7 @@ html, body, #root {
width: 12px; height: 12px; border-radius: 50%;
border: 2px solid var(--border); background: var(--surface);
cursor: pointer; flex-shrink: 0; transition: all 0.15s;
position: relative;
position: relative; z-index: 5;
}
.port-dot.audio { border-color: var(--wire-audio); }
.port-dot.control { border-color: var(--wire-control); }