use promise batching for geometry

demo/spreadsheet-propagator.html

@@ -41,7 +41,7 @@
 
     <fc-geometry x="25" y="300" width="500">
       <s-table>
-        <s-cell row="1" column="A"></s-cell>
+        <s-cell row="1" column="A" expression="0"></s-cell>
         <s-cell row="1" column="B"></s-cell>
         <s-cell row="1" column="C"></s-cell>
         <s-cell row="1" column="D"></s-cell>
@@ -51,7 +51,7 @@
         <s-cell row="1" column="H"></s-cell>
         <s-cell row="1" column="I"></s-cell>
         <s-cell row="1" column="J"></s-cell>
-        <s-cell row="2" column="A"></s-cell>
+        <s-cell row="2" column="A" expression="0"></s-cell>
         <s-cell row="2" column="B"></s-cell>
         <s-cell row="2" column="C"></s-cell>
         <s-cell row="2" column="D"></s-cell>

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<string>();
-  #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(() => {
+    await true;
-      this.#isUpdating = false;
+    this.#isUpdating = false;
-      this.#update(this.#updatedProperties);
+    this.#update(this.#updatedProperties);
-      this.#updatedProperties.clear();
+    this.#updatedProperties.clear();
-      this.#rAFId = -1;
-    });
   }
 
   // Any updates that should be batched should happen here like updating the DOM or emitting events should be executed here.