@svelte-lean/table 0.15.4 → 0.16.0

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # @svelte-lean/table
 
+## 0.16.0
+
+### Minor Changes
+
+- 12ca0ce: The live row drag (`onRowMove`) runs on the shared reorder engine of `@svelte-lean/core/reorder`
+  (ADR 0012), which the new sortable primitive uses too; `@svelte-lean/table` now depends on
+  `@svelte-lean/core` and imports only that subpath. The behavior, the attributes
+  (`data-row-dragging`, `data-row-settling`, `data-lifted`) and the keyboard are unchanged, and the
+  per-move cost is unchanged within measurement noise; the renderer grows by 366 B gzip (23742 B →
+  24108 B), and its budget is raised from 23900 B to 24300 B.
+
+### Patch Changes
+
+- Updated dependencies [8a774c6]
+- Updated dependencies [12ca0ce]
+  - @svelte-lean/core@0.16.0
+
+## 0.15.5
+
+No changes in this release.
+
 ## 0.15.4
 
 ### Patch Changes

package/dist/table/data-table.svelte

@@ -82,7 +82,8 @@
 	import { en } from '../messages.js';
 	import { parseEdit } from '../editing.js';
 	import { horizontalCell, verticalCell } from './navigation.js';
-	import { dragRow } from './row-drag.js';
+	import { reorder } from '@svelte-lean/core/reorder';
+	import { ROW_DRAG, rowBlock } from './row-drag.js';
 	let {
 		data,
 		columns,
@@ -1385,18 +1386,21 @@
 		);
 		return true;
 	}
