From 19b8477cdf32f757d1f5a00e329528558756e13e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E2=80=9Cchrisshank=E2=80=9D?= Date: Mon, 2 Dec 2024 18:09:27 -0800 Subject: [PATCH] fix arrows --- demo/sticky-html-arrow.html | 1 + src/abstract-arrow.ts | 11 +++++++++-- src/folk-shape.ts | 14 +++++++------- 3 files changed, 17 insertions(+), 9 deletions(-) diff --git a/demo/sticky-html-arrow.html b/demo/sticky-html-arrow.html index 2e54f47..6d7cb43 100644 --- a/demo/sticky-html-arrow.html +++ b/demo/sticky-html-arrow.html @@ -24,6 +24,7 @@ display: block; position: absolute; inset: 0 0 0 0; + pointer-events: none; } diff --git a/src/abstract-arrow.ts b/src/abstract-arrow.ts index 38fae05..29d3d20 100644 --- a/src/abstract-arrow.ts +++ b/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(); } } diff --git a/src/folk-shape.ts b/src/folk-shape.ts index a79ad96..82a4cb3 100644 --- a/src/folk-shape.ts +++ b/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) { - 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); }