vxe-gantt 0.0.3 → 3.0.0-beta.0

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

@@ -4,18 +4,15 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _vue = require("vue");
 var _comp = require("../../ui/src/comp");
+var _core = require("@vxe-ui/core");
 var _dom = require("../../ui/src/dom");
-var _ui = require("../../ui");
 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 }; }
-const {
-  globalEvents
-} = _ui.VxeUI;
+var globalEvents = _core.VxeUI.globalEvents;
 function createInternalData() {
   return {
     xeTable: null,
@@ -45,36 +42,444 @@ function createInternalData() {
     }
   };
 }
-const maxYHeight = 5e6;
-const maxXWidth = 5e6;
+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',
-  setup(props, context) {
-    const xID = _xeUtils.default.uniqueId();
-    const $xeGantt = (0, _vue.inject)('$xeGantt', {});
-    const {
-      computeTaskViewOpts,
-      computeStartField,
-      computeEndField,
-      computeScrollbarOpts,
-      computeScrollbarXToTop,
-      computeScrollbarYToLeft
-    } = $xeGantt.getComputeMaps();
-    const refElem = (0, _vue.ref)();
-    const refScrollXVirtualElem = (0, _vue.ref)();
-    const refScrollYVirtualElem = (0, _vue.ref)();
-    const refScrollXHandleElem = (0, _vue.ref)();
-    const refScrollXLeftCornerElem = (0, _vue.ref)();
-    const refScrollXRightCornerElem = (0, _vue.ref)();
-    const refScrollYHandleElem = (0, _vue.ref)();
-    const refScrollYTopCornerElem = (0, _vue.ref)();
-    const refScrollXWrapperElem = (0, _vue.ref)();
-    const refScrollYWrapperElem = (0, _vue.ref)();
-    const refScrollYBottomCornerElem = (0, _vue.ref)();
-    const refScrollXSpaceElem = (0, _vue.ref)();
-    const refScrollYSpaceElem = (0, _vue.ref)();
-    const refColInfoElem = (0, _vue.ref)();
-    const reactData = (0, _vue.reactive)({
+  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 可视渲染方式加载
@@ -108,703 +513,296 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
         small: 40,
         mini: 36
       }
-    });
-    const internalData = createInternalData();
-    const refMaps = {
-      refElem
     };
