@kdcloudjs/table 1.2.2-canary.13 → 1.2.2-canary.14
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/@kdcloudjs/table.css +1 -1
- package/dist/@kdcloudjs/table.js +525 -323
- package/dist/@kdcloudjs/table.js.map +1 -1
- package/dist/@kdcloudjs/table.min.css +1 -1
- package/dist/@kdcloudjs/table.min.js +4 -4
- package/dist/@kdcloudjs/table.min.js.map +1 -1
- package/es/table/pipeline/features/columnDrag.js +220 -242
- package/es/table/pipeline/features/columnResizeWidth.js +40 -5
- package/es/table/pipeline/features/rowDrag.js +169 -80
- package/es/table/pipeline/features/utils/touchEventUtils.d.ts +15 -0
- package/es/table/pipeline/features/utils/touchEventUtils.js +65 -0
- package/lib/table/pipeline/features/columnDrag.js +220 -242
- package/lib/table/pipeline/features/columnResizeWidth.js +40 -5
- package/lib/table/pipeline/features/rowDrag.js +169 -80
- package/lib/table/pipeline/features/utils/touchEventUtils.d.ts +15 -0
- package/lib/table/pipeline/features/utils/touchEventUtils.js +76 -0
- package/package.json +1 -1
|
@@ -21,6 +21,7 @@ var _classnames = _interopRequireDefault(require("classnames"));
|
|
|
21
21
|
var _styles = require("../../base/styles");
|
|
22
22
|
var _const = require("../const");
|
|
23
23
|
var _internals = require("../../internals");
|
|
24
|
+
var _touchEventUtils = require("./utils/touchEventUtils");
|
|
24
25
|
var ROW_DRAG_COLUMN_CODE = '$_row_drag_column_&';
|
|
25
26
|
exports.ROW_DRAG_COLUMN_CODE = ROW_DRAG_COLUMN_CODE;
|
|
26
27
|
var rowDragKey = 'rowDragKey';
|
|
@@ -43,15 +44,14 @@ var defaultRowDragColumn = {
|
|
|
43
44
|
},
|
|
44
45
|
render: function render(value, row, rowIndex) {
|
|
45
46
|
return /*#__PURE__*/_react.default.createElement("svg", {
|
|
46
|
-
viewBox:
|
|
47
|
-
version:
|
|
48
|
-
xmlns:
|
|
49
|
-
"data-icon":
|
|
50
|
-
width:
|
|
51
|
-
height:
|
|
47
|
+
viewBox: "0 0 1024 1024",
|
|
48
|
+
version: "1.1",
|
|
49
|
+
xmlns: "http://www.w3.org/1999/xlink",
|
|
50
|
+
"data-icon": "drag",
|
|
51
|
+
width: "16",
|
|
52
|
+
height: "16"
|
|
52
53
|
}, /*#__PURE__*/_react.default.createElement("path", {
|
|
53
|
-
d:
|
|
54
|
-
"p-id": '4278'
|
|
54
|
+
d: "M298.688 192a64 64 0 1 0 128 0 64 64 0 0 0-128 0z m298.624 0a64 64 0 1 0 128 0 64 64 0 0 0-128 0zM298.688 512a64 64 0 1 0 128 0 64 64 0 0 0-128 0z m298.624 0a64 64 0 1 0 128 0 64 64 0 0 0-128 0z m-298.624 320a64 64 0 1 0 128 0 64 64 0 0 0-128 0z m298.624 0a64 64 0 1 0 128 0 64 64 0 0 0-128 0z"
|
|
55
55
|
}));
|
|
56
56
|
}
|
|
57
57
|
};
|
|
@@ -81,19 +81,19 @@ function rowDrag(opt) {
|
|
|
81
81
|
var treeModeOptions = getTreeModeOptions();
|
|
82
82
|
var rowDragOptions = getRowDragOptions();
|
|
83
83
|
var allowDragIntoRow = !!treeModeOptions && (rowDragOptions === null || rowDragOptions === void 0 ? void 0 : rowDragOptions.allowDragIntoRow);
|
|
84
|
-
var isLeave = !
|
|
84
|
+
var isLeave = !isPointerOnDropTarget(event, dropZoneTarget);
|
|
85
85
|
var overIndex = -1;
|
|
86
86
|
var direction = 'bottom';
|
|
87
87
|
if (!isLeave && dataSource.length > 0) {
|
|
88
|
-
var overDragItem = getDragRowItem(event
|
|
88
|
+
var overDragItem = getDragRowItem((0, _touchEventUtils.getEventTarget)(event), dropZoneTarget, dataSource);
|
|
89
89
|
if (overDragItem) {
|
|
90
90
|
var rowIndex = overDragItem.rowIndex,
|
|
91
91
|
cell = overDragItem.cell;
|
|
92
92
|
overIndex = rowIndex;
|
|
93
|
-
direction = getDirection(cell, event.clientY, allowDragIntoRow);
|
|
93
|
+
direction = getDirection(cell, (0, _touchEventUtils.getEventCoordinates)(event).clientY, allowDragIntoRow);
|
|
94
94
|
}
|
|
95
95
|
}
|
|
96
|
-
if (overIndex === -1 && dataSource.length > 0 && dropZoneTarget.contains(
|
|
96
|
+
if (overIndex === -1 && dataSource.length > 0 && dropZoneTarget.contains((0, _touchEventUtils.getEventTarget)(event))) {
|
|
97
97
|
overIndex = dataSource.length - 1;
|
|
98
98
|
direction = 'bottom';
|
|
99
99
|
}
|
|
@@ -169,9 +169,25 @@ function rowDrag(opt) {
|
|
|
169
169
|
}
|
|
170
170
|
};
|
|
171
171
|
var onMouseDown = function onMouseDown(event) {
|
|
172
|
+
handlePointerDown(event.nativeEvent);
|
|
173
|
+
};
|
|
174
|
+
// PC 单据移动端显示,兼容移动端的拖拽事件
|
|
175
|
+
var onTouchStart = function onTouchStart(event) {
|
|
176
|
+
// 尝试阻止触摸事件的默认行为,防止页面滚动
|
|
177
|
+
try {
|
|
178
|
+
if (event.cancelable) {
|
|
179
|
+
event.preventDefault();
|
|
180
|
+
}
|
|
181
|
+
} catch (error) {
|
|
182
|
+
// 忽略passive event listener错误
|
|
183
|
+
console.warn('preventDefault failed in passive touch event listener');
|
|
184
|
+
}
|
|
185
|
+
handlePointerDown(event.nativeEvent);
|
|
186
|
+
};
|
|
187
|
+
// 统一的拖拽处理函数
|
|
188
|
+
var handlePointerDown = function handlePointerDown(startEvent) {
|
|
172
189
|
var _a;
|
|
173
|
-
var
|
|
174
|
-
var startDataItem = getDragRowItem(mouseDownEvent.target, tableBody, dataSource);
|
|
190
|
+
var startDataItem = getDragRowItem((0, _touchEventUtils.getEventTarget)(startEvent), tableBody, dataSource);
|
|
175
191
|
if (!startDataItem || startDataItem.code !== rowDragColumn.code) return;
|
|
176
192
|
if ((_a = opt === null || opt === void 0 ? void 0 : opt.isDisabled) === null || _a === void 0 ? void 0 : _a.call(opt, startDataItem.row, startDataItem.rowIndex)) return;
|
|
177
193
|
var isValidDrag = false;
|
|
@@ -183,7 +199,7 @@ function rowDrag(opt) {
|
|
|
183
199
|
var intervalId = null;
|
|
184
200
|
var expandRowTimeoutId = null;
|
|
185
201
|
var expandRowCallBackList = [];
|
|
186
|
-
var updateScrollPosition = function updateScrollPosition(tableBody,
|
|
202
|
+
var updateScrollPosition = function updateScrollPosition(tableBody, moveEvent) {
|
|
187
203
|
if (opt === null || opt === void 0 ? void 0 : opt.suppressScrollMove) return;
|
|
188
204
|
if (timeoutId) {
|
|
189
205
|
clearTimeout(timeoutId);
|
|
@@ -192,7 +208,7 @@ function rowDrag(opt) {
|
|
|
192
208
|
clearInterval(intervalId);
|
|
193
209
|
}
|
|
194
210
|
if (!tableBody) return;
|
|
195
|
-
var moveOffset = getScrollMoveOffset(tableBody,
|
|
211
|
+
var moveOffset = getScrollMoveOffset(tableBody, moveEvent);
|
|
196
212
|
if (moveOffset === 0) {
|
|
197
213
|
return;
|
|
198
214
|
}
|
|
@@ -202,30 +218,53 @@ function rowDrag(opt) {
|
|
|
202
218
|
}, 50);
|
|
203
219
|
}, 500);
|
|
204
220
|
};
|
|
205
|
-
var handleDragStart = function handleDragStart(
|
|
221
|
+
var handleDragStart = function handleDragStart(event) {
|
|
206
222
|
var _a;
|
|
207
|
-
|
|
223
|
+
// 屏蔽默认事件,防止文本选择、框选等
|
|
224
|
+
try {
|
|
225
|
+
if (event.cancelable) {
|
|
226
|
+
event.preventDefault();
|
|
227
|
+
}
|
|
228
|
+
} catch (error) {
|
|
229
|
+
// 忽略passive event listener错误
|
|
230
|
+
console.warn('preventDefault failed in passive event listener');
|
|
231
|
+
}
|
|
232
|
+
// 禁用页面的文本选择
|
|
233
|
+
document.body.style.userSelect = 'none';
|
|
234
|
+
document.body.style.webkitUserSelect = 'none';
|
|
235
|
+
// 添加拖拽状态的CSS类,可以在样式中进一步控制
|
|
236
|
+
document.body.classList.add('row-dragging');
|
|
237
|
+
dragElement = createDragElement(event, tableBody); // 创建拖拽悬浮框
|
|
208
238
|
var isTreeTable = !!pipeline.getFeatureOptions('treeModeOptions');
|
|
209
239
|
dragLine = createDragLine(isTreeTable); // 创建拖拽插入指示线
|
|
210
240
|
var dragText = (opt === null || opt === void 0 ? void 0 : opt.rowDragText) ? (_a = opt === null || opt === void 0 ? void 0 : opt.rowDragText) === null || _a === void 0 ? void 0 : _a.call(opt, startDataItem.row, startDataItem.rowIndex) : "\u7B2C".concat(startDataItem.rowIndex, "\u884C\u5185\u5BB9");
|
|
211
241
|
setDragText(dragElement, dragText); // 设置悬浮框显示文本
|
|
212
242
|
artTable.classList.add((0, _classnames.default)(_styles.Classes.rowDragging));
|
|
213
243
|
rowDragApi.setDragStatus('start');
|
|
214
|
-
var dragEvent = createDropTargetEvent(currentDropZone,
|
|
244
|
+
var dragEvent = createDropTargetEvent(currentDropZone, event, startDataItem, currentDropZone);
|
|
215
245
|
onDragStart(dragEvent);
|
|
216
246
|
};
|
|
217
|
-
var handleDragMove = function handleDragMove(
|
|
247
|
+
var handleDragMove = function handleDragMove(moveEvent) {
|
|
218
248
|
var _a;
|
|
249
|
+
// 尝试屏蔽默认事件,在passive监听器中可能会失败
|
|
250
|
+
try {
|
|
251
|
+
if (moveEvent.cancelable) {
|
|
252
|
+
moveEvent.preventDefault();
|
|
253
|
+
}
|
|
254
|
+
} catch (error) {
|
|
255
|
+
// 忽略passive event listener错误
|
|
256
|
+
console.warn('preventDefault failed in passive event listener');
|
|
257
|
+
}
|
|
219
258
|
var isRTL = pipeline.ctx.direction === 'rtl';
|
|
220
|
-
positionDragElemment(dragElement,
|
|
259
|
+
positionDragElemment(dragElement, moveEvent, isRTL); // 更新拖拽悬浮框位置
|
|
221
260
|
rowDragApi.setDragStatus('dragging');
|
|
222
261
|
setDragElementIcon(dragElement, 'move');
|
|
223
262
|
var rowDropZones = rowDragApi.getRowDropZone();
|
|
224
263
|
var validDropZones = (0, _concat.default)(rowDropZones).call(rowDropZones, currentDropZone); // 可放置区域加上自身
|
|
225
264
|
var dropTarget = (0, _find.default)(validDropZones).call(validDropZones, function (zone) {
|
|
226
|
-
return
|
|
265
|
+
return isPointerOnDropTarget(moveEvent, zone.getContainer());
|
|
227
266
|
}) || null;
|
|
228
|
-
updateScrollPosition(dropTarget === null || dropTarget === void 0 ? void 0 : dropTarget.getContainer(),
|
|
267
|
+
updateScrollPosition(dropTarget === null || dropTarget === void 0 ? void 0 : dropTarget.getContainer(), moveEvent); // 拖拽到底时让滚动条可以滚动
|
|
229
268
|
if (dropTarget !== lastDropTarget) {
|
|
230
269
|
// 拖拽离开表格
|
|
231
270
|
if (lastDropTarget !== null && dropTarget === null) {
|
|
@@ -233,7 +272,7 @@ function rowDrag(opt) {
|
|
|
233
272
|
setDragElementIcon(dragElement, 'notAllowed');
|
|
234
273
|
hiddenDragLine(dragLine);
|
|
235
274
|
lastDropTarget.getContainer().classList.remove(_styles.Classes.rowDragNoData);
|
|
236
|
-
var dragEvent = createDropTargetEvent(lastDropTarget,
|
|
275
|
+
var dragEvent = createDropTargetEvent(lastDropTarget, moveEvent, startDataItem, currentDropZone);
|
|
237
276
|
lastDropTarget.onDragLeave(dragEvent);
|
|
238
277
|
}
|
|
239
278
|
}
|
|
@@ -253,7 +292,7 @@ function rowDrag(opt) {
|
|
|
253
292
|
dragLine.classList.remove(_styles.Classes.treeTableRowDragLine);
|
|
254
293
|
}
|
|
255
294
|
}
|
|
256
|
-
var _dragEvent = createDropTargetEvent(dropTarget,
|
|
295
|
+
var _dragEvent = createDropTargetEvent(dropTarget, moveEvent, startDataItem, currentDropZone);
|
|
257
296
|
dropTarget.onDragEnter(_dragEvent);
|
|
258
297
|
}
|
|
259
298
|
}
|
|
@@ -265,7 +304,7 @@ function rowDrag(opt) {
|
|
|
265
304
|
positionDragLine({
|
|
266
305
|
lineElement: dragLine,
|
|
267
306
|
dragZone: dropTarget,
|
|
268
|
-
event:
|
|
307
|
+
event: moveEvent,
|
|
269
308
|
isRTL: isRTL
|
|
270
309
|
});
|
|
271
310
|
}
|
|
@@ -282,7 +321,7 @@ function rowDrag(opt) {
|
|
|
282
321
|
onCollapse = treeModeOptions.onCollapse;
|
|
283
322
|
// 鼠标悬停所在的拖拽行信息
|
|
284
323
|
var dataSource = dropTarget.tableParams.getDataSource();
|
|
285
|
-
var dragItem = getDragRowItem(
|
|
324
|
+
var dragItem = getDragRowItem((0, _touchEventUtils.getEventTarget)(moveEvent), dropTarget.getContainer(), dataSource);
|
|
286
325
|
if (!dragItem) return;
|
|
287
326
|
var row = dragItem.row;
|
|
288
327
|
var _row$treeMetaKey = row[treeMetaKey],
|
|
@@ -297,15 +336,20 @@ function rowDrag(opt) {
|
|
|
297
336
|
}, 1000);
|
|
298
337
|
}
|
|
299
338
|
if (dropTarget.onDragging) {
|
|
300
|
-
var _dragEvent2 = createDropTargetEvent(dropTarget,
|
|
339
|
+
var _dragEvent2 = createDropTargetEvent(dropTarget, moveEvent, startDataItem, currentDropZone);
|
|
301
340
|
dropTarget.onDragging(_dragEvent2);
|
|
302
341
|
}
|
|
303
342
|
}
|
|
304
343
|
};
|
|
305
|
-
var handleDragStop = function handleDragStop(
|
|
344
|
+
var handleDragStop = function handleDragStop(endEvent) {
|
|
306
345
|
if (!isValidDrag) {
|
|
307
346
|
return;
|
|
308
347
|
}
|
|
348
|
+
// 恢复默认的文本选择功能
|
|
349
|
+
document.body.style.userSelect = '';
|
|
350
|
+
document.body.style.webkitUserSelect = '';
|
|
351
|
+
// 移除拖拽状态的CSS类
|
|
352
|
+
document.body.classList.remove('row-dragging');
|
|
309
353
|
removeElement(dragElement);
|
|
310
354
|
removeElement(dragLine);
|
|
311
355
|
artTable.classList.remove((0, _classnames.default)(_styles.Classes.rowDragging));
|
|
@@ -320,10 +364,10 @@ function rowDrag(opt) {
|
|
|
320
364
|
});
|
|
321
365
|
var validDropZones = (0, _concat.default)(rowDropZones).call(rowDropZones, currentDropZone);
|
|
322
366
|
var dropTarget = (0, _find.default)(validDropZones).call(validDropZones, function (zone) {
|
|
323
|
-
return
|
|
367
|
+
return isPointerOnDropTarget(endEvent, zone.getContainer());
|
|
324
368
|
});
|
|
325
369
|
if (dropTarget && dropTarget.onDragStop) {
|
|
326
|
-
var dragEvent = createDropTargetEvent(dropTarget,
|
|
370
|
+
var dragEvent = createDropTargetEvent(dropTarget, endEvent, startDataItem, currentDropZone);
|
|
327
371
|
dropTarget.onDragStop(dragEvent);
|
|
328
372
|
}
|
|
329
373
|
while (expandRowCallBackList.length > 0) {
|
|
@@ -331,32 +375,73 @@ function rowDrag(opt) {
|
|
|
331
375
|
callback();
|
|
332
376
|
}
|
|
333
377
|
};
|
|
334
|
-
|
|
335
|
-
var
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
var
|
|
339
|
-
|
|
340
|
-
|
|
341
|
-
|
|
342
|
-
|
|
343
|
-
|
|
344
|
-
|
|
345
|
-
|
|
346
|
-
|
|
347
|
-
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
|
|
351
|
-
|
|
352
|
-
|
|
353
|
-
|
|
354
|
-
|
|
355
|
-
|
|
356
|
-
|
|
357
|
-
|
|
358
|
-
|
|
359
|
-
|
|
378
|
+
// 判断是鼠标事件还是触摸事件,分别监听对应的移动和结束事件
|
|
379
|
+
var isTouchEvent = ('touches' in startEvent);
|
|
380
|
+
if (isTouchEvent) {
|
|
381
|
+
// 触摸事件处理
|
|
382
|
+
var touchmove$ = (0, _rxjs.fromEvent)(window, 'touchmove', {
|
|
383
|
+
passive: false
|
|
384
|
+
});
|
|
385
|
+
var touchend$ = (0, _rxjs.fromEvent)(window, 'touchend', {
|
|
386
|
+
passive: false
|
|
387
|
+
});
|
|
388
|
+
var touchDragMove$ = touchmove$.pipe((0, _filterInstanceProperty(_operators))(function (moveEvent) {
|
|
389
|
+
var coordinates = (0, _touchEventUtils.getEventCoordinates)(moveEvent);
|
|
390
|
+
var startCoordinates = (0, _touchEventUtils.getEventCoordinates)(startEvent);
|
|
391
|
+
var moveClientY = coordinates.clientY;
|
|
392
|
+
var startClientY = startCoordinates.clientY;
|
|
393
|
+
// 上下移动偏移量大于5才是有效的拖拽
|
|
394
|
+
if (Math.abs(moveClientY - startClientY) > 5) {
|
|
395
|
+
isValidDrag = true;
|
|
396
|
+
}
|
|
397
|
+
return isValidDrag;
|
|
398
|
+
}), (0, _mapInstanceProperty(_operators))(function (moveEvent) {
|
|
399
|
+
if (!isDragging) {
|
|
400
|
+
isDragging = true;
|
|
401
|
+
handleDragStart(startEvent);
|
|
402
|
+
handleDragMove(startEvent);
|
|
403
|
+
}
|
|
404
|
+
handleDragMove(moveEvent);
|
|
405
|
+
}), (0, _operators.takeUntil)(touchend$));
|
|
406
|
+
touchDragMove$.subscribe();
|
|
407
|
+
var touchDragEnd$ = touchend$.pipe((0, _mapInstanceProperty(_operators))(function (endEvent) {
|
|
408
|
+
handleDragStop(endEvent);
|
|
409
|
+
})).subscribe({
|
|
410
|
+
next: function next() {
|
|
411
|
+
touchDragEnd$.unsubscribe();
|
|
412
|
+
}
|
|
413
|
+
});
|
|
414
|
+
} else {
|
|
415
|
+
// 鼠标事件处理
|
|
416
|
+
var mousemove$ = (0, _rxjs.fromEvent)(window, 'mousemove');
|
|
417
|
+
var mouseup$ = (0, _rxjs.fromEvent)(window, 'mouseup');
|
|
418
|
+
var rowDragMove$ = mousemove$.pipe((0, _filterInstanceProperty(_operators))(function (moveEvent) {
|
|
419
|
+
var coordinates = (0, _touchEventUtils.getEventCoordinates)(moveEvent);
|
|
420
|
+
var startCoordinates = (0, _touchEventUtils.getEventCoordinates)(startEvent);
|
|
421
|
+
var moveClientY = coordinates.clientY;
|
|
422
|
+
var startClientY = startCoordinates.clientY;
|
|
423
|
+
// 上下移动偏移量大于5才是有效的拖拽
|
|
424
|
+
if (Math.abs(moveClientY - startClientY) > 5) {
|
|
425
|
+
isValidDrag = true;
|
|
426
|
+
}
|
|
427
|
+
return isValidDrag;
|
|
428
|
+
}), (0, _mapInstanceProperty(_operators))(function (moveEvent) {
|
|
429
|
+
if (!isDragging) {
|
|
430
|
+
isDragging = true;
|
|
431
|
+
handleDragStart(startEvent);
|
|
432
|
+
handleDragMove(startEvent);
|
|
433
|
+
}
|
|
434
|
+
handleDragMove(moveEvent);
|
|
435
|
+
}), (0, _operators.takeUntil)(mouseup$));
|
|
436
|
+
rowDragMove$.subscribe();
|
|
437
|
+
var rowDragEnd$ = mouseup$.pipe((0, _mapInstanceProperty(_operators))(function (endEvent) {
|
|
438
|
+
handleDragStop(endEvent);
|
|
439
|
+
})).subscribe({
|
|
440
|
+
next: function next() {
|
|
441
|
+
rowDragEnd$.unsubscribe();
|
|
442
|
+
}
|
|
443
|
+
});
|
|
444
|
+
}
|
|
360
445
|
};
|
|
361
446
|
var rowDragColumn = (opt === null || opt === void 0 ? void 0 : opt.rowDragColumn) || defaultRowDragColumn;
|
|
362
447
|
pipeline.setFeatureOptions('rowDragColumnKey', rowDragColumn.code);
|
|
@@ -365,7 +450,8 @@ function rowDrag(opt) {
|
|
|
365
450
|
nextColumns.unshift(rowDragColumn);
|
|
366
451
|
pipeline.columns(nextColumns);
|
|
367
452
|
pipeline.addTableProps({
|
|
368
|
-
onMouseDown: onMouseDown
|
|
453
|
+
onMouseDown: onMouseDown,
|
|
454
|
+
onTouchStart: onTouchStart
|
|
369
455
|
});
|
|
370
456
|
pipeline.appendRowPropsGetter(function (row, rowIndex) {
|
|
371
457
|
var _cx;
|
|
@@ -435,13 +521,13 @@ function isEleInFooter(target) {
|
|
|
435
521
|
}
|
|
436
522
|
return false;
|
|
437
523
|
}
|
|
438
|
-
function createDragElement(
|
|
524
|
+
function createDragElement(event, tableBody) {
|
|
439
525
|
var _context3, _context4;
|
|
440
526
|
var ELEMENT_TEMPLATE = (0, _concat.default)(_context3 = (0, _concat.default)(_context4 = "<div class='".concat(_styles.Classes.rowDragElement, "'>\n <span class='")).call(_context4, _styles.Classes.rowDragElementIcon, "'></span>\n <div class='")).call(_context3, _styles.Classes.rowDragElementLabel, "'></div>\n </div>");
|
|
441
527
|
var element = document.createElement('div');
|
|
442
528
|
element.innerHTML = ELEMENT_TEMPLATE;
|
|
443
529
|
var dragElement = element.firstChild;
|
|
444
|
-
var targetRow = findTargetRow(
|
|
530
|
+
var targetRow = findTargetRow((0, _touchEventUtils.getEventTarget)(event), tableBody);
|
|
445
531
|
if (targetRow) {
|
|
446
532
|
var rect = targetRow.getBoundingClientRect();
|
|
447
533
|
dragElement.style.height = rect.height + 'px';
|
|
@@ -486,9 +572,9 @@ function positionDragLine(_ref) {
|
|
|
486
572
|
lineElement.style.display = 'block';
|
|
487
573
|
}
|
|
488
574
|
// 鼠标悬停所在的拖拽行信息
|
|
489
|
-
var dragItem = getDragRowItem(event
|
|
575
|
+
var dragItem = getDragRowItem((0, _touchEventUtils.getEventTarget)(event), tableContainer, dataSource);
|
|
490
576
|
if (!dragItem) {
|
|
491
|
-
if (dataSource.length > 0 && tableContainer.contains(
|
|
577
|
+
if (dataSource.length > 0 && tableContainer.contains((0, _touchEventUtils.getEventTarget)(event))) {
|
|
492
578
|
var _context5, _context6;
|
|
493
579
|
var _rowIndex = dataSource.length - 1;
|
|
494
580
|
var _row = dataSource[_rowIndex];
|
|
@@ -517,7 +603,7 @@ function positionDragLine(_ref) {
|
|
|
517
603
|
rowIndex = dragItem.rowIndex,
|
|
518
604
|
row = dragItem.row;
|
|
519
605
|
var allowDragInto = isTreeTable && allowDragIntoRow;
|
|
520
|
-
var direction = getDirection(cell, event.clientY, allowDragInto);
|
|
606
|
+
var direction = getDirection(cell, (0, _touchEventUtils.getEventCoordinates)(event).clientY, allowDragInto);
|
|
521
607
|
var targetCell = isTreeTable ? tableContainer.querySelector((0, _concat.default)(_context7 = "tr[data-rowindex=\"".concat(rowIndex, "\"] .")).call(_context7, _styles.Classes.tableExtendCell)) : cell;
|
|
522
608
|
if (!targetCell) return;
|
|
523
609
|
var _getLinePosition2 = getLinePosition({
|
|
@@ -555,8 +641,9 @@ function positionDragElemment(element, event, isRTL) {
|
|
|
555
641
|
var browserWidth = (_b = (_a = document.body) === null || _a === void 0 ? void 0 : _a.clientWidth) !== null && _b !== void 0 ? _b : window.innerHeight || ((_c = document.documentElement) === null || _c === void 0 ? void 0 : _c.clientWidth) || 0;
|
|
556
642
|
var browserHeight = (_e = (_d = document.body) === null || _d === void 0 ? void 0 : _d.clientHeight) !== null && _e !== void 0 ? _e : window.innerHeight || ((_f = document.documentElement) === null || _f === void 0 ? void 0 : _f.clientHeight) || 0;
|
|
557
643
|
var offsetParentSize = getElementRectWithOffset(element.offsetParent);
|
|
558
|
-
var
|
|
559
|
-
|
|
644
|
+
var _getEventCoordinates = (0, _touchEventUtils.getEventCoordinates)(event),
|
|
645
|
+
clientX = _getEventCoordinates.clientX,
|
|
646
|
+
clientY = _getEventCoordinates.clientY;
|
|
560
647
|
var top = clientY - offsetParentSize.top - eleHeight / 2;
|
|
561
648
|
var left = clientX - offsetParentSize.left;
|
|
562
649
|
var right = Math.max(browserWidth - clientX, 0);
|
|
@@ -572,12 +659,11 @@ function positionDragElemment(element, event, isRTL) {
|
|
|
572
659
|
right = Math.max(browserWidth + windowScrollX - element.clientWidth, 0);
|
|
573
660
|
}
|
|
574
661
|
if (isRTL) {
|
|
575
|
-
|
|
576
|
-
|
|
577
|
-
|
|
662
|
+
element.style.right = right + 'px';
|
|
663
|
+
} else {
|
|
664
|
+
element.style.left = left + 'px';
|
|
578
665
|
}
|
|
579
|
-
element.style.
|
|
580
|
-
element.style.top = "".concat(top, "px");
|
|
666
|
+
element.style.top = top + 'px';
|
|
581
667
|
}
|
|
582
668
|
function getElementRectWithOffset(el) {
|
|
583
669
|
var offsetElementRect = el.getBoundingClientRect();
|
|
@@ -644,12 +730,13 @@ function setDragElementIcon(element, iconName) {
|
|
|
644
730
|
elementIcon.appendChild(iconElement);
|
|
645
731
|
}
|
|
646
732
|
function clearElementChildren(element) {
|
|
647
|
-
while (element
|
|
733
|
+
while (element === null || element === void 0 ? void 0 : element.firstChild) {
|
|
648
734
|
element.removeChild(element.firstChild);
|
|
649
735
|
}
|
|
650
736
|
}
|
|
651
|
-
function getScrollMoveOffset(tableBody,
|
|
652
|
-
var
|
|
737
|
+
function getScrollMoveOffset(tableBody, moveEvent) {
|
|
738
|
+
var _getEventCoordinates2 = (0, _touchEventUtils.getEventCoordinates)(moveEvent),
|
|
739
|
+
clientY = _getEventCoordinates2.clientY;
|
|
653
740
|
var tableBodyClientRect = tableBody.getBoundingClientRect();
|
|
654
741
|
var top = tableBodyClientRect.top,
|
|
655
742
|
height = tableBodyClientRect.height;
|
|
@@ -667,15 +754,19 @@ function setDragText(element, dragText) {
|
|
|
667
754
|
var stringNode = document.createTextNode(dragTextString);
|
|
668
755
|
elementIcon.appendChild(stringNode);
|
|
669
756
|
}
|
|
670
|
-
function
|
|
671
|
-
|
|
757
|
+
function isPointerOnDropTarget(pointerEvent, target) {
|
|
758
|
+
var eventTarget = (0, _touchEventUtils.getEventTarget)(pointerEvent);
|
|
759
|
+
return target.contains(eventTarget);
|
|
672
760
|
}
|
|
673
761
|
function createDropTargetEvent(dropZone, event, dragItem, startDropZone) {
|
|
674
762
|
var dropZoneTarget = dropZone.getContainer();
|
|
675
763
|
var startDropZoneTagret = startDropZone.getContainer();
|
|
676
764
|
var rect = dropZoneTarget.getBoundingClientRect();
|
|
677
|
-
var
|
|
678
|
-
|
|
765
|
+
var _getEventCoordinates3 = (0, _touchEventUtils.getEventCoordinates)(event),
|
|
766
|
+
clientX = _getEventCoordinates3.clientX,
|
|
767
|
+
clientY = _getEventCoordinates3.clientY;
|
|
768
|
+
var x = clientX - rect.left;
|
|
769
|
+
var y = clientY - rect.top;
|
|
679
770
|
var startDropZoneOptions = startDropZone.tableParams.getRowDragOptions();
|
|
680
771
|
var startCommonParams = startDropZoneOptions === null || startDropZoneOptions === void 0 ? void 0 : startDropZoneOptions.commonParams;
|
|
681
772
|
var targetEvent = {
|
|
@@ -732,10 +823,8 @@ var getLinePosition = function getLinePosition(_ref2) {
|
|
|
732
823
|
paddingRight = _getElementSize3.paddingRight;
|
|
733
824
|
var expandCellRect = cell.getBoundingClientRect();
|
|
734
825
|
var _row$treeMetaKey2 = row[treeMetaKey],
|
|
735
|
-
rowKey = _row$treeMetaKey2.rowKey,
|
|
736
826
|
depth = _row$treeMetaKey2.depth,
|
|
737
|
-
isLeaf = _row$treeMetaKey2.isLeaf
|
|
738
|
-
expanded = _row$treeMetaKey2.expanded;
|
|
827
|
+
isLeaf = _row$treeMetaKey2.isLeaf;
|
|
739
828
|
var addWidth = isLeaf ? iconWidth + iconGap : 0;
|
|
740
829
|
var indent = iconIndent + depth * indentSize + addWidth;
|
|
741
830
|
var x = expandCellRect.x,
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
export declare function getEventCoordinates(event: MouseEvent | TouchEvent): {
|
|
2
|
+
clientX: number;
|
|
3
|
+
clientY: number;
|
|
4
|
+
};
|
|
5
|
+
export declare function getEventTarget(event: MouseEvent | TouchEvent): EventTarget;
|
|
6
|
+
export declare function isTouchEvent(event: MouseEvent | TouchEvent): event is TouchEvent;
|
|
7
|
+
export declare function addPointerEventListeners(element: Element | Window | Document, handlers: {
|
|
8
|
+
onPointerMove: (e: MouseEvent | TouchEvent) => void;
|
|
9
|
+
onPointerUp: (e: MouseEvent | TouchEvent) => void;
|
|
10
|
+
}, isTouchStart: boolean): void;
|
|
11
|
+
export declare function removePointerEventListeners(element: Element | Window | Document, handlers: {
|
|
12
|
+
onPointerMove: (e: MouseEvent | TouchEvent) => void;
|
|
13
|
+
onPointerUp: (e: MouseEvent | TouchEvent) => void;
|
|
14
|
+
}, isTouchStart: boolean): void;
|
|
15
|
+
export declare function hasMovedEnough(startX: number, startY: number, endX: number, endY: number, threshold?: number): boolean;
|
|
@@ -0,0 +1,76 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.addPointerEventListeners = addPointerEventListeners;
|
|
7
|
+
exports.getEventCoordinates = getEventCoordinates;
|
|
8
|
+
exports.getEventTarget = getEventTarget;
|
|
9
|
+
exports.hasMovedEnough = hasMovedEnough;
|
|
10
|
+
exports.isTouchEvent = isTouchEvent;
|
|
11
|
+
exports.removePointerEventListeners = removePointerEventListeners;
|
|
12
|
+
// 统一获取事件坐标的函数
|
|
13
|
+
function getEventCoordinates(event) {
|
|
14
|
+
if ('touches' in event && event.touches.length > 0) {
|
|
15
|
+
return {
|
|
16
|
+
clientX: event.touches[0].clientX,
|
|
17
|
+
clientY: event.touches[0].clientY
|
|
18
|
+
};
|
|
19
|
+
} else if ('changedTouches' in event && event.changedTouches.length > 0) {
|
|
20
|
+
return {
|
|
21
|
+
clientX: event.changedTouches[0].clientX,
|
|
22
|
+
clientY: event.changedTouches[0].clientY
|
|
23
|
+
};
|
|
24
|
+
} else {
|
|
25
|
+
return {
|
|
26
|
+
clientX: event.clientX,
|
|
27
|
+
clientY: event.clientY
|
|
28
|
+
};
|
|
29
|
+
}
|
|
30
|
+
}
|
|
31
|
+
// 获取事件目标元素
|
|
32
|
+
function getEventTarget(event) {
|
|
33
|
+
if ('touches' in event && event.touches.length > 0) {
|
|
34
|
+
return document.elementFromPoint(event.touches[0].clientX, event.touches[0].clientY);
|
|
35
|
+
}
|
|
36
|
+
// 处理touchend事件,此时touches为空,需要使用changedTouches
|
|
37
|
+
if ('changedTouches' in event && event.changedTouches.length > 0) {
|
|
38
|
+
return document.elementFromPoint(event.changedTouches[0].clientX, event.changedTouches[0].clientY);
|
|
39
|
+
}
|
|
40
|
+
return event.target;
|
|
41
|
+
}
|
|
42
|
+
// 判断是否为触摸事件
|
|
43
|
+
function isTouchEvent(event) {
|
|
44
|
+
return 'touches' in event;
|
|
45
|
+
}
|
|
46
|
+
// 为元素添加统一的指针事件监听器
|
|
47
|
+
function addPointerEventListeners(element, handlers, isTouchStart) {
|
|
48
|
+
if (isTouchStart) {
|
|
49
|
+
element.addEventListener('touchmove', handlers.onPointerMove, {
|
|
50
|
+
passive: false
|
|
51
|
+
});
|
|
52
|
+
element.addEventListener('touchend', handlers.onPointerUp, {
|
|
53
|
+
passive: false
|
|
54
|
+
});
|
|
55
|
+
} else {
|
|
56
|
+
element.addEventListener('mousemove', handlers.onPointerMove);
|
|
57
|
+
element.addEventListener('mouseup', handlers.onPointerUp);
|
|
58
|
+
}
|
|
59
|
+
}
|
|
60
|
+
// 移除统一的指针事件监听器
|
|
61
|
+
function removePointerEventListeners(element, handlers, isTouchStart) {
|
|
62
|
+
if (isTouchStart) {
|
|
63
|
+
element.removeEventListener('touchmove', handlers.onPointerMove);
|
|
64
|
+
element.removeEventListener('touchend', handlers.onPointerUp);
|
|
65
|
+
} else {
|
|
66
|
+
element.removeEventListener('mousemove', handlers.onPointerMove);
|
|
67
|
+
element.removeEventListener('mouseup', handlers.onPointerUp);
|
|
68
|
+
}
|
|
69
|
+
}
|
|
70
|
+
// 检查是否移动了足够的距离(用于区分点击和拖拽)
|
|
71
|
+
function hasMovedEnough(startX, startY, endX, endY) {
|
|
72
|
+
var threshold = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 5;
|
|
73
|
+
var xDiff = endX - startX;
|
|
74
|
+
var yDiff = endY - startY;
|
|
75
|
+
return Math.sqrt(xDiff * xDiff + yDiff * yDiff) > threshold;
|
|
76
|
+
}
|