From 2561ff816fe84d61aeb9f07e198056ec34b27a18 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=80=9Cchrisshank=E2=80=9D?= <chris.shank.23@gmail.com>
Date: Sat, 23 Nov 2024 17:49:22 -0800
Subject: [PATCH] rope color

---
 src/arrows/event-propagator.ts |  2 ++
 src/arrows/fc-rope.ts          | 11 ++++++++++-
 2 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/src/arrows/event-propagator.ts b/src/arrows/event-propagator.ts
index 9273a24..c8910a7 100644
--- a/src/arrows/event-propagator.ts
+++ b/src/arrows/event-propagator.ts
@@ -17,12 +17,14 @@ export class EventPropagator extends FolkRope {
     return this.#expression;
   }
   set expression(expression) {
+    this.stroke = 'black';
     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.#function = () => {};
     }
   }
diff --git a/src/arrows/fc-rope.ts b/src/arrows/fc-rope.ts
index 0e77dc7..269cf18 100644
--- a/src/arrows/fc-rope.ts
+++ b/src/arrows/fc-rope.ts
@@ -56,6 +56,15 @@ export class FolkRope extends AbstractArrow {
   #gravity = { x: 0, y: 3000 };
   #points: RopePoint[] = [];
 
+  #stroke = this.getAttribute('stroke') || 'black';
+  get stroke() {
+    return this.#stroke;
+  }
+  set stroke(stroke) {
+    this.#stroke = stroke;
+    // TODO: redraw rope?
+  }
+
   constructor() {
     super();
 
@@ -148,7 +157,7 @@ export class FolkRope extends AbstractArrow {
         this.#context.moveTo(prev.pos.x, prev.pos.y);
         this.#context.lineTo(p.pos.x, p.pos.y);
         this.#context.lineWidth = 2;
-        this.#context.strokeStyle = 'black';
+        this.#context.strokeStyle = this.#stroke;
         this.#context.stroke();
       }
     }