Kyle/Wiring-Designer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Render striped wires as a helix instead of dashes

Browse Source 
Stripe color is now drawn as a single spiral wrapping around the solid
wire body (using the same quadratic-bezier helix as twisted pair) rather
than a dashed overlay. Pitch is fixed at 20px for stripes. Updated all
three rendering paths: _renderWire, _recomputeJumps, _redrawWiresFor.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Kyle
2026-04-24 15:00:12 -04:00
parent 0e507a95d3
commit e8905d312e
1 changed files with 10 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/js/canvas.js
+10 -7
View File
@@ -970,7 +970,7 @@ class DiagramCanvas {
if (n.shield) n.shield.data(svgPath);
if (!wire.twisted_pair) {
n.main.data(svgPath);
if (n.stripe) n.stripe.data(svgPath);
if (n.stripe) n.stripe.data(this._computeHelixPath(pts, 20, false) || svgPath);
}
if (n.helix) n.helix.data(this._computeHelixPath(pts, wire.twist_pitch || 16, false));
if (n.helix2) n.helix2.data(this._computeHelixPath(pts, wire.twist_pitch || 16, true));
@@ -1546,11 +1546,14 @@ class DiagramCanvas {
});
let stripe = null;
if (wire.color_stripe) {
stripe = new Konva.Path({
data: svgPath, stroke: wire.color_stripe,
strokeWidth: 1.2, lineCap: "round", dash: [7, 7], listening: false, fill: null,
});
if (wire.color_stripe && !wire.twisted_pair) {
const stripePath = this._computeHelixPath(pts, 20, false);
if (stripePath) {
stripe = new Konva.Path({
data: stripePath, stroke: wire.color_stripe,
strokeWidth: 2, lineCap: "round", lineJoin: "round", fill: null, listening: false,
});
}
}
// Keep hit as Konva.Line for reliable click/drag detection over full wire
@@ -1651,7 +1654,7 @@ class DiagramCanvas {
if (n.shield) n.shield.data(svgPath);
if (!wire.twisted_pair) {
n.main.data(svgPath);
if (n.stripe) n.stripe.data(svgPath);
if (n.stripe) n.stripe.data(this._computeHelixPath(pts, 20, false) || svgPath);
}
if (n.helix) n.helix.data(this._computeHelixPath(pts, wire.twist_pitch || 16, false));
if (n.helix2) n.helix2.data(this._computeHelixPath(pts, wire.twist_pitch || 16, true));