-    const computeMaps = {};
-    const $xeGanttView = {
-      xID,
-      props,
-      context,
-      reactData,
-      internalData,
-      getRefMaps: () => refMaps,
-      getComputeMaps: () => computeMaps
+    var internalData = createInternalData();
+    return {
+      xID: xID,
+      reactData: reactData,
+      internalData: internalData
     };
-    const handleParseColumn = () => {
-      const {
-        minViewDate,
-        maxViewDate
-      } = reactData;
-      const taskViewOpts = computeTaskViewOpts.value;
-      const fullCols = [];
-      const groupCols = [];
-      switch (taskViewOpts.mode) {
-        case 'year':
-          break;
-        case 'quarter':
-          break;
-        case 'month':
-          break;
-        case 'week':
-          break;
-        default:
-          {
-            if (minViewDate && maxViewDate) {
-              const currTime = minViewDate.getTime();
-              const diffDayNum = maxViewDate.getTime() - minViewDate.getTime();
-              const countDayNum = Math.max(6, Math.floor(diffDayNum / 86400000) + 1);
-              const groupList = [];
-              const colList = [];
-              const groupMaps = {};
-              for (let i = 0; i < countDayNum; i++) {
-                const itemDate = new Date(currTime + i * 86400000);
-                const yyyyy = `${itemDate.getFullYear()}-${itemDate.getMonth() + 1}`;
-                const mmDd = `${itemDate.getDate()}`;
-                let groupCol = groupMaps[yyyyy];
-                const column = {
-                  field: `${yyyyy}-${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);
-              const $xeTable = internalData.xeTable;
-              if ($xeTable) {
-                const startField = computeStartField.value;
-                const endField = computeEndField.value;
-                const tableInternalData = $xeTable.internalData;
-                const {
-                  afterFullData
-                } = tableInternalData;
-                const ctMaps = {};
-                afterFullData.forEach(row => {
-                  const rowid = $xeTable.getRowid(row);
-                  const startValue = _xeUtils.default.get(row, startField);
-                  const endValue = _xeUtils.default.get(row, endField);
-                  if (startValue && endValue) {
-                    const startDate = _xeUtils.default.toStringDate(startValue);
-                    const endDate = _xeUtils.default.toStringDate(endValue);
-                    const oLeftSize = Math.floor((startDate.getTime() - minViewDate.getTime()) / 86400000);
-                    const oWidthSize = Math.floor((endDate.getTime() - startDate.getTime()) / 86400000) + 1;
-                    ctMaps[rowid] = {
-                      row,
-                      rowid,
-                      oLeftSize,
-                      oWidthSize
-                    };
-                  }
-                });
-                internalData.chartMaps = ctMaps;
-              }
-            }
-            break;
-          }
-      }
-      reactData.tableColumn = fullCols;
-      reactData.headerGroups = groupCols;
-    };
-    const handleUpdateData = () => {
-      const $xeTable = internalData.xeTable;
-      const sdMaps = {};
-      const edMaps = {};
-      let minDate = null;
-      let maxDate = null;
+  },
+  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) {
-        const startField = computeStartField.value;
-        const endField = computeEndField.value;
-        const tableInternalData = $xeTable.internalData;
-        const {
-          afterFullData
-        } = tableInternalData;
-        afterFullData.forEach(row => {
-          const startValue = _xeUtils.default.get(row, startField);
-          const endValue = _xeUtils.default.get(row, endField);
-          if (startValue && endValue) {
-            const startDate = _xeUtils.default.toStringDate(startValue);
-            if (!minDate || minDate.getTime() > startDate.getTime()) {
-              minDate = startDate;
-            }
-            const 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();
-    };
-    const calcScrollbar = () => {
-      const {
-        scrollXWidth,
-        scrollYHeight
-      } = reactData;
-      const {
-        elemStore
-      } = internalData;
-      const scrollbarOpts = computeScrollbarOpts.value;
-      const bodyWrapperElem = (0, _util.getRefElem)(elemStore['main-body-wrapper']);
-      const xHandleEl = refScrollXHandleElem.value;
-      const yHandleEl = refScrollYHandleElem.value;
-      let overflowY = false;
-      let 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;
-      }
-    };
-    const updateChart = () => {
-      const {
-        viewCellWidth
-      } = reactData;
-      const {
-        elemStore,
-        chartMaps
-      } = internalData;
-      const chartWrapper = (0, _util.getRefElem)(elemStore['main-chart-wrapper']);
-      if (chartWrapper) {
-        _xeUtils.default.arrayEach(chartWrapper.children, rowEl => {
-          const barEl = rowEl.children[0];
-          if (!barEl) {
-            return;
-          }
-          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`;
-          }
-        });
+        var tableReactData = $xeTable;
+        var tableData = tableReactData.tableData;
+        reactData.tableData = tableData;
       }
-      return (0, _vue.nextTick)();
-    };
-    const updateStyle = () => {
-      const {
-        scrollbarWidth,
-        scrollbarHeight,
-        tableColumn
-      } = reactData;
-      const {
-        elemStore
-      } = internalData;
-      const $xeTable = internalData.xeTable;
-      const el = refElem.value;
-      if (!el || !el.clientHeight) {
+      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;
       }
-      const scrollbarXToTop = computeScrollbarXToTop.value;
-      const xLeftCornerEl = refScrollXLeftCornerElem.value;
-      const xRightCornerEl = refScrollXRightCornerElem.value;
-      const scrollXVirtualEl = refScrollXVirtualElem.value;
-      const osbWidth = scrollbarWidth;
-      const osbHeight = scrollbarHeight;
-      let tbHeight = 0;
-      let tHeaderHeight = 0;
-      let tFooterHeight = 0;
-      if ($xeTable) {
-        const tableInternalData = $xeTable.internalData;
-        tbHeight = tableInternalData.tBodyHeight;
-        tHeaderHeight = tableInternalData.tHeaderHeight;
-        tFooterHeight = tableInternalData.tFooterHeight;
-      }
-      const headerScrollElem = (0, _util.getRefElem)(elemStore['main-header-scroll']);
-      if (headerScrollElem) {
-        headerScrollElem.style.height = `${tHeaderHeight}px`;
-      }
-      const bodyScrollElem = (0, _util.getRefElem)(elemStore['main-body-scroll']);
-      if (bodyScrollElem) {
-        bodyScrollElem.style.height = `${tbHeight}px`;
-      }
-      if (scrollXVirtualEl) {
-        scrollXVirtualEl.style.height = `${osbHeight}px`;
-        scrollXVirtualEl.style.visibility = 'visible';
-      }
-      const xWrapperEl = refScrollXWrapperElem.value;
-      if (xWrapperEl) {
-        xWrapperEl.style.left = scrollbarXToTop ? `${osbWidth}px` : '';
-        xWrapperEl.style.width = `${el.clientWidth - osbWidth}px`;
-      }
-      if (xLeftCornerEl) {
-        xLeftCornerEl.style.width = scrollbarXToTop ? `${osbWidth}px` : '';
-        xLeftCornerEl.style.display = scrollbarXToTop ? osbHeight ? 'block' : '' : '';
-      }
-      if (xRightCornerEl) {
-        xRightCornerEl.style.width = scrollbarXToTop ? '' : `${osbWidth}px`;
-        xRightCornerEl.style.display = scrollbarXToTop ? '' : osbHeight ? 'block' : '';
-      }
-      const scrollYVirtualEl = refScrollYVirtualElem.value;
-      if (scrollYVirtualEl) {
-        scrollYVirtualEl.style.width = `${osbWidth}px`;
-        scrollYVirtualEl.style.height = `${tbHeight + tHeaderHeight + tFooterHeight}px`;
-        scrollYVirtualEl.style.visibility = 'visible';
-      }
-      const yTopCornerEl = refScrollYTopCornerElem.value;
-      if (yTopCornerEl) {
-        yTopCornerEl.style.height = `${tHeaderHeight}px`;
-        yTopCornerEl.style.display = tHeaderHeight ? 'block' : '';
-      }
-      const yWrapperEl = refScrollYWrapperElem.value;
-      if (yWrapperEl) {
-        yWrapperEl.style.height = `${tbHeight}px`;
-        yWrapperEl.style.top = `${tHeaderHeight}px`;
-      }
-      const yBottomCornerEl = refScrollYBottomCornerElem.value;
-      if (yBottomCornerEl) {
-        yBottomCornerEl.style.height = `${tFooterHeight}px`;
-        yBottomCornerEl.style.top = `${tHeaderHeight + tbHeight}px`;
-        yBottomCornerEl.style.display = tFooterHeight ? 'block' : '';
-      }
-      const colInfoElem = refColInfoElem.value;
-      if (colInfoElem) {
-        reactData.viewCellWidth = colInfoElem.clientWidth || 40;
-      }
-      let viewTableWidth = reactData.viewCellWidth * tableColumn.length;
-      if (bodyScrollElem) {
-        const viewWidth = bodyScrollElem.clientWidth;
-        const remainWidth = viewWidth - viewTableWidth;
-        if (remainWidth > 0) {
-          reactData.viewCellWidth += Math.floor(remainWidth / tableColumn.length);
-          viewTableWidth = viewWidth;
-        }
-      }
-      const headerTableElem = (0, _util.getRefElem)(elemStore['main-header-table']);
-      const bodyTableElem = (0, _util.getRefElem)(elemStore['main-body-table']);
-      if (headerTableElem) {
-        headerTableElem.style.width = `${viewTableWidth}px`;
-      }
-      if (bodyTableElem) {
-        bodyTableElem.style.width = `${viewTableWidth}px`;
-      }
-      reactData.scrollXWidth = viewTableWidth;
-      return updateChart();
-    };
-    const handleLazyRecalculate = () => {
-      calcScrollbar();
-      updateStyle();
-      return (0, _vue.nextTick)();
-    };
-    const updateScrollXSpace = () => {
-      const {
-        scrollXLoad,
-        scrollXWidth
-      } = reactData;
-      const {
-        elemStore
-      } = internalData;
-      const bodyScrollElem = (0, _util.getRefElem)(elemStore['main-body-scroll']);
-      const bodyTableElem = (0, _util.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 (inBodyScroll || inFooterScroll) {
+        return;
       }
-      if (bodyTableElem) {
-        bodyTableElem.style.transform = `translate(${xSpaceLeft}px, ${reactData.scrollYTop || 0}px)`;
+      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);
       }
-      const layoutList = ['header', 'body', 'footer'];
-      layoutList.forEach(layout => {
-        const xSpaceElem = (0, _util.getRefElem)(elemStore[`main-${layout}-xSpace`]);
-        if (xSpaceElem) {
-          xSpaceElem.style.width = scrollXLoad ? `${ySpaceWidth}px` : '';
-        }
-      });
-      reactData.scrollXLeft = xSpaceLeft;
-      reactData.scrollXWidth = ySpaceWidth;
-      reactData.isScrollXBig = isScrollXBig;
-      const scrollXSpaceEl = refScrollXSpaceElem.value;
-      if (scrollXSpaceEl) {
-        scrollXSpaceEl.style.width = `${ySpaceWidth}px`;
+    },
+    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;
       }
-      calcScrollbar();
-      return (0, _vue.nextTick)().then(() => {
-        updateStyle();
-      });
-    };
-    const updateScrollYSpace = () => {
-      const {
-        scrollYLoad,
-        overflowY
-      } = reactData;
-      const {
-        elemStore
-      } = internalData;
-      const $xeTable = internalData.xeTable;
-      const bodyScrollElem = (0, _util.getRefElem)(elemStore['main-body-scroll']);
-      const bodyTableElem = (0, _util.getRefElem)(elemStore['main-body-table']);
-      let ySpaceTop = 0;
-      let scrollYHeight = 0;
-      let isScrollYBig = false;
-      if ($xeTable) {
-        const tableReactData = $xeTable.reactData;
-        ySpaceTop = tableReactData.scrollYTop;
-        scrollYHeight = tableReactData.scrollYHeight;
-        isScrollYBig = tableReactData.isScrollYBig;
+      if (inHeaderScroll || inFooterScroll) {
+        return;
       }
-      let ySpaceHeight = scrollYHeight;
-      let scrollYTop = ySpaceTop;
-      let clientHeight = 0;
-      if (bodyScrollElem) {
-        clientHeight = bodyScrollElem.clientHeight;
+      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);
       }
-      if (isScrollYBig) {
-        // 触底
-        if (bodyScrollElem && bodyTableElem && bodyScrollElem.scrollTop + clientHeight >= maxYHeight) {
-          scrollYTop = maxYHeight - bodyTableElem.clientHeight;
-        } else {
-          scrollYTop = (maxYHeight - clientHeight) * (ySpaceTop / (scrollYHeight - clientHeight));
-        }
-        ySpaceHeight = maxYHeight;
+    },
+    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 (!(scrollYLoad && overflowY)) {
-        scrollYTop = 0;
+      if (inHeaderScroll || inBodyScroll) {
+        return;
       }
-      if (bodyTableElem) {
-        bodyTableElem.style.transform = `translate(${reactData.scrollXLeft || 0}px, ${scrollYTop}px)`;
+      var wrapperEl = evnt.currentTarget;
+      if (wrapperEl) {
+        var isRollX = true;
+        var isRollY = false;
+        var currLeftNum = wrapperEl.scrollLeft;
+        handleScrollEvent($xeGanttView, evnt, isRollY, isRollX, wrapperEl.scrollTop, currLeftNum);
       }
-      const layoutList = ['header', 'body', 'footer'];
-      layoutList.forEach(layout => {
-        const ySpaceElem = (0, _util.getRefElem)(elemStore[`main-${layout}-ySpace`]);
-        if (ySpaceElem) {
-          ySpaceElem.style.height = ySpaceHeight ? `${ySpaceHeight}px` : '';
-        }
-      });
-      const scrollYSpaceEl = refScrollYSpaceElem.value;
-      if (scrollYSpaceEl) {
-        scrollYSpaceEl.style.height = ySpaceHeight ? `${ySpaceHeight}px` : '';
+    },
+    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;
       }
-      reactData.scrollYTop = scrollYTop;
-      reactData.scrollYHeight = scrollYHeight;
-      reactData.isScrollYBig = isScrollYBig;
-      calcScrollbar();
-      return (0, _vue.nextTick)().then(() => {
-        updateStyle();
-      });
-    };
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    const checkLastSyncScroll = (isRollX, isRollY) => {
-      const {
-        lcsTimeout
-      } = internalData;
-      reactData.lazScrollLoading = true;
-      if (lcsTimeout) {
-        clearTimeout(lcsTimeout);
+      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);
       }
-      internalData.lcsTimeout = setTimeout(() => {
-        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
-    const handleScrollEvent = (evnt, isRollY, isRollX, scrollTop, scrollLeft) => {
-      checkLastSyncScroll(isRollX, isRollY);
-    };
-    const ganttViewMethods = {
-      updateViewData() {
-        const $xeTable = internalData.xeTable;
-        if ($xeTable) {
-          const tableReactData = $xeTable.reactData;
-          const {
-            tableData
-          } = tableReactData;
-          reactData.tableData = tableData;
-        }
-        return (0, _vue.nextTick)();
-      },
-      connectUpdate({
-        $table
-      }) {
-        if ($table) {
-          internalData.xeTable = $table;
-        }
-        return (0, _vue.nextTick)();
+    },
+    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;
       }
-    };
-    /**
-     * 同步表格滚动
-     */
-    const syncTableScrollTop = scrollTop => {
-      const $xeTable = internalData.xeTable;
-      if ($xeTable) {
-        const tableInternalData = $xeTable.internalData;
-        const {
-          elemStore: tableElemStore
-        } = tableInternalData;
-        const tableBodyScrollElem = (0, _util.getRefElem)(tableElemStore['main-body-scroll']);
-        if (tableBodyScrollElem) {
-          tableBodyScrollElem.scrollTop = scrollTop;
-        }
+      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);
       }
-    };
-    const ganttViewPrivateMethods = {
-      handleUpdateStyle: updateStyle,
-      handleLazyRecalculate,
-      triggerHeaderScrollEvent(evnt) {
-        const {
-          elemStore,
-          inVirtualScroll,
-          inBodyScroll,
-          inFooterScroll
-        } = internalData;
-        if (inVirtualScroll) {
-          return;
-        }
-        if (inBodyScroll || inFooterScroll) {
-          return;
-        }
-        const wrapperEl = evnt.currentTarget;
-        const bodyScrollElem = (0, _util.getRefElem)(elemStore['main-body-scroll']);
-        const xHandleEl = refScrollXHandleElem.value;
-        if (bodyScrollElem && wrapperEl) {
-          const isRollX = true;
-          const isRollY = false;
-          const currLeftNum = wrapperEl.scrollLeft;
-          internalData.inHeaderScroll = true;
-          (0, _dom.setScrollLeft)(xHandleEl, currLeftNum);
-          (0, _dom.setScrollLeft)(bodyScrollElem, currLeftNum);
-          handleScrollEvent(evnt, isRollY, isRollX, wrapperEl.scrollTop, currLeftNum);
-        }
-      },
-      triggerBodyScrollEvent(evnt) {
-        const {
-          elemStore,
-          inVirtualScroll,
-          inHeaderScroll,
-          inFooterScroll
-        } = internalData;
-        if (inVirtualScroll) {
-          return;
-        }
-        if (inHeaderScroll || inFooterScroll) {
-          return;
-        }
-        const wrapperEl = evnt.currentTarget;
-        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;
-        }
-        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);
-        }
-      },
-      triggerVirtualScrollXEvent(evnt) {
-        const {
-          elemStore,
-          inHeaderScroll,
-          inBodyScroll
-        } = internalData;
-        if (inHeaderScroll || inBodyScroll) {
-          return;
-        }
-        const wrapperEl = evnt.currentTarget;
-        const headerScrollElem = (0, _util.getRefElem)(elemStore['main-header-scroll']);
-        const bodyScrollElem = (0, _util.getRefElem)(elemStore['main-body-scroll']);
-        if (wrapperEl) {
-          const isRollY = false;
-          const isRollX = true;
-          const currLeftNum = wrapperEl.scrollLeft;
-          internalData.inVirtualScroll = true;
-          (0, _dom.setScrollLeft)(headerScrollElem, currLeftNum);
-          (0, _dom.setScrollLeft)(bodyScrollElem, currLeftNum);
-          handleScrollEvent(evnt, isRollY, isRollX, wrapperEl.scrollTop, currLeftNum);
-        }
-      },
-      triggerVirtualScrollYEvent(evnt) {
-        const {
-          elemStore,
-          inHeaderScroll,
-          inBodyScroll
-        } = internalData;
-        if (inHeaderScroll || inBodyScroll) {
-          return;
-        }
-        const wrapperEl = evnt.currentTarget;
-        const bodyScrollElem = (0, _util.getRefElem)(elemStore['main-body-scroll']);
-        if (wrapperEl) {
-          const isRollY = true;
-          const isRollX = false;
-          const currTopNum = wrapperEl.scrollTop;
-          internalData.inVirtualScroll = true;
-          (0, _dom.setScrollTop)(bodyScrollElem, currTopNum);
-          syncTableScrollTop(currTopNum);
-          handleScrollEvent(evnt, isRollY, isRollX, currTopNum, wrapperEl.scrollLeft);
-        }
-      },
-      updateScrollXSpace,
-      updateScrollYSpace
-    };
-    const handleGlobalResizeEvent = () => {
-      handleLazyRecalculate();
-    };
-    Object.assign($xeGanttView, ganttViewMethods, ganttViewPrivateMethods);
-    const renderScrollX = () => {
-      return (0, _vue.h)('div', {
+    },
+    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,
+        ref: 'refScrollXVirtualElem',
         class: 'vxe-gantt-view--scroll-x-virtual'
-      }, [(0, _vue.h)('div', {
-        ref: refScrollXLeftCornerElem,
+      }, [h('div', {
+        ref: 'refScrollXLeftCornerElem',
         class: 'vxe-gantt-view--scroll-x-left-corner'
-      }), (0, _vue.h)('div', {
-        ref: refScrollXWrapperElem,
+      }), h('div', {
+        ref: 'refScrollXWrapperElem',
         class: 'vxe-gantt-view--scroll-x-wrapper'
-      }, [(0, _vue.h)('div', {
-        ref: refScrollXHandleElem,
+      }, [h('div', {
+        ref: 'refScrollXHandleElem',
         class: 'vxe-gantt-view--scroll-x-handle',
-        onScroll: $xeGanttView.triggerVirtualScrollXEvent
-      }, [(0, _vue.h)('div', {
-        ref: refScrollXSpaceElem,
+        on: {
+          scroll: $xeGanttView.triggerVirtualScrollXEvent
+        }
+      }, [h('div', {
+        ref: 'refScrollXSpaceElem',
         class: 'vxe-gantt-view--scroll-x-space'
-      })])]), (0, _vue.h)('div', {
-        ref: refScrollXRightCornerElem,
+      })])]), h('div', {
+        ref: 'refScrollXRightCornerElem',
         class: 'vxe-gantt-view--scroll-x-right-corner'
       })]);
-    };
-    const renderScrollY = () => {
-      return (0, _vue.h)('div', {
-        ref: refScrollYVirtualElem,
+    },
+    renderScrollY: function renderScrollY(h) {
+      var $xeGanttView = this;
+      return h('div', {
+        ref: 'refScrollYVirtualElem',
         class: 'vxe-gantt-view--scroll-y-virtual'
-      }, [(0, _vue.h)('div', {
-        ref: refScrollYTopCornerElem,
+      }, [h('div', {
+        ref: 'refScrollYTopCornerElem',
         class: 'vxe-gantt-view--scroll-y-top-corner'
-      }), (0, _vue.h)('div', {
-        ref: refScrollYWrapperElem,
+      }), h('div', {
+        ref: 'refScrollYWrapperElem',
         class: 'vxe-gantt-view--scroll-y-wrapper'
-      }, [(0, _vue.h)('div', {
-        ref: refScrollYHandleElem,
+      }, [h('div', {
+        ref: 'refScrollYHandleElem',
         class: 'vxe-gantt-view--scroll-y-handle',
-        onScroll: $xeGanttView.triggerVirtualScrollYEvent
-      }, [(0, _vue.h)('div', {
-        ref: refScrollYSpaceElem,
+        on: {
+          scroll: $xeGanttView.triggerVirtualScrollYEvent
+        }
+      }, [h('div', {
+        ref: 'refScrollYSpaceElem',
         class: 'vxe-gantt-view--scroll-y-space'
-      })])]), (0, _vue.h)('div', {
-        ref: refScrollYBottomCornerElem,
+      })])]), h('div', {
+        ref: 'refScrollYBottomCornerElem',
         class: 'vxe-gantt-view--scroll-y-bottom-corner'
       })]);
-    };
-    const renderViewport = () => {
-      return (0, _vue.h)('div', {
+    },
+    renderViewport: function renderViewport(h) {
+      return h('div', {
         class: 'vxe-gantt-view--viewport-wrapper'
-      }, [(0, _vue.h)(_ganttHeader.default), (0, _vue.h)(_ganttBody.default)]);
-    };
-    const renderBody = () => {
-      const scrollbarYToLeft = computeScrollbarYToLeft.value;
-      return (0, _vue.h)('div', {
+      }, [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 ? [renderScrollY(), renderViewport()] : [renderViewport(), renderScrollY()]);
-    };
-    const renderVN = () => {
-      const {
-        overflowX,
-        overflowY,
-        scrollXLoad,
-        scrollYLoad
-      } = reactData;
-      const taskViewOpts = computeTaskViewOpts.value;
-      const scrollbarXToTop = computeScrollbarXToTop.value;
-      return (0, _vue.h)('div', {
-        ref: refElem,
-        class: ['vxe-gantt-view', `mode--${taskViewOpts.mode || 'day'}`, {
+      }, 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
         }]
-      }, [(0, _vue.h)('div', {
+      }, [h('div', {
         class: 'vxe-gantt-view--render-wrapper'
-      }, scrollbarXToTop ? [renderScrollX(), renderBody()] : [renderBody(), renderScrollX()]), (0, _vue.h)('div', {
+      }, scrollbarXToTop ? [$xeGanttView.renderScrollX(h), $xeGanttView.renderBody(h)] : [$xeGanttView.renderBody(h), $xeGanttView.renderScrollX(h)]), h('div', {
         class: 'vxe-gantt-view--render-vars'
-      }, [(0, _vue.h)('div', {
-        ref: refColInfoElem,
+      }, [h('div', {
+        ref: 'refColInfoElem',
         class: 'vxe-gantt-view--column-info'
       })])]);
-    };
-    const tdFlag = (0, _vue.ref)(0);
-    (0, _vue.watch)(() => reactData.tableData, () => {
-      tdFlag.value++;
-    });
-    (0, _vue.watch)(() => reactData.tableData.length, () => {
-      tdFlag.value++;
-    });
-    (0, _vue.watch)(tdFlag, () => {
-      handleUpdateData();
-    });
-    (0, _vue.onMounted)(() => {
-      globalEvents.on($xeGanttView, 'resize', handleGlobalResizeEvent);
-    });
-    (0, _vue.onUnmounted)(() => {
-      globalEvents.off($xeGanttView, 'keydown');
-      _xeUtils.default.assign(internalData, createInternalData());
-    });
-    $xeGanttView.renderVN = renderVN;
-    (0, _vue.provide)('$xeGanttView', $xeGanttView);
-    return $xeGanttView;
+    }
+  },
+  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() {
-    return this.renderVN();
+  render: function render(h) {
+    return this.renderVN(h);
   }
 });