@rogieking/figui3 2.37.0 → 2.38.0

package/fig.js

@@ -6858,6 +6858,460 @@ class Fig3DRotate extends HTMLElement {
 }
 customElements.define("fig-3d-rotate", Fig3DRotate);
 
+/**
+ * A transform-origin grid control with draggable handle.
+ * @attr {string} value - CSS transform-origin pair, e.g. "50% 50%".
+ * @attr {number} precision - Decimal places for percentage output (default 0).
+ * @attr {boolean} drag - Enable handle dragging (default true).
+ * @attr {boolean} fields - Show X/Y percentage fields when present/true (default false).
+ */
+class FigOriginGrid extends HTMLElement {
+  #x = 50;
+  #y = 50;
+  #precision = 0;
+  #grid = null;
+  #cells = [];
+  #handle = null;
+  #xInput = null;
+  #yInput = null;
+  #isDragging = false;
+  #isSyncingValueAttr = false;
+  #activePointerId = null;
+  #boundHandlePointerMove = null;
+  #boundHandlePointerEnd = null;
+
+  static SNAP_POINTS = [0, 16.6667, 33.3333, 50, 66.6667, 83.3333, 100];
+
+  static get observedAttributes() {
+    return ["value", "precision", "aspect-ratio", "drag", "fields"];
+  }
+
+  connectedCallback() {
+    this.#precision = parseInt(this.getAttribute("precision") || "0");
+    this.#syncAspectRatioVar(this.getAttribute("aspect-ratio"));
+    this.#applyIncomingValue(this.getAttribute("value"));
+
+    this.#render();
+    this.#syncDragState();
+    this.#syncValueAttribute();
+  }
+
+  disconnectedCallback() {
+    this.#isDragging = false;
+    this.#detachHandleDragListeners();
+  }
+
+  get value() {
+    const p = this.#precision;
+    return `${this.#x.toFixed(p)}% ${this.#y.toFixed(p)}%`;
+  }
+
+  set value(v) {
+    this.setAttribute("value", v);
+  }
+
+  attributeChangedCallback(name, oldValue, newValue) {
+    if (name === "aspect-ratio") {
+      this.#syncAspectRatioVar(newValue);
+      return;
+    }
+    if (name === "drag") {
+      this.#syncDragState();
+      return;
+    }
+    if (name === "fields") {
+      this.#render();
+      this.#syncDragState();
+      this.#syncValueAttribute();
+      return;
+    }
+    if (name === "precision") {
+      this.#precision = parseInt(newValue || "0");
+      this.#syncValueInputs();
+      this.#syncValueAttribute();
+      return;
+    }
+    if (name === "value") {
+      if (this.#isSyncingValueAttr || this.#isDragging) return;
+      this.#applyIncomingValue(newValue);
+      this.#syncHandlePosition();
+      this.#syncOverflowState();
+      this.#syncValueInputs();
+    }
+  }
+
+  get #dragEnabled() {
+    const attr = this.getAttribute("drag");
+    return attr === null || attr.toLowerCase() !== "false";
+  }
+
+  get #fieldsEnabled() {
+    const attr = this.getAttribute("fields");
+    if (attr === null) return false;
+    return attr.toLowerCase() !== "false";
+  }
+
+  #syncAspectRatioVar(value) {
+    if (value && value.trim()) {
+      this.style.setProperty("--aspect-ratio", value.trim());
+    } else {
+      this.style.removeProperty("--aspect-ratio");
+    }
+  }
+
+  #syncDragState() {
+    if (!this.#grid) return;
+    this.#grid.classList.toggle("drag-disabled", !this.#dragEnabled);
+  }
+
+  #clampPercentage(value) {
+    return Math.max(0, Math.min(100, value));
+  }
+
+  #parseAxisValue(raw, axis) {
+    const token = (raw || "").trim().toLowerCase();
+    if (!token) return axis === "x" ? this.#x : this.#y;
+
+    const keywordMap =
+      axis === "x"
+        ? { left: 0, center: 50, right: 100 }
+        : { top: 0, center: 50, bottom: 100 };
+    if (token in keywordMap) return keywordMap[token];
+
+    const numeric = Number.parseFloat(token.replace("%", ""));
+    if (Number.isFinite(numeric)) return numeric;
+
+    return axis === "x" ? this.#x : this.#y;
+  }
+
+  #parseValue(value) {
+    const parts = value
+      .trim()
+      .replace(/,/g, " ")
+      .split(/\s+/)
+      .filter(Boolean);
+    if (parts.length < 1) return;
+
+    if (parts.length === 1) {
+      const same = this.#parseAxisValue(parts[0], "x");
+      this.#x = same;
+      this.#y = same;
+      return;
+    }
+
+    this.#x = this.#parseAxisValue(parts[0], "x");
+    this.#y = this.#parseAxisValue(parts[1], "y");
+  }
+
+  #applyIncomingValue(value) {
+    const normalized = typeof value === "string" ? value.trim() : "";
+    if (!normalized) {
+      this.#x = 50;
+      this.#y = 50;
+      return;
+    }
+    this.#parseValue(normalized);
+  }
+
+  #render() {
+    const cells = Array.from({ length: 9 }, (_, index) => {
+      const col = index % 3;
+      const row = Math.floor(index / 3);
+      return `<span class="origin-grid-cell" data-col="${col}" data-row="${row}">
+        <span class="origin-grid-dot"></span>
+      </span>`;
+    }).join("");
+
+    const xValue = this.#x.toFixed(this.#precision);
+    const yValue = this.#y.toFixed(this.#precision);
+    const fieldsMarkup = this.#fieldsEnabled
+      ? `<div class="origin-values">
+      <fig-input-number name="x" value="${xValue}" step="1" units="%"><span slot="prepend">X</span></fig-input-number>
+      <fig-input-number name="y" value="${yValue}" step="1" units="%"><span slot="prepend">Y</span></fig-input-number>
+    </div>`
+      : "";
+
+    this.innerHTML = `<div class="fig-origin-grid-surface">
+      <div class="origin-grid" aria-label="Transform origin grid">
+        <div class="origin-grid-cells">${cells}</div>
+        <span class="origin-grid-handle"></span>
+      </div>
+    </div>
+    ${fieldsMarkup}`;
+
+    this.#grid = this.querySelector(".origin-grid");
+    this.#cells = Array.from(this.querySelectorAll(".origin-grid-cell"));
+    this.#handle = this.querySelector(".origin-grid-handle");
+    this.#xInput = this.querySelector('fig-input-number[name="x"]');
+    this.#yInput = this.querySelector('fig-input-number[name="y"]');
+    this.#syncHandlePosition();
+    this.#syncOverflowState();
+    this.#syncValueInputs();
+    this.#setupEvents();
+  }
+
+  #syncValueInputs() {
+    const xValue = this.#x.toFixed(this.#precision);
+    const yValue = this.#y.toFixed(this.#precision);
+    if (this.#xInput) {
+      this.#xInput.setAttribute("value", xValue);
+    }
+    if (this.#yInput) {
+      this.#yInput.setAttribute("value", yValue);
+    }
+  }
+
+  #syncValueAttribute() {
+    const next = this.value;
+    if (this.getAttribute("value") === next) return;
+    this.#isSyncingValueAttr = true;
+    this.setAttribute("value", next);
+    this.#isSyncingValueAttr = false;
+  }
+
+  #emit(type) {
+    this.dispatchEvent(
+      new CustomEvent(type, {
+        bubbles: true,
+        detail: {
+          value: this.value,
+          x: this.#x,
+          y: this.#y,
+        },
+      }),
+    );
+  }
+
+  #syncHandlePosition() {
+    if (!this.#handle) return;
+    // Constrain draggable visual bounds to the 3x3 dot centers.
+    const toVisual = (value) => 16.6667 + (this.#clampPercentage(value) / 100) * 66.6667;
+    this.#handle.style.left = `${toVisual(this.#x)}%`;
+    this.#handle.style.top = `${toVisual(this.#y)}%`;
+  }
+
+  #syncOverflowState() {
+    if (!this.#handle) return;
+    const overflowX = this.#x < 0 || this.#x > 100;
+    const overflowY = this.#y < 0 || this.#y > 100;
+    const overflowLeft = this.#x < 0;
+    const overflowRight = this.#x > 100;
+    const overflowUp = this.#y < 0;
+    const overflowDown = this.#y > 100;
+
+    this.#handle.classList.toggle("beyond-bounds-x", overflowX);
+    this.#handle.classList.toggle("beyond-bounds-y", overflowY);
+    this.#handle.classList.toggle("overflow-left", overflowLeft);
+    this.#handle.classList.toggle("overflow-right", overflowRight);
+    this.#handle.classList.toggle("overflow-up", overflowUp);
+    this.#handle.classList.toggle("overflow-down", overflowDown);
+  }
+
+  #gridCellFromClient(clientX, clientY) {
+    if (!this.#grid) return null;
+    const rect = this.#grid.getBoundingClientRect();
+    const nx = (clientX - rect.left) / Math.max(rect.width, 1);
+    const ny = (clientY - rect.top) / Math.max(rect.height, 1);
+    if (nx < 0 || nx > 1 || ny < 0 || ny > 1) return null;
+    const col = Math.max(0, Math.min(2, Math.floor(nx * 3)));
+    const row = Math.max(0, Math.min(2, Math.floor(ny * 3)));
+    return this.#cells.find(
+      (cell) =>
+        Number(cell.getAttribute("data-col")) === col &&
+        Number(cell.getAttribute("data-row")) === row,
+    );
+  }
+
+  #clearHoveredCells() {
+    for (const cell of this.#cells) {
+      cell.classList.remove("is-hovered");
+    }
+  }
+
+  #setHoveredCell(cell) {
+    this.#clearHoveredCells();
+    if (cell) cell.classList.add("is-hovered");
+  }
+
+  #setFromPercent(x, y, eventType) {
+    const nextX = Number(x);
+    const nextY = Number(y);
+    if (!Number.isFinite(nextX) || !Number.isFinite(nextY)) return;
+    if (nextX === this.#x && nextY === this.#y && eventType === "input") return;
+
+    this.#x = nextX;
+    this.#y = nextY;
+    this.#syncHandlePosition();
+    this.#syncOverflowState();
+    this.#syncValueInputs();
+    this.#syncValueAttribute();
+    this.#emit(eventType);
+  }
+
+  #clientToPercent(clientX, clientY) {
+    if (!this.#grid) return { x: this.#x, y: this.#y };
+    const rect = this.#grid.getBoundingClientRect();
+    const insetX = rect.width / 6;
+    const insetY = rect.height / 6;
+    const usableWidth = Math.max(1, rect.width - insetX * 2);
+    const usableHeight = Math.max(1, rect.height - insetY * 2);
+    const nx = (clientX - (rect.left + insetX)) / usableWidth;
+    const ny = (clientY - (rect.top + insetY)) / usableHeight;
+    return {
+      x: nx * 100,
+      y: ny * 100,
+    };
+  }
+
+  #cellCenterFromClient(clientX, clientY) {
+    if (!this.#grid) return { x: 50, y: 50 };
+    const rect = this.#grid.getBoundingClientRect();
+    const colRaw = ((clientX - rect.left) / Math.max(rect.width, 1)) * 3;
+    const rowRaw = ((clientY - rect.top) / Math.max(rect.height, 1)) * 3;
+    const col = Math.max(0, Math.min(2, Math.floor(colRaw)));
+    const row = Math.max(0, Math.min(2, Math.floor(rowRaw)));
+    return {
+      x: col * 50,
+      y: row * 50,
+    };
+  }
+
+  #snapPercentage(value) {
+    const threshold = 2.5;
+    let closest = value;
+    let closestDistance = Infinity;
+    for (const point of FigOriginGrid.SNAP_POINTS) {
+      const distance = Math.abs(value - point);
+      if (distance < closestDistance) {
+        closestDistance = distance;
+        closest = point;
+      }
+    }
+    return closestDistance <= threshold ? closest : value;
+  }
+
+  #maybeSnapPoint(point, shiftKey) {
+    if (!shiftKey) return point;
+    return {
+      x: this.#snapPercentage(point.x),
+      y: this.#snapPercentage(point.y),
+    };
+  }
+
+  #detachHandleDragListeners() {
+    if (!this.#grid || !this.#boundHandlePointerMove || !this.#boundHandlePointerEnd) return;
+    this.#grid.removeEventListener("pointermove", this.#boundHandlePointerMove);
+    this.#grid.removeEventListener("pointerup", this.#boundHandlePointerEnd);
+    this.#grid.removeEventListener("pointercancel", this.#boundHandlePointerEnd);
+    this.#grid.removeEventListener(
+      "lostpointercapture",
+      this.#boundHandlePointerEnd,
+    );
+    this.#boundHandlePointerMove = null;
+    this.#boundHandlePointerEnd = null;
+  }
+
+  #startGridDrag(e) {
+    if (!this.#grid || !this.#dragEnabled) return;
+    e.preventDefault();
+    this.#isDragging = true;
+    this.#activePointerId = e.pointerId;
+    const startClientX = e.clientX;
+    const startClientY = e.clientY;
+    const dragThresholdPx = 3;
+    let didDrag = false;
+    this.#grid.setPointerCapture(e.pointerId);
+
+    this.#boundHandlePointerMove = (moveEvent) => {
+      if (!this.#isDragging || moveEvent.pointerId !== this.#activePointerId) return;
+      const dx = moveEvent.clientX - startClientX;
+      const dy = moveEvent.clientY - startClientY;
+      const distance = Math.hypot(dx, dy);
+      if (!didDrag && distance < dragThresholdPx) return;
+      if (!didDrag) {
+        didDrag = true;
+        this.#grid.classList.add("is-dragging");
+        this.#clearHoveredCells();
+      }
+      const nextPoint = this.#maybeSnapPoint(
+        this.#clientToPercent(moveEvent.clientX, moveEvent.clientY),
+        moveEvent.shiftKey,
+      );
+      this.#setFromPercent(nextPoint.x, nextPoint.y, "input");
+    };
+
+    this.#boundHandlePointerEnd = (endEvent) => {
+      if (!this.#isDragging || endEvent.pointerId !== this.#activePointerId) return;
+      this.#isDragging = false;
+      this.#activePointerId = null;
+      this.#grid.classList.remove("is-dragging");
+      this.#clearHoveredCells();
+      this.#detachHandleDragListeners();
+      if (!didDrag) {
+        // Click behavior: snap to the center of the clicked cell.
+        const center = this.#cellCenterFromClient(startClientX, startClientY);
+        this.#setFromPercent(center.x, center.y, "input");
+      }
+      this.#emit("change");
+    };
+
+    this.#grid.addEventListener("pointermove", this.#boundHandlePointerMove);
+    this.#grid.addEventListener("pointerup", this.#boundHandlePointerEnd);
+    this.#grid.addEventListener("pointercancel", this.#boundHandlePointerEnd);
+    this.#grid.addEventListener("lostpointercapture", this.#boundHandlePointerEnd);
+  }
+
+  #setupEvents() {
+    if (!this.#grid || !this.#handle) return;
+
+    this.#grid.addEventListener("pointerdown", (e) => {
+      const hovered = this.#gridCellFromClient(e.clientX, e.clientY);
+      this.#setHoveredCell(hovered);
+
+      if (this.#dragEnabled) {
+        this.#startGridDrag(e);
+        return;
+      }
+
+      const center = this.#cellCenterFromClient(e.clientX, e.clientY);
+      this.#setFromPercent(center.x, center.y, "input");
+      this.#emit("change");
+    });
+
+    this.#grid.addEventListener("pointermove", (e) => {
+      if (this.#isDragging) return;
+      const hovered = this.#gridCellFromClient(e.clientX, e.clientY);
+      this.#setHoveredCell(hovered);
+    });
+
+    this.#grid.addEventListener("pointerleave", () => {
+      this.#clearHoveredCells();
+    });
+
+    const bindValueInput = (inputEl, axis) => {
+      if (!inputEl) return;
+      const handle = (e) => {
+        const next = Number.parseFloat(e.target.value);
+        if (!Number.isFinite(next)) return;
+        if (axis === "x") {
+          this.#setFromPercent(next, this.#y, "input");
+        } else {
+          this.#setFromPercent(this.#x, next, "input");
+        }
+      };
+      inputEl.addEventListener("input", handle);
+      inputEl.addEventListener("change", handle);
+      inputEl.addEventListener("focusout", () => {
+        this.#emit("change");
+      });
+    };
+
+    bindValueInput(this.#xInput, "x");
+    bindValueInput(this.#yInput, "y");
+  }
+}
+customElements.define("fig-origin-grid", FigOriginGrid);
+
 /**
  * A custom joystick input element.
  * @attr {string} value - The current position of the joystick (e.g., "0.5,0.5").

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rogieking/figui3",
-  "version": "2.37.0",
+  "version": "2.38.0",
   "description": "A lightweight web components library for building Figma plugin and widget UIs with native look and feel",
   "author": "Rogie King",
   "license": "MIT",