@lavalogic/scoria 0.22.2 → 0.22.3

package/dist/Components/Table/Types/Context/TableContext.svelte.d.ts

@@ -225,6 +225,15 @@ export declare class TableContext<T extends object, RowIdType extends Primitive>
     private createRow;
     private columnDefReturnsTextValue;
     private _updateLocalStorageSettings;
+    /**
+     * Columns in visual display order: pinned-left → center → pinned-right,
+     * preserving memory order within each section. Only includes visible columns.
+     */
+    private get _visualColumns();
+    /** Returns the visual index of the column with the given id, or -1 if not found. */
+    columnVisualIndex(id: string): number;
+    get focusStartVisualColumn(): number;
+    get focusEndVisualColumn(): number;
     private _moveFocusEndRow;
     private _moveFocusRow;
     private getHighlightedRowData;

package/dist/Components/Table/Types/Context/TableContext.svelte.js

@@ -170,8 +170,8 @@ export class TableContext {
                 this._focusedColumnIds = new Set();
                 return;
             }
-            const { row: startRowIndexId, column: startColumnIndex } = this.focusStart;
-            const { row: endRowIndexId, column: endColumnIndex } = this.focusEnd;
+            const { row: startRowIndexId } = this.focusStart;
+            const { row: endRowIndexId } = this.focusEnd;
             const model = this.paginationRowModel;
             if (current === latest_pageColData) {
                 const startRowIndex = model.rows.findIndex((row) => row.visibleIndex === startRowIndexId);
@@ -185,20 +185,14 @@ export class TableContext {
                 }
                 const minRowIndex = Math.min(startRowIndex, endRowIndex);
                 const maxRowIndex = Math.max(startRowIndex, endRowIndex);
-                const minColumnIndex = Math.min(startColumnIndex, endColumnIndex);
-                const maxColumnIndex = Math.max(startColumnIndex, endColumnIndex);
+                const startVisualIndex = this.columnVisualIndex(this.focusStart.id);
+                const endVisualIndex = this.columnVisualIndex(this.focusEnd.id);
+                const minVisualIndex = Math.min(startVisualIndex, endVisualIndex);
+                const maxVisualIndex = Math.max(startVisualIndex, endVisualIndex);
                 // eslint-disable-next-line svelte/prefer-svelte-reactivity
                 const affectedColumns = new Set();
-                const visibility = this.columnVisibility;
-                this.columnDefs
-                    .filter((it) => 'index' in it &&
-                    visibility[it.id] !== false &&
-                    // TODO handle pinning behaviour
-                    // !columnPinning.left?.includes(it.id) &&
-                    // !columnPinning.right?.includes(it.id) &&
-                    // (!('columnType' in it) || it.columnType === undefined || it.columnType === 'Accessor') &&
-                    it.index >= minColumnIndex &&
-                    it.index <= maxColumnIndex)
+                this._visualColumns
+                    .slice(minVisualIndex, maxVisualIndex + 1)
                     .forEach((it) => affectedColumns.add(it.id));
                 // eslint-disable-next-line svelte/prefer-svelte-reactivity
                 const indices = new Set();
@@ -1780,36 +1774,21 @@ export class TableContext {
         if (!this.focusEnd) {
             return;
         }
-        const visibility = this.columnVisibility;
-        const columnDefs = this.columnDefs;
-        const currentIndex = this.focusEnd.column;
-        let index = 0;
-        while (index < currentIndex) {
-            const newId = columnDefs[index].id;
-            if (newId && visibility[newId] !== false) {
-                this.focusEnd = { ...this.focusEnd, column: index };
-                return;
-            }
-            ++index;
+        const visualCols = this._visualColumns;
+        if (visualCols.length > 0) {
+            const first = visualCols[0];
+            this.focusEnd = { ...this.focusEnd, id: first.id, column: first.index };
         }
     };
     moveToStart = () => {
         if (!this.focusStart) {
             return;
         }
-        const visibility = this.columnVisibility;
-        const columnDefs = this.columnDefs;
-        const current = this.focusStart.column;
-        let index = 0;
-        while (index < current) {
-            const newId = columnDefs[index].id;
-            if (newId && visibility[newId] !== false) {
-                this.moveFocus({ ...this.focusStart, id: newId, column: index });
-                return;
-            }
-            ++index;
+        const visualCols = this._visualColumns;
+        if (visualCols.length > 0) {
+            const first = visualCols[0];
+            this.moveFocus({ ...this.focusStart, id: first.id, column: first.index });
         }
-        //otherwise return without doing anything
     };
     focusToEnd = () => {
         if (!this.allowCopy) {
@@ -1818,38 +1797,21 @@ export class TableContext {
         if (!this.focusEnd) {
             return;
         }
-        const current = this.focusEnd;
-        const visibility = this.columnVisibility;
-        const columnDefs = this.columnDefs;
-        const currentIndex = current.column;
-        let index = columnDefs.length - 1;
-        while (index > currentIndex) {
-            const newId = columnDefs[index].id;
-            if (newId && visibility[newId] !== false) {
-                this.focusEnd = { ...this.focusEnd, column: index };
-                return;
-            }
-            --index;
+        const visualCols = this._visualColumns;
+        if (visualCols.length > 0) {
+            const last = visualCols[visualCols.length - 1];
+            this.focusEnd = { ...this.focusEnd, id: last.id, column: last.index };
         }
-        this.focusEnd = current;
     };
     moveToEnd = () => {
         if (!this.focusStart) {
             return;
         }
-        const visibility = this.columnVisibility;
-        const columnDefs = this.columnDefs;
-        const current = this.focusStart.column;
-        let index = columnDefs.length - 1;
-        while (index > current) {
-            const newId = columnDefs[index].id;
-            if (newId && visibility[newId] !== false) {
-                this.moveFocus({ ...this.focusStart, id: newId, column: index });
-                return;
-            }
-            --index;
+        const visualCols = this._visualColumns;
+        if (visualCols.length > 0) {
+            const last = visualCols[visualCols.length - 1];
+            this.moveFocus({ ...this.focusStart, id: last.id, column: last.index });
         }
-        //otherwise return without doing anything
     };
     moveFocusDown = () => {
         if (!this.allowCopy) {
@@ -1865,15 +1827,11 @@ export class TableContext {
             return;
         }
         if (this.focusEnd != null) {
-            const visibility = this.columnVisibility;
-            let index = this.focusEnd.column - 1;
-            while (index > -1) {
-                const newId = this.columnDefs[index].id;
-                if (newId && visibility[newId] !== false) {
-                    this.focusEnd = { ...this.focusEnd, column: index };
-                    return;
-                }
-                --index;
+            const visualCols = this._visualColumns;
+            const visualIndex = this.columnVisualIndex(this.focusEnd.id);
+            if (visualIndex > 0) {
+                const prev = visualCols[visualIndex - 1];
+                this.focusEnd = { ...this.focusEnd, id: prev.id, column: prev.index };
             }
         }
     };
@@ -1881,35 +1839,23 @@ export class TableContext {
         if (!this.focusStart) {
             return;
         }
-        const visibility = this.columnVisibility;
-        const columnDefs = this.columnDefs;
-        let index = this.focusStart.column - 1;
-        while (index > -1) {
-            const newId = columnDefs[index].id;
-            if (newId && visibility[newId] !== false) {
-                this.moveFocus({ ...this.focusStart, id: newId, column: index });
-                return;
-            }
-            --index;
+        const visualCols = this._visualColumns;
+        const visualIndex = this.columnVisualIndex(this.focusStart.id);
+        if (visualIndex > 0) {
+            const prev = visualCols[visualIndex - 1];
+            this.moveFocus({ ...this.focusStart, id: prev.id, column: prev.index });
         }
-        //otherwise return without doing anything
     };
     moveFocusRight = () => {
         if (!this.allowCopy) {
             return;
         }
         if (this.focusEnd != null) {
-            const visibility = this.columnVisibility;
-            const columnDefs = this.columnDefs;
-            const upperBounds = columnDefs.length;
-            let index = this.focusEnd.column + 1;
-            while (index < upperBounds) {
-                const newId = columnDefs[index].id;
-                if (newId && visibility[newId] !== false) {
-                    this.focusEnd = { ...this.focusEnd, column: index };
-                    return;
-                }
-                ++index;
+            const visualCols = this._visualColumns;
+            const visualIndex = this.columnVisualIndex(this.focusEnd.id);
+            if (visualIndex < visualCols.length - 1) {
+                const next = visualCols[visualIndex + 1];
+                this.focusEnd = { ...this.focusEnd, id: next.id, column: next.index };
             }
         }
     };
@@ -1917,19 +1863,12 @@ export class TableContext {
         if (!this.focusStart) {
             return;
         }
-        const visibility = this.columnVisibility;
-        const columnDefs = this.columnDefs;
-        const upperBounds = columnDefs.length;
-        let index = this.focusStart.column + 1;
-        while (index < upperBounds) {
-            const newId = columnDefs[index].id;
-            if (newId && visibility[newId] !== false) {
-                this.moveFocus({ ...this.focusStart, id: newId, column: index });
-                return;
-            }
-            ++index;
+        const visualCols = this._visualColumns;
+        const visualIndex = this.columnVisualIndex(this.focusStart.id);
+        if (visualIndex < visualCols.length - 1) {
+            const next = visualCols[visualIndex + 1];
+            this.moveFocus({ ...this.focusStart, id: next.id, column: next.index });
         }
-        //otherwise return without doing anything
     };
     endFocus = (coords) => {
         if (this.isMousingDown) {
@@ -2125,6 +2064,37 @@ export class TableContext {
         };
         localStorage.setItem(`${this.userId}-${this.tableName}-settings`, JSON.stringify(settingsObject));
     }
+    /**
+     * Columns in visual display order: pinned-left → center → pinned-right,
+     * preserving memory order within each section. Only includes visible columns.
+     */
+    get _visualColumns() {
+        const visibility = this.columnVisibility;
+        const pinLeft = this.columnPinning.left;
+        const pinRight = this.columnPinning.right;
+        const visible = this.columnDefs.filter((it) => visibility[it.id] !== false);
+        return [
+            ...visible.filter((it) => pinLeft?.has(it.id)),
+            ...visible.filter((it) => !pinLeft?.has(it.id) && !pinRight?.has(it.id)),
+            ...visible.filter((it) => pinRight?.has(it.id)),
+        ];
+    }
+    /** Returns the visual index of the column with the given id, or -1 if not found. */
+    columnVisualIndex(id) {
+        return this._visualColumns.findIndex((it) => it.id === id);
+    }
+    get focusStartVisualColumn() {
+        if (!this.focusStart) {
+            return -1;
+        }
+        return this.columnVisualIndex(this.focusStart.id);
+    }
+    get focusEndVisualColumn() {
+        if (!this.focusEnd) {
+            return -1;
+        }
+        return this.columnVisualIndex(this.focusEnd.id);
+    }
     _moveFocusEndRow(offset) {
         if (!this.allowCopy) {
             return;
@@ -2219,8 +2189,8 @@ export class TableContext {
     }
     async getFocusElementData() {
         if (this.focusStart && this.focusEnd) {
-            const { row: startRowIndexId, column: startColumnIndex } = this.focusStart;
-            const { row: endRowIndexId, column: endColumnIndex } = this.focusEnd;
+            const { row: startRowIndexId } = this.focusStart;
+            const { row: endRowIndexId } = this.focusEnd;
             // const model = this._currentPageData;
             const model = this.paginationRowModel;
             const startRowIndex = model.rows.findIndex((row) => row.visibleIndex === startRowIndexId);
@@ -2230,13 +2200,13 @@ export class TableContext {
             }
             const minRowIndex = Math.min(startRowIndex, endRowIndex);
             const maxRowIndex = Math.max(startRowIndex, endRowIndex);
-            const minColumnIndex = Math.min(startColumnIndex, endColumnIndex);
-            const maxColumnIndex = Math.max(startColumnIndex, endColumnIndex);
-            const affectedColumns = this.columnDefs.filter((it) => {
-                return (it.index >= minColumnIndex &&
-                    it.index <= maxColumnIndex &&
-                    this.columnDefReturnsTextValue(it));
-            });
+            const startVisualIndex = this.columnVisualIndex(this.focusStart.id);
+            const endVisualIndex = this.columnVisualIndex(this.focusEnd.id);
+            const minVisualIndex = Math.min(startVisualIndex, endVisualIndex);
+            const maxVisualIndex = Math.max(startVisualIndex, endVisualIndex);
+            const affectedColumns = this._visualColumns
+                .slice(minVisualIndex, maxVisualIndex + 1)
+                .filter((it) => this.columnDefReturnsTextValue(it));
             const selectedRows = [];
             // eslint-disable-next-line svelte/prefer-svelte-reactivity
             const indices = new Map();

package/dist/Components/Table/Types/Focus/TableFocusDetails.svelte.js

@@ -29,7 +29,7 @@ export class TableFocusDetails {
         this.leftToRight = $derived.by(() => {
             void this.hasMultipleFocus;
             return (this.hasMultipleFocus &&
-                (this.tableContext.focusStart?.column ?? 0) < (this.tableContext.focusEnd?.column ?? 0));
+                this.tableContext.focusStartVisualColumn < this.tableContext.focusEndVisualColumn);
         });
     }
     coordinates;
@@ -42,11 +42,12 @@ export class TableFocusDetails {
         void this.isMultiFocused;
         void this.leftToRight;
         if (this.isMultiFocused) {
+            const thisVisualIndex = this.tableContext.columnVisualIndex(this.cell.column.columnDef.id);
             if (this.leftToRight) {
-                return this.coordinates.column === this.tableContext.focusStart?.column;
+                return thisVisualIndex === this.tableContext.focusStartVisualColumn;
             }
             else {
-                return this.coordinates.column === this.tableContext.focusEnd?.column;
+                return thisVisualIndex === this.tableContext.focusEndVisualColumn;
             }
         }
         return false;
@@ -68,11 +69,12 @@ export class TableFocusDetails {
         void this.isMultiFocused;
         void this.leftToRight;
         if (this.isMultiFocused) {
+            const myVisual = this.tableContext.columnVisualIndex(this.cell.column.columnDef.id);
             if (this.leftToRight) {
-                return this.coordinates.column === this.tableContext.focusEnd?.column;
+                return myVisual === this.tableContext.focusEndVisualColumn;
             }
             else {
-                return this.coordinates.column === this.tableContext.focusStart?.column;
+                return myVisual === this.tableContext.focusStartVisualColumn;
             }
         }
         return false;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@lavalogic/scoria",
   "description": "Svelte components used for the FloWMS Web Frontend",
-  "version": "0.22.2",
+  "version": "0.22.3",
   "publishConfig": {
     "access": "restricted"
   },