@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.
@@ -1,6 +1,6 @@
1
1
  /*!
2
2
  *
3
- * @kdcloudjs/table v1.2.2-canary.12
3
+ * @kdcloudjs/table v1.2.2-canary.13
4
4
  *
5
5
  * Copyright 2020-present, Kingdee, Inc.
6
6
  * All rights reserved.
@@ -5749,6 +5749,7 @@ __webpack_require__.r(__webpack_exports__);
5749
5749
  /* harmony import */ var core_js_modules_web_dom_collections_for_each_js__WEBPACK_IMPORTED_MODULE_9___default = /*#__PURE__*/__webpack_require__.n(core_js_modules_web_dom_collections_for_each_js__WEBPACK_IMPORTED_MODULE_9__);
5750
5750
  /* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ../../utils */ "./components/table/utils/index.tsx");
5751
5751
  /* harmony import */ var _autoFill__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ./autoFill */ "./components/table/pipeline/features/autoFill.tsx");
5752
+ /* harmony import */ var _utils_touchEventUtils__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! ./utils/touchEventUtils */ "./components/table/pipeline/features/utils/touchEventUtils.tsx");
5752
5753
 
5753
5754
 
5754
5755
 
@@ -5763,6 +5764,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
5763
5764
 
5764
5765
 
5765
5766
 
5767
+
5766
5768
  var stateKey = 'columnDrag';
5767
5769
  var SCROLL_SIZE = 30;
5768
5770
  function disableSelect(event) {
@@ -5821,255 +5823,240 @@ function columnDrag() {
5821
5823
  style: style
5822
5824
  });
5823
5825
  },
