vxe-table 3.15.13 → 3.15.14

package/lib/table/src/methods.js

@@ -3624,42 +3624,54 @@ const createGetColumnCacheProp = prop => {
     return -1;
   };
 };
-// function lazyScrollXData ($xeTable: VxeTableConstructor & VxeTablePrivateMethods) {
-//   const internalData = $xeTable as unknown as TableInternalData
-//   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: VxeTableConstructor & VxeTablePrivateMethods) {
-//   const internalData = $xeTable as unknown as TableInternalData
-//   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 lazyScrollXData($xeTable) {
+  const internalData = $xeTable;
+  const {
+    lxTimeout,
+    lxRunTime,
+    scrollXStore
+  } = internalData;
+  const {
+    visibleSize
+  } = scrollXStore;
+  const fpsTime = visibleSize > 26 ? 26 : visibleSize > 16 ? 14 : 6;
+  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 = visibleSize > 30 ? 32 : visibleSize > 20 ? 18 : 8;
+  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;
@@ -10555,24 +10567,24 @@ const Methods = {
    */
   triggerScrollXEvent() {
     const $xeTable = this;
-    // const virtualXOpts = $xeTable.computeVirtualXOpts
-    // if (virtualXOpts.immediate) {
-    loadScrollXData($xeTable);
-    // } else {
-    //   lazyScrollXData($xeTable)
-    // }
+    const virtualXOpts = $xeTable.computeVirtualXOpts;
+    if (virtualXOpts.immediate) {
+      loadScrollXData($xeTable);
+    } else {
+      lazyScrollXData($xeTable);
+    }
   },
   /**
    * 纵向 Y 可视渲染事件处理
    */
   triggerScrollYEvent() {
     const $xeTable = this;
-    // const virtualYOpts = $xeTable.computeVirtualYOpts
-    // if (virtualYOpts.immediate) {
-    loadScrollYData($xeTable);
-    // } else {
-    //   lazyScrollYData($xeTable)
-    // }
+    const virtualYOpts = $xeTable.computeVirtualYOpts;
+    if (virtualYOpts.immediate) {
+      loadScrollYData($xeTable);
+    } else {
+      lazyScrollYData($xeTable);
+    }
   },
   triggerBodyScrollEvent(evnt, fixedType) {
     const $xeTable = this;
@@ -10838,8 +10850,8 @@ const Methods = {
     if (isRollX) {
       evnt.preventDefault();
       internalData.inWheelScroll = true;
-      wheelScrollLeftTo(scrollLeft, offsetLeft => {
-        const currLeftNum = offsetLeft;
+      if (browseObj['-moz'] || browseObj.safari) {
+        const currLeftNum = scrollLeft;
         (0, _dom.setScrollLeft)(xHandleEl, currLeftNum);
         (0, _dom.setScrollLeft)(bodyScrollElem, currLeftNum);
         (0, _dom.setScrollLeft)(headerScrollElem, currLeftNum);
@@ -10851,13 +10863,27 @@ const Methods = {
           type: 'table',
           fixed: ''
         });
-      });
+      } else {
+        wheelScrollLeftTo(scrollLeft, offsetLeft => {
+          const currLeftNum = offsetLeft;
+          (0, _dom.setScrollLeft)(xHandleEl, currLeftNum);
+          (0, _dom.setScrollLeft)(bodyScrollElem, currLeftNum);
+          (0, _dom.setScrollLeft)(headerScrollElem, currLeftNum);
+          (0, _dom.setScrollLeft)(footerScrollElem, currLeftNum);
+          if (scrollXLoad) {
+            $xeTable.triggerScrollXEvent(evnt);
+          }
+          $xeTable.handleScrollEvent(evnt, isRollY, isRollX, bodyScrollElem.scrollTop, currLeftNum, {
+            type: 'table',
+            fixed: ''
+          });
+        });
+      }
     }
     if (isRollY) {
       evnt.preventDefault();
-      wheelScrollTopTo(scrollTop - currScrollTop, offsetTop => {
-        const currTopNum = bodyScrollElem.scrollTop + offsetTop;
-        internalData.inWheelScroll = true;
+      if (browseObj['-moz'] || browseObj.safari) {
+        const currTopNum = scrollTop;
         (0, _dom.setScrollTop)(yHandleEl, currTopNum);
         (0, _dom.setScrollTop)(bodyScrollElem, currTopNum);
         (0, _dom.setScrollTop)(leftScrollElem, currTopNum);
@@ -10870,7 +10896,24 @@ const Methods = {
           type: 'table',
           fixed: ''
         });
-      });
+      } else {
+        wheelScrollTopTo(scrollTop - currScrollTop, 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);
+          (0, _dom.setScrollTop)(rowExpandEl, currTopNum);
+          if (scrollYLoad) {
+            $xeTable.triggerScrollYEvent(evnt);
+          }
+          $xeTable.handleScrollEvent(evnt, isRollY, isRollX, currTopNum, bodyScrollElem.scrollLeft, {
+            type: 'table',
+            fixed: ''
+          });
+        });
+      }
     }
   },
   triggerVirtualScrollXEvent(evnt) {
@@ -11034,20 +11077,18 @@ const Methods = {
         ySpaceWidth = maxXWidth;
         isScrollXBig = true;
       }
-      let marginLeft = '';
-      if (scrollXLoad && overflowX) {
-        marginLeft = `${xSpaceLeft}px`;
+      if (!(scrollXLoad && overflowX)) {
+        xSpaceLeft = 0;
       }
       if (headerTableElem) {
-        headerTableElem.style.marginLeft = headerTableElem.getAttribute('xvm') ? marginLeft : '';
+        headerTableElem.style.transform = headerTableElem.getAttribute('xvm') ? `translate(${xSpaceLeft}px, 0px)` : '';
       }
       if (bodyTableElem) {
-        bodyTableElem.style.marginLeft = marginLeft;
+        bodyTableElem.style.transform = `translate(${xSpaceLeft}px, ${reactData.scrollYTop || 0}px)`;
       }
       if (footerTableElem) {
-        footerTableElem.style.marginLeft = footerTableElem.getAttribute('xvm') ? marginLeft : '';
+        footerTableElem.style.transform = footerTableElem.getAttribute('xvm') ? `translate(${xSpaceLeft}px, 0px)` : '';
       }
-      reactData.isScrollXBig = isScrollXBig;
       const containerList = ['main'];
       containerList.forEach(name => {
         const layoutList = ['header', 'body', 'footer'];
@@ -11058,6 +11099,9 @@ const Methods = {
           }
         });
       });
