@rogieking/figui3 9.0.13 → 9.1.0

package/fig-lab.js

@@ -2533,676 +2533,6 @@ class FigCanvasControl extends HTMLElement {
   }
 }
 figLabDefineElement("fig-canvas-control", FigCanvasControl);
-/* Angle Input */
-/**
- * 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.
- * @attr {boolean} dial - Whether to display the circular dial control. Defaults to true.
- * @attr {number} adjacent - The adjacent value of the angle.
- * @attr {number} opposite - The opposite value of the angle.
- * @attr {boolean} rotations - Whether to display a rotation count (×N) when rotations > 1. Defaults to false.
- */
-class FigInputAngle extends HTMLElement {
-  // Private fields
-  #adjacent;
-  #opposite;
-  #prevRawAngle = null;
-  #boundHandleRawChange;
-  #boundHandleMouseDown;
-  #boundHandleTouchStart;
-  #boundHandleKeyDown;
-  #boundHandleKeyUp;
-  #boundHandleAngleInput;
-  #boundHandleDialKeyDown;
-  #gestureController = null;
-  #gestureCleanup = null;
-
-  constructor() {
-    super();
-
-    this.angle = 0;
-    this.#adjacent = 1;
-    this.#opposite = 0;
-    this.isDragging = false;
-    this.isShiftHeld = false;
-    this.handle = null;
-    this.angleInput = null;
-    this.plane = null;
-    this.units = "°";
-    this.min = null;
-    this.max = null;
-    this.dial = true;
-    this.showRotations = false;
-    this.rotationSpan = null;
-
-    this.#boundHandleRawChange = this.#handleRawChange.bind(this);
-    this.#boundHandleMouseDown = this.#handleMouseDown.bind(this);
-    this.#boundHandleTouchStart = this.#handleTouchStart.bind(this);
-    this.#boundHandleKeyDown = this.#handleKeyDown.bind(this);
-    this.#boundHandleKeyUp = this.#handleKeyUp.bind(this);
-    this.#boundHandleAngleInput = this.#handleAngleInput.bind(this);
-    this.#boundHandleDialKeyDown = this.#handleDialKeyDown.bind(this);
-  }
-
-  connectedCallback() {
-    requestAnimationFrame(() => {
-      if (!this.isConnected) return;
-      this.precision = this.getAttribute("precision") || 1;
-      this.precision = parseInt(this.precision);
-      this.text = this.getAttribute("text") === "true";
-
-      let rawUnits = this.getAttribute("units") || "°";
-      if (rawUnits === "deg") rawUnits = "°";
-      this.units = rawUnits;
-
-      this.min = this.hasAttribute("min")
-        ? Number(this.getAttribute("min"))
-        : null;
-      this.max = this.hasAttribute("max")
-        ? Number(this.getAttribute("max"))
-        : null;
-      this.dial = this.#readBooleanAttribute("dial", true);
-      this.showRotations = this.#readRotationsEnabled();
-
-      this.#render();
-      this.#setupListeners();
-
-      this.#syncHandlePosition();
-      if (this.text && this.angleInput) {
-        this.angleInput.setAttribute(
-          "value",
-          this.angle.toFixed(this.precision),
-        );
-      }
-    });
-  }
-
-  disconnectedCallback() {
-    this.#cancelGesture();
-    this.#cleanupListeners();
-  }
-
-  #render() {
-    this.#cancelGesture();
-    this.#cleanupListeners();
-    const step = this.#getStepForUnit();
-    const disabled = this.#isDisabled();
-    const name =
-      this.getAttribute("aria-label") || this.getAttribute("name") || "Angle";
-    const ariaMin = this.min ?? this.#fromDegrees(0);
-    const ariaMax = this.max ?? this.#fromDegrees(360);
-    const children = [];
-
-    if (this.dial) {
-      children.push(
-        figLabCreateElement(
-          "div",
-          {
-            className: "fig-input-angle-plane",
-            role: "slider",
-            tabindex: disabled ? "-1" : "0",
-            "aria-label": name,
-            "aria-valuemin": ariaMin,
-            "aria-valuemax": ariaMax,
-            "aria-valuenow": this.angle,
-            "aria-valuetext": `${this.angle.toFixed(this.precision)}${this.units}`,
-            "aria-disabled": disabled ? "true" : null,
-          },
-          figLabCreateElement("div", {
-            className: "fig-input-angle-handle",
-          }),
-        ),
-      );
-    }
-
-    if (this.text) {
-      children.push(
-        figLabCreateElement(
-          "fig-input-number",
-          {
-            name: "angle",
-            step,
-            value: this.angle,
-            min: this.min,
-            max: this.max,
-            units: this.units,
-            "aria-label": name,
-            disabled,
-          },
-          this.showRotations
-            ? figLabCreateElement("span", {
-                slot: "append",
-                className: "fig-input-angle-rotations",
-              })
-            : null,
-        ),
-      );
-    }
-
-    this.replaceChildren(...children);
-  }
-
-  #readBooleanAttribute(name, defaultValue = false) {
-    const value = this.getAttribute(name);
-    if (value === null) return defaultValue;
-    const normalized = value.trim().toLowerCase();
-    if (normalized === "" || normalized === "true") return true;
-    if (normalized === "false") return false;
-    return true;
-  }
-
-  #readRotationsEnabled() {
-    if (this.hasAttribute("rotations")) {
-      return this.#readBooleanAttribute("rotations", false);
-    }
-    if (this.hasAttribute("show-rotations")) {
-      return this.#readBooleanAttribute("show-rotations", false);
-    }
-    return false;
-  }
-
-  #getRotationCount() {
-    const degrees = Math.abs(this.#toDegrees(this.angle));
-    return Math.floor(degrees / 360);
-  }
-
-  #isDisabled() {
-    return figLabBooleanAttribute(this, "disabled");
-  }
-
-  #clampValue(value) {
-    let next = Number(value);
-    if (!Number.isFinite(next)) return this.angle;
-    if (this.min !== null && Number.isFinite(this.min)) {
-      next = Math.max(this.min, next);
-    }
-    if (this.max !== null && Number.isFinite(this.max)) {
-      next = Math.min(this.max, next);
-    }
-    return next;
-  }
-
-  #setValue(value, { reflect = true } = {}) {
-    const next = this.#clampValue(value);
-    this.angle = next;
-    this.#calculateAdjacentAndOpposite();
-    if (reflect) {
-      const serialized = String(next);
-      if (this.getAttribute("value") !== serialized) {
-        this.setAttribute("value", serialized);
-      }
-    }
-    this.#syncHandlePosition();
-    if (this.angleInput) {
-      this.angleInput.value = next.toFixed(this.precision);
-    }
-    this.#syncDialState();
-    this.#updateRotationDisplay();
-  }
-
-  #syncDialState() {
-    if (!this.plane) return;
-    this.plane.setAttribute("aria-valuenow", String(this.angle));
-    this.plane.setAttribute(
-      "aria-valuetext",
-      `${this.angle.toFixed(this.precision)}${this.units}`,
-    );
-  }
-
-  #updateRotationDisplay() {
-    if (!this.rotationSpan) return;
-    const rotations = this.#getRotationCount();
-    if (rotations > 1) {
-      this.rotationSpan.textContent = `\u00d7${rotations}`;
-      this.rotationSpan.style.display = "";
-    } else {
-      this.rotationSpan.textContent = "";
-      this.rotationSpan.style.display = "none";
-    }
-  }
-
-  #getStepForUnit() {
-    switch (this.units) {
-      case "rad":
-        return 0.01;
-      case "turn":
-        return 0.001;
-      default:
-        return 0.1;
-    }
-  }
-
-  #toDegrees(value) {
-    switch (this.units) {
-      case "rad":
-        return (value * 180) / Math.PI;
-      case "turn":
-        return value * 360;
-      default:
-        return value;
-    }
-  }
-
-  #fromDegrees(degrees) {
-    switch (this.units) {
-      case "rad":
-        return (degrees * Math.PI) / 180;
-      case "turn":
-        return degrees / 360;
-      default:
-        return degrees;
-    }
-  }
-
-  #convertAngle(value, fromUnit, toUnit) {
-    let degrees;
-    switch (fromUnit) {
-      case "rad":
-        degrees = (value * 180) / Math.PI;
-        break;
-      case "turn":
-        degrees = value * 360;
-        break;
-      default:
-        degrees = value;
-    }
-    switch (toUnit) {
-      case "rad":
-        return (degrees * Math.PI) / 180;
-      case "turn":
-        return degrees / 360;
-      default:
-        return degrees;
-    }
-  }
-
-  #setupListeners() {
-    this.handle = this.querySelector(".fig-input-angle-handle");
-    this.plane = this.querySelector(".fig-input-angle-plane");
-    this.angleInput = this.querySelector("fig-input-number[name='angle']");
-    this.rotationSpan = this.querySelector(".fig-input-angle-rotations");
-    this.#updateRotationDisplay();
-    this.plane?.addEventListener("mousedown", this.#boundHandleMouseDown);
-    this.plane?.addEventListener("touchstart", this.#boundHandleTouchStart);
-    this.plane?.addEventListener("keydown", this.#boundHandleDialKeyDown);
-    window.addEventListener("keydown", this.#boundHandleKeyDown);
-    window.addEventListener("keyup", this.#boundHandleKeyUp);
-    if (this.text && this.angleInput) {
-      this.angleInput.addEventListener("input", this.#boundHandleAngleInput);
-      this.angleInput.addEventListener("change", this.#boundHandleAngleInput);
-    }
-    this.addEventListener("change", this.#boundHandleRawChange, true);
-  }
-
-  #cleanupListeners() {
-    this.plane?.removeEventListener("mousedown", this.#boundHandleMouseDown);
-    this.plane?.removeEventListener("touchstart", this.#boundHandleTouchStart);
-    this.plane?.removeEventListener("keydown", this.#boundHandleDialKeyDown);
-    window.removeEventListener("keydown", this.#boundHandleKeyDown);
-    window.removeEventListener("keyup", this.#boundHandleKeyUp);
-    if (this.text && this.angleInput) {
-      this.angleInput.removeEventListener("input", this.#boundHandleAngleInput);
-      this.angleInput.removeEventListener("change", this.#boundHandleAngleInput);
-    }
-    this.removeEventListener("change", this.#boundHandleRawChange, true);
-  }
-
-  #handleRawChange(e) {
-    if (!e.target?.matches?.("input")) return;
-    const raw = e.target.value;
-    const match = raw.match(/^(-?\d*\.?\d+)\s*(turn|rad|deg|°)$/i);
-    if (match) {
-      const num = parseFloat(match[1]);
-      let fromUnit = match[2].toLowerCase();
-      if (fromUnit === "deg") fromUnit = "°";
-      if (fromUnit !== this.units) {
-        const converted = this.#convertAngle(num, fromUnit, this.units);
-        e.target.value = String(converted);
-      }
-    }
-  }
-
-  #handleAngleInput(e) {
-    e.stopPropagation();
-    if (this.#isDisabled()) return;
-    this.#setValue(Number(e.target.value));
-    if (e.type === "change") this.#emitChangeEvent();
-    else this.#emitInputEvent();
-  }
-
-  #calculateAdjacentAndOpposite() {
-    const degrees = this.#toDegrees(this.angle);
-    const radians = (degrees * Math.PI) / 180;
-    this.#adjacent = Math.cos(radians);
-    this.#opposite = Math.sin(radians);
-  }
-
-  #snapToIncrement(angle) {
-    if (!this.isShiftHeld) return angle;
-    const increment = 45;
-    return Math.round(angle / increment) * increment;
-  }
-
-  #getRawAngle(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;
-    return (Math.atan2(deltaY, deltaX) * 180) / Math.PI;
-  }
-
-  #updateAngle(e) {
-    let rawAngle = this.#getRawAngle(e);
-    let normalizedAngle = ((rawAngle % 360) + 360) % 360;
-    normalizedAngle = this.#snapToIncrement(normalizedAngle);
-
-    const isBounded = this.min !== null || this.max !== null;
-
-    if (isBounded) {
-      this.angle = this.#clampValue(this.#fromDegrees(normalizedAngle));
-    } else {
-      if (this.#prevRawAngle === null) {
-        this.#prevRawAngle = normalizedAngle;
-        const currentDeg = this.#toDegrees(this.angle);
-        const currentMod = ((currentDeg % 360) + 360) % 360;
-        let delta = normalizedAngle - currentMod;
-        if (delta > 180) delta -= 360;
-        if (delta < -180) delta += 360;
-        this.angle = this.#clampValue(this.angle + this.#fromDegrees(delta));
-      } else {
-        let delta = normalizedAngle - this.#prevRawAngle;
-        if (delta > 180) delta -= 360;
-        if (delta < -180) delta += 360;
-        this.angle = this.#clampValue(this.angle + this.#fromDegrees(delta));
-        this.#prevRawAngle = normalizedAngle;
-      }
-    }
-
-    this.#calculateAdjacentAndOpposite();
-    this.setAttribute("value", String(this.angle));
-
-    this.#syncHandlePosition();
-    if (this.text && this.angleInput) {
-      this.angleInput.setAttribute("value", this.angle.toFixed(this.precision));
-    }
-    this.#updateRotationDisplay();
-    this.#syncDialState();
-
-    this.#emitInputEvent();
-  }
-
-  #emitInputEvent() {
-    this.dispatchEvent(
-      new CustomEvent("input", {
-        bubbles: true,
-        cancelable: true,
-        detail: { value: this.value, angle: this.angle },
-      }),
-    );
-  }
-
-  #emitChangeEvent() {
-    this.dispatchEvent(
-      new CustomEvent("change", {
-        bubbles: true,
-        cancelable: true,
-        detail: { value: this.value, angle: this.angle },
-      }),
-    );
-  }
-
-  #syncHandlePosition() {
-    if (this.handle) {
-      const degrees = this.#toDegrees(this.angle);
-      const radians = (degrees * 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) {
-    if (this.#isDisabled() || e.button !== 0) return;
-    this.#cancelGesture();
-    this.isDragging = true;
-    this.#prevRawAngle = null;
-    this.#updateAngle(e);
-
-    const handleMouseMove = (e) => {
-      this.plane.classList.add("dragging");
-      if (this.isDragging) this.#updateAngle(e);
-    };
-
-    const controller = new AbortController();
-    const finish = (commit = false) => {
-      this.isDragging = false;
-      this.#prevRawAngle = null;
-      this.plane.classList.remove("dragging");
-      controller.abort();
-      if (this.#gestureController === controller) {
-        this.#gestureController = null;
-        this.#gestureCleanup = null;
-      }
-      if (commit) this.#emitChangeEvent();
-    };
-    this.#gestureController = controller;
-    this.#gestureCleanup = finish;
-
-    window.addEventListener("mousemove", handleMouseMove, {
-      signal: controller.signal,
-    });
-    window.addEventListener("mouseup", () => finish(true), {
-      signal: controller.signal,
-    });
-    window.addEventListener("blur", () => finish(false), {
-      signal: controller.signal,
-    });
-  }
-
-  #handleTouchStart(e) {
-    if (this.#isDisabled()) return;
-    e.preventDefault();
-    this.#cancelGesture();
-    this.isDragging = true;
-    this.#prevRawAngle = null;
-    this.#updateAngle(e.touches[0]);
-
-    const handleTouchMove = (e) => {
-      this.plane.classList.add("dragging");
-      if (this.isDragging) this.#updateAngle(e.touches[0]);
-    };
-
-    const controller = new AbortController();
-    const finish = (commit = false) => {
-      this.isDragging = false;
-      this.#prevRawAngle = null;
-      this.plane.classList.remove("dragging");
-      controller.abort();
-      if (this.#gestureController === controller) {
-        this.#gestureController = null;
-        this.#gestureCleanup = null;
-      }
-      if (commit) this.#emitChangeEvent();
-    };
-    this.#gestureController = controller;
-    this.#gestureCleanup = finish;
-
-    window.addEventListener("touchmove", handleTouchMove, {
-      signal: controller.signal,
-    });
-    window.addEventListener("touchend", () => finish(true), {
-      signal: controller.signal,
-    });
-    window.addEventListener("touchcancel", () => finish(false), {
-      signal: controller.signal,
-    });
-  }
-
-  #cancelGesture() {
-    this.#gestureCleanup?.(false);
-    this.#gestureController?.abort();
-    this.#gestureController = null;
-    this.#gestureCleanup = null;
-    this.isDragging = false;
-    this.#prevRawAngle = null;
-    this.plane?.classList.remove("dragging");
-  }
-
-  #handleDialKeyDown(e) {
-    if (this.#isDisabled()) return;
-    const step = this.#getStepForUnit() * (e.shiftKey ? 10 : 1);
-    let next = this.angle;
-    if (e.key === "ArrowLeft" || e.key === "ArrowDown") next -= step;
-    else if (e.key === "ArrowRight" || e.key === "ArrowUp") next += step;
-    else if (e.key === "Home") next = this.min ?? this.#fromDegrees(0);
-    else if (e.key === "End") next = this.max ?? this.#fromDegrees(360);
-    else return;
-    e.preventDefault();
-    e.stopPropagation();
-    this.#setValue(next);
-    this.#emitInputEvent();
-    this.#emitChangeEvent();
-  }
-
-  #handleKeyDown(e) {
-    if (e.key === "Shift") this.isShiftHeld = true;
-  }
-
-  #handleKeyUp(e) {
-    if (e.key === "Shift") this.isShiftHeld = false;
-  }
-
-  focus() {
-    this.plane?.focus();
-  }
-
-  static get observedAttributes() {
-    return [
-      "value",
-      "precision",
-      "text",
-      "min",
-      "max",
-      "units",
-      "dial",
-      "rotations",
-      "show-rotations",
-      "disabled",
-      "aria-label",
-      "name",
-    ];
-  }
-
-  get value() {
-    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.#setValue(Number(value));
-  }
-
-  attributeChangedCallback(name, oldValue, newValue) {
-    switch (name) {
-      case "value":
-        if (this.isDragging) break;
-        if (newValue !== null) this.#setValue(Number(newValue), { reflect: false });
-        break;
-      case "precision":
-        this.precision = parseInt(newValue);
-        break;
-      case "text":
-        if (newValue !== oldValue) {
-          this.text = newValue?.toLowerCase() === "true";
-          if (this.isConnected) {
-            this.#render();
-            this.#setupListeners();
-            this.#syncHandlePosition();
-          }
-        }
-        break;
-      case "dial":
-        this.dial = this.#readBooleanAttribute("dial", true);
-        if (this.isConnected) {
-          this.#render();
-          this.#setupListeners();
-          this.#syncHandlePosition();
-        }
-        break;
-      case "units": {
-        let units = newValue || "°";
-        if (units === "deg") units = "°";
-        this.units = units;
-        if (this.isConnected) {
-          this.#render();
-          this.#setupListeners();
-          this.#syncHandlePosition();
-        }
-        break;
-      }
-      case "min":
-        this.min = newValue !== null ? Number(newValue) : null;
-        this.#setValue(this.angle);
-        if (this.isConnected) {
-          this.#render();
-          this.#setupListeners();
-          this.#syncHandlePosition();
-        }
-        break;
-      case "max":
-        this.max = newValue !== null ? Number(newValue) : null;
-        this.#setValue(this.angle);
-        if (this.isConnected) {
-          this.#render();
-          this.#setupListeners();
-          this.#syncHandlePosition();
-        }
-        break;
-      case "disabled":
-        this.#cancelGesture();
-        if (this.isConnected) {
-          this.#render();
-          this.#setupListeners();
-          this.#syncHandlePosition();
-        }
-        break;
-      case "aria-label":
-      case "name":
-        if (this.isConnected) {
-          this.#render();
-          this.#setupListeners();
-          this.#syncHandlePosition();
-        }
-        break;
-      case "rotations":
-      case "show-rotations":
-        this.showRotations = this.#readRotationsEnabled();
-        if (this.isConnected) {
-          this.#render();
-          this.#setupListeners();
-          this.#syncHandlePosition();
-        }
-        break;
-    }
-  }
-}
-figLabDefineElement("fig-input-angle", FigInputAngle);
-
 /* Reorder wrapper */
 class FigReorder extends HTMLElement {
   static observedAttributes = ["axis", "handle", "disabled"];
@@ -3219,7 +2549,7 @@ class FigReorder extends HTMLElement {
     "fig-input-number",
     "fig-input-gradient",
     "fig-easing-curve",
-    "fig-input-angle",
+    "fig-angle",
     "fig-input-wheel",
     "fig-joystick",
     "fig-origin-grid",