@rogieking/figui3 2.26.0 → 2.28.0

package/components.css

@@ -1280,6 +1280,7 @@ fig-easing-curve {
   .fig-easing-curve-svg-container {
     border-radius: var(--radius-medium);
     background: var(--figma-color-bg-secondary);
+    padding: var(--spacer-2);
   }
   .fig-easing-curve-diagonal,
   .fig-easing-curve-bounds,
@@ -1291,6 +1292,8 @@ fig-easing-curve {
   .fig-easing-curve-diagonal {
     stroke: var(--figma-color-bordertranslucent);
     stroke-width: var(--stroke-width);
+    stroke-linejoin: round;
+    stroke-linecap: round;
   }
   .fig-easing-curve-bounds {
     fill: transparent;
@@ -1298,15 +1301,21 @@ fig-easing-curve {
   .fig-easing-curve-arm {
     stroke: var(--figma-color-border-strong);
     stroke-width: var(--stroke-width);
+    stroke-linejoin: round;
+    stroke-linecap: round;
   }
   .fig-easing-curve-path {
     fill: none;
     stroke: var(--figma-color-text);
     stroke-width: var(--stroke-width);
+    stroke-linejoin: round;
+    stroke-linecap: round;
   }
   .fig-easing-curve-target {
     stroke: var(--figma-color-bordertranslucent);
     stroke-width: var(--stroke-width);
+    stroke-linejoin: round;
+    stroke-linecap: round;
   }
   .fig-easing-curve-handle {
     fill: var(--figma-color-border-strong);

package/fig.js

@@ -1080,12 +1080,15 @@ class FigPopup extends HTMLDialogElement {
   #boundPointerDown;
   #boundPointerMove;
   #boundPointerUp;
+  #wasDragged = false;
 
   constructor() {
     super();
     this.#boundReposition = this.#queueReposition.bind(this);
     this.#boundScroll = (e) => {
-      if (this.open && !this.contains(e.target)) this.#positionPopup();
+      if (this.open && !this.contains(e.target) && this.#shouldAutoReposition()) {
+        this.#positionPopup();
+      }
     };
     this.#boundOutsidePointerDown = this.#handleOutsidePointerDown.bind(this);
     this.#boundPointerDown = this.#handlePointerDown.bind(this);
@@ -1222,6 +1225,7 @@ class FigPopup extends HTMLDialogElement {
 
     this.#setupObservers();
     document.addEventListener("pointerdown", this.#boundOutsidePointerDown, true);
+    this.#wasDragged = false;
     this.#queueReposition();
     this.#isPopupActive = true;
 
@@ -1234,6 +1238,7 @@ class FigPopup extends HTMLDialogElement {
     if (anchor) anchor.classList.remove("has-popup-open");
 
     this.#isPopupActive = false;
+    this.#wasDragged = false;
     this.#teardownObservers();
     document.removeEventListener(
       "pointerdown",
@@ -1404,6 +1409,7 @@ class FigPopup extends HTMLDialogElement {
       if (dx > this.#dragThreshold || dy > this.#dragThreshold) {
         this.#isDragging = true;
         this.#dragPending = false;
+        this.#wasDragged = true;
         this.setPointerCapture(e.pointerId);
         this.style.cursor = "grabbing";
 
@@ -1808,7 +1814,7 @@ class FigPopup extends HTMLDialogElement {
   }
 
   #queueReposition() {
-    if (!this.open) return;
+    if (!this.open || !this.#shouldAutoReposition()) return;
     if (this.#rafId !== null) return;
 
     this.#rafId = requestAnimationFrame(() => {
@@ -1816,6 +1822,11 @@ class FigPopup extends HTMLDialogElement {
       this.#positionPopup();
     });
   }
+
+  #shouldAutoReposition() {
+    if (!(this.drag && this.#wasDragged)) return true;
+    return !this.#resolveAnchor();
+  }
 }
 customElements.define("fig-popup", FigPopup, { extends: "dialog" });
 

package/package.json

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