@rogieking/figui3 1.3.3 → 1.3.4

package/example.html

@@ -25,7 +25,7 @@
     <fig-content>
         <fig-input-angle text="true"
                          value="0"
-                         onInput="console.log(event.target.value)"></fig-input-angle>
+                         onInput="console.log(event.target.adjacent, event.target.opposite)"></fig-input-angle>
         <br /><br />
         <fig-input-joystick></fig-input-joystick>
         <br /><br />

package/fig.css

@@ -415,7 +415,7 @@
   --body-medium-fontWeight: 450;
   --handle-shadow: 0px 0 0 0.75px rgba(0, 0, 0, 0.1),
     0px 1px 3px 0px rgba(0, 0, 0, 0.05), 0px 3px 8px 0px rgba(0, 0, 0, 0.05),
-    0px 0px 0.5px 0px rgba(0, 0, 0, 0.1);
+    0px 0px 0.5px 0px rgba(0, 0, 0, 0.1), var(--figma-elevation-200);
 
   --popover-min-width: 15rem;
   --figma-color-bg-ghost-hover: rgba(0, 0, 0, 0.05);
@@ -2267,6 +2267,7 @@ fig-input-joystick {
   --size: 1.5rem;
   display: inline-flex;
   gap: var(--spacer-2);
+  user-select: none;
   .fig-input-joystick-plane-container {
     display: flex;
     width: 1.5rem;
@@ -2276,6 +2277,9 @@ fig-input-joystick {
     flex-grow: 0;
     align-items: center;
     justify-content: center;
+    &:focus {
+      outline: 0;
+    }
   }
   .fig-input-joystick-plane {
     display: inline-grid;
@@ -2297,7 +2301,7 @@ fig-input-joystick {
     position: absolute;
     width: var(--size);
     height: var(--size);
-    border: 1px solid var(--figma-color-border);
+    box-shadow: inset 0 0 0 1px var(--figma-color-border);
     border-radius: var(--radius-medium);
     overflow: hidden;
     background: var(--figma-color-bg-secondary);
@@ -2307,8 +2311,8 @@ fig-input-joystick {
       position: absolute;
       height: 0;
       border-left: 1px solid var(--figma-color-border);
-      height: 100%;
-      top: 0;
+      height: calc(100% - 2px);
+      top: 1px;
       left: calc(50% - 0.5px);
       pointer-events: none;
     }
@@ -2317,9 +2321,9 @@ fig-input-joystick {
       position: absolute;
       height: 0;
       border-top: 1px solid var(--figma-color-border);
-      width: 100%;
+      width: calc(100% - 2px);
       top: calc(50% - 0.5px);
-      left: 0;
+      left: 1px;
       pointer-events: none;
     }
   }
@@ -2339,7 +2343,12 @@ fig-input-joystick {
         transparent calc(50% + 0.5px)
       ),
       var(--figma-color-bg-secondary);
+    box-shadow: inset 0 0 0 1px var(--figma-color-border-selected);
   }
+  .fig-input-joystick-plane-container:focus .fig-input-joystick-guides {
+    box-shadow: inset 0 0 0 1px var(--figma-color-border-selected);
+  }
+
   .fig-input-joystick-handle {
     position: absolute;
     z-index: 1;
@@ -2356,6 +2365,7 @@ fig-input-angle {
   --size: 1.5rem;
   display: inline-flex;
   gap: var(--spacer-2);
+  user-select: none;
 
   .fig-input-angle-plane {
     display: inline-grid;
@@ -2367,10 +2377,10 @@ fig-input-angle {
     background-color: var(--figma-color-bg-secondary);
     border-radius: 100%;
     box-shadow: inset 0 0 0 1px var(--figma-color-border);
+    &:focus,
     &.dragging {
-      cursor: grab;
-      --size: 3rem;
-      z-index: 2;
+      outline: 0;
+      box-shadow: inset 0 0 0 1px var(--figma-color-border-selected);
     }
   }
   .fig-input-angle-handle {

package/fig.js

@@ -1767,7 +1767,7 @@ class FigInputJoystick extends HTMLElement {
   }
   #getInnerHTML() {
     return `        
-          <div class="fig-input-joystick-plane-container">
+          <div class="fig-input-joystick-plane-container" tabindex="0">
             <div class="fig-input-joystick-plane">
               <div class="fig-input-joystick-guides"></div>
               <div class="fig-input-joystick-handle"></div>
@@ -1801,6 +1801,8 @@ class FigInputJoystick extends HTMLElement {
   #setupListeners() {
     this.plane = this.querySelector(".fig-input-joystick-plane");
     this.cursor = this.querySelector(".fig-input-joystick-handle");
+    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",
@@ -1938,6 +1940,7 @@ class FigInputJoystick extends HTMLElement {
 
     const handleTouchEnd = () => {
       this.isDragging = false;
+      this.plane.classList.remove("dragging");
       window.removeEventListener("touchmove", handleTouchMove);
       window.removeEventListener("touchend", handleTouchEnd);
       this.#emitChangeEvent();
@@ -1989,12 +1992,20 @@ customElements.define("fig-input-joystick", FigInputJoystick);
  * @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.
+ * @attr {number} adjacent - The adjacent value of the angle.
+ * @attr {number} opposite - The opposite value of the angle.
  */
 class FigInputAngle extends HTMLElement {
+  // Declare private fields first
+  #adjacent;
+  #opposite;
+
   constructor() {
     super();
 
     this.angle = 0; // Angle in degrees
+    this.#adjacent = 1;
+    this.#opposite = 0;
     this.isDragging = false;
     this.isShiftHeld = false;
     this.handle = null;
@@ -2031,7 +2042,7 @@ class FigInputAngle extends HTMLElement {
 
   #getInnerHTML() {
     return `
-        <div class="fig-input-angle-plane">
+        <div class="fig-input-angle-plane" tabindex="0">
           <div class="fig-input-angle-handle"></div>
         </div>
         ${
@@ -2083,11 +2094,18 @@ class FigInputAngle extends HTMLElement {
   #handleAngleInput(e) {
     e.stopPropagation();
     this.angle = Number(e.target.value);
+    this.#calculateAdjacentAndOpposite();
     this.#syncHandlePosition();
     this.#emitInputEvent();
     this.#emitChangeEvent();
   }
 
+  #calculateAdjacentAndOpposite() {
+    const radians = (this.angle * Math.PI) / 180;
+    this.#adjacent = Math.cos(radians);
+    this.#opposite = Math.sin(radians);
+  }
+
   #snapToIncrement(angle) {
     if (!this.isShiftHeld) return angle;
     const increment = 45;
@@ -2105,6 +2123,8 @@ class FigInputAngle extends HTMLElement {
     angle = this.#snapToIncrement(angle);
     this.angle = angle;
 
+    this.#calculateAdjacentAndOpposite();
+
     this.#syncHandlePosition();
     if (this.text && this.angleInput) {
       this.angleInput.setAttribute("value", this.angle.toFixed(this.precision));
@@ -2146,11 +2166,13 @@ class FigInputAngle extends HTMLElement {
     this.#updateAngle(e);
 
     const handleMouseMove = (e) => {
+      this.plane.classList.add("dragging");
       if (this.isDragging) this.#updateAngle(e);
     };
 
     const handleMouseUp = () => {
       this.isDragging = false;
+      this.plane.classList.remove("dragging");
       window.removeEventListener("mousemove", handleMouseMove);
       window.removeEventListener("mouseup", handleMouseUp);
       this.#emitChangeEvent();
@@ -2166,11 +2188,13 @@ class FigInputAngle extends HTMLElement {
     this.#updateAngle(e.touches[0]);
 
     const handleTouchMove = (e) => {
+      this.plane.classList.add("dragging");
       if (this.isDragging) this.#updateAngle(e.touches[0]);
     };
 
     const handleTouchEnd = () => {
       this.isDragging = false;
+      this.plane.classList.remove("dragging");
       window.removeEventListener("touchmove", handleTouchMove);
       window.removeEventListener("touchend", handleTouchEnd);
       this.#emitChangeEvent();
@@ -2196,12 +2220,21 @@ class FigInputAngle extends HTMLElement {
     return this.angle;
   }
 
+  get adjacent() {
+    return this.#adjacent;
+  }
+
+  get opposite() {
+    return this.#opposite;
+  }
+
   set value(value) {
     if (isNaN(value)) {
       console.error("Invalid value: must be a number.");
       return;
     }
     this.angle = value;
+    this.#calculateAdjacentAndOpposite();
     this.#syncHandlePosition();
   }
 

package/package.json

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