venus-design 1.0.5 → 1.0.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/VirtTable/config.d.ts +2 -0
- package/dist/VirtTable/config.js +4 -2
- package/dist/VirtTable/index.js +3 -1
- package/dist/VirtTable/src/Body.d.ts +6 -0
- package/dist/VirtTable/src/Body.js +159 -71
- package/dist/VirtTable/src/Config.d.ts +22 -0
- package/dist/VirtTable/src/Config.js +19 -0
- package/dist/VirtTable/src/Context.d.ts +2 -0
- package/dist/VirtTable/src/Context.js +6 -1
- package/dist/VirtTable/src/EVirtTable.js +3 -0
- package/dist/VirtTable/src/EventBrowser.js +10 -2
- package/dist/VirtTable/src/EventTable.js +36 -0
- package/package.json +1 -1
|
@@ -8,6 +8,8 @@ export declare const defaultConfig: {
|
|
|
8
8
|
HEADER_BG_COLOR: string;
|
|
9
9
|
ENABLE_EDIT_SINGLE_CLICK: boolean;
|
|
10
10
|
HEIGHT: number;
|
|
11
|
+
ENABLE_KEYBOARD: boolean;
|
|
12
|
+
HIGHLIGHT_HOVER_ROW: boolean;
|
|
11
13
|
TREE_INDENT: number;
|
|
12
14
|
HEADER_CELL_STYLE_METHOD: ({ column }: any) => {
|
|
13
15
|
color: string;
|
package/dist/VirtTable/config.js
CHANGED
|
@@ -19,8 +19,10 @@ export var defaultConfig = {
|
|
|
19
19
|
//单击进入编辑
|
|
20
20
|
HEIGHT: 300,
|
|
21
21
|
// 高度
|
|
22
|
-
|
|
23
|
-
//
|
|
22
|
+
ENABLE_KEYBOARD: true,
|
|
23
|
+
// 开启键盘操作
|
|
24
|
+
HIGHLIGHT_HOVER_ROW: true,
|
|
25
|
+
// 开启行悬停高亮
|
|
24
26
|
//HIGHLIGHT_HOVER_ROW_COLOR:"#eeeeeeff",//悬停高亮颜色
|
|
25
27
|
//HIGHLIGHT_SELECTED_ROW:true, // 开启选中行高亮
|
|
26
28
|
//HIGHLIGHT_SELECTED_ROW_COLOR:"#d5f2ffff",//选中高亮颜色
|
package/dist/VirtTable/index.js
CHANGED
|
@@ -653,6 +653,8 @@ export default function VirtTable(props) {
|
|
|
653
653
|
}
|
|
654
654
|
}, [editorType, editorCell, editorStyle, selectValue, numberValue, dateValue, selevelValue, userValue, deptValue]);
|
|
655
655
|
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
|
|
656
|
+
className: "virt-table-all"
|
|
657
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
656
658
|
className: "virt-table-header"
|
|
657
659
|
}, /*#__PURE__*/React.createElement("div", {
|
|
658
660
|
className: "virt-table-header-title"
|
|
@@ -708,5 +710,5 @@ export default function VirtTable(props) {
|
|
|
708
710
|
})));
|
|
709
711
|
}));
|
|
710
712
|
}));
|
|
711
|
-
}))));
|
|
713
|
+
})))));
|
|
712
714
|
}
|
|
@@ -17,8 +17,13 @@ export default class Body {
|
|
|
17
17
|
private visibleHeight;
|
|
18
18
|
private visibleWidth;
|
|
19
19
|
private containerRect;
|
|
20
|
+
private addRowBtnRect;
|
|
21
|
+
private addRowBtnHover;
|
|
22
|
+
private mousePollTimer;
|
|
20
23
|
private data;
|
|
21
24
|
constructor(ctx: Context);
|
|
25
|
+
private startMousePoll;
|
|
26
|
+
private stopMousePoll;
|
|
22
27
|
private init;
|
|
23
28
|
private initResizeRow;
|
|
24
29
|
private resizeRow;
|
|
@@ -27,5 +32,6 @@ export default class Body {
|
|
|
27
32
|
private binarySearch;
|
|
28
33
|
update(): void;
|
|
29
34
|
updateAutoHeight(): void;
|
|
35
|
+
private drawAddRowButton;
|
|
30
36
|
draw(): void;
|
|
31
37
|
}
|
|
@@ -8,6 +8,7 @@ function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e
|
|
|
8
8
|
import Row from "./Row";
|
|
9
9
|
var Body = /*#__PURE__*/function () {
|
|
10
10
|
function Body(ctx) {
|
|
11
|
+
var _this = this;
|
|
11
12
|
_classCallCheck(this, Body);
|
|
12
13
|
_defineProperty(this, "resizeTarget", null);
|
|
13
14
|
//调整行大小的目标
|
|
@@ -31,12 +32,53 @@ var Body = /*#__PURE__*/function () {
|
|
|
31
32
|
_defineProperty(this, "visibleHeight", 0);
|
|
32
33
|
_defineProperty(this, "visibleWidth", 0);
|
|
33
34
|
_defineProperty(this, "containerRect", void 0);
|
|
35
|
+
/* 1. 在 class 顶部加:按钮条缓存 */
|
|
36
|
+
_defineProperty(this, "addRowBtnRect", null);
|
|
37
|
+
_defineProperty(this, "addRowBtnHover", false);
|
|
38
|
+
// ← 新增
|
|
39
|
+
_defineProperty(this, "mousePollTimer", null);
|
|
40
|
+
// 轮询句柄
|
|
34
41
|
_defineProperty(this, "data", []);
|
|
35
42
|
this.ctx = ctx;
|
|
36
43
|
this.init();
|
|
44
|
+
this.startMousePoll(); // 启动轮询
|
|
45
|
+
ctx.on('destroy', function () {
|
|
46
|
+
return _this.stopMousePoll();
|
|
47
|
+
});
|
|
37
48
|
this.initResizeRow();
|
|
38
49
|
}
|
|
50
|
+
/* 轮询:每 100ms 检查一次鼠标是否还在按钮热区 */
|
|
39
51
|
_createClass(Body, [{
|
|
52
|
+
key: "startMousePoll",
|
|
53
|
+
value: function startMousePoll() {
|
|
54
|
+
var _this2 = this;
|
|
55
|
+
if (this.mousePollTimer) return;
|
|
56
|
+
this.mousePollTimer = window.setInterval(function () {
|
|
57
|
+
if (!_this2.addRowBtnRect) return;
|
|
58
|
+
// 当前鼠标位置(EventBrowser 里已实时缓存到 Context)
|
|
59
|
+
var _ref = _this2.ctx.lastMouseMoveEvent ? _this2.ctx.getOffset(_this2.ctx.lastMouseMoveEvent) : {
|
|
60
|
+
offsetX: -9999,
|
|
61
|
+
offsetY: -9999
|
|
62
|
+
},
|
|
63
|
+
offsetX = _ref.offsetX,
|
|
64
|
+
offsetY = _ref.offsetY;
|
|
65
|
+
var by = _this2.addRowBtnRect.y - _this2.ctx.scrollY;
|
|
66
|
+
var inside = offsetX >= _this2.addRowBtnRect.x && offsetX <= _this2.addRowBtnRect.x + _this2.addRowBtnRect.w && offsetY >= by && offsetY <= by + _this2.addRowBtnRect.h;
|
|
67
|
+
if (inside !== _this2.addRowBtnHover) {
|
|
68
|
+
_this2.addRowBtnHover = inside;
|
|
69
|
+
_this2.ctx.emit('draw'); // 立即重画
|
|
70
|
+
}
|
|
71
|
+
}, 100);
|
|
72
|
+
}
|
|
73
|
+
}, {
|
|
74
|
+
key: "stopMousePoll",
|
|
75
|
+
value: function stopMousePoll() {
|
|
76
|
+
if (this.mousePollTimer) {
|
|
77
|
+
clearInterval(this.mousePollTimer);
|
|
78
|
+
this.mousePollTimer = null;
|
|
79
|
+
}
|
|
80
|
+
}
|
|
81
|
+
}, {
|
|
40
82
|
key: "init",
|
|
41
83
|
value: function init() {
|
|
42
84
|
var _this$ctx = this.ctx,
|
|
@@ -90,8 +132,8 @@ var Body = /*#__PURE__*/function () {
|
|
|
90
132
|
containerHeight += footerHeight;
|
|
91
133
|
var stageHeight = containerHeight;
|
|
92
134
|
var windowInnerHeight = window.innerHeight;
|
|
93
|
-
var
|
|
94
|
-
top =
|
|
135
|
+
var _ref2 = this.containerRect || this.ctx.containerElement.getBoundingClientRect(),
|
|
136
|
+
top = _ref2.top;
|
|
95
137
|
if (windowInnerHeight > top && ENABLE_OFFSET_HEIGHT && !HEIGHT) {
|
|
96
138
|
var visibleHeight = windowInnerHeight - top;
|
|
97
139
|
var _stageHeight = visibleHeight - OFFSET_HEIGHT;
|
|
@@ -154,115 +196,115 @@ var Body = /*#__PURE__*/function () {
|
|
|
154
196
|
}, {
|
|
155
197
|
key: "initResizeRow",
|
|
156
198
|
value: function initResizeRow() {
|
|
157
|
-
var
|
|
199
|
+
var _this3 = this;
|
|
158
200
|
this.ctx.on('resize', function () {
|
|
159
|
-
if (!
|
|
201
|
+
if (!_this3.ctx.config.ENABLE_RESIZE_ROW) {
|
|
160
202
|
return;
|
|
161
203
|
}
|
|
162
|
-
|
|
204
|
+
_this3.containerRect = _this3.ctx.containerElement.getBoundingClientRect();
|
|
163
205
|
});
|
|
164
206
|
this.ctx.on('resizeObserver', function () {
|
|
165
|
-
if (!
|
|
207
|
+
if (!_this3.ctx.config.ENABLE_RESIZE_ROW) {
|
|
166
208
|
return;
|
|
167
209
|
}
|
|
168
|
-
|
|
210
|
+
_this3.containerRect = _this3.ctx.containerElement.getBoundingClientRect();
|
|
169
211
|
});
|
|
170
212
|
// 鼠标移动
|
|
171
213
|
this.ctx.on('mouseup', function () {
|
|
172
|
-
if (!
|
|
214
|
+
if (!_this3.ctx.config.ENABLE_RESIZE_ROW) {
|
|
173
215
|
return;
|
|
174
216
|
}
|
|
175
|
-
|
|
176
|
-
if (
|
|
217
|
+
_this3.isMouseDown = false;
|
|
218
|
+
if (_this3.resizeDiff !== 0 && _this3.resizeTarget) {
|
|
177
219
|
// 调整宽度
|
|
178
|
-
|
|
220
|
+
_this3.resizeRow(_this3.resizeTarget, _this3.resizeDiff);
|
|
179
221
|
}
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
222
|
+
_this3.resizeTarget = null;
|
|
223
|
+
_this3.resizeDiff = 0;
|
|
224
|
+
_this3.isResizing = false;
|
|
183
225
|
//加个延时,修复拖动时,开始编辑的问题
|
|
184
226
|
setTimeout(function () {
|
|
185
|
-
|
|
227
|
+
_this3.ctx.rowResizing = false;
|
|
186
228
|
}, 0);
|
|
187
|
-
|
|
229
|
+
_this3.clientY = 0;
|
|
188
230
|
});
|
|
189
231
|
this.ctx.on('mousedown', function (e) {
|
|
190
|
-
if (!
|
|
232
|
+
if (!_this3.ctx.config.ENABLE_RESIZE_ROW) {
|
|
191
233
|
return;
|
|
192
234
|
}
|
|
193
|
-
if (!
|
|
235
|
+
if (!_this3.ctx.isTarget(e)) {
|
|
194
236
|
return;
|
|
195
237
|
}
|
|
196
|
-
|
|
197
|
-
if (
|
|
198
|
-
|
|
238
|
+
_this3.clientY = e.clientY;
|
|
239
|
+
if (_this3.resizeTarget) {
|
|
240
|
+
_this3.isResizing = true;
|
|
199
241
|
// 传递给上下文,防止其他事件触发,行调整大小时,不触发选择器
|
|
200
|
-
|
|
242
|
+
_this3.ctx.rowResizing = true;
|
|
201
243
|
} else {
|
|
202
|
-
|
|
203
|
-
|
|
244
|
+
_this3.isResizing = false;
|
|
245
|
+
_this3.ctx.rowResizing = false;
|
|
204
246
|
}
|
|
205
|
-
|
|
247
|
+
_this3.isMouseDown = true;
|
|
206
248
|
});
|
|
207
249
|
this.ctx.on('mousemove', function (e) {
|
|
208
|
-
if (!
|
|
250
|
+
if (!_this3.ctx.config.ENABLE_RESIZE_ROW) {
|
|
209
251
|
return;
|
|
210
252
|
}
|
|
211
253
|
// 编辑中不触发mousemove
|
|
212
|
-
if (
|
|
213
|
-
var
|
|
214
|
-
offsetY =
|
|
215
|
-
offsetX =
|
|
254
|
+
if (_this3.ctx.editing) return;
|
|
255
|
+
var _this3$ctx$getOffset = _this3.ctx.getOffset(e),
|
|
256
|
+
offsetY = _this3$ctx$getOffset.offsetY,
|
|
257
|
+
offsetX = _this3$ctx$getOffset.offsetX;
|
|
216
258
|
var y = offsetY;
|
|
217
259
|
var x = offsetX;
|
|
218
260
|
var clientY = e.clientY;
|
|
219
|
-
var
|
|
220
|
-
stageHeight =
|
|
221
|
-
scrollY =
|
|
222
|
-
|
|
223
|
-
RESIZE_ROW_MIN_HEIGHT =
|
|
224
|
-
if (
|
|
225
|
-
var resizeTargetHeight =
|
|
226
|
-
var diff = clientY -
|
|
227
|
-
var calculatedHeight =
|
|
261
|
+
var _this3$ctx = _this3.ctx,
|
|
262
|
+
stageHeight = _this3$ctx.stageHeight,
|
|
263
|
+
scrollY = _this3$ctx.scrollY,
|
|
264
|
+
_this3$ctx$config$RES = _this3$ctx.config.RESIZE_ROW_MIN_HEIGHT,
|
|
265
|
+
RESIZE_ROW_MIN_HEIGHT = _this3$ctx$config$RES === void 0 ? 0 : _this3$ctx$config$RES;
|
|
266
|
+
if (_this3.isResizing && _this3.resizeTarget) {
|
|
267
|
+
var resizeTargetHeight = _this3.resizeTarget.height;
|
|
268
|
+
var diff = clientY - _this3.clientY;
|
|
269
|
+
var calculatedHeight = _this3.resizeTarget.calculatedHeight;
|
|
228
270
|
var minHeight = calculatedHeight === -1 ? RESIZE_ROW_MIN_HEIGHT : calculatedHeight;
|
|
229
271
|
if (diff + resizeTargetHeight < minHeight) {
|
|
230
272
|
diff = -(resizeTargetHeight - minHeight);
|
|
231
273
|
}
|
|
232
|
-
|
|
233
|
-
|
|
274
|
+
_this3.resizeDiff = diff;
|
|
275
|
+
_this3.ctx.emit('draw');
|
|
234
276
|
} else {
|
|
235
|
-
|
|
277
|
+
_this3.resizeTarget = null;
|
|
236
278
|
// 按下时不改变样式,有可能是多选表头
|
|
237
|
-
if (
|
|
279
|
+
if (_this3.isMouseDown) {
|
|
238
280
|
return;
|
|
239
281
|
}
|
|
240
282
|
// 鼠标移动时,判断是否在行的范围内
|
|
241
|
-
if (x < 0 || x >
|
|
242
|
-
if (
|
|
283
|
+
if (x < 0 || x > _this3.ctx.body.visibleWidth || y < 0 || y > _this3.ctx.header.visibleHeight + _this3.ctx.body.visibleHeight) {
|
|
284
|
+
if (_this3.ctx.stageElement.style.cursor === 'row-resize') {
|
|
243
285
|
// 恢复默认样式
|
|
244
|
-
|
|
286
|
+
_this3.ctx.stageElement.style.cursor = 'default';
|
|
245
287
|
}
|
|
246
288
|
return;
|
|
247
289
|
}
|
|
248
290
|
// 如果是拖动选择
|
|
249
|
-
if (
|
|
291
|
+
if (_this3.ctx.stageElement.style.cursor === 'crosshair') {
|
|
250
292
|
return;
|
|
251
293
|
}
|
|
252
|
-
if (
|
|
294
|
+
if (_this3.ctx.stageElement.style.cursor === 'row-resize') {
|
|
253
295
|
// 恢复默认样式
|
|
254
|
-
|
|
296
|
+
_this3.ctx.stageElement.style.cursor = 'default';
|
|
255
297
|
}
|
|
256
|
-
for (var i = 0; i <
|
|
257
|
-
var row =
|
|
298
|
+
for (var i = 0; i < _this3.renderRows.length; i++) {
|
|
299
|
+
var row = _this3.renderRows[i];
|
|
258
300
|
var isYRange = y > row.y - scrollY + row.height - 1.5 && y < row.y - scrollY + row.height + 1.5 && y < stageHeight - 4;
|
|
259
301
|
if (isYRange) {
|
|
260
302
|
for (var j = 0; j < row.cells.length; j++) {
|
|
261
303
|
var cell = row.cells[j];
|
|
262
304
|
if (x > cell.drawX + 10 && x < cell.drawX + cell.width - 10 && cell.rowspan === 1 //没有被合并的单元格
|
|
263
305
|
) {
|
|
264
|
-
|
|
265
|
-
|
|
306
|
+
_this3.ctx.stageElement.style.cursor = 'row-resize';
|
|
307
|
+
_this3.resizeTarget = row;
|
|
266
308
|
}
|
|
267
309
|
}
|
|
268
310
|
}
|
|
@@ -293,10 +335,10 @@ var Body = /*#__PURE__*/function () {
|
|
|
293
335
|
key: "drawTipLine",
|
|
294
336
|
value: function drawTipLine() {
|
|
295
337
|
if (this.isResizing && this.resizeTarget) {
|
|
296
|
-
var _this$
|
|
297
|
-
stageWidth = _this$
|
|
298
|
-
scrollY = _this$
|
|
299
|
-
RESIZE_ROW_LINE_COLOR = _this$
|
|
338
|
+
var _this$ctx2 = this.ctx,
|
|
339
|
+
stageWidth = _this$ctx2.stageWidth,
|
|
340
|
+
scrollY = _this$ctx2.scrollY,
|
|
341
|
+
RESIZE_ROW_LINE_COLOR = _this$ctx2.config.RESIZE_ROW_LINE_COLOR;
|
|
300
342
|
var resizeTargetDrawY = this.resizeTarget.y - scrollY;
|
|
301
343
|
var resizeTargetHeight = this.resizeTarget.height;
|
|
302
344
|
var y = resizeTargetDrawY + resizeTargetHeight + this.resizeDiff - 0.5;
|
|
@@ -310,15 +352,15 @@ var Body = /*#__PURE__*/function () {
|
|
|
310
352
|
}, {
|
|
311
353
|
key: "drawFixedShadow",
|
|
312
354
|
value: function drawFixedShadow() {
|
|
313
|
-
var _this$
|
|
314
|
-
fixedLeftWidth = _this$
|
|
315
|
-
fixedRightWidth = _this$
|
|
316
|
-
scrollX = _this$
|
|
317
|
-
header = _this$
|
|
318
|
-
stageWidth = _this$
|
|
319
|
-
_this$
|
|
320
|
-
HEADER_BG_COLOR = _this$
|
|
321
|
-
SCROLLER_TRACK_SIZE = _this$
|
|
355
|
+
var _this$ctx3 = this.ctx,
|
|
356
|
+
fixedLeftWidth = _this$ctx3.fixedLeftWidth,
|
|
357
|
+
fixedRightWidth = _this$ctx3.fixedRightWidth,
|
|
358
|
+
scrollX = _this$ctx3.scrollX,
|
|
359
|
+
header = _this$ctx3.header,
|
|
360
|
+
stageWidth = _this$ctx3.stageWidth,
|
|
361
|
+
_this$ctx3$config = _this$ctx3.config,
|
|
362
|
+
HEADER_BG_COLOR = _this$ctx3$config.HEADER_BG_COLOR,
|
|
363
|
+
SCROLLER_TRACK_SIZE = _this$ctx3$config.SCROLLER_TRACK_SIZE;
|
|
322
364
|
if (scrollX > 0 && fixedLeftWidth !== 0) {
|
|
323
365
|
this.ctx.paint.drawShadow(this.x, this.y, fixedLeftWidth, this.height, {
|
|
324
366
|
fillColor: HEADER_BG_COLOR,
|
|
@@ -364,11 +406,11 @@ var Body = /*#__PURE__*/function () {
|
|
|
364
406
|
key: "update",
|
|
365
407
|
value: function update() {
|
|
366
408
|
this.init();
|
|
367
|
-
var _this$
|
|
368
|
-
header = _this$
|
|
369
|
-
database = _this$
|
|
370
|
-
scrollY = _this$
|
|
371
|
-
CELL_HEIGHT = _this$
|
|
409
|
+
var _this$ctx4 = this.ctx,
|
|
410
|
+
header = _this$ctx4.header,
|
|
411
|
+
database = _this$ctx4.database,
|
|
412
|
+
scrollY = _this$ctx4.scrollY,
|
|
413
|
+
CELL_HEIGHT = _this$ctx4.config.CELL_HEIGHT;
|
|
372
414
|
var offset = scrollY;
|
|
373
415
|
var _database$getData2 = database.getData(),
|
|
374
416
|
data = _database$getData2.data,
|
|
@@ -401,6 +443,17 @@ var Body = /*#__PURE__*/function () {
|
|
|
401
443
|
var row = new Row(this.ctx, index, 0, top + this.y, header.width, height, _data);
|
|
402
444
|
rows.push(row);
|
|
403
445
|
}
|
|
446
|
+
if (this.ctx.config.ENABLE_ADD_ROW_BUTTON) {
|
|
447
|
+
var dataBottom = this.height; // 数据总高
|
|
448
|
+
this.addRowBtnRect = {
|
|
449
|
+
x: 0,
|
|
450
|
+
y: dataBottom,
|
|
451
|
+
w: this.width,
|
|
452
|
+
h: this.ctx.config.CELL_HEIGHT
|
|
453
|
+
};
|
|
454
|
+
} else {
|
|
455
|
+
this.addRowBtnRect = null;
|
|
456
|
+
}
|
|
404
457
|
this.renderRows = rows;
|
|
405
458
|
this.ctx.body.renderRows = rows;
|
|
406
459
|
}
|
|
@@ -428,6 +481,39 @@ var Body = /*#__PURE__*/function () {
|
|
|
428
481
|
});
|
|
429
482
|
this.ctx.database.setBatchCalculatedRowHeight(heights);
|
|
430
483
|
}
|
|
484
|
+
}, {
|
|
485
|
+
key: "drawAddRowButton",
|
|
486
|
+
value: function drawAddRowButton() {
|
|
487
|
+
if (!this.addRowBtnRect) return;
|
|
488
|
+
var _this$addRowBtnRect = this.addRowBtnRect,
|
|
489
|
+
x = _this$addRowBtnRect.x,
|
|
490
|
+
y = _this$addRowBtnRect.y,
|
|
491
|
+
w = _this$addRowBtnRect.w,
|
|
492
|
+
h = _this$addRowBtnRect.h;
|
|
493
|
+
var _this$ctx5 = this.ctx,
|
|
494
|
+
paint = _this$ctx5.paint,
|
|
495
|
+
config = _this$ctx5.config;
|
|
496
|
+
|
|
497
|
+
// 背景色:悬浮/默认 二选一
|
|
498
|
+
var bgColor = this.addRowBtnHover ? config.ADD_ROW_BUTTON_HOVER_BG_COLOR : config.ADD_ROW_BUTTON_BG_COLOR;
|
|
499
|
+
|
|
500
|
+
// 文字颜色:悬浮/默认 二选一
|
|
501
|
+
var textColor = this.addRowBtnHover ? config.ADD_ROW_BUTTON_HOVER_TEXT_COLOR : config.ADD_ROW_BUTTON_TEXT_COLOR;
|
|
502
|
+
paint.drawRect(x, y - this.ctx.scrollY, w, h, {
|
|
503
|
+
fillColor: bgColor,
|
|
504
|
+
borderColor: config.BORDER_COLOR,
|
|
505
|
+
borderWidth: 1
|
|
506
|
+
});
|
|
507
|
+
paint.drawText(config.ADD_ROW_BUTTON_TEXT, x, y - this.ctx.scrollY, w, h, {
|
|
508
|
+
align: config.ADD_ROW_BUTTON_TEXT_ALIGN,
|
|
509
|
+
// ← 新增
|
|
510
|
+
padding: config.ADD_ROW_BUTTON_TEXT_PADDING,
|
|
511
|
+
// ← 新增
|
|
512
|
+
verticalAlign: 'middle',
|
|
513
|
+
color: textColor,
|
|
514
|
+
font: "".concat(config.ADD_ROW_BUTTON_FONT_SIZE, "px normal Arial")
|
|
515
|
+
});
|
|
516
|
+
}
|
|
431
517
|
}, {
|
|
432
518
|
key: "draw",
|
|
433
519
|
value: function draw() {
|
|
@@ -446,6 +532,8 @@ var Body = /*#__PURE__*/function () {
|
|
|
446
532
|
row.drawFixed();
|
|
447
533
|
});
|
|
448
534
|
this.drawTipLine();
|
|
535
|
+
/* 画按钮条 */
|
|
536
|
+
this.drawAddRowButton();
|
|
449
537
|
}
|
|
450
538
|
}]);
|
|
451
539
|
return Body;
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import EVirtTable from './EVirtTable';
|
|
1
2
|
import { IconType } from './Icons';
|
|
2
3
|
import { Align, BeforeAutofillDataMethod, BeforeCellValueChangeMethod, BeforeCopyMethod, BeforePasteDataMethod, BeforeSetAutofillMethod, BeforeSetSelectorMethod, CellEditorMethod, CellHeaderStyleMethod, CellHoverIconMethod, CellReadonlyMethod, CellRenderMethod, CellRulesMethod, CellStyleMethod, CellTypeMethod, ConfigType, ExpandLazyMethod, FooterPosition, FormatterMethod, MenuItem, SelectableMethod, SelectorCellValueType, SpanMethod, TreeSelectMode, VerticalAlign } from './types';
|
|
3
4
|
export default class Config {
|
|
@@ -307,6 +308,27 @@ export default class Config {
|
|
|
307
308
|
BEFORE_SET_AUTOFILL_METHOD?: BeforeSetAutofillMethod;
|
|
308
309
|
/** 数据复制前回调 */
|
|
309
310
|
BEFORE_COPY_METHOD?: BeforeCopyMethod;
|
|
311
|
+
ENABLE_ADD_ROW_BUTTON: boolean;
|
|
312
|
+
ADD_ROW_BUTTON_TEXT: string;
|
|
313
|
+
ADD_ROW_BUTTON_CLICK?: (params: {
|
|
314
|
+
table: EVirtTable;
|
|
315
|
+
}) => void;
|
|
316
|
+
/** 添加一行按钮-文字大小 */
|
|
317
|
+
ADD_ROW_BUTTON_FONT_SIZE: number;
|
|
318
|
+
/** 添加一行按钮-文字颜色 */
|
|
319
|
+
ADD_ROW_BUTTON_TEXT_COLOR: string;
|
|
320
|
+
/** 添加一行按钮-悬浮鼠标样式 */
|
|
321
|
+
ADD_ROW_BUTTON_CURSOR: string;
|
|
322
|
+
/** 添加一行按钮-默认背景色 */
|
|
323
|
+
ADD_ROW_BUTTON_BG_COLOR: string;
|
|
324
|
+
/** 添加一行按钮-悬浮背景色 */
|
|
325
|
+
ADD_ROW_BUTTON_HOVER_BG_COLOR: string;
|
|
326
|
+
/** 添加一行按钮-悬浮文字颜色 */
|
|
327
|
+
ADD_ROW_BUTTON_HOVER_TEXT_COLOR: string;
|
|
328
|
+
/** 添加一行按钮-文字水平对齐方式 */
|
|
329
|
+
ADD_ROW_BUTTON_TEXT_ALIGN: 'left' | 'center' | 'right';
|
|
330
|
+
/** 添加一行按钮-文字左右边距(px) */
|
|
331
|
+
ADD_ROW_BUTTON_TEXT_PADDING: number;
|
|
310
332
|
constructor(config: Partial<Config>);
|
|
311
333
|
/** 初始化 */
|
|
312
334
|
init(config: ConfigType): void;
|
|
@@ -333,6 +333,25 @@ var Config = /*#__PURE__*/function () {
|
|
|
333
333
|
_defineProperty(this, "BEFORE_SET_AUTOFILL_METHOD", void 0);
|
|
334
334
|
/** 数据复制前回调 */
|
|
335
335
|
_defineProperty(this, "BEFORE_COPY_METHOD", void 0);
|
|
336
|
+
_defineProperty(this, "ENABLE_ADD_ROW_BUTTON", false);
|
|
337
|
+
_defineProperty(this, "ADD_ROW_BUTTON_TEXT", '添加一行');
|
|
338
|
+
_defineProperty(this, "ADD_ROW_BUTTON_CLICK", void 0);
|
|
339
|
+
/** 添加一行按钮-文字大小 */
|
|
340
|
+
_defineProperty(this, "ADD_ROW_BUTTON_FONT_SIZE", 12);
|
|
341
|
+
/** 添加一行按钮-文字颜色 */
|
|
342
|
+
_defineProperty(this, "ADD_ROW_BUTTON_TEXT_COLOR", '#1890ff');
|
|
343
|
+
/** 添加一行按钮-悬浮鼠标样式 */
|
|
344
|
+
_defineProperty(this, "ADD_ROW_BUTTON_CURSOR", 'pointer');
|
|
345
|
+
/** 添加一行按钮-默认背景色 */
|
|
346
|
+
_defineProperty(this, "ADD_ROW_BUTTON_BG_COLOR", '#ffffff');
|
|
347
|
+
/** 添加一行按钮-悬浮背景色 */
|
|
348
|
+
_defineProperty(this, "ADD_ROW_BUTTON_HOVER_BG_COLOR", '#e6f7ff');
|
|
349
|
+
/** 添加一行按钮-悬浮文字颜色 */
|
|
350
|
+
_defineProperty(this, "ADD_ROW_BUTTON_HOVER_TEXT_COLOR", '#096dd9');
|
|
351
|
+
/** 添加一行按钮-文字水平对齐方式 */
|
|
352
|
+
_defineProperty(this, "ADD_ROW_BUTTON_TEXT_ALIGN", 'center');
|
|
353
|
+
/** 添加一行按钮-文字左右边距(px) */
|
|
354
|
+
_defineProperty(this, "ADD_ROW_BUTTON_TEXT_PADDING", 12);
|
|
336
355
|
this._config = config;
|
|
337
356
|
this.updateCssVar();
|
|
338
357
|
}
|
|
@@ -119,6 +119,7 @@ export default class Context {
|
|
|
119
119
|
focusCellHeader?: CellHeader;
|
|
120
120
|
hoverCellHeader?: CellHeader;
|
|
121
121
|
body: BodyOptions;
|
|
122
|
+
bodyInstance?: Body;
|
|
122
123
|
footer: FooterOptions;
|
|
123
124
|
header: HeaderOptions;
|
|
124
125
|
selector: SelectorOptions;
|
|
@@ -129,6 +130,7 @@ export default class Context {
|
|
|
129
130
|
drawTime: number;
|
|
130
131
|
pickedRowIndex: number;
|
|
131
132
|
placeholderIndex: number;
|
|
133
|
+
lastMouseMoveEvent?: MouseEvent;
|
|
132
134
|
constructor(containerOptions: containerElementOptions, options: EVirtTableOptions);
|
|
133
135
|
setConfig(config: Config): void;
|
|
134
136
|
setItemValueByEditor(rowKey: string, key: string, value: any, history?: boolean, reDraw?: boolean, checkReadonly?: boolean): void;
|
|
@@ -22,7 +22,8 @@ import Config from "./Config";
|
|
|
22
22
|
import Icons from "./Icons";
|
|
23
23
|
import EventTable from "./EventTable";
|
|
24
24
|
var Context = /*#__PURE__*/function () {
|
|
25
|
-
//
|
|
25
|
+
// 新增:最后一次鼠标事件
|
|
26
|
+
|
|
26
27
|
function Context(containerOptions, options) {
|
|
27
28
|
_classCallCheck(this, Context);
|
|
28
29
|
_defineProperty(this, "eventBus", void 0);
|
|
@@ -102,6 +103,8 @@ var Context = /*#__PURE__*/function () {
|
|
|
102
103
|
renderRows: [],
|
|
103
104
|
data: []
|
|
104
105
|
});
|
|
106
|
+
_defineProperty(this, "bodyInstance", void 0);
|
|
107
|
+
// ← 新增:指向真正的 Body 实例
|
|
105
108
|
_defineProperty(this, "footer", {
|
|
106
109
|
x: 0,
|
|
107
110
|
y: 0,
|
|
@@ -145,6 +148,8 @@ var Context = /*#__PURE__*/function () {
|
|
|
145
148
|
_defineProperty(this, "pickedRowIndex", -1);
|
|
146
149
|
// -1 表示没有抓起
|
|
147
150
|
_defineProperty(this, "placeholderIndex", -1);
|
|
151
|
+
// 空位所在索引
|
|
152
|
+
_defineProperty(this, "lastMouseMoveEvent", void 0);
|
|
148
153
|
var containerElement = containerOptions.containerElement,
|
|
149
154
|
stageElement = containerOptions.stageElement,
|
|
150
155
|
canvasElement = containerOptions.canvasElement,
|
|
@@ -75,6 +75,9 @@ var EVirtTable = /*#__PURE__*/function () {
|
|
|
75
75
|
this.loading = new Loading(this.ctx);
|
|
76
76
|
this.filterPanel = new FilterPanel(this.ctx); // <-- 新增
|
|
77
77
|
// 注入到 Context 中
|
|
78
|
+
this.body = new Body(this.ctx);
|
|
79
|
+
//@ts-ignore
|
|
80
|
+
this.ctx.bodyInstance = this.body; // ← 新增
|
|
78
81
|
this.ctx.filterPanel = this.filterPanel;
|
|
79
82
|
// ↓↓↓ 再加一行,让 Context 能把“表头过滤按钮点击”事件广播出去
|
|
80
83
|
this.ctx.on('filterClick', function (cellHeader) {
|
|
@@ -16,6 +16,7 @@ var EventBrowser = /*#__PURE__*/function () {
|
|
|
16
16
|
_createClass(EventBrowser, [{
|
|
17
17
|
key: "init",
|
|
18
18
|
value: function init() {
|
|
19
|
+
var _this = this;
|
|
19
20
|
this.bind(window, 'resize', this.handleResize.bind(this));
|
|
20
21
|
this.bind(window, 'mouseup', this.handleMouseUp.bind(this));
|
|
21
22
|
this.bind(window, 'mousemove', this.handleMousemove.bind(this));
|
|
@@ -39,7 +40,12 @@ var EventBrowser = /*#__PURE__*/function () {
|
|
|
39
40
|
this.bind(this.ctx.stageElement, 'mouseover', this.handleMouseover.bind(this));
|
|
40
41
|
this.bind(this.ctx.stageElement, 'mouseout', this.handleMouseout.bind(this));
|
|
41
42
|
document.addEventListener('selectionchange', this.selectionchange.bind(this));
|
|
43
|
+
// EventBrowser.ts -> init()
|
|
44
|
+
this.bind(document, 'mouseleave', function () {
|
|
45
|
+
_this.ctx.emit('globalMouseLeave');
|
|
46
|
+
});
|
|
42
47
|
}
|
|
48
|
+
// EventBrowser.ts -> handleMousemove
|
|
43
49
|
}, {
|
|
44
50
|
key: "selectionchange",
|
|
45
51
|
value: function selectionchange() {
|
|
@@ -60,9 +66,9 @@ var EventBrowser = /*#__PURE__*/function () {
|
|
|
60
66
|
}, {
|
|
61
67
|
key: "destroy",
|
|
62
68
|
value: function destroy() {
|
|
63
|
-
var
|
|
69
|
+
var _this2 = this;
|
|
64
70
|
this.eventTasks.forEach(function (fn, event) {
|
|
65
|
-
|
|
71
|
+
_this2.unbind(window, event, fn);
|
|
66
72
|
});
|
|
67
73
|
document.removeEventListener('selectionchange', this.selectionchange.bind(this));
|
|
68
74
|
this.eventTasks.clear();
|
|
@@ -89,6 +95,8 @@ var EventBrowser = /*#__PURE__*/function () {
|
|
|
89
95
|
}, {
|
|
90
96
|
key: "handleMousemove",
|
|
91
97
|
value: function handleMousemove(e) {
|
|
98
|
+
var me = e;
|
|
99
|
+
this.ctx.lastMouseMoveEvent = me; // ← 新增缓存
|
|
92
100
|
this.ctx.emit('mousemove', e);
|
|
93
101
|
}
|
|
94
102
|
}, {
|
|
@@ -123,6 +123,24 @@ var EventTable = /*#__PURE__*/function () {
|
|
|
123
123
|
});
|
|
124
124
|
// 可视区
|
|
125
125
|
_this.handleBodyEvent(x, y, _this.ctx.body.renderRows, function (cell) {
|
|
126
|
+
var _this$ctx$bodyInstanc;
|
|
127
|
+
/* 0. 先检查是否点在按钮条上 */
|
|
128
|
+
/* 0. 先检查是否点在按钮条上 */
|
|
129
|
+
//@ts-ignore
|
|
130
|
+
var btn = (_this$ctx$bodyInstanc = _this.ctx.bodyInstance) === null || _this$ctx$bodyInstanc === void 0 ? void 0 : _this$ctx$bodyInstanc.addRowBtnRect; // ← 注意这里
|
|
131
|
+
if (btn) {
|
|
132
|
+
var by = btn.y - _this.ctx.scrollY;
|
|
133
|
+
if (x >= btn.x && x <= btn.x + btn.w && y >= by && y <= by + btn.h) {
|
|
134
|
+
var ADD_ROW_BUTTON_CLICK = _this.ctx.config.ADD_ROW_BUTTON_CLICK;
|
|
135
|
+
if (typeof ADD_ROW_BUTTON_CLICK === 'function') {
|
|
136
|
+
console.log(_this.ctx);
|
|
137
|
+
ADD_ROW_BUTTON_CLICK({
|
|
138
|
+
table: _this.ctx
|
|
139
|
+
});
|
|
140
|
+
}
|
|
141
|
+
return;
|
|
142
|
+
}
|
|
143
|
+
}
|
|
126
144
|
_this.ctx.clickCell = cell;
|
|
127
145
|
_this.ctx.emit('cellClick', cell, e);
|
|
128
146
|
_this.selectionClick(cell, e);
|
|
@@ -177,6 +195,7 @@ var EventTable = /*#__PURE__*/function () {
|
|
|
177
195
|
}
|
|
178
196
|
});
|
|
179
197
|
this.ctx.on('mousemove', function (e) {
|
|
198
|
+
var _this$ctx$bodyInstanc2;
|
|
180
199
|
// 是否忙碌,进行其他操作
|
|
181
200
|
if (_this.isBusy(e)) {
|
|
182
201
|
return;
|
|
@@ -202,6 +221,23 @@ var EventTable = /*#__PURE__*/function () {
|
|
|
202
221
|
_this.visibleHoverCell = undefined; // 清除可视区hover
|
|
203
222
|
_this.ctx.emit('cellHeaderHoverChange', cell, e);
|
|
204
223
|
});
|
|
224
|
+
//@ts-ignore
|
|
225
|
+
var btn = (_this$ctx$bodyInstanc2 = _this.ctx.bodyInstance) === null || _this$ctx$bodyInstanc2 === void 0 ? void 0 : _this$ctx$bodyInstanc2.addRowBtnRect;
|
|
226
|
+
var body = _this.ctx.bodyInstance;
|
|
227
|
+
if (btn && body) {
|
|
228
|
+
var by = btn.y - _this.ctx.scrollY;
|
|
229
|
+
var inside = x >= btn.x && x <= btn.x + btn.w && y >= by && y <= by + btn.h;
|
|
230
|
+
//@ts-ignore
|
|
231
|
+
if (inside !== body.addRowBtnHover) {
|
|
232
|
+
//@ts-ignore
|
|
233
|
+
body.addRowBtnHover = inside;
|
|
234
|
+
_this.ctx.emit('draw'); // 重画一次即可换色
|
|
235
|
+
}
|
|
236
|
+
if (inside) {
|
|
237
|
+
_this.ctx.stageElement.style.cursor = _this.ctx.config.ADD_ROW_BUTTON_CURSOR;
|
|
238
|
+
return;
|
|
239
|
+
}
|
|
240
|
+
}
|
|
205
241
|
// 可视区
|
|
206
242
|
_this.handleBodyEvent(x, y, _this.ctx.body.renderRows, function (cell) {
|
|
207
243
|
// selection移入移除事件
|