From 4087ea36509c42fad329af5918995e9570c231c5 Mon Sep 17 00:00:00 2001 From: Andrew Stein Date: Wed, 14 Apr 2021 18:07:11 -0400 Subject: [PATCH] Fix column group resize --- features/literally.config.js | 4 ++++ scripts/sync_gist.js | 6 +++--- src/js/events.js | 23 ++++++++++++++--------- src/js/table.js | 4 ++-- src/js/tbody.js | 8 ++++---- src/js/view_model.js | 2 +- 6 files changed, 28 insertions(+), 19 deletions(-) diff --git a/features/literally.config.js b/features/literally.config.js index fa6b1c85..43b5fad4 100644 --- a/features/literally.config.js +++ b/features/literally.config.js @@ -7,6 +7,10 @@ module.exports = { format: "html", retarget: [ {rule: /\/node_modules\//gm, value: "https://cdn.jsdelivr.net/npm/"}, + { + rule: /\.\/.+?\"/gm, + value: `./index.js"`, + }, { rule: /\/dist\//gm, value: `https://cdn.jsdelivr.net/npm/regular-table@${pkg.version}/dist/`, diff --git a/scripts/sync_gist.js b/scripts/sync_gist.js index 8466e1b6..7cc5fa01 100644 --- a/scripts/sync_gist.js +++ b/scripts/sync_gist.js @@ -12,10 +12,10 @@ compile("examples", { }); compile("features", { - // row_mouse_selection: "f880c45f68ba062fd53e39fe13615d6d", - // row_stripes: "4157245997d92219d73ae43c25f29781", + row_mouse_selection: "f880c45f68ba062fd53e39fe13615d6d", + row_stripes: "4157245997d92219d73ae43c25f29781", area_mouse_selection: "4ac513f103a3bcef7b5442f52d9c6072", - // column_mouse_selection: "e89234de558575cdd92bfd111f224895", + column_mouse_selection: "e89234de558575cdd92bfd111f224895", }); function compile(name, hashes) { diff --git a/src/js/events.js b/src/js/events.js index aa7b4ec1..d1015878 100644 --- a/src/js/events.js +++ b/src/js/events.js @@ -145,9 +145,11 @@ export class RegularViewEventModel extends RegularVirtualTableViewModel { return; } } + const is_resize = event.target.classList.contains("rt-column-resize"); const metadata = METADATA_MAP.get(element); if (is_resize) { + event.stopImmediatePropagation(); await new Promise(setTimeout); delete this._column_sizes.override[metadata.size_key]; delete this._column_sizes.auto[metadata.size_key]; @@ -194,6 +196,7 @@ export class RegularViewEventModel extends RegularVirtualTableViewModel { const metadata = METADATA_MAP.get(element); if (is_resize) { this._on_resize_column(event, element, metadata); + event.stopImmediatePropagation(); } } @@ -208,15 +211,17 @@ export class RegularViewEventModel extends RegularVirtualTableViewModel { * @param {*} metadata */ _on_resize_column(event, element, metadata) { + const {_virtual_x, size_key} = metadata; const start = event.pageX; - element = this.table_model.header.get_column_header(metadata._virtual_x); - const width = this._column_sizes.indices[metadata.size_key]; - const move = (event) => this._on_resize_column_move(event, element, start, width, metadata); + const header_x = _virtual_x + element.colSpan - 1; + const header_element = this.table_model.header.get_column_header(header_x); + const width = this._column_sizes.indices[size_key]; + const move = (event) => this._on_resize_column_move(event, header_element, start, width, size_key, header_x); const up = async () => { document.removeEventListener("mousemove", move); document.removeEventListener("mouseup", up); - const override_width = this._column_sizes.override[metadata.size_key]; - this._column_sizes.indices[metadata.size_key] = override_width; + const override_width = this._column_sizes.override[size_key]; + this._column_sizes.indices[size_key] = override_width; await this.draw(); }; document.addEventListener("mousemove", move); @@ -236,11 +241,11 @@ export class RegularViewEventModel extends RegularVirtualTableViewModel { * @param {*} metadata */ @throttlePromise - async _on_resize_column_move(event, th, start, width, metadata) { + async _on_resize_column_move(event, th, start, width, size_key, virtual_x) { await new Promise(setTimeout); const diff = event.pageX - start; const override_width = Math.max(1, width + diff); - this._column_sizes.override[metadata.size_key] = override_width; + this._column_sizes.override[size_key] = override_width; // If the column is smaller, new columns may need to be fetched, so // redraw, else just update the DOM widths as if redrawn. @@ -249,9 +254,9 @@ export class RegularViewEventModel extends RegularVirtualTableViewModel { } else { th.style.minWidth = override_width + "px"; th.style.maxWidth = override_width + "px"; - const auto_width = this._column_sizes.auto[metadata.size_key]; + const auto_width = this._column_sizes.auto[size_key]; for (const row of this.table_model.body.cells) { - const td = row[metadata._virtual_x]; + const td = row[virtual_x]; if (td) { td.style.maxWidth = td.style.minWidth = override_width + "px"; td.classList.toggle("rt-cell-clip", auto_width > override_width); diff --git a/src/js/table.js b/src/js/table.js index ad09772a..7706fdd5 100644 --- a/src/js/table.js +++ b/src/js/table.js @@ -121,7 +121,7 @@ export class RegularTableViewModel { first_col, }; const size_key = _virtual_x + x0; - cont_body = this.body.draw(container_height, column_state, {...view_state, x0: 0}, true, undefined, undefined, size_key, _virtual_x); + cont_body = this.body.draw(container_height, column_state, {...view_state, x0: 0}, true, undefined, undefined, size_key); const cont_heads = []; for (let i = 0; i < view_cache.config.row_pivots.length; i++) { cont_heads.push(this.header.draw(column_name, Array(view_cache.config.column_pivots.length + 1).fill(""), 1, undefined, i, x0, i)); @@ -166,7 +166,7 @@ export class RegularTableViewModel { const x = dcidx + x0; const size_key = _virtual_x + x0; const cont_head = this.header.draw(undefined, column_name, undefined, x, size_key, x0, _virtual_x); - cont_body = this.body.draw(container_height, column_state, view_state, false, x, x0, size_key, _virtual_x); + cont_body = this.body.draw(container_height, column_state, view_state, false, x, x0, size_key); first_col = false; if (!preserve_width) { for (const {td, metadata} of cont_body.tds) { diff --git a/src/js/tbody.js b/src/js/tbody.js index 7e2e0a24..624cc7b5 100644 --- a/src/js/tbody.js +++ b/src/js/tbody.js @@ -50,7 +50,7 @@ export class RegularBodyViewModel extends ViewModel { return {td, metadata}; } - draw(container_height, column_state, view_state, th = false, x, x0, size_key, _virtual_x) { + draw(container_height, column_state, view_state, th = false, x, x0, size_key) { const {cidx, column_data, row_headers} = column_state; let {row_height} = view_state; let metadata; @@ -75,11 +75,11 @@ export class RegularBodyViewModel extends ViewModel { if (prev_col && (prev_col_metadata.value === row_header || row_header === undefined) && !prev_col.hasAttribute("rowspan")) { cidx_offset[ridx] = cidx_offset[ridx] ? cidx_offset[ridx] + 1 : 2; prev_col.setAttribute("colspan", cidx_offset[ridx]); - this._replace_cell(undefined, ridx, cidx + i); + this._replace_cell(ridx, cidx + i); } else if (prev_row && prev_row_metadata.value === row_header && !prev_row.hasAttribute("colspan")) { ridx_offset[i] = ridx_offset[i] ? ridx_offset[i] + 1 : 2; prev_row.setAttribute("rowspan", ridx_offset[i]); - this._replace_cell(undefined, ridx, cidx + i); + this._replace_cell(ridx, cidx + i); } else { obj = this._draw_td("TH", ridx, row_header, cidx + i, column_state, view_state, i); obj.td.style.display = ""; @@ -106,7 +106,7 @@ export class RegularBodyViewModel extends ViewModel { obj.metadata.y1 = view_state.y1; obj.metadata.dx = x - x0; obj.metadata.dy = obj.metadata.y - obj.metadata.y0; - obj.metadata._virtual_x = _virtual_x; + obj.metadata._virtual_x = cidx; tds[0] = obj; } diff --git a/src/js/view_model.js b/src/js/view_model.js index a5ca7657..2f5851ef 100644 --- a/src/js/view_model.js +++ b/src/js/view_model.js @@ -49,7 +49,7 @@ export class ViewModel { } } - _replace_cell(new_td, ridx, cidx) { + _replace_cell(ridx, cidx) { const {tr, row_container} = this._get_row(ridx); let td = row_container[cidx]; if (td) {