rope color

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 = () => {};
     }
   }

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();
       }
     }