From 3bc258149c5c57ad29db784c573d5a0a567b8992 Mon Sep 17 00:00:00 2001
From: Tsanie Lily <tsorgy@gmail.com>
Date: Tue, 4 Apr 2023 16:09:30 +0800
Subject: [PATCH] double click spliter to resize column width

---
 lib/ui/grid.html |  7 +++----
 lib/ui/grid.js   | 36 ++++++++++++++++++++++++++++++++----
 2 files changed, 35 insertions(+), 8 deletions(-)

diff --git a/lib/ui/grid.html b/lib/ui/grid.html
index d82a4d2..ad9a212 100644
--- a/lib/ui/grid.html
+++ b/lib/ui/grid.html
@@ -37,7 +37,7 @@
       grid.allowHtml = true;
       grid.height = 0;
       grid.columns = [
-        { key: 'c1', caption: 'column 1' },
+        { key: 'c1', caption: 'column 122222222311111111111111111' },
         { key: 'c2', caption: '选择', allcheck: true, type: Grid.ColumnTypes.Checkbox, enabled: 'enabled' },
         {
           key: 'c2a',
@@ -60,9 +60,8 @@
         { key: 'c3', caption: 'column 3', width: 90 },
         { key: 'c4', caption: 'Note', type: Grid.ColumnTypes.Input }
       ];
-      grid.cellClicked = (rId, cId) => {
-        console.log(`row (${rId}), column (${cId}) clicked.`);
-      };
+      grid.columnChanged = (type, index, value) => console.log(`column (${index}), ${type}, ${value}`);
+      grid.cellClicked = (rId, cId) => console.log(`row (${rId}), column (${cId}) clicked.`);
       grid.rowDblClicked = (rId) => console.log(`row (${rId}) double clicked.`);
       grid.cellDblClicked = (rId, cId) => console.log(`row (${rId}), column (${cId}) double clicked.`);
       grid.init();
diff --git a/lib/ui/grid.js b/lib/ui/grid.js
index c7adced..0563e35 100644
--- a/lib/ui/grid.js
+++ b/lib/ui/grid.js
@@ -604,6 +604,7 @@ class Grid {
                 const spliter = document.createElement('layer');
                 spliter.className = 'spliter';
                 spliter.addEventListener('mousedown', e => this.#onResizeStart(e, col));
+                spliter.addEventListener('dblclick', e => this.#onAutoResize(e, col));
                 th.appendChild(spliter);
             }
             // tooltip
@@ -1129,6 +1130,7 @@ class Grid {
                 return;
             }
             attr.resizing = val;
+            attr.sizing = true;
             this.#changeColumnWidth(index, val);
         };
         attr.mousemove = e => throttle(resizemove, RefreshInterval, this, e);
@@ -1136,11 +1138,14 @@ class Grid {
             clearEvents(attr);
             const width = attr.resizing;
             if (width != null) {
-                col.autoResize = false;
                 setTimeout(() => delete attr.resizing);
-                this.#changeColumnWidth(index, width);
-                if (typeof this.columnChanged === 'function') {
-                    this.columnChanged(ColumnChangedType.Resize, index, width);
+                if (attr.sizing) {
+                    delete attr.sizing;
+                    col.autoResize = false;
+                    this.#changeColumnWidth(index, width);
+                    if (typeof this.columnChanged === 'function') {
+                        this.columnChanged(ColumnChangedType.Resize, index, width);
+                    }
                 }
             }
             e.stopPropagation();
@@ -1149,6 +1154,29 @@ class Grid {
         ['mousemove', 'mouseup'].forEach(event => window.addEventListener(event, attr[event]));
     }
 
+    #onAutoResize(e, col) {
+        const th = e.currentTarget.parentElement;
+        const index = indexOfParent(th);
+        let width = th.querySelector('div:first-child').scrollWidth;
+        for (let row of this.#refs.bodyContent.children) {
+            const element = row.children[index].children[0];
+            const w = element.scrollWidth;
+            if (w > width) {
+                width = w;
+            }
+        }
+        if (width < MiniColumnWidth) {
+            width = MiniColumnWidth;
+        }
+        if (width > 0 && width !== col.width) {
+            width += 12;
+            this.#changeColumnWidth(index, width);
+            if (typeof this.columnChanged === 'function') {
+                this.columnChanged(ColumnChangedType.Resize, index, width);
+            }
+        }
+    }
+
     #onColumnAllChecked(col, flag) {
         if (this.#currentSource == null) {
             return;