vxe-gantt 0.0.2 → 3.0.0-beta.0

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

@@ -0,0 +1,808 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _comp = require("../../ui/src/comp");
+var _core = require("@vxe-ui/core");
+var _dom = require("../../ui/src/dom");
+var _util = require("./util");
+var _xeUtils = _interopRequireDefault(require("xe-utils"));
+var _ganttHeader = _interopRequireDefault(require("./gantt-header"));
+var _ganttBody = _interopRequireDefault(require("./gantt-body"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var globalEvents = _core.VxeUI.globalEvents;
+function createInternalData() {
+  return {
+    xeTable: null,
+    startMaps: {},
+    endMaps: {},
+    chartMaps: {},
+    elemStore: {},
+    // 存放横向 X 虚拟滚动相关的信息
+    scrollXStore: {
+      preloadSize: 0,
+      offsetSize: 0,
+      visibleSize: 0,
+      visibleStartIndex: 0,
+      visibleEndIndex: 0,
+      startIndex: 0,
+      endIndex: 0
+    },
+    // 存放纵向 Y 虚拟滚动相关信息
+    scrollYStore: {
+      preloadSize: 0,
+      offsetSize: 0,
+      visibleSize: 0,
+      visibleStartIndex: 0,
+      visibleEndIndex: 0,
+      startIndex: 0,
+      endIndex: 0
+    }
+  };
+}
+var maxYHeight = 5e6;
+var maxXWidth = 5e6;
+function handleParseColumn($xeGanttView) {
+  var $xeGantt = $xeGanttView.$xeGantt;
+  var reactData = $xeGanttView.reactData;
+  var internalData = $xeGanttView.internalData;
+  var minViewDate = reactData.minViewDate,
+    maxViewDate = reactData.maxViewDate;
+  var taskViewOpts = $xeGantt.computeTaskViewOpts;
+  var fullCols = [];
+  var groupCols = [];
+  switch (taskViewOpts.mode) {
+    case 'year':
+      break;
+    case 'quarter':
+      break;
+    case 'month':
+      break;
+    case 'week':
+      break;
+    default:
+      {
+        if (minViewDate && maxViewDate) {
+          var currTime = minViewDate.getTime();
+          var diffDayNum = maxViewDate.getTime() - minViewDate.getTime();
+          var countDayNum = Math.max(6, Math.floor(diffDayNum / 86400000) + 1);
+          var groupList = [];
+          var colList = [];
+          var groupMaps = {};
+          for (var i = 0; i < countDayNum; i++) {
+            var itemDate = new Date(currTime + i * 86400000);
+            var yyyyy = "".concat(itemDate.getFullYear(), "-").concat(itemDate.getMonth() + 1);
+            var mmDd = "".concat(itemDate.getDate());
+            var groupCol = groupMaps[yyyyy];
+            var column = {
+              field: "".concat(yyyyy, "-").concat(mmDd),
+              title: mmDd
+            };
+            if (groupCol) {
+              groupCol.children.push(column);
+              fullCols.push(groupCol);
+            } else {
+              groupCol = {
+                field: yyyyy,
+                title: yyyyy,
+                children: [column]
+              };
+              groupList.push(groupCol);
+              fullCols.push(groupCol);
+              groupMaps[yyyyy] = groupCol;
+            }
+            colList.push(column);
+          }
+          groupCols.push(groupList, colList);
+          var $xeTable = internalData.xeTable;
+          if ($xeTable) {
+            var startField = $xeGantt.computeStartField;
+            var endField = $xeGantt.computeEndField;
+            var tableInternalData = $xeTable;
+            var afterFullData = tableInternalData.afterFullData;
+            var ctMaps = {};
+            afterFullData.forEach(function (row) {
+              var rowid = $xeTable.getRowid(row);
+              var startValue = _xeUtils.default.get(row, startField);
+              var endValue = _xeUtils.default.get(row, endField);
+              if (startValue && endValue) {
+                var startDate = _xeUtils.default.toStringDate(startValue);
+                var endDate = _xeUtils.default.toStringDate(endValue);
+                var oLeftSize = Math.floor((startDate.getTime() - minViewDate.getTime()) / 86400000);
+                var oWidthSize = Math.floor((endDate.getTime() - startDate.getTime()) / 86400000) + 1;
+                ctMaps[rowid] = {
+                  row: row,
+                  rowid: rowid,
+                  oLeftSize: oLeftSize,
+                  oWidthSize: oWidthSize
+                };
+              }
+            });
+            internalData.chartMaps = ctMaps;
+          }
+        }
+        break;
+      }
+  }
+  reactData.tableColumn = fullCols;
+  reactData.headerGroups = groupCols;
+}
+function handleUpdateData($xeGanttView) {
+  var $xeGantt = $xeGanttView.$xeGantt;
+  var reactData = $xeGanttView.reactData;
+  var internalData = $xeGanttView.internalData;
+  var $xeTable = internalData.xeTable;
+  var sdMaps = {};
+  var edMaps = {};
+  var minDate = null;
+  var maxDate = null;
+  if ($xeTable) {
+    var startField = $xeGantt.computeStartField;
+    var endField = $xeGantt.computeEndField;
+    var tableInternalData = $xeTable;
+    var afterFullData = tableInternalData.afterFullData;
+    afterFullData.forEach(function (row) {
+      var startValue = _xeUtils.default.get(row, startField);
+      var endValue = _xeUtils.default.get(row, endField);
+      if (startValue && endValue) {
+        var startDate = _xeUtils.default.toStringDate(startValue);
+        if (!minDate || minDate.getTime() > startDate.getTime()) {
+          minDate = startDate;
+        }
+        var endDate = _xeUtils.default.toStringDate(endValue);
+        if (!maxDate || maxDate.getTime() < endDate.getTime()) {
+          maxDate = endDate;
+        }
+      }
+    });
+  }
+  reactData.minViewDate = minDate;
+  reactData.maxViewDate = maxDate;
+  internalData.startMaps = sdMaps;
+  internalData.endMaps = edMaps;
+  handleParseColumn($xeGanttView);
+}
+function calcScrollbar($xeGanttView) {
+  var $xeGantt = $xeGanttView.$xeGantt;
+  var reactData = $xeGanttView.reactData;
+  var internalData = $xeGanttView.internalData;
+  var scrollXWidth = reactData.scrollXWidth,
+    scrollYHeight = reactData.scrollYHeight;
+  var elemStore = internalData.elemStore;
+  var scrollbarOpts = $xeGantt.computeScrollbarOpts;
+  var bodyWrapperElem = (0, _util.getRefElem)(elemStore['main-body-wrapper']);
+  var xHandleEl = $xeGanttView.$refs.refScrollXHandleElem;
+  var yHandleEl = $xeGanttView.$refs.refScrollYHandleElem;
+  var overflowY = false;
+  var overflowX = false;
+  if (bodyWrapperElem) {
+    overflowY = scrollYHeight > bodyWrapperElem.clientHeight;
+    if (yHandleEl) {
+      reactData.scrollbarWidth = scrollbarOpts.width || yHandleEl.offsetWidth - yHandleEl.clientWidth || 14;
+    }
+    reactData.overflowY = overflowY;
+    overflowX = scrollXWidth > bodyWrapperElem.clientWidth;
+    if (xHandleEl) {
+      reactData.scrollbarHeight = scrollbarOpts.height || xHandleEl.offsetHeight - xHandleEl.clientHeight || 14;
+    }
+    reactData.overflowX = overflowX;
+  }
+}
+function updateChart($xeGanttView) {
+  var reactData = $xeGanttView.reactData;
+  var internalData = $xeGanttView.internalData;
+  var viewCellWidth = reactData.viewCellWidth;
+  var elemStore = internalData.elemStore,
+    chartMaps = internalData.chartMaps;
+  var chartWrapper = (0, _util.getRefElem)(elemStore['main-chart-wrapper']);
+  if (chartWrapper) {
+    _xeUtils.default.arrayEach(chartWrapper.children, function (rowEl) {
+      var barEl = rowEl.children[0];
+      if (!barEl) {
+        return;
+      }
+      var rowid = rowEl.getAttribute('rowid');
+      var rowRest = rowid ? chartMaps[rowid] : null;
+      if (rowRest) {
+        barEl.style.left = "".concat(viewCellWidth * rowRest.oLeftSize, "px");
+        barEl.style.width = "".concat(viewCellWidth * rowRest.oWidthSize, "px");
+      }
+    });
+  }
+  return $xeGanttView.$nextTick();
+}
+function updateStyle($xeGanttView) {
+  var $xeGantt = $xeGanttView.$xeGantt;
+  var reactData = $xeGanttView.reactData;
+  var internalData = $xeGanttView.internalData;
+  var scrollbarWidth = reactData.scrollbarWidth,
+    scrollbarHeight = reactData.scrollbarHeight,
+    tableColumn = reactData.tableColumn;
+  var elemStore = internalData.elemStore;
+  var $xeTable = internalData.xeTable;
+  var el = $xeGanttView.$refs.refElem;
+  if (!el || !el.clientHeight) {
+    return;
+  }
+  var scrollbarXToTop = $xeGantt.computeScrollbarXToTop;
+  var xLeftCornerEl = $xeGanttView.$refs.refScrollXLeftCornerElem;
+  var xRightCornerEl = $xeGanttView.$refs.refScrollXRightCornerElem;
+  var scrollXVirtualEl = $xeGanttView.$refs.refScrollXVirtualElem;
+  var osbWidth = scrollbarWidth;
+  var osbHeight = scrollbarHeight;
+  var tbHeight = 0;
+  var tHeaderHeight = 0;
+  var tFooterHeight = 0;
+  if ($xeTable) {
+    var tableInternalData = $xeTable;
+    tbHeight = tableInternalData.tBodyHeight;
+    tHeaderHeight = tableInternalData.tHeaderHeight;
+    tFooterHeight = tableInternalData.tFooterHeight;
+  }
+  var headerScrollElem = (0, _util.getRefElem)(elemStore['main-header-scroll']);
+  if (headerScrollElem) {
+    headerScrollElem.style.height = "".concat(tHeaderHeight, "px");
+  }
+  var bodyScrollElem = (0, _util.getRefElem)(elemStore['main-body-scroll']);
+  if (bodyScrollElem) {
+    bodyScrollElem.style.height = "".concat(tbHeight, "px");
+  }
+  if (scrollXVirtualEl) {
+    scrollXVirtualEl.style.height = "".concat(osbHeight, "px");
+    scrollXVirtualEl.style.visibility = 'visible';
+  }
+  var xWrapperEl = $xeGanttView.$refs.refScrollXWrapperElem;
+  if (xWrapperEl) {
+    xWrapperEl.style.left = scrollbarXToTop ? "".concat(osbWidth, "px") : '';
+    xWrapperEl.style.width = "".concat(el.clientWidth - osbWidth, "px");
+  }
+  if (xLeftCornerEl) {
+    xLeftCornerEl.style.width = scrollbarXToTop ? "".concat(osbWidth, "px") : '';
+    xLeftCornerEl.style.display = scrollbarXToTop ? osbHeight ? 'block' : '' : '';
+  }
+  if (xRightCornerEl) {
+    xRightCornerEl.style.width = scrollbarXToTop ? '' : "".concat(osbWidth, "px");
+    xRightCornerEl.style.display = scrollbarXToTop ? '' : osbHeight ? 'block' : '';
+  }
+  var scrollYVirtualEl = $xeGanttView.$refs.refScrollYVirtualElem;
+  if (scrollYVirtualEl) {
+    scrollYVirtualEl.style.width = "".concat(osbWidth, "px");
+    scrollYVirtualEl.style.height = "".concat(tbHeight + tHeaderHeight + tFooterHeight, "px");
+    scrollYVirtualEl.style.visibility = 'visible';
+  }
+  var yTopCornerEl = $xeGanttView.$refs.refScrollYTopCornerElem;
+  if (yTopCornerEl) {
+    yTopCornerEl.style.height = "".concat(tHeaderHeight, "px");
+    yTopCornerEl.style.display = tHeaderHeight ? 'block' : '';
+  }
+  var yWrapperEl = $xeGanttView.$refs.refScrollYWrapperElem;
+  if (yWrapperEl) {
+    yWrapperEl.style.height = "".concat(tbHeight, "px");
+    yWrapperEl.style.top = "".concat(tHeaderHeight, "px");
+  }
+  var yBottomCornerEl = $xeGanttView.$refs.refScrollYBottomCornerElem;
+  if (yBottomCornerEl) {
+    yBottomCornerEl.style.height = "".concat(tFooterHeight, "px");
+    yBottomCornerEl.style.top = "".concat(tHeaderHeight + tbHeight, "px");
+    yBottomCornerEl.style.display = tFooterHeight ? 'block' : '';
+  }
+  var colInfoElem = $xeGanttView.$refs.refColInfoElem;
+  if (colInfoElem) {
+    reactData.viewCellWidth = colInfoElem.clientWidth || 40;
+  }
+  var viewTableWidth = reactData.viewCellWidth * tableColumn.length;
+  if (bodyScrollElem) {
+    var viewWidth = bodyScrollElem.clientWidth;
+    var remainWidth = viewWidth - viewTableWidth;
+    if (remainWidth > 0) {
+      reactData.viewCellWidth += Math.floor(remainWidth / tableColumn.length);
+      viewTableWidth = viewWidth;
+    }
+  }
+  var headerTableElem = (0, _util.getRefElem)(elemStore['main-header-table']);
+  var bodyTableElem = (0, _util.getRefElem)(elemStore['main-body-table']);
+  if (headerTableElem) {
+    headerTableElem.style.width = "".concat(viewTableWidth, "px");
+  }
+  if (bodyTableElem) {
+    bodyTableElem.style.width = "".concat(viewTableWidth, "px");
+  }
+  reactData.scrollXWidth = viewTableWidth;
+  return updateChart($xeGanttView);
+}
+function _handleLazyRecalculate($xeGanttView) {
+  calcScrollbar($xeGanttView);
+  updateStyle($xeGanttView);
+  return $xeGanttView.$nextTick();
+}
+function _updateScrollXSpace($xeGanttView) {
+  var reactData = $xeGanttView.reactData;
+  var internalData = $xeGanttView.internalData;
+  var scrollXLoad = reactData.scrollXLoad,
+    scrollXWidth = reactData.scrollXWidth;
+  var elemStore = internalData.elemStore;
+  var bodyScrollElem = (0, _util.getRefElem)(elemStore['main-body-scroll']);
+  var bodyTableElem = (0, _util.getRefElem)(elemStore['main-body-table']);
+  var xSpaceLeft = 0;
+  var clientWidth = 0;
+  if (bodyScrollElem) {
+    clientWidth = bodyScrollElem.clientWidth;
+  }
+  // 虚拟渲染
+  var isScrollXBig = false;
+  var 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(".concat(xSpaceLeft, "px, ").concat(reactData.scrollYTop || 0, "px)");
+  }
+  var layoutList = ['header', 'body', 'footer'];
+  layoutList.forEach(function (layout) {
+    var xSpaceElem = (0, _util.getRefElem)(elemStore["main-".concat(layout, "-xSpace")]);
+    if (xSpaceElem) {
+      xSpaceElem.style.width = scrollXLoad ? "".concat(ySpaceWidth, "px") : '';
+    }
+  });
+  reactData.scrollXLeft = xSpaceLeft;
+  reactData.scrollXWidth = ySpaceWidth;
+  reactData.isScrollXBig = isScrollXBig;
+  var scrollXSpaceEl = $xeGanttView.$refs.refScrollXSpaceElem;
+  if (scrollXSpaceEl) {
+    scrollXSpaceEl.style.width = "".concat(ySpaceWidth, "px");
+  }
+  calcScrollbar($xeGanttView);
+  return $xeGanttView.$nextTick().then(function () {
+    updateStyle($xeGanttView);
+  });
+}
+function _updateScrollYSpace($xeGanttView) {
+  var reactData = $xeGanttView.reactData;
+  var internalData = $xeGanttView.internalData;
+  var scrollYLoad = reactData.scrollYLoad,
+    overflowY = reactData.overflowY;
+  var elemStore = internalData.elemStore;
+  var $xeTable = internalData.xeTable;
+  var bodyScrollElem = (0, _util.getRefElem)(elemStore['main-body-scroll']);
+  var bodyTableElem = (0, _util.getRefElem)(elemStore['main-body-table']);
+  var ySpaceTop = 0;
+  var scrollYHeight = 0;
+  var isScrollYBig = false;
+  if ($xeTable) {
+    var tableReactData = $xeTable;
+    ySpaceTop = tableReactData.scrollYTop;
+    scrollYHeight = tableReactData.scrollYHeight;
+    isScrollYBig = tableReactData.isScrollYBig;
+  }
+  var ySpaceHeight = scrollYHeight;
+  var scrollYTop = ySpaceTop;
+  var clientHeight = 0;
+  if (bodyScrollElem) {
+    clientHeight = bodyScrollElem.clientHeight;
+  }
+  if (isScrollYBig) {
+    // 触底
+    if (bodyScrollElem && bodyTableElem && bodyScrollElem.scrollTop + clientHeight >= maxYHeight) {
+      scrollYTop = maxYHeight - bodyTableElem.clientHeight;
+    } else {
+      scrollYTop = (maxYHeight - clientHeight) * (ySpaceTop / (scrollYHeight - clientHeight));
+    }
+    ySpaceHeight = maxYHeight;
+  }
+  if (!(scrollYLoad && overflowY)) {
+    scrollYTop = 0;
+  }
+  if (bodyTableElem) {
+    bodyTableElem.style.transform = "translate(".concat(reactData.scrollXLeft || 0, "px, ").concat(scrollYTop, "px)");
+  }
+  var layoutList = ['header', 'body', 'footer'];
+  layoutList.forEach(function (layout) {
+    var ySpaceElem = (0, _util.getRefElem)(elemStore["main-".concat(layout, "-ySpace")]);
+    if (ySpaceElem) {
+      ySpaceElem.style.height = ySpaceHeight ? "".concat(ySpaceHeight, "px") : '';
+    }
+  });
+  var scrollYSpaceEl = $xeGanttView.$refs.refScrollYSpaceElem;
+  if (scrollYSpaceEl) {
+    scrollYSpaceEl.style.height = ySpaceHeight ? "".concat(ySpaceHeight, "px") : '';
+  }
+  reactData.scrollYTop = scrollYTop;
+  reactData.scrollYHeight = scrollYHeight;
+  reactData.isScrollYBig = isScrollYBig;
+  calcScrollbar($xeGanttView);
+  return $xeGanttView.$nextTick().then(function () {
+    updateStyle($xeGanttView);
+  });
+}
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+function checkLastSyncScroll($xeGanttView, isRollX, isRollY) {
+  var reactData = $xeGanttView.reactData;
+  var internalData = $xeGanttView.internalData;
+  var lcsTimeout = internalData.lcsTimeout;
+  reactData.lazScrollLoading = true;
+  if (lcsTimeout) {
+    clearTimeout(lcsTimeout);
+  }
+  internalData.lcsTimeout = setTimeout(function () {
+    internalData.lcsRunTime = Date.now();
+    internalData.lcsTimeout = undefined;
+    internalData.intoRunScroll = false;
+    internalData.inVirtualScroll = false;
+    internalData.inWheelScroll = false;
+    internalData.inHeaderScroll = false;
+    internalData.inBodyScroll = false;
+    internalData.inFooterScroll = false;
+    reactData.lazScrollLoading = false;
+  }, 200);
+}
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+function handleScrollEvent($xeGanttView, evnt, isRollY, isRollX, scrollTop, scrollLeft) {
+  checkLastSyncScroll($xeGanttView, isRollX, isRollY);
+}
+/**
+ * 同步表格滚动
+ */
+function syncTableScrollTop($xeGanttView, scrollTop) {
+  var internalData = $xeGanttView.internalData;
+  var $xeTable = internalData.xeTable;
+  if ($xeTable) {
+    var tableInternalData = $xeTable;
+    var tableElemStore = tableInternalData.elemStore;
+    var tableBodyScrollElem = (0, _util.getRefElem)(tableElemStore['main-body-scroll']);
+    if (tableBodyScrollElem) {
+      tableBodyScrollElem.scrollTop = scrollTop;
+    }
+  }
+}
+var _default = exports.default = (0, _comp.defineVxeComponent)({
+  name: 'VxeGanttView',
+  inject: {
+    $xeGantt: {
+      default: null
+    }
+  },
+  provide: function provide() {
+    var $xeGanttView = this;
+    return {
+      $xeGanttView: $xeGanttView
+    };
+  },
+  props: {},
+  data: function data() {
+    var xID = _xeUtils.default.uniqueId();
+    var reactData = {
+      // 是否启用了横向 X 可视渲染方式加载
+      scrollXLoad: false,
+      // 是否启用了纵向 Y 可视渲染方式加载
+      scrollYLoad: false,
+      // 是否存在纵向滚动条
+      overflowY: false,
+      // 是否存在横向滚动条
+      overflowX: false,
+      // 纵向滚动条的宽度
+      scrollbarWidth: 0,
+      // 横向滚动条的高度
+      scrollbarHeight: 0,
+      lazScrollLoading: false,
+      scrollVMLoading: false,
+      scrollYHeight: 0,
+      scrollYTop: 0,
+      isScrollYBig: false,
+      scrollXLeft: 0,
+      scrollXWidth: 0,
+      isScrollXBig: false,
+      minViewDate: null,
+      maxViewDate: null,
+      tableData: [],
+      tableColumn: [],
+      headerGroups: [],
+      viewCellWidth: 40,
+      rowHeightStore: {
+        large: 52,
+        default: 48,
+        medium: 44,
+        small: 40,
+        mini: 36
+      }
+    };
+    var internalData = createInternalData();
+    return {
+      xID: xID,
+      reactData: reactData,
+      internalData: internalData
+    };
+  },
+  computed: Object.assign({}, {}),
+  methods: {
+    //
+    // Method
+    //
+    refreshData: function refreshData() {
+      var $xeGanttView = this;
+      handleUpdateData($xeGanttView);
+      return _handleLazyRecalculate($xeGanttView);
+    },
+    updateViewData: function updateViewData() {
+      var $xeGanttView = this;
+      var reactData = $xeGanttView.reactData;
+      var internalData = $xeGanttView.internalData;
+      var $xeTable = internalData.xeTable;
+      if ($xeTable) {
+        var tableReactData = $xeTable;
+        var tableData = tableReactData.tableData;
+        reactData.tableData = tableData;
+      }
+      return $xeGanttView.$nextTick();
+    },
+    connectUpdate: function connectUpdate(_ref) {
+      var $table = _ref.$table;
+      var $xeGanttView = this;
+      var internalData = $xeGanttView.internalData;
+      if ($table) {
+        internalData.xeTable = $table;
+      }
+      return $xeGanttView.$nextTick();
+    },
+    handleUpdateStyle: function handleUpdateStyle() {
+      var $xeGanttView = this;
+      return updateStyle($xeGanttView);
+    },
+    handleLazyRecalculate: function handleLazyRecalculate() {
+      var $xeGanttView = this;
+      return _handleLazyRecalculate($xeGanttView);
+    },
+    triggerHeaderScrollEvent: function triggerHeaderScrollEvent(evnt) {
+      var $xeGanttView = this;
+      var internalData = $xeGanttView.internalData;
+      var elemStore = internalData.elemStore,
+        inVirtualScroll = internalData.inVirtualScroll,
+        inBodyScroll = internalData.inBodyScroll,
+        inFooterScroll = internalData.inFooterScroll;
+      if (inVirtualScroll) {
+        return;
+      }
+      if (inBodyScroll || inFooterScroll) {
+        return;
+      }
+      var wrapperEl = evnt.currentTarget;
+      var bodyScrollElem = (0, _util.getRefElem)(elemStore['main-body-scroll']);
+      var xHandleEl = $xeGanttView.$refs.refScrollXHandleElem;
+      if (bodyScrollElem && wrapperEl) {
+        var isRollX = true;
+        var isRollY = false;
+        var currLeftNum = wrapperEl.scrollLeft;
+        internalData.inHeaderScroll = true;
+        (0, _dom.setScrollLeft)(xHandleEl, currLeftNum);
+        (0, _dom.setScrollLeft)(bodyScrollElem, currLeftNum);
+        handleScrollEvent($xeGanttView, evnt, isRollY, isRollX, wrapperEl.scrollTop, currLeftNum);
+      }
+    },
+    triggerBodyScrollEvent: function triggerBodyScrollEvent(evnt) {
+      var $xeGanttView = this;
+      var internalData = $xeGanttView.internalData;
+      var elemStore = internalData.elemStore,
+        inVirtualScroll = internalData.inVirtualScroll,
+        inHeaderScroll = internalData.inHeaderScroll,
+        inFooterScroll = internalData.inFooterScroll;
+      if (inVirtualScroll) {
+        return;
+      }
+      if (inHeaderScroll || inFooterScroll) {
+        return;
+      }
+      var wrapperEl = evnt.currentTarget;
+      var headerScrollElem = (0, _util.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;
+        internalData.inBodyScroll = true;
+        (0, _dom.setScrollLeft)(xHandleEl, currLeftNum);
+        (0, _dom.setScrollLeft)(headerScrollElem, currLeftNum);
+        (0, _dom.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);
+      }
+    },
+    triggerVirtualScrollXEvent: function triggerVirtualScrollXEvent(evnt) {
+      var $xeGanttView = this;
+      var internalData = $xeGanttView.internalData;
+      var elemStore = internalData.elemStore,
+        inHeaderScroll = internalData.inHeaderScroll,
+        inBodyScroll = internalData.inBodyScroll;
+      if (inHeaderScroll || inBodyScroll) {
+        return;
+      }
+      var wrapperEl = evnt.currentTarget;
+      var headerScrollElem = (0, _util.getRefElem)(elemStore['main-header-scroll']);
+      var bodyScrollElem = (0, _util.getRefElem)(elemStore['main-body-scroll']);
+      if (wrapperEl) {
+        var isRollY = false;
+        var isRollX = true;
+        var currLeftNum = wrapperEl.scrollLeft;
+        internalData.inVirtualScroll = true;
+        (0, _dom.setScrollLeft)(headerScrollElem, currLeftNum);
+        (0, _dom.setScrollLeft)(bodyScrollElem, currLeftNum);
+        handleScrollEvent($xeGanttView, evnt, isRollY, isRollX, wrapperEl.scrollTop, currLeftNum);
+      }
+    },
+    triggerVirtualScrollYEvent: function triggerVirtualScrollYEvent(evnt) {
+      var $xeGanttView = this;
+      var internalData = $xeGanttView.internalData;
+      var elemStore = internalData.elemStore,
+        inHeaderScroll = internalData.inHeaderScroll,
+        inBodyScroll = internalData.inBodyScroll;
+      if (inHeaderScroll || inBodyScroll) {
+        return;
+      }
+      var wrapperEl = evnt.currentTarget;
+      var bodyScrollElem = (0, _util.getRefElem)(elemStore['main-body-scroll']);
+      if (wrapperEl) {
+        var isRollY = true;
+        var isRollX = false;
+        var currTopNum = wrapperEl.scrollTop;
+        internalData.inVirtualScroll = true;
+        (0, _dom.setScrollTop)(bodyScrollElem, currTopNum);
+        syncTableScrollTop($xeGanttView, currTopNum);
+        handleScrollEvent($xeGanttView, evnt, isRollY, isRollX, currTopNum, wrapperEl.scrollLeft);
+      }
+    },
+    updateScrollXSpace: function updateScrollXSpace() {
+      var $xeGanttView = this;
+      return _updateScrollXSpace($xeGanttView);
+    },
+    updateScrollYSpace: function updateScrollYSpace() {
+      var $xeGanttView = this;
+      return _updateScrollYSpace($xeGanttView);
+    },
+    handleGlobalResizeEvent: function handleGlobalResizeEvent() {
+      var $xeGanttView = this;
+      _handleLazyRecalculate($xeGanttView);
+    },
+    //
+    // Render
+    //
+    renderScrollX: function renderScrollX(h) {
+      var $xeGanttView = this;
+      return h('div', {
+        key: 'vsx',
+        ref: 'refScrollXVirtualElem',
+        class: 'vxe-gantt-view--scroll-x-virtual'
+      }, [h('div', {
+        ref: 'refScrollXLeftCornerElem',
+        class: 'vxe-gantt-view--scroll-x-left-corner'
+      }), h('div', {
+        ref: 'refScrollXWrapperElem',
+        class: 'vxe-gantt-view--scroll-x-wrapper'
+      }, [h('div', {
+        ref: 'refScrollXHandleElem',
+        class: 'vxe-gantt-view--scroll-x-handle',
+        on: {
+          scroll: $xeGanttView.triggerVirtualScrollXEvent
+        }
+      }, [h('div', {
+        ref: 'refScrollXSpaceElem',
+        class: 'vxe-gantt-view--scroll-x-space'
+      })])]), h('div', {
+        ref: 'refScrollXRightCornerElem',
+        class: 'vxe-gantt-view--scroll-x-right-corner'
+      })]);
+    },
+    renderScrollY: function renderScrollY(h) {
+      var $xeGanttView = this;
+      return h('div', {
+        ref: 'refScrollYVirtualElem',
+        class: 'vxe-gantt-view--scroll-y-virtual'
+      }, [h('div', {
+        ref: 'refScrollYTopCornerElem',
+        class: 'vxe-gantt-view--scroll-y-top-corner'
+      }), h('div', {
+        ref: 'refScrollYWrapperElem',
+        class: 'vxe-gantt-view--scroll-y-wrapper'
+      }, [h('div', {
+        ref: 'refScrollYHandleElem',
+        class: 'vxe-gantt-view--scroll-y-handle',
+        on: {
+          scroll: $xeGanttView.triggerVirtualScrollYEvent
+        }
+      }, [h('div', {
+        ref: 'refScrollYSpaceElem',
+        class: 'vxe-gantt-view--scroll-y-space'
+      })])]), h('div', {
+        ref: 'refScrollYBottomCornerElem',
+        class: 'vxe-gantt-view--scroll-y-bottom-corner'
+      })]);
+    },
+    renderViewport: function renderViewport(h) {
+      return h('div', {
+        class: 'vxe-gantt-view--viewport-wrapper'
+      }, [h(_ganttHeader.default), h(_ganttBody.default)]);
+    },
+    renderBody: function renderBody(h) {
+      var $xeGanttView = this;
+      var $xeGantt = $xeGanttView.$xeGantt;
+      var scrollbarYToLeft = $xeGantt.computeScrollbarYToLeft;
+      return h('div', {
+        class: 'vxe-gantt-view--layout-wrapper'
+      }, scrollbarYToLeft ? [$xeGanttView.renderScrollY(h), $xeGanttView.renderViewport(h)] : [$xeGanttView.renderViewport(h), $xeGanttView.renderScrollY(h)]);
+    },
+    renderVN: function renderVN(h) {
+      var $xeGanttView = this;
+      var $xeGantt = $xeGanttView.$xeGantt;
+      var reactData = $xeGanttView.reactData;
+      var overflowX = reactData.overflowX,
+        overflowY = reactData.overflowY,
+        scrollXLoad = reactData.scrollXLoad,
+        scrollYLoad = reactData.scrollYLoad;
+      var taskViewOpts = $xeGantt.computeTaskViewOpts;
+      var scrollbarXToTop = $xeGantt.computeScrollbarXToTop;
+      return h('div', {
+        ref: 'refElem',
+        class: ['vxe-gantt-view', "mode--".concat(taskViewOpts.mode || 'day'), {
+          'is--scroll-y': overflowY,
+          'is--scroll-x': overflowX,
+          'is--virtual-x': scrollXLoad,
+          'is--virtual-y': scrollYLoad
+        }]
+      }, [h('div', {
+        class: 'vxe-gantt-view--render-wrapper'
+      }, scrollbarXToTop ? [$xeGanttView.renderScrollX(h), $xeGanttView.renderBody(h)] : [$xeGanttView.renderBody(h), $xeGanttView.renderScrollX(h)]), h('div', {
+        class: 'vxe-gantt-view--render-vars'
+      }, [h('div', {
+        ref: 'refColInfoElem',
+        class: 'vxe-gantt-view--column-info'
+      })])]);
+    }
+  },
+  watch: {
+    'reactData.tableData': function reactDataTableData() {
+      var $xeGanttView = this;
+      handleUpdateData($xeGanttView);
+    }
+  },
+  mounted: function mounted() {
+    var $xeGanttView = this;
+    globalEvents.on($xeGanttView, 'resize', $xeGanttView.handleGlobalResizeEvent);
+  },
+  beforeDestroy: function beforeDestroy() {
+    var $xeGanttView = this;
+    var internalData = $xeGanttView.internalData;
+    globalEvents.off($xeGanttView, 'keydown');
+    _xeUtils.default.assign(internalData, createInternalData());
+  },
+  render: function render(h) {
+    return this.renderVN(h);
+  }
+});