vxe-gantt 4.0.5 → 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.5"}`;
+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.5";
+core_.VxeUI.ganttVersion = "4.0.7";
 setConfig({
   gantt: {
     // size: null,
@@ -3289,7 +3289,7 @@ const tableEmits = ['update:data', 'keydown-start', 'keydown', 'keydown-end', 'p
 const gridEmits = [...tableEmits, 'page-change', 'form-submit', 'form-submit-invalid', 'form-reset', 'form-collapse', 'form-toggle-collapse', 'proxy-query', 'proxy-delete', 'proxy-save', 'toolbar-button-click', 'toolbar-tool-click', 'zoom'];
 ;// ./packages/gantt/src/emits.ts
 
-const ganttEmits = [...gridEmits, 'task-cell-click', 'task-cell-dblclick', 'task-bar-click', 'task-bar-dblclick'];
+const ganttEmits = [...gridEmits, 'task-cell-click', 'task-cell-dblclick', 'task-bar-click', 'task-bar-dblclick', 'task-view-cell-click', 'task-view-cell-dblclick'];
 // EXTERNAL MODULE: ./node_modules/core-js/modules/es.iterator.find.js
 var es_iterator_find = __webpack_require__(116);
 ;// ./packages/gantt/src/util.ts
@@ -3323,6 +3323,7 @@ const {
 /* harmony default export */ var gantt_header = (defineVxeComponent({
   name: 'VxeGanttViewHeader',
   setup() {
+    const $xeGantt = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.inject)('$xeGantt', {});
     const $xeGanttView = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.inject)('$xeGanttView', {});
     const {
       reactData,
@@ -3334,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'
@@ -3351,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: {
@@ -3364,12 +3367,17 @@ const {
       }, $rowIndex) => {
         const {
           type,
-          titleMethod
+          titleMethod,
+          slots
         } = scaleItem;
+        const titleSlot = slots ? slots.title : null;
         return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('tr', {
           key: $rowIndex
         }, columns.map((column, cIndex) => {
-          const dateObj = column.params;
+          const {
+            childCount,
+            dateObj
+          } = column;
           let label = `${column.title}`;
           if ($rowIndex < headerGroups.length - 1) {
             if (scaleItem.type === 'day') {
@@ -3378,20 +3386,24 @@ const {
               label = getI18n(`vxe.gantt.${!$rowIndex && headerGroups.length > 1 ? 'tFullFormat' : 'tSimpleFormat'}.${type}`, dateObj);
             }
           }
-          if (titleMethod) {
-            label = `${titleMethod({
-              scaleObj: scaleItem,
-              title: label,
-              dateObj: dateObj,
-              $rowIndex
-            })}`;
+          let cellVNs = label;
+          const ctParams = {
+            scaleObj: scaleItem,
+            title: label,
+            dateObj: dateObj,
+            $rowIndex
+          };
+          if (titleSlot) {
+            cellVNs = $xeGantt.callSlot(titleSlot, ctParams);
+          } else if (titleMethod) {
+            cellVNs = `${titleMethod(ctParams)}`;
           }
           return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('th', {
             key: cIndex,
             class: 'vxe-gantt-view--header-column',
-            colspan: column.childCount || null,
-            title: label
-          }, label);
+            colspan: childCount || null,
+            title: titleSlot ? null : label
+          }, cellVNs);
         }));
       }))])])]);
     };
@@ -3478,15 +3490,36 @@ const {
         contentMethod,
         barStyle
       } = taskBarOpts;
+      const isBarRowStyle = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().isFunction(barStyle);
+      const barStyObj = (barStyle ? isBarRowStyle ? barStyle({
+        row,
+        $gantt: $xeGantt
+      }) : barStyle : {}) || {};
       const {
         round
-      } = barStyle || {};
+      } = barStyObj;
       const rowRest = fullAllDataRowIdData[rowid] || {};
       const resizeHeight = resizeHeightFlag ? rowRest.resizeHeight : 0;
       const isRsHeight = resizeHeight > 0;
       const cellHeight = getCellRestHeight(rowRest, cellOpts, rowOpts, defaultRowHeight);
       let title = getStringValue(external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().get(row, titleField));
       const progressValue = showProgress ? Math.min(100, Math.max(0, external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().toNumber(external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().get(row, progressField)))) : 0;
