@visactor/vtable-gantt 1.17.3-alpha.11 → 1.17.3-alpha.12

package/dist/vtable-gantt.js

@@ -26541,811 +26541,6 @@
       registed || (registed = !0, preLoadAllModule(), isBrowserEnv() ? loadBrowserEnv(container) : isNodeEnv() && loadNodeEnv(container), registerArc(), registerCircle(), registerGroup(), registerImage(), registerLine(), registerRect(), registerRichtext(), registerShadowRoot(), registerSymbol(), registerText(), registerFlexLayoutPlugin(), loadPoptip(), registerFlexLayoutPlugin());
     }
 
-    const defaultTaskBarStyle = {
-        barColor: 'blue',
-        completedBarColor: 'gray',
-        width: 30,
-        cornerRadius: 3,
-        borderWidth: 0,
-        fontFamily: 'Arial',
-        fontSize: 14
-    };
-    function setWidthToDefaultTaskBarStyle(width) {
-        defaultTaskBarStyle.width = width;
-    }
-    const isNode$1 = typeof window === 'undefined' || typeof window.window === 'undefined';
-    const DayTimes = 1000 * 60 * 60 * 24;
-    function getDateIndexByX(x, gantt) {
-        const totalX = x + gantt.stateManager.scroll.horizontalBarPos;
-        const firstDateColWidth = gantt.getDateColWidth(0);
-        const dateIndex = Math.floor((totalX - firstDateColWidth) / gantt.parsedOptions.timelineColWidth) + 1;
-        return dateIndex;
-    }
-    function generateMarkLine(markLine) {
-        if (!markLine) {
-            return [];
-        }
-        if (markLine === true) {
-            return [
-                {
-                    date: createDateAtMidnight().toLocaleDateString(),
-                    scrollToMarkLine: true,
-                    position: 'left',
-                    style: {
-                        lineColor: 'red',
-                        lineWidth: 1
-                    }
-                }
-            ];
-        }
-        else if (Array.isArray(markLine)) {
-            return markLine.map((item, index) => {
-                return {
-                    ...item,
-                    date: item.date,
-                    scrollToMarkLine: item.scrollToMarkLine,
-                    position: item.position ?? 'left',
-                    style: {
-                        lineColor: item.style?.lineColor || 'red',
-                        lineWidth: item.style?.lineWidth || 1,
-                        lineDash: item.style?.lineDash
-                    }
-                };
-            });
-        }
-        return [
-            {
-                ...markLine,
-                date: markLine.date,
-                scrollToMarkLine: markLine.scrollToMarkLine ?? true,
-                position: markLine.position ?? 'left',
-                style: {
-                    lineColor: markLine.style?.lineColor || 'red',
-                    lineWidth: markLine.style?.lineWidth || 1,
-                    lineDash: markLine.style?.lineDash
-                }
-            }
-        ];
-    }
-    function getHorizontalScrollBarSize$1(scrollStyle) {
-        if (scrollStyle?.hoverOn ||
-            (scrollStyle?.horizontalVisible && scrollStyle?.horizontalVisible === 'none') ||
-            (!scrollStyle?.horizontalVisible && scrollStyle?.visible === 'none')) {
-            return 0;
-        }
-        return scrollStyle?.width ?? 7;
-    }
-    function getVerticalScrollBarSize$1(scrollStyle) {
-        if (scrollStyle?.hoverOn ||
-            (scrollStyle?.verticalVisible && scrollStyle?.verticalVisible === 'none') ||
-            (!scrollStyle?.verticalVisible && scrollStyle?.visible === 'none')) {
-            return 0;
-        }
-        return scrollStyle?.width ?? 7;
-    }
-    function initOptions(gantt) {
-        const options = gantt.options;
-        gantt.parsedOptions.tasksShowMode = options?.tasksShowMode ?? TasksShowMode.Tasks_Separate;
-        gantt.parsedOptions.pixelRatio = options?.pixelRatio ?? 1;
-        gantt.parsedOptions.rowHeight = options?.rowHeight ?? 40;
-        gantt.parsedOptions.timelineColWidth = options?.timelineHeader?.colWidth ?? 60;
-        gantt.parsedOptions.startDateField = options.taskBar?.startDateField ?? 'startDate';
-        gantt.parsedOptions.endDateField = options.taskBar?.endDateField ?? 'endDate';
-        gantt.parsedOptions.progressField = options.taskBar?.progressField ?? 'progress';
-        const { unit: minTimeUnit, startOfWeek, step } = gantt.parsedOptions.reverseSortedTimelineScales[0];
-        gantt.parsedOptions.minDate = options?.minDate
-            ? getStartDateByTimeUnit(new Date(options.minDate), minTimeUnit, startOfWeek)
-            : undefined;
-        gantt.parsedOptions.maxDate = options?.maxDate
-            ? getEndDateByTimeUnit(gantt.parsedOptions.minDate, new Date(options.maxDate), minTimeUnit, step)
-            : undefined;
-        gantt.parsedOptions._minDateTime = gantt.parsedOptions.minDate?.getTime();
-        gantt.parsedOptions._maxDateTime = gantt.parsedOptions.maxDate?.getTime();
-        gantt.parsedOptions.overscrollBehavior = options?.overscrollBehavior ?? 'auto';
-        gantt.parsedOptions.underlayBackgroundColor = options?.underlayBackgroundColor ?? '#FFF';
-        gantt.parsedOptions.scrollStyle = Object.assign({}, {
-            scrollRailColor: 'rgba(100, 100, 100, 0.2)',
-            scrollSliderColor: 'rgba(100, 100, 100, 0.5)',
-            scrollSliderCornerRadius: 4,
-            width: 10,
-            visible: 'always',
-            hoverOn: true,
-            barToSide: false
-        }, options?.scrollStyle);
-        gantt.parsedOptions.timelineHeaderHorizontalLineStyle = options?.timelineHeader?.horizontalLine;
-        gantt.parsedOptions.timelineHeaderVerticalLineStyle = options?.timelineHeader?.verticalLine;
-        gantt.parsedOptions.timelineHeaderBackgroundColor = options?.timelineHeader?.backgroundColor;
-        gantt.parsedOptions.timeLineHeaderRowHeights = [];
-        gantt.parsedOptions.timelineHeaderStyles = [];
-        for (let i = 0; i < gantt.parsedOptions.sortedTimelineScales.length ?? 0; i++) {
-            const style = gantt.parsedOptions.sortedTimelineScales[i].style;
-            gantt.parsedOptions.timelineHeaderStyles.push(Object.assign({
-                fontSize: 20,
-                fontWeight: 'bold',
-                textAlign: 'center',
-                textBaseline: 'middle',
-                color: '#000',
-                backgroundColor: '#fff'
-            }, style));
-            gantt.parsedOptions.timeLineHeaderRowHeights.push(gantt.parsedOptions.sortedTimelineScales[i].rowHeight ?? options?.headerRowHeight ?? 40);
-        }
-        gantt.parsedOptions.grid = Object.assign({}, options?.grid);
-        setWidthToDefaultTaskBarStyle((gantt.parsedOptions.rowHeight * 3) / 4);
-        gantt.parsedOptions.taskBarStyle =
-            options?.taskBar?.barStyle && typeof options?.taskBar?.barStyle === 'function'
-                ? options.taskBar.barStyle
-                : Object.assign({}, defaultTaskBarStyle, options?.taskBar?.barStyle);
-        gantt.parsedOptions.taskBarMilestoneStyle = Object.assign(typeof gantt.parsedOptions.taskBarStyle === 'function'
-            ? {}
-            : {
-                width: gantt.parsedOptions.taskBarStyle.width,
-                borderColor: gantt.parsedOptions.taskBarStyle.borderColor,
-                borderLineWidth: gantt.parsedOptions.taskBarStyle.borderLineWidth ?? 1,
-                fillColor: gantt.parsedOptions.taskBarStyle.barColor,
-                cornerRadius: 0
-            }, options?.taskBar?.milestoneStyle);
-        gantt.parsedOptions.taskBarMilestoneHypotenuse = gantt.parsedOptions.taskBarMilestoneStyle.width * Math.sqrt(2);
-        gantt.parsedOptions.dateFormat = options?.dateFormat;
-        gantt.parsedOptions.taskBarHoverStyle = Object.assign({
-            barOverlayColor: 'rgba(99, 144, 0, 0.4)'
-        }, options?.taskBar?.hoverBarStyle);
-        gantt.parsedOptions.taskBarSelectable = options?.taskBar?.selectable ?? true;
-        gantt.parsedOptions.taskBarSelectedStyle = Object.assign(typeof gantt.parsedOptions.taskBarStyle === 'function'
-            ? {
-                shadowBlur: 6,
-                shadowOffsetX: 0,
-                shadowOffsetY: 0,
-                borderLineWidth: 1
-            }
-            : {
-                shadowBlur: 6,
-                shadowOffsetX: 0,
-                shadowOffsetY: 0,
-                shadowColor: gantt.parsedOptions.taskBarStyle.barColor,
-                borderColor: gantt.parsedOptions.taskBarStyle.barColor,
-                borderLineWidth: 1
-            }, options?.taskBar?.selectedBarStyle);
-        gantt.parsedOptions.taskBarLabelText = options?.taskBar?.labelText ?? '';
-        gantt.parsedOptions.taskBarMoveable = options?.taskBar?.moveable ?? true;
-        gantt.parsedOptions.moveTaskBarToExtendDateRange = options?.taskBar?.moveToExtendDateRange ?? true;
-        gantt.parsedOptions.taskBarResizable = options?.taskBar?.resizable ?? true;
-        gantt.parsedOptions.taskBarDragOrder = options?.taskBar?.dragOrder ?? true;
-        gantt.parsedOptions.taskBarLabelStyle = {
-            fontFamily: options?.taskBar?.labelTextStyle?.fontFamily ?? 'Arial',
-            fontSize: options?.taskBar?.labelTextStyle?.fontSize ?? 20,
-            color: options?.taskBar?.labelTextStyle?.color ?? '#F01',
-            textAlign: options?.taskBar?.labelTextStyle?.textAlign ?? 'left',
-            textBaseline: options?.taskBar?.labelTextStyle?.textBaseline ?? 'middle',
-            padding: options?.taskBar?.labelTextStyle?.padding ?? [0, 0, 0, 10],
-            textOverflow: options?.taskBar?.labelTextStyle?.textOverflow
-        };
-        gantt.parsedOptions.taskBarCustomLayout = options?.taskBar?.customLayout;
-        gantt.parsedOptions.taskBarCreatable =
-            options?.taskBar?.scheduleCreatable ??
-                !!(gantt.parsedOptions.tasksShowMode === TasksShowMode.Sub_Tasks_Separate ||
-                    gantt.parsedOptions.tasksShowMode === TasksShowMode.Tasks_Separate);
-        gantt.parsedOptions.taskBarCreationButtonStyle = Object.assign({
-            lineColor: 'rgb(99, 144, 0)',
-            lineWidth: 1,
-            lineDash: [5, 5],
-            cornerRadius: 4,
-            backgroundColor: '#FFF'
-        }, options?.taskBar?.scheduleCreation?.buttonStyle);
-        gantt.parsedOptions.taskBarCreationCustomLayout = options?.taskBar?.scheduleCreation?.customLayout;
-        gantt.parsedOptions.taskBarCreationMaxWidth = options?.taskBar?.scheduleCreation?.maxWidth;
-        gantt.parsedOptions.taskBarCreationMinWidth = options?.taskBar?.scheduleCreation?.minWidth;
-        gantt.parsedOptions.outerFrameStyle = Object.assign({
-            borderColor: '#e1e4e8',
-            borderLineWidth: 1,
-            cornerRadius: 4
-        }, options.frame?.outerFrameStyle);
-        gantt.parsedOptions.markLine = generateMarkLine(options?.markLine);
-        if (gantt.parsedOptions.markLine?.length ?? 0) {
-            if (gantt.parsedOptions.markLine?.every(item => item.scrollToMarkLine === undefined)) {
-                gantt.parsedOptions.markLine[0].scrollToMarkLine = true;
-            }
-            if (gantt.parsedOptions.markLine?.find(item => item.scrollToMarkLine)) {
-                gantt.parsedOptions.scrollToMarkLineDate = getStartDateByTimeUnit(new Date(gantt.parsedOptions.markLine?.find(item => item.scrollToMarkLine).date), minTimeUnit, startOfWeek);
-            }
-        }
-        gantt.parsedOptions.verticalSplitLineHighlight = options.frame?.verticalSplitLineHighlight;
-        gantt.parsedOptions.verticalSplitLine = Object.assign({
-            lineColor: gantt.parsedOptions.outerFrameStyle?.borderColor,
-            lineWidth: gantt.parsedOptions.outerFrameStyle?.borderLineWidth
-        }, options.frame?.verticalSplitLine);
-        gantt.parsedOptions.horizontalSplitLine = options.frame?.horizontalSplitLine;
-        gantt.parsedOptions.verticalSplitLineMoveable = options.frame?.verticalSplitLineMoveable;
-        gantt.parsedOptions.taskKeyField = options.taskKeyField ?? 'id';
-        gantt.parsedOptions.dependencyLinks = options.dependency?.links ?? [];
-        gantt.parsedOptions.dependencyLinkCreatable = options.dependency?.linkCreatable ?? false;
-        gantt.parsedOptions.dependencyLinkSelectable = options.dependency?.linkSelectable ?? true;
-        gantt.parsedOptions.dependencyLinkDeletable = options.dependency?.linkDeletable ?? false;
-        gantt.parsedOptions.dependencyLinkLineStyle = Object.assign({
-            lineColor: 'red',
-            lineWidth: 1
-        }, options.dependency?.linkLineStyle);
-        gantt.parsedOptions.dependencyLinkSelectedLineStyle = Object.assign({
-            shadowBlur: 4,
-            shadowOffset: 0,
-            shadowColor: gantt.parsedOptions.dependencyLinkLineStyle.lineColor,
-            lineColor: gantt.parsedOptions.dependencyLinkLineStyle.lineColor,
-            lineWidth: gantt.parsedOptions.dependencyLinkLineStyle.lineWidth
-        }, options?.dependency?.linkSelectedLineStyle);
-        gantt.parsedOptions.dependencyLinkLineCreatePointStyle = Object.assign({
-            strokeColor: 'red',
-            fillColor: 'white',
-            radius: 5,
-            strokeWidth: 1
-        }, options?.dependency?.linkCreatePointStyle);
-        gantt.parsedOptions.dependencyLinkLineCreatingPointStyle = Object.assign({
-            strokeColor: 'red',
-            fillColor: 'red',
-            radius: 5,
-            strokeWidth: 1
-        }, options?.dependency?.linkCreatingPointStyle);
-        gantt.parsedOptions.dependencyLinkLineCreatingStyle = Object.assign({
-            lineColor: 'red',
-            lineWidth: 1,
-            lineDash: [5, 5]
-        }, options?.dependency?.linkCreatingLineStyle);
-        gantt.parsedOptions.eventOptions = options?.eventOptions;
-        gantt.parsedOptions.keyboardOptions = options?.keyboardOptions;
-        gantt.parsedOptions.markLineCreateOptions = options?.markLineCreateOptions;
-    }
-    function updateOptionsWhenScaleChanged(gantt) {
-        const options = gantt.options;
-        const { unit: minTimeUnit, startOfWeek, step } = gantt.parsedOptions.reverseSortedTimelineScales[0];
-        gantt.parsedOptions.minDate = getStartDateByTimeUnit(new Date(gantt.parsedOptions.minDate), minTimeUnit, startOfWeek);
-        gantt.parsedOptions.maxDate = getEndDateByTimeUnit(gantt.parsedOptions.minDate, new Date(gantt.parsedOptions.maxDate), minTimeUnit, step);
-        gantt.parsedOptions._minDateTime = gantt.parsedOptions.minDate?.getTime();
-        gantt.parsedOptions._maxDateTime = gantt.parsedOptions.maxDate?.getTime();
-        gantt.parsedOptions.timeLineHeaderRowHeights = [];
-        gantt.parsedOptions.timelineHeaderStyles = [];
-        for (let i = 0; i < gantt.parsedOptions.sortedTimelineScales.length ?? 0; i++) {
-            const style = gantt.parsedOptions.sortedTimelineScales[i].style;
-            gantt.parsedOptions.timelineHeaderStyles.push(Object.assign({
-                fontSize: 20,
-                fontWeight: 'bold',
-                textAlign: 'center',
-                textBaseline: 'middle',
-                color: '#000',
-                backgroundColor: '#fff'
-            }, style));
-            gantt.parsedOptions.timeLineHeaderRowHeights.push(gantt.parsedOptions.sortedTimelineScales[i].rowHeight ?? options?.headerRowHeight ?? 40);
-        }
-    }
-    function generateTimeLineDate(currentDate, endDate, scale) {
-        const { unit, step, format } = scale;
-        const timelineDates = [];
-        while (currentDate < endDate) {
-            if (unit === 'day') {
-                const year = currentDate.getFullYear();
-                const month = currentDate.getMonth();
-                const day = currentDate.getDate();
-                const end = createDateAtLastHour(new Date(year, month, day + step - 1), true);
-                if (end.getTime() > endDate.getTime()) {
-                    end.setTime(endDate.getTime());
-                }
-                const start = currentDate;
-                const formattedDate = format?.({ dateIndex: day, startDate: start, endDate: end });
-                const columnTitle = formattedDate || day.toString();
-                const dayCellConfig = {
-                    days: Math.abs(end.getTime() - currentDate.getTime() + 1) / DayTimes,
-                    startDate: start,
-                    endDate: end,
-                    step,
-                    unit: 'day',
-                    title: columnTitle,
-                    dateIndex: day
-                };
-                timelineDates.push(dayCellConfig);
-                currentDate = new Date(year, month, day + step);
-            }
-            else if (unit === 'month') {
-                const year = currentDate.getFullYear();
-                const month = currentDate.getMonth();
-                const end = createDateAtLastHour(new Date(year, month + step, 0), true);
-                if (end.getTime() > endDate.getTime()) {
-                    end.setTime(endDate.getTime());
-                }
-                const start = currentDate;
-                const formattedDate = format?.({ dateIndex: month + 1, startDate: start, endDate: end });
-                const columnTitle = formattedDate || (month + 1).toString();
-                const dayCellConfig = {
-                    days: Math.abs(end.getTime() - currentDate.getTime() + 1) / DayTimes,
-                    startDate: start,
-                    step,
-                    unit: 'month',
-                    endDate: end,
-                    title: columnTitle,
-                    dateIndex: month + 1
-                };
-                timelineDates.push(dayCellConfig);
-                currentDate = new Date(year, month + step, 1);
-            }
-            else if (unit === 'quarter') {
-                const year = currentDate.getFullYear();
-                const quarter = Math.floor(currentDate.getMonth() / 3);
-                const end = createDateAtLastHour(new Date(year, (quarter + step) * 3, 0), true);
-                if (end.getTime() > endDate.getTime()) {
-                    end.setTime(endDate.getTime());
-                }
-                const start = currentDate;
-                const formattedDate = format?.({ dateIndex: quarter + 1, startDate: start, endDate: end });
-                const columnTitle = formattedDate || (quarter + 1).toString();
-                const dayCellConfig = {
-                    days: Math.abs(end.getTime() - currentDate.getTime() + 1) / (1000 * 60 * 60 * 24),
-                    startDate: start,
-                    step,
-                    unit: 'quarter',
-                    endDate: end,
-                    title: columnTitle,
-                    dateIndex: quarter + 1
-                };
-                timelineDates.push(dayCellConfig);
-                currentDate = new Date(year, (quarter + step) * 3, 1);
-            }
-            else if (unit === 'year') {
-                const year = currentDate.getFullYear();
-                const end = createDateAtLastHour(new Date(year + step - 1, 11, 31), true);
-                if (end.getTime() > endDate.getTime()) {
-                    end.setTime(endDate.getTime());
-                }
-                const start = currentDate;
-                const formattedDate = format?.({ dateIndex: year, startDate: start, endDate: end });
-                const columnTitle = formattedDate || year.toString();
-                const dayCellConfig = {
-                    days: Math.abs(end.getTime() - currentDate.getTime() + 1) / DayTimes,
-                    startDate: start,
-                    endDate: end,
-                    step,
-                    unit: 'year',
-                    title: columnTitle,
-                    dateIndex: year
-                };
-                timelineDates.push(dayCellConfig);
-                currentDate = new Date(year + step, 0, 1);
-            }
-            else if (unit === 'week') {
-                const startOfWeekSetting = scale.startOfWeek ?? 'monday';
-                let dayOfWeek = currentDate.getDay();
-                if (startOfWeekSetting === 'monday') {
-                    dayOfWeek = dayOfWeek === 0 ? 6 : dayOfWeek - 1;
-                }
-                const startOfWeek = createDateAtMidnight(currentDate);
-                const dateEnd = createDateAtLastHour(currentDate.getTime() + (7 * step - dayOfWeek) * 24 * 60 * 60 * 1000 - 1, true);
-                if (dateEnd > endDate) {
-                    dateEnd.setTime(endDate.getTime());
-                }
-                const weekNumber = getWeekNumber(startOfWeek);
-                const columnTitle = format?.({ dateIndex: weekNumber, startDate: startOfWeek, endDate: dateEnd }) || weekNumber.toString();
-                const dayCellConfig = {
-                    days: (dateEnd.getTime() - startOfWeek.getTime() + 1) / DayTimes,
-                    startDate: startOfWeek,
-                    endDate: dateEnd,
-                    step,
-                    unit: 'week',
-                    title: columnTitle,
-                    dateIndex: weekNumber
-                };
-                timelineDates.push(dayCellConfig);
-                currentDate.setTime(createDateAtMidnight(currentDate.getTime() + (7 * step - dayOfWeek) * 24 * 60 * 60 * 1000, true).getTime());
-            }
-            else if (unit === 'hour') {
-                const year = currentDate.getFullYear();
-                const month = currentDate.getMonth();
-                const day = currentDate.getDate();
-                const hour = currentDate.getHours();
-                const end = createDateAtLastMinute(new Date(year, month, day, hour + step - 1), true);
-                if (end.getTime() > endDate.getTime()) {
-                    end.setTime(endDate.getTime());
-                }
-                const start = currentDate;
-                const formattedDate = format?.({ dateIndex: hour, startDate: start, endDate: end });
-                const columnTitle = formattedDate || hour.toString();
-                const dayCellConfig = {
-                    days: Math.abs(end.getTime() - currentDate.getTime() + 1) / DayTimes,
-                    startDate: start,
-                    endDate: end,
-                    step,
-                    unit: 'hour',
-                    title: columnTitle,
-                    dateIndex: currentDate.getHours()
-                };
-                timelineDates.push(dayCellConfig);
-                currentDate = new Date(year, month, day, hour + step);
-            }
-            else if (unit === 'minute') {
-                const year = currentDate.getFullYear();
-                const month = currentDate.getMonth();
-                const day = currentDate.getDate();
-                const hour = currentDate.getHours();
-                const minute = currentDate.getMinutes();
-                const end = createDateAtLastSecond(new Date(year, month, day, hour, minute + step - 1), true);
-                if (end.getTime() > endDate.getTime()) {
-                    end.setTime(endDate.getTime());
-                }
-                const start = currentDate;
-                const formattedDate = format?.({ dateIndex: minute, startDate: start, endDate: end });
-                const columnTitle = formattedDate || minute.toString();
-                const dayCellConfig = {
-                    days: Math.abs(end.getTime() - currentDate.getTime() + 1) / DayTimes,
-                    startDate: start,
-                    endDate: end,
-                    step,
-                    unit: 'minute',
-                    title: columnTitle,
-                    dateIndex: currentDate.getMinutes()
-                };
-                timelineDates.push(dayCellConfig);
-                currentDate = new Date(year, month, day, hour, minute + step);
-            }
-            else if (unit === 'second') {
-                const year = currentDate.getFullYear();
-                const month = currentDate.getMonth();
-                const day = currentDate.getDate();
-                const hour = currentDate.getHours();
-                const minute = currentDate.getMinutes();
-                const second = currentDate.getSeconds();
-                const end = createDateAtLastMillisecond(new Date(year, month, day, hour, minute, second + step - 1), true);
-                if (end.getTime() > endDate.getTime()) {
-                    end.setTime(endDate.getTime());
-                }
-                const start = currentDate;
-                const formattedDate = format?.({ dateIndex: second, startDate: start, endDate: end });
-                const columnTitle = formattedDate || second.toString();
-                const dayCellConfig = {
-                    days: Math.abs(end.getTime() - currentDate.getTime() + 1) / DayTimes,
-                    startDate: start,
-                    endDate: end,
-                    step,
-                    unit: 'second',
-                    title: columnTitle,
-                    dateIndex: currentDate.getSeconds()
-                };
-                timelineDates.push(dayCellConfig);
-                currentDate = new Date(year, month, day, hour, minute, second + step);
-            }
-        }
-        return timelineDates;
-    }
-    function getTextPos(padding, textAlign, textBaseline, width, height) {
-        let textX = padding[3] ?? 10;
-        if (textAlign === 'right' || textAlign === 'end') {
-            textX = width - 0 - (padding[1] ?? 10);
-        }
-        else if (textAlign === 'center') {
-            textX = 0 + (width - 0 + (padding[3] ?? 10) - (padding[1] ?? 10)) / 2;
-        }
-        let textY = 0 + (padding[0] ?? 10);
-        if (textBaseline === 'bottom' || textBaseline === 'alphabetic' || textBaseline === 'ideographic') {
-            textY = height - 0 - (padding[2] ?? 10);
-        }
-        else if (textBaseline === 'middle') {
-            textY = 0 + (height - 0 - (padding[0] ?? 10) - (padding[2] ?? 10)) / 2 + (padding[0] ?? 10);
-        }
-        return {
-            x: textX,
-            y: textY
-        };
-    }
-    function convertProgress(progress) {
-        if (typeof progress === 'string') {
-            progress = progress.replace('%', '');
-            progress = parseFloat(progress);
-        }
-        return Math.round(progress);
-    }
-    function createSplitLineAndResizeLine(gantt) {
-        if (gantt.taskListTableInstance) {
-            gantt.verticalSplitResizeLine = document.createElement('div');
-            gantt.verticalSplitResizeLine.style.position = 'absolute';
-            gantt.verticalSplitResizeLine.style.top = gantt.tableY + 'px';
-            gantt.verticalSplitResizeLine.style.left =
-                (gantt.taskTableWidth ? gantt.taskTableWidth - 7 + gantt.parsedOptions.verticalSplitLine.lineWidth / 2 : 0) +
-                    'px';
-            gantt.verticalSplitResizeLine.style.width = '14px';
-            gantt.verticalSplitResizeLine.style.height = gantt.drawHeight + 'px';
-            gantt.verticalSplitResizeLine.style.backgroundColor = 'rgba(0,0,0,0)';
-            gantt.verticalSplitResizeLine.style.zIndex = '100';
-            gantt.parsedOptions.verticalSplitLineMoveable && (gantt.verticalSplitResizeLine.style.cursor = 'col-resize');
-            gantt.verticalSplitResizeLine.style.userSelect = 'none';
-            gantt.verticalSplitResizeLine.style.opacity = '1';
-            const verticalSplitLine = document.createElement('div');
-            verticalSplitLine.style.position = 'absolute';
-            verticalSplitLine.style.top = '0px';
-            verticalSplitLine.style.left = `${(14 - gantt.parsedOptions.verticalSplitLine.lineWidth) / 2}px`;
-            verticalSplitLine.style.width = gantt.parsedOptions.verticalSplitLine.lineWidth + 'px';
-            verticalSplitLine.style.height = '100%';
-            verticalSplitLine.style.backgroundColor = gantt.parsedOptions.verticalSplitLine.lineColor;
-            verticalSplitLine.style.zIndex = '100';
-            verticalSplitLine.style.userSelect = 'none';
-            verticalSplitLine.style.pointerEvents = 'none';
-            verticalSplitLine.style.transition = 'background-color 0.3s';
-            gantt.verticalSplitResizeLine.appendChild(verticalSplitLine);
-            if (gantt.parsedOptions.verticalSplitLineHighlight) {
-                const highlightLine = document.createElement('div');
-                highlightLine.style.position = 'absolute';
-                highlightLine.style.top = '0px';
-                highlightLine.style.left = `${(14 - gantt.parsedOptions.verticalSplitLineHighlight.lineWidth ?? 2) / 2}px`;
-                highlightLine.style.width = (gantt.parsedOptions.verticalSplitLineHighlight.lineWidth ?? 2) + 'px';
-                highlightLine.style.height = '100%';
-                highlightLine.style.backgroundColor = gantt.parsedOptions.verticalSplitLineHighlight.lineColor;
-                highlightLine.style.zIndex = '100';
-                highlightLine.style.cursor = 'col-resize';
-                highlightLine.style.userSelect = 'none';
-                highlightLine.style.pointerEvents = 'none';
-                highlightLine.style.opacity = '0';
-                highlightLine.style.transition = 'background-color 0.3s';
-                gantt.verticalSplitResizeLine.appendChild(highlightLine);
-            }
-            gantt.container.appendChild(gantt.verticalSplitResizeLine);
-        }
-    }
-    function updateSplitLineAndResizeLine(gantt) {
-        if (gantt.verticalSplitResizeLine) {
-            gantt.verticalSplitResizeLine.style.position = 'absolute';
-            gantt.verticalSplitResizeLine.style.top = gantt.tableY + 'px';
-            gantt.verticalSplitResizeLine.style.left = gantt.taskTableWidth
-                ? `${gantt.taskTableWidth - 7 + gantt.parsedOptions.verticalSplitLine.lineWidth / 2}px`
-                : '0px';
-            gantt.verticalSplitResizeLine.style.width = '14px';
-            gantt.verticalSplitResizeLine.style.height = gantt.drawHeight + 'px';
-            gantt.verticalSplitResizeLine.style.backgroundColor = 'rgba(0,0,0,0)';
-            gantt.verticalSplitResizeLine.style.zIndex = '100';
-            gantt.parsedOptions.verticalSplitLineMoveable && (gantt.verticalSplitResizeLine.style.cursor = 'col-resize');
-            gantt.verticalSplitResizeLine.style.userSelect = 'none';
-            gantt.verticalSplitResizeLine.style.opacity = '1';
-            const verticalSplitLine = gantt.verticalSplitResizeLine.childNodes[0];
-            verticalSplitLine.style.position = 'absolute';
-            verticalSplitLine.style.top = '0px';
-            verticalSplitLine.style.left = `${(14 - gantt.parsedOptions.verticalSplitLine.lineWidth) / 2}px`;
-            verticalSplitLine.style.width = gantt.parsedOptions.verticalSplitLine.lineWidth + 'px';
-            verticalSplitLine.style.height = '100%';
-            verticalSplitLine.style.backgroundColor = gantt.parsedOptions.verticalSplitLine.lineColor;
-            verticalSplitLine.style.zIndex = '100';
-            verticalSplitLine.style.userSelect = 'none';
-            verticalSplitLine.style.pointerEvents = 'none';
-            verticalSplitLine.style.transition = 'background-color 0.3s';
-            if (gantt.verticalSplitResizeLine.childNodes[1]) {
-                const highlightLine = gantt.verticalSplitResizeLine.childNodes[1];
-                highlightLine.style.position = 'absolute';
-                highlightLine.style.top = '0px';
-                highlightLine.style.left = `${(14 - gantt.parsedOptions.verticalSplitLineHighlight.lineWidth ?? 2) / 2}px`;
-                highlightLine.style.width = (gantt.parsedOptions.verticalSplitLineHighlight.lineWidth ?? 2) + 'px';
-                highlightLine.style.height = '100%';
-                highlightLine.style.backgroundColor = gantt.parsedOptions.verticalSplitLineHighlight.lineColor;
-                highlightLine.style.zIndex = '100';
-                highlightLine.style.cursor = 'col-resize';
-                highlightLine.style.userSelect = 'none';
-                highlightLine.style.pointerEvents = 'none';
-                highlightLine.style.opacity = '0';
-                highlightLine.style.transition = 'background-color 0.3s';
-            }
-        }
-    }
-    function findRecordByTaskKey(records, taskKeyField, taskKey, childrenField = 'children') {
-        for (let i = 0; i < records.length; i++) {
-            if ((Array.isArray(taskKey) && taskKey.length === 1 && records[i][taskKeyField] === taskKey[0]) ||
-                records[i][taskKeyField] === taskKey) {
-                return { record: records[i], index: [i] };
-            }
-            else if (records[i][childrenField]?.length) {
-                if (Array.isArray(taskKey) && taskKey[0] === records[i][taskKeyField]) {
-                    const result = findRecordByTaskKey(records[i][childrenField], taskKeyField, taskKey.slice(1));
-                    if (result) {
-                        result.index.unshift(i);
-                        return result;
-                    }
-                }
-                else if (!Array.isArray(taskKey)) {
-                    const result = findRecordByTaskKey(records[i][childrenField], taskKeyField, taskKey);
-                    if (result) {
-                        result.index.unshift(i);
-                        return result;
-                    }
-                }
-            }
-        }
-    }
-    function clearRecordLinkInfos(records, childrenField = 'children') {
-        for (let i = 0; i < records.length; i++) {
-            if (records[i][childrenField]?.length) {
-                clearRecordLinkInfos(records[i][childrenField], childrenField);
-            }
-            else {
-                delete records[i].vtable_gantt_linkedTo;
-                delete records[i].vtable_gantt_linkedFrom;
-            }
-        }
-    }
-    function clearRecordShowIndex(records, childrenField = 'children') {
-        for (let i = 0; i < records.length; i++) {
-            if (records[i][childrenField]?.length) {
-                clearRecordShowIndex(records[i][childrenField], childrenField);
-            }
-            else {
-                delete records[i].vtable_gantt_showIndex;
-            }
-        }
-    }
-    function getTaskIndexsByTaskY(y, gantt) {
-        let task_index;
-        let sub_task_index;
-        if (gantt.taskListTableInstance) {
-            const rowInfo = gantt.taskListTableInstance.getTargetRowAt(y + gantt.headerHeight);
-            if (rowInfo) {
-                const { row } = rowInfo;
-                task_index = row - gantt.taskListTableInstance.columnHeaderLevelCount;
-                const beforeRowsHeight = gantt.getRowsHeightByIndex(0, task_index - 1);
-                if (gantt.parsedOptions.tasksShowMode === TasksShowMode.Sub_Tasks_Inline ||
-                    gantt.parsedOptions.tasksShowMode === TasksShowMode.Sub_Tasks_Arrange ||
-                    gantt.parsedOptions.tasksShowMode === TasksShowMode.Sub_Tasks_Compact ||
-                    gantt.parsedOptions.tasksShowMode === TasksShowMode.Sub_Tasks_Separate) {
-                    sub_task_index = Math.floor((y - beforeRowsHeight) / gantt.parsedOptions.rowHeight);
-                }
-            }
-        }
-        else {
-            task_index = Math.floor(y / gantt.parsedOptions.rowHeight);
-        }
-        return { task_index, sub_task_index };
-    }
-    function computeRowsCountByRecordDateForCompact(gantt, record) {
-        if (!record.children || record.children.length === 1) {
-            if (record.children?.length === 1) {
-                record.children[0].vtable_gantt_showIndex = 0;
-            }
-            else {
-                record.vtable_gantt_showIndex = 0;
-            }
-            return 1;
-        }
-        const sortedChildren = record.children.slice().sort((a, b) => {
-            const { startDate: aStartDate } = formatRecordDateConsiderHasHour(gantt, a);
-            const { startDate: bStartDate } = formatRecordDateConsiderHasHour(gantt, b);
-            return aStartDate.getTime() - bStartDate.getTime();
-        });
-        const rows = [];
-        for (let i = 0; i <= sortedChildren.length - 1; i++) {
-            const newRecord = sortedChildren[i];
-            const { startDate, endDate } = formatRecordDateConsiderHasHour(gantt, newRecord);
-            let placed = false;
-            for (let j = 0; j < rows.length; j++) {
-                if (startDate.getTime() > rows[j]) {
-                    rows[j] = endDate.getTime();
-                    placed = true;
-                    newRecord.vtable_gantt_showIndex = j;
-                    break;
-                }
-            }
-            if (!placed) {
-                rows.push(endDate.getTime());
-                newRecord.vtable_gantt_showIndex = rows.length - 1;
-            }
-        }
-        return rows.length;
-    }
-    function isOverlapping(startDate, endDate, rowTasks, gantt) {
-        return rowTasks.some(rowTask => {
-            const { startDate: startDate2, endDate: endDate2 } = formatRecordDateConsiderHasHour(gantt, rowTask);
-            return startDate <= endDate2 && startDate2 <= endDate;
-        });
-    }
-    function computeRowsCountByRecordDate(gantt, record) {
-        if (!record.children || record.children.length === 1) {
-            if (record.children?.length === 1) {
-                record.children[0].vtable_gantt_showIndex = 0;
-            }
-            else {
-                record.vtable_gantt_showIndex = 0;
-            }
-            return 1;
-        }
-        const rows = [];
-        for (let i = 0; i <= record.children.length - 1; i++) {
-            const newRecord = record.children[i];
-            const { startDate, endDate } = formatRecordDateConsiderHasHour(gantt, newRecord);
-            let placed = false;
-            for (let j = 0; j < rows.length; j++) {
-                const rowTasks = record.children.filter((t) => t !== newRecord && t.vtable_gantt_showIndex === j);
-                if (!isOverlapping(startDate, endDate, rowTasks, gantt)) {
-                    rows[j] = endDate.getTime();
-                    placed = true;
-                    newRecord.vtable_gantt_showIndex = j;
-                    break;
-                }
-            }
-            if (!placed) {
-                rows.push(endDate.getTime());
-                newRecord.vtable_gantt_showIndex = rows.length - 1;
-            }
-        }
-        return rows.length;
-    }
-    function formatRecordDateConsiderHasHour(gantt, record) {
-        const { timeScaleIncludeHour, startDateField, endDateField } = gantt.parsedOptions;
-        const startDate = record[startDateField];
-        const endDate = record[endDateField];
-        if (timeScaleIncludeHour) {
-            return { startDate: createDateAtMidnight(startDate), endDate: createDateAtLastHour(endDate) };
-        }
-        return { startDate: createDateAtMidnight(startDate, true), endDate: createDateAtLastHour(endDate, true) };
-    }
-    function updateOptionsWhenRecordChanged(gantt) {
-        const options = gantt.options;
-        const { unit: minTimeUnit, startOfWeek } = gantt.parsedOptions.reverseSortedTimelineScales[0];
-        gantt.parsedOptions.markLine = generateMarkLine(options?.markLine);
-        if (gantt.parsedOptions.markLine?.length ?? 0) {
-            if (gantt.parsedOptions.markLine?.every(item => item.scrollToMarkLine === undefined)) {
-                gantt.parsedOptions.markLine[0].scrollToMarkLine = true;
-            }
-            if (gantt.parsedOptions.markLine?.find(item => item.scrollToMarkLine)) {
-                gantt.parsedOptions.scrollToMarkLineDate = getStartDateByTimeUnit(new Date(gantt.parsedOptions.markLine?.find(item => item.scrollToMarkLine).date), minTimeUnit, startOfWeek);
-            }
-        }
-        gantt.parsedOptions.dependencyLinks = options.dependency?.links;
-    }
-    function updateOptionsWhenDateRangeChanged(gantt) {
-        const options = gantt.options;
-        const { unit: minTimeUnit, startOfWeek, step } = gantt.parsedOptions.reverseSortedTimelineScales[0];
-        gantt.parsedOptions.minDate = options?.minDate
-            ? getStartDateByTimeUnit(new Date(options.minDate), minTimeUnit, startOfWeek)
-            : undefined;
-        gantt.parsedOptions.maxDate = options?.maxDate
-            ? getEndDateByTimeUnit(gantt.parsedOptions.minDate, new Date(options.maxDate), minTimeUnit, step)
-            : undefined;
-        gantt.parsedOptions._minDateTime = gantt.parsedOptions.minDate?.getTime();
-        gantt.parsedOptions._maxDateTime = gantt.parsedOptions.maxDate?.getTime();
-    }
-    function updateOptionsWhenMarkLineChanged(gantt) {
-        const options = gantt.options;
-        gantt.parsedOptions.markLine = generateMarkLine(options?.markLine);
-    }
-    function _getTaskInfoByXYForCreateSchedule(eventX, eventY, gantt) {
-        const taskIndex = getTaskIndexsByTaskY(eventY - gantt.headerHeight + gantt.stateManager.scrollTop, gantt);
-        const recordParent = gantt.getRecordByIndex(taskIndex.task_index);
-        const dateIndex = getDateIndexByX(eventX, gantt);
-        const dateRange = gantt.getDateRangeByIndex(dateIndex);
-        if (recordParent?.children) {
-            const taskIndex = getTaskIndexsByTaskY(eventY - gantt.headerHeight + gantt.stateManager.scrollTop, gantt);
-            for (let i = 0; i < recordParent.children.length; i++) {
-                const { startDate, endDate, taskDays, progress, taskRecord } = gantt.getTaskInfoByTaskListIndex(taskIndex.task_index, i);
-                if (((gantt.parsedOptions.tasksShowMode === TasksShowMode.Sub_Tasks_Compact ||
-                    gantt.parsedOptions.tasksShowMode === TasksShowMode.Sub_Tasks_Arrange) &&
-                    taskRecord.vtable_gantt_showIndex === taskIndex.sub_task_index) ||
-                    gantt.parsedOptions.tasksShowMode === TasksShowMode.Sub_Tasks_Inline) {
-                    if (dateRange.startDate.getTime() >= startDate.getTime() && dateRange.endDate.getTime() <= endDate.getTime()) {
-                        return { startDate, endDate, taskDays, progress, taskRecord };
-                    }
-                }
-            }
-        }
-    }
-    function getNodeClickPos(marklineIconNode, gantt) {
-        const left = marklineIconNode.globalTransMatrix.e +
-            gantt.taskListTableInstance.tableNoFrameWidth +
-            gantt.taskListTableInstance.tableX +
-            gantt.tableX;
-        const top = marklineIconNode.globalTransMatrix.f;
-        const width = marklineIconNode.attribute.width;
-        const height = marklineIconNode.attribute.height;
-        return {
-            left,
-            top,
-            width,
-            height
-        };
-    }
-    function judgeIfHasMarkLine(data, markLine) {
-        const beginTime = data.startDate.getTime();
-        const endTime = data.endDate.getTime();
-        return markLine.some(item => {
-            const marklineTime = new Date(item.date).getTime();
-            return marklineTime >= beginTime && marklineTime <= endTime;
-        });
-    }
-
     function throttle$1(func, delay) {
         let timer = null;
         return function (...args) {
@@ -27825,11 +27020,9 @@
             case 'quarter':
                 difference =
                     (adjusted_date.getFullYear() - startDate.getFullYear()) * 4 +
-                        Math.floor(adjusted_date.getMonth() / 3) -
-                        Math.floor(startDate.getMonth() / 3);
+                        (adjusted_date.getMonth() - startDate.getMonth()) / 3;
                 difference +=
-                    (adjusted_date.getTime() - startDate.getTime()) /
-                        DayTimes /
+                    (adjusted_date.getDate() - startDate.getDate()) /
                         (3 * new Date(adjusted_date.getFullYear(), adjusted_date.getMonth() + 1, 0).getDate());
                 break;
             case 'year':
@@ -27999,592 +27192,1397 @@
                     }
                 }
                 else {
-                    const horizontalLine_style = gridStyle.horizontalLine;
-                    let y = 0;
-                    if (horizontalLine_style.lineWidth & 1) {
-                        y += 0.5;
-                    }
-                    for (let i = 0; i < this.rowCount - 1; i++) {
-                        y = y + this._scene._gantt.getRowHeightByIndex(i);
-                        const line = createLine({
-                            pickable: false,
-                            stroke: horizontalLine_style.lineColor,
-                            lineWidth: horizontalLine_style.lineWidth,
-                            points: [
-                                { x: 0, y },
-                                { x: this.allGridWidth, y }
-                            ]
-                        });
-                        this.horizontalLineGroup.appendChild(line);
-                    }
+                    const horizontalLine_style = gridStyle.horizontalLine;
+                    let y = 0;
+                    if (horizontalLine_style.lineWidth & 1) {
+                        y += 0.5;
+                    }
+                    for (let i = 0; i < this.rowCount - 1; i++) {
+                        y = y + this._scene._gantt.getRowHeightByIndex(i);
+                        const line = createLine({
+                            pickable: false,
+                            stroke: horizontalLine_style.lineColor,
+                            lineWidth: horizontalLine_style.lineWidth,
+                            points: [
+                                { x: 0, y },
+                                { x: this.allGridWidth, y }
+                            ]
+                        });
+                        this.horizontalLineGroup.appendChild(line);
+                    }
+                }
+            }
+        }
+        createVerticalBackgroundRects() {
+            const verticalBackgroundColor = this._scene._gantt.parsedOptions.grid.verticalBackgroundColor;
+            const weekendBackgroundColor = this._scene._gantt.parsedOptions.grid.weekendBackgroundColor;
+            if (verticalBackgroundColor || weekendBackgroundColor) {
+                this.verticalBackgroundRectsGroup = new Group$2({
+                    x: 0,
+                    y: 0,
+                    width: this.allGridWidth,
+                    height: this.allGridHeight
+                });
+                this.verticalBackgroundRectsGroup.name = 'grid-vertical-background';
+                this.group.appendChild(this.verticalBackgroundRectsGroup);
+                const { timelineDates, unit, step } = this._scene._gantt.parsedOptions.reverseSortedTimelineScales[0];
+                const timelineColWidth = this._scene._gantt.parsedOptions.timelineColWidth;
+                if (verticalBackgroundColor || weekendBackgroundColor) {
+                    for (let i = 0; i <= timelineDates?.length - 1; i++) {
+                        let backgroundColor;
+                        if (weekendBackgroundColor &&
+                            unit === 'day' &&
+                            step === 1 &&
+                            (timelineDates[i].startDate.getDay() === 0 || timelineDates[i].startDate.getDay() === 6)) {
+                            backgroundColor = weekendBackgroundColor;
+                        }
+                        else if (typeof verticalBackgroundColor === 'function') {
+                            backgroundColor = verticalBackgroundColor({
+                                index: i,
+                                dateIndex: timelineDates[i].dateIndex,
+                                date: timelineDates[i].endDate,
+                                ganttInstance: this._scene._gantt
+                            });
+                        }
+                        else if (verticalBackgroundColor) {
+                            backgroundColor = verticalBackgroundColor[i % verticalBackgroundColor.length];
+                        }
+                        if (backgroundColor) {
+                            const x = Math.ceil(timelineColWidth * i);
+                            const rect = createRect({
+                                pickable: false,
+                                fill: backgroundColor,
+                                x,
+                                y: 0,
+                                width: timelineColWidth,
+                                height: this.allGridHeight
+                            });
+                            this.verticalBackgroundRectsGroup.appendChild(rect);
+                        }
+                    }
+                }
+            }
+        }
+        createHorizontalBackgroundRects() {
+            const horizontalBackgroundColor = this._scene._gantt.parsedOptions.grid.horizontalBackgroundColor;
+            if (horizontalBackgroundColor) {
+                this.horizontalBackgroundRectsGroup = new Group$2({
+                    x: 0,
+                    y: 0,
+                    width: this.allGridWidth,
+                    height: this.allGridHeight
+                });
+                this.horizontalBackgroundRectsGroup.name = 'grid-horizontal-background';
+                this.group.appendChild(this.horizontalBackgroundRectsGroup);
+                let y = 0;
+                for (let i = 0; i <= this.rowCount - 1; i++) {
+                    let backgroundColor;
+                    if (typeof horizontalBackgroundColor === 'function') {
+                        backgroundColor = horizontalBackgroundColor({
+                            index: i,
+                            ganttInstance: this._scene._gantt
+                        });
+                    }
+                    else {
+                        backgroundColor = horizontalBackgroundColor[i % horizontalBackgroundColor.length];
+                    }
+                    const rect = createRect({
+                        pickable: false,
+                        fill: backgroundColor,
+                        x: 0,
+                        y,
+                        width: this.allGridWidth,
+                        height: this._scene._gantt.getRowHeightByIndex(i)
+                    });
+                    this.horizontalBackgroundRectsGroup.appendChild(rect);
+                    y += this._scene._gantt.getRowHeightByIndex(i);
+                }
+            }
+        }
+        refresh() {
+            this.width = this._scene.ganttGroup.attribute.width;
+            this.height = this._scene.ganttGroup.attribute.height - this._scene.timelineHeader.group.attribute.height;
+            this.group.setAttributes({
+                width: this.width,
+                height: this.height,
+                y: this._scene._gantt.getAllHeaderRowsHeight()
+            });
+            this.rowCount = this._scene._gantt.itemCount;
+            this.allGridWidth = this._scene._gantt.getAllDateColsWidth();
+            this.allGridHeight = this._scene._gantt.getAllTaskBarsHeight();
+            this.group.removeAllChild();
+            this.createVerticalBackgroundRects();
+            this.createHorizontalBackgroundRects();
+            this.createVerticalLines();
+            this.createHorizontalLines();
+            this.createTimeLineHeaderBottomLine();
+        }
+        setX(x) {
+            this.verticalLineGroup?.setAttribute('x', x);
+            this.horizontalLineGroup?.setAttribute('x', x);
+            this.verticalBackgroundRectsGroup?.setAttribute('x', x);
+            this.horizontalBackgroundRectsGroup?.setAttribute('x', x);
+        }
+        setY(y) {
+            this.verticalLineGroup?.setAttribute('y', y);
+            this.horizontalLineGroup?.setAttribute('y', y);
+            this.verticalBackgroundRectsGroup?.setAttribute('y', y);
+            this.horizontalBackgroundRectsGroup?.setAttribute('y', y);
+        }
+        resize() {
+            this.width = this._scene.ganttGroup.attribute.width;
+            this.height = this._scene.ganttGroup.attribute.height - this._scene.timelineHeader.group.attribute.height;
+            this.group.setAttribute('width', this.width);
+            this.group.setAttribute('height', this.height);
+        }
+    }
+
+    let Env$1 = class Env {
+        static _mode;
+        static get mode() {
+            if (!Env._mode) {
+                Env._mode = defaultMode$1();
+            }
+            return Env._mode;
+        }
+        static set mode(mode) {
+            Env._mode = mode;
+        }
+        static dpr = 0;
+        static CreateCanvas;
+        static LoadImage;
+        static RequestAnimationFrame;
+        static CancelAnimationFrame;
+        static RegisterCreateCanvas(func) {
+            Env.CreateCanvas = func;
+        }
+        static RegisterLoadImage(func) {
+            Env.LoadImage = func;
+        }
+        static GetCreateCanvasFunc() {
+            if (Env.CreateCanvas) {
+                return Env.CreateCanvas;
+            }
+            if (Env.mode === 'worker') {
+                return (width = 200, height = 200) => new OffscreenCanvas(width, height);
+            }
+            return undefined;
+        }
+        static RegisterRequestAnimationFrame(func) {
+            Env.RequestAnimationFrame = func();
+        }
+        static GetRequestAnimationFrame() {
+            if (Env.RequestAnimationFrame) {
+                return Env.RequestAnimationFrame;
+            }
+            return undefined;
+        }
+        static RegisterCancelAnimationFrame(func) {
+            Env.CancelAnimationFrame = func();
+        }
+        static GetCancelAnimationFrame() {
+            if (Env.CancelAnimationFrame) {
+                return Env.CancelAnimationFrame;
+            }
+            return undefined;
+        }
+    };
+    function defaultMode$1() {
+        let mode = 'browser';
+        try {
+            if (window.type === 'node') {
+                mode = 'node';
+            }
+            else if (typeof window !== 'undefined' && !window.performance) {
+                mode = 'miniApp';
+            }
+            else if (typeof window === 'undefined') {
+                mode = 'node';
+            }
+        }
+        catch (err) {
+            mode = 'node';
+        }
+        return mode;
+    }
+
+    class ScrollBarComponent {
+        hScrollBar;
+        vScrollBar;
+        _gantt;
+        _clearHorizontalScrollBar;
+        _clearVerticalScrollBar;
+        constructor(gantt) {
+            this._gantt = gantt;
+            this.createScrollBar(gantt.tableNoFrameWidth, gantt.tableNoFrameHeight - gantt.getAllHeaderRowsHeight());
+        }
+        createScrollBar(tableWidth, tableHeight) {
+            const scrollRailColor = this._gantt.parsedOptions.scrollStyle.scrollRailColor;
+            const scrollSliderColor = this._gantt.parsedOptions.scrollStyle.scrollSliderColor;
+            const scrollSliderCornerRadius = this._gantt.parsedOptions.scrollStyle.scrollSliderCornerRadius;
+            const width = this._gantt.parsedOptions.scrollStyle.width;
+            let sliderStyle;
+            if (isValid$3(scrollSliderCornerRadius)) {
+                sliderStyle = {
+                    cornerRadius: scrollSliderCornerRadius,
+                    fill: scrollSliderColor
+                };
+            }
+            else {
+                sliderStyle = {
+                    fill: scrollSliderColor
+                };
+            }
+            this._gantt.parsedOptions.scrollStyle?.visible;
+            this._gantt.parsedOptions.scrollStyle?.hoverOn;
+            this.hScrollBar = new ScrollBar({
+                direction: 'horizontal',
+                x: -tableWidth * 2,
+                y: -tableHeight * 2,
+                width: tableWidth,
+                height: width,
+                padding: 0,
+                railStyle: {
+                    fill: scrollRailColor
+                },
+                sliderStyle,
+                range: [0, 0.1],
+                visible: false
+            });
+            this.hScrollBar.render();
+            this.hScrollBar.hideAll();
+            this.vScrollBar = new ScrollBar({
+                direction: 'vertical',
+                x: -tableWidth * 2,
+                y: -tableHeight * 2,
+                width,
+                height: tableHeight,
+                padding: 0,
+                railStyle: {
+                    fill: scrollRailColor
+                },
+                sliderStyle,
+                range: [0, 0.1],
+                visible: false
+            });
+            this.vScrollBar.render();
+            this.vScrollBar.hideAll();
+        }
+        refresh() {
+        }
+        hideVerticalScrollBar() {
+            const visable = this._gantt.parsedOptions.scrollStyle.visible;
+            if (visable !== 'focus' && visable !== 'scrolling') {
+                return;
+            }
+            this.vScrollBar.setAttribute('visible', false);
+            this.vScrollBar.hideAll();
+            this._gantt.scenegraph.updateNextFrame();
+        }
+        showVerticalScrollBar(autoHide) {
+            const visable = this._gantt.parsedOptions.scrollStyle.visible;
+            if (visable !== 'focus' && visable !== 'scrolling') {
+                return;
+            }
+            this.vScrollBar.setAttribute('visible', true);
+            this.vScrollBar.showAll();
+            this._gantt.scenegraph.updateNextFrame();
+            if (autoHide) {
+                clearTimeout(this._clearVerticalScrollBar);
+                this._clearVerticalScrollBar = setTimeout(() => {
+                    this.hideVerticalScrollBar();
+                }, 1000);
+            }
+        }
+        hideHorizontalScrollBar() {
+            const visable = this._gantt.parsedOptions.scrollStyle.visible;
+            if (visable !== 'focus' && visable !== 'scrolling') {
+                return;
+            }
+            this.hScrollBar.setAttribute('visible', false);
+            this.hScrollBar.hideAll();
+            this._gantt.scenegraph.updateNextFrame();
+        }
+        showHorizontalScrollBar(autoHide) {
+            const visable = this._gantt.parsedOptions.scrollStyle.visible;
+            if (visable !== 'focus' && visable !== 'scrolling') {
+                return;
+            }
+            this.hScrollBar.setAttribute('visible', true);
+            this.hScrollBar.showAll();
+            this._gantt.scenegraph.updateNextFrame();
+            if (autoHide) {
+                clearTimeout(this._clearHorizontalScrollBar);
+                this._clearHorizontalScrollBar = setTimeout(() => {
+                    this.hideHorizontalScrollBar();
+                }, 1000);
+            }
+        }
+        updateVerticalScrollBarPos(topRatio) {
+            const range = this.vScrollBar.attribute.range;
+            const size = range[1] - range[0];
+            const range0 = topRatio * (1 - size);
+            this.vScrollBar.setAttribute('range', [range0, range0 + size]);
+            const bounds = this.vScrollBar.AABBBounds && this.vScrollBar.globalAABBBounds;
+            this.vScrollBar._viewPosition = {
+                x: bounds.x1,
+                y: bounds.y1
+            };
+        }
+        updateHorizontalScrollBarPos(leftRatio) {
+            const range = this.hScrollBar.attribute.range;
+            const size = range[1] - range[0];
+            const range0 = leftRatio * (1 - size);
+            this.hScrollBar.setAttribute('range', [range0, range0 + size]);
+            const bounds = this.hScrollBar.AABBBounds && this.hScrollBar.globalAABBBounds;
+            this.hScrollBar._viewPosition = {
+                x: bounds.x1,
+                y: bounds.y1
+            };
+        }
+        updateScrollBar() {
+            const oldHorizontalBarPos = this._gantt.stateManager.scroll.horizontalBarPos;
+            const oldVerticalBarPos = this._gantt.stateManager.scroll.verticalBarPos;
+            const scrollStyle = this._gantt.parsedOptions.scrollStyle;
+            const width = scrollStyle?.width;
+            const visible = scrollStyle?.visible;
+            const tableWidth = Math.ceil(this._gantt.scenegraph.ganttGroup.attribute.width);
+            const tableHeight = Math.ceil(this._gantt.scenegraph.ganttGroup.attribute.height);
+            const totalHeight = this._gantt.getAllRowsHeight();
+            const totalWidth = this._gantt.getAllDateColsWidth();
+            const frozenRowsHeight = this._gantt.getAllHeaderRowsHeight();
+            if (totalWidth > tableWidth) {
+                const y = Math.min(tableHeight, totalHeight);
+                const rangeEnd = Math.max(0.05, tableWidth / totalWidth);
+                const hoverOn = scrollStyle.hoverOn;
+                let attrY = 0;
+                if (scrollStyle.barToSide) {
+                    attrY =
+                        this._gantt.tableNoFrameHeight -
+                            (hoverOn ? width : -this._gantt.scenegraph.ganttGroup.attribute.y) +
+                            this._gantt.tableY;
+                }
+                else {
+                    attrY = y - (hoverOn ? width : -this._gantt.scenegraph.ganttGroup.attribute.y) + this._gantt.tableY;
+                }
+                this.hScrollBar.setAttributes({
+                    x: this._gantt.scenegraph.ganttGroup.attribute.x,
+                    y: attrY,
+                    width: tableWidth,
+                    range: [0, rangeEnd],
+                    visible: visible === 'always'
+                });
+                const bounds = this.hScrollBar.AABBBounds && this.hScrollBar.globalAABBBounds;
+                this.hScrollBar._viewPosition = {
+                    x: bounds.x1,
+                    y: bounds.y1
+                };
+                if (visible === 'always') {
+                    this.hScrollBar.showAll();
+                }
+            }
+            else {
+                this.hScrollBar.setAttributes({
+                    x: -this._gantt.tableNoFrameWidth * 2,
+                    y: -this._gantt.tableNoFrameHeight * 2,
+                    width: 0,
+                    visible: false
+                });
+            }
+            if (totalHeight > tableHeight) {
+                const x = Math.min(tableWidth, totalWidth) + this._gantt.scenegraph.ganttGroup.attribute.x;
+                const rangeEnd = Math.max(0.05, (tableHeight - frozenRowsHeight) / (totalHeight - frozenRowsHeight));
+                let attrX = 0;
+                const hoverOn = this._gantt.parsedOptions.scrollStyle.hoverOn;
+                if (this._gantt.parsedOptions.scrollStyle.barToSide) {
+                    attrX = this._gantt.tableNoFrameWidth - (hoverOn ? width : -this._gantt.scenegraph.ganttGroup.attribute.x);
+                }
+                else {
+                    attrX = x - (hoverOn ? width : -this._gantt.scenegraph.ganttGroup.attribute.x);
                 }
-            }
-        }
-        createVerticalBackgroundRects() {
-            const verticalBackgroundColor = this._scene._gantt.parsedOptions.grid.verticalBackgroundColor;
-            const weekendBackgroundColor = this._scene._gantt.parsedOptions.grid.weekendBackgroundColor;
-            if (verticalBackgroundColor || weekendBackgroundColor) {
-                this.verticalBackgroundRectsGroup = new Group$2({
-                    x: 0,
-                    y: 0,
-                    width: this.allGridWidth,
-                    height: this.allGridHeight
+                this.vScrollBar.setAttributes({
+                    x: attrX,
+                    y: frozenRowsHeight + (!hoverOn ? this._gantt.scenegraph.ganttGroup.attribute.y : 0) + this._gantt.tableY,
+                    height: tableHeight - frozenRowsHeight,
+                    range: [0, rangeEnd],
+                    visible: visible === 'always'
                 });
-                this.verticalBackgroundRectsGroup.name = 'grid-vertical-background';
-                this.group.appendChild(this.verticalBackgroundRectsGroup);
-                const { timelineDates, unit, step } = this._scene._gantt.parsedOptions.reverseSortedTimelineScales[0];
-                const timelineColWidth = this._scene._gantt.parsedOptions.timelineColWidth;
-                if (verticalBackgroundColor || weekendBackgroundColor) {
-                    for (let i = 0; i <= timelineDates?.length - 1; i++) {
-                        let backgroundColor;
-                        if (weekendBackgroundColor &&
-                            unit === 'day' &&
-                            step === 1 &&
-                            (timelineDates[i].startDate.getDay() === 0 || timelineDates[i].startDate.getDay() === 6)) {
-                            backgroundColor = weekendBackgroundColor;
-                        }
-                        else if (typeof verticalBackgroundColor === 'function') {
-                            backgroundColor = verticalBackgroundColor({
-                                index: i,
-                                dateIndex: timelineDates[i].dateIndex,
-                                date: timelineDates[i].endDate,
-                                ganttInstance: this._scene._gantt
-                            });
-                        }
-                        else if (verticalBackgroundColor) {
-                            backgroundColor = verticalBackgroundColor[i % verticalBackgroundColor.length];
-                        }
-                        if (backgroundColor) {
-                            const x = Math.ceil(timelineColWidth * i);
-                            const rect = createRect({
-                                pickable: false,
-                                fill: backgroundColor,
-                                x,
-                                y: 0,
-                                width: timelineColWidth,
-                                height: this.allGridHeight
-                            });
-                            this.verticalBackgroundRectsGroup.appendChild(rect);
-                        }
-                    }
+                const bounds = this.vScrollBar.AABBBounds && this.vScrollBar.globalAABBBounds;
+                this.vScrollBar._viewPosition = {
+                    x: bounds.x1,
+                    y: bounds.y1
+                };
+                if (visible === 'always') {
+                    this.vScrollBar.showAll();
                 }
             }
-        }
-        createHorizontalBackgroundRects() {
-            const horizontalBackgroundColor = this._scene._gantt.parsedOptions.grid.horizontalBackgroundColor;
-            if (horizontalBackgroundColor) {
-                this.horizontalBackgroundRectsGroup = new Group$2({
-                    x: 0,
-                    y: 0,
-                    width: this.allGridWidth,
-                    height: this.allGridHeight
+            else {
+                this.vScrollBar.setAttributes({
+                    x: -this._gantt.tableNoFrameWidth * 2,
+                    y: -this._gantt.tableNoFrameHeight * 2,
+                    height: 0,
+                    visible: false
                 });
-                this.horizontalBackgroundRectsGroup.name = 'grid-horizontal-background';
-                this.group.appendChild(this.horizontalBackgroundRectsGroup);
-                let y = 0;
-                for (let i = 0; i <= this.rowCount - 1; i++) {
-                    let backgroundColor;
-                    if (typeof horizontalBackgroundColor === 'function') {
-                        backgroundColor = horizontalBackgroundColor({
-                            index: i,
-                            ganttInstance: this._scene._gantt
-                        });
-                    }
-                    else {
-                        backgroundColor = horizontalBackgroundColor[i % horizontalBackgroundColor.length];
-                    }
-                    const rect = createRect({
-                        pickable: false,
-                        fill: backgroundColor,
-                        x: 0,
-                        y,
-                        width: this.allGridWidth,
-                        height: this._scene._gantt.getRowHeightByIndex(i)
-                    });
-                    this.horizontalBackgroundRectsGroup.appendChild(rect);
-                    y += this._scene._gantt.getRowHeightByIndex(i);
-                }
             }
+            this._gantt.stateManager.setScrollLeft(oldHorizontalBarPos);
+            this._gantt.stateManager.setScrollTop(oldVerticalBarPos);
         }
-        refresh() {
-            this.width = this._scene.ganttGroup.attribute.width;
-            this.height = this._scene.ganttGroup.attribute.height - this._scene.timelineHeader.group.attribute.height;
-            this.group.setAttributes({
-                width: this.width,
-                height: this.height,
-                y: this._scene._gantt.getAllHeaderRowsHeight()
-            });
-            this.rowCount = this._scene._gantt.itemCount;
-            this.allGridWidth = this._scene._gantt.getAllDateColsWidth();
-            this.allGridHeight = this._scene._gantt.getAllTaskBarsHeight();
-            this.group.removeAllChild();
-            this.createVerticalBackgroundRects();
-            this.createHorizontalBackgroundRects();
-            this.createVerticalLines();
-            this.createHorizontalLines();
-            this.createTimeLineHeaderBottomLine();
+    }
+
+    function handleWhell$1(event, state, gantt, isWheelEvent = true) {
+        let { deltaX, deltaY } = event;
+        if (event.shiftKey && event.deltaY) {
+            deltaX = deltaY;
+            deltaY = 0;
         }
-        setX(x) {
-            this.verticalLineGroup?.setAttribute('x', x);
-            this.horizontalLineGroup?.setAttribute('x', x);
-            this.verticalBackgroundRectsGroup?.setAttribute('x', x);
-            this.horizontalBackgroundRectsGroup?.setAttribute('x', x);
+        const [optimizedDeltaX, optimizedDeltaY] = optimizeScrollXY$1(deltaX, deltaY, { horizontal: 1, vertical: 1 });
+        if (optimizedDeltaX) {
+            state.setScrollLeft(state.scroll.horizontalBarPos + optimizedDeltaX);
+            gantt.scenegraph.scrollbarComponent.showHorizontalScrollBar(true);
         }
-        setY(y) {
-            this.verticalLineGroup?.setAttribute('y', y);
-            this.horizontalLineGroup?.setAttribute('y', y);
-            this.verticalBackgroundRectsGroup?.setAttribute('y', y);
-            this.horizontalBackgroundRectsGroup?.setAttribute('y', y);
+        if (optimizedDeltaY) {
+            state.setScrollTop(state.scroll.verticalBarPos + optimizedDeltaY);
+            gantt.scenegraph.scrollbarComponent.showVerticalScrollBar(true);
         }
-        resize() {
-            this.width = this._scene.ganttGroup.attribute.width;
-            this.height = this._scene.ganttGroup.attribute.height - this._scene.timelineHeader.group.attribute.height;
-            this.group.setAttribute('width', this.width);
-            this.group.setAttribute('height', this.height);
+        isWheelEvent && state.resetInteractionState();
+        if (event.cancelable &&
+            (state._gantt.parsedOptions.overscrollBehavior === 'none' ||
+                (Math.abs(deltaY) >= Math.abs(deltaX) && deltaY !== 0 && isVerticalScrollable$1(deltaY, state)) ||
+                (Math.abs(deltaY) <= Math.abs(deltaX) && deltaX !== 0 && isHorizontalScrollable$1(deltaX, state)))) {
+            event.preventDefault();
         }
     }
-
-    let Env$1 = class Env {
-        static _mode;
-        static get mode() {
-            if (!Env._mode) {
-                Env._mode = defaultMode$1();
-            }
-            return Env._mode;
-        }
-        static set mode(mode) {
-            Env._mode = mode;
-        }
-        static dpr = 0;
-        static CreateCanvas;
-        static LoadImage;
-        static RequestAnimationFrame;
-        static CancelAnimationFrame;
-        static RegisterCreateCanvas(func) {
-            Env.CreateCanvas = func;
+    function optimizeScrollXY$1(x, y, ratio) {
+        const ANGLE = 2;
+        const angle = Math.abs(x / y);
+        const deltaX = angle <= 1 / ANGLE ? 0 : x;
+        const deltaY = angle > ANGLE ? 0 : y;
+        return [Math.ceil(deltaX * (ratio.horizontal ?? 0)), Math.ceil(deltaY * (ratio.vertical ?? 0))];
+    }
+    function isVerticalScrollable$1(deltaY, state) {
+        const totalHeight = state._gantt.getAllRowsHeight() - state._gantt.scenegraph.height;
+        if (totalHeight === 0) {
+            return false;
         }
-        static RegisterLoadImage(func) {
-            Env.LoadImage = func;
+        return !isScrollToTop$1(deltaY, state) && !isScrollToBottom$1(deltaY, state);
+    }
+    function isHorizontalScrollable$1(deltaX, state) {
+        const totalWidth = state._gantt.getAllDateColsWidth() - state._gantt.scenegraph.width;
+        if (totalWidth === 0) {
+            return false;
         }
-        static GetCreateCanvasFunc() {
-            if (Env.CreateCanvas) {
-                return Env.CreateCanvas;
+        return !isScrollToLeft$1(deltaX, state) && !isScrollToRight$1(deltaX, state);
+    }
+    function isScrollToTop$1(deltaY, state) {
+        const totalHeight = state._gantt.getAllRowsHeight() - state._gantt.scenegraph.height;
+        return totalHeight !== 0 && deltaY <= 0 && state.scroll.verticalBarPos < 1;
+    }
+    function isScrollToBottom$1(deltaY, state) {
+        const totalHeight = state._gantt.getAllRowsHeight() - state._gantt.scenegraph.height;
+        return totalHeight !== 0 && deltaY >= 0 && Math.abs(state.scroll.verticalBarPos - totalHeight) < 1;
+    }
+    function isScrollToLeft$1(deltaX, state) {
+        const totalWidth = state._gantt.getAllDateColsWidth() - state._gantt.scenegraph.width;
+        return totalWidth !== 0 && deltaX <= 0 && state.scroll.horizontalBarPos < 1;
+    }
+    function isScrollToRight$1(deltaX, state) {
+        const totalWidth = state._gantt.getAllDateColsWidth() - state._gantt.scenegraph.width;
+        return totalWidth !== 0 && deltaX >= 0 && Math.abs(state.scroll.horizontalBarPos - totalWidth) < 1;
+    }
+    function bindScrollBarListener$1(eventManager) {
+        const table = eventManager._gantt;
+        const stateManager = table.stateManager;
+        const scenegraph = table.scenegraph;
+        scenegraph.scrollbarComponent.vScrollBar.addEventListener('pointerover', (e) => {
+            scenegraph.scrollbarComponent.showVerticalScrollBar();
+        });
+        scenegraph.scrollbarComponent.hScrollBar.addEventListener('pointerover', (e) => {
+            scenegraph.scrollbarComponent.showHorizontalScrollBar();
+        });
+        scenegraph.scrollbarComponent.vScrollBar.addEventListener('pointerout', (e) => {
+            if (stateManager.interactionState === InteractionState$1.scrolling) {
+                return;
             }
-            if (Env.mode === 'worker') {
-                return (width = 200, height = 200) => new OffscreenCanvas(width, height);
+            scenegraph.scrollbarComponent.hideVerticalScrollBar();
+        });
+        scenegraph.scrollbarComponent.hScrollBar.addEventListener('pointerout', (e) => {
+            if (stateManager.interactionState === InteractionState$1.scrolling) {
+                return;
             }
-            return undefined;
+            scenegraph.scrollbarComponent.hideHorizontalScrollBar();
+        });
+        scenegraph.scrollbarComponent.vScrollBar.addEventListener('pointermove', (e) => {
+            e.stopPropagation();
+        });
+        scenegraph.scrollbarComponent.vScrollBar.addEventListener('scrollDown', (e) => {
+            scenegraph._gantt.eventManager.isDown = true;
+        });
+        scenegraph.scrollbarComponent.vScrollBar.addEventListener('pointerup', () => {
+            scenegraph._gantt.eventManager.isDraging = false;
+            if (stateManager.interactionState === InteractionState$1.scrolling) {
+                stateManager.updateInteractionState(InteractionState$1.default);
+            }
+        });
+        scenegraph.scrollbarComponent.vScrollBar.addEventListener('pointerupoutside', () => {
+            if (stateManager.interactionState === InteractionState$1.scrolling) {
+                stateManager.updateInteractionState(InteractionState$1.default);
+            }
+        });
+        scenegraph.scrollbarComponent.vScrollBar.addEventListener('scrollUp', (e) => {
+            scenegraph._gantt.eventManager.isDraging = false;
+        });
+        scenegraph.scrollbarComponent.hScrollBar.addEventListener('pointermove', (e) => {
+            e.stopPropagation();
+        });
+        scenegraph.scrollbarComponent.hScrollBar.addEventListener('pointerdown', (e) => {
+            e.stopPropagation();
+        });
+        scenegraph.scrollbarComponent.hScrollBar.addEventListener('scrollDown', (e) => {
+            scenegraph._gantt.eventManager.isDown = true;
+            if (stateManager.interactionState !== InteractionState$1.scrolling) {
+                stateManager.updateInteractionState(InteractionState$1.scrolling);
+            }
+        });
+        scenegraph.scrollbarComponent.hScrollBar.addEventListener('pointerup', () => {
+            if (stateManager.interactionState === InteractionState$1.scrolling) {
+                stateManager.updateInteractionState(InteractionState$1.default);
+            }
+        });
+        scenegraph.scrollbarComponent.hScrollBar.addEventListener('pointerupoutside', () => {
+            if (stateManager.interactionState === InteractionState$1.scrolling) {
+                stateManager.updateInteractionState(InteractionState$1.default);
+            }
+        });
+        scenegraph.scrollbarComponent.hScrollBar.addEventListener('scrollUp', (e) => {
+            scenegraph._gantt.eventManager.isDraging = false;
+        });
+        const throttleVerticalWheel = throttle$1(stateManager.updateVerticalScrollBar, 20);
+        const throttleHorizontalWheel = throttle$1(stateManager.updateHorizontalScrollBar, 20);
+        scenegraph.scrollbarComponent.vScrollBar.addEventListener('scrollDrag', (e) => {
+            if (scenegraph._gantt.eventManager.isDown) {
+                scenegraph._gantt.eventManager.isDraging = true;
+            }
+            if (stateManager.interactionState !== InteractionState$1.scrolling) {
+                stateManager.updateInteractionState(InteractionState$1.scrolling);
+            }
+            const ratio = e.detail.value[0] / (1 - e.detail.value[1] + e.detail.value[0]);
+            throttleVerticalWheel(ratio, e);
+        });
+        scenegraph.scrollbarComponent.hScrollBar.addEventListener('scrollDrag', (e) => {
+            if (scenegraph._gantt.eventManager.isDown) {
+                scenegraph._gantt.eventManager.isDraging = true;
+            }
+            stateManager.fastScrolling = true;
+            if (stateManager.interactionState !== InteractionState$1.scrolling) {
+                stateManager.updateInteractionState(InteractionState$1.scrolling);
+            }
+            const ratio = e.detail.value[0] / (1 - e.detail.value[1] + e.detail.value[0]);
+            throttleHorizontalWheel(ratio);
+        });
+    }
+
+    const defaultTaskBarStyle = {
+        barColor: 'blue',
+        completedBarColor: 'gray',
+        width: 30,
+        cornerRadius: 3,
+        borderWidth: 0,
+        fontFamily: 'Arial',
+        fontSize: 14
+    };
+    function setWidthToDefaultTaskBarStyle(width) {
+        defaultTaskBarStyle.width = width;
+    }
+    const isNode$1 = typeof window === 'undefined' || typeof window.window === 'undefined';
+    const DayTimes = 1000 * 60 * 60 * 24;
+    function getDateIndexByX(x, gantt) {
+        const totalX = x + gantt.stateManager.scroll.horizontalBarPos;
+        const firstDateColWidth = gantt.getDateColWidth(0);
+        const dateIndex = Math.floor((totalX - firstDateColWidth) / gantt.parsedOptions.timelineColWidth) + 1;
+        return dateIndex;
+    }
+    function generateMarkLine(markLine) {
+        if (!markLine) {
+            return [];
         }
-        static RegisterRequestAnimationFrame(func) {
-            Env.RequestAnimationFrame = func();
+        if (markLine === true) {
+            return [
+                {
+                    date: createDateAtMidnight().toLocaleDateString(),
+                    scrollToMarkLine: true,
+                    position: 'left',
+                    style: {
+                        lineColor: 'red',
+                        lineWidth: 1
+                    }
+                }
+            ];
         }
-        static GetRequestAnimationFrame() {
-            if (Env.RequestAnimationFrame) {
-                return Env.RequestAnimationFrame;
+        else if (Array.isArray(markLine)) {
+            return markLine.map((item, index) => {
+                return {
+                    ...item,
+                    date: item.date,
+                    scrollToMarkLine: item.scrollToMarkLine,
+                    position: item.position ?? 'left',
+                    style: {
+                        lineColor: item.style?.lineColor || 'red',
+                        lineWidth: item.style?.lineWidth || 1,
+                        lineDash: item.style?.lineDash
+                    }
+                };
+            });
+        }
+        return [
+            {
+                ...markLine,
+                date: markLine.date,
+                scrollToMarkLine: markLine.scrollToMarkLine ?? true,
+                position: markLine.position ?? 'left',
+                style: {
+                    lineColor: markLine.style?.lineColor || 'red',
+                    lineWidth: markLine.style?.lineWidth || 1,
+                    lineDash: markLine.style?.lineDash
+                }
             }
-            return undefined;
+        ];
+    }
+    function getHorizontalScrollBarSize$1(scrollStyle) {
+        if (scrollStyle?.hoverOn ||
+            (scrollStyle?.horizontalVisible && scrollStyle?.horizontalVisible === 'none') ||
+            (!scrollStyle?.horizontalVisible && scrollStyle?.visible === 'none')) {
+            return 0;
         }
-        static RegisterCancelAnimationFrame(func) {
-            Env.CancelAnimationFrame = func();
+        return scrollStyle?.width ?? 7;
+    }
+    function getVerticalScrollBarSize$1(scrollStyle) {
+        if (scrollStyle?.hoverOn ||
+            (scrollStyle?.verticalVisible && scrollStyle?.verticalVisible === 'none') ||
+            (!scrollStyle?.verticalVisible && scrollStyle?.visible === 'none')) {
+            return 0;
         }
-        static GetCancelAnimationFrame() {
-            if (Env.CancelAnimationFrame) {
-                return Env.CancelAnimationFrame;
-            }
-            return undefined;
+        return scrollStyle?.width ?? 7;
+    }
+    function initOptions(gantt) {
+        const options = gantt.options;
+        gantt.parsedOptions.tasksShowMode = options?.tasksShowMode ?? TasksShowMode.Tasks_Separate;
+        gantt.parsedOptions.pixelRatio = options?.pixelRatio ?? 1;
+        gantt.parsedOptions.rowHeight = options?.rowHeight ?? 40;
+        gantt.parsedOptions.timelineColWidth = options?.timelineHeader?.colWidth ?? 60;
+        gantt.parsedOptions.startDateField = options.taskBar?.startDateField ?? 'startDate';
+        gantt.parsedOptions.endDateField = options.taskBar?.endDateField ?? 'endDate';
+        gantt.parsedOptions.progressField = options.taskBar?.progressField ?? 'progress';
+        const { unit: minTimeUnit, startOfWeek, step } = gantt.parsedOptions.reverseSortedTimelineScales[0];
+        gantt.parsedOptions.minDate = options?.minDate
+            ? getStartDateByTimeUnit(new Date(options.minDate), minTimeUnit, startOfWeek)
+            : undefined;
+        gantt.parsedOptions.maxDate = options?.maxDate
+            ? getEndDateByTimeUnit(gantt.parsedOptions.minDate, new Date(options.maxDate), minTimeUnit, step)
+            : undefined;
+        gantt.parsedOptions._minDateTime = gantt.parsedOptions.minDate?.getTime();
+        gantt.parsedOptions._maxDateTime = gantt.parsedOptions.maxDate?.getTime();
+        gantt.parsedOptions.overscrollBehavior = options?.overscrollBehavior ?? 'auto';
+        gantt.parsedOptions.underlayBackgroundColor = options?.underlayBackgroundColor ?? '#FFF';
+        gantt.parsedOptions.scrollStyle = Object.assign({}, {
+            scrollRailColor: 'rgba(100, 100, 100, 0.2)',
+            scrollSliderColor: 'rgba(100, 100, 100, 0.5)',
+            scrollSliderCornerRadius: 4,
+            width: 10,
+            visible: 'always',
+            hoverOn: true,
+            barToSide: false
+        }, options?.scrollStyle);
+        gantt.parsedOptions.timelineHeaderHorizontalLineStyle = options?.timelineHeader?.horizontalLine;
+        gantt.parsedOptions.timelineHeaderVerticalLineStyle = options?.timelineHeader?.verticalLine;
+        gantt.parsedOptions.timelineHeaderBackgroundColor = options?.timelineHeader?.backgroundColor;
+        gantt.parsedOptions.timeLineHeaderRowHeights = [];
+        gantt.parsedOptions.timelineHeaderStyles = [];
+        for (let i = 0; i < gantt.parsedOptions.sortedTimelineScales.length ?? 0; i++) {
+            const style = gantt.parsedOptions.sortedTimelineScales[i].style;
+            gantt.parsedOptions.timelineHeaderStyles.push(Object.assign({
+                fontSize: 20,
+                fontWeight: 'bold',
+                textAlign: 'center',
+                textBaseline: 'middle',
+                color: '#000',
+                backgroundColor: '#fff'
+            }, style));
+            gantt.parsedOptions.timeLineHeaderRowHeights.push(gantt.parsedOptions.sortedTimelineScales[i].rowHeight ?? options?.headerRowHeight ?? 40);
         }
-    };
-    function defaultMode$1() {
-        let mode = 'browser';
-        try {
-            if (window.type === 'node') {
-                mode = 'node';
+        gantt.parsedOptions.grid = Object.assign({}, options?.grid);
+        setWidthToDefaultTaskBarStyle((gantt.parsedOptions.rowHeight * 3) / 4);
+        gantt.parsedOptions.taskBarStyle =
+            options?.taskBar?.barStyle && typeof options?.taskBar?.barStyle === 'function'
+                ? options.taskBar.barStyle
+                : Object.assign({}, defaultTaskBarStyle, options?.taskBar?.barStyle);
+        gantt.parsedOptions.taskBarMilestoneStyle = Object.assign(typeof gantt.parsedOptions.taskBarStyle === 'function'
+            ? {}
+            : {
+                width: gantt.parsedOptions.taskBarStyle.width,
+                borderColor: gantt.parsedOptions.taskBarStyle.borderColor,
+                borderLineWidth: gantt.parsedOptions.taskBarStyle.borderLineWidth ?? 1,
+                fillColor: gantt.parsedOptions.taskBarStyle.barColor,
+                cornerRadius: 0
+            }, options?.taskBar?.milestoneStyle);
+        gantt.parsedOptions.taskBarMilestoneHypotenuse = gantt.parsedOptions.taskBarMilestoneStyle.width * Math.sqrt(2);
+        gantt.parsedOptions.dateFormat = options?.dateFormat;
+        gantt.parsedOptions.taskBarHoverStyle = Object.assign({
+            barOverlayColor: 'rgba(99, 144, 0, 0.4)'
+        }, options?.taskBar?.hoverBarStyle);
+        gantt.parsedOptions.taskBarSelectable = options?.taskBar?.selectable ?? true;
+        gantt.parsedOptions.taskBarSelectedStyle = Object.assign(typeof gantt.parsedOptions.taskBarStyle === 'function'
+            ? {
+                shadowBlur: 6,
+                shadowOffsetX: 0,
+                shadowOffsetY: 0,
+                borderLineWidth: 1
             }
-            else if (typeof window !== 'undefined' && !window.performance) {
-                mode = 'miniApp';
+            : {
+                shadowBlur: 6,
+                shadowOffsetX: 0,
+                shadowOffsetY: 0,
+                shadowColor: gantt.parsedOptions.taskBarStyle.barColor,
+                borderColor: gantt.parsedOptions.taskBarStyle.barColor,
+                borderLineWidth: 1
+            }, options?.taskBar?.selectedBarStyle);
+        gantt.parsedOptions.taskBarLabelText = options?.taskBar?.labelText ?? '';
+        gantt.parsedOptions.taskBarMoveable = options?.taskBar?.moveable ?? true;
+        gantt.parsedOptions.moveTaskBarToExtendDateRange = options?.taskBar?.moveToExtendDateRange ?? true;
+        gantt.parsedOptions.taskBarResizable = options?.taskBar?.resizable ?? true;
+        gantt.parsedOptions.taskBarDragOrder = options?.taskBar?.dragOrder ?? true;
+        gantt.parsedOptions.taskBarLabelStyle = {
+            fontFamily: options?.taskBar?.labelTextStyle?.fontFamily ?? 'Arial',
+            fontSize: options?.taskBar?.labelTextStyle?.fontSize ?? 20,
+            color: options?.taskBar?.labelTextStyle?.color ?? '#F01',
+            textAlign: options?.taskBar?.labelTextStyle?.textAlign ?? 'left',
+            textBaseline: options?.taskBar?.labelTextStyle?.textBaseline ?? 'middle',
+            padding: options?.taskBar?.labelTextStyle?.padding ?? [0, 0, 0, 10],
+            textOverflow: options?.taskBar?.labelTextStyle?.textOverflow
+        };
+        gantt.parsedOptions.taskBarCustomLayout = options?.taskBar?.customLayout;
+        gantt.parsedOptions.taskBarCreatable =
+            options?.taskBar?.scheduleCreatable ??
+                !!(gantt.parsedOptions.tasksShowMode === TasksShowMode.Sub_Tasks_Separate ||
+                    gantt.parsedOptions.tasksShowMode === TasksShowMode.Tasks_Separate);
+        gantt.parsedOptions.taskBarCreationButtonStyle = Object.assign({
+            lineColor: 'rgb(99, 144, 0)',
+            lineWidth: 1,
+            lineDash: [5, 5],
+            cornerRadius: 4,
+            backgroundColor: '#FFF'
+        }, options?.taskBar?.scheduleCreation?.buttonStyle);
+        gantt.parsedOptions.taskBarCreationCustomLayout = options?.taskBar?.scheduleCreation?.customLayout;
+        gantt.parsedOptions.taskBarCreationMaxWidth = options?.taskBar?.scheduleCreation?.maxWidth;
+        gantt.parsedOptions.taskBarCreationMinWidth = options?.taskBar?.scheduleCreation?.minWidth;
+        gantt.parsedOptions.outerFrameStyle = Object.assign({
+            borderColor: '#e1e4e8',
+            borderLineWidth: 1,
+            cornerRadius: 4
+        }, options.frame?.outerFrameStyle);
+        gantt.parsedOptions.markLine = generateMarkLine(options?.markLine);
+        if (gantt.parsedOptions.markLine?.length ?? 0) {
+            if (gantt.parsedOptions.markLine?.every(item => item.scrollToMarkLine === undefined)) {
+                gantt.parsedOptions.markLine[0].scrollToMarkLine = true;
             }
-            else if (typeof window === 'undefined') {
-                mode = 'node';
+            if (gantt.parsedOptions.markLine?.find(item => item.scrollToMarkLine)) {
+                gantt.parsedOptions.scrollToMarkLineDate = getStartDateByTimeUnit(new Date(gantt.parsedOptions.markLine?.find(item => item.scrollToMarkLine).date), minTimeUnit, startOfWeek);
             }
         }
-        catch (err) {
-            mode = 'node';
-        }
-        return mode;
+        gantt.parsedOptions.verticalSplitLineHighlight = options.frame?.verticalSplitLineHighlight;
+        gantt.parsedOptions.verticalSplitLine = Object.assign({
+            lineColor: gantt.parsedOptions.outerFrameStyle?.borderColor,
+            lineWidth: gantt.parsedOptions.outerFrameStyle?.borderLineWidth
+        }, options.frame?.verticalSplitLine);
+        gantt.parsedOptions.horizontalSplitLine = options.frame?.horizontalSplitLine;
+        gantt.parsedOptions.verticalSplitLineMoveable = options.frame?.verticalSplitLineMoveable;
+        gantt.parsedOptions.taskKeyField = options.taskKeyField ?? 'id';
+        gantt.parsedOptions.dependencyLinks = options.dependency?.links ?? [];
+        gantt.parsedOptions.dependencyLinkCreatable = options.dependency?.linkCreatable ?? false;
+        gantt.parsedOptions.dependencyLinkSelectable = options.dependency?.linkSelectable ?? true;
+        gantt.parsedOptions.dependencyLinkDeletable = options.dependency?.linkDeletable ?? false;
+        gantt.parsedOptions.dependencyLinkLineStyle = Object.assign({
+            lineColor: 'red',
+            lineWidth: 1
+        }, options.dependency?.linkLineStyle);
+        gantt.parsedOptions.dependencyLinkSelectedLineStyle = Object.assign({
+            shadowBlur: 4,
+            shadowOffset: 0,
+            shadowColor: gantt.parsedOptions.dependencyLinkLineStyle.lineColor,
+            lineColor: gantt.parsedOptions.dependencyLinkLineStyle.lineColor,
+            lineWidth: gantt.parsedOptions.dependencyLinkLineStyle.lineWidth
+        }, options?.dependency?.linkSelectedLineStyle);
+        gantt.parsedOptions.dependencyLinkLineCreatePointStyle = Object.assign({
+            strokeColor: 'red',
+            fillColor: 'white',
+            radius: 5,
+            strokeWidth: 1
+        }, options?.dependency?.linkCreatePointStyle);
+        gantt.parsedOptions.dependencyLinkLineCreatingPointStyle = Object.assign({
+            strokeColor: 'red',
+            fillColor: 'red',
+            radius: 5,
+            strokeWidth: 1
+        }, options?.dependency?.linkCreatingPointStyle);
+        gantt.parsedOptions.dependencyLinkLineCreatingStyle = Object.assign({
+            lineColor: 'red',
+            lineWidth: 1,
+            lineDash: [5, 5]
+        }, options?.dependency?.linkCreatingLineStyle);
+        gantt.parsedOptions.eventOptions = options?.eventOptions;
+        gantt.parsedOptions.keyboardOptions = options?.keyboardOptions;
+        gantt.parsedOptions.markLineCreateOptions = options?.markLineCreateOptions;
     }
-
-    class ScrollBarComponent {
-        hScrollBar;
-        vScrollBar;
-        _gantt;
-        _clearHorizontalScrollBar;
-        _clearVerticalScrollBar;
-        constructor(gantt) {
-            this._gantt = gantt;
-            this.createScrollBar(gantt.tableNoFrameWidth, gantt.tableNoFrameHeight - gantt.getAllHeaderRowsHeight());
+    function updateOptionsWhenScaleChanged(gantt) {
+        const options = gantt.options;
+        const { unit: minTimeUnit, startOfWeek, step } = gantt.parsedOptions.reverseSortedTimelineScales[0];
+        gantt.parsedOptions.minDate = getStartDateByTimeUnit(new Date(gantt.parsedOptions.minDate), minTimeUnit, startOfWeek);
+        gantt.parsedOptions.maxDate = getEndDateByTimeUnit(gantt.parsedOptions.minDate, new Date(gantt.parsedOptions.maxDate), minTimeUnit, step);
+        gantt.parsedOptions._minDateTime = gantt.parsedOptions.minDate?.getTime();
+        gantt.parsedOptions._maxDateTime = gantt.parsedOptions.maxDate?.getTime();
+        gantt.parsedOptions.timeLineHeaderRowHeights = [];
+        gantt.parsedOptions.timelineHeaderStyles = [];
+        for (let i = 0; i < gantt.parsedOptions.sortedTimelineScales.length ?? 0; i++) {
+            const style = gantt.parsedOptions.sortedTimelineScales[i].style;
+            gantt.parsedOptions.timelineHeaderStyles.push(Object.assign({
+                fontSize: 20,
+                fontWeight: 'bold',
+                textAlign: 'center',
+                textBaseline: 'middle',
+                color: '#000',
+                backgroundColor: '#fff'
+            }, style));
+            gantt.parsedOptions.timeLineHeaderRowHeights.push(gantt.parsedOptions.sortedTimelineScales[i].rowHeight ?? options?.headerRowHeight ?? 40);
         }
-        createScrollBar(tableWidth, tableHeight) {
-            const scrollRailColor = this._gantt.parsedOptions.scrollStyle.scrollRailColor;
-            const scrollSliderColor = this._gantt.parsedOptions.scrollStyle.scrollSliderColor;
-            const scrollSliderCornerRadius = this._gantt.parsedOptions.scrollStyle.scrollSliderCornerRadius;
-            const width = this._gantt.parsedOptions.scrollStyle.width;
-            let sliderStyle;
-            if (isValid$3(scrollSliderCornerRadius)) {
-                sliderStyle = {
-                    cornerRadius: scrollSliderCornerRadius,
-                    fill: scrollSliderColor
+    }
+    function generateTimeLineDate(currentDate, endDate, scale) {
+        const { unit, step, format } = scale;
+        const timelineDates = [];
+        while (currentDate < endDate) {
+            if (unit === 'day') {
+                const year = currentDate.getFullYear();
+                const month = currentDate.getMonth();
+                const day = currentDate.getDate();
+                const end = createDateAtLastHour(new Date(year, month, day + step - 1), true);
+                if (end.getTime() > endDate.getTime()) {
+                    end.setTime(endDate.getTime());
+                }
+                const start = currentDate;
+                const formattedDate = format?.({ dateIndex: day, startDate: start, endDate: end });
+                const columnTitle = formattedDate || day.toString();
+                const dayCellConfig = {
+                    days: Math.abs(end.getTime() - currentDate.getTime() + 1) / DayTimes,
+                    startDate: start,
+                    endDate: end,
+                    step,
+                    unit: 'day',
+                    title: columnTitle,
+                    dateIndex: day
                 };
+                timelineDates.push(dayCellConfig);
+                currentDate = new Date(year, month, day + step);
             }
-            else {
-                sliderStyle = {
-                    fill: scrollSliderColor
+            else if (unit === 'month') {
+                const year = currentDate.getFullYear();
+                const month = currentDate.getMonth();
+                const end = createDateAtLastHour(new Date(year, month + step, 0), true);
+                if (end.getTime() > endDate.getTime()) {
+                    end.setTime(endDate.getTime());
+                }
+                const start = currentDate;
+                const formattedDate = format?.({ dateIndex: month + 1, startDate: start, endDate: end });
+                const columnTitle = formattedDate || (month + 1).toString();
+                const dayCellConfig = {
+                    days: Math.abs(end.getTime() - currentDate.getTime() + 1) / DayTimes,
+                    startDate: start,
+                    step,
+                    unit: 'month',
+                    endDate: end,
+                    title: columnTitle,
+                    dateIndex: month + 1
                 };
+                timelineDates.push(dayCellConfig);
+                currentDate = new Date(year, month + step, 1);
             }
-            this._gantt.parsedOptions.scrollStyle?.visible;
-            this._gantt.parsedOptions.scrollStyle?.hoverOn;
-            this.hScrollBar = new ScrollBar({
-                direction: 'horizontal',
-                x: -tableWidth * 2,
-                y: -tableHeight * 2,
-                width: tableWidth,
-                height: width,
-                padding: 0,
-                railStyle: {
-                    fill: scrollRailColor
-                },
-                sliderStyle,
-                range: [0, 0.1],
-                visible: false
-            });
-            this.hScrollBar.render();
-            this.hScrollBar.hideAll();
-            this.vScrollBar = new ScrollBar({
-                direction: 'vertical',
-                x: -tableWidth * 2,
-                y: -tableHeight * 2,
-                width,
-                height: tableHeight,
-                padding: 0,
-                railStyle: {
-                    fill: scrollRailColor
-                },
-                sliderStyle,
-                range: [0, 0.1],
-                visible: false
-            });
-            this.vScrollBar.render();
-            this.vScrollBar.hideAll();
-        }
-        refresh() {
-        }
-        hideVerticalScrollBar() {
-            const visable = this._gantt.parsedOptions.scrollStyle.visible;
-            if (visable !== 'focus' && visable !== 'scrolling') {
-                return;
-            }
-            this.vScrollBar.setAttribute('visible', false);
-            this.vScrollBar.hideAll();
-            this._gantt.scenegraph.updateNextFrame();
-        }
-        showVerticalScrollBar(autoHide) {
-            const visable = this._gantt.parsedOptions.scrollStyle.visible;
-            if (visable !== 'focus' && visable !== 'scrolling') {
-                return;
-            }
-            this.vScrollBar.setAttribute('visible', true);
-            this.vScrollBar.showAll();
-            this._gantt.scenegraph.updateNextFrame();
-            if (autoHide) {
-                clearTimeout(this._clearVerticalScrollBar);
-                this._clearVerticalScrollBar = setTimeout(() => {
-                    this.hideVerticalScrollBar();
-                }, 1000);
-            }
-        }
-        hideHorizontalScrollBar() {
-            const visable = this._gantt.parsedOptions.scrollStyle.visible;
-            if (visable !== 'focus' && visable !== 'scrolling') {
-                return;
-            }
-            this.hScrollBar.setAttribute('visible', false);
-            this.hScrollBar.hideAll();
-            this._gantt.scenegraph.updateNextFrame();
-        }
-        showHorizontalScrollBar(autoHide) {
-            const visable = this._gantt.parsedOptions.scrollStyle.visible;
-            if (visable !== 'focus' && visable !== 'scrolling') {
-                return;
+            else if (unit === 'quarter') {
+                const year = currentDate.getFullYear();
+                const quarter = Math.floor(currentDate.getMonth() / 3);
+                const end = createDateAtLastHour(new Date(year, (quarter + step) * 3, 0), true);
+                if (end.getTime() > endDate.getTime()) {
+                    end.setTime(endDate.getTime());
+                }
+                const start = currentDate;
+                const formattedDate = format?.({ dateIndex: quarter + 1, startDate: start, endDate: end });
+                const columnTitle = formattedDate || (quarter + 1).toString();
+                const dayCellConfig = {
+                    days: Math.abs(end.getTime() - currentDate.getTime() + 1) / (1000 * 60 * 60 * 24),
+                    startDate: start,
+                    step,
+                    unit: 'quarter',
+                    endDate: end,
+                    title: columnTitle,
+                    dateIndex: quarter + 1
+                };
+                timelineDates.push(dayCellConfig);
+                currentDate = new Date(year, (quarter + step) * 3, 1);
             }
-            this.hScrollBar.setAttribute('visible', true);
-            this.hScrollBar.showAll();
-            this._gantt.scenegraph.updateNextFrame();
-            if (autoHide) {
-                clearTimeout(this._clearHorizontalScrollBar);
-                this._clearHorizontalScrollBar = setTimeout(() => {
-                    this.hideHorizontalScrollBar();
-                }, 1000);
+            else if (unit === 'year') {
+                const year = currentDate.getFullYear();
+                const end = createDateAtLastHour(new Date(year + step - 1, 11, 31), true);
+                if (end.getTime() > endDate.getTime()) {
+                    end.setTime(endDate.getTime());
+                }
+                const start = currentDate;
+                const formattedDate = format?.({ dateIndex: year, startDate: start, endDate: end });
+                const columnTitle = formattedDate || year.toString();
+                const dayCellConfig = {
+                    days: Math.abs(end.getTime() - currentDate.getTime() + 1) / DayTimes,
+                    startDate: start,
+                    endDate: end,
+                    step,
+                    unit: 'year',
+                    title: columnTitle,
+                    dateIndex: year
+                };
+                timelineDates.push(dayCellConfig);
+                currentDate = new Date(year + step, 0, 1);
             }
-        }
-        updateVerticalScrollBarPos(topRatio) {
-            const range = this.vScrollBar.attribute.range;
-            const size = range[1] - range[0];
-            const range0 = topRatio * (1 - size);
-            this.vScrollBar.setAttribute('range', [range0, range0 + size]);
-            const bounds = this.vScrollBar.AABBBounds && this.vScrollBar.globalAABBBounds;
-            this.vScrollBar._viewPosition = {
-                x: bounds.x1,
-                y: bounds.y1
-            };
-        }
-        updateHorizontalScrollBarPos(leftRatio) {
-            const range = this.hScrollBar.attribute.range;
-            const size = range[1] - range[0];
-            const range0 = leftRatio * (1 - size);
-            this.hScrollBar.setAttribute('range', [range0, range0 + size]);
-            const bounds = this.hScrollBar.AABBBounds && this.hScrollBar.globalAABBBounds;
-            this.hScrollBar._viewPosition = {
-                x: bounds.x1,
-                y: bounds.y1
-            };
-        }
-        updateScrollBar() {
-            const oldHorizontalBarPos = this._gantt.stateManager.scroll.horizontalBarPos;
-            const oldVerticalBarPos = this._gantt.stateManager.scroll.verticalBarPos;
-            const scrollStyle = this._gantt.parsedOptions.scrollStyle;
-            const width = scrollStyle?.width;
-            const visible = scrollStyle?.visible;
-            const tableWidth = Math.ceil(this._gantt.scenegraph.ganttGroup.attribute.width);
-            const tableHeight = Math.ceil(this._gantt.scenegraph.ganttGroup.attribute.height);
-            const totalHeight = this._gantt.getAllRowsHeight();
-            const totalWidth = this._gantt.getAllDateColsWidth();
-            const frozenRowsHeight = this._gantt.getAllHeaderRowsHeight();
-            if (totalWidth > tableWidth) {
-                const y = Math.min(tableHeight, totalHeight);
-                const rangeEnd = Math.max(0.05, tableWidth / totalWidth);
-                const hoverOn = scrollStyle.hoverOn;
-                let attrY = 0;
-                if (scrollStyle.barToSide) {
-                    attrY =
-                        this._gantt.tableNoFrameHeight -
-                            (hoverOn ? width : -this._gantt.scenegraph.ganttGroup.attribute.y) +
-                            this._gantt.tableY;
+            else if (unit === 'week') {
+                const startOfWeekSetting = scale.startOfWeek ?? 'monday';
+                let dayOfWeek = currentDate.getDay();
+                if (startOfWeekSetting === 'monday') {
+                    dayOfWeek = dayOfWeek === 0 ? 6 : dayOfWeek - 1;
                 }
-                else {
-                    attrY = y - (hoverOn ? width : -this._gantt.scenegraph.ganttGroup.attribute.y) + this._gantt.tableY;
+                const startOfWeek = createDateAtMidnight(currentDate);
+                const dateEnd = createDateAtLastHour(currentDate.getTime() + (7 * step - dayOfWeek) * 24 * 60 * 60 * 1000 - 1, true);
+                if (dateEnd > endDate) {
+                    dateEnd.setTime(endDate.getTime());
                 }
-                this.hScrollBar.setAttributes({
-                    x: this._gantt.scenegraph.ganttGroup.attribute.x,
-                    y: attrY,
-                    width: tableWidth,
-                    range: [0, rangeEnd],
-                    visible: visible === 'always'
-                });
-                const bounds = this.hScrollBar.AABBBounds && this.hScrollBar.globalAABBBounds;
-                this.hScrollBar._viewPosition = {
-                    x: bounds.x1,
-                    y: bounds.y1
+                const weekNumber = getWeekNumber(startOfWeek);
+                const columnTitle = format?.({ dateIndex: weekNumber, startDate: startOfWeek, endDate: dateEnd }) || weekNumber.toString();
+                const dayCellConfig = {
+                    days: (dateEnd.getTime() - startOfWeek.getTime() + 1) / DayTimes,
+                    startDate: startOfWeek,
+                    endDate: dateEnd,
+                    step,
+                    unit: 'week',
+                    title: columnTitle,
+                    dateIndex: weekNumber
                 };
-                if (visible === 'always') {
-                    this.hScrollBar.showAll();
-                }
-            }
-            else {
-                this.hScrollBar.setAttributes({
-                    x: -this._gantt.tableNoFrameWidth * 2,
-                    y: -this._gantt.tableNoFrameHeight * 2,
-                    width: 0,
-                    visible: false
-                });
+                timelineDates.push(dayCellConfig);
+                currentDate.setTime(createDateAtMidnight(currentDate.getTime() + (7 * step - dayOfWeek) * 24 * 60 * 60 * 1000, true).getTime());
             }
-            if (totalHeight > tableHeight) {
-                const x = Math.min(tableWidth, totalWidth) + this._gantt.scenegraph.ganttGroup.attribute.x;
-                const rangeEnd = Math.max(0.05, (tableHeight - frozenRowsHeight) / (totalHeight - frozenRowsHeight));
-                let attrX = 0;
-                const hoverOn = this._gantt.parsedOptions.scrollStyle.hoverOn;
-                if (this._gantt.parsedOptions.scrollStyle.barToSide) {
-                    attrX = this._gantt.tableNoFrameWidth - (hoverOn ? width : -this._gantt.scenegraph.ganttGroup.attribute.x);
-                }
-                else {
-                    attrX = x - (hoverOn ? width : -this._gantt.scenegraph.ganttGroup.attribute.x);
+            else if (unit === 'hour') {
+                const year = currentDate.getFullYear();
+                const month = currentDate.getMonth();
+                const day = currentDate.getDate();
+                const hour = currentDate.getHours();
+                const end = createDateAtLastMinute(new Date(year, month, day, hour + step - 1), true);
+                if (end.getTime() > endDate.getTime()) {
+                    end.setTime(endDate.getTime());
                 }
-                this.vScrollBar.setAttributes({
-                    x: attrX,
-                    y: frozenRowsHeight + (!hoverOn ? this._gantt.scenegraph.ganttGroup.attribute.y : 0) + this._gantt.tableY,
-                    height: tableHeight - frozenRowsHeight,
-                    range: [0, rangeEnd],
-                    visible: visible === 'always'
-                });
-                const bounds = this.vScrollBar.AABBBounds && this.vScrollBar.globalAABBBounds;
-                this.vScrollBar._viewPosition = {
-                    x: bounds.x1,
-                    y: bounds.y1
+                const start = currentDate;
+                const formattedDate = format?.({ dateIndex: hour, startDate: start, endDate: end });
+                const columnTitle = formattedDate || hour.toString();
+                const dayCellConfig = {
+                    days: Math.abs(end.getTime() - currentDate.getTime() + 1) / DayTimes,
+                    startDate: start,
+                    endDate: end,
+                    step,
+                    unit: 'hour',
+                    title: columnTitle,
+                    dateIndex: currentDate.getHours()
                 };
-                if (visible === 'always') {
-                    this.vScrollBar.showAll();
+                timelineDates.push(dayCellConfig);
+                currentDate = new Date(year, month, day, hour + step);
+            }
+            else if (unit === 'minute') {
+                const year = currentDate.getFullYear();
+                const month = currentDate.getMonth();
+                const day = currentDate.getDate();
+                const hour = currentDate.getHours();
+                const minute = currentDate.getMinutes();
+                const end = createDateAtLastSecond(new Date(year, month, day, hour, minute + step - 1), true);
+                if (end.getTime() > endDate.getTime()) {
+                    end.setTime(endDate.getTime());
                 }
+                const start = currentDate;
+                const formattedDate = format?.({ dateIndex: minute, startDate: start, endDate: end });
+                const columnTitle = formattedDate || minute.toString();
+                const dayCellConfig = {
+                    days: Math.abs(end.getTime() - currentDate.getTime() + 1) / DayTimes,
+                    startDate: start,
+                    endDate: end,
+                    step,
+                    unit: 'minute',
+                    title: columnTitle,
+                    dateIndex: currentDate.getMinutes()
+                };
+                timelineDates.push(dayCellConfig);
+                currentDate = new Date(year, month, day, hour, minute + step);
             }
-            else {
-                this.vScrollBar.setAttributes({
-                    x: -this._gantt.tableNoFrameWidth * 2,
-                    y: -this._gantt.tableNoFrameHeight * 2,
-                    height: 0,
-                    visible: false
-                });
+            else if (unit === 'second') {
+                const year = currentDate.getFullYear();
+                const month = currentDate.getMonth();
+                const day = currentDate.getDate();
+                const hour = currentDate.getHours();
+                const minute = currentDate.getMinutes();
+                const second = currentDate.getSeconds();
+                const end = createDateAtLastMillisecond(new Date(year, month, day, hour, minute, second + step - 1), true);
+                if (end.getTime() > endDate.getTime()) {
+                    end.setTime(endDate.getTime());
+                }
+                const start = currentDate;
+                const formattedDate = format?.({ dateIndex: second, startDate: start, endDate: end });
+                const columnTitle = formattedDate || second.toString();
+                const dayCellConfig = {
+                    days: Math.abs(end.getTime() - currentDate.getTime() + 1) / DayTimes,
+                    startDate: start,
+                    endDate: end,
+                    step,
+                    unit: 'second',
+                    title: columnTitle,
+                    dateIndex: currentDate.getSeconds()
+                };
+                timelineDates.push(dayCellConfig);
+                currentDate = new Date(year, month, day, hour, minute, second + step);
             }
-            this._gantt.stateManager.setScrollLeft(oldHorizontalBarPos);
-            this._gantt.stateManager.setScrollTop(oldVerticalBarPos);
-        }
-    }
-
-    function handleWhell$1(event, state, gantt, isWheelEvent = true) {
-        let { deltaX, deltaY } = event;
-        if (event.shiftKey && event.deltaY) {
-            deltaX = deltaY;
-            deltaY = 0;
         }
-        const [optimizedDeltaX, optimizedDeltaY] = optimizeScrollXY$1(deltaX, deltaY, { horizontal: 1, vertical: 1 });
-        if (optimizedDeltaX) {
-            state.setScrollLeft(state.scroll.horizontalBarPos + optimizedDeltaX);
-            gantt.scenegraph.scrollbarComponent.showHorizontalScrollBar(true);
+        return timelineDates;
+    }
+    function getTextPos(padding, textAlign, textBaseline, width, height) {
+        let textX = padding[3] ?? 10;
+        if (textAlign === 'right' || textAlign === 'end') {
+            textX = width - 0 - (padding[1] ?? 10);
         }
-        if (optimizedDeltaY) {
-            state.setScrollTop(state.scroll.verticalBarPos + optimizedDeltaY);
-            gantt.scenegraph.scrollbarComponent.showVerticalScrollBar(true);
+        else if (textAlign === 'center') {
+            textX = 0 + (width - 0 + (padding[3] ?? 10) - (padding[1] ?? 10)) / 2;
         }
-        isWheelEvent && state.resetInteractionState();
-        if (event.cancelable &&
-            (state._gantt.parsedOptions.overscrollBehavior === 'none' ||
-                (Math.abs(deltaY) >= Math.abs(deltaX) && deltaY !== 0 && isVerticalScrollable$1(deltaY, state)) ||
-                (Math.abs(deltaY) <= Math.abs(deltaX) && deltaX !== 0 && isHorizontalScrollable$1(deltaX, state)))) {
-            event.preventDefault();
+        let textY = 0 + (padding[0] ?? 10);
+        if (textBaseline === 'bottom' || textBaseline === 'alphabetic' || textBaseline === 'ideographic') {
+            textY = height - 0 - (padding[2] ?? 10);
         }
+        else if (textBaseline === 'middle') {
+            textY = 0 + (height - 0 - (padding[0] ?? 10) - (padding[2] ?? 10)) / 2 + (padding[0] ?? 10);
+        }
+        return {
+            x: textX,
+            y: textY
+        };
     }
-    function optimizeScrollXY$1(x, y, ratio) {
-        const ANGLE = 2;
-        const angle = Math.abs(x / y);
-        const deltaX = angle <= 1 / ANGLE ? 0 : x;
-        const deltaY = angle > ANGLE ? 0 : y;
-        return [Math.ceil(deltaX * (ratio.horizontal ?? 0)), Math.ceil(deltaY * (ratio.vertical ?? 0))];
+    function convertProgress(progress) {
+        if (typeof progress === 'string') {
+            progress = progress.replace('%', '');
+            progress = parseFloat(progress);
+        }
+        return Math.round(progress);
     }
-    function isVerticalScrollable$1(deltaY, state) {
-        const totalHeight = state._gantt.getAllRowsHeight() - state._gantt.scenegraph.height;
-        if (totalHeight === 0) {
-            return false;
+    function createSplitLineAndResizeLine(gantt) {
+        if (gantt.taskListTableInstance) {
+            gantt.verticalSplitResizeLine = document.createElement('div');
+            gantt.verticalSplitResizeLine.style.position = 'absolute';
+            gantt.verticalSplitResizeLine.style.top = gantt.tableY + 'px';
+            gantt.verticalSplitResizeLine.style.left =
+                (gantt.taskTableWidth ? gantt.taskTableWidth - 7 + gantt.parsedOptions.verticalSplitLine.lineWidth / 2 : 0) +
+                    'px';
+            gantt.verticalSplitResizeLine.style.width = '14px';
+            gantt.verticalSplitResizeLine.style.height = gantt.drawHeight + 'px';
+            gantt.verticalSplitResizeLine.style.backgroundColor = 'rgba(0,0,0,0)';
+            gantt.verticalSplitResizeLine.style.zIndex = '100';
+            gantt.parsedOptions.verticalSplitLineMoveable && (gantt.verticalSplitResizeLine.style.cursor = 'col-resize');
+            gantt.verticalSplitResizeLine.style.userSelect = 'none';
+            gantt.verticalSplitResizeLine.style.opacity = '1';
+            const verticalSplitLine = document.createElement('div');
+            verticalSplitLine.style.position = 'absolute';
+            verticalSplitLine.style.top = '0px';
+            verticalSplitLine.style.left = `${(14 - gantt.parsedOptions.verticalSplitLine.lineWidth) / 2}px`;
+            verticalSplitLine.style.width = gantt.parsedOptions.verticalSplitLine.lineWidth + 'px';
+            verticalSplitLine.style.height = '100%';
+            verticalSplitLine.style.backgroundColor = gantt.parsedOptions.verticalSplitLine.lineColor;
+            verticalSplitLine.style.zIndex = '100';
+            verticalSplitLine.style.userSelect = 'none';
+            verticalSplitLine.style.pointerEvents = 'none';
+            verticalSplitLine.style.transition = 'background-color 0.3s';
+            gantt.verticalSplitResizeLine.appendChild(verticalSplitLine);
+            if (gantt.parsedOptions.verticalSplitLineHighlight) {
+                const highlightLine = document.createElement('div');
+                highlightLine.style.position = 'absolute';
+                highlightLine.style.top = '0px';
+                highlightLine.style.left = `${(14 - gantt.parsedOptions.verticalSplitLineHighlight.lineWidth ?? 2) / 2}px`;
+                highlightLine.style.width = (gantt.parsedOptions.verticalSplitLineHighlight.lineWidth ?? 2) + 'px';
+                highlightLine.style.height = '100%';
+                highlightLine.style.backgroundColor = gantt.parsedOptions.verticalSplitLineHighlight.lineColor;
+                highlightLine.style.zIndex = '100';
+                highlightLine.style.cursor = 'col-resize';
+                highlightLine.style.userSelect = 'none';
+                highlightLine.style.pointerEvents = 'none';
+                highlightLine.style.opacity = '0';
+                highlightLine.style.transition = 'background-color 0.3s';
+                gantt.verticalSplitResizeLine.appendChild(highlightLine);
+            }
+            gantt.container.appendChild(gantt.verticalSplitResizeLine);
         }
-        return !isScrollToTop$1(deltaY, state) && !isScrollToBottom$1(deltaY, state);
     }
-    function isHorizontalScrollable$1(deltaX, state) {
-        const totalWidth = state._gantt.getAllDateColsWidth() - state._gantt.scenegraph.width;
-        if (totalWidth === 0) {
-            return false;
+    function updateSplitLineAndResizeLine(gantt) {
+        if (gantt.verticalSplitResizeLine) {
+            gantt.verticalSplitResizeLine.style.position = 'absolute';
+            gantt.verticalSplitResizeLine.style.top = gantt.tableY + 'px';
+            gantt.verticalSplitResizeLine.style.left = gantt.taskTableWidth
+                ? `${gantt.taskTableWidth - 7 + gantt.parsedOptions.verticalSplitLine.lineWidth / 2}px`
+                : '0px';
+            gantt.verticalSplitResizeLine.style.width = '14px';
+            gantt.verticalSplitResizeLine.style.height = gantt.drawHeight + 'px';
+            gantt.verticalSplitResizeLine.style.backgroundColor = 'rgba(0,0,0,0)';
+            gantt.verticalSplitResizeLine.style.zIndex = '100';
+            gantt.parsedOptions.verticalSplitLineMoveable && (gantt.verticalSplitResizeLine.style.cursor = 'col-resize');
+            gantt.verticalSplitResizeLine.style.userSelect = 'none';
+            gantt.verticalSplitResizeLine.style.opacity = '1';
+            const verticalSplitLine = gantt.verticalSplitResizeLine.childNodes[0];
+            verticalSplitLine.style.position = 'absolute';
+            verticalSplitLine.style.top = '0px';
+            verticalSplitLine.style.left = `${(14 - gantt.parsedOptions.verticalSplitLine.lineWidth) / 2}px`;
+            verticalSplitLine.style.width = gantt.parsedOptions.verticalSplitLine.lineWidth + 'px';
+            verticalSplitLine.style.height = '100%';
+            verticalSplitLine.style.backgroundColor = gantt.parsedOptions.verticalSplitLine.lineColor;
+            verticalSplitLine.style.zIndex = '100';
+            verticalSplitLine.style.userSelect = 'none';
+            verticalSplitLine.style.pointerEvents = 'none';
+            verticalSplitLine.style.transition = 'background-color 0.3s';
+            if (gantt.verticalSplitResizeLine.childNodes[1]) {
+                const highlightLine = gantt.verticalSplitResizeLine.childNodes[1];
+                highlightLine.style.position = 'absolute';
+                highlightLine.style.top = '0px';
+                highlightLine.style.left = `${(14 - gantt.parsedOptions.verticalSplitLineHighlight.lineWidth ?? 2) / 2}px`;
+                highlightLine.style.width = (gantt.parsedOptions.verticalSplitLineHighlight.lineWidth ?? 2) + 'px';
+                highlightLine.style.height = '100%';
+                highlightLine.style.backgroundColor = gantt.parsedOptions.verticalSplitLineHighlight.lineColor;
+                highlightLine.style.zIndex = '100';
+                highlightLine.style.cursor = 'col-resize';
+                highlightLine.style.userSelect = 'none';
+                highlightLine.style.pointerEvents = 'none';
+                highlightLine.style.opacity = '0';
+                highlightLine.style.transition = 'background-color 0.3s';
+            }
         }
-        return !isScrollToLeft$1(deltaX, state) && !isScrollToRight$1(deltaX, state);
     }
-    function isScrollToTop$1(deltaY, state) {
-        const totalHeight = state._gantt.getAllRowsHeight() - state._gantt.scenegraph.height;
-        return totalHeight !== 0 && deltaY <= 0 && state.scroll.verticalBarPos < 1;
+    function findRecordByTaskKey(records, taskKeyField, taskKey, childrenField = 'children') {
+        for (let i = 0; i < records.length; i++) {
+            if ((Array.isArray(taskKey) && taskKey.length === 1 && records[i][taskKeyField] === taskKey[0]) ||
+                records[i][taskKeyField] === taskKey) {
+                return { record: records[i], index: [i] };
+            }
+            else if (records[i][childrenField]?.length) {
+                if (Array.isArray(taskKey) && taskKey[0] === records[i][taskKeyField]) {
+                    const result = findRecordByTaskKey(records[i][childrenField], taskKeyField, taskKey.slice(1));
+                    if (result) {
+                        result.index.unshift(i);
+                        return result;
+                    }
+                }
+                else if (!Array.isArray(taskKey)) {
+                    const result = findRecordByTaskKey(records[i][childrenField], taskKeyField, taskKey);
+                    if (result) {
+                        result.index.unshift(i);
+                        return result;
+                    }
+                }
+            }
+        }
     }
-    function isScrollToBottom$1(deltaY, state) {
-        const totalHeight = state._gantt.getAllRowsHeight() - state._gantt.scenegraph.height;
-        return totalHeight !== 0 && deltaY >= 0 && Math.abs(state.scroll.verticalBarPos - totalHeight) < 1;
+    function clearRecordLinkInfos(records, childrenField = 'children') {
+        for (let i = 0; i < records.length; i++) {
+            if (records[i][childrenField]?.length) {
+                clearRecordLinkInfos(records[i][childrenField], childrenField);
+            }
+            else {
+                delete records[i].vtable_gantt_linkedTo;
+                delete records[i].vtable_gantt_linkedFrom;
+            }
+        }
     }
-    function isScrollToLeft$1(deltaX, state) {
-        const totalWidth = state._gantt.getAllDateColsWidth() - state._gantt.scenegraph.width;
-        return totalWidth !== 0 && deltaX <= 0 && state.scroll.horizontalBarPos < 1;
+    function clearRecordShowIndex(records, childrenField = 'children') {
+        for (let i = 0; i < records.length; i++) {
+            if (records[i][childrenField]?.length) {
+                clearRecordShowIndex(records[i][childrenField], childrenField);
+            }
+            else {
+                delete records[i].vtable_gantt_showIndex;
+            }
+        }
     }
-    function isScrollToRight$1(deltaX, state) {
-        const totalWidth = state._gantt.getAllDateColsWidth() - state._gantt.scenegraph.width;
-        return totalWidth !== 0 && deltaX >= 0 && Math.abs(state.scroll.horizontalBarPos - totalWidth) < 1;
+    function getTaskIndexsByTaskY(y, gantt) {
+        let task_index;
+        let sub_task_index;
+        if (gantt.taskListTableInstance) {
+            const rowInfo = gantt.taskListTableInstance.getTargetRowAt(y + gantt.headerHeight);
+            if (rowInfo) {
+                const { row } = rowInfo;
+                task_index = row - gantt.taskListTableInstance.columnHeaderLevelCount;
+                const beforeRowsHeight = gantt.getRowsHeightByIndex(0, task_index - 1);
+                if (gantt.parsedOptions.tasksShowMode === TasksShowMode.Sub_Tasks_Inline ||
+                    gantt.parsedOptions.tasksShowMode === TasksShowMode.Sub_Tasks_Arrange ||
+                    gantt.parsedOptions.tasksShowMode === TasksShowMode.Sub_Tasks_Compact ||
+                    gantt.parsedOptions.tasksShowMode === TasksShowMode.Sub_Tasks_Separate) {
+                    sub_task_index = Math.floor((y - beforeRowsHeight) / gantt.parsedOptions.rowHeight);
+                }
+            }
+        }
+        else {
+            task_index = Math.floor(y / gantt.parsedOptions.rowHeight);
+        }
+        return { task_index, sub_task_index };
     }
-    function bindScrollBarListener$1(eventManager) {
-        const table = eventManager._gantt;
-        const stateManager = table.stateManager;
-        const scenegraph = table.scenegraph;
-        scenegraph.scrollbarComponent.vScrollBar.addEventListener('pointerover', (e) => {
-            scenegraph.scrollbarComponent.showVerticalScrollBar();
-        });
-        scenegraph.scrollbarComponent.hScrollBar.addEventListener('pointerover', (e) => {
-            scenegraph.scrollbarComponent.showHorizontalScrollBar();
-        });
-        scenegraph.scrollbarComponent.vScrollBar.addEventListener('pointerout', (e) => {
-            if (stateManager.interactionState === InteractionState$1.scrolling) {
-                return;
+    function computeRowsCountByRecordDateForCompact(gantt, record) {
+        if (!record.children || record.children.length === 1) {
+            if (record.children?.length === 1) {
+                record.children[0].vtable_gantt_showIndex = 0;
             }
-            scenegraph.scrollbarComponent.hideVerticalScrollBar();
-        });
-        scenegraph.scrollbarComponent.hScrollBar.addEventListener('pointerout', (e) => {
-            if (stateManager.interactionState === InteractionState$1.scrolling) {
-                return;
+            else {
+                record.vtable_gantt_showIndex = 0;
             }
-            scenegraph.scrollbarComponent.hideHorizontalScrollBar();
-        });
-        scenegraph.scrollbarComponent.vScrollBar.addEventListener('pointermove', (e) => {
-            e.stopPropagation();
-        });
-        scenegraph.scrollbarComponent.vScrollBar.addEventListener('scrollDown', (e) => {
-            scenegraph._gantt.eventManager.isDown = true;
+            return 1;
+        }
+        const sortedChildren = record.children.slice().sort((a, b) => {
+            const { startDate: aStartDate } = formatRecordDateConsiderHasHour(gantt, a);
+            const { startDate: bStartDate } = formatRecordDateConsiderHasHour(gantt, b);
+            return aStartDate.getTime() - bStartDate.getTime();
         });
-        scenegraph.scrollbarComponent.vScrollBar.addEventListener('pointerup', () => {
-            scenegraph._gantt.eventManager.isDraging = false;
-            if (stateManager.interactionState === InteractionState$1.scrolling) {
-                stateManager.updateInteractionState(InteractionState$1.default);
+        const rows = [];
+        for (let i = 0; i <= sortedChildren.length - 1; i++) {
+            const newRecord = sortedChildren[i];
+            const { startDate, endDate } = formatRecordDateConsiderHasHour(gantt, newRecord);
+            let placed = false;
+            for (let j = 0; j < rows.length; j++) {
+                if (startDate.getTime() > rows[j]) {
+                    rows[j] = endDate.getTime();
+                    placed = true;
+                    newRecord.vtable_gantt_showIndex = j;
+                    break;
+                }
             }
-        });
-        scenegraph.scrollbarComponent.vScrollBar.addEventListener('pointerupoutside', () => {
-            if (stateManager.interactionState === InteractionState$1.scrolling) {
-                stateManager.updateInteractionState(InteractionState$1.default);
+            if (!placed) {
+                rows.push(endDate.getTime());
+                newRecord.vtable_gantt_showIndex = rows.length - 1;
             }
+        }
+        return rows.length;
+    }
+    function isOverlapping(startDate, endDate, rowTasks, gantt) {
+        return rowTasks.some(rowTask => {
+            const { startDate: startDate2, endDate: endDate2 } = formatRecordDateConsiderHasHour(gantt, rowTask);
+            return startDate <= endDate2 && startDate2 <= endDate;
         });
-        scenegraph.scrollbarComponent.vScrollBar.addEventListener('scrollUp', (e) => {
-            scenegraph._gantt.eventManager.isDraging = false;
-        });
-        scenegraph.scrollbarComponent.hScrollBar.addEventListener('pointermove', (e) => {
-            e.stopPropagation();
-        });
-        scenegraph.scrollbarComponent.hScrollBar.addEventListener('pointerdown', (e) => {
-            e.stopPropagation();
-        });
-        scenegraph.scrollbarComponent.hScrollBar.addEventListener('scrollDown', (e) => {
-            scenegraph._gantt.eventManager.isDown = true;
-            if (stateManager.interactionState !== InteractionState$1.scrolling) {
-                stateManager.updateInteractionState(InteractionState$1.scrolling);
+    }
+    function computeRowsCountByRecordDate(gantt, record) {
+        if (!record.children || record.children.length === 1) {
+            if (record.children?.length === 1) {
+                record.children[0].vtable_gantt_showIndex = 0;
             }
-        });
-        scenegraph.scrollbarComponent.hScrollBar.addEventListener('pointerup', () => {
-            if (stateManager.interactionState === InteractionState$1.scrolling) {
-                stateManager.updateInteractionState(InteractionState$1.default);
+            else {
+                record.vtable_gantt_showIndex = 0;
             }
-        });
-        scenegraph.scrollbarComponent.hScrollBar.addEventListener('pointerupoutside', () => {
-            if (stateManager.interactionState === InteractionState$1.scrolling) {
-                stateManager.updateInteractionState(InteractionState$1.default);
+            return 1;
+        }
+        const rows = [];
+        for (let i = 0; i <= record.children.length - 1; i++) {
+            const newRecord = record.children[i];
+            const { startDate, endDate } = formatRecordDateConsiderHasHour(gantt, newRecord);
+            let placed = false;
+            for (let j = 0; j < rows.length; j++) {
+                const rowTasks = record.children.filter((t) => t !== newRecord && t.vtable_gantt_showIndex === j);
+                if (!isOverlapping(startDate, endDate, rowTasks, gantt)) {
+                    rows[j] = endDate.getTime();
+                    placed = true;
+                    newRecord.vtable_gantt_showIndex = j;
+                    break;
+                }
             }
-        });
-        scenegraph.scrollbarComponent.hScrollBar.addEventListener('scrollUp', (e) => {
-            scenegraph._gantt.eventManager.isDraging = false;
-        });
-        const throttleVerticalWheel = throttle$1(stateManager.updateVerticalScrollBar, 20);
-        const throttleHorizontalWheel = throttle$1(stateManager.updateHorizontalScrollBar, 20);
-        scenegraph.scrollbarComponent.vScrollBar.addEventListener('scrollDrag', (e) => {
-            if (scenegraph._gantt.eventManager.isDown) {
-                scenegraph._gantt.eventManager.isDraging = true;
+            if (!placed) {
+                rows.push(endDate.getTime());
+                newRecord.vtable_gantt_showIndex = rows.length - 1;
             }
-            if (stateManager.interactionState !== InteractionState$1.scrolling) {
-                stateManager.updateInteractionState(InteractionState$1.scrolling);
+        }
+        return rows.length;
+    }
+    function formatRecordDateConsiderHasHour(gantt, record) {
+        const { timeScaleIncludeHour, startDateField, endDateField } = gantt.parsedOptions;
+        const startDate = record[startDateField];
+        const endDate = record[endDateField];
+        if (timeScaleIncludeHour) {
+            return { startDate: createDateAtMidnight(startDate), endDate: createDateAtLastHour(endDate) };
+        }
+        return { startDate: createDateAtMidnight(startDate, true), endDate: createDateAtLastHour(endDate, true) };
+    }
+    function updateOptionsWhenRecordChanged(gantt) {
+        const options = gantt.options;
+        const { unit: minTimeUnit, startOfWeek } = gantt.parsedOptions.reverseSortedTimelineScales[0];
+        gantt.parsedOptions.markLine = generateMarkLine(options?.markLine);
+        if (gantt.parsedOptions.markLine?.length ?? 0) {
+            if (gantt.parsedOptions.markLine?.every(item => item.scrollToMarkLine === undefined)) {
+                gantt.parsedOptions.markLine[0].scrollToMarkLine = true;
             }
-            const ratio = e.detail.value[0] / (1 - e.detail.value[1] + e.detail.value[0]);
-            throttleVerticalWheel(ratio, e);
-        });
-        scenegraph.scrollbarComponent.hScrollBar.addEventListener('scrollDrag', (e) => {
-            if (scenegraph._gantt.eventManager.isDown) {
-                scenegraph._gantt.eventManager.isDraging = true;
+            if (gantt.parsedOptions.markLine?.find(item => item.scrollToMarkLine)) {
+                gantt.parsedOptions.scrollToMarkLineDate = getStartDateByTimeUnit(new Date(gantt.parsedOptions.markLine?.find(item => item.scrollToMarkLine).date), minTimeUnit, startOfWeek);
             }
-            stateManager.fastScrolling = true;
-            if (stateManager.interactionState !== InteractionState$1.scrolling) {
-                stateManager.updateInteractionState(InteractionState$1.scrolling);
+        }
+        gantt.parsedOptions.dependencyLinks = options.dependency?.links;
+    }
+    function updateOptionsWhenDateRangeChanged(gantt) {
+        const options = gantt.options;
+        const { unit: minTimeUnit, startOfWeek, step } = gantt.parsedOptions.reverseSortedTimelineScales[0];
+        gantt.parsedOptions.minDate = options?.minDate
+            ? getStartDateByTimeUnit(new Date(options.minDate), minTimeUnit, startOfWeek)
+            : undefined;
+        gantt.parsedOptions.maxDate = options?.maxDate
+            ? getEndDateByTimeUnit(gantt.parsedOptions.minDate, new Date(options.maxDate), minTimeUnit, step)
+            : undefined;
+        gantt.parsedOptions._minDateTime = gantt.parsedOptions.minDate?.getTime();
+        gantt.parsedOptions._maxDateTime = gantt.parsedOptions.maxDate?.getTime();
+    }
+    function updateOptionsWhenMarkLineChanged(gantt) {
+        const options = gantt.options;
+        gantt.parsedOptions.markLine = generateMarkLine(options?.markLine);
+    }
+    function _getTaskInfoByXYForCreateSchedule(eventX, eventY, gantt) {
+        const taskIndex = getTaskIndexsByTaskY(eventY - gantt.headerHeight + gantt.stateManager.scrollTop, gantt);
+        const recordParent = gantt.getRecordByIndex(taskIndex.task_index);
+        const dateIndex = getDateIndexByX(eventX, gantt);
+        const dateRange = gantt.getDateRangeByIndex(dateIndex);
+        if (recordParent?.children) {
+            const taskIndex = getTaskIndexsByTaskY(eventY - gantt.headerHeight + gantt.stateManager.scrollTop, gantt);
+            for (let i = 0; i < recordParent.children.length; i++) {
+                const { startDate, endDate, taskDays, progress, taskRecord } = gantt.getTaskInfoByTaskListIndex(taskIndex.task_index, i);
+                if (((gantt.parsedOptions.tasksShowMode === TasksShowMode.Sub_Tasks_Compact ||
+                    gantt.parsedOptions.tasksShowMode === TasksShowMode.Sub_Tasks_Arrange) &&
+                    taskRecord.vtable_gantt_showIndex === taskIndex.sub_task_index) ||
+                    gantt.parsedOptions.tasksShowMode === TasksShowMode.Sub_Tasks_Inline) {
+                    if (dateRange.startDate.getTime() >= startDate.getTime() && dateRange.endDate.getTime() <= endDate.getTime()) {
+                        return { startDate, endDate, taskDays, progress, taskRecord };
+                    }
+                }
             }
-            const ratio = e.detail.value[0] / (1 - e.detail.value[1] + e.detail.value[0]);
-            throttleHorizontalWheel(ratio);
+        }
+    }
+    function getNodeClickPos(marklineIconNode, gantt) {
+        const left = marklineIconNode.globalTransMatrix.e +
+            gantt.taskListTableInstance.tableNoFrameWidth +
+            gantt.taskListTableInstance.tableX +
+            gantt.tableX;
+        const top = marklineIconNode.globalTransMatrix.f;
+        const width = marklineIconNode.attribute.width;
+        const height = marklineIconNode.attribute.height;
+        return {
+            left,
+            top,
+            width,
+            height
+        };
+    }
+    function judgeIfHasMarkLine(data, markLine) {
+        const beginTime = data.startDate.getTime();
+        const endTime = data.endDate.getTime();
+        return markLine.some(item => {
+            const marklineTime = new Date(item.date).getTime();
+            return marklineTime >= beginTime && marklineTime <= endTime;
         });
     }
 
@@ -36959,7 +36957,7 @@
     }
     function getCellCornerRadius(col, row, table) {
       const tableCornerRadius = table.theme.frameStyle.cornerRadius;
-      if (Array.isArray(tableCornerRadius)) {
+      if (table.theme.cellInnerBorder) if (Array.isArray(tableCornerRadius)) {
         if (0 === col && 0 === row) return [tableCornerRadius[0], 0, 0, 0];
         if (col === table.colCount - 1 && 0 === row) return [0, tableCornerRadius[1], 0, 0];
         if (0 === col && row === table.rowCount - 1) return [0, 0, 0, tableCornerRadius[3]];
@@ -42127,12 +42125,12 @@
         isWidthNumber = !Array.isArray(strokeArrayWidth),
         isStrokeTrue = !Array.isArray(stroke),
         isSplitDraw = Array.isArray(strokeArrayColor) || widthInfo.isSplitDraw;
-      context.setStrokeStyle(rect, rect.attribute, x, y, rectAttribute);
+      context.stroke(), context.setStrokeStyle(rect, rect.attribute, x, y, rectAttribute);
       const {
         lineDash = groupAttribute.lineDash
       } = group.attribute;
       let isDash = !1;
-      lineDash.length && lineDash.some(dash => Array.isArray(dash)) && (isDash = !0), context.moveTo(x, y);
+      lineDash.length && lineDash.some(dash => Array.isArray(dash)) && (isDash = !0), context.beginPath(), context.moveTo(x, y);
       const strokeTop = (isStrokeTrue || stroke[0]) && (isWidthNumber || strokeArrayWidth[0]),
         strokeRight = (isStrokeTrue || stroke[1]) && (isWidthNumber || strokeArrayWidth[1]),
         strokeBottom = (isStrokeTrue || stroke[2]) && (isWidthNumber || strokeArrayWidth[2]),
@@ -42153,7 +42151,7 @@
         isWidthNumber ? widthInfo.width : strokeArrayWidth[3], isWidthNumber ? widthInfo.width : strokeArrayWidth[3];
         context.moveTo(x1, y1), context.lineTo(x2, y2), (isSplitDraw || isDash) && (strokeArrayColor && strokeArrayColor[3] ? context.strokeStyle = strokeArrayColor[3] : strokeArrayColor && !strokeArrayColor[3] && (context.strokeStyle = "transparent"), isWidthNumber || (context.lineWidth = strokeArrayWidth[3]), context.lineDashOffset = context.currentMatrix.f / context.currentMatrix.d, isDash && context.setLineDash(null !== (_d = lineDash[3]) && void 0 !== _d ? _d : []), context.stroke(), context.beginPath(), context.moveTo(x, y));
       } else 3 === i && context.moveTo(x, y);
-      isSplitDraw || isDash || (!isWidthNumber && widthInfo.width && (context.lineWidth = widthInfo.width), context.stroke()), context.lineDashOffset = 0, context.setLineDash([]), context.closePath();
+      context.closePath(), isSplitDraw || isDash || (!isWidthNumber && widthInfo.width && (context.lineWidth = widthInfo.width), context.stroke()), context.lineDashOffset = 0, context.setLineDash([]), context.beginPath();
     }
 
     var __decorate$1 = undefined && undefined.__decorate || function (decorators, target, key, desc) {
@@ -43537,7 +43535,7 @@
     };
     class SceneProxy {
       constructor(table) {
-        this.isRelease = !1, this.mode = "column", this.rowLimit = 200, this.currentRow = 0, this.rowStart = 0, this.rowEnd = 0, this.referenceRow = 0, this.screenTopRow = 0, this.deltaY = 0, this.deltaHeight = 0, this.colLimit = 100, this.screenLeftCol = 0, this.deltaX = 0, this.deltaWidth = 0, this.cellCache = new Map(), this.table = table, this.table.isPivotChart() ? (this.rowLimit = Math.max(100, Math.ceil(2 * table.tableNoFrameHeight / table.defaultRowHeight)), this.colLimit = Math.max(100, Math.ceil(2 * table.tableNoFrameWidth / table.defaultColWidth))) : this.table.isAutoRowHeight() ? this.rowLimit = Math.max(100, Math.ceil(2 * table.tableNoFrameHeight / table.defaultRowHeight)) : ("autoWidth" === this.table.widthMode || (this.rowLimit = Math.max(200, Math.ceil(2 * table.tableNoFrameHeight / table.defaultRowHeight))), this.colLimit = Math.max(100, Math.ceil(2 * table.tableNoFrameWidth / table.defaultColWidth))), this.table.internalProps.transpose ? this.mode = "row" : this.table.isPivotTable() && (this.mode = "pivot"), this.table.options.maintainedDataCount && (this.rowLimit = this.table.options.maintainedDataCount);
+        this.isRelease = !1, this.mode = "column", this.rowLimit = 200, this.currentRow = 0, this.rowStart = 0, this.rowEnd = 0, this.referenceRow = 0, this.screenTopRow = 0, this.deltaY = 0, this.deltaHeight = 0, this.colLimit = 100, this.screenLeftCol = 0, this.deltaX = 0, this.deltaWidth = 0, this.cellCache = new Map(), this.table = table, this.table.isPivotChart() ? (this.rowLimit = Math.max(100, Math.ceil(2 * table.tableNoFrameHeight / table.defaultRowHeight)), this.colLimit = Math.max(100, Math.ceil(2 * table.tableNoFrameWidth / table.defaultColWidth))) : this.table.isAutoRowHeight() ? this.rowLimit = Math.max(100, Math.ceil(2 * table.tableNoFrameHeight / table.defaultRowHeight)) : ("autoWidth" === this.table.widthMode || (this.rowLimit = Math.max(200, Math.ceil(2 * table.tableNoFrameHeight / table.defaultRowHeight))), this.colLimit = Math.max(100, Math.ceil(2 * table.tableNoFrameWidth / table.defaultColWidth))), this.table.internalProps.transpose ? this.mode = "row" : this.table.isPivotTable() && (this.mode = "pivot"), this.table.options.maintainedDataCount && (this.rowLimit = this.table.options.maintainedDataCount), this.table.options.maintainedColumnCount && (this.colLimit = this.table.options.maintainedColumnCount);
       }
       get bodyLeftCol() {
         return this.table.frozenColCount;
@@ -44044,7 +44042,7 @@
         }
         isExtend && extendSelectRange();
       };
-      ifExtendSelectRange && extendSelectRange(), scene.selectingRangeComponents.forEach((selectComp, key) => {
+      ifExtendSelectRange && (extendSelectRange(), selectRange.start.col > selectRange.end.col ? (selectRange.start.col = Math.max(startCol, endCol), selectRange.end.col = Math.min(startCol, endCol)) : (selectRange.start.col = Math.min(startCol, endCol), selectRange.end.col = Math.max(startCol, endCol)), selectRange.start.row > selectRange.end.row ? (selectRange.start.row = Math.max(startRow, endRow), selectRange.end.row = Math.min(startRow, endRow)) : (selectRange.start.row = Math.min(startRow, endRow), selectRange.end.row = Math.max(startRow, endRow))), scene.selectingRangeComponents.forEach((selectComp, key) => {
         var _a;
         selectComp.rect.delete(), null === (_a = selectComp.fillhandle) || void 0 === _a || _a.delete();
       }), scene.selectingRangeComponents = new Map();
@@ -44134,7 +44132,7 @@
     }
 
     function createCellSelectBorder(scene, start_Col, start_Row, end_Col, end_Row, selectRangeType, selectId, strokes) {
-      var _a, _b, _c, _d, _e, _f, _g, _h;
+      var _a, _b, _c, _d, _e, _f, _g, _h, _j;
       let isHasFillHandleRect = !!(null === (_a = scene.table.options.excelOptions) || void 0 === _a ? void 0 : _a.fillHandle);
       if ((null === (_b = scene.table.stateManager.select.ranges) || void 0 === _b ? void 0 : _b.length) > 1) isHasFillHandleRect = !1, scene.removeFillHandleFromSelectComponents();else if (1 === (null === (_c = scene.table.stateManager.select.ranges) || void 0 === _c ? void 0 : _c.length)) {
         const maxRow = Math.max(scene.table.stateManager.select.ranges[0].start.row, scene.table.stateManager.select.ranges[0].end.row),
@@ -44160,7 +44158,8 @@
           y: firstCellBound.y1 - scene.tableGroup.attribute.y,
           width: 0,
           height: 0,
-          visible: !0
+          visible: !0,
+          cornerRadius: getCornerRadius(selectRangeType, null === (_j = scene.table.theme.frameStyle) || void 0 === _j ? void 0 : _j.cornerRadius, start_Col, start_Row, end_Col, end_Row, scene.table)
         });
       let fillhandle;
       isHasFillHandleRect && (fillhandle = createRect({
@@ -44178,6 +44177,15 @@
         role: selectRangeType
       }), scene.tableGroup.insertAfter(rect, "body" === selectRangeType ? scene.bodyGroup : "columnHeader" === selectRangeType ? scene.colHeaderGroup : "rowHeader" === selectRangeType ? scene.rowHeaderGroup : "cornerHeader" === selectRangeType ? scene.cornerHeaderGroup : "rightTopCorner" === selectRangeType ? scene.rightTopCornerGroup : "rightFrozen" === selectRangeType ? scene.rightFrozenGroup : "leftBottomCorner" === selectRangeType ? scene.leftBottomCornerGroup : "bottomFrozen" === selectRangeType ? scene.bottomFrozenGroup : scene.rightBottomCornerGroup), isHasFillHandleRect && scene.tableGroup.insertAfter(fillhandle, "body" === selectRangeType ? scene.bodyGroup : "columnHeader" === selectRangeType ? scene.colHeaderGroup : "rowHeader" === selectRangeType ? scene.rowHeaderGroup : "cornerHeader" === selectRangeType ? scene.cornerHeaderGroup : "rightTopCorner" === selectRangeType ? scene.rightTopCornerGroup : "rightFrozen" === selectRangeType ? scene.rightFrozenGroup : "leftBottomCorner" === selectRangeType ? scene.leftBottomCornerGroup : "bottomFrozen" === selectRangeType ? scene.bottomFrozenGroup : scene.rightBottomCornerGroup);
     }
+    function getCornerRadius(selectRangeType, cornerRadius, start_Col, start_Row, end_Col, end_Row, table) {
+      if (!cornerRadius) return;
+      const cornerRadiusArray = Array.isArray(cornerRadius) ? cornerRadius : [cornerRadius, cornerRadius, cornerRadius, cornerRadius],
+        tableEndCol = table.colCount - 1,
+        tableEndRow = table.rowCount - 1,
+        result = [0, 0, 0, 0];
+      let changed = !1;
+      return 0 === start_Col && 0 === start_Row ? (result[0] = cornerRadiusArray[0], changed = !0) : end_Col === tableEndCol && end_Row === tableEndRow ? (result[2] = cornerRadiusArray[2], changed = !0) : 0 === start_Col && end_Row === tableEndRow ? (result[3] = cornerRadiusArray[3], changed = !0) : end_Col === tableEndCol && 0 === start_Row && (result[1] = cornerRadiusArray[1], changed = !0), changed ? result : void 0;
+    }
 
     function moveSelectingRangeComponentsToSelectedRangeComponents(scene) {
       scene.selectingRangeComponents.forEach((rangeComponent, key) => {
@@ -44273,7 +44281,7 @@
           const minRow = Math.min(...addRows);
           scene.proxy.rowUpdatePos = Math.min(minRow, scene.proxy.rowUpdatePos);
         }
-        scene.proxy.rowUpdateDirection = "down", scene.proxy.updateCellGroups(2 * scene.proxy.screenRowCount), updateBottomFrozeCellGroups();
+        scene.proxy.rowUpdateDirection = "up", scene.proxy.updateCellGroups(2 * scene.proxy.screenRowCount), updateBottomFrozeCellGroups();
       } else removeRows.length && (setRowSeriesNumberCellNeedUpdate(removeRows[removeRows.length - 1], scene), scene.proxy.updateCellGroups(2 * scene.proxy.screenRowCount), updateBottomFrozeCellGroups());
       scene.proxy.progress();
       const newTotalHeight = table.getRowsHeight(table.frozenRowCount, table.rowCount - 1 - table.bottomFrozenRowCount);
@@ -44540,7 +44548,7 @@
     }
 
     function dealFrozen(scene) {
-      var _a, _b;
+      var _a, _b, _c, _d;
       if (scene.table.frozenColCount > scene.table.rowHeaderLevelCount) {
         scene.rowHeaderGroup.setAttribute("height", scene.bodyGroup.attribute.height), scene.rowHeaderGroup.setAttribute("y", scene.bodyGroup.attribute.y), scene.cornerHeaderGroup.setAttribute("height", scene.colHeaderGroup.attribute.height);
         for (let i = 0; i < scene.table.frozenColCount - scene.table.rowHeaderLevelCount; i++) moveColumnFromBodyToRowHeader(scene), moveColumnFromColHeaderToCornerHeader(scene), moveColumnFromBottomToLeftBottomCorner(scene);
@@ -44548,10 +44556,10 @@
         scene.bodyGroup.setAttribute("height", scene.rowHeaderGroup.attribute.height), scene.bodyGroup.setAttribute("y", scene.rowHeaderGroup.attribute.y), scene.colHeaderGroup.setAttribute("height", scene.cornerHeaderGroup.attribute.height);
         for (let i = 0; i < scene.table.rowHeaderLevelCount - scene.table.frozenColCount; i++) moveColumnFromRowHeaderToBody(scene), moveColumnFromCornerHeaderToColHeader(scene), moveColumnFromLeftBottomCornerToBottom(scene);
       }
-      scene.bodyGroup.setAttribute("x", scene.rowHeaderGroup.attribute.width), scene.colHeaderGroup.setAttribute("x", scene.cornerHeaderGroup.attribute.width), scene.updateContainer(), scene.updateBorderSizeAndPosition(), scene.isPivot || scene.table.transpose ? scene.table.options.frozenColCount ? scene.component.setFrozenColumnShadow(scene.table.frozenColCount - 1) : scene.table.options.frozenColCount && scene.component.setRightFrozenColumnShadow(scene.table.colCount - scene.table.rightFrozenColCount) : (scene.component.setFrozenColumnShadow(scene.table.frozenColCount - 1), scene.component.setRightFrozenColumnShadow(scene.table.colCount - scene.table.rightFrozenColCount)), scene.hasFrozen = !0, scene.frozenColCount = scene.table.frozenColCount, scene.frozenRowCount = null !== (_b = null === (_a = scene.colHeaderGroup.firstChild) || void 0 === _a ? void 0 : _a.childrenCount) && void 0 !== _b ? _b : 0;
+      scene.bodyGroup.setAttribute("x", scene.rowHeaderGroup.attribute.width), scene.colHeaderGroup.setAttribute("x", scene.cornerHeaderGroup.attribute.width), scene.updateContainer(), scene.updateBorderSizeAndPosition(), scene.isPivot || scene.table.transpose ? scene.table.options.frozenColCount ? scene.component.setFrozenColumnShadow(scene.table.frozenColCount - 1) : scene.table.options.frozenColCount && scene.component.setRightFrozenColumnShadow(scene.table.colCount - scene.table.rightFrozenColCount) : (scene.component.setFrozenColumnShadow(scene.table.frozenColCount - 1), scene.component.setRightFrozenColumnShadow(scene.table.colCount - scene.table.rightFrozenColCount)), scene.hasFrozen = !0, scene.frozenColCount = scene.table.frozenColCount, scene.frozenRowCount = null !== (_d = null !== (_b = null === (_a = scene.colHeaderGroup.firstChild) || void 0 === _a ? void 0 : _a.childrenCount) && void 0 !== _b ? _b : null === (_c = scene.cornerHeaderGroup.firstChild) || void 0 === _c ? void 0 : _c.childrenCount) && void 0 !== _d ? _d : scene.table.frozenRowCount;
     }
     function resetFrozen(scene) {
-      var _a, _b, _c, _d;
+      var _a, _b, _c, _d, _e, _f;
       if (scene.frozenColCount > scene.table.frozenColCount) {
         scene.bodyGroup.setAttribute("height", scene.rowHeaderGroup.attribute.height), scene.bodyGroup.setAttribute("y", scene.rowHeaderGroup.attribute.y), scene.colHeaderGroup.setAttribute("height", scene.cornerHeaderGroup.attribute.height);
         for (let i = 0; i < scene.frozenColCount - scene.table.frozenColCount; i++) moveColumnFromRowHeaderToBody(scene), moveColumnFromCornerHeaderToColHeader(scene), moveColumnFromLeftBottomCornerToBottom(scene);
@@ -44559,7 +44567,7 @@
         scene.rowHeaderGroup.setAttribute("height", scene.bodyGroup.attribute.height), scene.rowHeaderGroup.setAttribute("y", scene.bodyGroup.attribute.y), scene.cornerHeaderGroup.setAttribute("height", scene.colHeaderGroup.attribute.height);
         for (let i = 0; i < scene.table.frozenColCount - scene.frozenColCount; i++) moveColumnFromBodyToRowHeader(scene), moveColumnFromColHeaderToCornerHeader(scene), moveColumnFromBottomToLeftBottomCorner(scene);
       }
-      updateReactComponentContainer(scene), scene.recreateAllSelectRangeComponents(), scene.frozenColCount = scene.table.frozenColCount, scene.frozenRowCount = null !== (_b = null === (_a = scene.colHeaderGroup.firstChild) || void 0 === _a ? void 0 : _a.childrenCount) && void 0 !== _b ? _b : 0, scene.proxy.colStart = null !== (_d = null === (_c = scene.bodyGroup.firstChild) || void 0 === _c ? void 0 : _c.col) && void 0 !== _d ? _d : scene.table.frozenColCount, scene.bodyGroup.setAttribute("x", scene.rowHeaderGroup.attribute.width), scene.colHeaderGroup.setAttribute("x", scene.cornerHeaderGroup.attribute.width), scene.updateContainer(), scene.updateBorderSizeAndPosition(), scene.isPivot || scene.table.transpose ? scene.table.options.frozenColCount ? scene.component.setFrozenColumnShadow(scene.table.frozenColCount - 1) : scene.table.options.rightFrozenColCount && scene.component.setRightFrozenColumnShadow(scene.table.colCount - scene.table.rightFrozenColCount) : (scene.component.setFrozenColumnShadow(scene.table.frozenColCount - 1), scene.component.setRightFrozenColumnShadow(scene.table.colCount - scene.table.rightFrozenColCount)), scene.hasFrozen = !0;
+      updateReactComponentContainer(scene), scene.recreateAllSelectRangeComponents(), scene.frozenColCount = scene.table.frozenColCount, scene.frozenRowCount = null !== (_d = null !== (_b = null === (_a = scene.colHeaderGroup.firstChild) || void 0 === _a ? void 0 : _a.childrenCount) && void 0 !== _b ? _b : null === (_c = scene.cornerHeaderGroup.firstChild) || void 0 === _c ? void 0 : _c.childrenCount) && void 0 !== _d ? _d : scene.table.frozenRowCount, scene.proxy.colStart = null !== (_f = null === (_e = scene.bodyGroup.firstChild) || void 0 === _e ? void 0 : _e.col) && void 0 !== _f ? _f : scene.table.frozenColCount, scene.bodyGroup.setAttribute("x", scene.rowHeaderGroup.attribute.width), scene.colHeaderGroup.setAttribute("x", scene.cornerHeaderGroup.attribute.width), scene.updateContainer(), scene.updateBorderSizeAndPosition(), scene.isPivot || scene.table.transpose ? scene.table.options.frozenColCount ? scene.component.setFrozenColumnShadow(scene.table.frozenColCount - 1) : scene.table.options.rightFrozenColCount && scene.component.setRightFrozenColumnShadow(scene.table.colCount - scene.table.rightFrozenColCount) : (scene.component.setFrozenColumnShadow(scene.table.frozenColCount - 1), scene.component.setRightFrozenColumnShadow(scene.table.colCount - scene.table.rightFrozenColCount)), scene.hasFrozen = !0;
     }
     function moveColumnFromBodyToRowHeader(scene) {
       const column = scene.bodyGroup.firstChild instanceof Group$1 ? scene.bodyGroup.firstChild : null;
@@ -46411,7 +46419,7 @@
                 } : table.getCellRange(col, row);
                 currentRange.start.col < cellRange.end.col ? currentRange.end.col = cellRange.end.col : currentRange.start.col > cellRange.start.col && (currentRange.end.col = cellRange.start.col), currentRange.start.row < cellRange.end.row ? currentRange.end.row = cellRange.end.row : currentRange.start.row > cellRange.start.row && (currentRange.end.row = cellRange.start.row), "body" === state.select.headerSelectMode && (table.isRowHeader(col, row) ? (currentRange.start.col = table.rowHeaderLevelCount + table.leftRowSeriesNumberCount, currentRange.end.col = table.colCount - 1) : table.isColumnHeader(col, row) ? (currentRange.start.row = table.columnHeaderLevelCount, currentRange.end.row = table.rowCount - 1) : table.internalProps.layoutMap.isSeriesNumberInBody(col, row) ? (currentRange.start.col = table.leftRowSeriesNumberCount, currentRange.end.col = table.colCount - 1) : table.isCornerHeader(col, row) ? (currentRange.start.col = table.rowHeaderLevelCount + table.leftRowSeriesNumberCount, currentRange.start.row = table.columnHeaderLevelCount, currentRange.end.col = table.colCount - 1, currentRange.end.row = table.rowCount - 1) : table.isSeriesNumber(col, row) && (currentRange.start.col = table.leftRowSeriesNumberCount, currentRange.start.row = table.columnHeaderLevelCount, currentRange.end.col = table.colCount - 1, currentRange.end.row = table.rowCount - 1)), skipBodyMerge && (currentRange.skipBodyMerge = !0);
               }
-              scenegraph.updateCellSelectBorder(currentRange, extendSelectRange);
+              currentRange && currentRange.start.row <= table.rowCount - 1 && currentRange.end.row <= table.rowCount - 1 && currentRange.start.col <= table.colCount - 1 && currentRange.end.col <= table.colCount - 1 && scenegraph.updateCellSelectBorder(currentRange, extendSelectRange);
             }
           }
         } else {
@@ -46609,7 +46617,7 @@
             }
             cellPos.col = col, cellPos.row = row;
             const currentRange = null === (_b = state.select.ranges) || void 0 === _b ? void 0 : _b[state.select.ranges.length - 1];
-            currentRange && scenegraph.updateCellSelectBorder(currentRange, extendSelectRange);
+            currentRange && currentRange.start.row <= table.rowCount - 1 && currentRange.end.row <= table.rowCount - 1 && currentRange.start.col <= table.colCount - 1 && currentRange.end.col <= table.colCount - 1 && scenegraph.updateCellSelectBorder(currentRange, extendSelectRange);
           }
         }
       } else cellPos.col = -1, cellPos.row = -1, state.select.ranges = [], scenegraph.deleteAllSelectBorder();
@@ -47672,76 +47680,108 @@
         var _a, _b;
         const totalHeight = this.table.getAllRowsHeight(),
           oldVerticalBarPos = this.scroll.verticalBarPos;
-        this.scroll.verticalBarPos = Math.ceil(yRatio * (totalHeight - this.table.scenegraph.height)), isValid$3(this.scroll.verticalBarPos) && !isNaN(this.scroll.verticalBarPos) || (this.scroll.verticalBarPos = 0), this.table.scenegraph.setY(-this.scroll.verticalBarPos, 1 === yRatio), this.scroll.verticalBarPos -= this.table.scenegraph.proxy.deltaY, this.table.scenegraph.proxy.deltaY = 0, this.updateHoverPos(-1, -1), this.table.fireListeners(TABLE_EVENT_TYPE.SCROLL, {
+        let verticalBarPos = Math.ceil(yRatio * (totalHeight - this.table.scenegraph.height));
+        isValid$3(verticalBarPos) && !isNaN(verticalBarPos) || (verticalBarPos = 0);
+        const dy = verticalBarPos - this.table.scenegraph.proxy.deltaY - oldVerticalBarPos;
+        if (this.table.fireListeners(TABLE_EVENT_TYPE.SCROLL, {
           event: void 0,
-          scrollTop: this.scroll.verticalBarPos,
+          scrollTop: verticalBarPos - this.table.scenegraph.proxy.deltaY,
           scrollLeft: this.scroll.horizontalBarPos,
           scrollHeight: null === (_a = this.table.theme.scrollStyle) || void 0 === _a ? void 0 : _a.width,
           scrollWidth: null === (_b = this.table.theme.scrollStyle) || void 0 === _b ? void 0 : _b.width,
           viewHeight: this.table.tableNoFrameHeight,
           viewWidth: this.table.tableNoFrameWidth,
           scrollDirection: "vertical",
-          scrollRatioY: yRatio
-        }), oldVerticalBarPos !== this.scroll.verticalBarPos && this.checkVerticalScrollBarEnd();
+          scrollRatioY: yRatio,
+          dy: dy
+        }).some(value => !1 === value)) {
+          const yRatio = this.scroll.verticalBarPos / (totalHeight - this.table.scenegraph.height);
+          this.table.scenegraph.component.updateVerticalScrollBarPos(yRatio);
+        } else this.scroll.verticalBarPos = verticalBarPos, this.table.scenegraph.setY(-this.scroll.verticalBarPos, 1 === yRatio), this.scroll.verticalBarPos -= this.table.scenegraph.proxy.deltaY, this.table.scenegraph.proxy.deltaY = 0, this.updateHoverPos(-1, -1), oldVerticalBarPos !== this.scroll.verticalBarPos && this.checkVerticalScrollBarEnd();
       }
       updateHorizontalScrollBar(xRatio) {
         var _a, _b;
         const totalWidth = this.table.getAllColsWidth(),
           oldHorizontalBarPos = this.scroll.horizontalBarPos;
-        this.scroll.horizontalBarPos = Math.ceil(xRatio * (totalWidth - this.table.scenegraph.width)), isValid$3(this.scroll.horizontalBarPos) && !isNaN(this.scroll.horizontalBarPos) || (this.scroll.horizontalBarPos = 0), this.table.scenegraph.setX(-this.scroll.horizontalBarPos, 1 === xRatio), this.scroll.horizontalBarPos -= this.table.scenegraph.proxy.deltaX, this.table.scenegraph.proxy.deltaX = 0, this.updateHoverPos(-1, -1), this.table.fireListeners(TABLE_EVENT_TYPE.SCROLL, {
+        let horizontalBarPos = Math.ceil(xRatio * (totalWidth - this.table.scenegraph.width));
+        isValid$3(horizontalBarPos) && !isNaN(horizontalBarPos) || (horizontalBarPos = 0);
+        const dx = horizontalBarPos - this.table.scenegraph.proxy.deltaX - oldHorizontalBarPos;
+        if (this.table.fireListeners(TABLE_EVENT_TYPE.SCROLL, {
           event: void 0,
           scrollTop: this.scroll.verticalBarPos,
-          scrollLeft: this.scroll.horizontalBarPos,
+          scrollLeft: horizontalBarPos - this.table.scenegraph.proxy.deltaX,
           scrollHeight: null === (_a = this.table.theme.scrollStyle) || void 0 === _a ? void 0 : _a.width,
           scrollWidth: null === (_b = this.table.theme.scrollStyle) || void 0 === _b ? void 0 : _b.width,
           viewHeight: this.table.tableNoFrameHeight,
           viewWidth: this.table.tableNoFrameWidth,
           scrollDirection: "horizontal",
-          scrollRatioX: xRatio
-        }), oldHorizontalBarPos !== this.scroll.horizontalBarPos && this.checkHorizontalScrollBarEnd();
+          scrollRatioX: xRatio,
+          dx: dx
+        }).some(value => !1 === value)) {
+          const xRatio = this.scroll.horizontalBarPos / (totalWidth - this.table.scenegraph.width);
+          this.table.scenegraph.component.updateHorizontalScrollBarPos(xRatio);
+        } else this.scroll.horizontalBarPos = horizontalBarPos, this.table.scenegraph.setX(-this.scroll.horizontalBarPos, 1 === xRatio), this.scroll.horizontalBarPos -= this.table.scenegraph.proxy.deltaX, this.table.scenegraph.proxy.deltaX = 0, this.updateHoverPos(-1, -1), oldHorizontalBarPos !== this.scroll.horizontalBarPos && this.checkHorizontalScrollBarEnd();
       }
       setScrollTop(top, event) {
         let triggerEvent = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : !0;
-        var _a, _b, _c;
+        var _a, _b, _c, _d, _e;
         const totalHeight = this.table.getAllRowsHeight(),
           sizeTolerance = (null === (_a = this.table.options.customConfig) || void 0 === _a ? void 0 : _a._disableColumnAndRowSizeRound) ? 1 : 0;
-        top = Math.max(0, Math.min(top, totalHeight - this.table.scenegraph.height - sizeTolerance)), ((top = Math.ceil(top)) !== this.scroll.verticalBarPos || this.table.isPivotChart()) && this.updateHoverPos(-1, -1);
-        const oldVerticalBarPos = this.scroll.verticalBarPos;
-        this.scroll.verticalBarPos = top, isValid$3(this.scroll.verticalBarPos) && !isNaN(this.scroll.verticalBarPos) || (this.scroll.verticalBarPos = 0), this.table.scenegraph.setY(-top);
-        const yRatio = top / (totalHeight - this.table.scenegraph.height);
-        this.table.scenegraph.component.updateVerticalScrollBarPos(yRatio), oldVerticalBarPos !== top && triggerEvent && (this.table.fireListeners(TABLE_EVENT_TYPE.SCROLL, {
-          event: null == event ? void 0 : event.nativeEvent,
-          scrollTop: this.scroll.verticalBarPos,
-          scrollLeft: this.scroll.horizontalBarPos,
-          scrollHeight: null === (_b = this.table.theme.scrollStyle) || void 0 === _b ? void 0 : _b.width,
-          scrollWidth: null === (_c = this.table.theme.scrollStyle) || void 0 === _c ? void 0 : _c.width,
-          viewHeight: this.table.tableNoFrameHeight,
-          viewWidth: this.table.tableNoFrameWidth,
-          scrollDirection: "vertical",
-          scrollRatioY: yRatio
-        }), this.checkVerticalScrollBarEnd());
+        top = Math.max(0, Math.min(top, totalHeight - this.table.scenegraph.height - sizeTolerance)), top = Math.ceil(top);
+        const oldVerticalBarPos = this.scroll.verticalBarPos,
+          yRatio = top / (totalHeight - this.table.scenegraph.height);
+        if ((oldVerticalBarPos !== top || !0 === (null === (_c = null === (_b = this.table.options) || void 0 === _b ? void 0 : _b.customConfig) || void 0 === _c ? void 0 : _c.scrollEventAlwaysTrigger)) && triggerEvent) {
+          let verticalBarPos = top;
+          isValid$3(verticalBarPos) && !isNaN(verticalBarPos) || (verticalBarPos = 0);
+          const dy = verticalBarPos - oldVerticalBarPos;
+          if (this.table.fireListeners(TABLE_EVENT_TYPE.SCROLL, {
+            event: null == event ? void 0 : event.nativeEvent,
+            scrollTop: verticalBarPos,
+            scrollLeft: this.scroll.horizontalBarPos,
+            scrollHeight: null === (_d = this.table.theme.scrollStyle) || void 0 === _d ? void 0 : _d.width,
+            scrollWidth: null === (_e = this.table.theme.scrollStyle) || void 0 === _e ? void 0 : _e.width,
+            viewHeight: this.table.tableNoFrameHeight,
+            viewWidth: this.table.tableNoFrameWidth,
+            scrollDirection: "vertical",
+            scrollRatioY: yRatio,
+            dy: dy
+          }).some(value => !1 === value)) {
+            const yRatio = this.scroll.verticalBarPos / (totalHeight - this.table.scenegraph.height);
+            return void this.table.scenegraph.component.updateVerticalScrollBarPos(yRatio);
+          }
+        }
+        (top !== this.scroll.verticalBarPos || this.table.isPivotChart()) && this.updateHoverPos(-1, -1), this.scroll.verticalBarPos = top, isValid$3(this.scroll.verticalBarPos) && !isNaN(this.scroll.verticalBarPos) || (this.scroll.verticalBarPos = 0), this.table.scenegraph.setY(-top), this.table.scenegraph.component.updateVerticalScrollBarPos(yRatio), oldVerticalBarPos !== top && triggerEvent && this.checkVerticalScrollBarEnd();
       }
       setScrollLeft(left, event) {
         let triggerEvent = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : !0;
-        var _a, _b, _c;
+        var _a, _b, _c, _d, _e;
         this.table.scrollLeft;
         const totalWidth = this.table.getAllColsWidth(),
           sizeTolerance = (this.table.getFrozenColsWidth(), (null === (_a = this.table.options.customConfig) || void 0 === _a ? void 0 : _a._disableColumnAndRowSizeRound) ? 1 : 0);
-        left = Math.max(0, Math.min(left, totalWidth - this.table.scenegraph.width - sizeTolerance)), (left = Math.ceil(left)) !== this.scroll.horizontalBarPos && this.updateHoverPos(-1, -1);
-        const oldHorizontalBarPos = this.scroll.horizontalBarPos;
-        this.scroll.horizontalBarPos = left, isValid$3(this.scroll.horizontalBarPos) && !isNaN(this.scroll.horizontalBarPos) || (this.scroll.horizontalBarPos = 0), this.table.scenegraph.setX(-left);
-        const xRatio = left / (totalWidth - this.table.scenegraph.width);
-        this.table.scenegraph.component.updateHorizontalScrollBarPos(xRatio), oldHorizontalBarPos !== left && triggerEvent && (this.table.fireListeners(TABLE_EVENT_TYPE.SCROLL, {
-          event: null == event ? void 0 : event.nativeEvent,
-          scrollTop: this.scroll.verticalBarPos,
-          scrollLeft: this.scroll.horizontalBarPos,
-          scrollHeight: null === (_b = this.table.theme.scrollStyle) || void 0 === _b ? void 0 : _b.width,
-          scrollWidth: null === (_c = this.table.theme.scrollStyle) || void 0 === _c ? void 0 : _c.width,
-          viewHeight: this.table.tableNoFrameHeight,
-          viewWidth: this.table.tableNoFrameWidth,
-          scrollDirection: "horizontal",
-          scrollRatioX: xRatio
-        }), this.checkHorizontalScrollBarEnd());
+        left = Math.max(0, Math.min(left, totalWidth - this.table.scenegraph.width - sizeTolerance)), left = Math.ceil(left);
+        const oldHorizontalBarPos = this.scroll.horizontalBarPos,
+          xRatio = left / (totalWidth - this.table.scenegraph.width);
+        if ((oldHorizontalBarPos !== left || !0 === (null === (_c = null === (_b = this.table.options) || void 0 === _b ? void 0 : _b.customConfig) || void 0 === _c ? void 0 : _c.scrollEventAlwaysTrigger)) && triggerEvent) {
+          let horizontalBarPos = left;
+          isValid$3(horizontalBarPos) && !isNaN(horizontalBarPos) || (horizontalBarPos = 0);
+          const dx = horizontalBarPos - oldHorizontalBarPos;
+          if (this.table.fireListeners(TABLE_EVENT_TYPE.SCROLL, {
+            event: null == event ? void 0 : event.nativeEvent,
+            scrollTop: this.scroll.verticalBarPos,
+            scrollLeft: horizontalBarPos,
+            scrollHeight: null === (_d = this.table.theme.scrollStyle) || void 0 === _d ? void 0 : _d.width,
+            scrollWidth: null === (_e = this.table.theme.scrollStyle) || void 0 === _e ? void 0 : _e.width,
+            viewHeight: this.table.tableNoFrameHeight,
+            viewWidth: this.table.tableNoFrameWidth,
+            scrollDirection: "horizontal",
+            scrollRatioX: xRatio,
+            dx: dx
+          }).some(value => !1 === value)) {
+            const xRatio = this.scroll.horizontalBarPos / (totalWidth - this.table.scenegraph.width);
+            return void this.table.scenegraph.component.updateHorizontalScrollBarPos(xRatio);
+          }
+        }
+        left !== this.scroll.horizontalBarPos && this.updateHoverPos(-1, -1), this.scroll.horizontalBarPos = left, isValid$3(this.scroll.horizontalBarPos) && !isNaN(this.scroll.horizontalBarPos) || (this.scroll.horizontalBarPos = 0), this.table.scenegraph.setX(-left), this.table.scenegraph.component.updateHorizontalScrollBarPos(xRatio), oldHorizontalBarPos !== left && triggerEvent && this.checkHorizontalScrollBarEnd();
       }
       hideVerticalScrollBar() {
         this.table.scenegraph.component.hideVerticalScrollBar();
@@ -48374,7 +48414,7 @@
         callback: globalPointerdownCallback
       }), vglobal.addEventListener("pointerup", globalPointerupCallback), vglobal.addEventListener("pointerdown", globalPointerdownCallback), table.scenegraph.tableGroup.addEventListener("pointerdown", e => {
         var _a, _b, _c, _d, _e;
-        table.hasListeners(TABLE_EVENT_TYPE.MOUSEDOWN_TABLE) && table.fireListeners(TABLE_EVENT_TYPE.MOUSEDOWN_TABLE, {
+        if (table.hasListeners(TABLE_EVENT_TYPE.MOUSEDOWN_TABLE) && table.fireListeners(TABLE_EVENT_TYPE.MOUSEDOWN_TABLE, {
           event: e.nativeEvent
         }), table.eventManager.isDown = !0, table.eventManager.LastBodyPointerXY = {
           x: e.x,
@@ -48382,7 +48422,7 @@
         }, table.eventManager.LastPointerXY = {
           x: e.x,
           y: e.y
-        };
+        }, 0 !== e.button) return;
         const eventArgsSet = getCellEventArgsSet(e);
         if (eventManager.downIcon = void 0, stateManager.interactionState !== InteractionState.default) return;
         if (table.isPivotChart() && "chart" !== (null === (_a = null == eventArgsSet ? void 0 : eventArgsSet.eventArgs) || void 0 === _a ? void 0 : _a.target.type) && table.scenegraph.updateChartState(null), (null === (_b = eventArgsSet.eventArgs) || void 0 === _b ? void 0 : _b.target) !== (null === (_c = stateManager.residentHoverIcon) || void 0 === _c ? void 0 : _c.icon) && stateManager.hideMenu(), "chart" === (null === (_d = null == eventArgsSet ? void 0 : eventArgsSet.eventArgs) || void 0 === _d ? void 0 : _d.target.type)) return;
@@ -48958,7 +48998,7 @@
         }
       }), handler.on(table.getElement(), "contextmenu", e => {
         var _a;
-        !1 !== (null === (_a = table.eventOptions) || void 0 === _a ? void 0 : _a.preventDefaultContextMenu) && e.preventDefault();
+        !1 !== (null === (_a = table.eventOptions) || void 0 === _a ? void 0 : _a.preventDefaultContextMenu) ? e.preventDefault() : globalPointerupCallback(e);
       }), table.options.canvas || handler.on(table.getContainer(), "resize", e => {
         var _a;
         table.isReleased || 0 === e.width && 0 === e.height || ((table.autoFillWidth || table.autoFillHeight) && (null === (_a = table.editorManager) || void 0 === _a || _a.completeEdit()), isValid$3(table.options.pixelRatio) || table.setPixelRatio(getPixelRatio$1()), e.windowSizeNotChange || table.resize());
@@ -49389,6 +49429,75 @@
       });
     }
 
+    function bindIconClickEvent(table) {
+      table.on(TABLE_EVENT_TYPE.ICON_CLICK, iconInfo => {
+        var _a;
+        const {
+            col: col,
+            row: row,
+            x: x,
+            y: y,
+            funcType: funcType,
+            icon: icon,
+            event: event
+          } = iconInfo,
+          {
+            stateManager: stateManager
+          } = table;
+        if (funcType === IconFuncTypeEnum.dropDown) stateManager.triggerDropDownMenu(col, row, x, y, event);else if (funcType === IconFuncTypeEnum.sort) stateManager.triggerSort(col, row, icon, event);else if (funcType === IconFuncTypeEnum.frozen) stateManager.triggerFreeze(col, row, icon);else if (funcType === IconFuncTypeEnum.drillDown) drillClick(table);else if (funcType === IconFuncTypeEnum.collapse || funcType === IconFuncTypeEnum.expand) {
+          const isHasSelected = !!(null === (_a = stateManager.select.ranges) || void 0 === _a ? void 0 : _a.length);
+          stateManager.updateSelectPos(-1, -1), stateManager.endSelectCells(!0, isHasSelected), table.toggleHierarchyState(col, row);
+        }
+      });
+    }
+
+    function bindDropdownMenuClickEvent(table) {
+      table.on(TABLE_EVENT_TYPE.DROPDOWN_MENU_CLICK, () => {
+        table.stateManager.hideMenu();
+      });
+    }
+
+    function bindDBClickAutoColumnWidthEvent(table) {
+      table.on(TABLE_EVENT_TYPE.DBLCLICK_CELL, e => {
+        var _a, _b, _c;
+        if (e.federatedEvent) {
+          const eventArgsSet = getCellEventArgsSet(e.federatedEvent),
+            resizeCol = table.scenegraph.getResizeColAt(eventArgsSet.abstractPos.x, eventArgsSet.abstractPos.y, null === (_a = eventArgsSet.eventArgs) || void 0 === _a ? void 0 : _a.targetCell),
+            disableDblclickAutoResizeColWidth = null !== (_b = table.options.disableDblclickAutoResizeColWidth) && void 0 !== _b ? _b : null === (_c = table.options.resize) || void 0 === _c ? void 0 : _c.disableDblclickAutoResizeColWidth;
+          if (table.eventManager.checkCellFillhandle(eventArgsSet)) table.fireListeners(TABLE_EVENT_TYPE.DBLCLICK_FILL_HANDLE, {});else if (table._canResizeColumn(resizeCol.col, resizeCol.row) && resizeCol.col >= 0 && !disableDblclickAutoResizeColWidth) {
+            table.scenegraph.updateAutoColWidth(resizeCol.col), table.internalProps._widthResizedColMap.add(resizeCol.col), table.scenegraph.updateChartSizeForResizeColWidth(resizeCol.col);
+            const state = table.stateManager;
+            state.columnResize.col < state.table.frozenColCount && !state.table.isPivotTable() && !state.table.transpose && state.table.scenegraph.component.setFrozenColumnShadow(state.table.frozenColCount - 1, state.columnResize.isRightFrozen);
+            const colWidths = [];
+            for (let col = 0; col < table.colCount; col++) colWidths.push(table.getColWidth(col));
+            table.fireListeners(TABLE_EVENT_TYPE.RESIZE_COLUMN_END, {
+              col: resizeCol.col,
+              colWidths: colWidths
+            });
+          }
+        }
+      });
+    }
+
+    function rightButtonClickEvent(table) {
+      table.on(TABLE_EVENT_TYPE.CONTEXTMENU_CELL, e => {
+        const {
+            col: col,
+            row: row
+          } = e,
+          ranges = table.getSelectedCellRanges();
+        let cellInRange = !1;
+        if (ranges.length > 0) for (let i = 0; i < ranges.length; i++) {
+          const range = ranges[i];
+          if (col >= range.start.col && col <= range.end.col && row >= range.start.row && row <= range.end.row) {
+            cellInRange = !0;
+            break;
+          }
+        }
+        cellInRange || table.selectCell(col, row);
+      });
+    }
+
     let EventManager$1 = class EventManager {
       constructor(table) {
         this.isDown = !1, this.isDraging = !1, this.globalEventListeners = [], this._enableTableScroll = !0, this.table = table, this.handleTextStickBindId = [], this.inertiaScroll = new InertiaScroll(table.stateManager), "node" === Env.mode || table.options.disableInteraction || (this.bindOuterEvent(), setTimeout(() => {
@@ -49413,44 +49522,7 @@
         }, 0);
       }
       bindSelfEvent() {
-        if (this.table.isReleased) return;
-        const stateManager = this.table.stateManager;
-        this.table.on(TABLE_EVENT_TYPE.ICON_CLICK, iconInfo => {
-          var _a;
-          const {
-            col: col,
-            row: row,
-            x: x,
-            y: y,
-            funcType: funcType,
-            icon: icon,
-            event: event
-          } = iconInfo;
-          if (funcType === IconFuncTypeEnum.dropDown) stateManager.triggerDropDownMenu(col, row, x, y, event);else if (funcType === IconFuncTypeEnum.sort) stateManager.triggerSort(col, row, icon, event);else if (funcType === IconFuncTypeEnum.frozen) stateManager.triggerFreeze(col, row, icon);else if (funcType === IconFuncTypeEnum.drillDown) drillClick(this.table);else if (funcType === IconFuncTypeEnum.collapse || funcType === IconFuncTypeEnum.expand) {
-            const isHasSelected = !!(null === (_a = stateManager.select.ranges) || void 0 === _a ? void 0 : _a.length);
-            stateManager.updateSelectPos(-1, -1), stateManager.endSelectCells(!0, isHasSelected), this.table.toggleHierarchyState(col, row);
-          }
-        }), this.table.on(TABLE_EVENT_TYPE.DROPDOWN_MENU_CLICK, () => {
-          stateManager.hideMenu();
-        }), this.updateEventBinder(), bindMediaClick(this.table), this.table.on(TABLE_EVENT_TYPE.DBLCLICK_CELL, e => {
-          var _a, _b, _c;
-          if (e.federatedEvent) {
-            const eventArgsSet = getCellEventArgsSet(e.federatedEvent),
-              resizeCol = this.table.scenegraph.getResizeColAt(eventArgsSet.abstractPos.x, eventArgsSet.abstractPos.y, null === (_a = eventArgsSet.eventArgs) || void 0 === _a ? void 0 : _a.targetCell),
-              disableDblclickAutoResizeColWidth = null !== (_b = this.table.options.disableDblclickAutoResizeColWidth) && void 0 !== _b ? _b : null === (_c = this.table.options.resize) || void 0 === _c ? void 0 : _c.disableDblclickAutoResizeColWidth;
-            if (this.table.eventManager.checkCellFillhandle(eventArgsSet)) this.table.fireListeners(TABLE_EVENT_TYPE.DBLCLICK_FILL_HANDLE, {});else if (this.table._canResizeColumn(resizeCol.col, resizeCol.row) && resizeCol.col >= 0 && !disableDblclickAutoResizeColWidth) {
-              this.table.scenegraph.updateAutoColWidth(resizeCol.col), this.table.internalProps._widthResizedColMap.add(resizeCol.col), this.table.scenegraph.updateChartSizeForResizeColWidth(resizeCol.col);
-              const state = this.table.stateManager;
-              state.columnResize.col < state.table.frozenColCount && !state.table.isPivotTable() && !state.table.transpose && state.table.scenegraph.component.setFrozenColumnShadow(state.table.frozenColCount - 1, state.columnResize.isRightFrozen);
-              const colWidths = [];
-              for (let col = 0; col < this.table.colCount; col++) colWidths.push(this.table.getColWidth(col));
-              this.table.fireListeners(TABLE_EVENT_TYPE.RESIZE_COLUMN_END, {
-                col: resizeCol.col,
-                colWidths: colWidths
-              });
-            }
-          }
-        }), this.table.isPivotTable() && checkHaveDrill(this.table) && bindDrillEvent(this.table), bindSparklineHoverEvent(this.table), bindAxisClickEvent(this.table), bindAxisHoverEvent(this.table), bindGroupTitleCheckboxChange(this.table), bindButtonClickEvent(this.table);
+        this.table.isReleased || (bindIconClickEvent(this.table), bindDropdownMenuClickEvent(this.table), this.updateEventBinder(), bindMediaClick(this.table), bindDBClickAutoColumnWidthEvent(this.table), this.table.isPivotTable() && checkHaveDrill(this.table) && bindDrillEvent(this.table), bindSparklineHoverEvent(this.table), bindAxisClickEvent(this.table), bindAxisHoverEvent(this.table), bindGroupTitleCheckboxChange(this.table), bindButtonClickEvent(this.table), rightButtonClickEvent(this.table));
       }
       dealTableHover(eventArgsSet) {
         if (!eventArgsSet) return void this.table.stateManager.updateHoverPos(-1, -1);
@@ -51902,15 +51974,14 @@
         } = getAxisOption(col, row, position, layout),
         range = getAxisRange(layout.dataset.collectedValues, indicatorKeys, isZeroAlign, path, null != seriesIndice ? seriesIndice : index);
       if (!range) return;
-      let ticks;
-      if (isPercent && (range.min = range.min < 0 ? -1 : 0, range.max = range.max > 0 ? 1 : 0), ((null == axisOption ? void 0 : axisOption.zero) || range.min === range.max) && (range.min = Math.min(range.min, 0), range.max = Math.max(range.max, 0)), (null == axisOption ? void 0 : axisOption.nice) || isTickAlign) {
-        const getAxisDomainRangeAndLabels = Factory.getFunction("getAxisDomainRangeAndLabels"),
-          {
-            range: axisRange,
-            ticks: selfTicks
-          } = getAxisDomainRangeAndLabels(range.min, range.max, axisOption, isZeroAlign, "bottom" === position || "top" === position ? layout._table.getColWidth(col) || layout._table.tableNoFrameWidth : layout._table.getRowHeight(row) || layout._table.tableNoFrameHeight);
-        (null == axisOption ? void 0 : axisOption.nice) && (range.min = axisRange[0], range.max = axisRange[1]), ticks = selfTicks;
-      }
+      isPercent && (range.min = range.min < 0 ? -1 : 0, range.max = range.max > 0 ? 1 : 0), ((null == axisOption ? void 0 : axisOption.zero) || range.min === range.max) && (range.min = Math.min(range.min, 0), range.max = Math.max(range.max, 0));
+      const getAxisDomainRangeAndLabels = Factory.getFunction("getAxisDomainRangeAndLabels"),
+        {
+          range: axisRange,
+          ticks: selfTicks
+        } = getAxisDomainRangeAndLabels(range.min, range.max, axisOption, isZeroAlign, "bottom" === position || "top" === position ? layout._table.getColWidth(col) || layout._table.tableNoFrameWidth : layout._table.getRowHeight(row) || layout._table.tableNoFrameHeight);
+      (null == axisOption ? void 0 : axisOption.nice) && (range.min = axisRange[0], range.max = axisRange[1]);
+      const ticks = selfTicks;
       return isNumber$4(null == axisOption ? void 0 : axisOption.min) && (range.min = axisOption.min), isNumber$4(null == axisOption ? void 0 : axisOption.max) && (range.max = axisOption.max), {
         index: null != seriesIndice ? seriesIndice : index,
         range: range,
@@ -52202,7 +52273,7 @@
       constructor(container) {
         let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
         var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
-        if (super(), this.showFrozenIcon = !0, this.version = "1.17.3-alpha.11", this.id = `VTable${Date.now()}`, this.isReleased = !1, this._chartEventMap = {}, this.throttleInvalidate = throttle2(this.render.bind(this), 200), !container && "node" !== options.mode && !options.canvas) throw new Error("vtable's container is undefined");
+        if (super(), this.showFrozenIcon = !0, this.version = "1.17.3-alpha.12", this.id = `VTable${Date.now()}`, this.isReleased = !1, this._chartEventMap = {}, this.throttleInvalidate = throttle2(this.render.bind(this), 200), !container && "node" !== options.mode && !options.canvas) throw new Error("vtable's container is undefined");
         !1 === (null === (_a = options.customConfig) || void 0 === _a ? void 0 : _a.imageAnonymous) && (vglobal.isImageAnonymous = !1);
         const {
           frozenColCount = 0,
@@ -52250,7 +52321,7 @@
           right: 0,
           left: 0,
           bottom: 0
-        }, padding && ("number" == typeof padding ? (this.padding.top = padding, this.padding.left = padding, this.padding.bottom = padding, this.padding.right = padding) : (padding.top && (this.padding.top = padding.top), padding.bottom && (this.padding.bottom = padding.bottom), padding.left && (this.padding.left = padding.left), padding.right && (this.padding.right = padding.right))), isValid$3(canvasHeight) && isValid$3(canvasWidth) && (this.canvasSizeSeted = !0), this.tableNoFrameWidth = 0, this.tableNoFrameHeight = 0, this.canvasWidth = isNumber$4(canvasWidth) ? canvasWidth : void 0, this.canvasHeight = isNumber$4(canvasHeight) ? canvasHeight : void 0, this.columnWidthComputeMode = null !== (_b = options.columnWidthComputeMode) && void 0 !== _b ? _b : "normal";
+        }, padding && ("number" == typeof padding ? (this.padding.top = padding, this.padding.left = padding, this.padding.bottom = padding, this.padding.right = padding) : (padding.top && (this.padding.top = padding.top), padding.bottom && (this.padding.bottom = padding.bottom), padding.left && (this.padding.left = padding.left), padding.right && (this.padding.right = padding.right))), (isValid$3(canvasHeight) || isValid$3(canvasWidth)) && (this.canvasSizeSeted = !0), this.tableNoFrameWidth = 0, this.tableNoFrameHeight = 0, this.canvasWidth = isNumber$4(canvasWidth) ? canvasWidth : void 0, this.canvasHeight = isNumber$4(canvasHeight) ? canvasHeight : void 0, this.columnWidthComputeMode = null !== (_b = options.columnWidthComputeMode) && void 0 !== _b ? _b : "normal";
         const internalProps = this.internalProps = {};
         void 0 !== showFrozenIcon && (this.showFrozenIcon = showFrozenIcon), "number" == typeof allowFrozenColCount && allowFrozenColCount <= 0 && (this.showFrozenIcon = !1), this.options.canvas ? ("node" !== Env.mode && (internalProps.element = this.options.canvas.parentElement, internalProps.element.style.position = "relative"), internalProps.focusControl = new FocusInput(this, internalProps.element), internalProps.canvas = this.options.canvas, internalProps.context = internalProps.canvas.getContext("2d")) : "node" !== Env.mode && (internalProps.element = createRootElement$1(this.padding), internalProps.focusControl = new FocusInput(this, internalProps.element), internalProps.canvas = document.createElement("canvas"), internalProps.element.appendChild(internalProps.canvas), internalProps.context = internalProps.canvas.getContext("2d"), (null === (_c = options.customConfig) || void 0 === _c ? void 0 : _c.createReactContainer) && createReactContainer(this)), internalProps.handler = new EventHandler$1(), isNumber$4(this.options.resizeTime) && (internalProps.handler.resizeTime = this.options.resizeTime), internalProps.pixelRatio = pixelRatio, internalProps.frozenColCount = frozenColCount, internalProps.frozenRowCount = frozenRowCount, internalProps.unfreezeAllOnExceedsMaxWidth = null == unfreezeAllOnExceedsMaxWidth || unfreezeAllOnExceedsMaxWidth, internalProps.defaultRowHeight = defaultRowHeight, internalProps.defaultHeaderRowHeight = null != defaultHeaderRowHeight ? defaultHeaderRowHeight : defaultRowHeight, internalProps.defaultColWidth = defaultColWidth, internalProps.defaultHeaderColWidth = null != defaultHeaderColWidth ? defaultHeaderColWidth : defaultColWidth, internalProps.keyboardOptions = keyboardOptions, internalProps.eventOptions = eventOptions, internalProps.rowSeriesNumber = rowSeriesNumber, internalProps.columnResizeMode = null !== (_d = null == resize ? void 0 : resize.columnResizeMode) && void 0 !== _d ? _d : columnResizeMode, internalProps.rowResizeMode = null !== (_e = null == resize ? void 0 : resize.rowResizeMode) && void 0 !== _e ? _e : rowResizeMode, internalProps.dragHeaderMode = null !== (_g = null !== (_f = null == dragOrder ? void 0 : dragOrder.dragHeaderMode) && void 0 !== _f ? _f : dragHeaderMode) && void 0 !== _g ? _g : "none", internalProps.renderChartAsync = renderChartAsync, setBatchRenderChartCount(renderChartAsyncBatchCount), internalProps.overscrollBehavior = null != overscrollBehavior ? overscrollBehavior : "auto", internalProps._rowHeightsMap = new NumberRangeMap(this), internalProps._rowRangeHeightsMap = new Map(), internalProps._colRangeWidthsMap = new Map(), internalProps._widthResizedColMap = new Set(), internalProps._heightResizedRowMap = new Set(), this.colWidthsMap = new NumberMap(), this.colContentWidthsMap = new NumberMap(), this.colWidthsLimit = {};
         const that = this;
@@ -52557,7 +52628,7 @@
         }
       }
       _updateSize() {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5;
         const {
           padding: padding
         } = this;
@@ -52567,28 +52638,31 @@
           const element = this.getElement();
           let widthWithoutPadding = 0,
             heightWithoutPadding = 0;
-          if (this.canvasSizeSeted) widthWithoutPadding = this.canvasWidth, heightWithoutPadding = this.canvasHeight;else if (element.parentElement) {
+          const isDefWidth = isValid$3(this.canvasWidth),
+            isDefHeight = isValid$3(this.canvasHeight);
+          this.canvasSizeSeted && (isDefWidth && (widthWithoutPadding = this.canvasWidth), isDefHeight && (heightWithoutPadding = this.canvasHeight));
+          if ((!isDefWidth || !isDefHeight) && element.parentElement) {
             const computedStyle = element.parentElement.style || window.getComputedStyle(element.parentElement);
-            widthWithoutPadding = element.parentElement.offsetWidth - parseInt(computedStyle.paddingLeft || "0px", 10) - parseInt(computedStyle.paddingRight || "0px", 10), heightWithoutPadding = element.parentElement.offsetHeight - parseInt(computedStyle.paddingTop || "0px", 10) - parseInt(computedStyle.paddingBottom || "0px", 20), widthWithoutPadding = (null != widthWithoutPadding ? widthWithoutPadding : 1) - (this.options.tableSizeAntiJitter ? 1 : 0), heightWithoutPadding = (null != heightWithoutPadding ? heightWithoutPadding : 1) - (this.options.tableSizeAntiJitter ? 1 : 0);
+            isDefWidth || (widthWithoutPadding = element.parentElement.offsetWidth - (parseInt(computedStyle.paddingLeft, 10) || 0) - (parseInt(computedStyle.paddingRight, 10) || 0)), isDefHeight || (heightWithoutPadding = element.parentElement.offsetHeight - parseInt(computedStyle.paddingTop || "0px", 10) - parseInt(computedStyle.paddingBottom || "0px", 20)), widthWithoutPadding = (null != widthWithoutPadding ? widthWithoutPadding : 1) - (this.options.tableSizeAntiJitter ? 1 : 0), heightWithoutPadding = (null != heightWithoutPadding ? heightWithoutPadding : 1) - (this.options.tableSizeAntiJitter ? 1 : 0);
           }
           element.style.width = widthWithoutPadding && widthWithoutPadding - padding.left - padding.right + "px" || "0px", element.style.height = heightWithoutPadding && heightWithoutPadding - padding.top - padding.bottom + "px" || "0px";
           const {
             canvas: canvas
           } = this.internalProps;
-          widthP = (null !== (_c = null === (_b = canvas.parentElement) || void 0 === _b ? void 0 : _b.offsetWidth) && void 0 !== _c ? _c : 1) - (this.options.tableSizeAntiJitter ? 1 : 0), heightP = (null !== (_e = null === (_d = canvas.parentElement) || void 0 === _d ? void 0 : _d.offsetHeight) && void 0 !== _e ? _e : 1) - (this.options.tableSizeAntiJitter ? 1 : 0), (null === (_f = null == this ? void 0 : this.scenegraph) || void 0 === _f ? void 0 : _f.stage) ? this.scenegraph.stage.resize(widthP, heightP) : (canvas.style.width = "", canvas.style.height = "", canvas.width = widthP, canvas.height = heightP, canvas.style.width = `${widthP}px`, canvas.style.height = `${heightP}px`);
+          widthP = (null !== (_c = null === (_b = canvas.parentElement) || void 0 === _b ? void 0 : _b.offsetWidth) && void 0 !== _c ? _c : 1) - (this.options.tableSizeAntiJitter ? 1 : 0), heightP = (null !== (_e = null === (_d = canvas.parentElement) || void 0 === _d ? void 0 : _d.offsetHeight) && void 0 !== _e ? _e : 1) - (this.options.tableSizeAntiJitter ? 1 : 0), (null === (_f = null == this ? void 0 : this.scenegraph) || void 0 === _f ? void 0 : _f.stage) ? (null === (_g = this.options) || void 0 === _g ? void 0 : _g.viewBox) && !(null === (_h = this.options) || void 0 === _h ? void 0 : _h.canvas) && this.scenegraph.stage.resize(widthP, heightP) : (canvas.style.width = "", canvas.style.height = "", canvas.width = widthP, canvas.height = heightP, canvas.style.width = `${widthP}px`, canvas.style.height = `${heightP}px`), (null === (_j = this.options) || void 0 === _j ? void 0 : _j.viewBox) && (widthP = this.options.viewBox.x2 - this.options.viewBox.x1, heightP = this.options.viewBox.y2 - this.options.viewBox.y1), (null === (_k = null == this ? void 0 : this.scenegraph) || void 0 === _k ? void 0 : _k.stage) && (this.options.viewBox ? this.scenegraph.stage.setViewBox(this.options.viewBox, !1) : this.scenegraph.stage.resize(widthP, heightP));
         } else "node" === Env.mode && (widthP = this.canvasWidth - 1, heightP = this.canvasHeight - 1);
         const width = Math.floor(widthP - getVerticalScrollBarSize(this.getTheme().scrollStyle)),
           height = Math.floor(heightP - getHorizontalScrollBarSize(this.getTheme().scrollStyle));
-        if (null === (_g = this.internalProps.theme) || void 0 === _g ? void 0 : _g.frameStyle) {
-          const lineWidths = toBoxArray(null !== (_j = null === (_h = this.internalProps.theme.frameStyle) || void 0 === _h ? void 0 : _h.borderLineWidth) && void 0 !== _j ? _j : [null]),
-            shadowWidths = toBoxArray(null !== (_l = null === (_k = this.internalProps.theme.frameStyle) || void 0 === _k ? void 0 : _k.shadowBlur) && void 0 !== _l ? _l : [0]);
-          (null === (_m = this.theme.frameStyle) || void 0 === _m ? void 0 : _m.innerBorder) ? (this.tableX = 0, this.tableY = 0, this.tableNoFrameWidth = width - (null !== (_o = shadowWidths[1]) && void 0 !== _o ? _o : 0), this.tableNoFrameHeight = height - (null !== (_p = shadowWidths[2]) && void 0 !== _p ? _p : 0)) : (this.tableX = (null !== (_q = lineWidths[3]) && void 0 !== _q ? _q : 0) + (null !== (_r = shadowWidths[3]) && void 0 !== _r ? _r : 0), this.tableY = (null !== (_s = lineWidths[0]) && void 0 !== _s ? _s : 0) + (null !== (_t = shadowWidths[0]) && void 0 !== _t ? _t : 0), this.tableNoFrameWidth = width - ((null !== (_u = lineWidths[1]) && void 0 !== _u ? _u : 0) + (null !== (_v = shadowWidths[1]) && void 0 !== _v ? _v : 0)) - ((null !== (_w = lineWidths[3]) && void 0 !== _w ? _w : 0) + (null !== (_x = shadowWidths[3]) && void 0 !== _x ? _x : 0)), this.tableNoFrameHeight = height - ((null !== (_y = lineWidths[0]) && void 0 !== _y ? _y : 0) + (null !== (_z = shadowWidths[0]) && void 0 !== _z ? _z : 0)) - ((null !== (_0 = lineWidths[2]) && void 0 !== _0 ? _0 : 0) + (null !== (_1 = shadowWidths[2]) && void 0 !== _1 ? _1 : 0)));
+        if (null === (_l = this.internalProps.theme) || void 0 === _l ? void 0 : _l.frameStyle) {
+          const lineWidths = toBoxArray(null !== (_o = null === (_m = this.internalProps.theme.frameStyle) || void 0 === _m ? void 0 : _m.borderLineWidth) && void 0 !== _o ? _o : [null]),
+            shadowWidths = toBoxArray(null !== (_q = null === (_p = this.internalProps.theme.frameStyle) || void 0 === _p ? void 0 : _p.shadowBlur) && void 0 !== _q ? _q : [0]);
+          (null === (_r = this.theme.frameStyle) || void 0 === _r ? void 0 : _r.innerBorder) ? (this.tableX = 0, this.tableY = 0, this.tableNoFrameWidth = width - (null !== (_s = shadowWidths[1]) && void 0 !== _s ? _s : 0), this.tableNoFrameHeight = height - (null !== (_t = shadowWidths[2]) && void 0 !== _t ? _t : 0)) : (this.tableX = (null !== (_u = lineWidths[3]) && void 0 !== _u ? _u : 0) + (null !== (_v = shadowWidths[3]) && void 0 !== _v ? _v : 0), this.tableY = (null !== (_w = lineWidths[0]) && void 0 !== _w ? _w : 0) + (null !== (_x = shadowWidths[0]) && void 0 !== _x ? _x : 0), this.tableNoFrameWidth = width - ((null !== (_y = lineWidths[1]) && void 0 !== _y ? _y : 0) + (null !== (_z = shadowWidths[1]) && void 0 !== _z ? _z : 0)) - ((null !== (_0 = lineWidths[3]) && void 0 !== _0 ? _0 : 0) + (null !== (_1 = shadowWidths[3]) && void 0 !== _1 ? _1 : 0)), this.tableNoFrameHeight = height - ((null !== (_2 = lineWidths[0]) && void 0 !== _2 ? _2 : 0) + (null !== (_3 = shadowWidths[0]) && void 0 !== _3 ? _3 : 0)) - ((null !== (_4 = lineWidths[2]) && void 0 !== _4 ? _4 : 0) + (null !== (_5 = shadowWidths[2]) && void 0 !== _5 ? _5 : 0)));
         }
       }
       updateViewBox(newViewBox) {
-        var _a, _b, _c, _d, _e, _f, _g, _h;
-        const oldWidth = null !== (_d = null !== (_b = null === (_a = this.options) || void 0 === _a ? void 0 : _a.viewBox.x2) && void 0 !== _b ? _b : 0 - (null === (_c = this.options) || void 0 === _c ? void 0 : _c.viewBox.x1)) && void 0 !== _d ? _d : 0,
-          oldHeight = null !== (_h = null !== (_f = null === (_e = this.options) || void 0 === _e ? void 0 : _e.viewBox.y2) && void 0 !== _f ? _f : 0 - (null === (_g = this.options) || void 0 === _g ? void 0 : _g.viewBox.y1)) && void 0 !== _h ? _h : 0,
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
+        const oldWidth = (null !== (_c = null === (_b = null === (_a = this.options) || void 0 === _a ? void 0 : _a.viewBox) || void 0 === _b ? void 0 : _b.x2) && void 0 !== _c ? _c : 0) - (null !== (_f = null === (_e = null === (_d = this.options) || void 0 === _d ? void 0 : _d.viewBox) || void 0 === _e ? void 0 : _e.x1) && void 0 !== _f ? _f : 0),
+          oldHeight = (null !== (_j = null === (_h = null === (_g = this.options) || void 0 === _g ? void 0 : _g.viewBox) || void 0 === _h ? void 0 : _h.y2) && void 0 !== _j ? _j : 0) - (null !== (_m = null === (_l = null === (_k = this.options) || void 0 === _k ? void 0 : _k.viewBox) || void 0 === _l ? void 0 : _l.y1) && void 0 !== _m ? _m : 0),
           newWidth = newViewBox.x2 - newViewBox.x1,
           newHeight = newViewBox.y2 - newViewBox.y1;
         this.options.viewBox = newViewBox, oldWidth !== newWidth || oldHeight !== newHeight ? this.resize() : this.scenegraph.stage.setViewBox(this.options.viewBox, !0);
@@ -55547,9 +55621,9 @@
         }, null), this._headerObjectsIncludeHided = this._addHeaders(0, columns, []), this._headerObjects = this._headerObjectsIncludeHided.filter(col => !0 !== col.define.hide), this._headerObjectMap = this._headerObjects.reduce((o, e) => (o[e.id] = e, o), {}), this.rowHierarchyType = checkHasTreeDefine(this) ? "tree" : "grid", this._hasAggregation = checkHasAggregation(this), this._hasAggregationOnBottomCount = checkHasAggregationOnBottom(this), this._hasAggregationOnTopCount = checkHasAggregationOnTop(this), this.handleRowSeriesNumber(table.internalProps.rowSeriesNumber);
       }
       handleRowSeriesNumber(rowSeriesNumber) {
-        var _a, _b;
+        var _a;
         rowSeriesNumber && (Array.isArray(rowSeriesNumber) ? this.rowSeriesNumberColumn = rowSeriesNumber.map((seriesNumber, index) => {
-          var _a, _b, _c;
+          var _a, _b;
           return {
             id: this.seqId++,
             title: seriesNumber.title,
@@ -55557,11 +55631,11 @@
               field: "_vtable_rowSeries_number_" + index
             }, seriesNumber),
             cellType: null !== (_a = seriesNumber.cellType) && void 0 !== _a ? _a : "text",
-            headerType: null !== (_b = rowSeriesNumber.cellType) && void 0 !== _b ? _b : "text",
+            headerType: "checkbox" === seriesNumber.cellType ? "checkbox" : "text",
             style: seriesNumber.style,
             width: seriesNumber.width,
             format: seriesNumber.format,
-            field: null !== (_c = seriesNumber.field) && void 0 !== _c ? _c : "_vtable_rowSeries_number_" + index,
+            field: null !== (_b = seriesNumber.field) && void 0 !== _b ? _b : "_vtable_rowSeries_number_" + index,
             icon: seriesNumber.icon,
             headerIcon: seriesNumber.headerIcon,
             isChildNode: !1
@@ -55573,7 +55647,7 @@
             field: "_vtable_rowSeries_number"
           }, rowSeriesNumber),
           cellType: null !== (_a = rowSeriesNumber.cellType) && void 0 !== _a ? _a : "text",
-          headerType: null !== (_b = rowSeriesNumber.cellType) && void 0 !== _b ? _b : "text",
+          headerType: "checkbox" === rowSeriesNumber.cellType ? "checkbox" : "text",
           style: rowSeriesNumber.style,
           width: rowSeriesNumber.width,
           format: rowSeriesNumber.format,
@@ -65213,7 +65287,7 @@
         themes: themes$1
     });
 
-    const version = "1.17.3-alpha.11";
+    const version = "1.17.3-alpha.12";
 
     exports.Gantt = Gantt;
     exports.TYPES = index$3;