@rogieking/figui3 1.2.8 → 1.3.0

package/example.html

@@ -23,14 +23,18 @@
         <h2>UI3 Components</h2>
     </fig-header>
     <fig-content>
-
-        <h2>Details</h2>
+        <fig-input-joystick text="true"
+                            onInput="console.log(event.target.value)"></fig-input-joystick>
+        <fig-header>
+            <h2>Details</h2>
+        </fig-header>
         <details>
             <summary>Advanced settings</summary>
             <p>Some more content here</p>
         </details>
-
-        <h2>Avatar</h2>
+        <fig-header>
+            <h2>Avatar</h2>
+        </fig-header>
         <fig-field>
             <label>Default</label>
             <fig-avatar src="https://avatars.githubusercontent.com/u/12345678?v=4"
@@ -53,15 +57,18 @@
                         name="Rogie King"></fig-avatar>
         </fig-field>
 
-        <h2>Tabs</h2>
+        <fig-header>
+            <h2>Tabs</h2>
+        </fig-header>
         <fig-field>
             <fig-tabs>
                 <fig-tab selected>Tab #1</fig-tab>
                 <fig-tab>Tab #2</fig-tab>
             </fig-tabs>
         </fig-field>
-        <h2>Segmented control</h2>
-
+        <fig-header>
+            <h2>Segmented control</h2>
+        </fig-header>
         <fig-field>
             <fig-segmented-control>
                 <fig-segment selected>One</fig-segment>
@@ -69,7 +76,9 @@
                 <fig-segment>Three</fig-segment>
             </fig-segmented-control>
         </fig-field>
-        <h2>Image</h2>
+        <fig-header>
+            <h2>Image</h2>
+        </fig-header>
         <fig-field>
             <label>Default</label>
             <fig-image src="https://avatars.githubusercontent.com/u/12345678?v=4"></fig-image>
@@ -86,7 +95,9 @@
                        size="large"></fig-image>
         </fig-field>
         <br /><br />
-        <h2>Button</h2>
+        <fig-header>
+            <h2>Button</h2>
+        </fig-header>
         <fig-field>
             <label>Primary Button</label>
             <fig-button>Primary</fig-button>
@@ -127,8 +138,9 @@
                           fill="currentColor"></path>
                 </svg></fig-button>
         </fig-field>
