.

lib/ui/grid.js

@@ -1,4 +1,5 @@
-import { isMobile, global, nullOrEmpty, throttle, truncate, isPositive } from "../utility";
+import { global, isPositive, isMobile, throttle, truncate } from "../utility";
+import { nullOrEmpty } from "../utility/strings";
 import { r } from "../utility/lgres";
 import { createIcon } from "../ui/icon";
 import { createCheckbox } from "../ui/checkbox";
@@ -195,6 +196,8 @@ class Grid {
         isCheckbox(type) { return type === 3 }
     };
 
+    static GridColumn = GridColumn;
+
     constructor(container) {
         this.#parent = container;
     }
@@ -496,7 +499,7 @@ class Grid {
                 hidden.style.display = 'none';
                 if (col.sortable === true) {
                     hidden.dataset.key = col.key;
-                    hidden.addEventListener('mouseup', e => this.#onHeaderClicked(col, e, true));
+                    hidden.addEventListener('click', e => this.#onHeaderClicked(col, e, true));
                 }
                 header.appendChild(hidden);
                 continue;
@@ -540,7 +543,7 @@ class Grid {
                 th.style.setProperty(css[0], css[1]);
             }
             th.style.cursor = col.sortable ? 'pointer' : 'auto';
-            th.addEventListener('mouseup', e => this.#onHeaderClicked(col, e));
+            th.addEventListener('click', e => this.#onHeaderClicked(col, e));
             th.addEventListener('mousedown', e => this.#onDragStart(col, e));
             const wrapper = document.createElement('div');
             th.appendChild(wrapper);
@@ -617,6 +620,16 @@ class Grid {
         // body content
         const bodyContent = document.createElement('table');
         bodyContent.className = 'grid-body-content';
+        bodyContent.addEventListener('mousedown', e => {
+            let { parent, target } = this.#getRowTarget(e.target);
+            const rowIndex = [...parent.parentElement.children].indexOf(parent);
+            let colIndex = [...parent.children].indexOf(target);
+            if (colIndex >= this.columns.length) {
+                colIndex = -1;
+            }
+            this.#onRowClicked(e, rowIndex, colIndex);
+        });
+        bodyContent.addEventListener('dblclick', e => this.#onRowDblClicked(e));
         bodyContainer.appendChild(bodyContent);
         // this.#adjustRows();
         // events
@@ -632,7 +645,7 @@ class Grid {
             });
             holder.addEventListener('dblclick', e => this.#onRowDblClicked(e));
             bodyContainer.appendChild(holder);
-            body.addEventListener('mousemove', e => throttle(this.#onBodyMouseMove, RefreshInterval, this, e, holder));
+            body.addEventListener('mousemove', e => throttle(this.#onBodyMouseMove, RefreshInterval, this, e, holder), { passive: true });
         }
         this.#refs.body = body;
         this.#refs.bodyContainer = bodyContainer;
@@ -655,8 +668,8 @@ class Grid {
             for (let i = 0; i < count; i += 1) {
                 const row = document.createElement('tr');
                 row.className = 'grid-row';
-                row.addEventListener('mousedown', e => this.#onRowClicked(e, exists + i));
-                row.addEventListener('dblclick', e => this.#onRowDblClicked(e));
+                // row.addEventListener('mousedown', e => this.#onRowClicked(e, exists + i));
+                // row.addEventListener('dblclick', e => this.#onRowDblClicked(e));
                 cols.forEach((col, j) => {
                     const cell = document.createElement('td');
                     if (col.visible !== false) {
@@ -859,19 +872,12 @@ class Grid {
         return top;
     }
 
-    #getColumnIndex(target) {
-        if (target == null) {
-            return -1;
-        }
+    #getRowTarget(target) {
         let parent;
         while ((parent = target.parentElement) != null && !parent.classList.contains('grid-row')) {
             target = parent;
         }
-        if (parent == null) {
-            return -1;
-        }
-        const index = [...parent.children].indexOf(target);
-        return index >= this.columns.length ? -1 : index;
+        return { parent, target };
     }
 
     #onHeaderClicked(col, e, force) {
@@ -937,14 +943,10 @@ class Grid {
     }
 
     #onBodyMouseMove(e, holder) {
-        let target = e.target;
-        if (target.classList.contains('grid-hover-holder')) {
+        if (e.target.classList.contains('grid-hover-holder')) {
             return;
         }
-        let parent;
-        while ((parent = target.parentElement) != null && !parent.classList.contains('grid-row')) {
-            target = parent;
-        }
+        let { parent, target } = this.#getRowTarget(e.target);
         let keyid = target.keyid;
         if (parent == null || keyid == null) {
             delete holder.keyid;
@@ -1050,7 +1052,6 @@ class Grid {
                 this.selectedRowChanged(selectedIndex);
             }
         }
-        colIndex ??= this.#getColumnIndex(e.target);
         this.#selectedColumnIndex = colIndex;
         if ((this.fullrowClick || colIndex >= 0) && e.buttons === 1 && typeof this.cellClicked === 'function') {
             if (this.cellClicked(selectedIndex, colIndex) === false) {
@@ -1069,7 +1070,7 @@ class Grid {
         }
         if (typeof this.cellDblClicked === 'function') {
             const colIndex = this.#selectedColumnIndex;
-            if ((this.fullrowClick || colIndex >= 0) && e.buttons === 1) {
+            if (this.fullrowClick || colIndex >= 0) {
                 this.cellDblClicked(index, colIndex);
             }
         }