More simplification of columns

packages/frontend-core/src/components/grid/controls/BulkDuplicationHandler.svelte

@@ -9,7 +9,7 @@
     rows,
     subscribe,
     selectedRowCount,
-    allVisibleColumns,
+    visibleColumns,
     selectedCells,
     rowLookupMap,
   } = getContext("grid")
@@ -40,8 +40,8 @@
     if (newRows.length) {
       const firstRow = newRows[0]
       const lastRow = newRows[newRows.length - 1]
-      const firstCol = $allVisibleColumns[0]
+      const firstCol = $visibleColumns[0]
-      const lastCol = $allVisibleColumns[$allVisibleColumns.length - 1]
+      const lastCol = $visibleColumns[$visibleColumns.length - 1]
       const startCellId = getCellID(firstRow._id, firstCol.name)
       const endCellId = getCellID(lastRow._id, lastCol.name)
       selectedCells.actions.selectRange(startCellId, endCellId)

packages/frontend-core/src/components/grid/overlays/KeyboardManager.svelte

@@ -19,7 +19,6 @@
     selectedCells,
     cellSelection,
     columnLookupMap,
-    allVisibleColumns,
   } = getContext("grid")
 
   const ignoredOriginSelectors = [
@@ -188,7 +187,7 @@
     // Determine the new position for this cell
     const { rowId, field } = parseCellID(sourceCellId)
     const colIdx = $columnLookupMap[field]
-    const nextColumn = $allVisibleColumns[colIdx + delta]
+    const nextColumn = $visibleColumns[colIdx + delta]
     if (!nextColumn) {
       return
     }

packages/frontend-core/src/components/grid/overlays/MenuOverlay.svelte

@@ -18,7 +18,7 @@
     copyAllowed,
     pasteAllowed,
     selectedCellCount,
-    allVisibleColumns,
+    visibleColumns,
     selectedCells,
   } = getContext("grid")
 
@@ -41,8 +41,8 @@
     menu.actions.close()
     const newRow = await rows.actions.duplicateRow($focusedRow)
     if (newRow) {
-      const firstCol = $allVisibleColumns[0]
+      const firstCol = $visibleColumns[0]
-      const lastCol = $allVisibleColumns[$allVisibleColumns.length - 1]
+      const lastCol = $visibleColumns[$visibleColumns.length - 1]
       const startCellId = getCellID(newRow._id, firstCol.name)
       const endCellId = getCellID(newRow._id, lastCol.name)
       selectedCells.actions.selectRange(startCellId, endCellId)

packages/frontend-core/src/components/grid/stores/clipboard.js

@@ -64,7 +64,7 @@ export const createActions = context => {
     rows,
     focusedCellId,
     columnLookupMap,
-    allVisibleColumns,
+    visibleColumns,
   } = context
 
   // Copies the currently selected value (or values)
@@ -162,8 +162,8 @@ export const createActions = context => {
 
         // Get limits of how many rows and columns we're able to paste into
         const $rows = get(rows)
-        const $allVisibleColumns = get(allVisibleColumns)
+        const $visibleColumns = get(visibleColumns)
-        const colCount = $allVisibleColumns.length
+        const colCount = $visibleColumns.length
         const rowCount = $rows.length
         const selectedRows = value.length
         const selectedColumns = value[0].length
@@ -172,7 +172,7 @@ export const createActions = context => {
 
         // Get the target cell ID (bottom right of our pastable extent)
         const targetRowId = $rows[rowIdx + rowExtent]._id
-        const targetColName = $allVisibleColumns[colIdx + colExtent].name
+        const targetColName = $visibleColumns[colIdx + colExtent].name
         const targetCellId = getCellID(targetRowId, targetColName)
 
         // Paste into target cell range

packages/frontend-core/src/components/grid/stores/columns.js

@@ -6,16 +6,15 @@ export const createStores = () => {
 
   const enrichedColumns = derived(columns, $columns => {
     let offset = GutterWidth
-    let visibleIdx = 0
+    let idx = 0
-    return $columns.map((col, idx) => {
+    return $columns.map(col => {
       const enriched = {
         ...col,
-        __idx: idx, // Overall column index
+        __idx: idx,
-        __visibleIdx: visibleIdx, // Index within the visible columns
+        __left: offset,
-        __left: offset, // Left offset relative to all visible columns
       }
       if (col.visible) {
-        visibleIdx++
+        idx++
         offset += col.width
       }
       return enriched

packages/frontend-core/src/components/grid/stores/reorder.js

@@ -196,12 +196,15 @@ export const createActions = context => {
     targetColumn,
     insertAfter = false,
   }) => {
-    const $columnLookupMap = get(columnLookupMap)
+    // Find the indices in the overall columns array
-    let sourceIdx = $columnLookupMap[sourceColumn].__idx
+    const $columns = get(columns)
-    let targetIdx = $columnLookupMap[targetColumn].__idx
+    let sourceIdx = $columns.findIndex(col => col.name === sourceColumn)
+    let targetIdx = $columns.findIndex(col => col.name === targetColumn)
     if (insertAfter) {
       targetIdx++
     }
+
+    // Reorder columns
     columns.update(state => {
       const removed = state.splice(sourceIdx, 1)
       if (--targetIdx < sourceIdx) {

packages/frontend-core/src/components/grid/stores/ui.js

@@ -54,7 +54,7 @@ export const deriveStores = context => {
     selectedRows,
     cellSelection,
     columnLookupMap,
-    allVisibleColumns,
+    visibleColumns,
   } = context
 
   // Derive the current focused row ID
@@ -107,7 +107,7 @@ export const deriveStores = context => {
         return []
       }
       const $rows = get(rows)
-      const $allVisibleColumns = get(allVisibleColumns)
+      const $visibleColumns = get(visibleColumns)
 
       // Get source and target row and column indices
       const sourceInfo = parseCellID(sourceCellId)
@@ -120,8 +120,8 @@ export const deriveStores = context => {
       const upperRowIndex = Math.max(sourceRowIndex, targetRowIndex)
 
       // Column indices
-      const sourceColIndex = $columnLookupMap[sourceInfo.field]
+      const sourceColIndex = $columnLookupMap[sourceInfo.field].__idx
-      const targetColIndex = $columnLookupMap[targetInfo.field]
+      const targetColIndex = $columnLookupMap[targetInfo.field].__idx
       const lowerColIndex = Math.min(sourceColIndex, targetColIndex)
       const upperColIndex = Math.max(sourceColIndex, targetColIndex)
 
@@ -132,7 +132,7 @@ export const deriveStores = context => {
         let rowCells = []
         for (let colIdx = lowerColIndex; colIdx <= upperColIndex; colIdx++) {
           rowId = $rows[rowIdx]._id
-          colName = $allVisibleColumns[colIdx].name
+          colName = $visibleColumns[colIdx].name
           rowCells.push(getCellID(rowId, colName))
         }
         cells.push(rowCells)