vxe-gantt 4.0.6 → 4.0.8

package/lib/gantt/src/gantt-view.js

@@ -20,6 +20,7 @@ const {
 function createInternalData() {
   return {
     xeTable: null,
+    visibleColumn: [],
     startMaps: {},
     endMaps: {},
     chartMaps: {},
@@ -34,16 +35,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;
@@ -88,6 +82,8 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
       scrollbarWidth: 0,
       // 横向滚动条的高度
       scrollbarHeight: 0,
+      // 最后滚动时间戳
+      lastScrollTime: 0,
       lazScrollLoading: false,
       scrollVMLoading: false,
       scrollYHeight: 0,
@@ -162,37 +158,37 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
         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: [],
@@ -352,13 +348,20 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
           const startField = computeStartField.value;
           const endField = computeEndField.value;
           const {
+            computeAggregateOpts,
             computeTreeOpts
           } = $xeTable.getComputeMaps();
+          const tableReactData = $xeTable.reactData;
+          const {
+            isRowGroupStatus
+          } = tableReactData;
           const tableInternalData = $xeTable.internalData;
           const {
             afterFullData,
-            afterTreeFullData
+            afterTreeFullData,
+            afterGroupFullData
           } = tableInternalData;
+          const aggregateOpts = computeAggregateOpts.value;
           const treeOpts = computeTreeOpts.value;
           const {
             transform
@@ -382,7 +385,16 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
               };
             }
           };
-          if (treeConfig) {
+          if (isRowGroupStatus) {
+            // 行分组
+            const mapChildrenField = aggregateOpts.mapChildrenField;
+            if (mapChildrenField) {
+              _xeUtils.default.eachTree(afterGroupFullData, handleParseRender, {
+                children: mapChildrenField
+              });
+            }
+          } else if (treeConfig) {
+            // 树结构
             _xeUtils.default.eachTree(afterTreeFullData, handleParseRender, {
               children: transform ? treeOpts.mapChildrenField : childrenField
             });
@@ -392,14 +404,19 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
           internalData.chartMaps = ctMaps;
         }
       }
-      reactData.tableColumn = fullCols;
+      internalData.visibleColumn = fullCols;
       reactData.headerGroups = groupCols;
+      updateScrollXStatus();
+      handleTableColumn();
     };
     const handleUpdateData = () => {
       const ganttProps = $xeGantt.props;
       const {
         treeConfig
       } = ganttProps;
+      const {
+        scrollXStore
+      } = internalData;
       const $xeTable = internalData.xeTable;
       const sdMaps = {};
       const edMaps = {};
@@ -409,13 +426,20 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
         const startField = computeStartField.value;
         const endField = computeEndField.value;
         const {
+          computeAggregateOpts,
           computeTreeOpts
         } = $xeTable.getComputeMaps();
+        const tableReactData = $xeTable.reactData;
+        const {
+          isRowGroupStatus
+        } = tableReactData;
         const tableInternalData = $xeTable.internalData;
         const {
           afterFullData,
-          afterTreeFullData
+          afterTreeFullData,
+          afterGroupFullData
         } = tableInternalData;
+        const aggregateOpts = computeAggregateOpts.value;
         const treeOpts = computeTreeOpts.value;
         const {
           transform
@@ -435,7 +459,16 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
             }
           }
         };
-        if (treeConfig) {
+        if (isRowGroupStatus) {
+          // 行分组
+          const mapChildrenField = aggregateOpts.mapChildrenField;
+          if (mapChildrenField) {
+            _xeUtils.default.eachTree(afterGroupFullData, handleMinMaxData, {
+              children: mapChildrenField
+            });
+          }
+        } else if (treeConfig) {
+          // 树结构
           _xeUtils.default.eachTree(afterTreeFullData, handleMinMaxData, {
             children: transform ? treeOpts.mapChildrenField : childrenField
           });
@@ -443,6 +476,8 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
           afterFullData.forEach(handleMinMaxData);
         }
       }
+      scrollXStore.startIndex = 0;
+      scrollXStore.endIndex = Math.max(1, scrollXStore.visibleSize);
       reactData.minViewDate = minDate;
       reactData.maxViewDate = maxDate;
       internalData.startMaps = sdMaps;
@@ -493,10 +528,8 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
           }
           const rowid = rowEl.getAttribute('rowid');
           const rowRest = rowid ? chartMaps[rowid] : null;
