@1771technologies/lytenyte-pro 1.0.1 → 1.0.3

package/dist/state/helpers/row-layout/row-layout.js

@@ -1,124 +1,171 @@
-import { isFullWidthMap } from "@1771technologies/lytenyte-shared";
-import { getFocusCriteria } from "./get-focus-criteria";
+import { CONTAINS_DEAD_CELLS, FULL_WIDTH, } from "@1771technologies/lytenyte-shared";
 /**
  * This is quite a complex function so read each part carefully.
  */
-export function makeRowLayout({ layout: n, layoutMap, rds, columns, focus, }) {
+export function makeRowLayout({ view: n, viewCache, layout, rds, columns }) {
     // Initializes the layout sections for the view.
     const top = [];
     const center = [];
     const bottom = [];
-    // Compute the focus setup for the view. The cell that is currently focused must always be mounted.
-    // However things get tricky since the cell may be scrolled out of view. Additionally it may be in any
-    // quadrant of the grid. This function returns the specification of where exactly the focus cell is.
-    const f = getFocusCriteria(n, focus);
+    handleViewLayout({
+        columns,
+        container: top,
+        layout,
+        rowStart: n.rowTopStart,
+        rowEnd: n.rowTopEnd,
+        rowForIndex: rds.rowForIndex,
+        rowPin: "top",
+        spanLayout: n,
+        viewCache,
+    });
+    handleViewLayout({
+        columns,
+        container: center,
+        layout,
+        rowStart: n.rowCenterStart,
+        rowEnd: n.rowCenterEnd,
+        rowForIndex: rds.rowForIndex,
+        rowPin: null,
+        spanLayout: n,
+        viewCache,
+    });
+    handleViewLayout({
+        columns,
+        container: bottom,
+        layout,
+        rowStart: n.rowBotStart,
+        rowEnd: n.rowBotEnd,
+        rowForIndex: rds.rowForIndex,
+        rowPin: "bottom",
+        spanLayout: n,
+        viewCache,
+    });
+    /**
+     * BOTTOM ROW LAYOUT END
+     */
+    return {
+        top: top.map((t) => partition(n, t)),
+        center: center.map((t) => partition(n, t)),
+        bottom: bottom.map((t) => partition(n, t)),
+    };
+}
+const partition = (n, row) => {
+    if (row.kind === "full-width")
+        return row;
+    let found = false;
+    const cells = [
+        ...row.cells.slice(0, n.colStartEnd),
+        ...row.cells.slice(n.colCenterStart, n.colCenterEnd).map((c) => {
+            if (!found && c.isDeadCol && !c.isDeadRow)
+                return { ...c, isDeadCol: false, isDeadRow: true };
+            found = true;
+            return c;
+        }),
+        ...row.cells.slice(n.colEndStart, n.colEndEnd),
+    ];
+    return {
+        ...row,
+        cells,
+    };
+};
+function handleViewLayout({ columns, spanLayout: n, rowStart, rowEnd, rowPin, layout, viewCache, container, rowForIndex, }) {
     /**
      * TOP ROW LAYOUT START
      */
-    for (let r = n.rowTopStart; r < n.rowTopEnd; r++) {
-        const row = layoutMap.get(r);
-        if (!row) {
+    for (let r = rowStart; r < rowEnd; r++) {
+        const status = layout.special[r];
+        const computed = layout.computed[r];
+        if (!computed)
+            continue;
+        if (viewCache.has(r)) {
+            container.push(viewCache.get(r));
             continue;
         }
-        const node = rds.rowForIndex(r);
-        if (!node) {
-            console.error(`Row data source did not return a row for a valid row position at index: ${r}`);
+        const node = rowForIndex(r);
+        if (!node)
             break;
-        }
         const rowLastPinTop = n.rowTopEnd - 1 === r ? true : undefined;
-        if (isFullWidthMap(row)) {
-            top.push({
+        if (status === FULL_WIDTH) {
+            const row = {
                 id: node.get()?.id ?? `${r}`,
                 rowIndex: r,
                 kind: "full-width",
-                rowPin: "top",
+                rowPin,
                 row: node,
                 rowLastPinTop,
-            });
+            };
+            viewCache.set(r, row);
+            container.push(row);
             continue;
         }
+        const cellSpec = layout.lookup.get(r);
         const cellLayout = [];
+        const hasDead = status === CONTAINS_DEAD_CELLS;
         for (let c = n.colStartStart; c < n.colStartEnd; c++) {
-            const v = row.get(c);
-            if (!v || v.length === 3)
-                continue;
+            const ci = c * 4;
+            const isDeadRow = hasDead && cellSpec?.[ci] === -1;
+            const isDeadCol = hasDead && cellSpec?.[ci] === 0;
+            const colSpan = cellSpec?.[c * 4 + 1] || 1;
             cellLayout.push({
                 id: columns[c].id,
                 kind: "cell",
                 colIndex: c,
                 rowIndex: r,
-                rowSpan: v[0],
-                colSpan: v[1],
-                rowPin: "top",
+                rowSpan: cellSpec?.[c * 4] || 1,
+                colSpan,
+                rowPin,
                 colPin: "start",
-                colLastStartPin: c + v[1] === n.colStartEnd ? true : undefined,
+                isDeadCol,
+                isDeadRow,
+                colLastStartPin: c + colSpan === n.colStartEnd ? true : undefined,
                 rowLastPinTop,
                 row: node,
                 column: columns[c],
             });
         }
-        for (let c = n.colCenterStart; c < n.colCenterEnd; c++) {
-            const v = row.get(c);
-            if (!v || v.length === 3)
-                continue;
+        for (let c = n.colStartEnd; c < n.colCenterLast; c++) {
+            const ci = c * 4;
+            const isDeadRow = hasDead && cellSpec?.[ci] === -1;
+            const isDeadCol = hasDead && cellSpec?.[ci] === 0;
+            const colSpan = cellSpec?.[c * 4 + 1] || 1;
             cellLayout.push({
                 id: columns[c].id,
                 kind: "cell",
                 colIndex: c,
                 rowIndex: r,
-                rowSpan: v[0],
-                colSpan: v[1],
-                rowPin: "top",
+                rowSpan: cellSpec?.[c * 4] || 1,
+                colSpan,
+                rowPin,
                 colPin: null,
+                isDeadCol,
+                isDeadRow,
                 rowLastPinTop,
                 row: node,
                 column: columns[c],
             });
         }
-        // For the top section, only the center cells may be out of view. The focused cell may be before or after the
-        // center cells (if they are in the center cells we will be rendering them anyway).
-        if (f.isTop && (f.isColCenterBefore || f.isColCenterAfter)) {
-            const v = row.get(f.colIndex);
-            if (v && v.length !== 3) {
-                const cell = {
-                    id: columns[f.colIndex].id,
-                    kind: "cell",
-                    colIndex: f.colIndex,
-                    rowIndex: f.rowIndex,
-                    rowSpan: v[0],
-                    colSpan: v[1],
-                    rowPin: "top",
-                    colPin: null,
-                    rowLastPinTop,
-                    row: node,
-                    column: columns[f.colIndex],
-                };
-                if (f.isColCenterBefore)
-                    cellLayout.unshift(cell);
-                else
-                    cellLayout.push(cell);
-            }
-        }
         for (let c = n.colEndStart; c < n.colEndEnd; c++) {
-            const v = row.get(c);
-            if (!v || v.length === 3)
-                continue;
+            const ci = c * 4;
+            const isDeadRow = hasDead && cellSpec?.[ci] === -1;
+            const isDeadCol = hasDead && cellSpec?.[ci] === 0;
             cellLayout.push({
                 id: columns[c].id,
                 kind: "cell",
                 colIndex: c,
                 rowIndex: r,
-                rowSpan: v[0],
-                colSpan: v[1],
+                rowSpan: cellSpec?.[c * 4] || 1,
+                colSpan: cellSpec?.[c * 4 + 1] || 1,
                 rowPin: "top",
                 colPin: "end",
+                isDeadCol,
+                isDeadRow,
                 colFirstEndPin: c === n.colCenterLast ? true : undefined,
                 rowLastPinTop,
                 row: node,
                 column: columns[c],
             });
         }
-        top.push({
+        const row = {
             id: node.get()?.id ?? `${r}`,
             rowIndex: r,
             kind: "row",
@@ -126,289 +173,8 @@ export function makeRowLayout({ layout: n, layoutMap, rds, columns, focus, }) {
             rowPin: "top",
             row: node,
             rowLastPinTop,
-        });
-    }
-    /**
-     * TOP ROW LAYOUT END
-     */
-    /**
-     * CENTER ROW LAYOUT START
-     */
-    for (let r = n.rowCenterStart; r < n.rowCenterEnd; r++) {
-        const row = layoutMap.get(r);
-        if (!row) {
-            continue;
-        }
-        const node = rds.rowForIndex(r);
-        if (!node) {
-            console.error(`Row data source did not return a row for a valid row position at index: ${r}`);
-            break;
-        }
-        if (isFullWidthMap(row)) {
-            center.push({
-                id: node.get()?.id ?? `${r}`,
-                rowIndex: r,
-                kind: "full-width",
-                rowPin: null,
-                row: node,
-            });
-            continue;
-        }
-        const cellLayout = [];
-        for (let c = n.colStartStart; c < n.colStartEnd; c++) {
-            const v = row.get(c);
-            if (!v || v.length === 3)
-                continue;
-            cellLayout.push({
-                id: columns[c].id,
-                kind: "cell",
-                colIndex: c,
-                rowIndex: r,
-                rowSpan: v[0],
-                colSpan: v[1],
-                rowPin: null,
-                colPin: "start",
-                colLastStartPin: c + v[1] === n.colStartEnd ? true : undefined,
-                row: node,
-                column: columns[c],
-            });
-        }
-        for (let c = n.colCenterStart; c < n.colCenterEnd; c++) {
-            const v = row.get(c);
-            if (!v || v.length === 3)
-                continue;
-            cellLayout.push({
-                id: columns[c].id,
-                kind: "cell",
-                colIndex: c,
-                rowIndex: r,
-                rowSpan: v[0],
-                colSpan: v[1],
-                rowPin: null,
-                colPin: null,
-                row: node,
-                column: columns[c],
-            });
-        }
-        if (!f.isBot &&
-            !f.isTop &&
-            !f.isRowCenterAfter &&
-            !f.isRowCenterAfter &&
-            (f.isColCenterAfter || f.isColCenterBefore)) {
-            const v = row.get(f.colIndex);
-            if (v && v.length !== 3) {
-                const cell = {
-                    id: columns[f.colIndex].id,
-                    kind: "cell",
-                    colIndex: f.colIndex,
-                    rowIndex: f.rowIndex,
-                    rowSpan: v[0],
-                    colSpan: v[1],
-                    rowPin: null,
-                    colPin: null,
-                    row: node,
-                    column: columns[f.colIndex],
-                };
-                if (f.isColCenterAfter)
-                    cellLayout.push(cell);
-                else
-                    cellLayout.unshift(cell);
-            }
-        }
-        for (let c = n.colEndStart; c < n.colEndEnd; c++) {
-            const v = row.get(c);
-            if (!v || v.length === 3)
-                continue;
-            cellLayout.push({
-                id: columns[c].id,
-                kind: "cell",
-                colIndex: c,
-                rowIndex: r,
-                rowSpan: v[0],
-                colSpan: v[1],
-                rowPin: null,
-                colPin: "end",
-                colFirstEndPin: c === n.colCenterLast ? true : undefined,
-                row: node,
-                column: columns[c],
-            });
-        }
-        center.push({
-            id: node.get()?.id ?? `${r}`,
-            rowIndex: r,
-            kind: "row",
-            cells: cellLayout,
-            rowPin: null,
-            row: node,
-        });
+        };
+        viewCache.set(r, row);
+        container.push(row);
     }
-    if (f.isRowCenterBefore || f.isRowCenterAfter) {
-        const row = layoutMap.get(f.rowIndex);
-        const node = rds.rowForIndex(f.rowIndex);
-        if (row && node) {
-            if (isFullWidthMap(row)) {
-                center.push({
-                    id: node.get()?.id ?? `${f.rowIndex}`,
-                    rowIndex: f.rowIndex,
-                    kind: "full-width",
-                    rowPin: null,
-                    row: node,
-                    rowIsFocusRow: true,
-                });
-            }
-            else {
-                const cellLayout = [];
-                const v = row.get(f.colIndex);
-                if (v && v.length !== 3) {
-                    cellLayout.push({
-                        id: columns[f.colIndex].id,
-                        kind: "cell",
-                        colIndex: f.colIndex,
-                        rowIndex: f.rowIndex,
-                        rowSpan: v[0],
-                        colSpan: v[1],
-                        rowPin: null,
-                        colPin: f.isStart ? "start" : f.isEnd ? "end" : null,
-                        rowIsFocusRow: true,
-                        row: node,
-                        column: columns[f.colIndex],
-                    });
-                }
-                const rowLayout = {
-                    id: node.get()?.id ?? `${f.rowIndex}`,
-                    rowIndex: f.rowIndex,
-                    kind: "row",
-                    cells: cellLayout,
-                    rowPin: null,
-                    row: node,
-                    rowIsFocusRow: true,
-                };
-                if (f.isRowCenterAfter)
-                    center.push(rowLayout);
-                else
-                    center.unshift(rowLayout);
-            }
-        }
-    }
-    /**
-     * CENTER ROW LAYOUT END
-     */
-    /**
-     * BOTTOM ROW LAYOUT START
-     */
-    for (let r = n.rowBotStart; r < n.rowBotEnd; r++) {
-        const row = layoutMap.get(r);
-        if (!row) {
-            continue;
-        }
-        const node = rds.rowForIndex(r);
-        if (!node) {
-            console.error(`Row data source did not return a row for a valid row position at index: ${r}`);
-            break;
-        }
-        const rowFirstPinBottom = r === n.rowBotStart ? true : undefined;
-        if (isFullWidthMap(row)) {
-            bottom.push({
-                id: node.get()?.id ?? `${r}`,
-                rowIndex: r,
-                kind: "full-width",
-                rowPin: "bottom",
-                row: node,
-                rowFirstPinBottom,
-            });
-            continue;
-        }
-        const cellLayout = [];
-        for (let c = n.colStartStart; c < n.colStartEnd; c++) {
-            const v = row.get(c);
-            if (!v || v.length === 3)
-                continue;
-            cellLayout.push({
-                id: columns[c].id,
-                kind: "cell",
-                colIndex: c,
-                rowIndex: r,
-                rowSpan: v[0],
-                colSpan: v[1],
-                rowPin: "bottom",
-                colPin: "start",
-                colLastStartPin: c + v[1] === n.colStartEnd ? true : undefined,
-                rowFirstPinBottom,
-                row: node,
-                column: columns[c],
-            });
-        }
-        for (let c = n.colCenterStart; c < n.colCenterEnd; c++) {
-            const v = row.get(c);
-            if (!v || v.length === 3)
-                continue;
-            cellLayout.push({
-                id: columns[c].id,
-                kind: "cell",
-                colIndex: c,
-                rowIndex: r,
-                rowSpan: v[0],
-                colSpan: v[1],
-                rowPin: "bottom",
-                colPin: null,
-                rowFirstPinBottom,
-                row: node,
-                column: columns[c],
-            });
-        }
-        if (f.isBot && (f.isColCenterAfter || f.isColCenterBefore)) {
-            const v = row.get(f.colIndex);
-            if (v && v.length !== 3) {
-                const cell = {
-                    id: columns[f.colIndex].id,
-                    kind: "cell",
-                    colIndex: f.colIndex,
-                    rowIndex: f.rowIndex,
-                    rowSpan: v[0],
-                    colSpan: v[1],
-                    rowPin: "bottom",
-                    colPin: null,
-                    row: node,
-                    column: columns[f.colIndex],
-                };
-                cellLayout.push(cell);
-            }
-        }
-        for (let c = n.colEndStart; c < n.colEndEnd; c++) {
-            const v = row.get(c);
-            if (!v || v.length === 3)
-                continue;
-            cellLayout.push({
-                id: columns[c].id,
-                kind: "cell",
-                colIndex: c,
-                rowIndex: r,
-                rowSpan: v[0],
-                colSpan: v[1],
-                rowPin: "bottom",
-                colPin: "end",
-                colFirstEndPin: c === n.colCenterLast ? true : undefined,
-                rowFirstPinBottom,
-                row: node,
-                column: columns[c],
-            });
-        }
-        bottom.push({
-            id: node.get()?.id ?? `${r}`,
-            rowIndex: r,
-            kind: "row",
-            cells: cellLayout,
-            rowPin: "bottom",
-            row: node,
-            rowFirstPinBottom,
-        });
-    }
-    /**
-     * BOTTOM ROW LAYOUT END
-     */
-    return {
-        top,
-        center,
-        bottom,
-    };
 }