handsontable 0.0.0-next-802f59c-20241024 → 0.0.0-next-adeb5a2-20241025
Sign up to get free protection for your applications and to get access to all the features.
Potentially problematic release.
This version of handsontable might be problematic. Click here for more details.
- package/3rdparty/walkontable/src/overlay/inlineStart.js +1 -1
- package/3rdparty/walkontable/src/overlay/inlineStart.mjs +1 -1
- package/3rdparty/walkontable/src/overlays.js +6 -7
- package/3rdparty/walkontable/src/overlays.mjs +6 -7
- package/3rdparty/walkontable/src/renderer/colGroup.js +1 -1
- package/3rdparty/walkontable/src/renderer/colGroup.mjs +1 -1
- package/3rdparty/walkontable/src/renderer/table.js +1 -1
- package/3rdparty/walkontable/src/renderer/table.mjs +1 -1
- package/3rdparty/walkontable/src/settings.js +7 -0
- package/3rdparty/walkontable/src/settings.mjs +7 -0
- package/3rdparty/walkontable/src/table.js +24 -0
- package/3rdparty/walkontable/src/table.mjs +24 -0
- package/3rdparty/walkontable/src/utils/column.js +42 -0
- package/3rdparty/walkontable/src/utils/column.mjs +42 -0
- package/3rdparty/walkontable/src/utils/columnStretching.js +197 -0
- package/3rdparty/walkontable/src/utils/columnStretching.mjs +193 -0
- package/3rdparty/walkontable/src/viewport.js +87 -66
- package/3rdparty/walkontable/src/viewport.mjs +88 -67
- package/base.js +2 -2
- package/base.mjs +2 -2
- package/core/hooks/constants.js +0 -2
- package/core/hooks/constants.mjs +0 -2
- package/core/hooks/index.d.ts +2 -2
- package/core.d.ts +2 -2
- package/core.js +4 -6
- package/core.mjs +4 -6
- package/dist/handsontable.css +2 -2
- package/dist/handsontable.full.css +2 -2
- package/dist/handsontable.full.js +1821 -2217
- package/dist/handsontable.full.min.css +2 -2
- package/dist/handsontable.full.min.js +10 -10
- package/dist/handsontable.js +1823 -2219
- package/dist/handsontable.min.css +2 -2
- package/dist/handsontable.min.js +10 -10
- package/helpers/mixed.js +1 -1
- package/helpers/mixed.mjs +1 -1
- package/index.d.ts +0 -7
- package/package.json +1 -6
- package/plugins/comments/comments.js +1 -1
- package/plugins/comments/comments.mjs +1 -1
- package/plugins/index.d.ts +0 -3
- package/plugins/index.js +0 -3
- package/plugins/index.mjs +1 -3
- package/plugins/manualColumnMove/manualColumnMove.js +3 -1
- package/plugins/manualColumnMove/manualColumnMove.mjs +3 -1
- package/plugins/manualColumnResize/manualColumnResize.js +12 -24
- package/plugins/manualColumnResize/manualColumnResize.mjs +12 -24
- package/tableView.js +6 -39
- package/tableView.mjs +6 -39
- package/plugins/stretchColumns/calculator.js +0 -159
- package/plugins/stretchColumns/calculator.mjs +0 -155
- package/plugins/stretchColumns/index.d.ts +0 -1
- package/plugins/stretchColumns/index.js +0 -7
- package/plugins/stretchColumns/index.mjs +0 -1
- package/plugins/stretchColumns/strategies/_base.js +0 -85
- package/plugins/stretchColumns/strategies/_base.mjs +0 -81
- package/plugins/stretchColumns/strategies/all.js +0 -68
- package/plugins/stretchColumns/strategies/all.mjs +0 -64
- package/plugins/stretchColumns/strategies/last.js +0 -77
- package/plugins/stretchColumns/strategies/last.mjs +0 -73
- package/plugins/stretchColumns/stretchColumns.d.ts +0 -11
- package/plugins/stretchColumns/stretchColumns.js +0 -211
- package/plugins/stretchColumns/stretchColumns.mjs +0 -207
@@ -0,0 +1,193 @@
|
|
1
|
+
import "core-js/modules/es.error.cause.js";
|
2
|
+
function _classPrivateFieldInitSpec(e, t, a) { _checkPrivateRedeclaration(e, t), t.set(e, a); }
|
3
|
+
function _checkPrivateRedeclaration(e, t) { if (t.has(e)) throw new TypeError("Cannot initialize the same private elements twice on an object"); }
|
4
|
+
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
|
5
|
+
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
|
6
|
+
function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
|
7
|
+
function _classPrivateFieldGet(s, a) { return s.get(_assertClassBrand(s, a)); }
|
8
|
+
function _classPrivateFieldSet(s, a, r) { return s.set(_assertClassBrand(s, a), r), r; }
|
9
|
+
function _assertClassBrand(e, t, n) { if ("function" == typeof e ? e === t : e.has(t)) return arguments.length < 3 ? t : n; throw new TypeError("Private element is not present on this object"); }
|
10
|
+
import { DEFAULT_COLUMN_WIDTH } from "../calculator/index.mjs";
|
11
|
+
/**
|
12
|
+
* @typedef {object} ColumnStretchingOptions
|
13
|
+
* @property {number} totalColumns Total number of columns.
|
14
|
+
* @property {Function} columnWidthFn Function that returns the width of the column at a given index (in px).
|
15
|
+
* @property {'all' | 'last' | 'none'} stretchMode Stretch mode 'all', 'last' or 'none'.
|
16
|
+
* @property {Function} stretchingColumnWidthFn Function that returns the new width of the stretched column.
|
17
|
+
*/
|
18
|
+
/**
|
19
|
+
* @class ColumnStretching
|
20
|
+
*/
|
21
|
+
var _totalTargetWidth = /*#__PURE__*/new WeakMap();
|
22
|
+
var _totalColumns = /*#__PURE__*/new WeakMap();
|
23
|
+
var _stretchingColumnWidthFn = /*#__PURE__*/new WeakMap();
|
24
|
+
var _columnWidthFn = /*#__PURE__*/new WeakMap();
|
25
|
+
var _stretchMode = /*#__PURE__*/new WeakMap();
|
26
|
+
export class ColumnStretching {
|
27
|
+
/**
|
28
|
+
* @param {ColumnStretchingOptions} options Object with all options specified for column viewport calculation.
|
29
|
+
*/
|
30
|
+
constructor(_ref) {
|
31
|
+
let {
|
32
|
+
totalColumns,
|
33
|
+
stretchMode,
|
34
|
+
stretchingColumnWidthFn,
|
35
|
+
columnWidthFn
|
36
|
+
} = _ref;
|
37
|
+
/**
|
38
|
+
* @type {number}
|
39
|
+
*/
|
40
|
+
_defineProperty(this, "stretchAllRatio", 0);
|
41
|
+
/**
|
42
|
+
* @type {number}
|
43
|
+
*/
|
44
|
+
_defineProperty(this, "stretchLastWidth", 0);
|
45
|
+
/**
|
46
|
+
* @type {number[]}
|
47
|
+
*/
|
48
|
+
_defineProperty(this, "stretchAllColumnsWidth", []);
|
49
|
+
/**
|
50
|
+
* @type {number}
|
51
|
+
*/
|
52
|
+
_classPrivateFieldInitSpec(this, _totalTargetWidth, 0);
|
53
|
+
/**
|
54
|
+
* @type {boolean}
|
55
|
+
*/
|
56
|
+
_defineProperty(this, "needVerifyLastColumnWidth", true);
|
57
|
+
/**
|
58
|
+
* The total number of columns.
|
59
|
+
*
|
60
|
+
* @type {function(): number}
|
61
|
+
*/
|
62
|
+
_classPrivateFieldInitSpec(this, _totalColumns, () => 0);
|
63
|
+
/**
|
64
|
+
* Function that returns the width of the stretched column at a given index (in px).
|
65
|
+
*
|
66
|
+
* @type {function(): number}
|
67
|
+
*/
|
68
|
+
_classPrivateFieldInitSpec(this, _stretchingColumnWidthFn, width => width);
|
69
|
+
/**
|
70
|
+
* Function that returns the width of the column at a given index (in px).
|
71
|
+
*
|
72
|
+
* @type {function(): number}
|
73
|
+
*/
|
74
|
+
_classPrivateFieldInitSpec(this, _columnWidthFn, width => width);
|
75
|
+
/**
|
76
|
+
* Stretch mode.
|
77
|
+
*
|
78
|
+
* @type {function(): 'all' | 'last' | 'none'}
|
79
|
+
*/
|
80
|
+
_classPrivateFieldInitSpec(this, _stretchMode, () => 'none');
|
81
|
+
_classPrivateFieldSet(_totalColumns, this, totalColumns);
|
82
|
+
_classPrivateFieldSet(_stretchMode, this, stretchMode);
|
83
|
+
_classPrivateFieldSet(_stretchingColumnWidthFn, this, stretchingColumnWidthFn !== null && stretchingColumnWidthFn !== void 0 ? stretchingColumnWidthFn : _classPrivateFieldGet(_stretchingColumnWidthFn, this));
|
84
|
+
_classPrivateFieldSet(_columnWidthFn, this, columnWidthFn !== null && columnWidthFn !== void 0 ? columnWidthFn : _classPrivateFieldGet(_columnWidthFn, this));
|
85
|
+
}
|
86
|
+
|
87
|
+
/**
|
88
|
+
* Recalculate columns stretching.
|
89
|
+
*
|
90
|
+
* @param {number} totalWidth The total width of the table.
|
91
|
+
*/
|
92
|
+
refreshStretching(totalWidth) {
|
93
|
+
if (_classPrivateFieldGet(_stretchMode, this).call(this) === 'none') {
|
94
|
+
return;
|
95
|
+
}
|
96
|
+
this.stretchAllRatio = 0;
|
97
|
+
this.stretchAllColumnsWidth = [];
|
98
|
+
this.needVerifyLastColumnWidth = true;
|
99
|
+
this.stretchLastWidth = 0;
|
100
|
+
_classPrivateFieldSet(_totalTargetWidth, this, totalWidth);
|
101
|
+
let sumAll = 0;
|
102
|
+
for (let i = 0; i < _classPrivateFieldGet(_totalColumns, this).call(this); i++) {
|
103
|
+
const columnWidth = this._getColumnWidth(i);
|
104
|
+
const permanentColumnWidth = _classPrivateFieldGet(_stretchingColumnWidthFn, this).call(this, undefined, i);
|
105
|
+
if (typeof permanentColumnWidth === 'number') {
|
106
|
+
totalWidth -= permanentColumnWidth;
|
107
|
+
} else {
|
108
|
+
sumAll += columnWidth;
|
109
|
+
}
|
110
|
+
}
|
111
|
+
const remainingSize = totalWidth - sumAll;
|
112
|
+
if (_classPrivateFieldGet(_stretchMode, this).call(this) === 'all' && remainingSize > 0) {
|
113
|
+
this.stretchAllRatio = totalWidth / sumAll;
|
114
|
+
this.stretchAllColumnsWidth = [];
|
115
|
+
this.needVerifyLastColumnWidth = true;
|
116
|
+
} else if (_classPrivateFieldGet(_stretchMode, this).call(this) === 'last' && totalWidth !== Infinity) {
|
117
|
+
const columnWidth = this._getColumnWidth(_classPrivateFieldGet(_totalColumns, this).call(this) - 1);
|
118
|
+
const lastColumnWidth = remainingSize + columnWidth;
|
119
|
+
this.stretchLastWidth = lastColumnWidth >= 0 ? lastColumnWidth : columnWidth;
|
120
|
+
}
|
121
|
+
}
|
122
|
+
|
123
|
+
/**
|
124
|
+
* Get stretched column width based on stretchH (all or last) setting passed in handsontable instance.
|
125
|
+
*
|
126
|
+
* @param {number} column The visual column index.
|
127
|
+
* @param {number} baseWidth The default column width.
|
128
|
+
* @returns {number|null}
|
129
|
+
*/
|
130
|
+
getStretchedColumnWidth(column, baseWidth) {
|
131
|
+
let result = null;
|
132
|
+
if (_classPrivateFieldGet(_stretchMode, this).call(this) === 'all' && this.stretchAllRatio !== 0) {
|
133
|
+
result = this._getStretchedAllColumnWidth(column, baseWidth);
|
134
|
+
} else if (_classPrivateFieldGet(_stretchMode, this).call(this) === 'last' && this.stretchLastWidth !== 0) {
|
135
|
+
result = this._getStretchedLastColumnWidth(column);
|
136
|
+
}
|
137
|
+
return result;
|
138
|
+
}
|
139
|
+
|
140
|
+
/**
|
141
|
+
* @param {number} column The visual column index.
|
142
|
+
* @param {number} baseWidth The default column width.
|
143
|
+
* @returns {number}
|
144
|
+
* @private
|
145
|
+
*/
|
146
|
+
_getStretchedAllColumnWidth(column, baseWidth) {
|
147
|
+
let sumRatioWidth = 0;
|
148
|
+
if (!this.stretchAllColumnsWidth[column]) {
|
149
|
+
const stretchedWidth = Math.round(baseWidth * this.stretchAllRatio);
|
150
|
+
const newStretchedWidth = _classPrivateFieldGet(_stretchingColumnWidthFn, this).call(this, stretchedWidth, column);
|
151
|
+
if (newStretchedWidth === undefined) {
|
152
|
+
this.stretchAllColumnsWidth[column] = stretchedWidth;
|
153
|
+
} else {
|
154
|
+
this.stretchAllColumnsWidth[column] = isNaN(newStretchedWidth) ? this._getColumnWidth(column) : newStretchedWidth;
|
155
|
+
}
|
156
|
+
}
|
157
|
+
if (this.stretchAllColumnsWidth.length === _classPrivateFieldGet(_totalColumns, this).call(this) && this.needVerifyLastColumnWidth) {
|
158
|
+
this.needVerifyLastColumnWidth = false;
|
159
|
+
for (let i = 0; i < this.stretchAllColumnsWidth.length; i++) {
|
160
|
+
sumRatioWidth += this.stretchAllColumnsWidth[i];
|
161
|
+
}
|
162
|
+
if (sumRatioWidth !== _classPrivateFieldGet(_totalTargetWidth, this)) {
|
163
|
+
this.stretchAllColumnsWidth[this.stretchAllColumnsWidth.length - 1] += _classPrivateFieldGet(_totalTargetWidth, this) - sumRatioWidth;
|
164
|
+
}
|
165
|
+
}
|
166
|
+
return this.stretchAllColumnsWidth[column];
|
167
|
+
}
|
168
|
+
|
169
|
+
/**
|
170
|
+
* @param {number} column The visual column index.
|
171
|
+
* @returns {number|null}
|
172
|
+
* @private
|
173
|
+
*/
|
174
|
+
_getStretchedLastColumnWidth(column) {
|
175
|
+
if (column === _classPrivateFieldGet(_totalColumns, this).call(this) - 1) {
|
176
|
+
return this.stretchLastWidth;
|
177
|
+
}
|
178
|
+
return null;
|
179
|
+
}
|
180
|
+
|
181
|
+
/**
|
182
|
+
* @param {number} column The visual column index.
|
183
|
+
* @returns {number}
|
184
|
+
* @private
|
185
|
+
*/
|
186
|
+
_getColumnWidth(column) {
|
187
|
+
let width = _classPrivateFieldGet(_columnWidthFn, this).call(this, column);
|
188
|
+
if (isNaN(width)) {
|
189
|
+
width = DEFAULT_COLUMN_WIDTH;
|
190
|
+
}
|
191
|
+
return width;
|
192
|
+
}
|
193
|
+
}
|
@@ -27,6 +27,7 @@ class Viewport {
|
|
27
27
|
this.oversizedColumnHeaders = [];
|
28
28
|
this.hasOversizedColumnHeadersMarked = {};
|
29
29
|
this.clientHeight = 0;
|
30
|
+
this.containerWidth = NaN;
|
30
31
|
this.rowHeaderWidth = NaN;
|
31
32
|
this.rowsVisibleCalculator = null;
|
32
33
|
this.columnsVisibleCalculator = null;
|
@@ -55,65 +56,55 @@ class Viewport {
|
|
55
56
|
}
|
56
57
|
return height;
|
57
58
|
}
|
58
|
-
|
59
|
-
/**
|
60
|
-
* @returns {number}
|
61
|
-
*/
|
62
|
-
getViewportHeight() {
|
63
|
-
let containerHeight = this.getWorkspaceHeight();
|
64
|
-
if (containerHeight === Infinity) {
|
65
|
-
return containerHeight;
|
66
|
-
}
|
67
|
-
const columnHeaderHeight = this.getColumnHeaderHeight();
|
68
|
-
if (columnHeaderHeight > 0) {
|
69
|
-
containerHeight -= columnHeaderHeight;
|
70
|
-
}
|
71
|
-
return containerHeight;
|
72
|
-
}
|
73
|
-
|
74
|
-
/**
|
75
|
-
* Gets the width of the table workspace (in pixels). The workspace size in the current
|
76
|
-
* implementation returns the width of the table holder element including scrollbar width when
|
77
|
-
* the table has defined size and the width of the window excluding scrollbar width when
|
78
|
-
* the table has no defined size (the window is a scrollable container).
|
79
|
-
*
|
80
|
-
* This is a bug, as the method should always return stable values, always without scrollbar width.
|
81
|
-
* Changing this behavior would break the column calculators, which would also need to be adjusted.
|
82
|
-
*
|
83
|
-
* @returns {number}
|
84
|
-
*/
|
85
59
|
getWorkspaceWidth() {
|
60
|
+
const {
|
61
|
+
wtSettings
|
62
|
+
} = this;
|
86
63
|
const {
|
87
64
|
rootDocument,
|
88
65
|
rootWindow
|
89
66
|
} = this.domBindings;
|
90
67
|
const trimmingContainer = this.dataAccessObject.inlineStartOverlayTrimmingContainer;
|
68
|
+
const docOffsetWidth = rootDocument.documentElement.offsetWidth;
|
69
|
+
const totalColumns = wtSettings.getSetting('totalColumns');
|
70
|
+
const preventOverflow = wtSettings.getSetting('preventOverflow');
|
71
|
+
const isRtl = wtSettings.getSetting('rtlMode');
|
72
|
+
const tableRect = this.wtTable.TABLE.getBoundingClientRect();
|
73
|
+
const inlineStart = isRtl ? tableRect.right - docOffsetWidth : tableRect.left;
|
74
|
+
const tableOffset = docOffsetWidth - inlineStart;
|
91
75
|
let width;
|
92
|
-
|
93
|
-
|
94
|
-
|
95
|
-
|
96
|
-
|
97
|
-
|
76
|
+
let overflow;
|
77
|
+
if (preventOverflow) {
|
78
|
+
return (0, _element.outerWidth)(this.wtTable.wtRootElement);
|
79
|
+
}
|
80
|
+
if (wtSettings.getSetting('freezeOverlays')) {
|
81
|
+
width = Math.min(tableOffset, docOffsetWidth);
|
98
82
|
} else {
|
99
|
-
width =
|
83
|
+
width = Math.min(this.getContainerFillWidth(), tableOffset, docOffsetWidth);
|
100
84
|
}
|
101
|
-
|
102
|
-
|
103
|
-
|
104
|
-
|
105
|
-
|
106
|
-
|
107
|
-
getViewportWidth() {
|
108
|
-
const containerWidth = this.getWorkspaceWidth();
|
109
|
-
if (containerWidth === Infinity) {
|
110
|
-
return containerWidth;
|
85
|
+
if (trimmingContainer === rootWindow && totalColumns > 0 && this.sumColumnWidths(0, totalColumns - 1) > width) {
|
86
|
+
// in case sum of column widths is higher than available stylesheet width, let's assume using the whole window
|
87
|
+
// otherwise continue below, which will allow stretching
|
88
|
+
// this is used in `scroll_window.html`
|
89
|
+
// TODO test me
|
90
|
+
return rootDocument.documentElement.clientWidth;
|
111
91
|
}
|
112
|
-
|
113
|
-
|
114
|
-
|
92
|
+
if (trimmingContainer !== rootWindow) {
|
93
|
+
overflow = (0, _element.getStyle)(this.dataAccessObject.inlineStartOverlayTrimmingContainer, 'overflow', rootWindow);
|
94
|
+
if (overflow === 'scroll' || overflow === 'hidden' || overflow === 'auto') {
|
95
|
+
// this is used in `scroll.html`
|
96
|
+
// TODO test me
|
97
|
+
return Math.max(width, trimmingContainer.clientWidth);
|
98
|
+
}
|
115
99
|
}
|
116
|
-
|
100
|
+
const stretchSetting = wtSettings.getSetting('stretchH');
|
101
|
+
if (stretchSetting === 'none' || !stretchSetting) {
|
102
|
+
// if no stretching is used, return the maximum used workspace width
|
103
|
+
return Math.max(width, (0, _element.outerWidth)(this.wtTable.TABLE));
|
104
|
+
}
|
105
|
+
|
106
|
+
// if stretching is used, return the actual container width, so the columns can fit inside it
|
107
|
+
return width;
|
117
108
|
}
|
118
109
|
|
119
110
|
/**
|
@@ -134,24 +125,6 @@ class Viewport {
|
|
134
125
|
return this.wtTable.hider.offsetWidth > this.getWorkspaceWidth();
|
135
126
|
}
|
136
127
|
|
137
|
-
/**
|
138
|
-
* Checks if the table uses the window as a viewport and if there is a vertical scrollbar.
|
139
|
-
*
|
140
|
-
* @returns {boolean}
|
141
|
-
*/
|
142
|
-
isVerticallyScrollableByWindow() {
|
143
|
-
return this.dataAccessObject.topOverlayTrimmingContainer === this.domBindings.rootWindow;
|
144
|
-
}
|
145
|
-
|
146
|
-
/**
|
147
|
-
* Checks if the table uses the window as a viewport and if there is a horizontal scrollbar.
|
148
|
-
*
|
149
|
-
* @returns {boolean}
|
150
|
-
*/
|
151
|
-
isHorizontallyScrollableByWindow() {
|
152
|
-
return this.dataAccessObject.inlineStartOverlayTrimmingContainer === this.domBindings.rootWindow;
|
153
|
-
}
|
154
|
-
|
155
128
|
/**
|
156
129
|
* @param {number} from The visual column index from the width sum is start calculated.
|
157
130
|
* @param {number} length The length of the column to traverse.
|
@@ -167,6 +140,24 @@ class Viewport {
|
|
167
140
|
return sum;
|
168
141
|
}
|
169
142
|
|
143
|
+
/**
|
144
|
+
* @returns {number}
|
145
|
+
*/
|
146
|
+
getContainerFillWidth() {
|
147
|
+
if (this.containerWidth) {
|
148
|
+
return this.containerWidth;
|
149
|
+
}
|
150
|
+
const mainContainer = this.wtTable.holder;
|
151
|
+
const dummyElement = this.domBindings.rootDocument.createElement('div');
|
152
|
+
dummyElement.style.width = '100%';
|
153
|
+
dummyElement.style.height = '1px';
|
154
|
+
mainContainer.appendChild(dummyElement);
|
155
|
+
const fillWidth = dummyElement.offsetWidth;
|
156
|
+
this.containerWidth = fillWidth;
|
157
|
+
mainContainer.removeChild(dummyElement);
|
158
|
+
return fillWidth;
|
159
|
+
}
|
160
|
+
|
170
161
|
/**
|
171
162
|
* @returns {number}
|
172
163
|
*/
|
@@ -187,6 +178,21 @@ class Viewport {
|
|
187
178
|
return this.columnHeaderHeight;
|
188
179
|
}
|
189
180
|
|
181
|
+
/**
|
182
|
+
* @returns {number}
|
183
|
+
*/
|
184
|
+
getViewportHeight() {
|
185
|
+
let containerHeight = this.getWorkspaceHeight();
|
186
|
+
if (containerHeight === Infinity) {
|
187
|
+
return containerHeight;
|
188
|
+
}
|
189
|
+
const columnHeaderHeight = this.getColumnHeaderHeight();
|
190
|
+
if (columnHeaderHeight > 0) {
|
191
|
+
containerHeight -= columnHeaderHeight;
|
192
|
+
}
|
193
|
+
return containerHeight;
|
194
|
+
}
|
195
|
+
|
190
196
|
/**
|
191
197
|
* @returns {number}
|
192
198
|
*/
|
@@ -221,6 +227,21 @@ class Viewport {
|
|
221
227
|
return this.rowHeaderWidth;
|
222
228
|
}
|
223
229
|
|
230
|
+
/**
|
231
|
+
* @returns {number}
|
232
|
+
*/
|
233
|
+
getViewportWidth() {
|
234
|
+
const containerWidth = this.getWorkspaceWidth();
|
235
|
+
if (containerWidth === Infinity) {
|
236
|
+
return containerWidth;
|
237
|
+
}
|
238
|
+
const rowHeaderWidth = this.getRowHeaderWidth();
|
239
|
+
if (rowHeaderWidth > 0) {
|
240
|
+
return containerWidth - rowHeaderWidth;
|
241
|
+
}
|
242
|
+
return containerWidth;
|
243
|
+
}
|
244
|
+
|
224
245
|
/**
|
225
246
|
* Creates rows calculators. The type of the calculations can be chosen from the list:
|
226
247
|
* - 'rendered' Calculates rows that should be rendered within the current table's viewport;
|
@@ -1,4 +1,4 @@
|
|
1
|
-
import { getScrollbarWidth, offset, outerHeight, outerWidth } from "../../../helpers/dom/element.mjs";
|
1
|
+
import { getScrollbarWidth, getStyle, offset, outerHeight, outerWidth } from "../../../helpers/dom/element.mjs";
|
2
2
|
import { objectEach } from "../../../helpers/object.mjs";
|
3
3
|
import { FullyVisibleColumnsCalculationType, FullyVisibleRowsCalculationType, PartiallyVisibleColumnsCalculationType, PartiallyVisibleRowsCalculationType, RenderedAllColumnsCalculationType, RenderedAllRowsCalculationType, RenderedColumnsCalculationType, RenderedRowsCalculationType, ViewportColumnsCalculator, ViewportRowsCalculator } from "./calculator/index.mjs";
|
4
4
|
/**
|
@@ -24,6 +24,7 @@ class Viewport {
|
|
24
24
|
this.oversizedColumnHeaders = [];
|
25
25
|
this.hasOversizedColumnHeadersMarked = {};
|
26
26
|
this.clientHeight = 0;
|
27
|
+
this.containerWidth = NaN;
|
27
28
|
this.rowHeaderWidth = NaN;
|
28
29
|
this.rowsVisibleCalculator = null;
|
29
30
|
this.columnsVisibleCalculator = null;
|
@@ -52,65 +53,55 @@ class Viewport {
|
|
52
53
|
}
|
53
54
|
return height;
|
54
55
|
}
|
55
|
-
|
56
|
-
/**
|
57
|
-
* @returns {number}
|
58
|
-
*/
|
59
|
-
getViewportHeight() {
|
60
|
-
let containerHeight = this.getWorkspaceHeight();
|
61
|
-
if (containerHeight === Infinity) {
|
62
|
-
return containerHeight;
|
63
|
-
}
|
64
|
-
const columnHeaderHeight = this.getColumnHeaderHeight();
|
65
|
-
if (columnHeaderHeight > 0) {
|
66
|
-
containerHeight -= columnHeaderHeight;
|
67
|
-
}
|
68
|
-
return containerHeight;
|
69
|
-
}
|
70
|
-
|
71
|
-
/**
|
72
|
-
* Gets the width of the table workspace (in pixels). The workspace size in the current
|
73
|
-
* implementation returns the width of the table holder element including scrollbar width when
|
74
|
-
* the table has defined size and the width of the window excluding scrollbar width when
|
75
|
-
* the table has no defined size (the window is a scrollable container).
|
76
|
-
*
|
77
|
-
* This is a bug, as the method should always return stable values, always without scrollbar width.
|
78
|
-
* Changing this behavior would break the column calculators, which would also need to be adjusted.
|
79
|
-
*
|
80
|
-
* @returns {number}
|
81
|
-
*/
|
82
56
|
getWorkspaceWidth() {
|
57
|
+
const {
|
58
|
+
wtSettings
|
59
|
+
} = this;
|
83
60
|
const {
|
84
61
|
rootDocument,
|
85
62
|
rootWindow
|
86
63
|
} = this.domBindings;
|
87
64
|
const trimmingContainer = this.dataAccessObject.inlineStartOverlayTrimmingContainer;
|
65
|
+
const docOffsetWidth = rootDocument.documentElement.offsetWidth;
|
66
|
+
const totalColumns = wtSettings.getSetting('totalColumns');
|
67
|
+
const preventOverflow = wtSettings.getSetting('preventOverflow');
|
68
|
+
const isRtl = wtSettings.getSetting('rtlMode');
|
69
|
+
const tableRect = this.wtTable.TABLE.getBoundingClientRect();
|
70
|
+
const inlineStart = isRtl ? tableRect.right - docOffsetWidth : tableRect.left;
|
71
|
+
const tableOffset = docOffsetWidth - inlineStart;
|
88
72
|
let width;
|
89
|
-
|
90
|
-
|
91
|
-
|
92
|
-
|
93
|
-
|
94
|
-
|
73
|
+
let overflow;
|
74
|
+
if (preventOverflow) {
|
75
|
+
return outerWidth(this.wtTable.wtRootElement);
|
76
|
+
}
|
77
|
+
if (wtSettings.getSetting('freezeOverlays')) {
|
78
|
+
width = Math.min(tableOffset, docOffsetWidth);
|
95
79
|
} else {
|
96
|
-
width =
|
80
|
+
width = Math.min(this.getContainerFillWidth(), tableOffset, docOffsetWidth);
|
97
81
|
}
|
98
|
-
|
99
|
-
|
100
|
-
|
101
|
-
|
102
|
-
|
103
|
-
|
104
|
-
getViewportWidth() {
|
105
|
-
const containerWidth = this.getWorkspaceWidth();
|
106
|
-
if (containerWidth === Infinity) {
|
107
|
-
return containerWidth;
|
82
|
+
if (trimmingContainer === rootWindow && totalColumns > 0 && this.sumColumnWidths(0, totalColumns - 1) > width) {
|
83
|
+
// in case sum of column widths is higher than available stylesheet width, let's assume using the whole window
|
84
|
+
// otherwise continue below, which will allow stretching
|
85
|
+
// this is used in `scroll_window.html`
|
86
|
+
// TODO test me
|
87
|
+
return rootDocument.documentElement.clientWidth;
|
108
88
|
}
|
109
|
-
|
110
|
-
|
111
|
-
|
89
|
+
if (trimmingContainer !== rootWindow) {
|
90
|
+
overflow = getStyle(this.dataAccessObject.inlineStartOverlayTrimmingContainer, 'overflow', rootWindow);
|
91
|
+
if (overflow === 'scroll' || overflow === 'hidden' || overflow === 'auto') {
|
92
|
+
// this is used in `scroll.html`
|
93
|
+
// TODO test me
|
94
|
+
return Math.max(width, trimmingContainer.clientWidth);
|
95
|
+
}
|
112
96
|
}
|
113
|
-
|
97
|
+
const stretchSetting = wtSettings.getSetting('stretchH');
|
98
|
+
if (stretchSetting === 'none' || !stretchSetting) {
|
99
|
+
// if no stretching is used, return the maximum used workspace width
|
100
|
+
return Math.max(width, outerWidth(this.wtTable.TABLE));
|
101
|
+
}
|
102
|
+
|
103
|
+
// if stretching is used, return the actual container width, so the columns can fit inside it
|
104
|
+
return width;
|
114
105
|
}
|
115
106
|
|
116
107
|
/**
|
@@ -131,24 +122,6 @@ class Viewport {
|
|
131
122
|
return this.wtTable.hider.offsetWidth > this.getWorkspaceWidth();
|
132
123
|
}
|
133
124
|
|
134
|
-
/**
|
135
|
-
* Checks if the table uses the window as a viewport and if there is a vertical scrollbar.
|
136
|
-
*
|
137
|
-
* @returns {boolean}
|
138
|
-
*/
|
139
|
-
isVerticallyScrollableByWindow() {
|
140
|
-
return this.dataAccessObject.topOverlayTrimmingContainer === this.domBindings.rootWindow;
|
141
|
-
}
|
142
|
-
|
143
|
-
/**
|
144
|
-
* Checks if the table uses the window as a viewport and if there is a horizontal scrollbar.
|
145
|
-
*
|
146
|
-
* @returns {boolean}
|
147
|
-
*/
|
148
|
-
isHorizontallyScrollableByWindow() {
|
149
|
-
return this.dataAccessObject.inlineStartOverlayTrimmingContainer === this.domBindings.rootWindow;
|
150
|
-
}
|
151
|
-
|
152
125
|
/**
|
153
126
|
* @param {number} from The visual column index from the width sum is start calculated.
|
154
127
|
* @param {number} length The length of the column to traverse.
|
@@ -164,6 +137,24 @@ class Viewport {
|
|
164
137
|
return sum;
|
165
138
|
}
|
166
139
|
|
140
|
+
/**
|
141
|
+
* @returns {number}
|
142
|
+
*/
|
143
|
+
getContainerFillWidth() {
|
144
|
+
if (this.containerWidth) {
|
145
|
+
return this.containerWidth;
|
146
|
+
}
|
147
|
+
const mainContainer = this.wtTable.holder;
|
148
|
+
const dummyElement = this.domBindings.rootDocument.createElement('div');
|
149
|
+
dummyElement.style.width = '100%';
|
150
|
+
dummyElement.style.height = '1px';
|
151
|
+
mainContainer.appendChild(dummyElement);
|
152
|
+
const fillWidth = dummyElement.offsetWidth;
|
153
|
+
this.containerWidth = fillWidth;
|
154
|
+
mainContainer.removeChild(dummyElement);
|
155
|
+
return fillWidth;
|
156
|
+
}
|
157
|
+
|
167
158
|
/**
|
168
159
|
* @returns {number}
|
169
160
|
*/
|
@@ -184,6 +175,21 @@ class Viewport {
|
|
184
175
|
return this.columnHeaderHeight;
|
185
176
|
}
|
186
177
|
|
178
|
+
/**
|
179
|
+
* @returns {number}
|
180
|
+
*/
|
181
|
+
getViewportHeight() {
|
182
|
+
let containerHeight = this.getWorkspaceHeight();
|
183
|
+
if (containerHeight === Infinity) {
|
184
|
+
return containerHeight;
|
185
|
+
}
|
186
|
+
const columnHeaderHeight = this.getColumnHeaderHeight();
|
187
|
+
if (columnHeaderHeight > 0) {
|
188
|
+
containerHeight -= columnHeaderHeight;
|
189
|
+
}
|
190
|
+
return containerHeight;
|
191
|
+
}
|
192
|
+
|
187
193
|
/**
|
188
194
|
* @returns {number}
|
189
195
|
*/
|
@@ -218,6 +224,21 @@ class Viewport {
|
|
218
224
|
return this.rowHeaderWidth;
|
219
225
|
}
|
220
226
|
|
227
|
+
/**
|
228
|
+
* @returns {number}
|
229
|
+
*/
|
230
|
+
getViewportWidth() {
|
231
|
+
const containerWidth = this.getWorkspaceWidth();
|
232
|
+
if (containerWidth === Infinity) {
|
233
|
+
return containerWidth;
|
234
|
+
}
|
235
|
+
const rowHeaderWidth = this.getRowHeaderWidth();
|
236
|
+
if (rowHeaderWidth > 0) {
|
237
|
+
return containerWidth - rowHeaderWidth;
|
238
|
+
}
|
239
|
+
return containerWidth;
|
240
|
+
}
|
241
|
+
|
221
242
|
/**
|
222
243
|
* Creates rows calculators. The type of the calculations can be chosen from the list:
|
223
244
|
* - 'rendered' Calculates rows that should be rendered within the current table's viewport;
|
package/base.js
CHANGED
@@ -45,8 +45,8 @@ Handsontable.hooks = _hooks.Hooks.getSingleton();
|
|
45
45
|
Handsontable.CellCoords = _src.CellCoords;
|
46
46
|
Handsontable.CellRange = _src.CellRange;
|
47
47
|
Handsontable.packageName = 'handsontable';
|
48
|
-
Handsontable.buildDate = "
|
49
|
-
Handsontable.version = "0.0.0-next-
|
48
|
+
Handsontable.buildDate = "25/10/2024 06:46:12";
|
49
|
+
Handsontable.version = "0.0.0-next-adeb5a2-20241025";
|
50
50
|
Handsontable.languages = {
|
51
51
|
dictionaryKeys: _registry.dictionaryKeys,
|
52
52
|
getLanguageDictionary: _registry.getLanguageDictionary,
|
package/base.mjs
CHANGED
@@ -35,8 +35,8 @@ Handsontable.hooks = Hooks.getSingleton();
|
|
35
35
|
Handsontable.CellCoords = CellCoords;
|
36
36
|
Handsontable.CellRange = CellRange;
|
37
37
|
Handsontable.packageName = 'handsontable';
|
38
|
-
Handsontable.buildDate = "
|
39
|
-
Handsontable.version = "0.0.0-next-
|
38
|
+
Handsontable.buildDate = "25/10/2024 06:46:18";
|
39
|
+
Handsontable.version = "0.0.0-next-adeb5a2-20241025";
|
40
40
|
Handsontable.languages = {
|
41
41
|
dictionaryKeys,
|
42
42
|
getLanguageDictionary,
|
package/core/hooks/constants.js
CHANGED
@@ -1368,7 +1368,6 @@ const REGISTERED_HOOKS = exports.REGISTERED_HOOKS = [/* eslint-disable jsdoc/req
|
|
1368
1368
|
* @event Hooks#modifyColWidth
|
1369
1369
|
* @param {number} width Current column width.
|
1370
1370
|
* @param {number} column Visual column index.
|
1371
|
-
* @param {string} [source] String that identifies source of hook call.
|
1372
1371
|
*/
|
1373
1372
|
'modifyColWidth',
|
1374
1373
|
/**
|
@@ -1405,7 +1404,6 @@ const REGISTERED_HOOKS = exports.REGISTERED_HOOKS = [/* eslint-disable jsdoc/req
|
|
1405
1404
|
* @event Hooks#modifyRowHeight
|
1406
1405
|
* @param {number} height Row height.
|
1407
1406
|
* @param {number} row Visual row index.
|
1408
|
-
* @param {string} [source] String that identifies source of hook call.
|
1409
1407
|
*/
|
1410
1408
|
'modifyRowHeight',
|
1411
1409
|
/**
|
package/core/hooks/constants.mjs
CHANGED
@@ -1365,7 +1365,6 @@ export const REGISTERED_HOOKS = [/* eslint-disable jsdoc/require-description-com
|
|
1365
1365
|
* @event Hooks#modifyColWidth
|
1366
1366
|
* @param {number} width Current column width.
|
1367
1367
|
* @param {number} column Visual column index.
|
1368
|
-
* @param {string} [source] String that identifies source of hook call.
|
1369
1368
|
*/
|
1370
1369
|
'modifyColWidth',
|
1371
1370
|
/**
|
@@ -1402,7 +1401,6 @@ export const REGISTERED_HOOKS = [/* eslint-disable jsdoc/require-description-com
|
|
1402
1401
|
* @event Hooks#modifyRowHeight
|
1403
1402
|
* @param {number} height Row height.
|
1404
1403
|
* @param {number} row Visual row index.
|
1405
|
-
* @param {string} [source] String that identifies source of hook call.
|
1406
1404
|
*/
|
1407
1405
|
'modifyRowHeight',
|
1408
1406
|
/**
|
package/core/hooks/index.d.ts
CHANGED
@@ -237,7 +237,7 @@ export interface Events {
|
|
237
237
|
modifyColHeader?: (column: number) => void;
|
238
238
|
modifyColumnHeaderHeight?: () => void;
|
239
239
|
modifyColumnHeaderValue?: (headerValue: string, visualColumnIndex: number, headerLevel: number) => void | string;
|
240
|
-
modifyColWidth?: (width: number, column: number
|
240
|
+
modifyColWidth?: (width: number, column: number) => void;
|
241
241
|
modifyCopyableRange?: (copyableRanges: RangeType[]) => void;
|
242
242
|
modifyFiltersMultiSelectValue?: (value: string, meta: CellProperties) => void | CellValue;
|
243
243
|
modifyFocusedElement?: (row: number, column: number, focusedElement: HTMLElement) => void | HTMLElement;
|
@@ -248,7 +248,7 @@ export interface Events {
|
|
248
248
|
modifyRowData?: (row: number) => void;
|
249
249
|
modifyRowHeader?: (row: number) => void;
|
250
250
|
modifyRowHeaderWidth?: (rowHeaderWidth: number) => void;
|
251
|
-
modifyRowHeight?: (height: number, row: number
|
251
|
+
modifyRowHeight?: (height: number, row: number) => void | number;
|
252
252
|
modifyRowHeightByOverlayName?: (height: number, row: number, overlayType: OverlayType) => void | number;
|
253
253
|
modifySourceData?: (row: number, column: number, valueHolder: { value: CellValue }, ioMode: 'get' | 'set') => void;
|
254
254
|
modifyTransformEnd?: (delta: CellCoords) => void;
|