diff --git a/demo/spreadsheet-propagator.html b/demo/spreadsheet-propagator.html index c5ff04a..144ac6c 100644 --- a/demo/spreadsheet-propagator.html +++ b/demo/spreadsheet-propagator.html @@ -41,7 +41,7 @@ - + @@ -51,7 +51,7 @@ - + diff --git a/src/canvas/fc-geometry.ts b/src/canvas/fc-geometry.ts index bd77b4d..ce34bb8 100644 --- a/src/canvas/fc-geometry.ts +++ b/src/canvas/fc-geometry.ts @@ -315,10 +315,6 @@ export class FolkGeometry extends HTMLElement { this.#update(new Set(['type', 'x', 'y', 'height', 'width', 'rotate'])); } - disconnectedCallback() { - cancelAnimationFrame(this.#rAFId); - } - // Similar to `Element.getClientBoundingRect()`, but returns an SVG path that precisely outlines the shape. getBoundingPath(): string { return ''; @@ -423,21 +419,18 @@ export class FolkGeometry extends HTMLElement { } #updatedProperties = new Set(); - #rAFId = -1; #isUpdating = false; - #requestUpdate(property: string) { + async #requestUpdate(property: string) { this.#updatedProperties.add(property); if (this.#isUpdating) return; this.#isUpdating = true; - this.#rAFId = requestAnimationFrame(() => { - this.#isUpdating = false; - this.#update(this.#updatedProperties); - this.#updatedProperties.clear(); - this.#rAFId = -1; - }); + await true; + this.#isUpdating = false; + this.#update(this.#updatedProperties); + this.#updatedProperties.clear(); } // Any updates that should be batched should happen here like updating the DOM or emitting events should be executed here.