vxe-gantt 4.0.6 → 4.0.7

package/lib/index.umd.js

@@ -2780,7 +2780,7 @@ var core_ = __webpack_require__(4345);
 const {
   log
 } = core_.VxeUI;
-const version = `gantt v${"4.0.6"}`;
+const version = `gantt v${"4.0.7"}`;
 const warnLog = log.create('warn', version);
 const errLog = log.create('error', version);
 ;// ./packages/ui/index.ts
@@ -2791,7 +2791,7 @@ const {
   setIcon,
   checkVersion
 } = core_.VxeUI;
-core_.VxeUI.ganttVersion = "4.0.6";
+core_.VxeUI.ganttVersion = "4.0.7";
 setConfig({
   gantt: {
     // size: null,
@@ -3335,10 +3335,12 @@ const {
     const refHeaderXSpace = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.ref)();
     const renderVN = () => {
       const {
-        tableColumn,
         headerGroups,
         viewCellWidth
       } = reactData;
+      const {
+        visibleColumn
+      } = internalData;
       return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
         ref: refElem,
         class: 'vxe-gantt-view--header-wrapper'
@@ -3352,7 +3354,7 @@ const {
       }), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('table', {
         ref: refHeaderTable,
         class: 'vxe-gantt-view--header-table'
-      }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('colgroup', {}, tableColumn.map((column, cIndex) => {
+      }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('colgroup', {}, visibleColumn.map((column, cIndex) => {
         return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('col', {
           key: cIndex,
           style: {
@@ -3944,6 +3946,7 @@ const {
 function createInternalData() {
   return {
     xeTable: null,
+    visibleColumn: [],
     startMaps: {},
     endMaps: {},
     chartMaps: {},
@@ -3958,16 +3961,9 @@ function createInternalData() {
       startIndex: 0,
       endIndex: 0
     },
-    // 存放纵向 Y 虚拟滚动相关信息
-    scrollYStore: {
-      preloadSize: 0,
-      offsetSize: 0,
-      visibleSize: 0,
-      visibleStartIndex: 0,
-      visibleEndIndex: 0,
-      startIndex: 0,
-      endIndex: 0
-    }
+    // 最后滚动位置
+    lastScrollTop: 0,
+    lastScrollLeft: 0
   };
 }
 const maxYHeight = 5e6;
@@ -4012,6 +4008,8 @@ const maxYHeight = 5e6;
       scrollbarWidth: 0,
       // 横向滚动条的高度
       scrollbarHeight: 0,
+      // 最后滚动时间戳
+      lastScrollTime: 0,
       lazScrollLoading: false,
       scrollVMLoading: false,
       scrollYHeight: 0,
@@ -4061,9 +4059,14 @@ const maxYHeight = 5e6;
         minViewDate,
         maxViewDate
       } = reactData;
+      const {
+        scrollXStore
+      } = internalData;
       const minScale = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().last(taskScaleList);
       const fullCols = [];
       const groupCols = [];
+      scrollXStore.startIndex = 0;
+      scrollXStore.endIndex = 1;
       if (minScale && minViewDate && maxViewDate) {
         const minSType = minScale.type;
         const weekScale = taskScaleList.find(item => item.type === 'week');
@@ -4086,37 +4089,37 @@ const maxYHeight = 5e6;
         const currTime = minViewDate.getTime();
         const diffDayNum = maxViewDate.getTime() - minViewDate.getTime();
         const countSize = Math.max(5, Math.floor(diffDayNum / gapTime) + 1);
-        switch (minScale.type) {
-          case 'day':
-          case 'date':
-            if (diffDayNum > 1000 * 60 * 60 * 24 * 366 * 3) {
-              reactData.tableColumn = [];
-              reactData.headerGroups = [];
-              return;
-            }
-            break;
-          case 'hour':
-            if (diffDayNum > 1000 * 60 * 60 * 24 * 31 * 3) {
-              reactData.tableColumn = [];
-              reactData.headerGroups = [];
-              return;
-            }
-            break;
-          case 'minute':
-            if (diffDayNum > 1000 * 60 * 60 * 24 * 3) {
-              reactData.tableColumn = [];
-              reactData.headerGroups = [];
-              return;
-            }
-            break;
-          case 'second':
-            if (diffDayNum > 1000 * 60 * 60 * 3) {
-              reactData.tableColumn = [];
-              reactData.headerGroups = [];
-              return;
-            }
-            break;
-        }
+        // switch (minScale.type) {
+        //   case 'day':
+        //   case 'date':
+        //     if (diffDayNum > (1000 * 60 * 60 * 24 * 366 * 3)) {
+        //       reactData.tableColumn = []
+        //       reactData.headerGroups = []
+        //       return
+        //     }
+        //     break
+        //   case 'hour':
+        //     if (diffDayNum > (1000 * 60 * 60 * 24 * 31 * 3)) {
+        //       reactData.tableColumn = []
+        //       reactData.headerGroups = []
+        //       return
+        //     }
+        //     break
+        //   case 'minute':
+        //     if (diffDayNum > (1000 * 60 * 60 * 24 * 3)) {
+        //       reactData.tableColumn = []
+        //       reactData.headerGroups = []
+        //       return
+        //     }
+        //     break
+        //   case 'second':
+        //     if (diffDayNum > (1000 * 60 * 60 * 3)) {
+        //       reactData.tableColumn = []
+        //       reactData.headerGroups = []
+        //       return
+        //     }
+        //     break
+        // }
         const renderListMaps = {
           year: [],
           quarter: [],
@@ -4316,8 +4319,10 @@ const maxYHeight = 5e6;
           internalData.chartMaps = ctMaps;
         }
       }
-      reactData.tableColumn = fullCols;
+      internalData.visibleColumn = fullCols;
       reactData.headerGroups = groupCols;
+      updateScrollXStatus();
+      handleTableColumn();
     };
     const handleUpdateData = () => {
       const ganttProps = $xeGantt.props;
@@ -4429,11 +4434,12 @@ const maxYHeight = 5e6;
       const {
         scrollbarWidth,
         scrollbarHeight,
-        tableColumn,
-        headerGroups
+        headerGroups,
+        tableColumn
       } = reactData;
       const {
-        elemStore
+        elemStore,
+        visibleColumn
       } = internalData;
       const $xeTable = internalData.xeTable;
       const el = refElem.value;
@@ -4515,37 +4521,230 @@ const maxYHeight = 5e6;
         yBottomCornerEl.style.display = tFooterHeight ? 'block' : '';
       }
       const colInfoElem = refColInfoElem.value;
+      let viewCellWidth = 40;
       if (colInfoElem) {
-        reactData.viewCellWidth = colInfoElem.clientWidth || 40;
+        viewCellWidth = colInfoElem.clientWidth || 40;
       }
-      let viewTableWidth = reactData.viewCellWidth * tableColumn.length;
+      let viewTableWidth = viewCellWidth * visibleColumn.length;
       if (bodyScrollElem) {
         const viewWidth = bodyScrollElem.clientWidth;
         const remainWidth = viewWidth - viewTableWidth;
         if (remainWidth > 0) {
-          reactData.viewCellWidth += Math.floor(remainWidth / tableColumn.length);
+          viewCellWidth += Math.floor(remainWidth / visibleColumn.length);
           viewTableWidth = viewWidth;
         }
       }
+      reactData.viewCellWidth = viewCellWidth;
       const headerTableElem = getRefElem(elemStore['main-header-table']);
       const bodyTableElem = getRefElem(elemStore['main-body-table']);
+      const vmTableWidth = viewCellWidth * tableColumn.length;
       if (headerTableElem) {
         headerTableElem.style.width = `${viewTableWidth}px`;
       }
       if (bodyTableElem) {
-        bodyTableElem.style.width = `${viewTableWidth}px`;
+        bodyTableElem.style.width = `${vmTableWidth}px`;
       }
       reactData.scrollXWidth = viewTableWidth;
       return updateChart();
     };
-    const handleLazyRecalculate = () => {
+    const handleRecalculateStyle = () => {
+      const el = refElem.value;
+      internalData.rceRunTime = Date.now();
+      if (!el || !el.clientWidth) {
+        return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.nextTick)();
+      }
       calcScrollbar();
       updateStyle();
       updateChart();
+      return computeScrollLoad();
+    };
+    const handleLazyRecalculate = () => {
+      return new Promise(resolve => {
+        const {
+          rceTimeout,
+          rceRunTime
+        } = internalData;
+        const $xeTable = internalData.xeTable;
+        let refreshDelay = 50;
+        if ($xeTable) {
+          const {
+            computeResizeOpts
+          } = $xeTable.getComputeMaps();
+          const resizeOpts = computeResizeOpts.value;
+          refreshDelay = resizeOpts.refreshDelay || 50;
+        }
+        if (rceTimeout) {
+          clearTimeout(rceTimeout);
+          if (rceRunTime && rceRunTime + (refreshDelay - 5) < Date.now()) {
+            resolve(handleRecalculateStyle());
+          } else {
+            (0,external_commonjs_vue_commonjs2_vue_root_Vue_.nextTick)(() => {
+              resolve();
+            });
+          }
+        } else {
+          resolve(handleRecalculateStyle());
+        }
+        internalData.rceTimeout = setTimeout(() => {
+          internalData.rceTimeout = undefined;
+          handleRecalculateStyle();
+        }, refreshDelay);
+      });
+    };
+    const computeScrollLoad = () => {
+      return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.nextTick)().then(() => {
+        const {
+          scrollXLoad
+        } = reactData;
+        const {
+          scrollXStore
+        } = internalData;
+        // 计算 X 逻辑
+        if (scrollXLoad) {
+          const {
+            toVisibleIndex: toXVisibleIndex,
+            visibleSize: visibleXSize
+          } = handleVirtualXVisible();
+          const offsetXSize = 2;
+          scrollXStore.preloadSize = 1;
+          scrollXStore.offsetSize = offsetXSize;
+          scrollXStore.visibleSize = visibleXSize;
+          scrollXStore.endIndex = Math.max(scrollXStore.startIndex + scrollXStore.visibleSize + offsetXSize, scrollXStore.endIndex);
+          scrollXStore.visibleStartIndex = Math.max(scrollXStore.startIndex, toXVisibleIndex);
+          scrollXStore.visibleEndIndex = Math.min(scrollXStore.endIndex, toXVisibleIndex + visibleXSize);
+          updateScrollXData().then(() => {
+            loadScrollXData();
+          });
+        } else {
+          updateScrollXSpace();
+        }
+      });
+    };
+    const handleVirtualXVisible = () => {
+      const {
+        viewCellWidth
+      } = reactData;
+      const {
+        elemStore
+      } = internalData;
+      const bodyScrollElem = getRefElem(elemStore['main-body-scroll']);
+      if (bodyScrollElem) {
+        const clientWidth = bodyScrollElem.clientWidth;
+        const scrollLeft = bodyScrollElem.scrollLeft;
+        const toVisibleIndex = Math.floor(scrollLeft / viewCellWidth) - 1;
+        const visibleSize = Math.ceil(clientWidth / viewCellWidth) + 1;
+        return {
+          toVisibleIndex: Math.max(0, toVisibleIndex),
+          visibleSize: Math.max(1, visibleSize)
+        };
+      }
+      return {
+        toVisibleIndex: 0,
+        visibleSize: 6
+      };
+    };
+    const loadScrollXData = () => {
+      const {
+        isScrollXBig
+      } = reactData;
+      const {
+        scrollXStore
+      } = internalData;
+      const {
+        preloadSize,
+        startIndex,
+        endIndex,
+        offsetSize
+      } = scrollXStore;
+      const {
+        toVisibleIndex,
+        visibleSize
+      } = handleVirtualXVisible();
+      const offsetItem = {
+        startIndex: Math.max(0, isScrollXBig ? toVisibleIndex - 1 : toVisibleIndex - 1 - offsetSize - preloadSize),
+        endIndex: isScrollXBig ? toVisibleIndex + visibleSize : toVisibleIndex + visibleSize + offsetSize + preloadSize
+      };
+      scrollXStore.visibleStartIndex = toVisibleIndex - 1;
+      scrollXStore.visibleEndIndex = toVisibleIndex + visibleSize + 1;
+      const {
+        startIndex: offsetStartIndex,
+        endIndex: offsetEndIndex
+      } = offsetItem;
+      if (toVisibleIndex <= startIndex || toVisibleIndex >= endIndex - visibleSize - 1) {
+        if (startIndex !== offsetStartIndex || endIndex !== offsetEndIndex) {
+          scrollXStore.startIndex = offsetStartIndex;
+          scrollXStore.endIndex = offsetEndIndex;
+          updateScrollXData();
+        }
+      }
+    };
+    const updateScrollXData = () => {
+      handleTableColumn();
+      updateScrollXSpace();
+      return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.nextTick)();
+    };
+    const updateScrollXStatus = () => {
+      const scrollXLoad = true;
+      reactData.scrollXLoad = scrollXLoad;
+      return scrollXLoad;
+    };
+    const handleTableColumn = () => {
+      const {
+        scrollXLoad
+      } = reactData;
+      const {
+        visibleColumn,
+        scrollXStore
+      } = internalData;
+      const tableColumn = scrollXLoad ? visibleColumn.slice(scrollXStore.startIndex, scrollXStore.endIndex) : visibleColumn.slice(0);
+      reactData.tableColumn = tableColumn;
+    };
+    const updateScrollXSpace = () => {
+      const {
+        scrollXLoad,
+        scrollXWidth,
+        viewCellWidth
+      } = reactData;
+      const {
+        elemStore,
+        scrollXStore
+      } = internalData;
+      const bodyTableElem = getRefElem(elemStore['main-body-table']);
+      // const headerTableElem = getRefElem(elemStore['main-header-table'])
+      // const footerTableElem = getRefElem(elemStore['main-footer-table'])
+      const {
+        startIndex
+      } = scrollXStore;
+      let xSpaceLeft = 0;
+      if (scrollXLoad) {
+        xSpaceLeft = Math.max(0, startIndex * viewCellWidth);
+      }
+      // if (headerTableElem) {
+      //   headerTableElem.style.transform = `translate(${xSpaceLeft}px, 0px)`
+      // }
+      if (bodyTableElem) {
+        bodyTableElem.style.transform = `translate(${xSpaceLeft}px, ${reactData.scrollYTop || 0}px)`;
+      }
+      // if (footerTableElem) {
+      //   footerTableElem.style.transform = `translate(${xSpaceLeft}px, 0px)`
+      // }
+      const layoutList = ['header', 'body', 'footer'];
+      layoutList.forEach(layout => {
+        const xSpaceElem = getRefElem(elemStore[`main-${layout}-xSpace`]);
+        if (xSpaceElem) {
+          xSpaceElem.style.width = scrollXLoad ? `${scrollXWidth}px` : '';
+        }
+      });
+      const scrollXSpaceEl = refScrollXSpaceElem.value;
+      if (scrollXSpaceEl) {
+        scrollXSpaceEl.style.width = `${scrollXWidth}px`;
+      }
+      calcScrollbar();
       return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.nextTick)();
     };
-    // const updateScrollXSpace = () => {
-    // }
+    const triggerScrollXEvent = () => {
+      loadScrollXData();
+    };
     const updateScrollYSpace = () => {
       const {
         elemStore
@@ -4623,6 +4822,13 @@ const maxYHeight = 5e6;
     };
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     const handleScrollEvent = (evnt, isRollY, isRollX, scrollTop, scrollLeft) => {
+      if (isRollX) {
+        internalData.lastScrollLeft = scrollLeft;
+      }
+      if (isRollY) {
+        internalData.lastScrollTop = scrollTop;
+      }
+      reactData.lastScrollTime = Date.now();
       checkLastSyncScroll(isRollX, isRollY);
     };
     const ganttViewMethods = {
@@ -4728,11 +4934,16 @@ const maxYHeight = 5e6;
         }
       },
       triggerBodyScrollEvent(evnt) {
+        const {
+          scrollXLoad
+        } = reactData;
         const {
           elemStore,
           inVirtualScroll,
           inHeaderScroll,
-          inFooterScroll
+          inFooterScroll,
+          lastScrollLeft,
+          lastScrollTop
         } = internalData;
         if (inVirtualScroll) {
           return;
@@ -4744,40 +4955,46 @@ const maxYHeight = 5e6;
         const headerScrollElem = getRefElem(elemStore['main-header-scroll']);
         const xHandleEl = refScrollXHandleElem.value;
         const yHandleEl = refScrollYHandleElem.value;
-        if (headerScrollElem && wrapperEl) {
-          const isRollX = true;
-          const isRollY = true;
-          const currLeftNum = wrapperEl.scrollLeft;
-          const currTopNum = wrapperEl.scrollTop;
-          internalData.inBodyScroll = true;
-          setScrollLeft(xHandleEl, currLeftNum);
-          setScrollLeft(headerScrollElem, currLeftNum);
-          setScrollTop(yHandleEl, currTopNum);
-          syncTableScrollTop(currTopNum);
-          handleScrollEvent(evnt, isRollY, isRollX, wrapperEl.scrollTop, currLeftNum);
+        const scrollLeft = wrapperEl.scrollLeft;
+        const scrollTop = wrapperEl.scrollTop;
+        const isRollX = scrollLeft !== lastScrollLeft;
+        const isRollY = scrollTop !== lastScrollTop;
+        internalData.inBodyScroll = true;
+        internalData.scrollRenderType = '';
+        if (isRollY) {
+          setScrollTop(yHandleEl, scrollTop);
+          syncTableScrollTop(scrollTop);
         }
-      },
-      triggerFooterScrollEvent(evnt) {
-        const {
-          inVirtualScroll,
-          inHeaderScroll,
-          inBodyScroll
-        } = internalData;
-        if (inVirtualScroll) {
-          return;
-        }
-        if (inHeaderScroll || inBodyScroll) {
-          return;
-        }
-        const wrapperEl = evnt.currentTarget;
-        if (wrapperEl) {
-          const isRollX = true;
-          const isRollY = false;
-          const currLeftNum = wrapperEl.scrollLeft;
-          handleScrollEvent(evnt, isRollY, isRollX, wrapperEl.scrollTop, currLeftNum);
+        if (isRollX) {
+          internalData.inBodyScroll = true;
+          setScrollLeft(xHandleEl, scrollLeft);
+          setScrollLeft(headerScrollElem, scrollLeft);
+          if (scrollXLoad) {
+            triggerScrollXEvent();
+          }
         }
+        handleScrollEvent(evnt, isRollY, isRollX, wrapperEl.scrollTop, scrollLeft);
       },
+      // triggerFooterScrollEvent (evnt) {
+      //   const { inVirtualScroll, inHeaderScroll, inBodyScroll } = internalData
+      //   if (inVirtualScroll) {
+      //     return
+      //   }
+      //   if (inHeaderScroll || inBodyScroll) {
+      //     return
+      //   }
+      //   const wrapperEl = evnt.currentTarget as HTMLDivElement
+      //   if (wrapperEl) {
+      //     const isRollX = true
+      //     const isRollY = false
+      //     const currLeftNum = wrapperEl.scrollLeft
+      //     handleScrollEvent(evnt, isRollY, isRollX, wrapperEl.scrollTop, currLeftNum)
+      //   }
+      // },
       triggerVirtualScrollXEvent(evnt) {
+        const {
+          scrollXLoad
+        } = reactData;
         const {
           elemStore,
           inHeaderScroll,
@@ -4796,6 +5013,9 @@ const maxYHeight = 5e6;
           internalData.inVirtualScroll = true;
           setScrollLeft(headerScrollElem, currLeftNum);
           setScrollLeft(bodyScrollElem, currLeftNum);
+          if (scrollXLoad) {
+            triggerScrollXEvent();
+          }
           handleScrollEvent(evnt, isRollY, isRollX, wrapperEl.scrollTop, currLeftNum);
         }
       },
@@ -4821,28 +5041,11 @@ const maxYHeight = 5e6;
         }
       },
       handleUpdateSXSpace() {
-        const {
-          scrollXLoad,
-          scrollXWidth
-        } = reactData;
-        const {
-          elemStore
-        } = internalData;
-        const layoutList = ['header', 'body', 'footer'];
-        layoutList.forEach(layout => {
-          const xSpaceElem = getRefElem(elemStore[`main-${layout}-xSpace`]);
-          if (xSpaceElem) {
-            xSpaceElem.style.width = scrollXLoad ? `${scrollXWidth}px` : '';
-          }
-        });
-        const scrollXSpaceEl = refScrollXSpaceElem.value;
-        if (scrollXSpaceEl) {
-          scrollXSpaceEl.style.width = `${scrollXWidth}px`;
-        }
-        calcScrollbar();
-        return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.nextTick)();
+        return updateScrollXSpace();
+      },
+      handleUpdateSYSpace() {
+        return updateScrollYSpace();
       },
-      handleUpdateSYSpace: updateScrollYSpace,
       handleUpdateSYStatus(sYLoad) {
         reactData.scrollYLoad = sYLoad;
       }
@@ -5792,20 +5995,20 @@ function getViewTypeLevel(type) {
         let tipHeight = 0;
         if (rsNumLeftEl) {
           if (offsetLeft < 0) {
+            rsNumLeftEl.style.display = 'none';
+          } else {
             rsNumLeftEl.textContent = `${targetTableWidth}px`;
             rsNumLeftEl.style.display = 'block';
             tipHeight = rsNumLeftEl.offsetHeight;
-          } else {
-            rsNumLeftEl.style.display = 'none';
           }
         }
         if (rsNumRightEl) {
           if (offsetLeft < 0) {
-            rsNumRightEl.style.display = 'none';
-          } else {
             rsNumRightEl.textContent = `${Math.floor(containerRect.width - targetTableWidth)}px`;
             rsNumRightEl.style.display = 'block';
             tipHeight = rsNumRightEl.offsetHeight;
+          } else {
+            rsNumRightEl.style.display = 'none';
           }
         }
         const tipTop = evnt.clientY - containerRect.top - tipHeight / 2;
@@ -7069,9 +7272,9 @@ function getViewTypeLevel(type) {
               class: 'vxe-gantt--resizable-split-tip-number'
             }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
               class: 'vxe-gantt--resizable-split-number-left'
-            }, '10px'), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
+            }), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
               class: 'vxe-gantt--resizable-split-number-right'
-            }, '20px')])]), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
+            })])]), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
               class: 'vxe-gantt--border-line'
             })]));
             break;