vxe-gantt 0.0.2 → 4.0.0-beta.0

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

@@ -0,0 +1,810 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _vue = require("vue");
+var _comp = require("../../ui/src/comp");
+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;
+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
+    }
+  };
+}
+const maxYHeight = 5e6;
+const maxXWidth = 5e6;
+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)({
+      // 是否启用了横向 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
+      }
+    });
+    const internalData = createInternalData();
+    const refMaps = {
+      refElem
+    };
+    const computeMaps = {};
+    const $xeGanttView = {
+      xID,
+      props,
+      context,
+      reactData,
+      internalData,
+      getRefMaps: () => refMaps,
+      getComputeMaps: () => computeMaps
+    };
+    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;
+      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`;
+          }
+        });
+      }
+      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;
+      }
+      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 (bodyTableElem) {
+        bodyTableElem.style.transform = `translate(${xSpaceLeft}px, ${reactData.scrollYTop || 0}px)`;
+      }
+      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`;
+      }
+      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;
+      }
+      let ySpaceHeight = scrollYHeight;
+      let scrollYTop = ySpaceTop;
+      let 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(${reactData.scrollXLeft || 0}px, ${scrollYTop}px)`;
+      }
+      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` : '';
+      }
+      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);
+      }
+      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)();
+      }
+    };
+    /**
+     * 同步表格滚动
+     */
+    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;
+        }
+      }
+    };
+    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', {
+        key: 'vsx',
+        ref: refScrollXVirtualElem,
+        class: 'vxe-gantt-view--scroll-x-virtual'
+      }, [(0, _vue.h)('div', {
+        ref: refScrollXLeftCornerElem,
+        class: 'vxe-gantt-view--scroll-x-left-corner'
+      }), (0, _vue.h)('div', {
+        ref: refScrollXWrapperElem,
+        class: 'vxe-gantt-view--scroll-x-wrapper'
+      }, [(0, _vue.h)('div', {
+        ref: refScrollXHandleElem,
+        class: 'vxe-gantt-view--scroll-x-handle',
+        onScroll: $xeGanttView.triggerVirtualScrollXEvent
+      }, [(0, _vue.h)('div', {
+        ref: refScrollXSpaceElem,
+        class: 'vxe-gantt-view--scroll-x-space'
+      })])]), (0, _vue.h)('div', {
+        ref: refScrollXRightCornerElem,
+        class: 'vxe-gantt-view--scroll-x-right-corner'
+      })]);
+    };
+    const renderScrollY = () => {
+      return (0, _vue.h)('div', {
+        ref: refScrollYVirtualElem,
+        class: 'vxe-gantt-view--scroll-y-virtual'
+      }, [(0, _vue.h)('div', {
+        ref: refScrollYTopCornerElem,
+        class: 'vxe-gantt-view--scroll-y-top-corner'
+      }), (0, _vue.h)('div', {
+        ref: refScrollYWrapperElem,
+        class: 'vxe-gantt-view--scroll-y-wrapper'
+      }, [(0, _vue.h)('div', {
+        ref: refScrollYHandleElem,
+        class: 'vxe-gantt-view--scroll-y-handle',
+        onScroll: $xeGanttView.triggerVirtualScrollYEvent
+      }, [(0, _vue.h)('div', {
+        ref: refScrollYSpaceElem,
+        class: 'vxe-gantt-view--scroll-y-space'
+      })])]), (0, _vue.h)('div', {
+        ref: refScrollYBottomCornerElem,
+        class: 'vxe-gantt-view--scroll-y-bottom-corner'
+      })]);
+    };
+    const renderViewport = () => {
+      return (0, _vue.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', {
+        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'}`, {
+          'is--scroll-y': overflowY,
+          'is--scroll-x': overflowX,
+          'is--virtual-x': scrollXLoad,
+          'is--virtual-y': scrollYLoad
+        }]
+      }, [(0, _vue.h)('div', {
+        class: 'vxe-gantt-view--render-wrapper'
+      }, scrollbarXToTop ? [renderScrollX(), renderBody()] : [renderBody(), renderScrollX()]), (0, _vue.h)('div', {
+        class: 'vxe-gantt-view--render-vars'
+      }, [(0, _vue.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;
+  },
+  render() {
+    return this.renderVN();
+  }
+});