-
-        <h2>Combo button</h2>
+        <fig-header>
+            <h2>Combo button</h2>
+        </fig-header>
         <fig-field>
             <label>Primary (compact dropdown</label>
             <fig-button-combo>
@@ -315,8 +327,9 @@
                 <fig-button>Save</fig-button>
             </footer>
         </fig-dialog>
-
-        <h2>Dropdown</h2>
+        <fig-header>
+            <h2>Dropdown</h2>
+        </fig-header>
         <fig-field>
             <label>Dropdown</label>
             <fig-dropdown>
@@ -392,7 +405,9 @@
                 <span slot="prepend">X</span>
             </fig-input-text>
         </fig-field>
-        <h2>Color input</h2>
+        <fig-header>
+            <h2>Color input</h2>
+        </fig-header>
         <fig-field>
             <label>Color swatch</label>
             <fig-input-color value="#FF000066"></fig-input-color>
@@ -408,11 +423,15 @@
                              alpha="true"
                              text="true"></fig-input-color>
         </fig-field>
-        <h2>Checkbox</h2>
+        <fig-header>
+            <h2>Checkbox</h2>
+        </fig-header>
         <fig-field>
             <fig-checkbox label="Checkbox"></fig-checkbox>
         </fig-field>
-        <h2>Radio</h2>
+        <fig-header>
+            <h2>Radio</h2>
+        </fig-header>
         <fig-field>
             <label>Radio buttons</label>
             <fig-radio label="Radio #1"
@@ -420,7 +439,9 @@
             <fig-radio label="Radio #2"
                        name="r1"></fig-radio>
         </fig-field>
-        <h2>Switch</h2>
+        <fig-header>
+            <h2>Switch</h2>
+        </fig-header>
         <fig-field>
             <label>Switches</label>
             <fig-switch on="true"
@@ -430,7 +451,9 @@
             <fig-switch disabled
                         label="Disabled"></fig-switch>
         </fig-field>
-        <h2>Chit</h2>
+        <fig-header>
+            <h2>Chit</h2>
+        </fig-header>
         <fig-field>
             <label>Chit</label>
             <hstack>
@@ -473,13 +496,17 @@
             </hstack>
         </fig-field>
 
-        <h2>Tooltip</h2>
+        <fig-header>
+            <h2>Tooltip</h2>
+        </fig-header>
         <p>Some paragraph text here with a
             <fig-tooltip text="Tooltip text">
                 <em>Tooltip</em>
             </fig-tooltip> for more information.
         </p>
-        <h2>Field</h2>
+        <fig-header>
+            <h2>Field</h2>
+        </fig-header>
         <fig-field direction="horizontal">
             <label>Horizontal</label>
             <fig-input-text value=""
@@ -490,7 +517,9 @@
             <fig-input-text value=""
                             placeholder="Field placeholder"></fig-input-text>
         </fig-field>
-        <h2>Slider</h2>
+        <fig-header>
+            <h2>Slider</h2>
+        </fig-header>
         <fig-field>
             <label>Default slider</label>
             <fig-slider default="25"
@@ -559,10 +588,14 @@
                 </datalist>
             </fig-slider>
         </fig-field>
-        <h2>Spinner</h2>
+        <fig-header>
+            <h2>Spinner</h2>
+        </fig-header>
         <fig-spinner></fig-spinner>
 
-        <h2>Misc.</h2>
+        <fig-header>
+            <h2>Misc.</h2>
+        </fig-header>
         <hstack>
             <fig-tooltip text="Tooltip"
                          delay="0">

package/fig.css

@@ -444,7 +444,7 @@
 @media (prefers-color-scheme: dark) {
   :root {
     --icon-chevron: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.87868 7.12132L8 9.24264L10.1213 7.12132' stroke='rgb(255 255 255 / 100%)' stroke-linecap='round'/%3E%3C/svg%3E%0A");
-    --handle-shadow: 0px 0 0 0.75px rgba(255, 255, 255, 0.1),
+    --handle-shadow: 0px 0 0 0.75px 0px 0 0 0.75px rgba(0, 0, 0, 0.1),
       0px 0px 0.5px 0px rgba(255, 255, 255, 0.1);
     --figma-color-bg-ghost-hover: rgba(255, 255, 255, 0.05);
     --figma-color-bordertranslucent: rgba(255, 255, 255, 0.1);
@@ -1224,7 +1224,7 @@ input[type="checkbox"].switch:after {
   height: calc(1rem - 2px);
   border-radius: 0.5rem;
   margin: 1px;
-  transform: translate(calc(-0.5rem - 1px));
+  transform: translate(calc(-0.5rem));
   transition: var(--input-transition);
   box-shadow: var(--handle-shadow);
 }
@@ -1247,6 +1247,9 @@ input[type="checkbox"].switch:checked:after {
 input[type="checkbox"].switch:disabled {
   background-color: var(--figma-color-bg-tertiary);
   cursor: not-allowed;
+  &:after {
+    background-color: var(--figma-color-bg);
+  }
 }
 
 input[type="checkbox"].switch:focus {
@@ -2271,3 +2274,87 @@ fig-segmented-control {
     transform: rotate(360deg);
   }
 }
+
+fig-input-joystick {
+  --size: 1.5rem;
+  display: inline-flex;
+  gap: var(--spacer-2);
+  .fig-input-joystick-plane-container {
+    display: flex;
+    width: 1.5rem;
+    height: 1.5rem;
+    place-items: center;
+  }
+  .fig-input-joystick-plane {
+    display: inline-grid;
+    place-items: center;
+    position: relative;
+    width: var(--size);
+    height: var(--size);
+    flex-shrink: 0;
+    &:hover {
+      cursor: grab;
+      --size: 3rem;
+    }
+  }
+  .fig-input-joystick-plane > * {
+    grid-area: 1/1;
+  }
+  .fig-input-joystick-guides {
+    position: absolute;
+    width: var(--size);
+    height: var(--size);
+    border: 1px solid var(--figma-color-border);
+    border-radius: var(--radius-medium);
+    overflow: hidden;
+    background: var(--figma-color-bg-secondary);
+
+    &:before {
+      content: "";
+      position: absolute;
+      height: 0;
+      border-left: 1px solid var(--figma-color-border);
+      height: 100%;
+      top: 0;
+      left: calc(50% - 0.5px);
+      pointer-events: none;
+    }
+    &:after {
+      content: "";
+      position: absolute;
+      height: 0;
+      border-top: 1px solid var(--figma-color-border);
+      width: 100%;
+      top: calc(50% - 0.5px);
+      left: 0;
+      pointer-events: none;
+    }
+  }
+  .fig-input-joystick-plane:hover .fig-input-joystick-guides {
+    background: linear-gradient(
+        45deg,
+        transparent calc(50% - 0.5px),
+        var(--figma-color-border) calc(50% - 0.5px),
+        var(--figma-color-border) calc(50% + 0.5px),
+        transparent calc(50% + 0.5px)
+      ),
+      linear-gradient(
+        -45deg,
+        transparent calc(50% - 0.5px),
+        var(--figma-color-border) calc(50% - 0.5px),
+        var(--figma-color-border) calc(50% + 0.5px),
+        transparent calc(50% + 0.5px)
+      ),
+      var(--figma-color-bg-secondary);
+  }
+  .fig-input-joystick-handle {
+    position: absolute;
+    z-index: 1;
+    width: 0.5rem;
+    height: 0.5rem;
+    background: var(--figma-color-icon-onbrand);
+    box-shadow: var(--handle-shadow);
+    border-radius: 50%;
+    transform: translate(-50%, -50%);
+  }
+}

package/fig.js

@@ -892,6 +892,8 @@ class FigInputText extends HTMLElement {
     this.value = this.getAttribute("value") || "";
     this.type = this.getAttribute("type") || "text";
     this.placeholder = this.getAttribute("placeholder") || "";
+    this.name = this.getAttribute("name") || null;
+
     if (this.type === "number") {
       if (this.getAttribute("step")) {
         this.step = Number(this.getAttribute("step"));
@@ -910,6 +912,7 @@ class FigInputText extends HTMLElement {
 
     let html = `<input 
       type="${this.type}" 
+      ${this.name ? `name="${this.name}"` : ""}
       placeholder="${this.placeholder}"
       value="${
         this.type === "number" ? this.#transformNumber(this.value) : this.value
@@ -1038,6 +1041,7 @@ class FigInputText extends HTMLElement {
       "min",
       "max",
       "transform",
+      "name",
     ];
   }
 
@@ -1078,8 +1082,12 @@ class FigInputText extends HTMLElement {
             this.input.setAttribute(name, newValue);
           }
           break;
+        case "name":
+          this[name] = this.input[name] = newValue;
+          this.input.setAttribute("name", newValue);
+          break;
         default:
-          this[name] = this.input[name] = value;
+          this[name] = this.input[name] = newValue;
           break;
       }
     }
@@ -1703,3 +1711,194 @@ class FigImage extends HTMLElement {
   }
 }
 window.customElements.define("fig-image", FigImage);
+
+class FigInputJoystick extends HTMLElement {
+  constructor() {
+    super();
+
+    this.position = { x: 0.5, y: 0.5 };
+    this.value = [0.5, 0.5];
+    this.isDragging = false;
+    this.isShiftHeld = false;
+
+    // Initialize position
+    requestAnimationFrame(() => {
+      this.precision = this.getAttribute("precision") || 3;
+      this.precision = parseInt(this.precision);
+      this.transform = this.getAttribute("transform") || 1;
+      this.transform = Number(this.transform);
+      this.text = this.getAttribute("text") === "true";
+
+      this.render();
+
+      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);
+      }
+    });
+  }
+
+  render() {
+    this.innerHTML = `        
+          <div class="fig-input-joystick-plane-container">
+            <div class="fig-input-joystick-plane">
+              <div class="fig-input-joystick-guides"></div>
+              <div class="fig-input-joystick-handle"></div>
+            </div>
+          </div>
+          ${
+            this.text
+              ? `<fig-input-text 
+                  type="number"
+                  name="x"
+                  step="0.01"
+                  value="${this.position.x}"
+                  min="0"
+                  max="1">
+                  <span slot="prepend">X</span>
+                </fig-input-text>
+                <fig-input-text 
+                  type="number" 
+                  name="y" 
+                  step="0.01" 
+                  min="0" 
+                  max="1"
+                  value="${this.position.y}"> 
+                  <span slot="prepend">Y</span>
+                </fig-input-text>`
+              : ""
+          }
+        `;
+  }
+
+  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));
+    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));
+  }
+
+  handleXInput(e) {
+    e.stopPropagation();
+    this.position.x = e.target.value;
+    this.#syncHandlePosition();
+    this.#emitInputEvent();
+    this.#emitChangeEvent();
+  }
+
+  handleYInput(e) {
+    e.stopPropagation();
+    this.position.y = e.target.value;
+    this.#syncHandlePosition();
+    this.#emitInputEvent();
+    this.#emitChangeEvent();
+  }
+
+  snapToGuide(value) {
+    if (!this.isShiftHeld) return value;
+    if (value < 0.1) return 0;
+    if (value > 0.9) return 1;
+    if (value > 0.4 && value < 0.6) return 0.5;
+    return value;
+  }
+
+  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 };
+    if (Math.abs(1 - x - y) < 0.1) return { x, y: 1 - x };
+    return { x, y };
+  }
+
+  #updatePosition(e) {
+    const rect = this.plane.getBoundingClientRect();
+    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);
+
+    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.xInput.setAttribute("value", snapped.x.toFixed(3));
+      this.yInput.setAttribute("value", snapped.y.toFixed(3));
+    }
+
+    this.#emitInputEvent();
+  }
+  #emitInputEvent() {
+    this.dispatchEvent(
+      new CustomEvent("input", {
+        bubbles: true,
+        cancelable: true,
+      })
+    );
+  }
+
+  #emitChangeEvent() {
+    this.dispatchEvent(
+      new CustomEvent("change", {
+        bubbles: true,
+        cancelable: true,
+      })
+    );
+  }
+
+  #syncHandlePosition() {
+    this.cursor.style.left = `${this.position.x * 100}%`;
+    this.cursor.style.top = `${(1 - this.position.y) * 100}%`;
+  }
+
+  handleMouseDown(e) {
+    this.isDragging = true;
+    this.#updatePosition(e);
+
+    this.plane.style.cursor = "grabbing";
+
+    const handleMouseMove = (e) => {
+      if (this.isDragging) this.#updatePosition(e);
+    };
+
+    const handleMouseUp = () => {
+      this.isDragging = false;
+      this.plane.style.cursor = "";
+      window.removeEventListener("mousemove", handleMouseMove);
+      window.removeEventListener("mouseup", handleMouseUp);
+      this.#emitChangeEvent();
+    };
+
+    window.addEventListener("mousemove", handleMouseMove);
+    window.addEventListener("mouseup", handleMouseUp);
+  }
+
+  handleKeyDown(e) {
+    if (e.key === "Shift") this.isShiftHeld = true;
+  }
+
+  handleKeyUp(e) {
+    if (e.key === "Shift") this.isShiftHeld = false;
+  }
+}
+
+customElements.define("fig-input-joystick", FigInputJoystick);

package/package.json

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