@rogieking/figui3 1.9.5 → 1.9.7

package/components.css

@@ -666,7 +666,6 @@ input[type="text"][list] {
     ::picker(select) {
       position-area: auto;
       align-self: auto;
-      position-try-fallbacks: none;
       max-block-size: 100vh;
       appearance: base-select;
       scrollbar-width: thin;
@@ -2080,38 +2079,8 @@ dialog,
   }
 }
 dialog[is="fig-dialog"] {
-  --offset: 1rem;
-  --translate-x: -50%;
-  --translate-y: -50%;
   --z-index: 999999;
-
-  position: fixed;
-  top: 50%;
-  left: 50%;
-  margin: 0;
   z-index: var(--z-index);
-  transform: translate(var(--translate-x), var(--translate-y));
-
-  &[position*="bottom"] {
-    bottom: var(--offset);
-    top: auto;
-    --translate-y: 0;
-  }
-  &[position*="top"] {
-    top: var(--offset);
-    bottom: auto;
-    --translate-y: 0;
-  }
-  &[position*="right"] {
-    right: var(--offset);
-    left: auto;
-    --translate-x: 0;
-  }
-  &[position*="left"] {
-    left: var(--offset);
-    right: auto;
-    --translate-x: 0;
-  }
 }
 
 /* Tooltip */

package/example.html

@@ -25,6 +25,27 @@
 
         <h2><label>Effects/</label>UI3 Components</h2>
         <fig-spinner></fig-spinner>
+
+        <fig-button icon="true"
+                    variant="ghost"
+                    type="select"
+                    style="position: absolute; right: 0;">
+            <svg width="24"
+                 height="24"
+                 viewBox="0 0 24 24"
+                 fill="none"
+                 xmlns="http://www.w3.org/2000/svg">
+                <path fill-rule="evenodd"
+                      clip-rule="evenodd"
+                      d="M9.64645 11.1464C9.84171 10.9512 10.1583 10.9512 10.3536 11.1464L12 12.7929L13.6464 11.1464C13.8417 10.9512 14.1583 10.9512 14.3536 11.1464C14.5488 11.3417 14.5488 11.6583 14.3536 11.8536L12.3536 13.8536C12.1583 14.0488 11.8417 14.0488 11.6464 13.8536L9.64645 11.8536C9.45118 11.6583 9.45118 11.3417 9.64645 11.1464Z"
+                      fill="currentColor"
+                      fill-opacity="0.9" />
+            </svg>
+            <fig-dropdown variant="neue">
+                <option>One if by sea</option>
+                <option>Two if by land</option>
+            </fig-dropdown>
+        </fig-button>
     </fig-header>
 
     <br /><br /><br /><br /><br /><br /><br /><br />
@@ -573,6 +594,7 @@
         </fig-field>
 
         <dialog open="true"
+                drag="true"
                 position="bottom right"
                 is="fig-dialog">
             <fig-header>

package/fig.js

@@ -592,20 +592,214 @@ customElements.define("fig-popover", FigPopover);
  * @attr {boolean} modal - Whether the dialog should be modal
  */
 class FigDialog extends HTMLDialogElement {
+  #isDragging = false;
+  #dragOffset = { x: 0, y: 0 };
+  #boundPointerDown;
+  #boundPointerMove;
+  #boundPointerUp;
+  #offset = 16; // 1rem in pixels
+  #positionInitialized = false;
+
+  constructor() {
+    super();
+    this.#boundPointerDown = this.#handlePointerDown.bind(this);
+    this.#boundPointerMove = this.#handlePointerMove.bind(this);
+    this.#boundPointerUp = this.#handlePointerUp.bind(this);
+  }
+
   connectedCallback() {
     this.modal =
       this.hasAttribute("modal") && this.getAttribute("modal") !== "false";
+
+    // Set up drag functionality
+    this.drag =
+      this.hasAttribute("drag") && this.getAttribute("drag") !== "false";
+
     requestAnimationFrame(() => {
       this.#addCloseListeners();
+      this.#setupDragListeners();
+      this.#applyPosition();
     });
   }
 
+  disconnectedCallback() {
+    this.#removeDragListeners();
+  }
+
   #addCloseListeners() {
     this.querySelectorAll("fig-button[close-dialog]").forEach((button) => {
       button.removeEventListener("click", this.close);
       button.addEventListener("click", this.close.bind(this));
     });
   }
