From f958027528222fc85bb5c4f68af2ff2fe92bbc77 Mon Sep 17 00:00:00 2001
From: Kyle <kyle@skudak.com>
Date: Fri, 24 Apr 2026 15:07:07 -0400
Subject: [PATCH] Render stripe as solid 1px center line (1/3 wire width)

Replaces tick marks with a solid stripe line following the wire path
at strokeWidth=1 (main wire is 3px), centered on the wire body.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 frontend/js/canvas.js | 15 ++++++---------
 1 file changed, 6 insertions(+), 9 deletions(-)

diff --git a/frontend/js/canvas.js b/frontend/js/canvas.js
index d33941d..c74cfc3 100644
--- a/frontend/js/canvas.js
+++ b/frontend/js/canvas.js
@@ -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(this._computeStripeTickPath(pts, 8, 2) || svgPath);
+        if (n.stripe) n.stripe.data(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));
@@ -1584,13 +1584,10 @@ class DiagramCanvas {
 
     let stripe = null;
     if (wire.color_stripe && !wire.twisted_pair) {
-      const tickPath = this._computeStripeTickPath(pts, 8, 2);
-      if (tickPath) {
-        stripe = new Konva.Path({
-          data: tickPath, stroke: wire.color_stripe,
-          strokeWidth: 2, lineCap: "round", fill: null, listening: false,
-        });
-      }
+      stripe = new Konva.Path({
+        data: svgPath, stroke: wire.color_stripe,
+        strokeWidth: 1, lineCap: "round", lineJoin: "round", fill: null, listening: false,
+      });
     }
 
     // Keep hit as Konva.Line for reliable click/drag detection over full wire
@@ -1691,7 +1688,7 @@ class DiagramCanvas {
       if (n.shield) n.shield.data(svgPath);
       if (!wire.twisted_pair) {
         n.main.data(svgPath);
-        if (n.stripe) n.stripe.data(this._computeStripeTickPath(pts, 8, 2) || svgPath);
+        if (n.stripe) n.stripe.data(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));