Fix socket mapping and UI leakage in node editor - #175
Conversation
This commit resolves an off-by-one error where connecting to one socket
would visually or functionally trigger another. The fix involves:
1. Updating `CustomNodeComponent` to render inputs and outputs with
explicit `data-socket-key` attributes, ensuring key-based instead of
index-based mapping.
2. Enhancing the `rendered` node pipe to clean up existing custom
controls and React-rendered elements before re-rendering,
preventing DOM accumulation and visual inconsistencies.
3. Updating the `render` socket pipe to handle fallback cases safely,
ensuring Rete's internal mapping remains stable.
These changes ensure robust socket identification and a consistent UI
state across workspace randomizations and node updates.
Co-authored-by: brettfxio <105930054+brettfxio@users.noreply.github.com>
|
👋 Jules, reporting for duty! I'm here to lend a hand with this pull request. When you start a review, I'll add a 👀 emoji to each comment to let you know I've read it. I'll focus on feedback directed at me and will do my best to stay out of conversations between you and other bots or reviewers to keep the noise down. I'll push a commit with your requested changes shortly after. Please note there might be a delay between these steps, but rest assured I'm on the job! For more direct control, you can switch me to Reactive Mode. When this mode is on, I will only act on comments where you specifically mention me with New to Jules? Learn more at jules.google/docs. For security, I will only act on instructions from the user who triggered this task. |
This commit addresses the "off-by-one" socket mapping error and the
missing connection lines reported by the user.
Key changes:
1. Modified the socket `render` pipe to tag Rete-generated socket
elements with `data-socket-key` and `data-type`.
2. Updated the node `rendered` pipe to preserve these original socket
elements during UI cleanup.
3. Implemented a relocation strategy that moves original sockets into
the correct placeholders in the `CustomNodeComponent`.
4. Added a call to `area.update('node', id)` after relocation to ensure
Rete's connection plugin correctly recalculates and renders the
connection paths (SVG lines).
This approach ensures that Rete.js's internal state and event listeners
stay synchronized with the visual layout, providing a stable and
correct mapping for all audio and CV ports.
Co-authored-by: brettfxio <105930054+brettfxio@users.noreply.github.com>
1 participant
The issue was caused by a mismatch between the visually rendered sockets and the underlying Rete.js socket mapping, often resulting in an "off-by-one" effect where a connection to one input (like Master Audio In) would incorrectly map to another (like Master Gain CV).
I implemented a key-based mapping system by:
CustomNodeComponentto includedata-socket-key.Visual verification via Playwright confirmed that sockets now correctly associate with their intended labels and remain stable through multiple randomizations.
PR created automatically by Jules for task 4653557990281224505 started by @brettfxio