5824
- headerCellProps: Object(_utils__WEBPACK_IMPORTED_MODULE_10__["mergeCellProps"])(col.headerCellProps, {
5825
- onMouseDown: !isLeaf || path.length > 1 ? undefined : function (e) {
5826
+ headerCellProps: Object(_utils__WEBPACK_IMPORTED_MODULE_10__["mergeCellProps"])(col.headerCellProps, _objectSpread(_objectSpread({}, isLeaf && path.length === 1 ? {
5827
+ onMouseDown: function onMouseDown(e) {
5826
5828
  if (e.button !== 0 || !e.currentTarget.contains(e.target)) {
5827
5829
  return;
5828
5830
  }
5829
- window.addEventListener('selectstart', disableSelect);
5830
- // const cx = e.clientX
5831
- // const width = col.width
5832
- // const a = startIndex
5833
- // const b = endIndex
5834
- // const newColumnDragData = [...columnDragData]
5835
- // let newColumn = [...columns]
5836
- // let newStartIndex = startIndex
5837
- // let endIdx = endIndex
5838
- var columnMoved = false;
5839
- var columns = pipeline.getColumns();
5840
- var _pipeline$getStateAtK2 = pipeline.getStateAtKey(stateKey, {}),
5841
- cloumnsTranslateData = _pipeline$getStateAtK2.cloumnsTranslateData;
5842
- var cloumnsSortData = {};
5843
- columns.forEach(function (item, index) {
5844
- cloumnsSortData[item.code] = index;
5845
- });
5846
- var currentTarget = e.currentTarget;
5847
- var rect = e.currentTarget.parentElement.getClientRects()[0];
5848
- var startX = direction === 'rtl' ? rect.right : rect.left;
5849
- var mouseDownClientX = e.clientX;
5850
- var mouseDownClientY = e.clientY;
5851
- var moveData = [];
5852
- var allColumns = Object(_utils__WEBPACK_IMPORTED_MODULE_10__["collectNodes"])(columns);
5853
- var tableBodyClientRect = tableBody.getBoundingClientRect();
5854
- var startScrollLeft = pipeline.ref.current.domHelper.virtual.scrollLeft;
5855
- var updateScrollPosition = function updateScrollPosition(client) {
5856
- var clientX = client.clientX;
5857
- var left = tableBodyClientRect.left,
5858
- width = tableBodyClientRect.width;
5859
- if (clientX + SCROLL_SIZE >= left + width) {
5860
- pipeline.ref.current.domHelper.virtual.scrollLeft += SCROLL_SIZE;
5861
- }
5862
- if (clientX - SCROLL_SIZE <= left) {
5863
- pipeline.ref.current.domHelper.virtual.scrollLeft -= SCROLL_SIZE;
5864
- }
5865
- };
5866
- function handleMouseMove(e) {
5867
- var client = {
5868
- clientX: e.clientX,
5869
- clientY: e.clientY
5870
- };
5871
- var scrollDistance = pipeline.ref.current.domHelper.virtual.scrollLeft - startScrollLeft;
5872
- var startPosition = startX - scrollDistance; // 表头最左边起点
5873
- var offsetDistance = direction === 'rtl' ? startPosition - e.clientX : e.clientX - startPosition;
5874
- updateScrollPosition(client);
5875
- if (offsetDistance < 20) {
5876
- return;
5877
- } else {
5878
- e.stopPropagation();
5879
- }
5880
- document.body.style.userSelect = 'none';
5881
- currentTarget.style.cursor = 'move';
5882
-
5883
- // 循环计算每一个的位置
5884
- // if (startIndex !== replaceIndex) {
5885
- // const optionColumn = columns[startIndex]
5886
- // const move = startIndex > replaceIndex ? 1 : -1
5887
- // let index = Math.min(startIndex, replaceIndex)
5888
- // while (index < Math.max(startIndex, replaceIndex)) {
5889
- // const code = columns[index].code
5890
- // cloumnsTranslateData[code] += move * optionColumn.width
5891
- // cloumnsTranslateData[optionColumn.code] -= move * optionColumn.width
5892
- // index += move
5893
- // }
5894
- // }
5895
-
5896
- // const opColumn = columns[startIndex]
5897
- // let index = Math.min(startIndex, replaceIndex)
5898
- // while (index <= Math.max(startIndex, replaceIndex)) {
5899
- // const code = columns[index].code
5900
- // if (index !== startIndex && index !== replaceIndex) {
5901
- // cloumnsTranslateData[code] += opColumn.width * (index > startIndex ? -1 : 1)
5902
- // cloumnsTranslateData[opColumn.code] += columns[index].width * (index < startIndex ? -1 : 1)
5903
- // }
5904
- // index++
5905
- // }
5906
-
5907
- // 重置位置信息
5908
- cloumnsTranslateData = {};
5909
- allColumns.forEach(function (item) {
5910
- cloumnsTranslateData[item.code] = 0;
5911
- });
5831
+ handlePointerDown(e.nativeEvent, false, e.currentTarget);
5832
+ },
5833
+ onTouchStart: function onTouchStart(e) {
5834
+ // 阻止触摸事件的默认行为
5835
+ if (e.cancelable) {
5836
+ e.preventDefault();
5837
+ }
5838
+ handlePointerDown(e.nativeEvent, true, e.currentTarget);
5839
+ }
5840
+ } : {}), {}, {
5841
+ style: style
5842
+ }))
5843
+ });
5912
5844
 
5913
- // 计算平移位置
5914
- var replaceIndex = 0;
5915
- var totalWitdth = getColumnWidth(columns[replaceIndex]);
5916
- while (totalWitdth < offsetDistance && replaceIndex < columns.length - 1) {
5917
- replaceIndex++;
5918
- totalWitdth += getColumnWidth(columns[replaceIndex]);
5919
- }
5845
+ // 统一的拖拽处理函数
5846
+ function handlePointerDown(startEvent, isTouch, currentTarget) {
5847
+ var _currentTarget$parent;
5848
+ window.addEventListener('selectstart', disableSelect);
5849
+ var columnMoved = false;
5850
+ var columns = pipeline.getColumns();
5851
+ var _pipeline$getStateAtK2 = pipeline.getStateAtKey(stateKey, {}),
5852
+ cloumnsTranslateData = _pipeline$getStateAtK2.cloumnsTranslateData;
5853
+ var cloumnsSortData = {};
5854
+ columns.forEach(function (item, index) {
5855
+ cloumnsSortData[item.code] = index;
5856
+ });
5857
+ var rect = (_currentTarget$parent = currentTarget.parentElement) === null || _currentTarget$parent === void 0 ? void 0 : _currentTarget$parent.getClientRects()[0];
5858
+ if (!rect) return;
5859
+ var startX = direction === 'rtl' ? rect.right : rect.left;
5860
+ var startCoordinates = Object(_utils_touchEventUtils__WEBPACK_IMPORTED_MODULE_12__["getEventCoordinates"])(startEvent);
5861
+ var mouseDownClientX = startCoordinates.clientX;
5862
+ var mouseDownClientY = startCoordinates.clientY;
5863
+ var moveData = [];
5864
+ var allColumns = Object(_utils__WEBPACK_IMPORTED_MODULE_10__["collectNodes"])(columns);
5865
+ var tableBodyClientRect = tableBody.getBoundingClientRect();
5866
+ var startScrollLeft = pipeline.ref.current.domHelper.virtual.scrollLeft;
5867
+ var updateScrollPosition = function updateScrollPosition(client) {
5868
+ var clientX = client.clientX;
5869
+ var left = tableBodyClientRect.left,
5870
+ width = tableBodyClientRect.width;
5871
+ if (clientX + SCROLL_SIZE >= left + width) {
5872
+ pipeline.ref.current.domHelper.virtual.scrollLeft += SCROLL_SIZE;
5873
+ }
5874
+ if (clientX - SCROLL_SIZE <= left) {
5875
+ pipeline.ref.current.domHelper.virtual.scrollLeft -= SCROLL_SIZE;
5876
+ }
5877
+ };
5878
+ function handlePointerMove(e) {
5879
+ // 触摸事件需要阻止默认行为,防止页面滚动
5880
+ if (isTouch && e.cancelable) {
5881
+ e.preventDefault();
5882
+ }
5883
+ var coordinates = Object(_utils_touchEventUtils__WEBPACK_IMPORTED_MODULE_12__["getEventCoordinates"])(e);
5884
+ var client = {
5885
+ clientX: coordinates.clientX,
5886
+ clientY: coordinates.clientY
5887
+ };
5888
+ var scrollDistance = pipeline.ref.current.domHelper.virtual.scrollLeft - startScrollLeft;
5889
+ var startPosition = startX - scrollDistance; // 表头最左边起点
5890
+ var offsetDistance = direction === 'rtl' ? startPosition - coordinates.clientX : coordinates.clientX - startPosition;
5891
+ updateScrollPosition(client);
5892
+ if (offsetDistance < 20) {
5893
+ return;
5894
+ } else {
5895
+ e.stopPropagation();
5896
+ }
5897
+ document.body.style.userSelect = 'none';
5898
+ currentTarget.style.cursor = 'move';
5920
5899
 
5921
- // 需要取最新startIndex, 不能直接用makeRecursiveMapper提供的startIndex(因为map时还没添加选择列、充满列等后面use添加的列)
5922
- var startIndex;
5923
- columns.forEach(function (column, index) {
5924
- if (column.code === col.code) {
5925
- startIndex = index;
5926
- }
5927
- });
5928
- var optionColumn = columns[startIndex];
5929
- var index = replaceIndex;
5930
- if (startIndex > replaceIndex) {
5931
- // 左移
5932
- while (index < startIndex) {
5933
- var _columns$index = columns[index],
5934
- code = _columns$index.code,
5935
- lock = _columns$index.lock,
5936
- width = _columns$index.width,
5937
- children = _columns$index.children;
5938
- if (enableMove({
5939
- code: code,
5940
- lock: lock
5941
- })) {
5942
- cloumnsTranslateData[code] += _adjustTranslation(optionColumn.width);
5943
- if (Object(_utils__WEBPACK_IMPORTED_MODULE_10__["isLeafNode"])(columns[index])) {
5944
- cloumnsTranslateData[optionColumn.code] -= _adjustTranslation(width);
5945
- } else {
5946
- cloumnsTranslateData[optionColumn.code] -= _adjustTranslation(getColumnWidth(columns[index]));
5947
- moveAllChildren(children, cloumnsTranslateData, _adjustTranslation(optionColumn.width));
5948
- }
5949
- columnMoved = true;
5950
- }
5951
- index++;
5952
- }
5953
- } else if (startIndex < replaceIndex) {
5954
- // 右移
5955
- while (startIndex < index) {
5956
- var _columns$index2 = columns[index],
5957
- _code = _columns$index2.code,
5958
- _lock = _columns$index2.lock,
5959
- _width = _columns$index2.width,
5960
- _children = _columns$index2.children;
5961
- if (enableMove({
5962
- code: _code,
5963
- lock: _lock
5964
- })) {
5965
- cloumnsTranslateData[_code] -= _adjustTranslation(optionColumn.width);
5966
- if (Object(_utils__WEBPACK_IMPORTED_MODULE_10__["isLeafNode"])(columns[index])) {
5967
- cloumnsTranslateData[optionColumn.code] += _adjustTranslation(_width);
5968
- } else {
5969
- cloumnsTranslateData[optionColumn.code] += _adjustTranslation(getColumnWidth(columns[index]));
5970
- moveAllChildren(_children, cloumnsTranslateData, _adjustTranslation(optionColumn.width), true);
5971
- }
5972
- columnMoved = true;
5973
- }
5974
- index--;
5900
+ // 重置位置信息
5901
+ cloumnsTranslateData = {};
5902
+ allColumns.forEach(function (item) {
5903
+ cloumnsTranslateData[item.code] = 0;
5904
+ });
5905
+
5906
+ // 计算平移位置
5907
+ var replaceIndex = 0;
5908
+ var totalWitdth = getColumnWidth(columns[replaceIndex]);
5909
+ while (totalWitdth < offsetDistance && replaceIndex < columns.length - 1) {
5910
+ replaceIndex++;
5911
+ totalWitdth += getColumnWidth(columns[replaceIndex]);
5912
+ }
5913
+
5914
+ // 需要取最新startIndex, 不能直接用makeRecursiveMapper提供的startIndex(因为map时还没添加选择列、充满列等后面use添加的列)
5915
+ var startIndex;
5916
+ columns.forEach(function (column, index) {
5917
+ if (column.code === col.code) {
5918
+ startIndex = index;
5919
+ }
5920
+ });
5921
+ var optionColumn = columns[startIndex];
5922
+ var index = replaceIndex;
5923
+ if (startIndex > replaceIndex) {
5924
+ // 左移
5925
+ while (index < startIndex) {
5926
+ var _columns$index = columns[index],
5927
+ code = _columns$index.code,
5928
+ lock = _columns$index.lock,
5929
+ width = _columns$index.width,
5930
+ children = _columns$index.children;
5931
+ if (enableMove({
5932
+ code: code,
5933
+ lock: lock
5934
+ })) {
5935
+ cloumnsTranslateData[code] += _adjustTranslation(optionColumn.width);
5936
+ if (Object(_utils__WEBPACK_IMPORTED_MODULE_10__["isLeafNode"])(columns[index])) {
5937
+ cloumnsTranslateData[optionColumn.code] -= _adjustTranslation(width);
5938
+ } else {
5939
+ cloumnsTranslateData[optionColumn.code] -= _adjustTranslation(getColumnWidth(columns[index]));
5940
+ moveAllChildren(children, cloumnsTranslateData, _adjustTranslation(optionColumn.width));
5975
5941
  }
5942
+ columnMoved = true;
5976
5943
  }
5977
- window.requestAnimationFrame(function () {
5978
- pipeline.setStateAtKey(stateKey, {
5979
- cloumnsTranslateData: cloumnsTranslateData
5980
- });
5981
- moveData = [startIndex, replaceIndex];
5982
- });
5944
+ index++;
5983
5945
  }
5984
- function handleMouseUp(e) {
5985
- document.body.removeEventListener('mousemove', handleMouseMove);
5986
- document.body.removeEventListener('mouseup', handleMouseUp);
5987
- window.removeEventListener('selectstart', disableSelect);
5988
- if (_isMoveWhenClicking(mouseDownClientX, mouseDownClientY, e.clientX, e.clientY)) {
5989
- e.stopPropagation(); // 存在移动就阻止冒泡
5990
- currentTarget.addEventListener('click', stopClickPropagation); // 阻止列头点击事件,防止拖动后触发列头过滤事件
5946
+ } else if (startIndex < replaceIndex) {
5947
+ // 右移
5948
+ while (startIndex < index) {
5949
+ var _columns$index2 = columns[index],
5950
+ _code = _columns$index2.code,
5951
+ _lock = _columns$index2.lock,
5952
+ _width = _columns$index2.width,
5953
+ _children = _columns$index2.children;
5954
+ if (enableMove({
5955
+ code: _code,
5956
+ lock: _lock
5957
+ })) {
5958
+ cloumnsTranslateData[_code] -= _adjustTranslation(optionColumn.width);
5959
+ if (Object(_utils__WEBPACK_IMPORTED_MODULE_10__["isLeafNode"])(columns[index])) {
5960
+ cloumnsTranslateData[optionColumn.code] += _adjustTranslation(_width);
5961
+ } else {
5962
+ cloumnsTranslateData[optionColumn.code] += _adjustTranslation(getColumnWidth(columns[index]));
5963
+ moveAllChildren(_children, cloumnsTranslateData, _adjustTranslation(optionColumn.width), true);
5964
+ }
5965
+ columnMoved = true;
5991
5966
  }
5967
+ index--;
5968
+ }
5969
+ }
5970
+ window.requestAnimationFrame(function () {
5971
+ pipeline.setStateAtKey(stateKey, {
5972
+ cloumnsTranslateData: cloumnsTranslateData
5973
+ });
5974
+ moveData = [startIndex, replaceIndex];
5975
+ });
5976
+ }
5977
+ function handlePointerUp(e) {
5978
+ Object(_utils_touchEventUtils__WEBPACK_IMPORTED_MODULE_12__["removePointerEventListeners"])(document.body, {
5979
+ onPointerMove: handlePointerMove,
5980
+ onPointerUp: handlePointerUp
5981
+ }, isTouch);
5982
+ window.removeEventListener('selectstart', disableSelect);
5983
+ var endCoordinates = Object(_utils_touchEventUtils__WEBPACK_IMPORTED_MODULE_12__["getEventCoordinates"])(e);
5984
+ if (Object(_utils_touchEventUtils__WEBPACK_IMPORTED_MODULE_12__["hasMovedEnough"])(mouseDownClientX, mouseDownClientY, endCoordinates.clientX, endCoordinates.clientY)) {
5985
+ e.stopPropagation(); // 存在移动就阻止冒泡
5986
+ currentTarget.addEventListener('click', stopClickPropagation); // 阻止列头点击事件,防止拖动后触发列头过滤事件
5987
+ }
5992
5988
 
5993
- window.requestAnimationFrame(function () {
5994
- // 取消阻止列头点击事件
5995
- currentTarget.removeEventListener('click', stopClickPropagation);
5996
- currentTarget = null;
5997
- var _moveData = moveData,
5998
- _moveData2 = _babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_4___default()(_moveData, 2),
5999
- startIndex = _moveData2[0],
6000
- replaceIndex = _moveData2[1];
6001
- var optionColumn = columns[startIndex];
6002
- // const move = startIndex > replaceIndex ? 1 : -1
6003
- // let index = Math.min(startIndex, replaceIndex)
6004
- // while (index < Math.max(startIndex, replaceIndex) && index > 0) {
6005
- // const code = columns[index].code
6006
- // cloumnsSortData[optionColumn.code] -= move
6007
- // cloumnsSortData[code] += move
6008
- // index += move
6009
- // }
6010
- var index = replaceIndex;
6011
- if (startIndex > replaceIndex) {
6012
- // 左移
6013
- while (index < startIndex) {
6014
- var _columns$index3 = columns[index],
6015
- code = _columns$index3.code,
6016
- lock = _columns$index3.lock;
6017
- if (enableMove({
6018
- code: code,
6019
- lock: lock
6020
- })) {
6021
- cloumnsSortData[code] += 1;
6022
- cloumnsSortData[optionColumn.code] -= 1;
6023
- columnMoved = true;
6024
- }
6025
- index++;
6026
- }
6027
- } else if (startIndex < replaceIndex) {
6028
- // 右移
6029
- while (index > startIndex) {
6030
- var _columns$index4 = columns[index],
6031
- _code2 = _columns$index4.code,
6032
- _lock2 = _columns$index4.lock;
6033
- if (enableMove({
6034
- code: _code2,
6035
- lock: _lock2
6036
- })) {
6037
- cloumnsSortData[_code2] -= 1;
6038
- cloumnsSortData[optionColumn.code] += 1;
6039
- columnMoved = true;
6040
- }
6041
- index--;
6042
- }
5989
+ window.requestAnimationFrame(function () {
5990
+ // 取消阻止列头点击事件
5991
+ currentTarget.removeEventListener('click', stopClickPropagation);
5992
+ currentTarget = null;
5993
+ var _moveData = moveData,
5994
+ _moveData2 = _babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_4___default()(_moveData, 2),
5995
+ startIndex = _moveData2[0],
5996
+ replaceIndex = _moveData2[1];
5997
+ var optionColumn = columns[startIndex];
5998
+ var index = replaceIndex;
5999
+ if (startIndex > replaceIndex) {
6000
+ // 左移
6001
+ while (index < startIndex) {
6002
+ var _columns$index3 = columns[index],
6003
+ code = _columns$index3.code,
6004
+ lock = _columns$index3.lock;
6005
+ if (enableMove({
6006
+ code: code,
6007
+ lock: lock
6008
+ })) {
6009
+ cloumnsSortData[code] += 1;
6010
+ cloumnsSortData[optionColumn.code] -= 1;
6011
+ columnMoved = true;
6043
6012
  }
6044
- var onColumnDragStopped = opts.onColumnDragStopped;
6045
- // 拖拽结束返回列顺序
6046
- if (onColumnDragStopped) {
6047
- var isRowDragColumn = function isRowDragColumn(code) {
6048
- var rowDragColumnKey = pipeline.getFeatureOptions('rowDragColumnKey');
6049
- return code === rowDragColumnKey;
6050
- };
6051
- var newColumns = sortColumns(columns, cloumnsSortData).filter(function (column) {
6052
- return column.code !== _autoFill__WEBPACK_IMPORTED_MODULE_11__["FILL_COLUMN_CODE"] && !isRowDragColumn(column.code) && !Object(_utils__WEBPACK_IMPORTED_MODULE_10__["isSelectColumn"])(column);
6053
- });
6054
- // TODO drag需要在resize之后use,否则这里返回的列对应的宽度不是拖拽后的
6055
- onColumnDragStopped(columnMoved, newColumns);
6013
+ index++;
6014
+ }
6015
+ } else if (startIndex < replaceIndex) {
6016
+ // 右移
6017
+ while (index > startIndex) {
6018
+ var _columns$index4 = columns[index],
6019
+ _code2 = _columns$index4.code,
6020
+ _lock2 = _columns$index4.lock;
6021
+ if (enableMove({
6022
+ code: _code2,
6023
+ lock: _lock2
6024
+ })) {
6025
+ cloumnsSortData[_code2] -= 1;
6026
+ cloumnsSortData[optionColumn.code] += 1;
6027
+ columnMoved = true;
6056
6028
  }
6057
- pipeline.setStateAtKey(stateKey, {
6058
- cloumnsTranslateData: null
6059
- });
6029
+ index--;
6030
+ }
6031
+ }
6032
+ var onColumnDragStopped = opts.onColumnDragStopped;
6033
+ // 拖拽结束返回列顺序
6034
+ if (onColumnDragStopped) {
6035
+ var isRowDragColumn = function isRowDragColumn(code) {
6036
+ var rowDragColumnKey = pipeline.getFeatureOptions('rowDragColumnKey');
6037
+ return code === rowDragColumnKey;
6038
+ };
6039
+ var newColumns = sortColumns(columns, cloumnsSortData).filter(function (column) {
6040
+ return column.code !== _autoFill__WEBPACK_IMPORTED_MODULE_11__["FILL_COLUMN_CODE"] && !isRowDragColumn(column.code) && !Object(_utils__WEBPACK_IMPORTED_MODULE_10__["isSelectColumn"])(column);
6060
6041
  });
6061
- document.body.style.userSelect = '';
6062
- currentTarget.style.opacity = '';
6063
- currentTarget.style.cursor = '';
6042
+ // TODO drag需要在resize之后use,否则这里返回的列对应的宽度不是拖拽后的
6043
+ onColumnDragStopped(columnMoved, newColumns);
6064
6044
  }
6065
- var onColumnDragStart = opts.onColumnDragStart;
6066
- onColumnDragStart && onColumnDragStart(col);
6067
- document.body.addEventListener('mousemove', handleMouseMove);
6068
- document.body.addEventListener('mouseup', handleMouseUp);
6069
- },
6070
- style: style
6071
- })
6072
- });
6045
+ pipeline.setStateAtKey(stateKey, {
6046
+ cloumnsTranslateData: null
6047
+ });
6048
+ });
6049
+ document.body.style.userSelect = '';
6050
+ currentTarget.style.opacity = '';
6051
+ currentTarget.style.cursor = '';
6052
+ }
6053
+ var onColumnDragStart = opts.onColumnDragStart;
6054
+ onColumnDragStart && onColumnDragStart(col);
6055
+ Object(_utils_touchEventUtils__WEBPACK_IMPORTED_MODULE_12__["addPointerEventListeners"])(document.body, {
6056
+ onPointerMove: handlePointerMove,
6057
+ onPointerUp: handlePointerUp
6058
+ }, isTouch);
6059
+ }
6073
6060
  }));
6074
6061
  };
6075
6062
  }
