@threadlabs/looma 0.18.5 → 0.19.0

package/components/ui-editor-table-overlay/ui-editor-table-overlay.html

@@ -29,7 +29,7 @@
     <state name="activeKey" :value="''"></state>
     <event
       name="action"
-      type="object({ action: add-row-before | add-row-after | add-column-before | add-column-after, boundaryIndex: integer }) | object({ action: select-row | select-column, rowIndex: integer, columnIndex: integer }) | object({ action: open-cell-menu | open-row-menu | open-column-menu, rowIndex: integer, columnIndex: integer, anchor: object({ left: number, top: number, right: number, bottom: number }) })"
+      type="object({ action: add-row-before | add-row-after | add-column-before | add-column-after, boundaryIndex: integer }) | object({ action: select-row | select-column, rowIndex: integer, columnIndex: integer }) | object({ action: reorder-row | reorder-column, fromIndex: integer, toIndex: integer }) | object({ action: open-cell-menu | open-row-menu | open-column-menu, rowIndex: integer, columnIndex: integer, anchor: object({ left: number, top: number, right: number, bottom: number }) })"
     ></event>
   </defs>
   <div aria-label="Table controls" :hidden="not open">
@@ -89,7 +89,7 @@
         data-action="select-row"
         :data-row-index="hovered.rowIndex"
         :data-column-index="hovered.columnIndex"
-        title="Row actions"
+        title="Drag row to reorder; click for actions"
         aria-label="Row actions"
       >
         <span class="glyph"><ui-icon name="grip-vertical"></ui-icon></span>
@@ -101,7 +101,7 @@
         data-action="select-column"
         :data-row-index="hovered.rowIndex"
         :data-column-index="hovered.columnIndex"
-        title="Column actions"
+        title="Drag column to reorder; click for actions"
         aria-label="Column actions"
       >
         <span class="glyph"><ui-icon name="grip-horizontal"></ui-icon></span>
@@ -121,6 +121,7 @@
     >
       <ui-icon name="chevron-down"></ui-icon>
     </button>