+
+  #applyPosition() {
+    const position = this.getAttribute("position") || "";
+    const rect = this.getBoundingClientRect();
+    const viewportWidth = window.innerWidth;
+    const viewportHeight = window.innerHeight;
+
+    // Default to centered
+    let top = (viewportHeight - rect.height) / 2;
+    let left = (viewportWidth - rect.width) / 2;
+
+    // Parse position attribute
+    const hasTop = position.includes("top");
+    const hasBottom = position.includes("bottom");
+    const hasLeft = position.includes("left");
+    const hasRight = position.includes("right");
+
+    // Vertical positioning
+    if (hasTop) {
+      top = this.#offset;
+    } else if (hasBottom) {
+      top = viewportHeight - rect.height - this.#offset;
+    }
+
+    // Horizontal positioning
+    if (hasLeft) {
+      left = this.#offset;
+    } else if (hasRight) {
+      left = viewportWidth - rect.width - this.#offset;
+    }
+
+    // Apply position using fixed positioning with pixels
+    this.style.position = "fixed";
+    this.style.top = `${top}px`;
+    this.style.left = `${left}px`;
+    this.style.transform = "none";
+    this.style.margin = "0";
+
+    this.#positionInitialized = true;
+  }
+
+  #setupDragListeners() {
+    if (this.drag) {
+      this.addEventListener("pointerdown", this.#boundPointerDown);
+      // Set move cursor only on fig-header elements
+      const header = this.querySelector("fig-header, header");
+      if (header) {
+        header.style.cursor = "move";
+      }
+    }
+  }
+
+  #removeDragListeners() {
+    this.removeEventListener("pointerdown", this.#boundPointerDown);
+    document.removeEventListener("pointermove", this.#boundPointerMove);
+    document.removeEventListener("pointerup", this.#boundPointerUp);
+  }
+
+  #isInteractiveElement(element) {
+    // List of interactive element types and attributes to avoid dragging on
+    const interactiveSelectors = [
+      "input",
+      "button",
+      "select",
+      "textarea",
+      "a",
+      "label",
+      '[contenteditable="true"]',
+      "[tabindex]",
+      "fig-button",
+      "fig-input-text",
+      "fig-input-number",
+      "fig-slider",
+      "fig-checkbox",
+      "fig-radio",
+      "fig-tab",
+      "fig-dropdown",
+      "fig-chit",
+    ];
+
+    // Check if the element itself is interactive
+    if (interactiveSelectors.some((selector) => element.matches?.(selector))) {
+      return true;
+    }
+
+    // Check if any parent element up to the dialog is interactive
+    let parent = element.parentElement;
+    while (parent && parent !== this) {
+      if (interactiveSelectors.some((selector) => parent.matches?.(selector))) {
+        return true;
+      }
+      parent = parent.parentElement;
+    }
+
+    return false;
+  }
+
+  #handlePointerDown(e) {
+    if (!this.drag || this.#isInteractiveElement(e.target)) {
+      return;
+    }
+
+    this.#isDragging = true;
+    this.setPointerCapture(e.pointerId);
+
+    // Get current position from computed style
+    const rect = this.getBoundingClientRect();
+
+    // Store offset from pointer to dialog top-left corner
+    this.#dragOffset.x = e.clientX - rect.left;
+    this.#dragOffset.y = e.clientY - rect.top;
+
+    document.addEventListener("pointermove", this.#boundPointerMove);
+    document.addEventListener("pointerup", this.#boundPointerUp);
+
+    e.preventDefault();
+  }
+
+  #handlePointerMove(e) {
+    if (!this.#isDragging) return;
+
+    // Calculate new position based on pointer position minus offset
+    const newLeft = e.clientX - this.#dragOffset.x;
+    const newTop = e.clientY - this.#dragOffset.y;
+
+    // Apply position directly with pixels
+    this.style.left = `${newLeft}px`;
+    this.style.top = `${newTop}px`;
+
+    e.preventDefault();
+  }
+
+  #handlePointerUp(e) {
+    if (!this.#isDragging) return;
+
+    this.#isDragging = false;
+    this.releasePointerCapture(e.pointerId);
+
+    document.removeEventListener("pointermove", this.#boundPointerMove);
+    document.removeEventListener("pointerup", this.#boundPointerUp);
+
+    e.preventDefault();
+  }
+
+  static get observedAttributes() {
+    return ["modal", "drag", "position"];
+  }
+
+  attributeChangedCallback(name, oldValue, newValue) {
+    if (name === "drag") {
+      this.drag = newValue !== null && newValue !== "false";
+
+      if (this.drag) {
+        this.#setupDragListeners();
+      } else {
+        this.#removeDragListeners();
+        // Remove move cursor from header
+        const header = this.querySelector("fig-header, header");
+        if (header) {
+          header.style.cursor = "";
+        }
+      }
+    }
+
+    if (name === "position" && this.#positionInitialized) {
+      this.#applyPosition();
+    }
+  }
 }
 customElements.define("fig-dialog", FigDialog, { extends: "dialog" });
 

package/package.json

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