@@ -6098,15 +6085,6 @@ function moveAllChildren(cols, cloumnsTranslateData, width, isMinus) {
6098
6085
  }
6099
6086
  });
6100
6087
  }
6101
- function _isMoveWhenClicking(mouseDownClientX, mouseDownClientY, mouseUpClientX, mouseUpClientY) {
6102
- var xDiff = mouseUpClientX - mouseDownClientX;
6103
- var yDiff = mouseUpClientY - mouseDownClientY;
6104
- // 鼠标点按和松开的偏移量大于5px,认为存在移动
6105
- if (Math.sqrt(xDiff * xDiff + yDiff * yDiff) > 5) {
6106
- return true;
6107
- }
6108
- return false;
6109
- }
6110
6088
 
6111
6089
  /***/ }),
6112
6090
 
@@ -6593,6 +6571,7 @@ __webpack_require__.r(__webpack_exports__);
6593
6571
  /* harmony import */ var _internals__WEBPACK_IMPORTED_MODULE_19__ = __webpack_require__(/*! ../../internals */ "./components/table/internals.ts");
6594
6572
  /* harmony import */ var _base_styles__WEBPACK_IMPORTED_MODULE_20__ = __webpack_require__(/*! ../../base/styles */ "./components/table/base/styles.ts");
