@rogieking/figui3 2.34.0 → 2.36.0

package/components.css

@@ -1440,6 +1440,8 @@ fig-3d-rotate {
   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)
@@ -1493,6 +1495,7 @@ fig-3d-rotate {
     max-height: max(3.5rem, 50%);
     max-width: max(3.5rem, 50%);
     perspective: var(--perspective, 20rem);
+    perspective-origin: var(--perspective-origin, 50% 50%);
     container-type: inline-size;
   }
 
@@ -1502,7 +1505,7 @@ fig-3d-rotate {
     position: relative;
     aspect-ratio: 1 / 1;
     transform-style: preserve-3d;
-    transform-origin: 50% 50% -50cqi;
+    transform-origin: var(--transform-origin, 50% 50% -50cqi);
   }
 
   .fig-3d-rotate-face {
@@ -1514,6 +1517,11 @@ fig-3d-rotate {
       var(--gradient-start-color),
       var(--gradient-end-color)
     );
+    &.selected {
+      background: var(--figma-color-border-strong) !important;
+      inset: -1px;
+      border-radius: var(--radius-medium);
+    }
 
     &.front {
       background: var(--front-face-bg);

package/fig.js

@@ -6462,17 +6462,21 @@ class Fig3DRotate extends HTMLElement {
   #fieldInputs = {};
 
   static get observedAttributes() {
-    return ["value", "precision", "aspect-ratio", "fields", "perspective"];
+    return ["value", "precision", "aspect-ratio", "fields", "perspective", "perspective-origin", "transform-origin", "selected", "drag"];
   }
 
   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);
     this.#render();
+    this.#syncSelected(this.getAttribute("selected"));
+    this.#syncDragState();
   }
 
   disconnectedCallback() {
@@ -6499,6 +6503,41 @@ class Fig3DRotate extends HTMLElement {
     }
   }
 
+  #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());
+    }
+  }
+
+  #syncDragState() {
+    if (!this.#container) return;
+    this.#container.style.cursor = this.#dragEnabled ? "" : "default";
+  }
+
+  #syncSelected(value) {
+    if (!this.#cube) return;
+    const faces = this.#cube.querySelectorAll(".fig-3d-rotate-face");
+    const name = value ? value.trim().toLowerCase() : "";
+    for (const face of faces) {
+      face.classList.toggle("selected", name !== "" && face.classList.contains(name));
+    }
+  }
+
   #parseFields(str) {
     if (!str || !str.trim()) {
       this.#fields = [];
@@ -6520,6 +6559,22 @@ class Fig3DRotate extends HTMLElement {
       this.#syncPerspectiveVar(newValue);
       return;
     }
+    if (name === "perspective-origin") {
+      this.#syncCSSVar("--perspective-origin", newValue);
+      return;
+    }
+    if (name === "transform-origin") {
+      this.#syncTransformOrigin(newValue);
+      return;
+    }
+    if (name === "selected") {
+      this.#syncSelected(newValue);
+      return;
+    }
+    if (name === "drag") {
+      this.#syncDragState();
+      return;
+    }
     if (name === "fields") {
       this.#parseFields(newValue);
       if (this.#cube) this.#render();
@@ -6664,10 +6719,17 @@ class Fig3DRotate extends HTMLElement {
     window.addEventListener("keyup", this.#boundKeyUp);
   }
 
+  get #dragEnabled() {
+    const attr = this.getAttribute("drag");
+    return attr === null || attr.toLowerCase() !== "false";
+  }
+
   #startDrag(e) {
+    if (!this.#dragEnabled) return;
     e.preventDefault();
     this.#isDragging = true;
     this.#container.classList.add("dragging");
+    this.#container.setPointerCapture(e.pointerId);
 
     const startX = e.clientX;
     const startY = e.clientY;
@@ -6676,6 +6738,10 @@ 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);
@@ -6686,17 +6752,22 @@ class Fig3DRotate extends HTMLElement {
       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.34.0",
+  "version": "2.36.0",
   "description": "A lightweight web components library for building Figma plugin and widget UIs with native look and feel",
   "author": "Rogie King",
   "license": "MIT",