+      reactData.scrollXLeft = xSpaceLeft;
+      reactData.scrollXWidth = ySpaceWidth;
+      reactData.isScrollXBig = isScrollXBig;
       const scrollXSpaceEl = $xeTable.$refs.refScrollXSpaceElem;
       if (scrollXSpaceEl) {
         scrollXSpaceEl.style.width = `${ySpaceWidth}px`;
@@ -11108,6 +11152,8 @@ const Methods = {
     const defaultRowHeight = $xeTable.computeDefaultRowHeight;
     const bodyScrollElem = (0, _util.getRefElem)(elemStore['main-body-scroll']);
     const bodyTableElem = (0, _util.getRefElem)(elemStore['main-body-table']);
+    const leftBodyTableElem = (0, _util.getRefElem)(elemStore['left-body-table']);
+    const rightbodyTableElem = (0, _util.getRefElem)(elemStore['right-body-table']);
     const containerList = ['main', 'left', 'right'];
     let ySpaceTop = 0;
     let scrollYHeight = 0;
@@ -11158,12 +11204,17 @@ const Methods = {
       }
       ySpaceHeight = maxYHeight;
     }
+    if (leftBodyTableElem) {
+      leftBodyTableElem.style.transform = `translate(0px, ${scrollYTop}px)`;
+    }
+    if (bodyTableElem) {
+      bodyTableElem.style.transform = `translate(${reactData.scrollXLeft || 0}px, ${scrollYTop}px)`;
+    }
+    if (rightbodyTableElem) {
+      rightbodyTableElem.style.transform = `translate(0px, ${scrollYTop}px)`;
+    }
     containerList.forEach(name => {
       const layoutList = ['header', 'body', 'footer'];
-      const tableElem = (0, _util.getRefElem)(elemStore[`${name}-body-table`]);
-      if (tableElem) {
-        tableElem.style.marginTop = scrollYTop ? `${scrollYTop}px` : '';
-      }
       layoutList.forEach(layout => {
         const ySpaceElem = (0, _util.getRefElem)(elemStore[`${name}-${layout}-ySpace`]);
         if (ySpaceElem) {