-	/** A press on a grip starts a live drag (`row-drag.ts`); one delegated listener for the table. */
+	/** A press on a grip starts a live drag (`row-drag.ts`, `@svelte-lean/core/reorder`); one delegated listener for the table. */
 	function bodyPointerDown(e: PointerEvent) {
 		const row = gripRow(e.target);
 		if (!movable || !row) return;
-		dragRow({
+		reorder({
 			event: e,
-			grip: e.target as HTMLElement,
-			row,
+			handle: e.target as HTMLElement,
+			item: row,
 			root,
 			viewport,
-			rows: () => [...ownRows()],
-			move: (source, target) => {
+			items: () => [...ownRows()],
+			key: (tr) => tr.getAttribute('data-row-id') ?? '',
+			block: rowBlock,
+			attributes: ROW_DRAG,
+			drop: ({ source, target }) => {
 				const a = nodes.get(source)?.id;
 				const b = nodes.get(target)?.id;
 				if (a !== undefined && b !== undefined) onRowMove?.(a, b);

package/dist/table/row-drag.d.ts

@@ -1,18 +1,22 @@
-export interface RowDragOptions {
-    /** The `pointerdown` on a grip. */
-    event: PointerEvent;
-    grip: HTMLElement;
-    /** The data row of the grip. */
-    row: HTMLTableRowElement;
-    /** The `.slean-table` root: `data-row-dragging`, `data-row-settling`. */
-    root: HTMLElement;
-    /** The `.slean-table-scroll` region. */
-    viewport: HTMLElement;
-    /** The table's own data rows, in document order (never the rows of a nested table). */
-    rows: () => HTMLTableRowElement[];
-    /** Reports a drop on another place, by `data-row-id`. */
-    move: (source: string, target: string) => void;
-    /** Resolves once the application's answer to `move` is in the document (Svelte's `tick`). */
-    update: () => Promise<void>;
-}
-export declare function dragRow(options: RowDragOptions): void;
+/**
+ * Live row dragging for `<DataTable />` (`onRowMove`) runs on the shared reorder engine of
+ * `@svelte-lean/core/reorder` (ADR 0012), which the sortable primitive uses too; the renderer's
+ * `bodyPointerDown` starts it. This module holds what is the table's own: which elements move with
+ * a row, and the attribute names `style.css` reads.
+ *
+ * A press on a grip lifts its row after a few pixels. The lifted row (and its detail rows) follows
+ * the pointer; the rows between its place and the place under it slide out of its way, so the drop
+ * position is visible before release. Release reports the move (`onRowMove`), waits for the
+ * application's update (Svelte's `tick`) and lets the row glide from where it was dropped into the
+ * place it now has. A cancel (Escape, `pointercancel`, a lost capture), or a move the application
+ * did not make, slides every row back. Near the visible edge of the scrolling container the
+ * container scrolls, on a timer. Every listener exists only for the length of one press.
+ */
+/** `data-row-dragging` and `data-row-settling` on the `.slean-table` root, `data-lifted` on the rows. */
+export declare const ROW_DRAG: {
+    dragging: string;
+    settling: string;
+    lifted: string;
+};
+/** A data row and the detail rows that follow it: they move as one. */
+export declare function rowBlock(row: Element): HTMLElement[];

package/dist/table/row-drag.js

@@ -1,247 +1,27 @@
 /**
- * Live row dragging for `<DataTable />` (`onRowMove`). DOM only: no Svelte state changes while the
- * pointer moves; transforms are written straight to the row elements, and only when they change.
+ * Live row dragging for `<DataTable />` (`onRowMove`) runs on the shared reorder engine of
+ * `@svelte-lean/core/reorder` (ADR 0012), which the sortable primitive uses too; the renderer's
+ * `bodyPointerDown` starts it. This module holds what is the table's own: which elements move with
+ * a row, and the attribute names `style.css` reads.
  *
- * A press on a grip lifts its row after `ACTIVATION` pixels. The lifted row (and its detail rows)
- * follows the pointer; the rows between its place and the place under it slide out of its way, so
- * the drop position is visible before release. Release reports the move (`move`), waits for the
- * application's update (`update`) and lets the row glide from where it was dropped into the place
- * it now has. A cancel (Escape, `pointercancel`, a lost capture), or a move the application did not
- * make, slides every row back. Near the visible edge of the scrolling container the container
- * scrolls, on a timer (a hidden tab runs no animation frames).
- *
- * Every listener exists only for the length of one press and is removed through one
- * `AbortController`. Nothing here runs at module evaluation.
+ * A press on a grip lifts its row after a few pixels. The lifted row (and its detail rows) follows
+ * the pointer; the rows between its place and the place under it slide out of its way, so the drop
+ * position is visible before release. Release reports the move (`onRowMove`), waits for the
+ * application's update (Svelte's `tick`) and lets the row glide from where it was dropped into the
+ * place it now has. A cancel (Escape, `pointercancel`, a lost capture), or a move the application
+ * did not make, slides every row back. Near the visible edge of the scrolling container the
+ * container scrolls, on a timer. Every listener exists only for the length of one press.
  */
-const ACTIVATION = 3;
-const EDGE = 48;
-const SPEED = 20;
-const INTERVAL = 16;
-/** The slide of the rows (`style.css`), and a little more, before the end state is cleaned up. */
-const SETTLE_MS = 200;
-/** The cleanup of a drop still sliding into place, per table root: a new press runs it first. */
-const finishing = new WeakMap();
-function blockOf(row) {
+/** `data-row-dragging` and `data-row-settling` on the `.slean-table` root, `data-lifted` on the rows. */
+export const ROW_DRAG = {
+    dragging: 'data-row-dragging',
+    settling: 'data-row-settling',
+    lifted: 'data-lifted'
+};
+/** A data row and the detail rows that follow it: they move as one. */
+export function rowBlock(row) {
     const rows = [row];
     for (let next = row.nextElementSibling; next?.matches('tr.slean-table-detail'); next = next.nextElementSibling)
         rows.push(next);
     return rows;
 }
-function keyOf(row) {
-    return row.getAttribute('data-row-id') ?? '';
-}
-function translate(rows, y) {
-    for (const row of rows)
-        row.style.transform = y ? `translateY(${y}px)` : '';
-}
-/** The nearest container above the table that scrolls vertically; the document otherwise. */
-function scrollerOf(viewport) {
-    const doc = viewport.ownerDocument;
-    for (let element = viewport; element && element !== doc.body && element !== doc.documentElement; element = element.parentElement) {
-        if (element.scrollHeight > element.clientHeight + 1 &&
-            /auto|scroll|overlay/.test(getComputedStyle(element).overflowY))
-            return element;
-    }
-    return doc.scrollingElement ?? doc.documentElement;
-}
-export function dragRow(options) {
-    const { event, grip, root } = options;
-    if (event.button !== 0 || !event.isPrimary)
-        return;
-    finishing.get(root)?.();
-    const doc = grip.ownerDocument;
-    const startX = event.clientX;
-    const startY = event.clientY;
-    let y = startY;
-    const controller = new AbortController();
-    const { signal } = controller;
-    let blocks = [];
-    let dragged;
-    let from = -1;
-    let target = -1;
-    let scroller = doc.documentElement;
-    let page = false;
-    let scrollStart = 0;
-    let written = 0;
-    let timer;
-    try {
-        grip.setPointerCapture(event.pointerId);
-    }
-    catch {
-        // No capture (an engine or a test environment without it): the document listeners below
-        // still receive the moves while the pointer stays over the page.
-    }
-    function lift() {
-        blocks = options.rows().map((row) => {
-            const rows = blockOf(row);
-            const first = rows[0].getBoundingClientRect();
-            const last = rows[rows.length - 1].getBoundingClientRect();
-            return { key: keyOf(row), rows, top: first.top, height: last.bottom - first.top, shift: 0 };
-        });
-        from = target = blocks.findIndex((block) => block.rows[0] === options.row);
-        dragged = blocks[from];
-        if (!dragged)
-            return false;
-        scroller = scrollerOf(options.viewport);
-        page = scroller === doc.scrollingElement || scroller === doc.documentElement;
-        scrollStart = scroller.scrollTop;
-        root.setAttribute('data-row-dragging', '');
-        for (const row of dragged.rows) {
-            row.setAttribute('data-lifted', '');
-            // The lifted row follows the pointer exactly; the others slide (`style.css`).
-            row.style.transition = 'none';
-        }
-        doc.addEventListener('keydown', escape, { signal, capture: true });
-        (page ? doc : scroller).addEventListener('scroll', frame, { signal, passive: true });
-        timer = setInterval(autoScroll, INTERVAL);
-        return true;
-    }
-    function frame() {
-        if (!dragged)
-            return;
-        const dy = y - startY + scroller.scrollTop - scrollStart;
-        if (dy !== written) {
-            written = dy;
-            translate(dragged.rows, dy);
-        }
-        const centre = dragged.top + dy + dragged.height / 2;
-        const middle = (block) => block.top + block.height / 2;
-        let next = from;
-        while (next + 1 < blocks.length && centre > middle(blocks[next + 1]))
-            next++;
-        if (next === from)
-            while (next > 0 && centre < middle(blocks[next - 1]))
-                next--;
-        target = next;
-        blocks.forEach((block, i) => {
-            if (i === from)
-                return;
-            const shift = i > from && i <= next ? -dragged.height : i < from && i >= next ? dragged.height : 0;
-            if (shift === block.shift)
-                return;
-            block.shift = shift;
-            translate(block.rows, shift);
-        });
-    }
-    /** Scrolls while the pointer is within `EDGE` of the container's visible top or bottom. */
-    function autoScroll() {
-        const height = doc.documentElement.clientHeight;
-        const box = page ? { top: 0, bottom: height } : scroller.getBoundingClientRect();
-        const top = Math.max(box.top, 0);
-        const bottom = Math.min(box.bottom, height);
-        const speed = (distance) => Math.ceil(SPEED * (1 - Math.max(0, distance) / EDGE));
-        const step = y - top < EDGE ? -speed(y - top) : bottom - y < EDGE ? speed(bottom - y) : 0;
-        if (!step)
-            return;
-        const before = scroller.scrollTop;
-        scroller.scrollTop = before + step;
-        if (scroller.scrollTop !== before)
-            frame();
-    }
-    function stop() {
-        controller.abort();
-        clearInterval(timer);
-    }
-    /** Leaves the rows as they are now, after the slide back or into place. */
-    function later(rows) {
-        const done = () => {
-            clearTimeout(handle);
-            finishing.delete(root);
-            for (const row of rows) {
-                row.removeAttribute('data-lifted');
-                row.style.transform = '';
-                row.style.transition = '';
-            }
-            root.removeAttribute('data-row-settling');
-            root.removeAttribute('data-row-dragging');
-        };
-        const handle = setTimeout(done, SETTLE_MS);
-        finishing.set(root, done);
-    }
-    /** Every row slides back to its place. */
-    function back() {
-        for (const row of dragged.rows)
-            row.style.transition = '';
-        for (const block of blocks) {
-            block.shift = 0;
-            translate(block.rows, 0);
-        }
-        later(blocks.flatMap((block) => block.rows));
-    }
-    /**
-     * The application has answered the move. Positions are reset with transitions off; the dragged
-     * row (perhaps a new element: it is found again by its id) starts where it was dropped and
-     * slides into its new place.
-     */
-    function settle(dropped) {
-        const key = dragged.key;
-        const now = options.rows();
-        const row = now.find((element) => keyOf(element) === key);
-        if (row && now.indexOf(row) === from)
-            return back();
-        root.setAttribute('data-row-settling', '');
-        for (const block of blocks)
-            for (const element of block.rows) {
-                element.removeAttribute('data-lifted');
-                element.style.transform = '';
-                element.style.transition = '';
-            }
-        if (!row)
-            return later([]);
-        const rows = blockOf(row);
-        const offset = dropped - row.getBoundingClientRect().top;
-        for (const element of rows)
-            element.setAttribute('data-lifted', '');
-        translate(rows, offset);
-        void row.offsetHeight;
-        root.removeAttribute('data-row-settling');
-        translate(rows, 0);
-        later(rows);
-    }
-    function drop() {
-        stop();
-        if (target === from)
-            return back();
-        const dropped = dragged.rows[0].getBoundingClientRect().top;
-        options.move(dragged.key, blocks[target].key);
-        void options.update().then(() => settle(dropped));
-    }
-    function cancel() {
-        stop();
-        if (dragged)
-            back();
-    }
-    function escape(e) {
-        if (e.key !== 'Escape')
-            return;
-        e.preventDefault();
-        e.stopPropagation();
-        cancel();
-    }
-    doc.addEventListener('pointermove', (e) => {
-        if (e.pointerId !== event.pointerId)
-            return;
-        y = e.clientY;
-        if (!dragged) {
-            if (Math.hypot(e.clientX - startX, e.clientY - startY) < ACTIVATION)
-                return;
-            if (!lift())
-                return stop();
-        }
-        e.preventDefault();
-        frame();
-    }, { signal });
-    doc.addEventListener('pointerup', (e) => {
-        if (e.pointerId !== event.pointerId)
-            return;
-        if (dragged)
-            drop();
-        else
-            stop();
-    }, { signal });
-    doc.addEventListener('pointercancel', (e) => {
-        if (e.pointerId === event.pointerId)
-            cancel();
-    }, { signal });
-    grip.addEventListener('lostpointercapture', cancel, { signal });
-}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@svelte-lean/table",
-  "version": "0.15.4",
+  "version": "0.16.0",
   "description": "A Svelte-native table and data-grid engine that ships only the features you use.",
   "license": "MIT",
   "author": "Ömer Say",
@@ -91,6 +91,7 @@
     "headless"
   ],
   "dependencies": {
+    "@svelte-lean/core": "^0.16.0",
     "esm-env": "^1.2.2"
   }
 }