-          if (rowRest) {
-            barEl.style.left = `${viewCellWidth * rowRest.oLeftSize}px`;
-            barEl.style.width = `${viewCellWidth * rowRest.oWidthSize}px`;
-          }
+          barEl.style.left = `${rowRest ? viewCellWidth * rowRest.oLeftSize : 0}px`;
+          barEl.style.width = `${rowRest ? viewCellWidth * rowRest.oWidthSize : 0}px`;
         });
       }
       return (0, _vue.nextTick)();
@@ -505,11 +538,12 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
       const {
         scrollbarWidth,
         scrollbarHeight,
-        tableColumn,
-        headerGroups
+        headerGroups,
+        tableColumn
       } = reactData;
       const {
-        elemStore
+        elemStore,
+        visibleColumn
       } = internalData;
       const $xeTable = internalData.xeTable;
       const el = refElem.value;
@@ -591,37 +625,230 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
         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 = (0, _util.getRefElem)(elemStore['main-header-table']);
       const bodyTableElem = (0, _util.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, _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, _vue.nextTick)(() => {
+              resolve();
+            });
+          }
+        } else {
+          resolve(handleRecalculateStyle());
+        }
+        internalData.rceTimeout = setTimeout(() => {
+          internalData.rceTimeout = undefined;
+          handleRecalculateStyle();
+        }, refreshDelay);
+      });
+    };
+    const computeScrollLoad = () => {
+      return (0, _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 = (0, _util.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, _vue.nextTick)();
     };
-    // const updateScrollXSpace = () => {
-    // }
+    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 = (0, _util.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 = (0, _util.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, _vue.nextTick)();
+    };
+    const triggerScrollXEvent = () => {
+      loadScrollXData();
+    };
     const updateScrollYSpace = () => {
       const {
         elemStore
@@ -699,6 +926,13 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
     };
     // 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 = {
@@ -804,11 +1038,16 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
         }
       },
       triggerBodyScrollEvent(evnt) {
+        const {
+          scrollXLoad
+        } = reactData;
         const {
           elemStore,
           inVirtualScroll,
           inHeaderScroll,
-          inFooterScroll
+          inFooterScroll,
+          lastScrollLeft,
+          lastScrollTop
         } = internalData;
         if (inVirtualScroll) {
           return;
@@ -820,40 +1059,46 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
         const headerScrollElem = (0, _util.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;
-          (0, _dom.setScrollLeft)(xHandleEl, currLeftNum);
-          (0, _dom.setScrollLeft)(headerScrollElem, currLeftNum);
-          (0, _dom.setScrollTop)(yHandleEl, currTopNum);
-          syncTableScrollTop(currTopNum);
-          handleScrollEvent(evnt, isRollY, isRollX, wrapperEl.scrollTop, currLeftNum);
-        }
-      },
-      triggerFooterScrollEvent(evnt) {
-        const {
-          inVirtualScroll,
-          inHeaderScroll,
-          inBodyScroll
-        } = internalData;
-        if (inVirtualScroll) {
-          return;
+        const scrollLeft = wrapperEl.scrollLeft;
+        const scrollTop = wrapperEl.scrollTop;
+        const isRollX = scrollLeft !== lastScrollLeft;
+        const isRollY = scrollTop !== lastScrollTop;
+        internalData.inBodyScroll = true;
+        internalData.scrollRenderType = '';
+        if (isRollY) {
+          (0, _dom.setScrollTop)(yHandleEl, scrollTop);
+          syncTableScrollTop(scrollTop);
         }
-        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;
+          (0, _dom.setScrollLeft)(xHandleEl, scrollLeft);
+          (0, _dom.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,
@@ -872,6 +1117,9 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
           internalData.inVirtualScroll = true;
           (0, _dom.setScrollLeft)(headerScrollElem, currLeftNum);
           (0, _dom.setScrollLeft)(bodyScrollElem, currLeftNum);
+          if (scrollXLoad) {
+            triggerScrollXEvent();
+          }
           handleScrollEvent(evnt, isRollY, isRollX, wrapperEl.scrollTop, currLeftNum);
         }
       },
@@ -897,28 +1145,11 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
         }
       },
       handleUpdateSXSpace() {
-        const {
-          scrollXLoad,
-          scrollXWidth
-        } = reactData;
-        const {
-          elemStore
-        } = internalData;
-        const layoutList = ['header', 'body', 'footer'];
-        layoutList.forEach(layout => {
-          const xSpaceElem = (0, _util.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, _vue.nextTick)();
+        return updateScrollXSpace();
+      },
+      handleUpdateSYSpace() {
+        return updateScrollYSpace();
       },
-      handleUpdateSYSpace: updateScrollYSpace,
       handleUpdateSYStatus(sYLoad) {
         reactData.scrollYLoad = sYLoad;
       }