vxe-gantt 0.0.2 → 3.0.0-beta.0

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

@@ -0,0 +1,820 @@
+import { defineVxeComponent } from '../../ui/src/comp';
+import { VxeUI } from '@vxe-ui/core';
+import { setScrollTop, setScrollLeft } from '../../ui/src/dom';
+import { getRefElem } from './util';
+import XEUtils from 'xe-utils';
+import GanttViewHeaderComponent from './gantt-header';
+import GanttViewBodyComponent from './gantt-body';
+const { globalEvents } = 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;
+function handleParseColumn($xeGanttView) {
+    const $xeGantt = $xeGanttView.$xeGantt;
+    const reactData = $xeGanttView.reactData;
+    const internalData = $xeGanttView.internalData;
+    const { minViewDate, maxViewDate } = reactData;
+    const taskViewOpts = $xeGantt.computeTaskViewOpts;
+    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 = $xeGantt.computeStartField;
+                    const endField = $xeGantt.computeEndField;
+                    const tableInternalData = $xeTable;
+                    const { afterFullData } = tableInternalData;
+                    const ctMaps = {};
+                    afterFullData.forEach(row => {
+                        const rowid = $xeTable.getRowid(row);
+                        const startValue = XEUtils.get(row, startField);
+                        const endValue = XEUtils.get(row, endField);
+                        if (startValue && endValue) {
+                            const startDate = XEUtils.toStringDate(startValue);
+                            const endDate = XEUtils.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;
+}
+function handleUpdateData($xeGanttView) {
+    const $xeGantt = $xeGanttView.$xeGantt;
+    const reactData = $xeGanttView.reactData;
+    const internalData = $xeGanttView.internalData;
+    const $xeTable = internalData.xeTable;
+    const sdMaps = {};
+    const edMaps = {};
+    let minDate = null;
+    let maxDate = null;
+    if ($xeTable) {
+        const startField = $xeGantt.computeStartField;
+        const endField = $xeGantt.computeEndField;
+        const tableInternalData = $xeTable;
+        const { afterFullData } = tableInternalData;
+        afterFullData.forEach(row => {
+            const startValue = XEUtils.get(row, startField);
+            const endValue = XEUtils.get(row, endField);
+            if (startValue && endValue) {
+                const startDate = XEUtils.toStringDate(startValue);
+                if (!minDate || minDate.getTime() > startDate.getTime()) {
+                    minDate = startDate;
+                }
+                const endDate = XEUtils.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) {
+    const $xeGantt = $xeGanttView.$xeGantt;
+    const reactData = $xeGanttView.reactData;
+    const internalData = $xeGanttView.internalData;
+    const { scrollXWidth, scrollYHeight } = reactData;
+    const { elemStore } = internalData;
+    const scrollbarOpts = $xeGantt.computeScrollbarOpts;
+    const bodyWrapperElem = getRefElem(elemStore['main-body-wrapper']);
+    const xHandleEl = $xeGanttView.$refs.refScrollXHandleElem;
+    const yHandleEl = $xeGanttView.$refs.refScrollYHandleElem;
+    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;
+    }
+}
+function updateChart($xeGanttView) {
+    const reactData = $xeGanttView.reactData;
+    const internalData = $xeGanttView.internalData;
+    const { viewCellWidth } = reactData;
+    const { elemStore, chartMaps } = internalData;
+    const chartWrapper = getRefElem(elemStore['main-chart-wrapper']);
+    if (chartWrapper) {
+        XEUtils.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 $xeGanttView.$nextTick();
+}
+function updateStyle($xeGanttView) {
+    const $xeGantt = $xeGanttView.$xeGantt;
+    const reactData = $xeGanttView.reactData;
+    const internalData = $xeGanttView.internalData;
+    const { scrollbarWidth, scrollbarHeight, tableColumn } = reactData;
+    const { elemStore } = internalData;
+    const $xeTable = internalData.xeTable;
+    const el = $xeGanttView.$refs.refElem;
+    if (!el || !el.clientHeight) {
+        return;
+    }
+    const scrollbarXToTop = $xeGantt.computeScrollbarXToTop;
+    const xLeftCornerEl = $xeGanttView.$refs.refScrollXLeftCornerElem;
+    const xRightCornerEl = $xeGanttView.$refs.refScrollXRightCornerElem;
+    const scrollXVirtualEl = $xeGanttView.$refs.refScrollXVirtualElem;
+    const osbWidth = scrollbarWidth;
+    const osbHeight = scrollbarHeight;
+    let tbHeight = 0;
+    let tHeaderHeight = 0;
+    let tFooterHeight = 0;
+    if ($xeTable) {
+        const tableInternalData = $xeTable;
+        tbHeight = tableInternalData.tBodyHeight;
+        tHeaderHeight = tableInternalData.tHeaderHeight;
+        tFooterHeight = tableInternalData.tFooterHeight;
+    }
+    const headerScrollElem = getRefElem(elemStore['main-header-scroll']);
+    if (headerScrollElem) {
+        headerScrollElem.style.height = `${tHeaderHeight}px`;
+    }
+    const bodyScrollElem = 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 = $xeGanttView.$refs.refScrollXWrapperElem;
+    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 = $xeGanttView.$refs.refScrollYVirtualElem;
+    if (scrollYVirtualEl) {
+        scrollYVirtualEl.style.width = `${osbWidth}px`;
+        scrollYVirtualEl.style.height = `${tbHeight + tHeaderHeight + tFooterHeight}px`;
+        scrollYVirtualEl.style.visibility = 'visible';
+    }
+    const yTopCornerEl = $xeGanttView.$refs.refScrollYTopCornerElem;
+    if (yTopCornerEl) {
+        yTopCornerEl.style.height = `${tHeaderHeight}px`;
+        yTopCornerEl.style.display = tHeaderHeight ? 'block' : '';
+    }
+    const yWrapperEl = $xeGanttView.$refs.refScrollYWrapperElem;
+    if (yWrapperEl) {
+        yWrapperEl.style.height = `${tbHeight}px`;
+        yWrapperEl.style.top = `${tHeaderHeight}px`;
+    }
+    const yBottomCornerEl = $xeGanttView.$refs.refScrollYBottomCornerElem;
+    if (yBottomCornerEl) {
+        yBottomCornerEl.style.height = `${tFooterHeight}px`;
+        yBottomCornerEl.style.top = `${tHeaderHeight + tbHeight}px`;
+        yBottomCornerEl.style.display = tFooterHeight ? 'block' : '';
+    }
+    const colInfoElem = $xeGanttView.$refs.refColInfoElem;
+    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 = getRefElem(elemStore['main-header-table']);
+    const bodyTableElem = getRefElem(elemStore['main-body-table']);
+    if (headerTableElem) {
+        headerTableElem.style.width = `${viewTableWidth}px`;
+    }
+    if (bodyTableElem) {
+        bodyTableElem.style.width = `${viewTableWidth}px`;
+    }
+    reactData.scrollXWidth = viewTableWidth;
+    return updateChart($xeGanttView);
+}
+function handleLazyRecalculate($xeGanttView) {
+    calcScrollbar($xeGanttView);
+    updateStyle($xeGanttView);
+    return $xeGanttView.$nextTick();
+}
+function updateScrollXSpace($xeGanttView) {
+    const reactData = $xeGanttView.reactData;
+    const internalData = $xeGanttView.internalData;
+    const { scrollXLoad, scrollXWidth } = reactData;
+    const { elemStore } = internalData;
+    const bodyScrollElem = getRefElem(elemStore['main-body-scroll']);
+    const bodyTableElem = getRefElem(elemStore['main-body-table']);
+    let xSpaceLeft = 0;
+    let clientWidth = 0;
+    if (bodyScrollElem) {
+        clientWidth = bodyScrollElem.clientWidth;
+    }
+    // 虚拟渲染
+    let isScrollXBig = false;
+    let ySpaceWidth = scrollXWidth;
+    if (scrollXWidth > maxXWidth) {
+        // 触右
+        if (bodyScrollElem && bodyTableElem && bodyScrollElem.scrollLeft + clientWidth >= maxXWidth) {
+            xSpaceLeft = maxXWidth - bodyTableElem.clientWidth;
+        }
+        else {
+            xSpaceLeft = (maxXWidth - clientWidth) * (xSpaceLeft / (scrollXWidth - clientWidth));
+        }
+        ySpaceWidth = maxXWidth;
+        isScrollXBig = true;
+    }
+    if (bodyTableElem) {
+        bodyTableElem.style.transform = `translate(${xSpaceLeft}px, ${reactData.scrollYTop || 0}px)`;
+    }
+    const layoutList = ['header', 'body', 'footer'];
+    layoutList.forEach(layout => {
+        const xSpaceElem = getRefElem(elemStore[`main-${layout}-xSpace`]);
+        if (xSpaceElem) {
+            xSpaceElem.style.width = scrollXLoad ? `${ySpaceWidth}px` : '';
+        }
+    });
+    reactData.scrollXLeft = xSpaceLeft;
+    reactData.scrollXWidth = ySpaceWidth;
+    reactData.isScrollXBig = isScrollXBig;
+    const scrollXSpaceEl = $xeGanttView.$refs.refScrollXSpaceElem;
+    if (scrollXSpaceEl) {
+        scrollXSpaceEl.style.width = `${ySpaceWidth}px`;
+    }
+    calcScrollbar($xeGanttView);
+    return $xeGanttView.$nextTick().then(() => {
+        updateStyle($xeGanttView);
+    });
+}
+function updateScrollYSpace($xeGanttView) {
+    const reactData = $xeGanttView.reactData;
+    const internalData = $xeGanttView.internalData;
+    const { scrollYLoad, overflowY } = reactData;
+    const { elemStore } = internalData;
+    const $xeTable = internalData.xeTable;
+    const bodyScrollElem = getRefElem(elemStore['main-body-scroll']);
+    const bodyTableElem = getRefElem(elemStore['main-body-table']);
+    let ySpaceTop = 0;
+    let scrollYHeight = 0;
+    let isScrollYBig = false;
+    if ($xeTable) {
+        const tableReactData = $xeTable;
+        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 = getRefElem(elemStore[`main-${layout}-ySpace`]);
+        if (ySpaceElem) {
+            ySpaceElem.style.height = ySpaceHeight ? `${ySpaceHeight}px` : '';
+        }
+    });
+    const scrollYSpaceEl = $xeGanttView.$refs.refScrollYSpaceElem;
+    if (scrollYSpaceEl) {
+        scrollYSpaceEl.style.height = ySpaceHeight ? `${ySpaceHeight}px` : '';
+    }
+    reactData.scrollYTop = scrollYTop;
+    reactData.scrollYHeight = scrollYHeight;
+    reactData.isScrollYBig = isScrollYBig;
+    calcScrollbar($xeGanttView);
+    return $xeGanttView.$nextTick().then(() => {
+        updateStyle($xeGanttView);
+    });
+}
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+function checkLastSyncScroll($xeGanttView, isRollX, isRollY) {
+    const reactData = $xeGanttView.reactData;
+    const internalData = $xeGanttView.internalData;
+    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
+function handleScrollEvent($xeGanttView, evnt, isRollY, isRollX, scrollTop, scrollLeft) {
+    checkLastSyncScroll($xeGanttView, isRollX, isRollY);
+}
+/**
+ * 同步表格滚动
+ */
+function syncTableScrollTop($xeGanttView, scrollTop) {
+    const internalData = $xeGanttView.internalData;
+    const $xeTable = internalData.xeTable;
+    if ($xeTable) {
+        const tableInternalData = $xeTable;
+        const { elemStore: tableElemStore } = tableInternalData;
+        const tableBodyScrollElem = getRefElem(tableElemStore['main-body-scroll']);
+        if (tableBodyScrollElem) {
+            tableBodyScrollElem.scrollTop = scrollTop;
+        }
+    }
+}
+export default defineVxeComponent({
+    name: 'VxeGanttView',
+    inject: {
+        $xeGantt: {
+            default: null
+        }
+    },
+    provide() {
+        const $xeGanttView = this;
+        return {
+            $xeGanttView
+        };
+    },
+    props: {},
+    data() {
+        const xID = XEUtils.uniqueId();
+        const 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
+            }
+        };
+        const internalData = createInternalData();
+        return {
+            xID,
+            reactData,
+            internalData
+        };
+    },
+    computed: Object.assign({}, {}),
+    methods: {
+        //
+        // Method
+        //
+        refreshData() {
+            const $xeGanttView = this;
+            handleUpdateData($xeGanttView);
+            return handleLazyRecalculate($xeGanttView);
+        },
+        updateViewData() {
+            const $xeGanttView = this;
+            const reactData = $xeGanttView.reactData;
+            const internalData = $xeGanttView.internalData;
+            const $xeTable = internalData.xeTable;
+            if ($xeTable) {
+                const tableReactData = $xeTable;
+                const { tableData } = tableReactData;
+                reactData.tableData = tableData;
+            }
+            return $xeGanttView.$nextTick();
+        },
+        connectUpdate({ $table }) {
+            const $xeGanttView = this;
+            const internalData = $xeGanttView.internalData;
+            if ($table) {
+                internalData.xeTable = $table;
+            }
+            return $xeGanttView.$nextTick();
+        },
+        handleUpdateStyle() {
+            const $xeGanttView = this;
+            return updateStyle($xeGanttView);
+        },
+        handleLazyRecalculate() {
+            const $xeGanttView = this;
+            return handleLazyRecalculate($xeGanttView);
+        },
+        triggerHeaderScrollEvent(evnt) {
+            const $xeGanttView = this;
+            const internalData = $xeGanttView.internalData;
+            const { elemStore, inVirtualScroll, inBodyScroll, inFooterScroll } = internalData;
+            if (inVirtualScroll) {
+                return;
+            }
+            if (inBodyScroll || inFooterScroll) {
+                return;
+            }
+            const wrapperEl = evnt.currentTarget;
+            const bodyScrollElem = getRefElem(elemStore['main-body-scroll']);
+            const xHandleEl = $xeGanttView.$refs.refScrollXHandleElem;
+            if (bodyScrollElem && wrapperEl) {
+                const isRollX = true;
+                const isRollY = false;
+                const currLeftNum = wrapperEl.scrollLeft;
+                internalData.inHeaderScroll = true;
+                setScrollLeft(xHandleEl, currLeftNum);
+                setScrollLeft(bodyScrollElem, currLeftNum);
+                handleScrollEvent($xeGanttView, evnt, isRollY, isRollX, wrapperEl.scrollTop, currLeftNum);
+            }
+        },
+        triggerBodyScrollEvent(evnt) {
+            const $xeGanttView = this;
+            const internalData = $xeGanttView.internalData;
+            const { elemStore, inVirtualScroll, inHeaderScroll, inFooterScroll } = internalData;
+            if (inVirtualScroll) {
+                return;
+            }
+            if (inHeaderScroll || inFooterScroll) {
+                return;
+            }
+            const wrapperEl = evnt.currentTarget;
+            const headerScrollElem = getRefElem(elemStore['main-header-scroll']);
+            const xHandleEl = $xeGanttView.$refs.refScrollXHandleElem;
+            const yHandleEl = $xeGanttView.$refs.refScrollYHandleElem;
+            if (headerScrollElem && wrapperEl) {
+                const isRollX = true;
+                const isRollY = true;
+                const currLeftNum = wrapperEl.scrollLeft;
+                const currTopNum = wrapperEl.scrollTop;
+                internalData.inBodyScroll = true;
+                setScrollLeft(xHandleEl, currLeftNum);
+                setScrollLeft(headerScrollElem, currLeftNum);
+                setScrollTop(yHandleEl, currTopNum);
+                syncTableScrollTop($xeGanttView, currTopNum);
+                handleScrollEvent($xeGanttView, evnt, isRollY, isRollX, wrapperEl.scrollTop, currLeftNum);
+            }
+        },
+        triggerFooterScrollEvent(evnt) {
+            const $xeGanttView = this;
+            const internalData = $xeGanttView.internalData;
+            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($xeGanttView, evnt, isRollY, isRollX, wrapperEl.scrollTop, currLeftNum);
+            }
+        },
+        triggerVirtualScrollXEvent(evnt) {
+            const $xeGanttView = this;
+            const internalData = $xeGanttView.internalData;
+            const { elemStore, inHeaderScroll, inBodyScroll } = internalData;
+            if (inHeaderScroll || inBodyScroll) {
+                return;
+            }
+            const wrapperEl = evnt.currentTarget;
+            const headerScrollElem = getRefElem(elemStore['main-header-scroll']);
+            const bodyScrollElem = getRefElem(elemStore['main-body-scroll']);
+            if (wrapperEl) {
+                const isRollY = false;
+                const isRollX = true;
+                const currLeftNum = wrapperEl.scrollLeft;
+                internalData.inVirtualScroll = true;
+                setScrollLeft(headerScrollElem, currLeftNum);
+                setScrollLeft(bodyScrollElem, currLeftNum);
+                handleScrollEvent($xeGanttView, evnt, isRollY, isRollX, wrapperEl.scrollTop, currLeftNum);
+            }
+        },
+        triggerVirtualScrollYEvent(evnt) {
+            const $xeGanttView = this;
+            const internalData = $xeGanttView.internalData;
+            const { elemStore, inHeaderScroll, inBodyScroll } = internalData;
+            if (inHeaderScroll || inBodyScroll) {
+                return;
+            }
+            const wrapperEl = evnt.currentTarget;
+            const bodyScrollElem = getRefElem(elemStore['main-body-scroll']);
+            if (wrapperEl) {
+                const isRollY = true;
+                const isRollX = false;
+                const currTopNum = wrapperEl.scrollTop;
+                internalData.inVirtualScroll = true;
+                setScrollTop(bodyScrollElem, currTopNum);
+                syncTableScrollTop($xeGanttView, currTopNum);
+                handleScrollEvent($xeGanttView, evnt, isRollY, isRollX, currTopNum, wrapperEl.scrollLeft);
+            }
+        },
+        updateScrollXSpace() {
+            const $xeGanttView = this;
+            return updateScrollXSpace($xeGanttView);
+        },
+        updateScrollYSpace() {
+            const $xeGanttView = this;
+            return updateScrollYSpace($xeGanttView);
+        },
+        handleGlobalResizeEvent() {
+            const $xeGanttView = this;
+            handleLazyRecalculate($xeGanttView);
+        },
+        //
+        // Render
+        //
+        renderScrollX(h) {
+            const $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(h) {
+            const $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(h) {
+            return h('div', {
+                class: 'vxe-gantt-view--viewport-wrapper'
+            }, [
+                h(GanttViewHeaderComponent),
+                h(GanttViewBodyComponent)
+            ]);
+        },
+        renderBody(h) {
+            const $xeGanttView = this;
+            const $xeGantt = $xeGanttView.$xeGantt;
+            const 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(h) {
+            const $xeGanttView = this;
+            const $xeGantt = $xeGanttView.$xeGantt;
+            const reactData = $xeGanttView.reactData;
+            const { overflowX, overflowY, scrollXLoad, scrollYLoad } = reactData;
+            const taskViewOpts = $xeGantt.computeTaskViewOpts;
+            const scrollbarXToTop = $xeGantt.computeScrollbarXToTop;
+            return 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
+                    }]
+            }, [
+                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'() {
+            const $xeGanttView = this;
+            handleUpdateData($xeGanttView);
+        }
+    },
+    mounted() {
+        const $xeGanttView = this;
+        globalEvents.on($xeGanttView, 'resize', $xeGanttView.handleGlobalResizeEvent);
+    },
+    beforeDestroy() {
+        const $xeGanttView = this;
+        const internalData = $xeGanttView.internalData;
+        globalEvents.off($xeGanttView, 'keydown');
+        XEUtils.assign(internalData, createInternalData());
+    },
+    render(h) {
+        return this.renderVN(h);
+    }
+});