6595
6573
  /* harmony import */ var _base_utils__WEBPACK_IMPORTED_MODULE_21__ = __webpack_require__(/*! ../../base/utils */ "./components/table/base/utils.tsx");
6574
+ /* harmony import */ var _utils_touchEventUtils__WEBPACK_IMPORTED_MODULE_22__ = __webpack_require__(/*! ./utils/touchEventUtils */ "./components/table/pipeline/features/utils/touchEventUtils.tsx");
6596
6575
 
6597
6576
 
6598
6577
 
@@ -6618,6 +6597,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
6618
6597
 
6619
6598
 
6620
6599
 
6600
+
6621
6601
  var TableHeaderCellResize = styled_components__WEBPACK_IMPORTED_MODULE_15__["default"].div(_templateObject || (_templateObject = _babel_runtime_helpers_taggedTemplateLiteral__WEBPACK_IMPORTED_MODULE_5___default()(["\n position: absolute;\n top: 0;\n ", ": -5px;\n height: 100%;\n width: 10px;\n cursor: ew-resize;\n display: flex;\n flex-direction: column;\n align-items: center;\n z-index:1;\n\n &:after {\n content: \"\";\n position: absolute;\n display: block;\n ", ": calc(50% - 1px);\n width: 1px;\n height: calc(100% - 14px);\n top: 7px;\n }\n"])), function (props) {
6622
6602
  return Object(_base_utils__WEBPACK_IMPORTED_MODULE_21__["swapRTLDirection"])(props.direction, 'right');
6623
6603
  }, function (props) {
@@ -6672,10 +6652,13 @@ function columnResize() {
6672
6652
  var _opts$doubleClickCall;
6673
6653
  (_opts$doubleClickCall = opts.doubleClickCallback) === null || _opts$doubleClickCall === void 0 ? void 0 : _opts$doubleClickCall.call(opts, e, col);
6674
6654
  };
6675
- var handleMouseDown = function handleMouseDown(e, col) {
6655
+
6656
+ // 通用的拖拽处理逻辑
6657
+ var handleResize = function handleResize(startEvent, col, eventType) {
6676
6658
  window.addEventListener('selectstart', disableSelect);
6677
6659
  var changedColumnSize = {};
6678
- var startX = e.clientX;
6660
+ var startCoordinates = Object(_utils_touchEventUtils__WEBPACK_IMPORTED_MODULE_22__["getEventCoordinates"])(startEvent);
6661
+ var startX = startCoordinates.clientX;
6679
6662
  var children = col.children,
6680
6663
  code = col.code,
6681
6664
  _col$features = col.features,
@@ -6686,9 +6669,23 @@ function columnResize() {
6686
6669
  var realMaxSize = typeof maxWidth === 'number' ? maxWidth : maxSize;
6687
6670
  var columnSize = pipeline.getFeatureOptions(COLUMN_SIZE_KEY);
6688
6671
  var recordColumnSize = columnSize;
6689
- e.stopPropagation();
6690
- var nextSize$ = Object(rxjs__WEBPACK_IMPORTED_MODULE_16__["fromEvent"])(window, 'mousemove').pipe(rxjs_operators__WEBPACK_IMPORTED_MODULE_17__["takeUntil"](Object(rxjs__WEBPACK_IMPORTED_MODULE_16__["fromEvent"])(window, 'mouseup')), rxjs_operators__WEBPACK_IMPORTED_MODULE_17__["map"](function (e) {
6691
- var movingX = e.clientX;
6672
+
6673
+ // 根据事件类型选择不同的事件监听器
6674
+ var moveEventName = eventType === 'mouse' ? 'mousemove' : 'touchmove';
6675
+ var endEventName = eventType === 'mouse' ? 'mouseup' : 'touchend';
6676
+ var moveEventOptions = eventType === 'touch' ? {
6677
+ passive: false
6678
+ } : undefined;
6679
+ var endEventOptions = eventType === 'touch' ? {
6680
+ passive: false
6681
+ } : undefined;
6682
+ var nextSize$ = Object(rxjs__WEBPACK_IMPORTED_MODULE_16__["fromEvent"])(window, moveEventName, moveEventOptions).pipe(rxjs_operators__WEBPACK_IMPORTED_MODULE_17__["takeUntil"](Object(rxjs__WEBPACK_IMPORTED_MODULE_16__["fromEvent"])(window, endEventName, endEventOptions)), rxjs_operators__WEBPACK_IMPORTED_MODULE_17__["map"](function (e) {
6683
+ // 触摸事件需要阻止默认行为,防止页面滚动
6684
+ if (eventType === 'touch' && e.cancelable) {
6685
+ e.preventDefault();
6686
+ }
6687
+ var coordinates = Object(_utils_touchEventUtils__WEBPACK_IMPORTED_MODULE_22__["getEventCoordinates"])(e);
6688
+ var movingX = coordinates.clientX;
6692
6689
  var nextColumnSize = _objectSpread({}, columnSize);
6693
6690
  var deltaSum = pipeline.ctx.direction === 'rtl' ? startX - movingX : movingX - startX;
6694
6691
  var deltaRemaining = deltaSum;
@@ -6745,6 +6742,20 @@ function columnResize() {
6745
6742
  }
6746
6743
  });
6747
6744
  };
6745
+ var handleMouseDown = function handleMouseDown(e, col) {
6746
+ e.stopPropagation();
6747
+ handleResize(e.nativeEvent, col, 'mouse');
6748
+ };
6749
+
6750
+ // 触摸事件处理函数
6751
+ var handleTouchStart = function handleTouchStart(e, col) {
6752
+ // 阻止触摸事件的默认行为
6753
+ if (e.cancelable) {
6754
+ e.preventDefault();
6755
+ }
6756
+ e.stopPropagation();
6757
+ handleResize(e.nativeEvent, col, 'touch');
6758
+ };
6748
6759
  var isGroup = Object(_utils__WEBPACK_IMPORTED_MODULE_18__["isGroupColumn"])(pipeline.getColumns());
6749
6760
  return pipeline.mapColumns(Object(_utils__WEBPACK_IMPORTED_MODULE_18__["makeRecursiveMapper"])(function (col) {
6750
6761
  var _columnSize$code;
@@ -6762,6 +6773,9 @@ function columnResize() {
6762
6773
  },
6763
6774
  onMouseDown: function onMouseDown(e) {
6764
6775
  return handleMouseDown(e, col);
6776
+ },
6777
+ onTouchStart: function onTouchStart(e) {
6778
+ return handleTouchStart(e, col);
6765
6779
  }
6766
6780
  }) : /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_14___default.a.createElement(TableHeaderCellResize, {
6767
6781
  direction: pipeline.ctx.direction,
@@ -6771,6 +6785,9 @@ function columnResize() {
6771
6785
  },
6772
6786
  onMouseDown: function onMouseDown(e) {
6773
6787
  return handleMouseDown(e, col);
6788
+ },
6789
+ onTouchStart: function onTouchStart(e) {
6790
+ return handleTouchStart(e, col);
6774
6791
  }
6775
6792
  }))),
6776
6793
  headerCellProps: Object(_utils__WEBPACK_IMPORTED_MODULE_18__["mergeCellProps"])(col.headerCellProps, {
@@ -9333,6 +9350,8 @@ __webpack_require__.r(__webpack_exports__);
9333
9350
  /* harmony import */ var _base_styles__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! ../../base/styles */ "./components/table/base/styles.ts");
9334
9351
  /* harmony import */ var _const__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! ../const */ "./components/table/pipeline/const.ts");
9335
9352
  /* harmony import */ var _internals__WEBPACK_IMPORTED_MODULE_14__ = __webpack_require__(/*! ../../internals */ "./components/table/internals.ts");
9353
+ /* harmony import */ var _utils_touchEventUtils__WEBPACK_IMPORTED_MODULE_15__ = __webpack_require__(/*! ./utils/touchEventUtils */ "./components/table/pipeline/features/utils/touchEventUtils.tsx");
9354
+
9336
9355
 
9337
9356
 
9338
9357
 
@@ -9374,8 +9393,7 @@ var defaultRowDragColumn = {
9374
9393
  width: "16",
9375
9394
  height: "16"
9376
9395
  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_8___default.a.createElement("path", {
9377
- 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",
9378
- "p-id": "4278"
9396
+ 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"
9379
9397
  }));
9380
9398
  }
9381
9399
  };
@@ -9404,19 +9422,19 @@ function rowDrag(opt) {
9404
9422
  var treeModeOptions = getTreeModeOptions();
9405
9423
  var rowDragOptions = getRowDragOptions();
9406
9424
  var allowDragIntoRow = !!treeModeOptions && (rowDragOptions === null || rowDragOptions === void 0 ? void 0 : rowDragOptions.allowDragIntoRow);
9407
- var isLeave = !isMouseOnDropTarget(event, dropZoneTarget);
9425
+ var isLeave = !isPointerOnDropTarget(event, dropZoneTarget);
9408
9426
  var overIndex = -1;
9409
9427
  var direction = 'bottom';
9410
9428
  if (!isLeave && dataSource.length > 0) {
9411
- var overDragItem = getDragRowItem(event.target, dropZoneTarget, dataSource);
9429
+ var overDragItem = getDragRowItem(Object(_utils_touchEventUtils__WEBPACK_IMPORTED_MODULE_15__["getEventTarget"])(event), dropZoneTarget, dataSource);
9412
9430
  if (overDragItem) {
9413
9431
  var _rowIndex = overDragItem.rowIndex,
9414
9432
  cell = overDragItem.cell;
9415
9433
  overIndex = _rowIndex;
9416
- direction = getDirection(cell, event.clientY, allowDragIntoRow);
9434
+ direction = getDirection(cell, Object(_utils_touchEventUtils__WEBPACK_IMPORTED_MODULE_15__["getEventCoordinates"])(event).clientY, allowDragIntoRow);
9417
9435
  }
9418
9436
  }
9419
- if (overIndex === -1 && dataSource.length > 0 && dropZoneTarget.contains(event.target)) {
9437
+ if (overIndex === -1 && dataSource.length > 0 && dropZoneTarget.contains(Object(_utils_touchEventUtils__WEBPACK_IMPORTED_MODULE_15__["getEventTarget"])(event))) {
9420
9438
  overIndex = dataSource.length - 1;
9421
9439
  direction = 'bottom';
9422
9440
  }
@@ -9492,9 +9510,27 @@ function rowDrag(opt) {
9492
9510
  }
9493
9511
  };
9494
9512
  var onMouseDown = function onMouseDown(event) {
9513
+ handlePointerDown(event.nativeEvent);
9514
+ };
9515
+
9516
+ // PC 单据移动端显示,兼容移动端的拖拽事件
9517
+ var onTouchStart = function onTouchStart(event) {
9518
+ // 尝试阻止触摸事件的默认行为,防止页面滚动
9519
+ try {
9520
+ if (event.cancelable) {
9521
+ event.preventDefault();
9522
+ }
9523
+ } catch (error) {
9524
+ // 忽略passive event listener错误
9525
+ console.warn('preventDefault failed in passive touch event listener');
9526
+ }
9527
+ handlePointerDown(event.nativeEvent);
9528
+ };
9529
+
9530
+ // 统一的拖拽处理函数
9531
+ var handlePointerDown = function handlePointerDown(startEvent) {
9495
9532
  var _opt$isDisabled;
9496
- var mouseDownEvent = event.nativeEvent;
9497
- var startDataItem = getDragRowItem(mouseDownEvent.target, tableBody, dataSource);
9533
+ var startDataItem = getDragRowItem(Object(_utils_touchEventUtils__WEBPACK_IMPORTED_MODULE_15__["getEventTarget"])(startEvent), tableBody, dataSource);
9498
9534
  if (!startDataItem || startDataItem.code !== rowDragColumn.code) return;
9499
9535
  if (opt !== null && opt !== void 0 && (_opt$isDisabled = opt.isDisabled) !== null && _opt$isDisabled !== void 0 && _opt$isDisabled.call(opt, startDataItem.row, startDataItem.rowIndex)) return;
9500
9536
  var isValidDrag = false;
@@ -9506,7 +9542,7 @@ function rowDrag(opt) {
9506
9542
  var intervalId = null;
9507
9543
  var expandRowTimeoutId = null;
9508
9544
  var expandRowCallBackList = [];
9509
- var updateScrollPosition = function updateScrollPosition(tableBody, mouseMoveEvent) {
9545
+ var updateScrollPosition = function updateScrollPosition(tableBody, moveEvent) {
9510
9546
  if (opt !== null && opt !== void 0 && opt.suppressScrollMove) return;
9511
9547
  if (timeoutId) {
9512
9548
  clearTimeout(timeoutId);
@@ -9515,7 +9551,7 @@ function rowDrag(opt) {
9515
9551
  clearInterval(intervalId);
9516
9552
  }
9517
9553
  if (!tableBody) return;
9518
- var moveOffset = getScrollMoveOffset(tableBody, mouseMoveEvent);
9554
+ var moveOffset = getScrollMoveOffset(tableBody, moveEvent);
9519
9555
  if (moveOffset === 0) {
9520
9556
  return;
9521
9557
  }
@@ -9525,29 +9561,53 @@ function rowDrag(opt) {
9525
9561
  }, 50);
9526
9562
  }, 500);
9527
9563
  };
9528
- var handleDragStart = function handleDragStart(mouseDownEvent) {
9564
+ var handleDragStart = function handleDragStart(event) {
9529
9565
  var _opt$rowDragText;
9530
- dragElement = createDragElement(mouseDownEvent, tableBody); // 创建拖拽悬浮框
9566
+ // 屏蔽默认事件,防止文本选择、框选等
9567
+ try {
9568
+ if (event.cancelable) {
9569
+ event.preventDefault();
9570
+ }
9571
+ } catch (error) {
9572
+ // 忽略passive event listener错误
9573
+ console.warn('preventDefault failed in passive event listener');
9574
+ }
9575
+ // 禁用页面的文本选择
9576
+ document.body.style.userSelect = 'none';
9577
+ document.body.style.webkitUserSelect = 'none';
9578
+
9579
+ // 添加拖拽状态的CSS类,可以在样式中进一步控制
9580
+ document.body.classList.add('row-dragging');
9581
+ dragElement = createDragElement(event, tableBody); // 创建拖拽悬浮框
9531
9582
  var isTreeTable = !!pipeline.getFeatureOptions('treeModeOptions');
9532
9583
  dragLine = createDragLine(isTreeTable); // 创建拖拽插入指示线
9533
9584
  var dragText = opt !== null && opt !== void 0 && opt.rowDragText ? opt === null || opt === void 0 ? void 0 : (_opt$rowDragText = opt.rowDragText) === null || _opt$rowDragText === void 0 ? void 0 : _opt$rowDragText.call(opt, startDataItem.row, startDataItem.rowIndex) : "\u7B2C".concat(startDataItem.rowIndex, "\u884C\u5185\u5BB9");
9534
9585
  setDragText(dragElement, dragText); // 设置悬浮框显示文本
9535
9586
  artTable.classList.add(classnames__WEBPACK_IMPORTED_MODULE_11___default()(_base_styles__WEBPACK_IMPORTED_MODULE_12__["Classes"].rowDragging));
9536
9587
  rowDragApi.setDragStatus('start');
9537
- var dragEvent = createDropTargetEvent(currentDropZone, mouseDownEvent, startDataItem, currentDropZone);
9588
+ var dragEvent = createDropTargetEvent(currentDropZone, event, startDataItem, currentDropZone);
9538
9589
  onDragStart(dragEvent);
9539
9590
  };
9540
- var handleDragMove = function handleDragMove(mouseMoveEvent) {
9591
+ var handleDragMove = function handleDragMove(moveEvent) {
9592
+ // 尝试屏蔽默认事件,在passive监听器中可能会失败
9593
+ try {
9594
+ if (moveEvent.cancelable) {
9595
+ moveEvent.preventDefault();
9596
+ }
9597
+ } catch (error) {
9598
+ // 忽略passive event listener错误
9599
+ console.warn('preventDefault failed in passive event listener');
9600
+ }
9541
9601
  var isRTL = pipeline.ctx.direction === 'rtl';
9542
- positionDragElemment(dragElement, mouseMoveEvent, isRTL); // 更新拖拽悬浮框位置
9602
+ positionDragElemment(dragElement, moveEvent, isRTL); // 更新拖拽悬浮框位置
9543
9603
  rowDragApi.setDragStatus('dragging');
9544
9604
  setDragElementIcon(dragElement, 'move');
9545
9605
  var rowDropZones = rowDragApi.getRowDropZone();
9546
9606
  var validDropZones = rowDropZones.concat(currentDropZone); // 可放置区域加上自身
9547
9607
  var dropTarget = validDropZones.find(function (zone) {
9548
- return isMouseOnDropTarget(mouseMoveEvent, zone.getContainer());
9608
+ return isPointerOnDropTarget(moveEvent, zone.getContainer());
9549
9609
  }) || null;
9550
- updateScrollPosition(dropTarget === null || dropTarget === void 0 ? void 0 : dropTarget.getContainer(), mouseMoveEvent); // 拖拽到底时让滚动条可以滚动
9610
+ updateScrollPosition(dropTarget === null || dropTarget === void 0 ? void 0 : dropTarget.getContainer(), moveEvent); // 拖拽到底时让滚动条可以滚动
9551
9611
 
9552
9612
  if (dropTarget !== lastDropTarget) {
9553
9613
  // 拖拽离开表格
@@ -9556,7 +9616,7 @@ function rowDrag(opt) {
9556
9616
  setDragElementIcon(dragElement, 'notAllowed');
9557
9617
  hiddenDragLine(dragLine);
9558
9618
  lastDropTarget.getContainer().classList.remove(_base_styles__WEBPACK_IMPORTED_MODULE_12__["Classes"].rowDragNoData);
9559
- var dragEvent = createDropTargetEvent(lastDropTarget, mouseMoveEvent, startDataItem, currentDropZone);
9619
+ var dragEvent = createDropTargetEvent(lastDropTarget, moveEvent, startDataItem, currentDropZone);
9560
9620
  lastDropTarget.onDragLeave(dragEvent);
9561
9621
  }
9562
9622
  }
@@ -9577,7 +9637,7 @@ function rowDrag(opt) {
9577
9637
  dragLine.classList.remove(_base_styles__WEBPACK_IMPORTED_MODULE_12__["Classes"].treeTableRowDragLine);
9578
9638
  }
9579
9639
  }
9580
- var _dragEvent = createDropTargetEvent(dropTarget, mouseMoveEvent, startDataItem, currentDropZone);
9640
+ var _dragEvent = createDropTargetEvent(dropTarget, moveEvent, startDataItem, currentDropZone);
9581
9641
  dropTarget.onDragEnter(_dragEvent);
9582
9642
  }
9583
9643
  }
@@ -9590,7 +9650,7 @@ function rowDrag(opt) {
9590
9650
  positionDragLine({
9591
9651
  lineElement: dragLine,
9592
9652
  dragZone: dropTarget,
9593
- event: mouseMoveEvent,
9653
+ event: moveEvent,
9594
9654
  isRTL: isRTL
9595
9655
  });
9596
9656
  }
@@ -9608,7 +9668,7 @@ function rowDrag(opt) {
9608
9668
  onCollapse = treeModeOptions.onCollapse;
9609
9669
  // 鼠标悬停所在的拖拽行信息
9610
9670
  var dataSource = dropTarget.tableParams.getDataSource();
9611
- var dragItem = getDragRowItem(mouseMoveEvent.target, dropTarget.getContainer(), dataSource);
9671
+ var dragItem = getDragRowItem(Object(_utils_touchEventUtils__WEBPACK_IMPORTED_MODULE_15__["getEventTarget"])(moveEvent), dropTarget.getContainer(), dataSource);
9612
9672
  if (!dragItem) return;
9613
9673
  var row = dragItem.row;
9614
9674
  var _row$treeMetaKey = row[treeMetaKey],
@@ -9623,15 +9683,22 @@ function rowDrag(opt) {
9623
9683
  }, 1000);
9624
9684
  }
9625
9685
  if (dropTarget.onDragging) {
9626
- var _dragEvent2 = createDropTargetEvent(dropTarget, mouseMoveEvent, startDataItem, currentDropZone);
9686
+ var _dragEvent2 = createDropTargetEvent(dropTarget, moveEvent, startDataItem, currentDropZone);
9627
9687
  dropTarget.onDragging(_dragEvent2);
9628
9688
  }
9629
9689
  }
9630
9690
  };
9631
- var handleDragStop = function handleDragStop(mouseUpEvent) {
9691
+ var handleDragStop = function handleDragStop(endEvent) {
9632
9692
  if (!isValidDrag) {
9633
9693
  return;
9634
9694
  }
9695
+
9696
+ // 恢复默认的文本选择功能
9697
+ document.body.style.userSelect = '';
9698
+ document.body.style.webkitUserSelect = '';
9699
+
9700
+ // 移除拖拽状态的CSS类
9701
+ document.body.classList.remove('row-dragging');
9635
9702
  removeElement(dragElement);
9636
9703
  removeElement(dragLine);
9637
9704
  artTable.classList.remove(classnames__WEBPACK_IMPORTED_MODULE_11___default()(_base_styles__WEBPACK_IMPORTED_MODULE_12__["Classes"].rowDragging));
@@ -9646,10 +9713,10 @@ function rowDrag(opt) {
9646
9713
  });
9647
9714
  var validDropZones = rowDropZones.concat(currentDropZone);
9648
9715
  var dropTarget = validDropZones.find(function (zone) {
9649
- return isMouseOnDropTarget(mouseUpEvent, zone.getContainer());
9716
+ return isPointerOnDropTarget(endEvent, zone.getContainer());
9650
9717
  });
9651
9718
  if (dropTarget && dropTarget.onDragStop) {
9652
- var dragEvent = createDropTargetEvent(dropTarget, mouseUpEvent, startDataItem, currentDropZone);
9719
+ var dragEvent = createDropTargetEvent(dropTarget, endEvent, startDataItem, currentDropZone);
9653
9720
  dropTarget.onDragStop(dragEvent);
9654
9721
  }
9655
9722
  while (expandRowCallBackList.length > 0) {
@@ -9657,32 +9724,74 @@ function rowDrag(opt) {
9657
9724
  callback();
9658
9725
  }
9659
9726
  };
9660
- var mousemove$ = Object(rxjs__WEBPACK_IMPORTED_MODULE_9__["fromEvent"])(window, 'mousemove');
9661
- var mouseup$ = Object(rxjs__WEBPACK_IMPORTED_MODULE_9__["fromEvent"])(window, 'mouseup');
9662
- var rowDragMove$ = mousemove$.pipe(Object(rxjs_operators__WEBPACK_IMPORTED_MODULE_10__["filter"])(function (mouseMoveEvent) {
9663
- var mouseMoveClientY = mouseMoveEvent.clientY;
9664
- var mouseDownClientY = mouseDownEvent.clientY;
9665
- // 上下移动偏移量大于5才是有效的拖拽
9666
- if (Math.abs(mouseMoveClientY - mouseDownClientY) > 5) {
9667
- isValidDrag = true;
9668
- }
9669
- return isValidDrag;
9670
- }), Object(rxjs_operators__WEBPACK_IMPORTED_MODULE_10__["map"])(function (mouseMoveEvent) {
9671
- if (!isDragging) {
9672
- isDragging = true;
9673
- handleDragStart(mouseDownEvent);
9674
- handleDragMove(mouseDownEvent);
9675
- }
9676
- handleDragMove(mouseMoveEvent);
9677
- }), Object(rxjs_operators__WEBPACK_IMPORTED_MODULE_10__["takeUntil"])(mouseup$));
9678
- rowDragMove$.subscribe();
9679
- var rowDragEnd$ = mouseup$.pipe(Object(rxjs_operators__WEBPACK_IMPORTED_MODULE_10__["map"])(function (mouseUpEvent) {
9680
- handleDragStop(mouseUpEvent);
9681
- })).subscribe({
9682
- next: function next() {
9683
- rowDragEnd$.unsubscribe();
9684
- }
9685
- });
9727
+
9728
+ // 判断是鼠标事件还是触摸事件,分别监听对应的移动和结束事件
9729
+ var isTouchEvent = ('touches' in startEvent);
9730
+ if (isTouchEvent) {
9731
+ // 触摸事件处理
9732
+ var touchmove$ = Object(rxjs__WEBPACK_IMPORTED_MODULE_9__["fromEvent"])(window, 'touchmove', {
9733
+ passive: false
9734
+ });
9735
+ var touchend$ = Object(rxjs__WEBPACK_IMPORTED_MODULE_9__["fromEvent"])(window, 'touchend', {
9736
+ passive: false
9737
+ });
9738
+ var touchDragMove$ = touchmove$.pipe(Object(rxjs_operators__WEBPACK_IMPORTED_MODULE_10__["filter"])(function (moveEvent) {
9739
+ var coordinates = Object(_utils_touchEventUtils__WEBPACK_IMPORTED_MODULE_15__["getEventCoordinates"])(moveEvent);
9740
+ var startCoordinates = Object(_utils_touchEventUtils__WEBPACK_IMPORTED_MODULE_15__["getEventCoordinates"])(startEvent);
9741
+ var moveClientY = coordinates.clientY;
9742
+ var startClientY = startCoordinates.clientY;
9743
+ // 上下移动偏移量大于5才是有效的拖拽
9744
+ if (Math.abs(moveClientY - startClientY) > 5) {
9745
+ isValidDrag = true;
9746
+ }
9747
+ return isValidDrag;
9748
+ }), Object(rxjs_operators__WEBPACK_IMPORTED_MODULE_10__["map"])(function (moveEvent) {
9749
+ if (!isDragging) {
9750
+ isDragging = true;
9751
+ handleDragStart(startEvent);
9752
+ handleDragMove(startEvent);
9753
+ }
9754
+ handleDragMove(moveEvent);
9755
+ }), Object(rxjs_operators__WEBPACK_IMPORTED_MODULE_10__["takeUntil"])(touchend$));
9756
+ touchDragMove$.subscribe();
9757
+ var touchDragEnd$ = touchend$.pipe(Object(rxjs_operators__WEBPACK_IMPORTED_MODULE_10__["map"])(function (endEvent) {
9758
+ handleDragStop(endEvent);
9759
+ })).subscribe({
9760
+ next: function next() {
9761
+ touchDragEnd$.unsubscribe();
9762
+ }
9763
+ });
9764
+ } else {
9765
+ // 鼠标事件处理
9766
+ var mousemove$ = Object(rxjs__WEBPACK_IMPORTED_MODULE_9__["fromEvent"])(window, 'mousemove');
9767
+ var mouseup$ = Object(rxjs__WEBPACK_IMPORTED_MODULE_9__["fromEvent"])(window, 'mouseup');
9768
+ var rowDragMove$ = mousemove$.pipe(Object(rxjs_operators__WEBPACK_IMPORTED_MODULE_10__["filter"])(function (moveEvent) {
9769
+ var coordinates = Object(_utils_touchEventUtils__WEBPACK_IMPORTED_MODULE_15__["getEventCoordinates"])(moveEvent);
9770
+ var startCoordinates = Object(_utils_touchEventUtils__WEBPACK_IMPORTED_MODULE_15__["getEventCoordinates"])(startEvent);
9771
+ var moveClientY = coordinates.clientY;
9772
+ var startClientY = startCoordinates.clientY;
9773
+ // 上下移动偏移量大于5才是有效的拖拽
9774
+ if (Math.abs(moveClientY - startClientY) > 5) {
9775
+ isValidDrag = true;
9776
+ }
9777
+ return isValidDrag;
9778
+ }), Object(rxjs_operators__WEBPACK_IMPORTED_MODULE_10__["map"])(function (moveEvent) {
9779
+ if (!isDragging) {
9780
+ isDragging = true;
9781
+ handleDragStart(startEvent);
9782
+ handleDragMove(startEvent);
9783
+ }
9784
+ handleDragMove(moveEvent);
9785
+ }), Object(rxjs_operators__WEBPACK_IMPORTED_MODULE_10__["takeUntil"])(mouseup$));
9786
+ rowDragMove$.subscribe();
9787
+ var rowDragEnd$ = mouseup$.pipe(Object(rxjs_operators__WEBPACK_IMPORTED_MODULE_10__["map"])(function (endEvent) {
9788
+ handleDragStop(endEvent);
9789
+ })).subscribe({
9790
+ next: function next() {
9791
+ rowDragEnd$.unsubscribe();
9792
+ }
9793
+ });
9794
+ }
9686
9795
  };
9687
9796
  var rowDragColumn = (opt === null || opt === void 0 ? void 0 : opt.rowDragColumn) || defaultRowDragColumn;
9688
9797
  pipeline.setFeatureOptions('rowDragColumnKey', rowDragColumn.code);
@@ -9691,7 +9800,8 @@ function rowDrag(opt) {
9691
9800
  nextColumns.unshift(rowDragColumn);
9692
9801
  pipeline.columns(nextColumns);
9693
9802
  pipeline.addTableProps({
9694
- onMouseDown: onMouseDown
9803
+ onMouseDown: onMouseDown,
9804
+ onTouchStart: onTouchStart
9695
9805
  });
9696
9806
  pipeline.appendRowPropsGetter(function (row, rowIndex) {
9697
9807
  var _cx;
@@ -9760,12 +9870,12 @@ function isEleInFooter(target) {
9760
9870
  }
9761
9871
  return false;
9762
9872
  }
9763
- function createDragElement(mouseDownEvent, tableBody) {
9873
+ function createDragElement(event, tableBody) {
9764
9874
  var ELEMENT_TEMPLATE = "<div class='".concat(_base_styles__WEBPACK_IMPORTED_MODULE_12__["Classes"].rowDragElement, "'>\n <span class='").concat(_base_styles__WEBPACK_IMPORTED_MODULE_12__["Classes"].rowDragElementIcon, "'></span>\n <div class='").concat(_base_styles__WEBPACK_IMPORTED_MODULE_12__["Classes"].rowDragElementLabel, "'></div>\n </div>");
9765
9875
  var element = document.createElement('div');
9766
9876
  element.innerHTML = ELEMENT_TEMPLATE;
9767
9877
  var dragElement = element.firstChild;
9768
- var targetRow = findTargetRow(mouseDownEvent.target, tableBody);
9878
+ var targetRow = findTargetRow(Object(_utils_touchEventUtils__WEBPACK_IMPORTED_MODULE_15__["getEventTarget"])(event), tableBody);
9769
9879
  if (targetRow) {
9770
9880
  var rect = targetRow.getBoundingClientRect();
9771
9881
  dragElement.style.height = rect.height + 'px';
@@ -9809,9 +9919,9 @@ function positionDragLine(_ref) {
9809
9919
  lineElement.style.display = 'block';
9810
9920
  }
9811
9921
  // 鼠标悬停所在的拖拽行信息
9812
- var dragItem = getDragRowItem(event.target, tableContainer, dataSource);
9922
+ var dragItem = getDragRowItem(Object(_utils_touchEventUtils__WEBPACK_IMPORTED_MODULE_15__["getEventTarget"])(event), tableContainer, dataSource);
9813
9923
  if (!dragItem) {
9814
- if (dataSource.length > 0 && tableContainer.contains(event.target)) {
9924
+ if (dataSource.length > 0 && tableContainer.contains(Object(_utils_touchEventUtils__WEBPACK_IMPORTED_MODULE_15__["getEventTarget"])(event))) {
9815
9925
  var _rowIndex3 = dataSource.length - 1;
9816
9926
  var _row2 = dataSource[_rowIndex3];
9817
9927
  var _direction = 'bottom';
@@ -9839,7 +9949,7 @@ function positionDragLine(_ref) {
9839
9949
  rowIndex = dragItem.rowIndex,
9840
9950
  row = dragItem.row;
9841
9951
  var allowDragInto = isTreeTable && allowDragIntoRow;
9842
- var direction = getDirection(cell, event.clientY, allowDragInto);
9952
+ var direction = getDirection(cell, Object(_utils_touchEventUtils__WEBPACK_IMPORTED_MODULE_15__["getEventCoordinates"])(event).clientY, allowDragInto);
9843
9953
  var targetCell = isTreeTable ? tableContainer.querySelector("tr[data-rowindex=\"".concat(rowIndex, "\"] .").concat(_base_styles__WEBPACK_IMPORTED_MODULE_12__["Classes"].tableExtendCell)) : cell;
9844
9954
  if (!targetCell) return;
9845
9955
  var _getLinePosition2 = getLinePosition({
@@ -9877,8 +9987,9 @@ function positionDragElemment(element, event, isRTL) {
9877
9987
  var browserWidth = (_document$body$client = (_document$body = document.body) === null || _document$body === void 0 ? void 0 : _document$body.clientWidth) !== null && _document$body$client !== void 0 ? _document$body$client : window.innerHeight || ((_document$documentEle = document.documentElement) === null || _document$documentEle === void 0 ? void 0 : _document$documentEle.clientWidth) || 0;
9878
9988
  var browserHeight = (_document$body$client2 = (_document$body2 = document.body) === null || _document$body2 === void 0 ? void 0 : _document$body2.clientHeight) !== null && _document$body$client2 !== void 0 ? _document$body$client2 : window.innerHeight || ((_document$documentEle2 = document.documentElement) === null || _document$documentEle2 === void 0 ? void 0 : _document$documentEle2.clientHeight) || 0;
9879
9989
  var offsetParentSize = getElementRectWithOffset(element.offsetParent);
9880
- var clientX = event.clientX,
9881
- clientY = event.clientY;
9990
+ var _getEventCoordinates = Object(_utils_touchEventUtils__WEBPACK_IMPORTED_MODULE_15__["getEventCoordinates"])(event),
9991
+ clientX = _getEventCoordinates.clientX,
9992
+ clientY = _getEventCoordinates.clientY;
9882
9993
  var top = clientY - offsetParentSize.top - eleHeight / 2;
9883
9994
  var left = clientX - offsetParentSize.left;
9884
9995
  var right = Math.max(browserWidth - clientX, 0);
@@ -9894,11 +10005,11 @@ function positionDragElemment(element, event, isRTL) {
9894
10005
  right = Math.max(browserWidth + windowScrollX - element.clientWidth, 0);
9895
10006
  }
9896
10007
  if (isRTL) {
9897
- element.style.cssText += ";right: ".concat(right, "px; top: ").concat(top, "px;");
9898
- return;
10008
+ element.style.right = right + 'px';
10009
+ } else {
10010
+ element.style.left = left + 'px';
9899
10011
  }
9900
- element.style.left = "".concat(left, "px");
9901
- element.style.top = "".concat(top, "px");
10012
+ element.style.top = top + 'px';
9902
10013
  }
9903
10014
  function getElementRectWithOffset(el) {
9904
10015
  var offsetElementRect = el.getBoundingClientRect();
@@ -9965,12 +10076,13 @@ function setDragElementIcon(element, iconName) {
9965
10076
  elementIcon.appendChild(iconElement);
9966
10077
  }
9967
10078
  function clearElementChildren(element) {
9968
- while (element && element.firstChild) {
10079
+ while (element !== null && element !== void 0 && element.firstChild) {
9969
10080
  element.removeChild(element.firstChild);
9970
10081
  }
9971
10082
  }
9972
- function getScrollMoveOffset(tableBody, mouseMoveEvent) {
9973
- var clientY = mouseMoveEvent.clientY;
10083
+ function getScrollMoveOffset(tableBody, moveEvent) {
10084
+ var _getEventCoordinates2 = Object(_utils_touchEventUtils__WEBPACK_IMPORTED_MODULE_15__["getEventCoordinates"])(moveEvent),
10085
+ clientY = _getEventCoordinates2.clientY;
9974
10086
  var tableBodyClientRect = tableBody.getBoundingClientRect();
9975
10087
  var top = tableBodyClientRect.top,
9976
10088
  height = tableBodyClientRect.height;
@@ -9988,15 +10100,19 @@ function setDragText(element, dragText) {
9988
10100
  var stringNode = document.createTextNode(dragTextString);
9989
10101
  elementIcon.appendChild(stringNode);
9990
10102
  }
9991
- function isMouseOnDropTarget(mouseEvent, target) {
9992
- return target.contains(mouseEvent.target);
10103
+ function isPointerOnDropTarget(pointerEvent, target) {
10104
+ var eventTarget = Object(_utils_touchEventUtils__WEBPACK_IMPORTED_MODULE_15__["getEventTarget"])(pointerEvent);
10105
+ return target.contains(eventTarget);
9993
10106
  }
9994
10107
  function createDropTargetEvent(dropZone, event, dragItem, startDropZone) {
9995
10108
  var dropZoneTarget = dropZone.getContainer();
9996
10109
  var startDropZoneTagret = startDropZone.getContainer();
9997
10110
  var rect = dropZoneTarget.getBoundingClientRect();
9998
- var x = event.clientX - rect.left;
9999
- var y = event.clientY - rect.top;
10111
+ var _getEventCoordinates3 = Object(_utils_touchEventUtils__WEBPACK_IMPORTED_MODULE_15__["getEventCoordinates"])(event),
10112
+ clientX = _getEventCoordinates3.clientX,
10113
+ clientY = _getEventCoordinates3.clientY;
10114
+ var x = clientX - rect.left;
10115
+ var y = clientY - rect.top;
10000
10116
  var startDropZoneOptions = startDropZone.tableParams.getRowDragOptions();
10001
10117
  var startCommonParams = startDropZoneOptions === null || startDropZoneOptions === void 0 ? void 0 : startDropZoneOptions.commonParams;
10002
10118
  var targetEvent = {
@@ -10053,10 +10169,8 @@ var getLinePosition = function getLinePosition(_ref2) {
10053
10169
  paddingRight = _getElementSize3.paddingRight;
10054
10170
  var expandCellRect = cell.getBoundingClientRect();
10055
10171
  var _row$treeMetaKey2 = row[treeMetaKey],
10056
- rowKey = _row$treeMetaKey2.rowKey,
10057
10172
  depth = _row$treeMetaKey2.depth,
10058
- isLeaf = _row$treeMetaKey2.isLeaf,
10059
- expanded = _row$treeMetaKey2.expanded;
10173
+ isLeaf = _row$treeMetaKey2.isLeaf;
10060
10174
  var addWidth = isLeaf ? iconWidth + iconGap : 0;
10061
10175
  var indent = iconIndent + depth * indentSize + addWidth;
10062
10176
  var x = expandCellRect.x,
@@ -11443,6 +11557,94 @@ function treeSelect(opts) {
11443
11557
 
11444
11558
  /***/ }),
11445
11559
 
11560
+ /***/ "./components/table/pipeline/features/utils/touchEventUtils.tsx":
11561
+ /*!**********************************************************************!*\
11562
+ !*** ./components/table/pipeline/features/utils/touchEventUtils.tsx ***!
11563
+ \**********************************************************************/
11564
+ /*! exports provided: getEventCoordinates, getEventTarget, isTouchEvent, addPointerEventListeners, removePointerEventListeners, hasMovedEnough */
11565
+ /***/ (function(module, __webpack_exports__, __webpack_require__) {
11566
+
11567
+ "use strict";
11568
+ __webpack_require__.r(__webpack_exports__);
11569
+ /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "getEventCoordinates", function() { return getEventCoordinates; });
11570
+ /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "getEventTarget", function() { return getEventTarget; });
11571
+ /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "isTouchEvent", function() { return isTouchEvent; });
11572
+ /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "addPointerEventListeners", function() { return addPointerEventListeners; });
11573
+ /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "removePointerEventListeners", function() { return removePointerEventListeners; });
11574
+ /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "hasMovedEnough", function() { return hasMovedEnough; });
11575
+ // 统一获取事件坐标的函数
11576
+ function getEventCoordinates(event) {
11577
+ if ('touches' in event && event.touches.length > 0) {
11578
+ return {
11579
+ clientX: event.touches[0].clientX,
11580
+ clientY: event.touches[0].clientY
11581
+ };
11582
+ } else if ('changedTouches' in event && event.changedTouches.length > 0) {
11583
+ return {
11584
+ clientX: event.changedTouches[0].clientX,
11585
+ clientY: event.changedTouches[0].clientY
11586
+ };
11587
+ } else {
11588
+ return {
11589
+ clientX: event.clientX,
11590
+ clientY: event.clientY
11591
+ };
11592
+ }
11593
+ }
11594
+
11595
+ // 获取事件目标元素
11596
+ function getEventTarget(event) {
11597
+ if ('touches' in event && event.touches.length > 0) {
11598
+ return document.elementFromPoint(event.touches[0].clientX, event.touches[0].clientY);
11599
+ }
11600
+ // 处理touchend事件,此时touches为空,需要使用changedTouches
11601
+ if ('changedTouches' in event && event.changedTouches.length > 0) {
11602
+ return document.elementFromPoint(event.changedTouches[0].clientX, event.changedTouches[0].clientY);
11603
+ }
11604
+ return event.target;
11605
+ }
11606
+
11607
+ // 判断是否为触摸事件
11608
+ function isTouchEvent(event) {
11609
+ return 'touches' in event;
11610
+ }
11611
+
11612
+ // 为元素添加统一的指针事件监听器
11613
+ function addPointerEventListeners(element, handlers, isTouchStart) {
11614
+ if (isTouchStart) {
11615
+ element.addEventListener('touchmove', handlers.onPointerMove, {
11616
+ passive: false
11617
+ });
11618
+ element.addEventListener('touchend', handlers.onPointerUp, {
11619
+ passive: false
11620
+ });
11621
+ } else {
11622
+ element.addEventListener('mousemove', handlers.onPointerMove);
11623
+ element.addEventListener('mouseup', handlers.onPointerUp);
11624
+ }
11625
+ }
11626
+
11627
+ // 移除统一的指针事件监听器
11628
+ function removePointerEventListeners(element, handlers, isTouchStart) {
11629
+ if (isTouchStart) {
11630
+ element.removeEventListener('touchmove', handlers.onPointerMove);
11631
+ element.removeEventListener('touchend', handlers.onPointerUp);
11632
+ } else {
11633
+ element.removeEventListener('mousemove', handlers.onPointerMove);
11634
+ element.removeEventListener('mouseup', handlers.onPointerUp);
11635
+ }
11636
+ }
11637
+
11638
+ // 检查是否移动了足够的距离(用于区分点击和拖拽)
11639
+ function hasMovedEnough(startX, startY, endX, endY) {
11640
+ var threshold = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 5;
11641
+ var xDiff = endX - startX;
11642
+ var yDiff = endY - startY;
11643
+ return Math.sqrt(xDiff * xDiff + yDiff * yDiff) > threshold;
11644
+ }
11645
+
11646
+ /***/ }),
11647
+
11446
11648
  /***/ "./components/table/pipeline/index.ts":
11447
11649
  /*!********************************************!*\
11448
11650
  !*** ./components/table/pipeline/index.ts ***!