@rogieking/figui3 6.10.0 → 6.12.0

package/fig-lab.css

@@ -302,13 +302,15 @@ fig-field-slider {
       background-color: transparent;
       box-shadow: none !important;
       position: absolute;
-      right: var(--spacer-1);
+      right: 2px;
+      top:2px;
+      bottom:2px;
       width: fit-content;
       min-width: fit-content;
       max-width: max-content;
       flex: 0 0 auto;
       border-left: 0;
-      border-radius: var(--radius-small);
+      border-radius: var(--radius-medium);
 
       &:hover,
       &:has(input:focus) {
@@ -321,7 +323,7 @@ fig-field-slider {
       input {
         field-sizing: content;
         font-variant-numeric: tabular-nums;
-        border-radius: var(--radius-small);
+        border-radius: var(--radius-medium);
         width: auto;
         flex: 0 0 auto;
         text-align: right;
@@ -636,6 +638,32 @@ fig-input-oscillator {
     }
   }
 
+  .fig-input-oscillator-frequency-handle {
+    cursor: ew-resize;
+
+    fig-handle,
+    fig-handle:hover,
+    fig-handle .fig-handle-hit-area,
+    fig-handle:hover .fig-handle-hit-area,
+    fig-handle:is(:active, .active, .dragging),
+    fig-handle:is(:active, .active, .dragging) .fig-handle-hit-area {
+      cursor: ew-resize !important;
+    }
+  }
+
+  .fig-input-oscillator-amplitude-handle {
+    cursor: ns-resize;
+
+    fig-handle,
+    fig-handle:hover,
+    fig-handle .fig-handle-hit-area,
+    fig-handle:hover .fig-handle-hit-area,
+    fig-handle:is(:active, .active, .dragging),
+    fig-handle:is(:active, .active, .dragging) .fig-handle-hit-area {
+      cursor: ns-resize !important;
+    }
+  }
+
   .fig-input-oscillator-waves {
     display: flex;
     flex-direction: column;
@@ -673,3 +701,51 @@ fig-input-oscillator {
   }
 }
 
+/* Reorder */
+fig-reorder {
+  display: contents;
+}
+
+fig-reorder:not([handle]):is(:not([disabled]), [disabled="false"]) > [data-reorder-item] {
+  cursor: grab;
+}
+
+fig-reorder:not([handle]):is(:not([disabled]), [disabled="false"]) > [data-reorder-item] > fig-header,
+fig-reorder:not([handle]):is(:not([disabled]), [disabled="false"]) > [data-reorder-item] > fig-header *,
+fig-reorder:not([handle]):is(:not([disabled]), [disabled="false"]) > [data-reorder-item] > label {
+  cursor: grab;
+}
+
+fig-reorder > .dragging {
+  background-color: var(--figma-color-bg-selected);
+}
+
+[data-reorder-handle] {
+  cursor: grab;
+}
+
+fig-reorder[disabled]:not([disabled="false"]) [data-reorder-handle] {
+  cursor: inherit;
+}
+
+body.fig-reorder-dragging,
+body.fig-reorder-dragging * {
+  user-select: none !important;
+  -webkit-user-select: none !important;
+  cursor: grabbing !important;
+}
+
+.fig-reorder-indicator {
+  position: fixed;
+  pointer-events: none;
+  z-index: 1000000;
+  background: var(--figma-color-border-strong);
+}
+
+.fig-reorder-indicator[data-axis="vertical"] {
+  height: 2px;
+}
+
+.fig-reorder-indicator[data-axis="horizontal"] {
+  width: 2px;
+}

package/fig-lab.js

@@ -8,6 +8,10 @@
  *   <script src="fig-lab.js"></script>
  */
 
+function figLabBooleanAttribute(element, name) {
+  return element.hasAttribute(name) && element.getAttribute(name) !== "false";
+}
+
 /* Field + Slider wrapper */
 class FigFieldSlider extends HTMLElement {
   #field = null;
@@ -331,7 +335,7 @@ class FigFieldSlider extends HTMLElement {
   }
 
   #handleElasticPointerDown(event) {
-    if (event.button !== 0 || this.hasAttribute("disabled")) return;
+    if (event.button !== 0 || figLabBooleanAttribute(this, "disabled")) return;
     if (this.getAttribute("elastic") === "false") return;
     if (event.target?.closest?.("fig-input-number")) return;
     const rangeInput =
@@ -397,7 +401,7 @@ class FigFieldSlider extends HTMLElement {
   }
 
   #handleContextMenu(event) {
-    if (this.hasAttribute("disabled")) return;
+    if (figLabBooleanAttribute(this, "disabled")) return;
     event.preventDefault();
     event.stopPropagation();
     event.stopImmediatePropagation();
@@ -872,7 +876,7 @@ class FigCanvasControl extends HTMLElement {
     this.#radiusTooltip = null;
     this.#angleTooltip = null;
 
-    const disabled = this.hasAttribute("disabled");
+    const disabled = figLabBooleanAttribute(this, "disabled");
     const type = this.#type;
     const tooltips = this.#tooltipsEnabled;
 
@@ -945,7 +949,7 @@ class FigCanvasControl extends HTMLElement {
   }
 
   #activateMoveCursor(e) {
-    if (this.hasAttribute("disabled")) return;
+    if (figLabBooleanAttribute(this, "disabled")) return;
     if (e?.button !== undefined && e.button !== 0) return;
     if (e?.isPrimary === false) return;
 
@@ -1190,7 +1194,7 @@ class FigCanvasControl extends HTMLElement {
 
   #setupLineDrag(hitLine) {
     hitLine.addEventListener("pointerdown", (e) => {
-      if (this.hasAttribute("disabled")) return;
+      if (figLabBooleanAttribute(this, "disabled")) return;
       e.preventDefault();
       e.stopPropagation();
       const container = this.#container;
@@ -1705,7 +1709,7 @@ class FigCanvasControl extends HTMLElement {
       circle.style.cursor = this.#resizeCursorSvg(deg);
     });
     const onDown = (e) => {
-      if (this.hasAttribute("disabled")) return;
+      if (figLabBooleanAttribute(this, "disabled")) return;
       e.preventDefault();
       e.stopPropagation();
       this.#isRadiusDragging = true;
@@ -1830,6 +1834,7 @@ class FigInputOscillator extends HTMLElement {
   #precision = 2;
   #drawWidth = 240;
   #drawHeight = 120;
+  #valueRange = { min: -1, max: 1 };
   #isDragging = null;
   #svg = null;
   #path = null;
@@ -1935,7 +1940,9 @@ class FigInputOscillator extends HTMLElement {
 
   #readInteger(name, fallback) {
     const value = Number.parseInt(this.getAttribute(name) || "", 10);
-    return Number.isFinite(value) ? value : fallback;
+    return Number.isFinite(value)
+      ? Math.max(0, Math.min(100, value))
+      : fallback;
   }
 
   #readBooleanAttribute(name, defaultValue = false) {
@@ -2098,8 +2105,8 @@ class FigInputOscillator extends HTMLElement {
           <line class="fig-input-oscillator-baseline"></line>
           <path class="fig-input-oscillator-path"></path>
           <circle class="fig-input-oscillator-playhead"></circle>
-          <foreignObject class="fig-input-oscillator-handle fig-input-oscillator-amplitude-handle" data-handle="amplitude" width="20" height="20"><div class="fig-input-oscillator-handle-inner"><fig-tooltip text="Amplitude"><fig-handle type="canvas" size="small" aria-label="Oscillator amplitude handle"${disabled}></fig-handle></fig-tooltip></div></foreignObject>
-          <foreignObject class="fig-input-oscillator-handle fig-input-oscillator-frequency-handle" data-handle="frequency" width="20" height="20"><div class="fig-input-oscillator-handle-inner"><fig-tooltip text="Frequency"><fig-handle type="canvas" size="small" aria-label="Oscillator frequency handle"${disabled}></fig-handle></fig-tooltip></div></foreignObject>
+          <foreignObject class="fig-input-oscillator-handle fig-input-oscillator-amplitude-handle" data-handle="amplitude" width="20" height="20"><div class="fig-input-oscillator-handle-inner"><fig-tooltip text="Amplitude"><fig-handle size="small" aria-label="Oscillator amplitude handle"${disabled}></fig-handle></fig-tooltip></div></foreignObject>
+          <foreignObject class="fig-input-oscillator-handle fig-input-oscillator-frequency-handle" data-handle="frequency" width="20" height="20"><div class="fig-input-oscillator-handle-inner"><fig-tooltip text="Frequency"><fig-handle size="small" aria-label="Oscillator frequency handle"${disabled}></fig-handle></fig-tooltip></div></foreignObject>
         </svg>
       </div>
       ${this.#isEditEnabled() ? this.#getWaveControlsHTML(disabled) : ""}`;
@@ -2231,12 +2238,12 @@ class FigInputOscillator extends HTMLElement {
   }
 
   #toY(value) {
-    const { min, max } = this.#getValueRange();
+    const { min, max } = this.#valueRange;
     return this.#drawHeight - ((value - min) / (max - min)) * this.#drawHeight;
   }
 
   #fromY(y) {
-    const { min, max } = this.#getValueRange();
+    const { min, max } = this.#valueRange;
     return min + (1 - y / this.#drawHeight) * (max - min);
   }
 
@@ -2251,6 +2258,7 @@ class FigInputOscillator extends HTMLElement {
   #updateWaveform() {
     if (!this.#svg || !this.#path) return;
     this.#syncViewportSize();
+    this.#valueRange = this.#getValueRange();
 
     if (this.#bounds) {
       this.#bounds.setAttribute("width", this.#drawWidth);
@@ -2589,6 +2597,13 @@ class FigInputOscillator extends HTMLElement {
 
   #startDrag(event, type) {
     this.#isDragging = type;
+    this.#svg?.classList.add("dragging");
+    const dragCursor =
+      type === "frequency" ? "ew-resize" : type === "amplitude" ? "ns-resize" : "";
+    const prevBodyCursor = document.body.style.cursor;
+    if (dragCursor) {
+      document.body.style.cursor = dragCursor;
+    }
 
     const onMove = (moveEvent) => {
       if (!this.#isDragging) return;
@@ -2623,6 +2638,10 @@ class FigInputOscillator extends HTMLElement {
 
     const onUp = () => {
       this.#isDragging = null;
+      this.#svg?.classList.remove("dragging");
+      if (dragCursor) {
+        document.body.style.cursor = prevBodyCursor;
+      }
       document.removeEventListener("pointermove", onMove);
       document.removeEventListener("pointerup", onUp);
       this.#emit("change");
@@ -3221,3 +3240,432 @@ class FigInputAngle extends HTMLElement {
 }
 customElements.define("fig-input-angle", FigInputAngle);
 
+/* Reorder wrapper */
+class FigReorder extends HTMLElement {
+  static observedAttributes = ["axis", "handle", "disabled"];
+
+  static #DRAG_THRESHOLD = 6;
+
+  static #INTERACTIVE_SELECTORS = [
+    "input",
+    "button",
+    "select",
+    "textarea",
+    "a[href]",
+    "label",
+    "summary",
+    "fig-button",
+    "fig-dropdown",
+    "fig-slider",
+    "fig-input-number",
+    "fig-input-text",
+    "fig-field-slider",
+    "fig-checkbox",
+    "fig-switch",
+    "fig-combo-input",
+    "fig-segmented-control",
+    "fig-input-color",
+    "fig-input-fill",
+    '[contenteditable="true"]',
+  ];
+
+  #childObserver = null;
+  #bindings = new Map();
+  #drag = null;
+  #indicator = null;
+
+  connectedCallback() {
+    this.style.display = "contents";
+    this.#syncChildren();
+    this.#childObserver = new MutationObserver(() => this.#syncChildren());
+    this.#childObserver.observe(this, { childList: true });
+  }
+
+  disconnectedCallback() {
+    this.#childObserver?.disconnect();
+    this.#childObserver = null;
+    this.#unbindAll();
+    this.#cancelDrag();
+    this.#removeIndicator();
+  }
+
+  attributeChangedCallback() {
+    if (this.isConnected) this.#syncChildren();
+  }
+
+  get #disabled() {
+    return (
+      this.hasAttribute("disabled") && this.getAttribute("disabled") !== "false"
+    );
+  }
+
+  get #axis() {
+    const value = (this.getAttribute("axis") || "vertical").trim().toLowerCase();
+    return value === "horizontal" ? "horizontal" : "vertical";
+  }
+
+  get #handleSelector() {
+    return (this.getAttribute("handle") || "").trim();
+  }
+
+  #getElementChildren() {
+    return [...this.children].filter((node) => node.nodeType === Node.ELEMENT_NODE);
+  }
+
+  #syncChildren() {
+    const children = this.#getElementChildren();
+    const childSet = new Set(children);
+
+    for (const [child, binding] of this.#bindings) {
+      if (!childSet.has(child)) {
+        binding.target.removeEventListener(
+          "pointerdown",
+          binding.onPointerDown,
+          true,
+        );
+        this.#bindings.delete(child);
+      }
+    }
+
+    this.#clearHandleMarks(children);
+    this.#clearReorderItemMarks(children);
+
+    if (this.#disabled || children.length < 2) {
+      this.#unbindAll();
+      return;
+    }
+
+    for (const child of children) {
+      const target = this.#getDragTarget(child);
+      const existing = this.#bindings.get(child);
+      if (existing && existing.target === target) continue;
+      if (existing) {
+        existing.target.removeEventListener(
+          "pointerdown",
+          existing.onPointerDown,
+          true,
+        );
+        this.#bindings.delete(child);
+      }
+      if (!target) continue;
+      this.#bindChild(child, target);
+    }
+
+    this.#markHandles(children);
+    this.#markReorderItems(children);
+  }
+
+  #clearReorderItemMarks(children) {
+    for (const child of children) {
+      child.removeAttribute("data-reorder-item");
+    }
+  }
+
+  #markReorderItems(children) {
+    for (const child of children) {
+      child.setAttribute("data-reorder-item", "");
+    }
+  }
+
+  #clearHandleMarks(children) {
+    for (const child of children) {
+      child
+        .querySelectorAll("[data-reorder-handle]")
+        .forEach((node) => node.removeAttribute("data-reorder-handle"));
+    }
+  }
+
+  #markHandles(children) {
+    if (!this.#handleSelector) return;
+    for (const child of children) {
+      const handle = child.querySelector(this.#handleSelector);
+      if (handle) handle.setAttribute("data-reorder-handle", "");
+    }
+  }
+
+  #getDragTarget(child) {
+    if (this.#handleSelector) {
+      return child.querySelector(this.#handleSelector);
+    }
+    return child;
+  }
+
+  #bindChild(child, target) {
+    const onPointerDown = (event) => {
+      if (this.#disabled || this.#getElementChildren().length < 2) return;
+      if (event.button !== 0) return;
+      if (
+        !this.#handleSelector &&
+        this.#isInteractiveTarget(event.target, child)
+      ) {
+        return;
+      }
+      this.#startPendingDrag(event, child, target);
+    };
+
+    target.addEventListener("pointerdown", onPointerDown, true);
+    this.#bindings.set(child, { target, onPointerDown });
+  }
+
+  #isInteractiveTarget(target, child) {
+    let node = target;
+    while (node && node !== child) {
+      if (node instanceof Element) {
+        for (const selector of FigReorder.#INTERACTIVE_SELECTORS) {
+          if (node.matches(selector)) return true;
+        }
+      }
+      node = node.parentElement;
+    }
+    return false;
+  }
+
+  static #DRAGGING_BODY_CLASS = "fig-reorder-dragging";
+
+  static #setDocumentDragging(active) {
+    document.body.classList.toggle(FigReorder.#DRAGGING_BODY_CLASS, active);
+  }
+
+  #startPendingDrag(event, item, target) {
+    this.#cancelDrag();
+    FigReorder.#setDocumentDragging(true);
+
+    const state = {
+      item,
+      target,
+      pointerId: event.pointerId,
+      oldIndex: this.#getElementChildren().indexOf(item),
+      targetIndex: this.#getElementChildren().indexOf(item),
+      startX: event.clientX,
+      startY: event.clientY,
+      active: false,
+      onMove: null,
+      onUp: null,
+      onKeyDown: null,
+    };
+
+    state.onMove = (moveEvent) => {
+      if (moveEvent.pointerId !== state.pointerId) return;
+
+      const dx = moveEvent.clientX - state.startX;
+      const dy = moveEvent.clientY - state.startY;
+
+      if (!state.active) {
+        if (dx * dx + dy * dy < FigReorder.#DRAG_THRESHOLD * FigReorder.#DRAG_THRESHOLD) {
+          return;
+        }
+        state.active = true;
+        event.preventDefault();
+        event.stopPropagation();
+        item.classList.add("dragging");
+        try {
+          target.setPointerCapture(state.pointerId);
+        } catch {}
+      }
+
+      moveEvent.preventDefault();
+      const pointer =
+        this.#axis === "horizontal" ? moveEvent.clientX : moveEvent.clientY;
+      const index = this.#getInsertIndex(pointer);
+      state.targetIndex = index;
+      this.#updateIndicator(index, item);
+    };
+
+    state.onKeyDown = (keyEvent) => {
+      if (keyEvent.key !== "Escape" || !state.active) return;
+      keyEvent.preventDefault();
+      this.#finishDrag(state, true);
+    };
+
+    state.onUp = (upEvent) => {
+      if (upEvent.pointerId !== state.pointerId) return;
+      this.#finishDrag(state, upEvent.type === "pointercancel");
+    };
+
+    this.#drag = state;
+    window.addEventListener("pointermove", state.onMove);
+    window.addEventListener("pointerup", state.onUp);
+    window.addEventListener("pointercancel", state.onUp);
+    window.addEventListener("keydown", state.onKeyDown);
+  }
+
+  #getInsertIndex(pointer) {
+    const items = this.#getElementChildren();
+    const horizontal = this.#axis === "horizontal";
+
+    for (let i = 0; i < items.length; i++) {
+      const rect = items[i].getBoundingClientRect();
+      const midpoint = horizontal
+        ? rect.left + rect.width / 2
+        : rect.top + rect.height / 2;
+      if (pointer < midpoint) return i;
+    }
+
+    return items.length;
+  }
+
+  #shouldShowIndicator(item, index) {
+    const items = this.#getElementChildren();
+    const currentIndex = items.indexOf(item);
+    if (currentIndex === -1) return false;
+
+    const clamped = Math.max(0, Math.min(index, items.length));
+
+    if (index === currentIndex) return false;
+
+    // Hide only the redundant bottom line when the dragged item is already last.
+    if (clamped >= items.length && currentIndex === items.length - 1) {
+      return false;
+    }
+
+    return true;
+  }
+
+  #getReorderBounds(items) {
+    if (!items.length) return null;
+
+    let left = Infinity;
+    let right = -Infinity;
+    let top = Infinity;
+    let bottom = -Infinity;
+
+    for (const item of items) {
+      const rect = item.getBoundingClientRect();
+      left = Math.min(left, rect.left);
+      right = Math.max(right, rect.right);
+      top = Math.min(top, rect.top);
+      bottom = Math.max(bottom, rect.bottom);
+    }
+
+    return {
+      left,
+      top,
+      width: right - left,
+      height: bottom - top,
+    };
+  }
+
+  #ensureIndicator() {
+    if (this.#indicator) return this.#indicator;
+
+    const indicator = document.createElement("div");
+    indicator.className = "fig-reorder-indicator";
+    indicator.setAttribute("data-axis", this.#axis);
+    document.body.appendChild(indicator);
+    this.#indicator = indicator;
+    return indicator;
+  }
+
+  #updateIndicator(index, item) {
+    const items = this.#getElementChildren();
+    if (!this.#shouldShowIndicator(item, index)) {
+      this.#removeIndicator();
+      return;
+    }
+
+    const bounds = this.#getReorderBounds(items);
+    if (!bounds) {
+      this.#removeIndicator();
+      return;
+    }
+
+    const indicator = this.#ensureIndicator();
+    indicator.setAttribute("data-axis", this.#axis);
+
+    if (this.#axis === "horizontal") {
+      let x;
+      if (index <= 0) {
+        x = items[0].getBoundingClientRect().left;
+      } else if (index >= items.length) {
+        x = items[items.length - 1].getBoundingClientRect().right;
+      } else {
+        x = items[index].getBoundingClientRect().left;
+      }
+
+      indicator.style.left = `${x - 1}px`;
+      indicator.style.top = `${bounds.top}px`;
+      indicator.style.width = "2px";
+      indicator.style.height = `${bounds.height}px`;
+      return;
+    }
+
+    let y;
+    if (index <= 0) {
+      y = items[0].getBoundingClientRect().top;
+    } else if (index >= items.length) {
+      y = items[items.length - 1].getBoundingClientRect().bottom;
+    } else {
+      y = items[index].getBoundingClientRect().top;
+    }
+
+    indicator.style.left = `${bounds.left}px`;
+    indicator.style.top = `${y - 1}px`;
+    indicator.style.width = `${bounds.width}px`;
+    indicator.style.height = "2px";
+  }
+
+  #removeIndicator() {
+    this.#indicator?.remove();
+    this.#indicator = null;
+  }
+
+  #moveItemToIndex(item, index) {
+    const items = this.#getElementChildren();
+    const clamped = Math.max(0, Math.min(index, items.length));
+
+    if (clamped >= items.length) {
+      if (items[items.length - 1] !== item) this.appendChild(item);
+      return;
+    }
+
+    const ref = items[clamped];
+    if (ref !== item) this.insertBefore(item, ref);
+  }
+
+  #finishDrag(state, revert) {
+    const { item, oldIndex, active, onMove, onUp, onKeyDown } = state;
+
+    window.removeEventListener("pointermove", onMove);
+    window.removeEventListener("pointerup", onUp);
+    window.removeEventListener("pointercancel", onUp);
+    window.removeEventListener("keydown", onKeyDown);
+
+    if (active) {
+      if (!revert) {
+        this.#moveItemToIndex(item, state.targetIndex);
+        const newIndex = this.#getElementChildren().indexOf(item);
+        if (newIndex !== -1 && newIndex !== oldIndex) {
+          this.dispatchEvent(
+            new CustomEvent("reorder", {
+              bubbles: true,
+              detail: { oldIndex, newIndex, item },
+            }),
+          );
+        }
+      }
+    }
+
+    item.classList.remove("dragging");
+    FigReorder.#setDocumentDragging(false);
+    this.#removeIndicator();
+    if (this.#drag === state) this.#drag = null;
+  }
+
+  #unbindAll() {
+    for (const [, binding] of this.#bindings) {
+      binding.target.removeEventListener(
+        "pointerdown",
+        binding.onPointerDown,
+        true,
+      );
+    }
+    this.#bindings.clear();
+  }
+
+  #cancelDrag() {
+    if (!this.#drag) return;
+    this.#finishDrag(this.#drag, true);
+  }
+}
+
+customElements.define("fig-reorder", FigReorder);