@rogieking/figui3 1.3.1 → 1.3.3

package/example.html

@@ -23,7 +23,14 @@
         <h2>UI3 Components</h2>
     </fig-header>
     <fig-content>
+        <fig-input-angle text="true"
+                         value="0"
+                         onInput="console.log(event.target.value)"></fig-input-angle>
+        <br /><br />
+        <fig-input-joystick></fig-input-joystick>
+        <br /><br />
         <fig-input-joystick text="true"
+                            value="0,0"
                             onInput="console.log(event.target.value)"></fig-input-joystick>
         <fig-header>
             <h2>Details</h2>
@@ -444,8 +451,11 @@
         </fig-header>
         <fig-field>
             <label>Switches</label>
-            <fig-switch on="true"
+            <fig-switch checked="true"
+                        onInput="console.log(event.target.checked)"
                         label="On"></fig-switch>
+            <fig-switch checked="false"
+                        label="Off"></fig-switch>
             <fig-switch indeterminate="true"
                         label="Indeterminate"></fig-switch>
             <fig-switch disabled

package/fig.css

@@ -2263,18 +2263,6 @@ fig-segmented-control {
   }
 }
 
-/* Utilities */
-
-@keyframes fig-spinner-spin {
-  from {
-    transform: rotate(0deg);
-  }
-
-  to {
-    transform: rotate(360deg);
-  }
-}
-
 fig-input-joystick {
   --size: 1.5rem;
   display: inline-flex;
@@ -2284,6 +2272,10 @@ fig-input-joystick {
     width: 1.5rem;
     height: 1.5rem;
     place-items: center;
+    flex-shrink: 0;
+    flex-grow: 0;
+    align-items: center;
+    justify-content: center;
   }
   .fig-input-joystick-plane {
     display: inline-grid;
@@ -2292,9 +2284,10 @@ fig-input-joystick {
     width: var(--size);
     height: var(--size);
     flex-shrink: 0;
-    &:hover {
+    &.dragging {
       cursor: grab;
       --size: 3rem;
+      z-index: 2;
     }
   }
   .fig-input-joystick-plane > * {
@@ -2330,7 +2323,7 @@ fig-input-joystick {
       pointer-events: none;
     }
   }
-  .fig-input-joystick-plane:hover .fig-input-joystick-guides {
+  .fig-input-joystick-plane.dragging .fig-input-joystick-guides {
     background: linear-gradient(
         45deg,
         transparent calc(50% - 0.5px),
@@ -2358,3 +2351,54 @@ fig-input-joystick {
     transform: translate(-50%, -50%);
   }
 }
+
+fig-input-angle {
+  --size: 1.5rem;
+  display: inline-flex;
+  gap: var(--spacer-2);
+
+  .fig-input-angle-plane {
+    display: inline-grid;
+    place-items: center;
+    width: var(--size);
+    height: var(--size);
+    aspect-ratio: 1/1;
+    flex-shrink: 0;
+    background-color: var(--figma-color-bg-secondary);
+    border-radius: 100%;
+    box-shadow: inset 0 0 0 1px var(--figma-color-border);
+    &.dragging {
+      cursor: grab;
+      --size: 3rem;
+      z-index: 2;
+    }
+  }
+  .fig-input-angle-handle {
+    display: inline-grid;
+    place-items: center;
+    grid-area: 1/1;
+    width: calc(0.5rem + 2px);
+    height: calc(0.5rem + 2px);
+    &:before {
+      content: "";
+      display: block;
+      width: 0.5rem;
+      height: 0.5rem;
+      background: var(--figma-color-icon-onbrand);
+      box-shadow: var(--handle-shadow);
+      border-radius: 50%;
+    }
+  }
+}
+
+/* Utilities */
+
+@keyframes fig-spinner-spin {
+  from {
+    transform: rotate(0deg);
+  }
+
+  to {
+    transform: rotate(360deg);
+  }
+}

package/fig.js

@@ -1671,6 +1671,7 @@ class FigImage extends HTMLElement {
     this.innerHTML = this.#getInnerHTML();
     this.#updateRefs();
   }
+
   #updateRefs() {
     requestAnimationFrame(() => {
       this.chit = this.querySelector("fig-chit");
@@ -1712,6 +1713,13 @@ class FigImage extends HTMLElement {
 }
 window.customElements.define("fig-image", FigImage);
 
+/**
+ * A custom joystick input element.
+ * @attr {string} value - The current position of the joystick (e.g., "0.5,0.5").
+ * @attr {number} precision - The number of decimal places for the output.
+ * @attr {number} transform - A scaling factor for the output.
+ * @attr {boolean} text - Whether to display text inputs for X and Y values.
+ */
 class FigInputJoystick extends HTMLElement {
   constructor() {
     super();
@@ -1720,6 +1728,10 @@ class FigInputJoystick extends HTMLElement {
     this.value = [0.5, 0.5];
     this.isDragging = false;
     this.isShiftHeld = false;
+    this.plane = null;
+    this.cursor = null;
+    this.xInput = null;
+    this.yInput = null;
 
     // Initialize position
     requestAnimationFrame(() => {
@@ -1729,21 +1741,32 @@ class FigInputJoystick extends HTMLElement {
       this.transform = Number(this.transform);
       this.text = this.getAttribute("text") === "true";
 
-      this.render();
+      this.#render();
 
-      this.setupListeners();
+      this.#setupListeners();
 
-      this.cursor.style.left = `${this.position.x * 100}%`;
-      this.cursor.style.top = `${this.position.y * 100}%`;
-      if (this.text) {
-        this.xInput.value = this.position.x.toFixed(this.precision);
-        this.yInput.value = this.position.y.toFixed(this.precision);
+      this.#syncHandlePosition();
+      if (this.text && this.xInput && this.yInput) {
+        this.xInput.setAttribute(
+          "value",
+          this.position.x.toFixed(this.precision)
+        );
+        this.yInput.setAttribute(
+          "value",
+          this.position.y.toFixed(this.precision)
+        );
       }
     });
   }
+  disconnectedCallback() {
+    this.#cleanupListeners();
+  }
 
-  render() {
-    this.innerHTML = `        
+  #render() {
+    this.innerHTML = this.#getInnerHTML();
+  }
+  #getInnerHTML() {
+    return `        
           <div class="fig-input-joystick-plane-container">
             <div class="fig-input-joystick-plane">
               <div class="fig-input-joystick-guides"></div>
@@ -1775,41 +1798,49 @@ class FigInputJoystick extends HTMLElement {
         `;
   }
 
-  setupListeners() {
+  #setupListeners() {
     this.plane = this.querySelector(".fig-input-joystick-plane");
     this.cursor = this.querySelector(".fig-input-joystick-handle");
-    if (this.text) {
-      this.xInput = this.querySelector("fig-input-text[name='x']");
-      this.yInput = this.querySelector("fig-input-text[name='y']");
+    this.plane.addEventListener("mousedown", this.#handleMouseDown.bind(this));
+    this.plane.addEventListener(
+      "touchstart",
+      this.#handleTouchStart.bind(this)
+    );
+    window.addEventListener("keydown", this.#handleKeyDown.bind(this));
+    window.addEventListener("keyup", this.#handleKeyUp.bind(this));
+    if (this.text && this.xInput && this.yInput) {
+      this.xInput.addEventListener("input", this.#handleXInput.bind(this));
+      this.yInput.addEventListener("input", this.#handleYInput.bind(this));
     }
+  }
 
-    this.plane.addEventListener("mousedown", this.handleMouseDown.bind(this));
-    window.addEventListener("keydown", this.handleKeyDown.bind(this));
-    window.addEventListener("keyup", this.handleKeyUp.bind(this));
-
-    this.xInput.addEventListener("input", this.handleXInput.bind(this));
-    this.yInput.addEventListener("input", this.handleYInput.bind(this));
+  #cleanupListeners() {
+    this.plane.removeEventListener("mousedown", this.#handleMouseDown);
+    window.removeEventListener("keydown", this.#handleKeyDown);
+    window.removeEventListener("keyup", this.#handleKeyUp);
+    if (this.text && this.xInput && this.yInput) {
+      this.xInput.removeEventListener("input", this.#handleXInput);
+      this.yInput.removeEventListener("input", this.#handleYInput);
+    }
   }
 
-  handleXInput(e) {
+  #handleXInput(e) {
     e.stopPropagation();
     this.position.x = Number(e.target.value);
-    this.value = [this.position.x, this.position.y];
     this.#syncHandlePosition();
     this.#emitInputEvent();
     this.#emitChangeEvent();
   }
 
-  handleYInput(e) {
+  #handleYInput(e) {
     e.stopPropagation();
     this.position.y = Number(e.target.value);
-    this.value = [this.position.x, this.position.y];
     this.#syncHandlePosition();
     this.#emitInputEvent();
     this.#emitChangeEvent();
   }
 
-  snapToGuide(value) {
+  #snapToGuide(value) {
     if (!this.isShiftHeld) return value;
     if (value < 0.1) return 0;
     if (value > 0.9) return 1;
@@ -1817,7 +1848,7 @@ class FigInputJoystick extends HTMLElement {
     return value;
   }
 
-  snapToDiagonal(x, y) {
+  #snapToDiagonal(x, y) {
     if (!this.isShiftHeld) return { x, y };
     const diff = Math.abs(x - y);
     if (diff < 0.1) return { x: (x + y) / 2, y: (x + y) / 2 };
@@ -1830,25 +1861,22 @@ class FigInputJoystick extends HTMLElement {
     let x = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width));
     let y = Math.max(0, Math.min(1, (e.clientY - rect.top) / rect.height));
 
-    // Invert Y coordinate to match typical coordinate system
-    y = 1 - y;
-
-    x = this.snapToGuide(x);
-    y = this.snapToGuide(y);
+    x = this.#snapToGuide(x);
+    y = this.#snapToGuide(y);
 
-    const snapped = this.snapToDiagonal(x, y);
+    const snapped = this.#snapToDiagonal(x, y);
     this.position = snapped;
-    this.value = [snapped.x, snapped.y];
 
     this.cursor.style.left = `${snapped.x * 100}%`;
-    this.cursor.style.top = `${(1 - snapped.y) * 100}%`; // Invert Y for display
-    if (this.text) {
+    this.cursor.style.top = `${snapped.y * 100}%`; // Invert Y for display
+    if (this.text && this.xInput && this.yInput) {
       this.xInput.setAttribute("value", snapped.x.toFixed(3));
       this.yInput.setAttribute("value", snapped.y.toFixed(3));
     }
 
     this.#emitInputEvent();
   }
+
   #emitInputEvent() {
     this.dispatchEvent(
       new CustomEvent("input", {
@@ -1868,22 +1896,27 @@ class FigInputJoystick extends HTMLElement {
   }
 
   #syncHandlePosition() {
-    this.cursor.style.left = `${this.position.x * 100}%`;
-    this.cursor.style.top = `${(1 - this.position.y) * 100}%`;
+    if (this.cursor) {
+      this.cursor.style.left = `${this.position.x * 100}%`;
+      this.cursor.style.top = `${this.position.y * 100}%`;
+    }
   }
 
-  handleMouseDown(e) {
+  #handleMouseDown(e) {
     this.isDragging = true;
+
     this.#updatePosition(e);
 
     this.plane.style.cursor = "grabbing";
 
     const handleMouseMove = (e) => {
+      this.plane.classList.add("dragging");
       if (this.isDragging) this.#updatePosition(e);
     };
 
     const handleMouseUp = () => {
       this.isDragging = false;
+      this.plane.classList.remove("dragging");
       this.plane.style.cursor = "";
       window.removeEventListener("mousemove", handleMouseMove);
       window.removeEventListener("mouseup", handleMouseUp);
@@ -1894,13 +1927,296 @@ class FigInputJoystick extends HTMLElement {
     window.addEventListener("mouseup", handleMouseUp);
   }
 
-  handleKeyDown(e) {
+  #handleTouchStart(e) {
+    e.preventDefault();
+    this.isDragging = true;
+    this.#updatePosition(e.touches[0]);
+
+    const handleTouchMove = (e) => {
+      if (this.isDragging) this.#updatePosition(e.touches[0]);
+    };
+
+    const handleTouchEnd = () => {
+      this.isDragging = false;
+      window.removeEventListener("touchmove", handleTouchMove);
+      window.removeEventListener("touchend", handleTouchEnd);
+      this.#emitChangeEvent();
+    };
+
+    window.addEventListener("touchmove", handleTouchMove);
+    window.addEventListener("touchend", handleTouchEnd);
+  }
+
+  #handleKeyDown(e) {
     if (e.key === "Shift") this.isShiftHeld = true;
   }
 
-  handleKeyUp(e) {
+  #handleKeyUp(e) {
     if (e.key === "Shift") this.isShiftHeld = false;
   }
+  static get observedAttributes() {
+    return ["value", "precision", "transform", "text"];
+  }
+  get value() {
+    return [this.position.x, this.position.y];
+  }
+  set value(value) {
+    let v = value.toString().split(",").map(Number);
+    this.position = { x: v[0], y: v[1] };
+    this.#syncHandlePosition();
+  }
+  attributeChangedCallback(name, oldValue, newValue) {
+    if (name === "value") {
+      this.value = newValue;
+    }
+    if (name === "precision") {
+      this.precision = parseInt(newValue);
+    }
+    if (name === "transform") {
+      this.transform = Number(newValue);
+    }
+    if (name === "text" && newValue !== oldValue) {
+      this.text = newValue.toLowerCase() === "true";
+      this.#render();
+    }
+  }
 }
 
 customElements.define("fig-input-joystick", FigInputJoystick);
+
+/**
+ * A custom angle chooser input element.
+ * @attr {number} value - The current angle of the handle in degrees.
+ * @attr {number} precision - The number of decimal places for the output.
+ * @attr {boolean} text - Whether to display a text input for the angle value.
+ */
+class FigInputAngle extends HTMLElement {
+  constructor() {
+    super();
+
+    this.angle = 0; // Angle in degrees
+    this.isDragging = false;
+    this.isShiftHeld = false;
+    this.handle = null;
+    this.angleInput = null;
+    this.plane = null;
+
+    // Initialize position
+    requestAnimationFrame(() => {
+      this.precision = this.getAttribute("precision") || 1;
+      this.precision = parseInt(this.precision);
+      this.text = this.getAttribute("text") === "true";
+
+      this.#render();
+
+      this.#setupListeners();
+
+      this.#syncHandlePosition();
+      if (this.text && this.angleInput) {
+        this.angleInput.setAttribute(
+          "value",
+          this.angle.toFixed(this.precision)
+        );
+      }
+    });
+  }
+
+  disconnectedCallback() {
+    this.#cleanupListeners();
+  }
+
+  #render() {
+    this.innerHTML = this.#getInnerHTML();
+  }
+
+  #getInnerHTML() {
+    return `
+        <div class="fig-input-angle-plane">
+          <div class="fig-input-angle-handle"></div>
+        </div>
+        ${
+          this.text
+            ? `<fig-input-text 
+                type="number"
+                name="angle"
+                step="0.1"
+                value="${this.angle}"
+                min="0"
+                max="360">
+                <span slot="append">°</span>
+              </fig-input-text>`
+            : ""
+        }
+    `;
+  }
+
+  #setupListeners() {
+    this.handle = this.querySelector(".fig-input-angle-handle");
+    this.plane = this.querySelector(".fig-input-angle-plane");
+    this.angleInput = this.querySelector("fig-input-text[name='angle']");
+    this.plane.addEventListener("mousedown", this.#handleMouseDown.bind(this));
+    this.plane.addEventListener(
+      "touchstart",
+      this.#handleTouchStart.bind(this)
+    );
+    window.addEventListener("keydown", this.#handleKeyDown.bind(this));
+    window.addEventListener("keyup", this.#handleKeyUp.bind(this));
+    if (this.text && this.angleInput) {
+      this.angleInput = this.querySelector("fig-input-text");
+      this.angleInput.addEventListener(
+        "input",
+        this.#handleAngleInput.bind(this)
+      );
+    }
+  }
+
+  #cleanupListeners() {
+    this.plane.removeEventListener("mousedown", this.#handleMouseDown);
+    this.plane.removeEventListener("touchstart", this.#handleTouchStart);
+    window.removeEventListener("keydown", this.#handleKeyDown);
+    window.removeEventListener("keyup", this.#handleKeyUp);
+    if (this.text && this.angleInput) {
+      this.angleInput.removeEventListener("input", this.#handleAngleInput);
+    }
+  }
+
+  #handleAngleInput(e) {
+    e.stopPropagation();
+    this.angle = Number(e.target.value);
+    this.#syncHandlePosition();
+    this.#emitInputEvent();
+    this.#emitChangeEvent();
+  }
+
+  #snapToIncrement(angle) {
+    if (!this.isShiftHeld) return angle;
+    const increment = 45;
+    return Math.round(angle / increment) * increment;
+  }
+
+  #updateAngle(e) {
+    const rect = this.plane.getBoundingClientRect();
+    const centerX = rect.left + rect.width / 2;
+    const centerY = rect.top + rect.height / 2;
+    const deltaX = e.clientX - centerX;
+    const deltaY = e.clientY - centerY;
+    let angle = ((Math.atan2(deltaY, deltaX) * 180) / Math.PI + 360) % 360;
+
+    angle = this.#snapToIncrement(angle);
+    this.angle = angle;
+
+    this.#syncHandlePosition();
+    if (this.text && this.angleInput) {
+      this.angleInput.setAttribute("value", this.angle.toFixed(this.precision));
+    }
+
+    this.#emitInputEvent();
+  }
+
+  #emitInputEvent() {
+    this.dispatchEvent(
+      new CustomEvent("input", {
+        bubbles: true,
+        cancelable: true,
+      })
+    );
+  }
+
+  #emitChangeEvent() {
+    this.dispatchEvent(
+      new CustomEvent("change", {
+        bubbles: true,
+        cancelable: true,
+      })
+    );
+  }
+
+  #syncHandlePosition() {
+    if (this.handle) {
+      const radians = (this.angle * Math.PI) / 180;
+      const radius = this.plane.offsetWidth / 2 - this.handle.offsetWidth / 2;
+      const x = Math.cos(radians) * radius;
+      const y = Math.sin(radians) * radius;
+      this.handle.style.transform = `translate(${x}px, ${y}px)`;
+    }
+  }
+
+  #handleMouseDown(e) {
+    this.isDragging = true;
+    this.#updateAngle(e);
+
+    const handleMouseMove = (e) => {
+      if (this.isDragging) this.#updateAngle(e);
+    };
+
+    const handleMouseUp = () => {
+      this.isDragging = false;
+      window.removeEventListener("mousemove", handleMouseMove);
+      window.removeEventListener("mouseup", handleMouseUp);
+      this.#emitChangeEvent();
+    };
+
+    window.addEventListener("mousemove", handleMouseMove);
+    window.addEventListener("mouseup", handleMouseUp);
+  }
+
+  #handleTouchStart(e) {
+    e.preventDefault();
+    this.isDragging = true;
+    this.#updateAngle(e.touches[0]);
+
+    const handleTouchMove = (e) => {
+      if (this.isDragging) this.#updateAngle(e.touches[0]);
+    };
+
+    const handleTouchEnd = () => {
+      this.isDragging = false;
+      window.removeEventListener("touchmove", handleTouchMove);
+      window.removeEventListener("touchend", handleTouchEnd);
+      this.#emitChangeEvent();
+    };
+
+    window.addEventListener("touchmove", handleTouchMove);
+    window.addEventListener("touchend", handleTouchEnd);
+  }
+
+  #handleKeyDown(e) {
+    if (e.key === "Shift") this.isShiftHeld = true;
+  }
+
+  #handleKeyUp(e) {
+    if (e.key === "Shift") this.isShiftHeld = false;
+  }
+
+  static get observedAttributes() {
+    return ["value", "precision", "text"];
+  }
+
+  get value() {
+    return this.angle;
+  }
+
+  set value(value) {
+    if (isNaN(value)) {
+      console.error("Invalid value: must be a number.");
+      return;
+    }
+    this.angle = value;
+    this.#syncHandlePosition();
+  }
+
+  attributeChangedCallback(name, oldValue, newValue) {
+    if (name === "value") {
+      this.value = Number(newValue);
+    }
+    if (name === "precision") {
+      this.precision = parseInt(newValue);
+    }
+    if (name === "text" && newValue !== oldValue) {
+      this.text = newValue.toLowerCase() === "true";
+      this.#render();
+    }
+  }
+}
+
+customElements.define("fig-input-angle", FigInputAngle);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rogieking/figui3",
-  "version": "1.3.1",
+  "version": "1.3.3",
   "module": "index.ts",
   "type": "module",
   "devDependencies": {