@1771technologies/lytenyte-pro 0.9.4 → 1.0.0-beta.0

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

@@ -0,0 +1,414 @@
+import { isFullWidthMap } from "@1771technologies/lytenyte-shared";
+import { getFocusCriteria } from "./get-focus-criteria";
+/**
+ * This is quite a complex function so read each part carefully.
+ */
+export function makeRowLayout({ layout: n, layoutMap, rds, columns, focus, }) {
+    // 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);
+    /**
+     * TOP ROW LAYOUT START
+     */
+    for (let r = n.rowTopStart; r < n.rowTopEnd; 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 rowLastPinTop = n.rowTopEnd - 1 === r ? true : undefined;
+        if (isFullWidthMap(row)) {
+            top.push({
+                id: node.get()?.id ?? `${r}`,
+                rowIndex: r,
+                kind: "full-width",
+                rowPin: "top",
+                row: node,
+                rowLastPinTop,
+            });
+            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: "top",
+                colPin: "start",
+                colLastStartPin: c + v[1] === 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;
+            cellLayout.push({
+                id: columns[c].id,
+                kind: "cell",
+                colIndex: c,
+                rowIndex: r,
+                rowSpan: v[0],
+                colSpan: v[1],
+                rowPin: "top",
+                colPin: null,
+                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;
+            cellLayout.push({
+                id: columns[c].id,
+                kind: "cell",
+                colIndex: c,
+                rowIndex: r,
+                rowSpan: v[0],
+                colSpan: v[1],
+                rowPin: "top",
+                colPin: "end",
+                colFirstEndPin: c === n.colCenterLast ? true : undefined,
+                rowLastPinTop,
+                row: node,
+                column: columns[c],
+            });
+        }
+        top.push({
+            id: node.get()?.id ?? `${r}`,
+            rowIndex: r,
+            kind: "row",
+            cells: cellLayout,
+            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,
+        });
+    }
+    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,
+    };
+}

package/dist/state/use-lytenyte.d.ts

@@ -0,0 +1,3 @@
+import { type Grid, type UseLyteNyteProps } from "../+types.js";
+export declare function makeLyteNyte<T>(p: UseLyteNyteProps<T>): Grid<T>;
+export declare function useLyteNyte<T>(p: UseLyteNyteProps<T>): Grid<T>;