@jsenv/navi 0.0.1 → 0.1.0

package/src/components/table/selection/table_selection.js

@@ -0,0 +1,106 @@
+import { createContext } from "preact";
+import { useMemo } from "preact/hooks";
+
+export const TableSelectionContext = createContext();
+export const useTableSelectionContextValue = (
+  selection,
+  selectionController,
+) => {
+  const selectionContextValue = useMemo(() => {
+    const selectedColumnIds = [];
+    const selectedRowIds = [];
+    const selectedCellIds = [];
+    const columnIdWithSomeSelectedCellSet = new Set();
+    const rowIdWithSomeSelectedCellSet = new Set();
+    for (const item of selection) {
+      const selectionValueInfo = parseTableSelectionValue(item);
+      if (selectionValueInfo.type === "row") {
+        const { rowId } = selectionValueInfo;
+        selectedRowIds.push(rowId);
+        continue;
+      }
+      if (selectionValueInfo.type === "column") {
+        const { columnId } = selectionValueInfo;
+        selectedColumnIds.push(columnId);
+        continue;
+      }
+      if (selectionValueInfo.type === "cell") {
+        const { cellId, columnId, rowId } = selectionValueInfo;
+        selectedCellIds.push(cellId);
+        columnIdWithSomeSelectedCellSet.add(columnId);
+        rowIdWithSomeSelectedCellSet.add(rowId);
+        continue;
+      }
+    }
+    return {
+      selection,
+      selectionController,
+      selectedColumnIds,
+      selectedRowIds,
+      columnIdWithSomeSelectedCellSet,
+      rowIdWithSomeSelectedCellSet,
+    };
+  }, [selection]);
+
+  return selectionContextValue;
+};
+
+export const parseTableSelectionValue = (selectionValue) => {
+  if (selectionValue.startsWith("column:")) {
+    const columnId = selectionValue.slice("column:".length);
+    return { type: "column", columnId };
+  }
+  if (selectionValue.startsWith("row:")) {
+    const rowId = selectionValue.slice("row:".length);
+    return { type: "row", rowId };
+  }
+  const cellId = selectionValue.slice("cell:".length);
+  const [columnId, rowId] = cellId.split("-");
+  return { type: "cell", cellId, columnId, rowId };
+};
+export const stringifyTableSelectionValue = (type, value) => {
+  if (type === "cell") {
+    const { columnId, rowId } = value;
+    return `cell:${columnId}-${rowId}`;
+  }
+  if (type === "column") {
+    return `column:${value}`;
+  }
+  if (type === "row") {
+    return `row:${value}`;
+  }
+  return "";
+};
+
+/**
+ * Check if a specific cell is selected
+ * @param {Array} selection - The selection set or array
+ * @param {{rowIndex: number, columnIndex: number}} cellPosition - Cell coordinates
+ * @returns {boolean} True if the cell is selected
+ */
+export const isCellSelected = (selection, cellId) => {
+  const cellSelectionValue = stringifyTableSelectionValue("cell", cellId);
+  return selection.includes(cellSelectionValue);
+};
+
+/**
+ * Check if a specific row is selected
+ * @param {Array} selection - The selection set or array
+ * @param {number} rowIndex - Row index
+ * @returns {boolean} True if the row is selected
+ */
+export const isRowSelected = (selection, rowId) => {
+  const rowSelectionValue = stringifyTableSelectionValue("row", rowId);
+  return selection.includes(rowSelectionValue);
+};
+
+/**
+ * Check if a specific column is selected
+ * @param {Array} selection - The selection set or array
+ * @param {number} columnIndex - Column index
+ * @returns {boolean} True if the column is selected
+ */
+export const isColumnSelected = (selection, columnId) => {
+  const columnSelectionValue = stringifyTableSelectionValue("column", columnId);
+  return selection.has(columnSelectionValue);
+};

package/src/components/table/selection/table_selection.jsx

