@rogieking/figui3 4.10.2 → 4.12.0

package/fig.js

@@ -14309,7 +14309,6 @@ class FigChooser extends HTMLElement {
       "drag",
       "overflow",
       "loop",
-      "padding",
     ];
   }
 
@@ -14380,6 +14379,35 @@ class FigChooser extends HTMLElement {
     requestAnimationFrame(() => {
       this.#syncSelection();
       this.#syncOverflow();
+      this.#scheduleInitialScrollSettle();
+    });
+  }
+
+  #scheduleInitialScrollSettle() {
+    const resettle = () => {
+      if (!this.isConnected) return;
+      if (this.#selectedChoice) {
+        this.#scrollToChoice(this.#selectedChoice, "auto");
+      }
+    };
+    const wireImages = () => {
+      const imgs = this.querySelectorAll("img, video");
+      for (const m of imgs) {
+        if (m.tagName === "IMG" ? m.complete : m.readyState >= 1) continue;
+        const done = () => {
+          m.removeEventListener("load", done);
+          m.removeEventListener("loadedmetadata", done);
+          m.removeEventListener("error", done);
+          resettle();
+        };
+        m.addEventListener("load", done);
+        m.addEventListener("loadedmetadata", done);
+        m.addEventListener("error", done);
+      }
+    };
+    requestAnimationFrame(() => {
+      wireImages();
+      resettle();
     });
   }
 
@@ -14723,22 +14751,32 @@ class FigChooser extends HTMLElement {
   #createNavButtons() {
     if (this.#navStart) return;
 
+    const makeChevron = () => {
+      const icon = document.createElement("span");
+      icon.className = "fig-mask-icon fig-chooser-nav-chevron";
+      icon.style.setProperty("--icon", "var(--icon-chevron)");
+      icon.style.setProperty("--size", "1rem");
+      return icon;
+    };
+
     this.#navStart = document.createElement("button");
     this.#navStart.className = "fig-chooser-nav-start";
     this.#navStart.setAttribute("tabindex", "-1");
     this.#navStart.setAttribute("aria-label", "Scroll back");
+    this.#navStart.appendChild(makeChevron());
 
     this.#navEnd = document.createElement("button");
     this.#navEnd.className = "fig-chooser-nav-end";
     this.#navEnd.setAttribute("tabindex", "-1");
     this.#navEnd.setAttribute("aria-label", "Scroll forward");
+    this.#navEnd.appendChild(makeChevron());
 
-    this.#navStart.addEventListener("pointerdown", (e) => {
+    this.#navStart.addEventListener("pointerup", (e) => {
       e.stopPropagation();
       this.#scrollByPage(-1);
     });
 
-    this.#navEnd.addEventListener("pointerdown", (e) => {
+    this.#navEnd.addEventListener("pointerup", (e) => {
       e.stopPropagation();
       this.#scrollByPage(1);
     });
@@ -14758,25 +14796,31 @@ class FigChooser extends HTMLElement {
     });
   }
 
-  #scrollToChoice(el) {
+  #scrollToChoice(el, behavior = "smooth") {
     if (!el) return;
     requestAnimationFrame(() => {
+      if (!el.isConnected) return;
       const overflowY = this.scrollHeight > this.clientHeight;
       const overflowX = this.scrollWidth > this.clientWidth;
       if (!overflowX && !overflowY) return;
 
-      const options = { behavior: "smooth" };
+      const choiceRect = el.getBoundingClientRect();
+      const hostRect = this.getBoundingClientRect();
+      const options = { behavior };
 
       if (overflowY) {
-        const target =
-          el.offsetTop - this.clientHeight / 2 + el.offsetHeight / 2;
-        options.top = target;
+        const choiceCenter =
+          choiceRect.top - hostRect.top + this.scrollTop + choiceRect.height / 2;
+        options.top = choiceCenter - this.clientHeight / 2;
       }
 
       if (overflowX) {
-        const target =
-          el.offsetLeft - this.clientWidth / 2 + el.offsetWidth / 2;
-        options.left = target;
+        const choiceCenter =
+          choiceRect.left -
+          hostRect.left +
+          this.scrollLeft +
+          choiceRect.width / 2;
+        options.left = choiceCenter - this.clientWidth / 2;
       }
 
       this.scrollTo(options);
@@ -15037,6 +15081,7 @@ class FigHandle extends HTMLElement {
   }
 
   connectedCallback() {
+    if (!this.hasAttribute("type")) this.setAttribute("type", "canvas");
     this.#syncDrag();
     this.#syncHitArea();
     this.addEventListener("click", this.#handleSelect);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rogieking/figui3",
-  "version": "4.10.2",
+  "version": "4.12.0",
   "description": "A lightweight web components library for building Figma plugin and widget UIs with native look and feel",
   "author": "Rogie King",
   "license": "MIT",