fix arrows

demo/sticky-html-arrow.html

@@ -24,6 +24,7 @@
         display: block;
         position: absolute;
         inset: 0 0 0 0;
+        pointer-events: none;
       }
     </style>
   </head>

src/abstract-arrow.ts

@@ -192,10 +192,15 @@ export class AbstractArrow extends HTMLElement {
         throw new Error('source is not a valid element');
       } else if (this.#sourceElement instanceof FolkShape) {
         this.#sourceElement.addEventListener('transform', this.#sourceHandler);
-        this.#sourceRect = this.#sourceElement.getBoundingClientRect();
+
+        this.#sourceRect = this.#sourceElement.getClientRect();
+
+        this.#update();
       } else if (this.#sourceElement instanceof HTMLIFrameElement && this.#sourceIframeSelector) {
         window.addEventListener('message', this.#sourcePostMessage);
+
         clientRectObserver.observe(this.#sourceElement, this.#sourceIframeCallback);
+
         this.#sourceElement.contentWindow?.postMessage({
           type: 'folk-observe-element',
           selector: this.#sourceIframeSelector,
@@ -241,6 +246,8 @@ export class AbstractArrow extends HTMLElement {
         throw new Error('target is not a valid element');
       } else if (this.#targetElement instanceof FolkShape) {
         this.#targetElement.addEventListener('transform', this.#targetHandler);
+        this.#targetRect = this.#targetElement.getClientRect();
+        this.#update();
       } else if (this.#targetElement instanceof HTMLIFrameElement && this.#targetIframeSelector) {
         window.addEventListener('message', this.#targetPostMessage);
         clientRectObserver.observe(this.#targetElement, this.#targetIframeCallback);
@@ -250,8 +257,8 @@ export class AbstractArrow extends HTMLElement {
         });
       } else {
         clientRectObserver.observe(this.#targetElement, this.#targetCallback);
+        this.#targetRect = this.#targetElement.getBoundingClientRect();
       }
-      this.#targetRect = this.#targetElement.getBoundingClientRect();
     }
   }
 

src/folk-shape.ts

@@ -309,8 +309,8 @@ export class FolkShape extends HTMLElement {
 
   #isConnected = false;
   connectedCallback() {
-    this.#update(new Set(['type', 'x', 'y', 'height', 'width', 'rotation']));
     this.#isConnected = true;
+    this.#update(new Set(['type', 'x', 'y', 'height', 'width', 'rotation']));
   }
 
   getClientRect(): RotatedDOMRect {
@@ -497,12 +497,12 @@ export class FolkShape extends HTMLElement {
 
   // Any updates that should be batched should happen here like updating the DOM or emitting events should be executed here.
   #update(updatedProperties: Set<string>) {
-    if (updatedProperties.has('type')) {
-      // TODO: Update shape styles. For many shapes, we could just use clip-path to style the shape.
-      // If we use relative values in `clip-path: polygon()`, then no JS is needed to style the shape
-      // If `clip-path: path()` is used then we need to update the path in JS.
-      // See https://www.smashingmagazine.com/2024/05/modern-guide-making-css-shapes/
-    }
+    // if (updatedProperties.has('type')) {
+    //   // TODO: Update shape styles. For many shapes, we could just use clip-path to style the shape.
+    //   // If we use relative values in `clip-path: polygon()`, then no JS is needed to style the shape
+    //   // If `clip-path: path()` is used then we need to update the path in JS.
+    //   // See https://www.smashingmagazine.com/2024/05/modern-guide-making-css-shapes/
+    // }
 
     this.#dispatchTransformEvent(updatedProperties);
   }