+      const vbStyle = {};
+      const vpStyle = {
+        width: `${progressValue || 0}%`
+      };
+      if (isBarRowStyle) {
+        const {
+          bgColor,
+          completedBgColor
+        } = barStyObj;
+        if (bgColor) {
+          vbStyle.backgroundColor = bgColor;
+        }
+        if (completedBgColor) {
+          vpStyle.backgroundColor = completedBgColor;
+        }
+      }
       if (contentMethod) {
         title = getStringValue(contentMethod({
           row,
@@ -3505,6 +3538,7 @@ const {
         }
       }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
         class: taskBarSlot ? 'vxe-gantt-view--chart-custom-bar' : 'vxe-gantt-view--chart-bar',
+        style: vbStyle,
         rowid,
         onClick(evnt) {
           $xeGantt.handleTaskBarClickEvent(evnt, {
@@ -3520,9 +3554,7 @@ const {
         row
       }) : [showProgress ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
         class: 'vxe-gantt-view--chart-progress',
-        style: {
-          width: `${progressValue || 0}%`
-        }
+        style: vpStyle
       }) : renderEmptyElement($xeGantt), showContent ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
         class: 'vxe-gantt-view--chart-content'
       }, title) : renderEmptyElement($xeGantt)])]);
@@ -3914,6 +3946,7 @@ const {
 function createInternalData() {
   return {
     xeTable: null,
+    visibleColumn: [],
     startMaps: {},
     endMaps: {},
     chartMaps: {},
@@ -3928,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;
@@ -3982,6 +4008,8 @@ const maxYHeight = 5e6;
       scrollbarWidth: 0,
       // 横向滚动条的高度
       scrollbarHeight: 0,
+      // 最后滚动时间戳
+      lastScrollTime: 0,
       lazScrollLoading: false,
       scrollVMLoading: false,
       scrollYHeight: 0,
@@ -4031,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');
@@ -4056,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: [],
@@ -4151,47 +4184,47 @@ const maxYHeight = 5e6;
             year: {
               field: yyyy,
               title: yyyy,
-              params: dateObj
+              dateObj
             },
             quarter: {
               field: `${yyyy}_q${q}`,
-              title: q,
-              params: dateObj
+              title: `${q}`,
+              dateObj
             },
             month: {
               field: `${yyyy}_${MM}`,
               title: MM,
-              params: dateObj
+              dateObj
             },
             week: {
               field: `${yyyy}_W${W}`,
-              title: W,
-              params: dateObj
+              title: `${W}`,
+              dateObj
             },
             day: {
               field: `${yyyy}_${MM}_${dd}_E${E}`,
-              title: E,
-              params: dateObj
+              title: `${E}`,
+              dateObj
             },
             date: {
               field: `${yyyy}_${MM}_${dd}`,
               title: dd,
-              params: dateObj
+              dateObj
             },
             hour: {
               field: `${yyyy}_${MM}_${dd}_${HH}`,
               title: HH,
-              params: dateObj
+              dateObj
             },
             minute: {
               field: `${yyyy}_${MM}_${dd}_${HH}_${mm}`,
               title: mm,
-              params: dateObj
+              dateObj
             },
             second: {
               field: `${yyyy}_${MM}_${dd}_${HH}_${mm}_${ss}`,
               title: ss,
-              params: dateObj
+              dateObj
             }
           };
           const minCol = colMaps[minSType];
@@ -4286,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;
@@ -4399,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;
@@ -4485,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
@@ -4593,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 = {
@@ -4698,11 +4934,16 @@ const maxYHeight = 5e6;
         }
       },
       triggerBodyScrollEvent(evnt) {
+        const {
+          scrollXLoad
+        } = reactData;
         const {
           elemStore,
           inVirtualScroll,
           inHeaderScroll,
-          inFooterScroll
+          inFooterScroll,
+          lastScrollLeft,
+          lastScrollTop
         } = internalData;
         if (inVirtualScroll) {
           return;
@@ -4714,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);
-        }
-      },
-      triggerFooterScrollEvent(evnt) {
-        const {
-          inVirtualScroll,
-          inHeaderScroll,
-          inBodyScroll
-        } = internalData;
-        if (inVirtualScroll) {
-          return;
-        }
-        if (inHeaderScroll || inBodyScroll) {
-          return;
+        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);
         }
-        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,
@@ -4766,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);
         }
       },
@@ -4791,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;
       }
@@ -5174,7 +5407,7 @@ function getViewTypeLevel(type) {
           stys.maxHeight = maxHeight === 'auto' || maxHeight === '100%' ? '100%' : toCssUnit(maxHeight);
         }
       }
-      if (barStyle) {
+      if (barStyle && !external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().isFunction(barStyle)) {
         const {
           bgColor,
           completedBgColor
@@ -5762,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;
@@ -7039,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;