vxe-table 3.12.10-beta.20 → 3.12.10-beta.21

package/lib/table/src/methods.js

@@ -521,7 +521,9 @@ function updateStyle($xeTable) {
     tableColumn,
     scrollXLoad,
     scrollYLoad,
+    overflowX,
     scrollbarWidth,
+    overflowY,
     scrollbarHeight,
     columnStore,
     editStore,
@@ -545,6 +547,8 @@ function updateStyle($xeTable) {
     return;
   }
   const containerList = ['main', 'left', 'right'];
+  const osbWidth = overflowY ? scrollbarWidth : 0;
+  const osbHeight = overflowX ? scrollbarHeight : 0;
   const emptyPlaceholderElem = $xeTable.$refs.refEmptyPlaceholder;
   const cellOffsetWidth = $xeTable.computeCellOffsetWidth;
   const mouseOpts = $xeTable.computeMouseOpts;
@@ -552,16 +556,16 @@ function updateStyle($xeTable) {
   const bodyTableElem = (0, _util.getRefElem)(elemStore['main-body-table']);
   if (emptyPlaceholderElem) {
     emptyPlaceholderElem.style.top = `${headerHeight}px`;
-    emptyPlaceholderElem.style.height = bodyWrapperElem ? `${bodyWrapperElem.offsetHeight - scrollbarHeight}px` : '';
+    emptyPlaceholderElem.style.height = bodyWrapperElem ? `${bodyWrapperElem.offsetHeight - osbHeight}px` : '';
   }
   let bodyHeight = 0;
   let bodyMaxHeight = 0;
-  const bodyMinHeight = customMinHeight - headerHeight - footerHeight - scrollbarHeight;
+  const bodyMinHeight = customMinHeight - headerHeight - footerHeight - osbHeight;
   if (customMaxHeight) {
-    bodyMaxHeight = Math.max(bodyMinHeight, customMaxHeight - headerHeight - footerHeight - scrollbarHeight);
+    bodyMaxHeight = Math.max(bodyMinHeight, customMaxHeight - headerHeight - footerHeight - osbHeight);
   }
   if (customHeight) {
-    bodyHeight = customHeight - headerHeight - footerHeight - scrollbarHeight;
+    bodyHeight = customHeight - headerHeight - footerHeight - osbHeight;
   }
   if (!bodyHeight) {
     if (bodyTableElem) {
@@ -579,27 +583,27 @@ function updateStyle($xeTable) {
   const scrollbarXToTop = $xeTable.computeScrollbarXToTop;
   const scrollXVirtualEl = $xeTable.$refs.refScrollXVirtualElem;
   if (scrollXVirtualEl) {
-    scrollXVirtualEl.style.height = `${scrollbarHeight}px`;
-    scrollXVirtualEl.style.visibility = scrollbarHeight ? 'visible' : 'hidden';
+    scrollXVirtualEl.style.height = `${osbHeight}px`;
+    scrollXVirtualEl.style.visibility = overflowX ? 'visible' : 'hidden';
   }
   const xWrapperEl = $xeTable.$refs.refScrollXWrapperElem;
   if (xWrapperEl) {
-    xWrapperEl.style.left = scrollbarXToTop ? `${scrollbarWidth}px` : '';
-    xWrapperEl.style.width = `${el.clientWidth - scrollbarWidth}px`;
+    xWrapperEl.style.left = scrollbarXToTop ? `${osbWidth}px` : '';
+    xWrapperEl.style.width = `${el.clientWidth - osbWidth}px`;
   }
   if (xLeftCornerEl) {
-    xLeftCornerEl.style.width = scrollbarXToTop ? `${scrollbarWidth}px` : '';
-    xLeftCornerEl.style.display = scrollbarXToTop ? scrollbarWidth && scrollbarHeight ? 'block' : '' : '';
+    xLeftCornerEl.style.width = scrollbarXToTop ? `${osbWidth}px` : '';
+    xLeftCornerEl.style.display = scrollbarXToTop ? osbWidth && osbHeight ? 'block' : '' : '';
   }
   if (xRightCornerEl) {
-    xRightCornerEl.style.width = scrollbarXToTop ? '' : `${scrollbarWidth}px`;
-    xRightCornerEl.style.display = scrollbarXToTop ? '' : scrollbarWidth && scrollbarHeight ? 'block' : '';
+    xRightCornerEl.style.width = scrollbarXToTop ? '' : `${osbWidth}px`;
+    xRightCornerEl.style.display = scrollbarXToTop ? '' : osbWidth && osbHeight ? 'block' : '';
   }
   const scrollYVirtualEl = $xeTable.$refs.refScrollYVirtualElem;
   if (scrollYVirtualEl) {
-    scrollYVirtualEl.style.width = `${scrollbarWidth}px`;
+    scrollYVirtualEl.style.width = `${osbWidth}px`;
     scrollYVirtualEl.style.height = `${bodyHeight + headerHeight + footerHeight}px`;
-    scrollYVirtualEl.style.visibility = scrollbarWidth ? 'visible' : 'hidden';
+    scrollYVirtualEl.style.visibility = overflowY ? 'visible' : 'hidden';
   }
   const yTopCornerEl = $xeTable.$refs.refScrollYTopCornerElem;
   if (yTopCornerEl) {
@@ -718,7 +722,7 @@ function updateStyle($xeTable) {
           if (wrapperElem) {
             wrapperElem.style.top = `${headerHeight}px`;
           }
-          fixedWrapperElem.style.height = `${customHeight > 0 ? customHeight : tableHeight + headerHeight + footerHeight + scrollbarHeight}px`;
+          fixedWrapperElem.style.height = `${customHeight > 0 ? customHeight : tableHeight + headerHeight + footerHeight + osbHeight}px`;
           fixedWrapperElem.style.width = `${fixedColumn.reduce((previous, column) => previous + column.renderWidth, 0)}px`;
         }
         let tWidth = tableWidth;
@@ -747,7 +751,7 @@ function updateStyle($xeTable) {
         if (tableElem) {
           tableElem.style.width = tWidth ? `${tWidth}px` : '';
           // 兼容性处理
-          tableElem.style.paddingRight = scrollbarWidth && fixedType && (_dom.browse['-moz'] || _dom.browse.safari) ? `${scrollbarWidth}px` : '';
+          tableElem.style.paddingRight = osbWidth && fixedType && (_dom.browse['-moz'] || _dom.browse.safari) ? `${osbWidth}px` : '';
         }
         const emptyBlockElem = (0, _util.getRefElem)(elemStore[`${name}-${layout}-emptyBlock`]);
         if (emptyBlockElem) {
@@ -782,7 +786,7 @@ function updateStyle($xeTable) {
           // 如果是固定列
           if (fixedWrapperElem) {
             if (wrapperElem) {
-              wrapperElem.style.top = `${customHeight > 0 ? customHeight - footerHeight - scrollbarHeight : tableHeight + headerHeight}px`;
+              wrapperElem.style.top = `${customHeight > 0 ? customHeight - footerHeight - osbHeight : tableHeight + headerHeight}px`;
             }
           }
         }
@@ -1203,7 +1207,7 @@ function autoCellWidth($xeTable) {
   }
   const tableHeight = bodyElem.offsetHeight;
   const overflowY = yHandleEl.scrollHeight > yHandleEl.clientHeight;
-  reactData.scrollbarWidth = overflowY ? Math.max(scrollbarOpts.width || 0, yHandleEl.offsetWidth - yHandleEl.clientWidth) : 0;
+  reactData.scrollbarWidth = Math.max(scrollbarOpts.width || 0, yHandleEl.offsetWidth - yHandleEl.clientWidth);
   reactData.overflowY = overflowY;
   internalData.tableWidth = tableWidth;
   internalData.tableHeight = tableHeight;
@@ -1212,7 +1216,7 @@ function autoCellWidth($xeTable) {
   const headerHeight = headerTableElem ? headerTableElem.clientHeight : 0;
   const overflowX = tableWidth > bodyWidth;
   const footerHeight = footerTableElem ? footerTableElem.clientHeight : 0;
-  reactData.scrollbarHeight = overflowX ? Math.max(scrollbarOpts.height || 0, xHandleEl.offsetHeight - xHandleEl.clientHeight) : 0;
+  reactData.scrollbarHeight = Math.max(scrollbarOpts.height || 0, xHandleEl.offsetHeight - xHandleEl.clientHeight);
   internalData.headerHeight = headerHeight;
   internalData.footerHeight = footerHeight;
   reactData.overflowX = overflowX;
@@ -1414,13 +1418,17 @@ function showDropTip($xeTable, evnt, trEl, thEl, showLine, dragPos) {
     return;
   }
   const {
+    overflowX,
     scrollbarWidth,
+    overflowY,
     scrollbarHeight
   } = reactData;
   const {
     prevDragToChild
   } = internalData;
   const wrapperRect = el.getBoundingClientRect();
+  const osbWidth = overflowY ? scrollbarWidth : 0;
+  const osbHeight = overflowX ? scrollbarHeight : 0;
   const tableWidth = el.clientWidth;
   const tableHeight = el.clientHeight;
   if (trEl) {
@@ -1431,14 +1439,14 @@ function showDropTip($xeTable, evnt, trEl, thEl, showLine, dragPos) {
         const trRect = trEl.getBoundingClientRect();
         let trHeight = trEl.clientHeight;
         const offsetTop = Math.max(1, trRect.y - wrapperRect.y);
-        if (offsetTop + trHeight > tableHeight - scrollbarHeight) {
-          trHeight = tableHeight - offsetTop - scrollbarHeight;
+        if (offsetTop + trHeight > tableHeight - osbHeight) {
+          trHeight = tableHeight - offsetTop - osbHeight;
         }
         rdLineEl.style.display = 'block';
-        rdLineEl.style.left = `${scrollbarYToLeft ? scrollbarWidth : 0}px`;
+        rdLineEl.style.left = `${scrollbarYToLeft ? osbWidth : 0}px`;
         rdLineEl.style.top = `${offsetTop}px`;
         rdLineEl.style.height = `${trHeight}px`;
-        rdLineEl.style.width = `${tableWidth - scrollbarWidth}px`;
+        rdLineEl.style.width = `${tableWidth - osbWidth}px`;
         rdLineEl.setAttribute('drag-pos', dragPos);
         rdLineEl.setAttribute('drag-to-child', prevDragToChild ? 'y' : 'n');
       } else {
@@ -1463,7 +1471,7 @@ function showDropTip($xeTable, evnt, trEl, thEl, showLine, dragPos) {
           thWidth -= startX - offsetLeft;
           offsetLeft = startX;
         }
-        const endX = tableWidth - rightContainerWidth - (rightContainerWidth ? 0 : scrollbarWidth);
+        const endX = tableWidth - rightContainerWidth - (rightContainerWidth ? 0 : osbWidth);
         if (offsetLeft + thWidth > endX) {
           thWidth = endX - offsetLeft;
         }
@@ -1474,7 +1482,7 @@ function showDropTip($xeTable, evnt, trEl, thEl, showLine, dragPos) {
         if (prevDragToChild) {
           cdLineEl.style.height = `${thRect.height}px`;
         } else {
-          cdLineEl.style.height = `${tableHeight - offsetTop - (scrollbarXToTop ? 0 : scrollbarHeight)}px`;
+          cdLineEl.style.height = `${tableHeight - offsetTop - (scrollbarXToTop ? 0 : osbHeight)}px`;
         }
         cdLineEl.setAttribute('drag-pos', dragPos);
         cdLineEl.setAttribute('drag-to-child', prevDragToChild ? 'y' : 'n');
@@ -1512,6 +1520,9 @@ function hideDropTip($xeTable) {
  */
 function handleTooltip($xeTable, evnt, tdEl, overflowElem, tipElem, params) {
   const reactData = $xeTable;
+  if (!overflowElem) {
+    return $xeTable.$nextTick();
+  }
   params.cell = tdEl;
   const {
     tooltipStore
@@ -1955,6 +1966,54 @@ function loadScrollYData($xeTable, scrollTop) {
     }
   }
 }
+function lazyScrollXData($xeTable) {
+  const internalData = $xeTable;
+  const {
+    lxTimeout,
+    lxRunTime,
+    scrollXStore
+  } = internalData;
+  const {
+    visibleSize
+  } = scrollXStore;
+  const fpsTime = Math.max(5, Math.min(10, Math.floor(visibleSize / 3)));
+  if (lxTimeout) {
+    clearTimeout(lxTimeout);
+  }
+  if (!lxRunTime || lxRunTime + fpsTime < Date.now()) {
+    internalData.lxRunTime = Date.now();
+    loadScrollXData($xeTable);
+  }
+  internalData.lxTimeout = setTimeout(() => {
+    internalData.lxTimeout = undefined;
+    internalData.lxRunTime = undefined;
+    loadScrollXData($xeTable);
+  }, fpsTime);
+}
+function lazyScrollYData($xeTable) {
+  const internalData = $xeTable;
+  const {
+    lyTimeout,
+    lyRunTime,
+    scrollYStore
+  } = internalData;
+  const {
+    visibleSize
+  } = scrollYStore;
+  const fpsTime = Math.floor(Math.max(4, Math.min(10, visibleSize / 3)));
+  if (lyTimeout) {
+    clearTimeout(lyTimeout);
+  }
+  if (!lyRunTime || lyRunTime + fpsTime < Date.now()) {
+    internalData.lyRunTime = Date.now();
+    loadScrollYData($xeTable);
+  }
+  internalData.lyTimeout = setTimeout(() => {
+    internalData.lyTimeout = undefined;
+    internalData.lyRunTime = undefined;
+    loadScrollYData($xeTable);
+  }, fpsTime);
+}
 function checkLastSyncScroll($xeTable, isRollX, isRollY) {
   const reactData = $xeTable;
   const internalData = $xeTable;
@@ -1991,6 +2050,43 @@ function checkLastSyncScroll($xeTable, isRollX, isRollY) {
     $xeTable.updateCellAreas();
   }, 200);
 }
+const getWheelSpeed = lastScrollTime => {
+  let multiple = 1;
+  const currTime = Date.now();
+  if (lastScrollTime + 25 > currTime) {
+    multiple = 1.18;
+  } else if (lastScrollTime + 30 > currTime) {
+    multiple = 1.15;
+  } else if (lastScrollTime + 40 > currTime) {
+    multiple = 1.12;
+  } else if (lastScrollTime + 55 > currTime) {
+    multiple = 1.09;
+  } else if (lastScrollTime + 75 > currTime) {
+    multiple = 1.06;
+  } else if (lastScrollTime + 100 > currTime) {
+    multiple = 1.03;
+  }
+  return multiple;
+};
+const wheelScrollTo = (diffNum, cb) => {
+  const duration = Math.abs(diffNum);
+  const startTime = performance.now();
+  let countTop = 0;
+  const step = timestamp => {
+    let progress = (timestamp - startTime) / duration;
+    if (progress > 1) {
+      progress = 1;
+    }
+    const easedProgress = Math.pow(progress, 2);
+    const offsetTop = Math.floor(diffNum * easedProgress) - countTop;
+    countTop += offsetTop;
+    cb(offsetTop);
+    if (progress < 1) {
+      requestAnimationFrame(step);
+    }
+  };
+  requestAnimationFrame(step);
+};
 function updateHeight($xeTable) {
   const internalData = $xeTable;
   internalData.customHeight = calcTableHeight($xeTable, 'height');
@@ -4121,6 +4217,7 @@ const Methods = {
       column
     } = params;
     const {
+      overflowX,
       scrollbarHeight
     } = reactData;
     const {
@@ -4128,6 +4225,7 @@ const Methods = {
       visibleColumn
     } = internalData;
     const resizableOpts = $xeTable.computeResizableOpts;
+    const osbHeight = overflowX ? scrollbarHeight : 0;
     const tableEl = $xeTable.$refs.refElem;
     const leftContainerElem = $xeTable.$refs.refLeftContainer;
     const rightContainerElem = $xeTable.$refs.refRightContainer;
@@ -4204,8 +4302,8 @@ const Methods = {
       dragLeft = Math.max(left, dragMinLeft);
       const resizeBarLeft = Math.max(1, dragLeft - scrollLeft);
       resizeBarElem.style.left = `${resizeBarLeft}px`;
-      resizeBarElem.style.top = `${scrollbarXToTop ? scrollbarHeight : 0}px`;
-      resizeBarElem.style.height = `${scrollbarXToTop ? tableHeight - scrollbarHeight : tableHeight}px`;
+      resizeBarElem.style.top = `${scrollbarXToTop ? osbHeight : 0}px`;
+      resizeBarElem.style.height = `${scrollbarXToTop ? tableHeight - osbHeight : tableHeight}px`;
       if (resizableOpts.showDragTip && resizeTipElem) {
         resizeTipElem.textContent = getI18n('vxe.table.resizeColTip', [resizeColumn.renderWidth + (isRightFixed ? dragPosLeft - dragLeft : dragLeft - dragPosLeft)]);
         const tableWidth = tableEl.clientWidth;
@@ -4321,13 +4419,17 @@ const Methods = {
       row
     } = params;
     const {
+      overflowX,
       scrollbarWidth,
+      overflowY,
       scrollbarHeight
     } = reactData;
     const {
       elemStore,
       fullAllDataRowIdData
     } = internalData;
+    const osbWidth = overflowY ? scrollbarWidth : 0;
+    const osbHeight = overflowX ? scrollbarHeight : 0;
     const scrollbarYToLeft = $xeTable.computeScrollbarYToLeft;
     const resizableOpts = $xeTable.computeResizableOpts;
     const rowOpts = $xeTable.computeRowOpts;
@@ -4370,15 +4472,15 @@ const Methods = {
     const updateEvent = evnt => {
       evnt.stopPropagation();
       evnt.preventDefault();
-      const tableWidth = tableEl.clientWidth - scrollbarWidth;
-      const tableHeight = tableEl.clientHeight - scrollbarHeight;
+      const tableWidth = tableEl.clientWidth - osbWidth;
+      const tableHeight = tableEl.clientHeight - osbHeight;
       let dragTop = evnt.clientY - tableRect.y - targetOffsetY;
       if (dragTop < minTop) {
         dragTop = minTop;
       } else {
         resizeHeight = Math.max(cellMinHeight, currCellHeight + evnt.clientY - dragClientY);
       }
-      resizeBarElem.style.left = `${scrollbarYToLeft ? scrollbarWidth : 0}px`;
+      resizeBarElem.style.left = `${scrollbarYToLeft ? osbWidth : 0}px`;
       resizeBarElem.style.top = `${dragTop}px`;
       resizeBarElem.style.width = `${tableWidth}px`;
       if (resizableOpts.showDragTip && resizeTipElem) {
@@ -8938,60 +9040,6 @@ const Methods = {
     }
     $xeTable.dispatchEvent('scroll', evntParams, evnt);
   },
-  lazyScrollXData() {
-    const $xeTable = this;
-    const internalData = $xeTable;
-    const {
-      lxTimeout,
-      lxRunTime,
-      scrollXStore
-    } = internalData;
-    const {
-      visibleSize
-    } = scrollXStore;
-    const fpsTime = Math.max(5, Math.min(80, Math.floor(visibleSize * 3)));
-    if (lxTimeout) {
-      clearTimeout(lxTimeout);
-    }
-    if (!lxRunTime || lxRunTime + fpsTime < Date.now()) {
-      internalData.lxRunTime = Date.now();
-      loadScrollXData($xeTable);
-    }
-    internalData.lxTimeout = setTimeout(() => {
-      internalData.lxTimeout = undefined;
-      internalData.lxRunTime = undefined;
-      loadScrollXData($xeTable);
-    }, fpsTime);
-  },
-  lazyScrollYData() {
-    const $xeTable = this;
-    const props = $xeTable;
-    const internalData = $xeTable;
-    const {
-      showOverflow
-    } = props;
-    const {
-      lyTimeout,
-      lyRunTime,
-      scrollYStore
-    } = internalData;
-    const {
-      visibleSize
-    } = scrollYStore;
-    const fpsTime = showOverflow ? 5 : Math.max(5, Math.min(80, Math.floor(visibleSize / 2)));
-    if (lyTimeout) {
-      clearTimeout(lyTimeout);
-    }
-    if (!lyRunTime || lyRunTime + fpsTime < Date.now()) {
-      internalData.lyRunTime = Date.now();
-      loadScrollYData($xeTable);
-    }
-    internalData.lyTimeout = setTimeout(() => {
-      internalData.lyTimeout = undefined;
-      internalData.lyRunTime = undefined;
-      loadScrollYData($xeTable);
-    }, fpsTime);
-  },
   /**
    * 横向 X 可视渲染事件处理
    */
@@ -9001,7 +9049,7 @@ const Methods = {
     if (sXOpts.immediate) {
       loadScrollXData($xeTable);
     } else {
-      $xeTable.lazyScrollXData();
+      lazyScrollXData($xeTable);
     }
   },
   /**
@@ -9013,7 +9061,7 @@ const Methods = {
     if (sYOpts.immediate) {
       loadScrollYData($xeTable);
     } else {
-      $xeTable.lazyScrollYData();
+      lazyScrollYData($xeTable);
     }
   },
   triggerBodyScrollEvent(evnt, fixedType) {
@@ -9219,22 +9267,9 @@ const Methods = {
     if (!bodyScrollElem) {
       return;
     }
-    let multiple = 1;
-    if (reactData.lastScrollTime + 25 > Date.now()) {
-      multiple = 1.18;
-    } else if (reactData.lastScrollTime + 30 > Date.now()) {
-      multiple = 1.15;
-    } else if (reactData.lastScrollTime + 40 > Date.now()) {
-      multiple = 1.12;
-    } else if (reactData.lastScrollTime + 55 > Date.now()) {
-      multiple = 1.09;
-    } else if (reactData.lastScrollTime + 75 > Date.now()) {
-      multiple = 1.06;
-    } else if (reactData.lastScrollTime + 100 > Date.now()) {
-      multiple = 1.03;
-    }
-    const deltaTop = deltaY * multiple;
-    const deltaLeft = deltaX * multiple;
+    const wheelSpeed = getWheelSpeed(reactData.lastScrollTime);
+    const deltaTop = deltaY * wheelSpeed;
+    const deltaLeft = deltaX * wheelSpeed;
     const isTopWheel = deltaTop < 0;
     const currScrollTop = bodyScrollElem.scrollTop;
     // 如果滚动位置已经是顶部或底部，则不需要触发
@@ -9251,16 +9286,29 @@ const Methods = {
       if (rowOpts.isHover || highlightHoverRow) {
         $xeTable.clearHoverRow();
       }
-      internalData.inWheelScroll = true;
-      (0, _dom.setScrollTop)(yHandleEl, scrollTop);
-      (0, _dom.setScrollTop)(bodyScrollElem, scrollTop);
-      (0, _dom.setScrollTop)(leftScrollElem, scrollTop);
-      (0, _dom.setScrollTop)(rightScrollElem, scrollTop);
-      loadScrollYData($xeTable, scrollTop);
-      $xeTable.handleScrollEvent(evnt, isRollY, isRollX, scrollTop, scrollLeft, {
-        type: 'footer',
-        fixed: ''
+      wheelScrollTo(scrollTop - bodyScrollElem.scrollTop, offsetTop => {
+        const currTopNum = bodyScrollElem.scrollTop + offsetTop;
+        internalData.inWheelScroll = true;
+        (0, _dom.setScrollTop)(yHandleEl, currTopNum);
+        (0, _dom.setScrollTop)(bodyScrollElem, currTopNum);
+        (0, _dom.setScrollTop)(leftScrollElem, currTopNum);
+        (0, _dom.setScrollTop)(rightScrollElem, currTopNum);
+        $xeTable.triggerScrollYEvent(evnt);
+        $xeTable.handleScrollEvent(evnt, isRollY, isRollX, currTopNum, scrollLeft, {
+          type: 'table',
+          fixed: ''
+        });
       });
+      // internalData.inWheelScroll = true
+      // setScrollTop(yHandleEl, scrollTop)
+      // setScrollTop(bodyScrollElem, scrollTop)
+      // setScrollTop(leftScrollElem, scrollTop)
+      // setScrollTop(rightScrollElem, scrollTop)
+      // loadScrollYData($xeTable, scrollTop)
+      // $xeTable.handleScrollEvent(evnt, isRollY, isRollX, scrollTop, scrollLeft, {
+      //   type: 'footer',
+      //   fixed: ''
+      // })
     }
   },
   triggerVirtualScrollXEvent(evnt) {