@@ -0,0 +1,203 @@
+import { useLayoutEffect } from "preact/hooks";
+
+import { useSelectionController } from "../../selection/selection.jsx";
+
+import.meta.css = /* css */ `
+  body {
+    --selection-border-color: #0078d4;
+    --selection-background-color: #eaf1fd;
+  }
+
+  .navi_table_cell[aria-selected="true"] {
+    background-color: var(--selection-background-color);
+  }
+
+  /* One border */
+  .navi_table_cell[data-selection-border-top]::after {
+    box-shadow: inset 0 1px 0 0 var(--selection-border-color);
+  }
+  .navi_table_cell[data-selection-border-right]::after {
+    box-shadow: inset -1px 0 0 0 var(--selection-border-color);
+  }
+  .navi_table_cell[data-selection-border-bottom]::after {
+    box-shadow: inset 0 -1px 0 0 var(--selection-border-color);
+  }
+  .navi_table_cell[data-selection-border-left]::after {
+    box-shadow: inset 1px 0 0 0 var(--selection-border-color);
+  }
+
+  /* Two border combinations */
+  .navi_table_cell[data-selection-border-top][data-selection-border-right]::after {
+    box-shadow:
+      inset 0 1px 0 0 var(--selection-border-color),
+      inset -1px 0 0 0 var(--selection-border-color);
+  }
+  .navi_table_cell[data-selection-border-top][data-selection-border-bottom]::after {
+    box-shadow:
+      inset 0 1px 0 0 var(--selection-border-color),
+      inset 0 -1px 0 0 var(--selection-border-color);
+  }
+  .navi_table_cell[data-selection-border-top][data-selection-border-left]::after {
+    box-shadow:
+      inset 0 1px 0 0 var(--selection-border-color),
+      inset 1px 0 0 0 var(--selection-border-color);
+  }
+  .navi_table_cell[data-selection-border-right][data-selection-border-bottom]::after {
+    box-shadow:
+      inset -1px 0 0 0 var(--selection-border-color),
+      inset 0 -1px 0 0 var(--selection-border-color);
+  }
+  .navi_table_cell[data-selection-border-right][data-selection-border-left]::after {
+    box-shadow:
+      inset -1px 0 0 0 var(--selection-border-color),
+      inset 1px 0 0 0 var(--selection-border-color);
+  }
+  .navi_table_cell[data-selection-border-bottom][data-selection-border-left]::after {
+    box-shadow:
+      inset 0 -1px 0 0 var(--selection-border-color),
+      inset 1px 0 0 0 var(--selection-border-color);
+  }
+
+  /* Three border combinations */
+  .navi_table_cell[data-selection-border-top][data-selection-border-right][data-selection-border-bottom]::after {
+    box-shadow:
+      inset 0 1px 0 0 var(--selection-border-color),
+      inset -1px 0 0 0 var(--selection-border-color),
+      inset 0 -1px 0 0 var(--selection-border-color);
+  }
+  .navi_table_cell[data-selection-border-top][data-selection-border-bottom][data-selection-border-left]::after {
+    box-shadow:
+      inset 0 1px 0 0 var(--selection-border-color),
+      inset 0 -1px 0 0 var(--selection-border-color),
+      inset 1px 0 0 0 var(--selection-border-color);
+  }
+  .navi_table_cell[data-selection-border-top][data-selection-border-right][data-selection-border-left]::after {
+    box-shadow:
+      inset 0 1px 0 0 var(--selection-border-color),
+      inset -1px 0 0 0 var(--selection-border-color),
+      inset 1px 0 0 0 var(--selection-border-color);
+  }
+  .navi_table_cell[data-selection-border-right][data-selection-border-bottom][data-selection-border-left]::after {
+    box-shadow:
+      inset -1px 0 0 0 var(--selection-border-color),
+      inset 0 -1px 0 0 var(--selection-border-color),
+      inset 1px 0 0 0 var(--selection-border-color);
+  }
+
+  /* Four border combinations (full selection) */
+  .navi_table_cell[data-selection-border-top][data-selection-border-right][data-selection-border-bottom][data-selection-border-left]::after {
+    box-shadow:
+      inset 0 1px 0 0 var(--selection-border-color),
+      inset -1px 0 0 0 var(--selection-border-color),
+      inset 0 -1px 0 0 var(--selection-border-color),
+      inset 1px 0 0 0 var(--selection-border-color);
+  }
+`;
+
+export const useTableSelectionController = ({
+  tableRef,
+  selection,
+  onSelectionChange,
+  selectionColor,
+}) => {
+  const selectionController = useSelectionController({
+    elementRef: tableRef,
+    layout: "grid",
+    value: selection,
+    onChange: onSelectionChange,
+    selectAllName: "cell",
+  });
+
+  useLayoutEffect(() => {
+    const table = tableRef.current;
+    if (!table) {
+      return;
+    }
+    updateSelectionBorders(table, selectionController);
+  }, [selectionController.value]);
+
+  useLayoutEffect(() => {
+    const table = tableRef.current;
+    if (!table) {
+      return;
+    }
+    if (selectionColor) {
+      table.style.setProperty("--selection-border-color", selectionColor);
+    } else {
+      table.style.removeProperty("--selection-border-color");
+    }
+  }, [selectionColor]);
+
+  return selectionController;
+};
+
+const updateSelectionBorders = (tableElement, selectionController) => {
+  // Find all selected cells
+  const cells = Array.from(tableElement.querySelectorAll(".navi_table_cell"));
+  const selectedCells = [];
+  for (const cell of cells) {
+    if (selectionController.isElementSelected(cell)) {
+      selectedCells.push(cell);
+    }
+  }
+
+  // Clear all existing selection border attributes
+  tableElement
+    .querySelectorAll(
+      "[data-selection-border-top], [data-selection-border-right], [data-selection-border-bottom], [data-selection-border-left]",
+    )
+    .forEach((cell) => {
+      cell.removeAttribute("data-selection-border-top");
+      cell.removeAttribute("data-selection-border-right");
+      cell.removeAttribute("data-selection-border-bottom");
+      cell.removeAttribute("data-selection-border-left");
+    });
+
+  if (selectedCells.length === 0) {
+    return;
+  }
+
+  // Convert NodeList to array and get cell positions
+
+  const cellPositions = selectedCells.map((cell) => {
+    const row = cell.parentElement;
+    const allRows = Array.from(tableElement.querySelectorAll(".navi_tr"));
+    return {
+      element: cell,
+      rowIndex: allRows.indexOf(row),
+      columnIndex: Array.from(row.children).indexOf(cell),
+    };
+  });
+
+  // Create a set for fast lookup of selected cell positions
+  const selectedPositions = new Set(
+    cellPositions.map((pos) => `${pos.rowIndex},${pos.columnIndex}`),
+  );
+
+  // Apply selection borders based on actual neighbors (for proper L-shaped selection support)
+  cellPositions.forEach(({ element, rowIndex, columnIndex }) => {
+    // Top border: if cell above is NOT selected or doesn't exist
+    const cellAbove = `${rowIndex - 1},${columnIndex}`;
+    if (!selectedPositions.has(cellAbove)) {
+      element.setAttribute("data-selection-border-top", "");
+    }
+
+    // Bottom border: if cell below is NOT selected or doesn't exist
+    const cellBelow = `${rowIndex + 1},${columnIndex}`;
+    if (!selectedPositions.has(cellBelow)) {
+      element.setAttribute("data-selection-border-bottom", "");
+    }
+
+    // Left border: if cell to the left is NOT selected or doesn't exist
+    const cellLeft = `${rowIndex},${columnIndex - 1}`;
+    if (!selectedPositions.has(cellLeft)) {
+      element.setAttribute("data-selection-border-left", "");
+    }
+
+    // Right border: if cell to the right is NOT selected or doesn't exist
+    const cellRight = `${rowIndex},${columnIndex + 1}`;
+    if (!selectedPositions.has(cellRight)) {
+      element.setAttribute("data-selection-border-right", "");
+    }
+  });
+};

