danielgm-ui 0.1.1 → 0.2.0

package/dist/internal/animated-grid-layout.js

@@ -0,0 +1,55 @@
+/** Reconciliación de claves: las altas y el nuevo orden esperan mientras exista una salida. */
+export function reconcileGridSlots(previous, desiredKeys, desiredItems, lastItems, heights) {
+    const desired = new Set(desiredKeys);
+    const retained = previous.map((slot) => {
+        if (desired.has(slot.key)) {
+            return slot.exiting ? { ...slot, exiting: false, exited: false } : slot;
+        }
+        if (slot.exiting)
+            return slot;
+        return {
+            ...slot,
+            item: lastItems.has(slot.key) ? lastItems.get(slot.key) : slot.item,
+            exiting: true,
+            exited: false,
+            exitHeight: heights.get(slot.key) ?? 0,
+        };
+    });
+    if (retained.some((slot) => slot.exiting))
+        return retained;
+    const existing = new Map(retained.map((slot) => [slot.key, slot]));
+    return desiredKeys.map((key) => existing.get(key) ?? {
+        key,
+        item: desiredItems.get(key),
+        exiting: false,
+        exited: false,
+        appear: true,
+        exitHeight: 0,
+    });
+}
+/**
+ * Las celdas de una fila comparten offsetTop aunque su contenido tenga alturas distintas.
+ * Agrupar esos valores evita confundir el cambio de altura de una fila con un salto de fila.
+ */
+export function readGridPositions(nodes) {
+    const measured = [...nodes]
+        .filter(([, node]) => node.isConnected)
+        .map(([key, node]) => ({
+        key,
+        left: node.offsetLeft,
+        top: node.offsetTop,
+        width: node.offsetWidth,
+        height: node.offsetHeight,
+    }));
+    const rows = new Map();
+    let row = -1;
+    let rowTop = Number.NEGATIVE_INFINITY;
+    for (const { key, top } of [...measured].sort((a, b) => a.top - b.top)) {
+        if (row < 0 || Math.abs(rowTop - top) > 2) {
+            row++;
+            rowTop = top;
+        }
+        rows.set(key, row);
+    }
+    return new Map(measured.map(({ key, ...position }) => [key, { ...position, row: rows.get(key) }]));
+}