feat: implement double-click auto-fit for dgrid columns

Signed-off-by: Gordon Smith <GordonJSmith@gmail.com>

Author: GordonSmith

packages/dgrid-shim/src/gridHelper.ts

@@ -13,6 +13,35 @@ export const GridHelper = declare(null, {
     postCreate: function postCreate(inherited) {
         this.inherited(postCreate, arguments);
 
+        //  Emit dgrid-column-autofit on double-mousedown over a resize handle.
+        //  A native dblclick is never fired because dgrid calls e.preventDefault()
+        //  on every mousedown on .dgrid-resize-handle.
+        //  We use a capture-phase listener on headerNode so we fire BEFORE dgrid's
+        //  bubble-phase delegated handler, allowing us to stopPropagation on the
+        //  second click to prevent dgrid from starting a resize drag.
+        const self = this;
+        let _lastResizeDownTime = 0;
+        let _lastResizeColId: string | null = null;
+        this.headerNode.addEventListener("mousedown", function (evt: MouseEvent) {
+            const target = evt.target as any;
+            if (!target.classList.contains("dgrid-resize-handle")) return;
+            const colId: string = target.columnId;
+            const now = Date.now();
+            const delta = now - _lastResizeDownTime;
+            if (colId === _lastResizeColId && delta <= 300) {
+                _lastResizeDownTime = 0;
+                _lastResizeColId = null;
+                evt.stopPropagation();
+                evt.preventDefault();
+                const detail = self.columns[colId];
+                if (!detail) return;
+                self.domNode.dispatchEvent(new CustomEvent("dgrid-column-autofit", { detail, bubbles: true, cancelable: true }));
+            } else {
+                _lastResizeDownTime = now;
+                _lastResizeColId = colId;
+            }
+        }, { capture: true });
+
         this.__hpcc_tooltip_header = new Tooltip({
             connectId: [this.id],
             selector: ".dgrid-resize-header-container",
@@ -53,6 +82,26 @@ export const GridHelper = declare(null, {
             node.checked = false;
             node.indeterminate = false;
         });
+    },
+
+    applyWidth: function (id: string, cssWidth: string) {
+        const existingRule = this._columnSizes?.[id];
+        if (existingRule?.set) {
+            existingRule.set("width", cssWidth);
+        } else {
+            this.styleColumn(id, `width: ${cssWidth}`);
+        }
+    },
+
+    resizeColumn: function resizeColumn(colId: string, widthPx: number) {
+        this.applyWidth(colId, `${widthPx}px`);
+
+        //  Reset the last visible column to auto so it fills remaining space.
+        const lastColId: string | undefined = this._getResizedColumnWidths?.()?.lastColId;
+        if (lastColId && lastColId !== colId) {
+            this.applyWidth(lastColId, "auto");
+        }
+        this.resize();
     }/*,
 
     _onNotify(object, existingId) {

packages/dgrid/src/Common.ts

@@ -1,15 +1,16 @@
-import { HTMLWidget } from "@hpcc-js/common";
+import { HTMLWidget, Selection } from "@hpcc-js/common";
 import { Grid, PagingGrid } from "./dgrid-shim.ts";
 import { DBStore } from "./DBStore.ts";
+import { type ColumnType } from "./RowFormatter.ts";
 
 import "../src/Common.css";
 
 export class Common extends HTMLWidget {
-    protected _columns = [];
+    protected _columns: ColumnType[] = [];
     protected _store = new DBStore(this._db);
-    protected _dgridDiv;
-    protected _dgrid;
-    protected _prevPaging;
+    protected _dgridDiv: Selection<HTMLDivElement, unknown, HTMLElement, unknown>;
+    protected _dgrid: typeof PagingGrid | typeof Grid;
+    protected _prevPaging: boolean;
     private _prevSortBy: string;
     private _prevSortByDescending: boolean;
     private _prevMultiSelect: boolean;
@@ -107,6 +108,14 @@ export class Common extends HTMLWidget {
                     this.click(this.rowToObj(evt.rows[0].data.__origRow), "", false, { selection: this.selection() });
                 }
             });
+            this._dgrid.on("dgrid-column-autofit", (evt) => {
+                if (this._supressEvents) return;
+                if (evt.detail?.label) {
+                    const column = this._columns.find(c => c.label === evt.detail.label);
+                    if (!column) return;
+                    this.dblclickColResize(column.label, column);
+                }
+            });
             this._dgrid.refresh({});
         }
         this._dgrid.noDataMessage = `<span class='dojoxGridNoData'>${this.noDataMessage()}</span>`;
@@ -130,6 +139,9 @@ export class Common extends HTMLWidget {
 
     click(row, col, sel, more) {
     }
+
+    dblclickColResize(column, dgridColumn) {
+    }
 }
 Common.prototype._class += " dgrid_Common";
 

packages/dgrid/src/DBStore.ts

@@ -28,6 +28,7 @@ export class DBStore {
                 idx,
                 className: "resultGridCell",
                 sortable,
+                hidden: false,
                 isSet: false
             };
             switch (field.type()) {

packages/dgrid/src/DatasourceStore.ts

@@ -79,6 +79,7 @@ export class DatasourceStore {
                 idx,
                 className: "resultGridCell",
                 sortable: true,
+                hidden: false,
                 isSet: false
             };
             if (field.type === "dataset") {

packages/dgrid/src/RowFormatter.ts

@@ -30,6 +30,7 @@ export interface ColumnType {
     idx: number;
     className: string;
     sortable: boolean;
+    hidden: boolean;
     isSet: boolean;
     width?: number;
     formatter?: CellFormatter;

packages/dgrid/src/Table.ts

@@ -235,6 +235,11 @@ export class Table extends Common {
     //  Events  ---
     click(row, col, sel) {
     }
+
+    dblclickColResize(column: string, dgridColumn: any): void {
+        this.guessWidth([dgridColumn], this.data());
+        this._dgrid.resizeColumn(dgridColumn.id, dgridColumn.width);
+    }
 }
 Table.prototype._class += " dgrid_Table";
 

packages/dgrid/src/dgrid-shim.ts

@@ -1,7 +1,7 @@
 import type * as dgrid_shim from "@hpcc-js/dgrid-shim";
 
 //  Note:  Resolved at build time and inlined into the dgrid bundle.
-// @ts-ignore
+// @ts-expect-error
 import dgridShimBundle from "@hpcc-js/dgrid-shim/dist/index.js?raw";
 const loadDgridShim = new Function("globalThis", "var self = globalThis; var window = globalThis;" + dgridShimBundle);