vxe-gantt 3.0.5 → 3.0.7

package/lib/index.umd.js

@@ -7643,7 +7643,7 @@ var core_ = __webpack_require__(4345);
 ;// CONCATENATED MODULE: ./packages/ui/src/log.ts
 
 var log = core_.VxeUI.log;
-var version = "gantt v".concat("3.0.5");
+var version = "gantt v".concat("3.0.7");
 var warnLog = log.create('warn', version);
 var errLog = log.create('error', version);
 ;// CONCATENATED MODULE: ./packages/ui/index.ts
@@ -7653,7 +7653,7 @@ var errLog = log.create('error', version);
 var setConfig = core_.VxeUI.setConfig,
   setIcon = core_.VxeUI.setIcon,
   checkVersion = core_.VxeUI.checkVersion;
-core_.VxeUI.ganttVersion = "3.0.5";
+core_.VxeUI.ganttVersion = "3.0.7";
 setConfig({
   gantt: {
     // size: null,
@@ -8444,11 +8444,13 @@ var getI18n = core_.VxeUI.getI18n;
     //
     renderVN: function renderVN(h) {
       var _vm = this;
+      var $xeGantt = _vm.$xeGantt;
       var $xeGanttView = _vm.$xeGanttView;
       var reactData = $xeGanttView.reactData;
-      var tableColumn = reactData.tableColumn,
-        headerGroups = reactData.headerGroups,
+      var internalData = $xeGanttView.internalData;
+      var headerGroups = reactData.headerGroups,
         viewCellWidth = reactData.viewCellWidth;
+      var visibleColumn = internalData.visibleColumn;
       return h('div', {
         ref: 'refElem',
         class: 'vxe-gantt-view--header-wrapper'
@@ -8464,7 +8466,7 @@ var getI18n = core_.VxeUI.getI18n;
       }), h('table', {
         ref: 'refHeaderTable',
         class: 'vxe-gantt-view--header-table'
-      }, [h('colgroup', {}, tableColumn.map(function (column, cIndex) {
+      }, [h('colgroup', {}, visibleColumn.map(function (column, cIndex) {
         return h('col', {
           key: cIndex,
           style: {
@@ -8475,11 +8477,14 @@ var getI18n = core_.VxeUI.getI18n;
         var scaleItem = _ref.scaleItem,
           columns = _ref.columns;
         var type = scaleItem.type,
-          titleMethod = scaleItem.titleMethod;
+          titleMethod = scaleItem.titleMethod,
+          slots = scaleItem.slots;
+        var titleSlot = slots ? slots.title : null;
         return h('tr', {
           key: $rowIndex
         }, columns.map(function (column, cIndex) {
-          var dateObj = column.params;
+          var childCount = column.childCount,
+            dateObj = column.dateObj;
           var label = "".concat(column.title);
           if ($rowIndex < headerGroups.length - 1) {
             if (scaleItem.type === 'day') {
@@ -8488,22 +8493,26 @@ var getI18n = core_.VxeUI.getI18n;
               label = getI18n("vxe.gantt.".concat(!$rowIndex && headerGroups.length > 1 ? 'tFullFormat' : 'tSimpleFormat', ".").concat(type), dateObj);
             }
           }
-          if (titleMethod) {
-            label = "".concat(titleMethod({
-              scaleObj: scaleItem,
-              title: label,
-              dateObj: dateObj,
-              $rowIndex: $rowIndex
-            }));
+          var cellVNs = label;
+          var ctParams = {
+            scaleObj: scaleItem,
+            title: label,
+            dateObj: dateObj,
+            $rowIndex: $rowIndex
+          };
+          if (titleSlot) {
+            cellVNs = $xeGantt.callSlot(titleSlot, ctParams, h);
+          } else if (titleMethod) {
+            cellVNs = "".concat(titleMethod(ctParams));
           }
           return h('th', {
             key: cIndex,
             class: 'vxe-gantt-view--header-column',
             attrs: {
-              colspan: column.childCount || null,
-              title: label
+              colspan: childCount || null,
+              title: titleSlot ? null : label
             }
-          }, label);
+          }, cellVNs);
         }));
       }))])])]);
     }
@@ -8586,14 +8595,32 @@ var renderEmptyElement = core_.VxeUI.renderEmptyElement;
         showContent = taskBarOpts.showContent,
         contentMethod = taskBarOpts.contentMethod,
         barStyle = taskBarOpts.barStyle;
-      var _ref = barStyle || {},
-        round = _ref.round;
+      var isBarRowStyle = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().isFunction(barStyle);
+      var barStyObj = (barStyle ? isBarRowStyle ? barStyle({
+        row: row,
+        $gantt: $xeGantt
+      }) : barStyle : {}) || {};
+      var round = barStyObj.round;
       var rowRest = fullAllDataRowIdData[rowid] || {};
       var resizeHeight = resizeHeightFlag ? rowRest.resizeHeight : 0;
       var isRsHeight = resizeHeight > 0;
       var cellHeight = getCellRestHeight(rowRest, cellOpts, rowOpts, defaultRowHeight);
       var title = getStringValue(external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().get(row, titleField));
       var 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;
+      var vbStyle = {};
+      var vpStyle = {
+        width: "".concat(progressValue || 0, "%")
+      };
+      if (isBarRowStyle) {
+        var bgColor = barStyObj.bgColor,
+          completedBgColor = barStyObj.completedBgColor;
+        if (bgColor) {
+          vbStyle.backgroundColor = bgColor;
+        }
+        if (completedBgColor) {
+          vpStyle.backgroundColor = completedBgColor;
+        }
+      }
       if (contentMethod) {
         title = getStringValue(contentMethod({
           row: row,
@@ -8614,6 +8641,7 @@ var renderEmptyElement = core_.VxeUI.renderEmptyElement;
         }
       }, [h('div', {
         class: taskBarSlot ? 'vxe-gantt-view--chart-custom-bar' : 'vxe-gantt-view--chart-bar',
+        style: vbStyle,
         attrs: {
           rowid: rowid
         },
@@ -8633,9 +8661,7 @@ var renderEmptyElement = core_.VxeUI.renderEmptyElement;
         row: row
       }, h) : [showProgress ? h('div', {
         class: 'vxe-gantt-view--chart-progress',
-        style: {
-          width: "".concat(progressValue, "%")
-        }
+        style: vpStyle
       }) : renderEmptyElement($xeGantt), showContent ? h('div', {
         class: 'vxe-gantt-view--chart-content'
       }, title) : renderEmptyElement($xeGantt)])]);
@@ -9027,10 +9053,13 @@ var renderEmptyElement = core_.VxeUI.renderEmptyElement;
 
 
 
+
+
 var globalEvents = core_.VxeUI.globalEvents;
 function createInternalData() {
   return {
     xeTable: null,
+    visibleColumn: [],
     startMaps: {},
     endMaps: {},
     chartMaps: {},
@@ -9045,16 +9074,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
   };
 }
 var maxYHeight = 5e6;
@@ -9075,9 +9097,12 @@ function handleParseColumn($xeGanttView) {
   var taskScaleList = ganttReactData.taskScaleList;
   var minViewDate = reactData.minViewDate,
     maxViewDate = reactData.maxViewDate;
+  var scrollXStore = internalData.scrollXStore;
   var minScale = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().last(taskScaleList);
   var fullCols = [];
   var groupCols = [];
+  scrollXStore.startIndex = 0;
+  scrollXStore.endIndex = 1;
   if (minScale && minViewDate && maxViewDate) {
     var minSType = minScale.type;
     var weekScale = taskScaleList.find(function (item) {
@@ -9102,37 +9127,37 @@ function handleParseColumn($xeGanttView) {
     var currTime = minViewDate.getTime();
     var diffDayNum = maxViewDate.getTime() - minViewDate.getTime();
     var 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
+    // }
     var renderListMaps = {
       year: [],
       quarter: [],
@@ -9204,47 +9229,47 @@ function handleParseColumn($xeGanttView) {
         year: {
           field: yyyy,
           title: yyyy,
-          params: dateObj
+          dateObj: dateObj
         },
         quarter: {
           field: "".concat(yyyy, "_q").concat(q),
-          title: q,
-          params: dateObj
+          title: "".concat(q),
+          dateObj: dateObj
         },
         month: {
           field: "".concat(yyyy, "_").concat(MM),
           title: MM,
-          params: dateObj
+          dateObj: dateObj
         },
         week: {
           field: "".concat(yyyy, "_W").concat(W),
-          title: W,
-          params: dateObj
+          title: "".concat(W),
+          dateObj: dateObj
         },
         day: {
           field: "".concat(yyyy, "_").concat(MM, "_").concat(dd, "_E").concat(E),
-          title: E,
-          params: dateObj
+          title: "".concat(E),
+          dateObj: dateObj
         },
         date: {
           field: "".concat(yyyy, "_").concat(MM, "_").concat(dd),
           title: dd,
-          params: dateObj
+          dateObj: dateObj
         },
         hour: {
           field: "".concat(yyyy, "_").concat(MM, "_").concat(dd, "_").concat(HH),
           title: HH,
-          params: dateObj
+          dateObj: dateObj
         },
         minute: {
           field: "".concat(yyyy, "_").concat(MM, "_").concat(dd, "_").concat(HH, "_").concat(mm),
           title: mm,
-          params: dateObj
+          dateObj: dateObj
         },
         second: {
           field: "".concat(yyyy, "_").concat(MM, "_").concat(dd, "_").concat(HH, "_").concat(mm, "_").concat(ss),
           title: ss,
-          params: dateObj
+          dateObj: dateObj
         }
       };
       var minCol = colMaps[minSType];
@@ -9332,8 +9357,10 @@ function handleParseColumn($xeGanttView) {
       internalData.chartMaps = ctMaps;
     }
   }
-  reactData.tableColumn = fullCols;
+  internalData.visibleColumn = fullCols;
   reactData.headerGroups = groupCols;
+  updateScrollXStatus($xeGanttView);
+  handleTableColumn($xeGanttView);
 }
 function handleUpdateData($xeGanttView) {
   var $xeGantt = $xeGanttView.$xeGantt;
@@ -9438,9 +9465,10 @@ function updateStyle($xeGanttView) {
   var internalData = $xeGanttView.internalData;
   var scrollbarWidth = reactData.scrollbarWidth,
     scrollbarHeight = reactData.scrollbarHeight,
-    tableColumn = reactData.tableColumn,
-    headerGroups = reactData.headerGroups;
-  var elemStore = internalData.elemStore;
+    headerGroups = reactData.headerGroups,
+    tableColumn = reactData.tableColumn;
+  var elemStore = internalData.elemStore,
+    visibleColumn = internalData.visibleColumn;
   var $xeTable = internalData.xeTable;
   var el = $xeGanttView.$refs.refElem;
   if (!el || !el.clientHeight) {
@@ -9521,82 +9549,210 @@ function updateStyle($xeGanttView) {
     yBottomCornerEl.style.display = tFooterHeight ? 'block' : '';
   }
   var colInfoElem = $xeGanttView.$refs.refColInfoElem;
+  var viewCellWidth = 40;
   if (colInfoElem) {
-    reactData.viewCellWidth = colInfoElem.clientWidth || 40;
+    viewCellWidth = colInfoElem.clientWidth || 40;
   }
-  var viewTableWidth = reactData.viewCellWidth * tableColumn.length;
+  var viewTableWidth = viewCellWidth * visibleColumn.length;
   if (bodyScrollElem) {
     var viewWidth = bodyScrollElem.clientWidth;
     var remainWidth = viewWidth - viewTableWidth;
     if (remainWidth > 0) {
-      reactData.viewCellWidth += Math.floor(remainWidth / tableColumn.length);
+      viewCellWidth += Math.floor(remainWidth / visibleColumn.length);
       viewTableWidth = viewWidth;
     }
   }
+  reactData.viewCellWidth = viewCellWidth;
   var headerTableElem = getRefElem(elemStore['main-header-table']);
   var bodyTableElem = getRefElem(elemStore['main-body-table']);
+  var vmTableWidth = viewCellWidth * tableColumn.length;
   if (headerTableElem) {
     headerTableElem.style.width = "".concat(viewTableWidth, "px");
   }
   if (bodyTableElem) {
-    bodyTableElem.style.width = "".concat(viewTableWidth, "px");
+    bodyTableElem.style.width = "".concat(vmTableWidth, "px");
   }
   reactData.scrollXWidth = viewTableWidth;
   return updateChart($xeGanttView);
 }
-function _handleLazyRecalculate($xeGanttView) {
+function handleRecalculateStyle($xeGanttView) {
+  var internalData = $xeGanttView.internalData;
+  var el = $xeGanttView.$refs.refElem;
+  internalData.rceRunTime = Date.now();
+  if (!el || !el.clientWidth) {
+    return $xeGanttView.$nextTick();
+  }
   calcScrollbar($xeGanttView);
   updateStyle($xeGanttView);
   updateChart($xeGanttView);
+  return computeScrollLoad($xeGanttView);
+}
+function _handleLazyRecalculate($xeGanttView) {
+  var internalData = $xeGanttView.internalData;
+  return new Promise(function (resolve) {
+    var rceTimeout = internalData.rceTimeout,
+      rceRunTime = internalData.rceRunTime;
+    var $xeTable = internalData.xeTable;
+    var refreshDelay = 50;
+    if ($xeTable) {
+      var resizeOpts = $xeTable.computeResizeOpts;
+      refreshDelay = resizeOpts.refreshDelay || 50;
+    }
+    if (rceTimeout) {
+      clearTimeout(rceTimeout);
+      if (rceRunTime && rceRunTime + (refreshDelay - 5) < Date.now()) {
+        resolve(handleRecalculateStyle($xeGanttView));
+      } else {
+        $xeGanttView.$nextTick(function () {
+          resolve();
+        });
+      }
+    } else {
+      resolve(handleRecalculateStyle($xeGanttView));
+    }
+    internalData.rceTimeout = setTimeout(function () {
+      internalData.rceTimeout = undefined;
+      handleRecalculateStyle($xeGanttView);
+    }, refreshDelay);
+  });
+}
+function computeScrollLoad($xeGanttView) {
+  var reactData = $xeGanttView.reactData;
+  var internalData = $xeGanttView.internalData;
+  return $xeGanttView.$nextTick().then(function () {
+    var scrollXLoad = reactData.scrollXLoad;
+    var scrollXStore = internalData.scrollXStore;
+    // 计算 X 逻辑
+    if (scrollXLoad) {
+      var _handleVirtualXVisibl = handleVirtualXVisible($xeGanttView),
+        toXVisibleIndex = _handleVirtualXVisibl.toVisibleIndex,
+        visibleXSize = _handleVirtualXVisibl.visibleSize;
+      var 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($xeGanttView).then(function () {
+        loadScrollXData($xeGanttView);
+      });
+    } else {
+      updateScrollXSpace($xeGanttView);
+    }
+  });
+}
+function handleVirtualXVisible($xeGanttView) {
+  var reactData = $xeGanttView.reactData;
+  var internalData = $xeGanttView.internalData;
+  var viewCellWidth = reactData.viewCellWidth;
+  var elemStore = internalData.elemStore;
+  var bodyScrollElem = getRefElem(elemStore['main-body-scroll']);
+  if (bodyScrollElem) {
+    var clientWidth = bodyScrollElem.clientWidth;
+    var scrollLeft = bodyScrollElem.scrollLeft;
+    var toVisibleIndex = Math.floor(scrollLeft / viewCellWidth) - 1;
+    var visibleSize = Math.ceil(clientWidth / viewCellWidth) + 1;
+    return {
+      toVisibleIndex: Math.max(0, toVisibleIndex),
+      visibleSize: Math.max(1, visibleSize)
+    };
+  }
+  return {
+    toVisibleIndex: 0,
+    visibleSize: 6
+  };
+}
+function loadScrollXData($xeGanttView) {
+  var reactData = $xeGanttView.reactData;
+  var internalData = $xeGanttView.internalData;
+  var isScrollXBig = reactData.isScrollXBig;
+  var scrollXStore = internalData.scrollXStore;
+  var preloadSize = scrollXStore.preloadSize,
+    startIndex = scrollXStore.startIndex,
+    endIndex = scrollXStore.endIndex,
+    offsetSize = scrollXStore.offsetSize;
+  var _handleVirtualXVisibl2 = handleVirtualXVisible($xeGanttView),
+    toVisibleIndex = _handleVirtualXVisibl2.toVisibleIndex,
+    visibleSize = _handleVirtualXVisibl2.visibleSize;
+  var 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;
+  var offsetStartIndex = offsetItem.startIndex,
+    offsetEndIndex = offsetItem.endIndex;
+  if (toVisibleIndex <= startIndex || toVisibleIndex >= endIndex - visibleSize - 1) {
+    if (startIndex !== offsetStartIndex || endIndex !== offsetEndIndex) {
+      scrollXStore.startIndex = offsetStartIndex;
+      scrollXStore.endIndex = offsetEndIndex;
+      updateScrollXData($xeGanttView);
+    }
+  }
+}
+function updateScrollXData($xeGanttView) {
+  handleTableColumn($xeGanttView);
+  updateScrollXSpace($xeGanttView);
   return $xeGanttView.$nextTick();
 }
-// function updateScrollXSpace ($xeGanttView: VxeGanttViewConstructor & VxeGanttViewPrivateMethods) {
-//   const reactData = $xeGanttView.reactData
-//   const internalData = $xeGanttView.internalData
-//   const { scrollXLoad, scrollXWidth } = reactData
-//   const { elemStore } = internalData
-//   const bodyScrollElem = getRefElem(elemStore['main-body-scroll'])
-//   const bodyTableElem = getRefElem(elemStore['main-body-table'])
-//   let xSpaceLeft = 0
-//   let clientWidth = 0
-//   if (bodyScrollElem) {
-//     clientWidth = bodyScrollElem.clientWidth
-//   }
-//   // 虚拟渲染
-//   let isScrollXBig = false
-//   let ySpaceWidth = scrollXWidth
-//   if (scrollXWidth > maxXWidth) {
-//     // 触右
-//     if (bodyScrollElem && bodyTableElem && bodyScrollElem.scrollLeft + clientWidth >= maxXWidth) {
-//       xSpaceLeft = maxXWidth - bodyTableElem.clientWidth
-//     } else {
-//       xSpaceLeft = (maxXWidth - clientWidth) * (xSpaceLeft / (scrollXWidth - clientWidth))
-//     }
-//     ySpaceWidth = maxXWidth
-//     isScrollXBig = true
-//   }
-//   if (bodyTableElem) {
-//     bodyTableElem.style.transform = `translate(${xSpaceLeft}px, ${reactData.scrollYTop || 0}px)`
-//   }
-//   const layoutList = ['header', 'body', 'footer']
-//   layoutList.forEach(layout => {
-//     const xSpaceElem = getRefElem(elemStore[`main-${layout}-xSpace`])
-//     if (xSpaceElem) {
-//       xSpaceElem.style.width = scrollXLoad ? `${ySpaceWidth}px` : ''
-//     }
-//   })
-//   reactData.scrollXLeft = xSpaceLeft
-//   reactData.scrollXWidth = ySpaceWidth
-//   reactData.isScrollXBig = isScrollXBig
-//   const scrollXSpaceEl = $xeGanttView.$refs.refScrollXSpaceElem as HTMLDivElement
-//   if (scrollXSpaceEl) {
-//     scrollXSpaceEl.style.width = `${ySpaceWidth}px`
-//   }
-//   calcScrollbar($xeGanttView)
-//   return $xeGanttView.$nextTick().then(() => {
-//     updateStyle($xeGanttView)
-//   })
-// }
+function updateScrollXStatus($xeGanttView) {
+  var reactData = $xeGanttView.reactData;
+  var scrollXLoad = true;
+  reactData.scrollXLoad = scrollXLoad;
+  return scrollXLoad;
+}
+function handleTableColumn($xeGanttView) {
+  var reactData = $xeGanttView.reactData;
+  var internalData = $xeGanttView.internalData;
+  var scrollXLoad = reactData.scrollXLoad;
+  var visibleColumn = internalData.visibleColumn,
+    scrollXStore = internalData.scrollXStore;
+  var tableColumn = scrollXLoad ? visibleColumn.slice(scrollXStore.startIndex, scrollXStore.endIndex) : visibleColumn.slice(0);
+  reactData.tableColumn = tableColumn;
+}
+function updateScrollXSpace($xeGanttView) {
+  var reactData = $xeGanttView.reactData;
+  var internalData = $xeGanttView.internalData;
+  var scrollXLoad = reactData.scrollXLoad,
+    scrollXWidth = reactData.scrollXWidth,
+    viewCellWidth = reactData.viewCellWidth;
+  var elemStore = internalData.elemStore,
+    scrollXStore = internalData.scrollXStore;
+  var bodyTableElem = getRefElem(elemStore['main-body-table']);
+  // const headerTableElem = getRefElem(elemStore['main-header-table'])
+  // const footerTableElem = getRefElem(elemStore['main-footer-table'])
+  var startIndex = scrollXStore.startIndex;
+  var 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(".concat(xSpaceLeft, "px, ").concat(reactData.scrollYTop || 0, "px)");
+  }
+  // if (footerTableElem) {
+  //   footerTableElem.style.transform = `translate(${xSpaceLeft}px, 0px)`
+  // }
+  var layoutList = ['header', 'body', 'footer'];
+  layoutList.forEach(function (layout) {
+    var xSpaceElem = getRefElem(elemStore["main-".concat(layout, "-xSpace")]);
+    if (xSpaceElem) {
+      xSpaceElem.style.width = scrollXLoad ? "".concat(scrollXWidth, "px") : '';
+    }
+  });
+  var scrollXSpaceEl = $xeGanttView.$refs.refScrollXSpaceElem;
+  if (scrollXSpaceEl) {
+    scrollXSpaceEl.style.width = "".concat(scrollXWidth, "px");
+  }
+  calcScrollbar($xeGanttView);
+  return $xeGanttView.$nextTick();
+}
+function triggerScrollXEvent($xeGanttView) {
+  loadScrollXData($xeGanttView);
+}
 function updateScrollYSpace($xeGanttView) {
   var reactData = $xeGanttView.reactData;
   var internalData = $xeGanttView.internalData;
@@ -9725,6 +9881,8 @@ function syncTableScrollTop($xeGanttView, scrollTop) {
       scrollbarWidth: 0,
       // 横向滚动条的高度
       scrollbarHeight: 0,
+      // 最后滚动时间戳
+      lastScrollTime: 0,
       lazScrollLoading: false,
       scrollVMLoading: false,
       scrollYHeight: 0,
@@ -9853,11 +10011,15 @@ function syncTableScrollTop($xeGanttView, scrollTop) {
     },
     triggerBodyScrollEvent: function triggerBodyScrollEvent(evnt) {
       var $xeGanttView = this;
+      var reactData = $xeGanttView.reactData;
       var internalData = $xeGanttView.internalData;
+      var scrollXLoad = reactData.scrollXLoad;
       var elemStore = internalData.elemStore,
         inVirtualScroll = internalData.inVirtualScroll,
         inHeaderScroll = internalData.inHeaderScroll,
-        inFooterScroll = internalData.inFooterScroll;
+        inFooterScroll = internalData.inFooterScroll,
+        lastScrollLeft = internalData.lastScrollLeft,
+        lastScrollTop = internalData.lastScrollTop;
       if (inVirtualScroll) {
         return;
       }
@@ -9868,42 +10030,49 @@ function syncTableScrollTop($xeGanttView, scrollTop) {
       var headerScrollElem = getRefElem(elemStore['main-header-scroll']);
       var xHandleEl = $xeGanttView.$refs.refScrollXHandleElem;
       var yHandleEl = $xeGanttView.$refs.refScrollYHandleElem;
-      if (headerScrollElem && wrapperEl) {
-        var isRollX = true;
-        var isRollY = true;
-        var currLeftNum = wrapperEl.scrollLeft;
-        var currTopNum = wrapperEl.scrollTop;
+      var scrollLeft = wrapperEl.scrollLeft;
+      var scrollTop = wrapperEl.scrollTop;
+      var isRollX = scrollLeft !== lastScrollLeft;
+      var isRollY = scrollTop !== lastScrollTop;
+      internalData.inBodyScroll = true;
+      internalData.scrollRenderType = '';
+      if (isRollY) {
+        setScrollTop(yHandleEl, scrollTop);
+        syncTableScrollTop($xeGanttView, scrollTop);
+      }
+      if (isRollX) {
         internalData.inBodyScroll = true;
-        setScrollLeft(xHandleEl, currLeftNum);
-        setScrollLeft(headerScrollElem, currLeftNum);
-        setScrollTop(yHandleEl, currTopNum);
-        syncTableScrollTop($xeGanttView, currTopNum);
-        handleScrollEvent($xeGanttView, evnt, isRollY, isRollX, wrapperEl.scrollTop, currLeftNum);
-      }
-    },
-    triggerFooterScrollEvent: function triggerFooterScrollEvent(evnt) {
-      var $xeGanttView = this;
-      var internalData = $xeGanttView.internalData;
-      var inVirtualScroll = internalData.inVirtualScroll,
-        inHeaderScroll = internalData.inHeaderScroll,
-        inBodyScroll = internalData.inBodyScroll;
-      if (inVirtualScroll) {
-        return;
-      }
-      if (inHeaderScroll || inBodyScroll) {
-        return;
-      }
-      var wrapperEl = evnt.currentTarget;
-      if (wrapperEl) {
-        var isRollX = true;
-        var isRollY = false;
-        var currLeftNum = wrapperEl.scrollLeft;
-        handleScrollEvent($xeGanttView, evnt, isRollY, isRollX, wrapperEl.scrollTop, currLeftNum);
+        setScrollLeft(xHandleEl, scrollLeft);
+        setScrollLeft(headerScrollElem, scrollLeft);
+        if (scrollXLoad) {
+          triggerScrollXEvent($xeGanttView);
+        }
       }
-    },
+      handleScrollEvent($xeGanttView, evnt, isRollY, isRollX, wrapperEl.scrollTop, scrollLeft);
+    },
+    // triggerFooterScrollEvent (evnt: Event) {
+    //   const $xeGanttView = this
+    //   const internalData = $xeGanttView.internalData
+    //   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($xeGanttView, evnt, isRollY, isRollX, wrapperEl.scrollTop, currLeftNum)
+    //   }
+    // },
     triggerVirtualScrollXEvent: function triggerVirtualScrollXEvent(evnt) {
       var $xeGanttView = this;
+      var reactData = $xeGanttView.reactData;
       var internalData = $xeGanttView.internalData;
+      var scrollXLoad = reactData.scrollXLoad;
       var elemStore = internalData.elemStore,
         inHeaderScroll = internalData.inHeaderScroll,
         inBodyScroll = internalData.inBodyScroll;
@@ -9920,6 +10089,9 @@ function syncTableScrollTop($xeGanttView, scrollTop) {
         internalData.inVirtualScroll = true;
         setScrollLeft(headerScrollElem, currLeftNum);
         setScrollLeft(bodyScrollElem, currLeftNum);
+        if (scrollXLoad) {
+          triggerScrollXEvent($xeGanttView);
+        }
         handleScrollEvent($xeGanttView, evnt, isRollY, isRollX, wrapperEl.scrollTop, currLeftNum);
       }
     },
@@ -9946,24 +10118,7 @@ function syncTableScrollTop($xeGanttView, scrollTop) {
     },
     handleUpdateSXSpace: function handleUpdateSXSpace() {
       var $xeGanttView = this;
-      var reactData = $xeGanttView.reactData;
-      var internalData = $xeGanttView.internalData;
-      var scrollXLoad = reactData.scrollXLoad,
-        scrollXWidth = reactData.scrollXWidth;
-      var elemStore = internalData.elemStore;
-      var layoutList = ['header', 'body', 'footer'];
-      layoutList.forEach(function (layout) {
-        var xSpaceElem = getRefElem(elemStore["main-".concat(layout, "-xSpace")]);
-        if (xSpaceElem) {
-          xSpaceElem.style.width = scrollXLoad ? "".concat(scrollXWidth, "px") : '';
-        }
-      });
-      var scrollXSpaceEl = $xeGanttView.$refs.refScrollXSpaceElem;
-      if (scrollXSpaceEl) {
-        scrollXSpaceEl.style.width = "".concat(scrollXWidth, "px");
-      }
-      calcScrollbar($xeGanttView);
-      return $xeGanttView.$nextTick();
+      return updateScrollXSpace($xeGanttView);
     },
     handleUpdateSYSpace: function handleUpdateSYSpace() {
       var $xeGanttView = this;
@@ -10371,7 +10526,7 @@ function gantt_createInternalData() {
           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)) {
         var bgColor = barStyle.bgColor,
           completedBgColor = barStyle.completedBgColor;
         if (bgColor) {
@@ -10604,8 +10759,8 @@ function gantt_createInternalData() {
           type: 'month',
           level: viewTypeLevelMaps.month
         }, {
-          type: 'day',
-          level: viewTypeLevelMaps.day
+          type: 'date',
+          level: viewTypeLevelMaps.date
         });
       }
       reactData.taskScaleList = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().orderBy(scaleConfs, {
@@ -10904,20 +11059,20 @@ function gantt_createInternalData() {
         var tipHeight = 0;
         if (rsNumLeftEl) {
           if (offsetLeft < 0) {
+            rsNumLeftEl.style.display = 'none';
+          } else {
             rsNumLeftEl.textContent = "".concat(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 = "".concat(Math.floor(containerRect.width - targetTableWidth), "px");
             rsNumRightEl.style.display = 'block';
             tipHeight = rsNumRightEl.offsetHeight;
+          } else {
+            rsNumRightEl.style.display = 'none';
           }
         }
         var tipTop = evnt.clientY - containerRect.top - tipHeight / 2;
@@ -12209,9 +12364,9 @@ function gantt_createInternalData() {
               class: 'vxe-gantt--resizable-split-tip-number'
             }, [h('div', {
               class: 'vxe-gantt--resizable-split-number-left'
-            }, '10px'), h('div', {
+            }), h('div', {
               class: 'vxe-gantt--resizable-split-number-right'
-            }, '20px')])]), h('div', {
+            })])]), h('div', {
               class: 'vxe-gantt--border-line'
             })]));
             break;