From c34790d3afea4bdca4c4b099b9c2464afb17eaee Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=80=9Cchrisshank=E2=80=9D?= <chris.shank.23@gmail.com>
Date: Sat, 30 Nov 2024 15:34:39 -0800
Subject: [PATCH] fix broken rope

---
 src/arrows/fc-rope.ts | 29 ++++++++++++++++++++++++++++-
 1 file changed, 28 insertions(+), 1 deletion(-)

diff --git a/src/arrows/fc-rope.ts b/src/arrows/fc-rope.ts
index 1199a23..267b1b7 100644
--- a/src/arrows/fc-rope.ts
+++ b/src/arrows/fc-rope.ts
@@ -30,6 +30,7 @@ export class FolkRope extends AbstractArrow {
 
   #svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
   #path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+  #path2 = document.createElementNS('http://www.w3.org/2000/svg', 'path');
   #shadow = this.attachShadow({ mode: 'open' });
 
   #rAFId = -1;
@@ -48,6 +49,7 @@ export class FolkRope extends AbstractArrow {
   set stroke(stroke) {
     this.#stroke = stroke;
     this.#path.setAttribute('stroke', this.#stroke);
+    this.#path2.setAttribute('stroke', this.#stroke);
   }
 
   constructor() {
@@ -55,9 +57,16 @@ export class FolkRope extends AbstractArrow {
     this.#svg.style.height = '100%';
     this.#svg.style.width = '100%';
     this.#svg.appendChild(this.#path);
+    this.#svg.appendChild(this.#path2);
+
     this.#shadow.appendChild(this.#svg);
+
     this.#path.setAttribute('stroke-width', '2');
     this.#path.setAttribute('fill', 'none');
+
+    this.#path2.setAttribute('stroke-width', '2');
+    this.#path2.setAttribute('fill', 'none');
+
     this.stroke = this.getAttribute('stroke') || 'black';
   }
 
@@ -125,11 +134,29 @@ export class FolkRope extends AbstractArrow {
 
     let pathData = `M ${this.#points[0].pos.x} ${this.#points[0].pos.y}`;
 
+    let path2Data = '';
+    let isBroken = false;
+
     for (let i = 1; i < this.#points.length; i++) {
-      pathData += ` L ${this.#points[i].pos.x} ${this.#points[i].pos.y}`;
+      const point = this.#points[i];
+
+      if (point.prev === null) {
+        isBroken = true;
+        path2Data = `M ${point.pos.x} ${point.pos.y}`;
+      } else if (isBroken) {
+        path2Data += ` L ${point.pos.x} ${point.pos.y}`;
+      } else {
+        pathData += ` L ${point.pos.x} ${point.pos.y}`;
+      }
     }
 
     this.#path.setAttribute('d', pathData);
+
+    if (path2Data) {
+      this.#path2.setAttribute('d', path2Data);
+    } else {
+      this.#path2.removeAttribute('d');
+    }
   }
 
   #generatePoints(start: Vertex, end: Vertex) {