@rogieking/figui3 2.33.4 → 2.35.0

package/components.css

@@ -1439,10 +1439,20 @@ fig-3d-rotate {
   gap: var(--spacer-2);
   width: 100%;
   --aspect-ratio: 1 / 1;
+  --perspective: 20rem;
+  --perspective-origin: 50% 50%;
+  --transform-origin: 50% 50% -50cqi;
   --gradient-start-color: light-dark(
     rgba(0, 0, 0, 0.05),
     rgba(255, 255, 255, 0.05)
   );
+  --border-width: 1px;
+  --border-start-color: light-dark(
+    rgba(0, 0, 0, 0.15),
+    rgba(255, 255, 255, 0.15)
+  );
+  --border-end-color: transparent;
+  --border-end-color: transparent;
   --gradient-end-color: transparent;
   --figma-3d-rotate-handle-size: 6px;
   --front-face-bg: light-dark(var(--figma-color-bg), #555);
@@ -1484,7 +1494,9 @@ fig-3d-rotate {
     aspect-ratio: 1 / 1;
     max-height: max(3.5rem, 50%);
     max-width: max(3.5rem, 50%);
-    perspective: 20rem;
+    perspective: var(--perspective, 20rem);
+    perspective-origin: var(--perspective-origin, 50% 50%);
+    container-type: inline-size;
   }
 
   .fig-3d-rotate-cube {
@@ -1493,6 +1505,7 @@ fig-3d-rotate {
     position: relative;
     aspect-ratio: 1 / 1;
     transform-style: preserve-3d;
+    transform-origin: var(--transform-origin, 50% 50% -50cqi);
   }
 
   .fig-3d-rotate-face {
@@ -1531,8 +1544,8 @@ fig-3d-rotate {
         rotateY(-0.25turn);
       background: linear-gradient(
         to bottom,
-        var(--gradient-start-color),
-        var(--gradient-start-color)
+        var(--border-start-color),
+        var(--border-end-color)
       );
       border-radius: var(--radius-medium);
     }
@@ -1544,6 +1557,14 @@ fig-3d-rotate {
         var(--gradient-start-color),
         var(--gradient-end-color)
       );
+      border-width: var(--border-width) 0;
+      border-style: solid;
+      border-image: linear-gradient(
+          to right,
+          var(--border-start-color),
+          var(--border-end-color)
+        )
+        1;
     }
     &.left {
       transform-origin: 100% 50%;
@@ -1553,6 +1574,14 @@ fig-3d-rotate {
         var(--gradient-start-color),
         var(--gradient-end-color)
       );
+      border-width: var(--border-width) 0;
+      border-style: solid;
+      border-image: linear-gradient(
+          to left,
+          var(--border-start-color),
+          var(--border-end-color)
+        )
+        1;
     }
     &.top {
       translate: 0 -100%;
@@ -1563,6 +1592,14 @@ fig-3d-rotate {
         var(--gradient-start-color),
         var(--gradient-end-color)
       );
+      border-width: 0 var(--border-width);
+      border-style: solid;
+      border-image: linear-gradient(
+          to top,
+          var(--border-start-color),
+          var(--border-end-color)
+        )
+        1;
     }
     &.bottom {
       top: 100%;
@@ -1574,6 +1611,14 @@ fig-3d-rotate {
         var(--gradient-start-color),
         var(--gradient-end-color)
       );
+      border-width: 0 var(--border-width);
+      border-style: solid;
+      border-image: linear-gradient(
+          to bottom,
+          var(--border-start-color),
+          var(--border-end-color)
+        )
+        1;
     }
   }
 }

package/fig.js

@@ -6462,12 +6462,15 @@ class Fig3DRotate extends HTMLElement {
   #fieldInputs = {};
 
   static get observedAttributes() {
-    return ["value", "precision", "aspect-ratio", "fields"];
+    return ["value", "precision", "aspect-ratio", "fields", "perspective", "perspective-origin", "transform-origin"];
   }
 
   connectedCallback() {
     this.#precision = parseInt(this.getAttribute("precision") || "1");
     this.#syncAspectRatioVar(this.getAttribute("aspect-ratio"));
+    this.#syncPerspectiveVar(this.getAttribute("perspective"));
+    this.#syncCSSVar("--perspective-origin", this.getAttribute("perspective-origin"));
+    this.#syncTransformOrigin(this.getAttribute("transform-origin"));
     this.#parseFields(this.getAttribute("fields"));
     const val = this.getAttribute("value");
     if (val) this.#parseValue(val);
@@ -6490,6 +6493,35 @@ class Fig3DRotate extends HTMLElement {
     }
   }
 
+  #syncPerspectiveVar(value) {
+    if (value && value.trim()) {
+      this.style.setProperty("--perspective", value.trim());
+    } else {
+      this.style.removeProperty("--perspective");
+    }
+  }
+
+  #syncCSSVar(prop, value) {
+    if (value && value.trim()) {
+      this.style.setProperty(prop, value.trim());
+    } else {
+      this.style.removeProperty(prop);
+    }
+  }
+
+  #syncTransformOrigin(value) {
+    if (!value || !value.trim()) {
+      this.style.removeProperty("--transform-origin");
+      return;
+    }
+    const parts = value.trim().split(/\s+/);
+    if (parts.length === 2) {
+      this.style.setProperty("--transform-origin", `${parts[0]} ${parts[1]} -50cqi`);
+    } else {
+      this.style.setProperty("--transform-origin", value.trim());
+    }
+  }
+
   #parseFields(str) {
     if (!str || !str.trim()) {
       this.#fields = [];
@@ -6507,6 +6539,18 @@ class Fig3DRotate extends HTMLElement {
       this.#syncAspectRatioVar(newValue);
       return;
     }
+    if (name === "perspective") {
+      this.#syncPerspectiveVar(newValue);
+      return;
+    }
+    if (name === "perspective-origin") {
+      this.#syncCSSVar("--perspective-origin", newValue);
+      return;
+    }
+    if (name === "transform-origin") {
+      this.#syncTransformOrigin(newValue);
+      return;
+    }
     if (name === "fields") {
       this.#parseFields(newValue);
       if (this.#cube) this.#render();
@@ -6655,6 +6699,7 @@ class Fig3DRotate extends HTMLElement {
     e.preventDefault();
     this.#isDragging = true;
     this.#container.classList.add("dragging");
+    this.#container.setPointerCapture(e.pointerId);
 
     const startX = e.clientX;
     const startY = e.clientY;
@@ -6663,25 +6708,36 @@ class Fig3DRotate extends HTMLElement {
 
     const onMove = (e) => {
       if (!this.#isDragging) return;
+      if (e.buttons === 0) {
+        onEnd();
+        return;
+      }
       const dx = e.clientX - startX;
       const dy = e.clientY - startY;
       this.#ry = this.#snapToIncrement(startRy + dx * 0.5);
       this.#rx = this.#snapToIncrement(startRx - dy * 0.5);
       this.#updateCube();
       this.#syncFieldInputs();
+      this.setAttribute("value", this.value);
       this.#emit("input");
     };
 
-    const onUp = () => {
+    const onEnd = () => {
+      if (!this.#isDragging) return;
+      this.setAttribute("value", this.value);
       this.#isDragging = false;
       this.#container.classList.remove("dragging");
-      document.removeEventListener("pointermove", onMove);
-      document.removeEventListener("pointerup", onUp);
+      this.#container.removeEventListener("pointermove", onMove);
+      this.#container.removeEventListener("pointerup", onEnd);
+      this.#container.removeEventListener("pointercancel", onEnd);
+      this.#container.removeEventListener("lostpointercapture", onEnd);
       this.#emit("change");
     };
 
-    document.addEventListener("pointermove", onMove);
-    document.addEventListener("pointerup", onUp);
+    this.#container.addEventListener("pointermove", onMove);
+    this.#container.addEventListener("pointerup", onEnd);
+    this.#container.addEventListener("pointercancel", onEnd);
+    this.#container.addEventListener("lostpointercapture", onEnd);
   }
 }
 customElements.define("fig-3d-rotate", Fig3DRotate);

package/package.json

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