package/src/components/table/sticky/sticky_group.js

@@ -0,0 +1,354 @@
+// TODO: move this to @jsenv/dom (the initStickyGroup part, not the useLayoutEffect)
+
+import { createPubSub, setStyles } from "@jsenv/dom";
+import { useLayoutEffect } from "preact/hooks";
+
+// React hook version for easy integration
+export const useStickyGroup = (
+  elementRef,
+  { elementReceivingCumulativeStickyPositionRef, elementSelector } = {},
+) => {
+  useLayoutEffect(() => {
+    const element = elementRef.current;
+    if (!element) {
+      return undefined;
+    }
+    return initStickyGroup(element, {
+      elementSelector,
+      elementReceivingCumulativeStickyPosition:
+        elementReceivingCumulativeStickyPositionRef.current,
+    });
+  }, [elementSelector]);
+};
+
+const ITEM_LEFT_VAR = "--sticky-group-item-left";
+const ITEM_TOP_VAR = "--sticky-group-item-top";
+const FRONTIER_LEFT_VAR = "--sticky-group-left";
+const FRONTIER_TOP_VAR = "--sticky-group-top";
+// const FRONTIER_LEFT_VIEWPORT_VAR = "--sticky-group-left-viewport";
+// const FRONTIER_TOP_VIEWPORT_VAR = "--sticky-group-top-viewport";
+
+/**
+ * Creates a sticky group that manages positioning for multiple sticky elements
+ * that need to be aware of each other's dimensions.
+ * Always uses CSS variables for positioning.
+ *
+ * @param {HTMLElement} container The container element
+ * @returns {Function} Cleanup function
+ */
+const initStickyGroup = (
+  container,
+  { elementSelector, elementReceivingCumulativeStickyPosition } = {},
+) => {
+  if (!container) {
+    throw new Error("initStickyGroup: container is required");
+  }
+
+  const [teardown, addTeardown] = createPubSub();
+  const [cleanup, addCleanup, clearCleanup] = createPubSub();
+  addTeardown(cleanup);
+
+  const element = elementSelector
+    ? container.querySelector(elementSelector)
+    : container;
+  const isGrid =
+    element.tagName === "TABLE" || element.classList.contains("navi_table");
+  const updatePositions = () => {
+    // Clear all previous CSS variable cleanups before setting new ones
+    cleanup();
+    clearCleanup();
+
+    if (isGrid) {
+      updateGridPositions();
+    } else {
+      updateLinearPositions();
+    }
+  };
+
+  const updateGridPositions = () => {
+    // Handle table grid - update both horizontal and vertical sticky elements
+    updateTableColumns();
+    updateTableRows();
+  };
+  const updateTableColumns = () => {
+    // Find all sticky columns by checking all rows to identify which columns have sticky cells
+    const allStickyColumnCells = element.querySelectorAll(
+      ".navi_table_cell[data-sticky-left]",
+    );
+    if (allStickyColumnCells.length === 0) {
+      return;
+    }
+
+    // Get the first row to determine column indices (use any row that exists)
+    const firstRow = element.querySelector(".navi_tr");
+    if (!firstRow) {
+      return;
+    }
+
+    // Group sticky cells by column index
+    const stickyColumnsByIndex = new Map();
+    allStickyColumnCells.forEach((cell) => {
+      const row = cell.closest(".navi_tr");
+      const columnIndex = Array.from(row.children).indexOf(cell);
+      if (!stickyColumnsByIndex.has(columnIndex)) {
+        stickyColumnsByIndex.set(columnIndex, []);
+      }
+      stickyColumnsByIndex.get(columnIndex).push(cell);
+    });
+
+    // Sort columns by index and process them
+    const sortedColumnIndices = Array.from(stickyColumnsByIndex.keys()).sort(
+      (a, b) => a - b,
+    );
+    let cumulativeWidth = 0;
+
+    sortedColumnIndices.forEach((columnIndex, stickyIndex) => {
+      const cellsInColumn = stickyColumnsByIndex.get(columnIndex);
+      const leftPosition = stickyIndex === 0 ? 0 : cumulativeWidth;
+
+      // Set CSS variable on all sticky cells in this column using setStyles for proper cleanup
+      cellsInColumn.forEach((cell) => {
+        const restoreStyles = setStyles(cell, {
+          [ITEM_LEFT_VAR]: `${leftPosition}px`,
+        });
+        addCleanup(restoreStyles);
+      });
+
+      // Also set CSS variable on corresponding <col> element if it exists
+      const colgroup = element.querySelector(".navi_colgroup");
+      if (colgroup) {
+        const colElements = Array.from(colgroup.querySelectorAll(".navi_col"));
+        const correspondingCol = colElements[columnIndex];
+        if (correspondingCol) {
+          const restoreStyles = setStyles(correspondingCol, {
+            [ITEM_LEFT_VAR]: `${leftPosition}px`,
+          });
+          addCleanup(restoreStyles);
+        }
+      }
+
+      // Update cumulative width for next column using the first cell in this column as reference
+      const referenceCell = cellsInColumn[0];
+      const columnWidth = referenceCell.getBoundingClientRect().width;
+      if (stickyIndex === 0) {
+        cumulativeWidth = columnWidth;
+      } else {
+        cumulativeWidth += columnWidth;
+      }
+    });
+
+    // Set frontier variables with proper cleanup tracking
+    const restoreContainerStyles = setStyles(container, {
+      [FRONTIER_LEFT_VAR]: `${cumulativeWidth}px`,
+    });
+    addCleanup(restoreContainerStyles);
+
+    if (elementReceivingCumulativeStickyPosition) {
+      const restoreCumulativeStyles = setStyles(
+        elementReceivingCumulativeStickyPosition,
+        {
+          [FRONTIER_LEFT_VAR]: `${cumulativeWidth}px`,
+        },
+      );
+      addCleanup(restoreCumulativeStyles);
+    }
+  };
+  const updateTableRows = () => {
+    // Handle sticky rows by finding cells with data-sticky-top and grouping by row
+    const stickyCells = element.querySelectorAll(
+      ".navi_table_cell[data-sticky-top]",
+    );
+    if (stickyCells.length === 0) {
+      return;
+    }
+
+    // Group cells by their parent row
+    const rowsWithStickyCells = new Map();
+    stickyCells.forEach((cell) => {
+      const row = cell.parentElement;
+      if (!rowsWithStickyCells.has(row)) {
+        rowsWithStickyCells.set(row, []);
+      }
+      rowsWithStickyCells.get(row).push(cell);
+    });
+
+    // Convert to array and sort by row position in DOM
+    const allRows = Array.from(element.querySelectorAll(".navi_tr"));
+    const stickyRows = Array.from(rowsWithStickyCells.keys()).sort((a, b) => {
+      const aIndex = allRows.indexOf(a);
+      const bIndex = allRows.indexOf(b);
+      return aIndex - bIndex;
+    });
+
+    let cumulativeHeight = 0;
+    stickyRows.forEach((row, index) => {
+      const rowCells = rowsWithStickyCells.get(row);
+      const topPosition = index === 0 ? 0 : cumulativeHeight;
+
+      // Set CSS variable on all sticky cells in this row using setStyles for proper cleanup
+      rowCells.forEach((cell) => {
+        const restoreStyles = setStyles(cell, {
+          [ITEM_TOP_VAR]: `${topPosition}px`,
+        });
+        addCleanup(restoreStyles);
+      });
+
+      // Also set CSS variable on the <tr> element itself
+      const restoreRowStyles = setStyles(row, {
+        [ITEM_TOP_VAR]: `${topPosition}px`,
+      });
+      addCleanup(restoreRowStyles);
+
+      // Update cumulative height for next row
+      const rowHeight = row.getBoundingClientRect().height;
+      if (index === 0) {
+        cumulativeHeight = rowHeight;
+      } else {
+        cumulativeHeight += rowHeight;
+      }
+    });
+
+    // Set frontier variables with proper cleanup tracking
+    const restoreContainerStyles = setStyles(container, {
+      [FRONTIER_TOP_VAR]: `${cumulativeHeight}px`,
+    });
+    addCleanup(restoreContainerStyles);
+
+    if (elementReceivingCumulativeStickyPosition) {
+      const restoreCumulativeStyles = setStyles(
+        elementReceivingCumulativeStickyPosition,
+        {
+          [FRONTIER_TOP_VAR]: `${cumulativeHeight}px`,
+        },
+      );
+      addCleanup(restoreCumulativeStyles);
+    }
+  };
+
+  const updateLinearPositions = () => {
+    // Handle linear container - detect direction from first sticky element
+    const stickyElements = element.querySelectorAll(
+      "[data-sticky-left], [data-sticky-top]",
+    );
+    if (stickyElements.length <= 1) return;
+
+    const firstElement = stickyElements[0];
+    const isHorizontal = firstElement.hasAttribute("data-sticky-left");
+    const dimensionProperty = isHorizontal ? "width" : "height";
+    const cssVariableName = isHorizontal ? ITEM_LEFT_VAR : ITEM_TOP_VAR;
+
+    let cumulativeSize = 0;
+    stickyElements.forEach((element, index) => {
+      if (index === 0) {
+        // First element stays at position 0
+        const restoreStyles = setStyles(element, {
+          [cssVariableName]: "0px",
+        });
+        addCleanup(restoreStyles);
+        cumulativeSize = element.getBoundingClientRect()[dimensionProperty];
+      } else {
+        // Subsequent elements use cumulative positioning
+        const position = cumulativeSize;
+        const restoreStyles = setStyles(element, {
+          [cssVariableName]: `${position}px`,
+        });
+        addCleanup(restoreStyles);
+        cumulativeSize += element.getBoundingClientRect()[dimensionProperty];
+      }
+    });
+
+    // Set frontier variables with proper cleanup tracking
+    const frontierVar = isHorizontal ? FRONTIER_LEFT_VAR : FRONTIER_TOP_VAR;
+    const restoreContainerStyles = setStyles(container, {
+      [frontierVar]: `${cumulativeSize}px`,
+    });
+    addCleanup(restoreContainerStyles);
+
+    if (elementReceivingCumulativeStickyPosition) {
+      const restoreCumulativeStyles = setStyles(
+        elementReceivingCumulativeStickyPosition,
+        {
+          [frontierVar]: `${cumulativeSize}px`,
+        },
+      );
+      addCleanup(restoreCumulativeStyles);
+    }
+  };
+
+  // Initial positioning
+  updatePositions();
+
+  // Set up ResizeObserver to handle size changes
+  const resizeObserver = new ResizeObserver(() => {
+    updatePositions();
+  });
+
+  // Set up MutationObserver to handle DOM changes
+  const mutationObserver = new MutationObserver((mutations) => {
+    let shouldUpdate = false;
+
+    mutations.forEach((mutation) => {
+      // Check if sticky elements were added/removed or attributes changed
+      if (mutation.type === "childList") {
+        shouldUpdate = true;
+      }
+      if (mutation.type === "attributes") {
+        // Check if the mutation affects sticky attributes
+        if (
+          mutation.attributeName === "data-sticky-left" ||
+          mutation.attributeName === "data-sticky-top"
+        ) {
+          shouldUpdate = true;
+        }
+      }
+    });
+
+    if (shouldUpdate) {
+      updatePositions();
+    }
+  });
+
+  // Start observing
+  resizeObserver.observe(element);
+  addTeardown(() => {
+    resizeObserver.disconnect();
+  });
+
+  mutationObserver.observe(element, {
+    attributes: true,
+    childList: true,
+    subtree: true,
+    attributeFilter: ["data-sticky-left", "data-sticky-top"],
+  });
+  addTeardown(() => {
+    mutationObserver.disconnect();
+  });
+
+  // Return cleanup function
+  return () => {
+    teardown();
+  };
+};
+
+// const visualPositionEffect = (element, callback) => {
+//   const updatePosition = () => {
+//     const { left, top } = getVisualRect(element, document.body, {
+//       isStickyLeft: false,
+//       isStickyTop: false,
+//     });
+//     callback({ left, top });
+//   };
+//   updatePosition();
+
+//   window.addEventListener("scroll", updatePosition, { passive: true });
+//   window.addEventListener("resize", updatePosition);
+//   window.addEventListener("touchmove", updatePosition);
+
+//   return () => {
+//     window.removeEventListener("scroll", updatePosition, {
+//       passive: true,
+//     });
+//     window.removeEventListener("resize", updatePosition);
+//     window.removeEventListener("touchmove", updatePosition);
+//   };
+// };

package/src/components/table/sticky/table_sticky.js

@@ -0,0 +1,25 @@
+import { createContext } from "preact";
+import { useMemo } from "preact/hooks";
+
+import { useStableCallback } from "../../use_stable_callback.js";
+
+export const TableStickyContext = createContext();
+
+export const useTableStickyContextValue = ({
+  stickyLeftFrontierColumnIndex,
+  stickyTopFrontierRowIndex,
+  onStickyLeftFrontierChange,
+  onStickyTopFrontierChange,
+}) => {
+  onStickyLeftFrontierChange = useStableCallback(onStickyLeftFrontierChange);
+  onStickyTopFrontierChange = useStableCallback(onStickyTopFrontierChange);
+
+  return useMemo(() => {
+    return {
+      stickyLeftFrontierColumnIndex,
+      stickyTopFrontierRowIndex,
+      onStickyLeftFrontierChange,
+      onStickyTopFrontierChange,
+    };
+  }, [stickyLeftFrontierColumnIndex, stickyTopFrontierRowIndex]);
+};