+    <span class="drop-indicator" data-drop-indicator hidden aria-hidden="true"></span>
   </div>
   <style>
     :host {
@@ -346,6 +347,12 @@
 
     .selector {
       border-radius: var(--ui-radius-round);
+      touch-action: none;
+      cursor: grab;
+    }
+
+    .selector:active {
+      cursor: grabbing;
     }
 
     .selector::before {
@@ -431,6 +438,30 @@
       --_ui-default-icon-stroke-width: 2;
     }
 
+    .drop-indicator {
+      position: absolute;
+      z-index: 3;
+      background: var(--ui-accent-solid);
+      box-shadow: 0 0 0 2px var(--ui-surface);
+      pointer-events: none;
+    }
+
+    .drop-indicator.row {
+      left: 0;
+      width: 100%;
+      height: 2px;
+    }
+
+    .drop-indicator.column {
+      top: 0;
+      width: 2px;
+      height: 100%;
+    }
+
+    .drop-indicator[hidden] {
+      display: none;
+    }
+
     :host[hidden] {
       display: none;
     }

package/components/ui-editor-table-overlay/ui-editor-table-overlay.js

@@ -52,6 +52,52 @@ function createProximity(scope, selector = ".handle[data-ui-affordance]", radius
 export default function controller(host) {
   const element = host.element;
   const proximity = createProximity(element);
+  let drag = null;
+  let suppressClick = false;
+  const indicator = () => element.querySelector("[data-drop-indicator]");
+  const clearDrag = () => {
+    drag = null;
+    const guide = indicator();
+    if (guide) {
+      guide.hidden = true;
+      guide.classList.remove("row", "column");
+    }
+  };
+  const onPointerDown = (event) => {
+    const button = event.target.closest?.("button.selector[data-action]");
+    if (!button || event.button !== 0) return;
+    const axis = button.dataset.action === "select-row" ? "row" : "column";
+    drag = { pointerId: event.pointerId, axis, from: Number(button.dataset[axis === "row" ? "rowIndex" : "columnIndex"]), x: event.clientX, y: event.clientY, to: null };
+    button.setPointerCapture(event.pointerId);
+    event.preventDefault();
+  };
+  const onPointerMove = (event) => {
+    if (!drag || event.pointerId !== drag.pointerId) return;
+    if (Math.hypot(event.clientX - drag.x, event.clientY - drag.y) < 5 && drag.to === null) return;
+    const rect = element.getBoundingClientRect();
+    const values = boundaries(drag.axis);
+    const coordinate = drag.axis === "row" ? event.clientY - rect.top : event.clientX - rect.left;
+    const found = values.findIndex((_, index) => index < values.length - 1 && coordinate < values[index + 1]);
+    const to = found < 0 ? values.length - 2 : found;
+    drag.to = to;
+    const guide = indicator();
+    if (!guide) return;
+    guide.hidden = false;
+    guide.classList.toggle("row", drag.axis === "row");
+    guide.classList.toggle("column", drag.axis === "column");
+    const boundary = to > drag.from ? values[to + 1] : values[to];
+    if (drag.axis === "row") guide.style.top = `${boundary}px`;
+    else guide.style.left = `${boundary}px`;
+  };
+  const onPointerUp = (event) => {
+    if (!drag || event.pointerId !== drag.pointerId) return;
+    const { axis, from, to } = drag;
+    clearDrag();
+    if (to === null) return;
+    suppressClick = true;
+    setTimeout(() => { suppressClick = false; }, 0);
+    if (to !== from) host.dispatch("action", { action: axis === "row" ? "reorder-row" : "reorder-column", fromIndex: from, toIndex: to });
+  };
   const boundaries = (axis) => {
     const values = host.state.geometry?.[axis === "row" ? "rowBoundaries" : "columnBoundaries"];
     if (Array.isArray(values) && values.length >= 2 && values.every(Number.isFinite)) return values;
@@ -89,6 +135,7 @@ export default function controller(host) {
     queueMicrotask(proximity.refresh);
   });
   const onClick = (event) => {
+    if (suppressClick) { event.preventDefault(); return; }
     const button = event.target.closest?.("button[data-action]");
     if (!button) return;
     const action = button.dataset.action;
@@ -106,6 +153,10 @@ export default function controller(host) {
   const enter = (event) => { host.state.activeKey = keyOf(event.target); };
   const leave = (event) => { host.state.activeKey = keyOf(event.relatedTarget); };
   element.addEventListener("click", onClick);
+  element.addEventListener("pointerdown", onPointerDown);
+  document.addEventListener("pointermove", onPointerMove, true);
+  document.addEventListener("pointerup", onPointerUp, true);
+  document.addEventListener("pointercancel", clearDrag, true);
   element.addEventListener("pointerover", enter);
   element.addEventListener("pointerout", leave);
   element.addEventListener("focusin", enter);
@@ -114,6 +165,10 @@ export default function controller(host) {
     stop();
     proximity.destroy();
     element.removeEventListener("click", onClick);
+    element.removeEventListener("pointerdown", onPointerDown);
+    document.removeEventListener("pointermove", onPointerMove, true);
+    document.removeEventListener("pointerup", onPointerUp, true);
+    document.removeEventListener("pointercancel", clearDrag, true);
     element.removeEventListener("pointerover", enter);
     element.removeEventListener("pointerout", leave);
     element.removeEventListener("focusin", enter);

package/components/ui-editor-table-toolbar/ui-editor-table-toolbar.html

@@ -211,10 +211,12 @@
     }
 
     .menu {
+      box-sizing: border-box;
       position: absolute;
       top: calc(100% + var(--ui-space-2));
       right: 0;
       min-width: 12rem;
+      max-width: min(17rem, calc(100vw - 24px));
       padding: var(--ui-space-1);
       background: var(--ui-surface);
       border: 1px solid var(--ui-border-strong);
@@ -224,6 +226,9 @@
       flex-direction: column;
       gap: 2px;
       z-index: 2;
+      overflow-y: auto;
+      overscroll-behavior: contain;
+      scrollbar-width: thin;
     }
 
     .menu-section + .menu-section {
@@ -250,7 +255,7 @@
 
     .swatches {
       display: grid;
-      grid-template-columns: repeat(3, minmax(0, 1fr));
+      grid-template-columns: repeat(2, minmax(0, 1fr));
       gap: 2px;
     }
 
@@ -264,7 +269,7 @@
       height: 14px;
       flex: 0 0 14px;
       border: 1px solid color-mix(in srgb, var(--ui-border) 80%, #000);
-      border-radius: 3px;
+      border-radius: var(--ui-radius-round);
       background: var(--_swatch);
     }
 

package/components/ui-editor-table-toolbar/ui-editor-table-toolbar.js

@@ -9,6 +9,20 @@ const overflowSections = [
 // Lists the actions the table selection permits; the overflow menu opens and closes here.
 export default function controller(host) {
   const element = host.element;
+  const positionMenu = () => {
+    const button = element.querySelector(".more");
+    const menu = element.querySelector(".menu");
+    if (!button || !menu) return;
+    const rect = button.getBoundingClientRect();
+    const viewport = window.visualViewport;
+    const top = viewport?.offsetTop ?? 0;
+    const bottom = top + (viewport?.height ?? window.innerHeight);
+    const above = rect.top - top - 20;
+    const below = bottom - rect.bottom - 20;
+    menu.style.maxHeight = `${Math.max(80, Math.floor(Math.max(above, below)))}px`;
+    menu.style.top = below >= above ? "calc(100% + var(--ui-space-2))" : "auto";
+    menu.style.bottom = below >= above ? "auto" : "calc(100% + var(--ui-space-2))";
+  };
   const stop = host.effect(() => {
     const enabled = new Set(Array.isArray(host.state.actions) ? host.state.actions : []);
     const alignment = host.state.cellAlignment === "center" || host.state.cellAlignment === "right" ? host.state.cellAlignment : "left";
@@ -36,6 +50,7 @@ export default function controller(host) {
     if (!action) return;
     if (action === "toggle-overflow") {
       host.state.overflowOpen = !host.state.overflowOpen;
+      if (host.state.overflowOpen) requestAnimationFrame(positionMenu);
       return;
     }
     host.state.overflowOpen = false;
@@ -44,11 +59,25 @@ export default function controller(host) {
   const onOutside = (event) => {
     if (host.state.overflowOpen && !event.composedPath().includes(element)) host.state.overflowOpen = false;
   };
+  const onKeydown = (event) => {
+    if (event.key === "Escape" && host.state.overflowOpen) {
+      host.state.overflowOpen = false;
+      event.preventDefault();
+      event.stopPropagation();
+      element.querySelector(".more")?.focus();
+    }
+  };
   element.addEventListener("click", onClick);
   document.addEventListener("pointerdown", onOutside, true);
+  document.addEventListener("keydown", onKeydown, true);
+  window.addEventListener("resize", positionMenu);
+  window.visualViewport?.addEventListener("resize", positionMenu);
   return () => {
     stop();
     element.removeEventListener("click", onClick);
     document.removeEventListener("pointerdown", onOutside, true);
+    document.removeEventListener("keydown", onKeydown, true);
+    window.removeEventListener("resize", positionMenu);
+    window.visualViewport?.removeEventListener("resize", positionMenu);
   };
 }