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
+8 -5
View File
@@ -970,7 +970,7 @@ class DiagramCanvas {
if (n.shield) n.shield.data(svgPath); if (n.shield) n.shield.data(svgPath);
if (!wire.twisted_pair) { if (!wire.twisted_pair) {
n.main.data(svgPath); 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.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)); if (n.helix2) n.helix2.data(this._computeHelixPath(pts, wire.twist_pitch || 16, true));
@@ -1546,12 +1546,15 @@ class DiagramCanvas {
}); });
let stripe = null; let stripe = null;
if (wire.color_stripe) { if (wire.color_stripe && !wire.twisted_pair) {
const stripePath = this._computeHelixPath(pts, 20, false);
if (stripePath) {
stripe = new Konva.Path({ stripe = new Konva.Path({
data: svgPath, stroke: wire.color_stripe, data: stripePath, stroke: wire.color_stripe,
strokeWidth: 1.2, lineCap: "round", dash: [7, 7], listening: false, fill: null, strokeWidth: 2, lineCap: "round", lineJoin: "round", fill: null, listening: false,
}); });
} }
}
// Keep hit as Konva.Line for reliable click/drag detection over full wire // Keep hit as Konva.Line for reliable click/drag detection over full wire
const hit = new Konva.Line({ const hit = new Konva.Line({
@@ -1651,7 +1654,7 @@ class DiagramCanvas {
if (n.shield) n.shield.data(svgPath); if (n.shield) n.shield.data(svgPath);
if (!wire.twisted_pair) { if (!wire.twisted_pair) {
n.main.data(svgPath); 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.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)); if (n.helix2) n.helix2.data(this._computeHelixPath(pts, wire.twist_pitch || 16, true));