@1771technologies/lytenyte-pro 1.0.0-beta.10 → 1.0.0-beta.11

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

@@ -3,398 +3,412 @@ 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,
+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,
         });
-      } else {
+    }
+    /**
+     * 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 = [];
-        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],
+        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,
-            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);
-      }
+    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);
+            }
+        }
     }
-    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],
-      });
+    /**
+     * 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.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,
-  };
+    /**
+     * BOTTOM ROW LAYOUT END
+     */
+    return {
+        top,
+        center,
+        bottom,
+    };
 }