From 96baba2a6a33ae056713bac9ebeb91f55e05697a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=80=9Cchrisshank=E2=80=9D?= <chris.shank.23@gmail.com>
Date: Sun, 17 Nov 2024 16:07:13 -0800
Subject: [PATCH] observe resize/move event for arrow

---
 src/arrows/abstract-arrow.ts | 41 +++++++++++++++++++++++++++++++-----
 src/arrows/fc-rope.ts        |  1 +
 src/canvas/fc-geometry.ts    |  4 ++++
 3 files changed, 41 insertions(+), 5 deletions(-)

diff --git a/src/arrows/abstract-arrow.ts b/src/arrows/abstract-arrow.ts
index 2d87502..f0b0cc5 100644
--- a/src/arrows/abstract-arrow.ts
+++ b/src/arrows/abstract-arrow.ts
@@ -1,3 +1,4 @@
+import { FolkGeometry } from '../canvas/fc-geometry';
 import { Vertex } from './utils';
 import { VisualObserverEntry, VisualObserverManager } from './visual-observer';
 
@@ -50,6 +51,13 @@ export class AbstractArrow extends HTMLElement {
     this.#update();
   };
 
+  #sourceHandler = (e: Event) => {
+    const geometry = e.target as FolkGeometry;
+    this.#sourceRect = geometry.getClientRect();
+    console.log();
+    this.#update();
+  };
+
   #target = '';
   /** A CSS selector for the target of the arrow. */
   get target() {
@@ -75,6 +83,12 @@ export class AbstractArrow extends HTMLElement {
     this.#update();
   };
 
+  #targetHandler = (e: Event) => {
+    const geometry = e.target as FolkGeometry;
+    this.#targetRect = geometry.getClientRect();
+    this.#update();
+  };
+
   connectedCallback() {
     this.source = this.getAttribute('source') || this.#source;
     this.target = this.getAttribute('target') || this.#target;
@@ -103,9 +117,13 @@ export class AbstractArrow extends HTMLElement {
 
       if (this.#sourceElement === null) {
         throw new Error('source is not a valid element');
+      } else if (false) {
+        this.#sourceElement.addEventListener('resize', this.#sourceHandler);
+        this.#sourceElement.addEventListener('move', this.#sourceHandler);
+      } else {
+        visualObserver.observe(this.#sourceElement, this.#sourceCallback);
       }
 
-      visualObserver.observe(this.#sourceElement, this.#sourceCallback);
       this.#sourceRect = this.#sourceElement.getBoundingClientRect();
     }
   }
@@ -113,7 +131,12 @@ export class AbstractArrow extends HTMLElement {
   unobserveSource() {
     if (this.#sourceElement === null) return;
 
-    visualObserver.unobserve(this.#sourceElement, this.#sourceCallback);
+    if (this.#sourceElement instanceof FolkGeometry) {
+      this.#sourceElement.removeEventListener('resize', this.#sourceHandler);
+      this.#sourceElement.removeEventListener('move', this.#sourceHandler);
+    } else {
+      visualObserver.unobserve(this.#sourceElement, this.#sourceCallback);
+    }
   }
 
   observeTarget() {
@@ -129,9 +152,12 @@ export class AbstractArrow extends HTMLElement {
 
       if (!this.#targetElement) {
         throw new Error('target is not a valid element');
+      } else if (false) {
+        this.#targetElement.addEventListener('resize', this.#targetHandler);
+        this.#targetElement.addEventListener('move', this.#targetHandler);
+      } else {
+        visualObserver.observe(this.#targetElement, this.#targetCallback);
       }
-
-      visualObserver.observe(this.#targetElement, this.#targetCallback);
       this.#targetRect = this.#targetElement.getBoundingClientRect();
     }
   }
@@ -139,7 +165,12 @@ export class AbstractArrow extends HTMLElement {
   unobserveTarget() {
     if (this.#targetElement === null) return;
 
-    visualObserver.unobserve(this.#targetElement, this.#targetCallback);
+    if (this.#targetElement instanceof FolkGeometry) {
+      this.#targetElement.removeEventListener('resize', this.#targetHandler);
+      this.#targetElement.removeEventListener('move', this.#targetHandler);
+    } else {
+      visualObserver.unobserve(this.#targetElement, this.#targetCallback);
+    }
   }
 
   #update() {
diff --git a/src/arrows/fc-rope.ts b/src/arrows/fc-rope.ts
index a19dd73..0e77dc7 100644
--- a/src/arrows/fc-rope.ts
+++ b/src/arrows/fc-rope.ts
@@ -72,6 +72,7 @@ export class FolkRope extends AbstractArrow {
     super.disconnectedCallback();
 
     resizeObserver.unobserve(this, this.#onResize);
+    cancelAnimationFrame(this.#rAFId);
   }
 
   #onResize = (entry) => {
diff --git a/src/canvas/fc-geometry.ts b/src/canvas/fc-geometry.ts
index faaece3..786a1ec 100644
--- a/src/canvas/fc-geometry.ts
+++ b/src/canvas/fc-geometry.ts
@@ -274,6 +274,10 @@ export class FolkGeometry extends HTMLElement {
     this.#update(new Set(['type', 'x', 'y', 'height', 'width', 'rotate']));
   }
 
+  getClientRect(): DOMRect {
+    return DOMRectReadOnly.fromRect({ x: this.x, y: this.y, width: this.width, height: this.height });
+  }
+
   // Similar to `Element.getClientBoundingRect()`, but returns an SVG path that precisely outlines the shape.
   getBoundingPath(): string {
     return '';