break and mend rope

src/arrows/event-propagator.ts

@@ -17,14 +17,14 @@ export class EventPropagator extends FolkRope {
     return this.#expression;
   }
   set expression(expression) {
-    this.stroke = 'black';
+    this.mend();
     this.#expression = expression;
     try {
       this.#function = new Function('$source', '$target', '$event', expression);
     } catch (error) {
       console.warn('Failed to parse expression:', error);
       // Use no-op function when parsing fails
-      this.stroke = 'red';
+      this.break();
       this.#function = () => {};
     }
   }

src/arrows/fc-rope.ts

@@ -155,11 +155,9 @@ export class FolkRope extends AbstractArrow {
     for (let i = 0; i < this.#points.length; i++) {
       const p = this.#points[i];
 
-      const prev = i > 0 ? this.#points[i - 1] : null;
-
-      if (prev) {
+      if (p.prev) {
         this.#context.beginPath();
-        this.#context.moveTo(prev.pos.x, prev.pos.y);
+        this.#context.moveTo(p.prev.pos.x, p.prev.pos.y);
         this.#context.lineTo(p.pos.x, p.pos.y);
         this.#context.lineWidth = 2;
         this.#context.strokeStyle = this.#stroke;
@@ -265,4 +263,18 @@ export class FolkRope extends AbstractArrow {
       }
     }
   }
+
+  break(index = Math.floor(this.#points.length / 2)) {
+    if (this.#points.length === 0) return;
+
+    this.#points[index].next = null;
+    this.#points[index + 1].prev = null;
+  }
+
+  mend(index = Math.floor(this.#points.length / 2)) {
+    if (this.#points.length === 0) return;
+
+    this.#points[index].next = this.#points[index + 1];
+    this.#points[index + 1].prev = this.#points[index];
+  }
 }