vxe-gantt 4.9.0-beta.0 → 4.9.0-beta.2

package/dist/all.esm.js

@@ -1,4 +1,4 @@
-import { VxeUI } from '@vxe-ui/core';
+import { VxeUI, useFns as useFns$1 } from '@vxe-ui/core';
 export { VxeUI } from '@vxe-ui/core';
 import { defineComponent, inject, ref, onMounted, onUnmounted, h, reactive, computed, watch, nextTick, onBeforeUnmount, provide } from 'vue';
 import XEUtils from 'xe-utils';
@@ -6,7 +6,7 @@ import DomZIndex from 'dom-zindex';
 import { VxeTable } from 'vxe-table';
 
 const { setConfig: setConfig$1, setIcon } = VxeUI;
-VxeUI.ganttVersion = "4.9.0-beta.0";
+VxeUI.ganttVersion = "4.9.0-beta.2";
 const ymdFormat = 'yyyy-MM-dd';
 const ymdhmsFormat = 'yyyy-MM-dd HH:mm:ss';
 setConfig$1({
@@ -130,7 +130,7 @@ setIcon({
 });
 
 const { log } = VxeUI;
-const ganttVersion = `gantt v${"4.9.0-beta.0"}`;
+const ganttVersion = `gantt v${"4.9.0-beta.2"}`;
 function createComponentLog(name) {
     const uiVersion = VxeUI.uiVersion ? `ui v${VxeUI.uiVersion}` : '';
     const tableVersion = VxeUI.tableVersion ? `table v${VxeUI.tableVersion}` : '';
@@ -885,8 +885,8 @@ var GanttViewChartComponent = defineVxeComponent({
                                     },
                                     onMousedown(evnt) {
                                         evnt.stopPropagation();
-                                        if ($xeGantt.handleTaskBarMousedownEvent) {
-                                            $xeGantt.handleTaskBarMousedownEvent(evnt, childCtParams);
+                                        if ($xeGantt.handleTaskBarModnEvent) {
+                                            $xeGantt.handleTaskBarModnEvent(evnt, childCtParams);
                                         }
                                     }
                                 }, [
@@ -990,8 +990,8 @@ var GanttViewChartComponent = defineVxeComponent({
                         $xeGantt.handleTaskBarDblclickEvent(evnt, barParams);
                     },
                     onMousedown(evnt) {
-                        if ($xeGantt.handleTaskBarMousedownEvent) {
-                            $xeGantt.handleTaskBarMousedownEvent(evnt, barParams);
+                        if ($xeGantt.handleTaskBarModnEvent) {
+                            $xeGantt.handleTaskBarModnEvent(evnt, barParams);
                         }
                     }
                 }, cbVNs)
@@ -1400,8 +1400,7 @@ var GanttViewFooterComponent = defineVxeComponent({
     }
 });
 
-const { getConfig: getConfig$1, domUtils, scrollbarUtils, globalResize, globalEvents: globalEvents$1, renderEmptyElement: renderEmptyElement$1 } = VxeUI;
-const { getThumbOffsetSize, getThumbSize, getScrollFromClick, getScrollFromDrag } = scrollbarUtils;
+const { getConfig: getConfig$1, domUtils, globalResize, globalEvents: globalEvents$1, renderEmptyElement: renderEmptyElement$1 } = VxeUI;
 const { FinishToStart, StartToFinish, StartToStart, FinishToFinish } = VxeGanttDependencyType;
 const sourceType = 'gantt';
 const secondMs = 1000;
@@ -1486,12 +1485,8 @@ var GanttViewComponent = defineVxeComponent({
         const ganttProps = $xeGantt.props;
         const ganttReactData = $xeGantt.reactData;
         const ganttInternalData = $xeGantt.internalData;
-        const { computeDateFormat, computeTaskBarOpts, computeTaskViewOpts, computeStartField, computeEndField, computeTypeField, computeScrollbarOpts, computeScaleUnit, computeWeekScale, computeMinScale, computeTaskNowLineOpts, computeScaleStep } = $xeGantt.getComputeMaps();
+        const { computeDateFormat, computeTaskBarOpts, computeTaskViewOpts, computeStartField, computeEndField, computeTypeField, computeScrollbarOpts, computeScaleUnit, computeWeekScale, computeMinScale, computeTaskNowLineOpts, computeScaleStep, computeIsVScrollbar } = $xeGantt.getComputeMaps();
         const refElem = ref();
-        const refTrackXElem = ref();
-        const refTrackYElem = ref();
-        const refThumbXElem = ref();
-        const refThumbYElem = ref();
         const refScrollXVirtualElem = ref();
         const refScrollYVirtualElem = ref();
         const refScrollXHandleElem = ref();
@@ -1512,6 +1507,10 @@ var GanttViewComponent = defineVxeComponent({
             refScrollXHandleElem,
             refScrollYHandleElem
         };
+        const computeGanttIsVScrollbar = computed(() => {
+            const isVScrollbar = computeIsVScrollbar.value;
+            return isVScrollbar;
+        });
         const computeScrollbarXOpts = computed(() => {
             const scrollbarOpts = computeScrollbarOpts.value;
             return scrollbarOpts.x ? Object.assign({}, scrollbarOpts.x, scrollbarOpts.xConfig) : (scrollbarOpts.xConfig || {});
@@ -1741,6 +1740,7 @@ var GanttViewComponent = defineVxeComponent({
             getRefMaps: () => refMaps,
             getComputeMaps: () => computeMaps
         };
+        const { refTrackXElem, refTrackYElem, refThumbXElem, refThumbYElem, updateThumbSize, updateThumbOffset, clickTrackXEvent, clickTrackYEvent, pointerdownThumbXEvent, pointermoveThumbXEvent, cleatPointerThumbEvent, pointerdownThumbYEvent, pointermoveThumbYEvent } = useFns$1.useInitVScrollbar($xeGanttView);
         const parseStringDate = (dateValue) => {
             const dateFormat = computeDateFormat.value;
             return XEUtils.toStringDate(dateValue, dateFormat);
@@ -3332,6 +3332,11 @@ var GanttViewComponent = defineVxeComponent({
             $xeGantt.dispatchEvent('scroll', evntParams, evnt);
         };
         const ganttViewMethods = {
+            getScrollViewElem() {
+                const { elemStore } = internalData;
+                const viewEl = getRefElem(elemStore['main-body-scroll']);
+                return viewEl;
+            },
             refreshData() {
                 handleUpdateData();
                 handleRecalculateStyle();
@@ -3543,166 +3548,28 @@ var GanttViewComponent = defineVxeComponent({
         const handleGlobalResizeEvent = () => {
             handleLazyRecalculate();
         };
-        const updateThumbSize = () => {
-            const { elemStore } = internalData;
-            const viewEl = getRefElem(elemStore['main-body-scroll']);
-            if (!viewEl) {
-                return;
-            }
-            if (!viewEl.clientHeight || !viewEl.clientHeight) {
-                return;
-            }
-            const trackXEl = refTrackXElem.value;
-            const xThumbWidth = trackXEl ? getThumbSize(viewEl.clientWidth, viewEl.scrollWidth, trackXEl.clientWidth) : 0;
-            const thumbXElem = refThumbXElem.value;
-            if (thumbXElem) {
-                thumbXElem.style.width = xThumbWidth + 'px';
-            }
-            reactData.xThumbWidth = xThumbWidth;
-            const trackYEl = refTrackYElem.value;
-            const yThumbHeight = trackYEl ? getThumbSize(viewEl.clientHeight, viewEl.scrollHeight, trackYEl.clientHeight) : 0;
-            const thumbYElem = refThumbYElem.value;
-            if (thumbYElem) {
-                thumbYElem.style.height = yThumbHeight + 'px';
-            }
-            reactData.yThumbHeight = yThumbHeight;
-        };
-        const updateThumbOffset = () => {
-            const { elemStore } = internalData;
-            const viewEl = getRefElem(elemStore['main-body-scroll']);
-            if (!viewEl) {
-                return;
-            }
-            if (!viewEl.clientHeight || !viewEl.clientHeight) {
-                return;
-            }
-            const { xThumbWidth, yThumbHeight } = reactData;
-            const trackXEl = refTrackXElem.value;
-            const thumbXElem = refThumbXElem.value;
-            const xThumbLeft = trackXEl && xThumbWidth ? getThumbOffsetSize(viewEl.scrollLeft, viewEl.clientWidth, viewEl.scrollWidth, trackXEl.clientWidth, xThumbWidth) : 0;
-            internalData.xThumbLeft = xThumbLeft;
-            if (thumbXElem && xThumbWidth) {
-                thumbXElem.style.width = xThumbWidth + 'px';
-                thumbXElem.style.transform = `translateX(${xThumbLeft}px)`;
-            }
-            const trackYEl = refTrackYElem.value;
-            const thumbYElem = refThumbYElem.value;
-            const yThumbTop = trackYEl && yThumbHeight ? getThumbOffsetSize(viewEl.scrollTop, viewEl.clientHeight, viewEl.scrollHeight, trackYEl.clientHeight, yThumbHeight) : 0;
-            internalData.yThumbTop = yThumbTop;
-            if (thumbYElem && yThumbHeight) {
-                thumbYElem.style.height = yThumbHeight + 'px';
-                thumbYElem.style.transform = `translateY(${yThumbTop}px)`;
-            }
-        };
-        const clickTrackXEvent = (evnt) => {
-            const trackEl = evnt.currentTarget;
-            if (trackEl !== evnt.target) {
-                return;
-            }
-            const { elemStore } = internalData;
-            const viewEl = getRefElem(elemStore['main-body-scroll']);
-            if (!viewEl) {
-                return;
-            }
-            const { xThumbWidth } = reactData;
-            const trackRect = trackEl.getBoundingClientRect();
-            viewEl.scrollTo({
-                left: getScrollFromClick(evnt.clientX - trackRect.left, viewEl.clientWidth, viewEl.scrollWidth, trackEl.clientWidth, xThumbWidth),
-                behavior: 'auto'
-            });
-        };
-        const clickTrackYEvent = (evnt) => {
-            const trackEl = evnt.currentTarget;
-            if (trackEl !== evnt.target) {
-                return;
-            }
-            const { elemStore } = internalData;
-            const viewEl = getRefElem(elemStore['main-body-scroll']);
-            if (!viewEl) {
-                return;
-            }
-            const { yThumbHeight } = reactData;
-            const trackRect = trackEl.getBoundingClientRect();
-            viewEl.scrollTo({
-                top: getScrollFromClick(evnt.clientY - trackRect.top, viewEl.clientHeight, viewEl.scrollHeight, trackEl.clientHeight, yThumbHeight),
-                behavior: 'auto'
-            });
-        };
-        const pointerdownThumbXEvent = (evnt) => {
-            const thumbEl = evnt.currentTarget;
-            internalData.isThumbDrag = true;
-            thumbEl.setPointerCapture(evnt.pointerId);
-            const { elemStore } = internalData;
-            const viewEl = getRefElem(elemStore['main-body-scroll']);
-            if (!viewEl) {
-                return;
-            }
-            const { xThumbWidth } = reactData;
-            const trackEl = thumbEl.parentElement;
-            const trackRect = trackEl.getBoundingClientRect();
-            const pointerPosition = evnt.clientX - trackRect.left;
-            // 记录 thumb 的偏移
-            const thumbOffset = getThumbOffsetSize(viewEl.scrollLeft, viewEl.clientWidth, viewEl.scrollWidth, trackEl.clientWidth, xThumbWidth);
-            internalData.thumbDragOffset = pointerPosition - thumbOffset;
-        };
-        const pointermoveThumbXEvent = (evnt) => {
-            const thumbEl = evnt.currentTarget;
-            if (!thumbEl.hasPointerCapture(evnt.pointerId)) {
-                return;
-            }
-            const { elemStore, isThumbDrag, thumbDragOffset } = internalData;
-            if (isThumbDrag) {
-                const viewEl = getRefElem(elemStore['main-body-scroll']);
-                if (!viewEl) {
-                    return;
-                }
-                const { xThumbWidth } = reactData;
-                const thumbEl = evnt.currentTarget;
-                const trackEl = thumbEl.parentElement;
-                const trackRect = trackEl.getBoundingClientRect();
-                // 更新偏移
-                viewEl.scrollLeft = getScrollFromDrag(evnt.clientX - trackRect.left, thumbDragOffset, viewEl.clientWidth, viewEl.scrollWidth, trackEl.clientWidth, xThumbWidth);
-            }
-        };
-        const cleatPointerThumbEvent = (evnt) => {
-            const thumbEl = evnt.currentTarget;
-            thumbEl.releasePointerCapture(evnt.pointerId);
-            internalData.isThumbDrag = false;
-        };
-        const pointerdownThumbYEvent = (evnt) => {
-            const thumbEl = evnt.currentTarget;
-            internalData.isThumbDrag = true;
-            thumbEl.setPointerCapture(evnt.pointerId);
-            const { elemStore } = internalData;
-            const viewEl = getRefElem(elemStore['main-body-scroll']);
-            if (!viewEl) {
-                return;
-            }
-            const { yThumbHeight } = reactData;
-            const trackEl = thumbEl.parentElement;
-            const trackRect = trackEl.getBoundingClientRect();
-            const pointerPosition = evnt.clientY - trackRect.top;
-            // 记录 thumb 的偏移
-            const thumbOffset = getThumbOffsetSize(viewEl.scrollTop, viewEl.clientHeight, viewEl.scrollHeight, trackEl.clientHeight, yThumbHeight);
-            internalData.thumbDragOffset = pointerPosition - thumbOffset;
-        };
-        const pointermoveThumbYEvent = (evnt) => {
-            const thumbEl = evnt.currentTarget;
-            if (!thumbEl.hasPointerCapture(evnt.pointerId)) {
-                return;
-            }
-            const { elemStore, isThumbDrag, thumbDragOffset } = internalData;
-            if (isThumbDrag) {
-                const viewEl = getRefElem(elemStore['main-body-scroll']);
-                if (!viewEl) {
-                    return;
+        const bindScrollbarResize = () => {
+            const { elemStore, scrollObserver } = internalData;
+            const isVScrollbar = computeIsVScrollbar.value;
+            if (isVScrollbar) {
+                if (!scrollObserver) {
+                    const el = refElem.value;
+                    const viewInnerXEl = getRefElem(elemStore['main-body-xSpace']);
+                    const viewInnerYEl = getRefElem(elemStore['main-body-xSpace']);
+                    const scrollObserver = globalResize.create(() => {
+                        reScrollFlag.value++;
+                    });
+                    if (el) {
+                        scrollObserver.observe(el);
+                    }
+                    if (viewInnerXEl) {
+                        scrollObserver.observe(viewInnerXEl);
+                    }
+                    if (viewInnerYEl) {
+                        scrollObserver.observe(viewInnerYEl);
+                    }
+                    internalData.scrollObserver = scrollObserver;
                 }
-                const { yThumbHeight } = reactData;
-                const thumbEl = evnt.currentTarget;
-                const trackEl = thumbEl.parentElement;
-                const trackRect = trackEl.getBoundingClientRect();
-                // 更新偏移
-                viewEl.scrollTop = getScrollFromDrag(evnt.clientY - trackRect.top, thumbDragOffset, viewEl.clientHeight, viewEl.scrollHeight, trackEl.clientHeight, yThumbHeight);
             }
         };
         Object.assign($xeGanttView, ganttViewMethods, ganttViewPrivateMethods);
@@ -3801,8 +3668,8 @@ var GanttViewComponent = defineVxeComponent({
         };
         const renderVirtualBody = () => {
             const { showLeftView } = ganttReactData;
-            const { useScrollbar } = ganttProps;
             const { xThumbWidth, yThumbHeight } = reactData;
+            const isVScrollbar = computeIsVScrollbar.value;
             const scrollbarOpts = computeScrollbarOpts.value;
             const scrollXAutoHide = computeScrollXAutoHide.value;
             const scrollYAutoHide = computeScrollYAutoHide.value;
@@ -3814,10 +3681,10 @@ var GanttViewComponent = defineVxeComponent({
             return h('div', {
                 key: 'lvb',
                 class: ['vxe-gantt--layout-wrapper', `sx-pos--${scrollbarXToTop ? 'top' : 'bottom'}`, `sy-pos--${scrollbarYToLeft ? 'left' : 'right'}`, {
-                        'is--virtual-scrollbar': useScrollbar,
-                        'ov-padding': useScrollbar && scrollbarOpts.padding,
-                        'ov-x--auto-hide': useScrollbar && scrollXAutoHide,
-                        'ov-y--auto-hide': useScrollbar && scrollYAutoHide,
+                        'is--virtual-scrollbar': isVScrollbar,
+                        'ov-padding': isVScrollbar && scrollbarOpts.padding,
+                        'ov-x--auto-hide': isVScrollbar && scrollXAutoHide,
+                        'ov-y--auto-hide': isVScrollbar && scrollYAutoHide,
                         'overflow-y': yThumbHeight,
                         'overflow-x': xThumbWidth
                     }]
@@ -3864,8 +3731,8 @@ var GanttViewComponent = defineVxeComponent({
             ]);
         };
         const renderVN = () => {
-            const { useScrollbar } = ganttProps;
             const { overflowX, overflowY, scrollXLoad, scrollYLoad } = reactData;
+            const isVScrollbar = computeIsVScrollbar.value;
             const scrollbarXToTop = computeScrollbarXToTop.value;
             return h('div', {
                 ref: refElem,
@@ -3878,7 +3745,7 @@ var GanttViewComponent = defineVxeComponent({
             }, [
                 h('div', {
                     class: 'vxe-gantt-view--render-wrapper'
-                }, useScrollbar
+                }, isVScrollbar
                     ? [renderVirtualBody()]
                     : (scrollbarXToTop
                         ? [
@@ -3900,6 +3767,14 @@ var GanttViewComponent = defineVxeComponent({
             ]);
         };
         const reScrollFlag = ref(0);
+        watch(computeGanttIsVScrollbar, () => {
+            nextTick(() => {
+                bindScrollbarResize();
+                nextTick(() => {
+                    reScrollFlag.value++;
+                });
+            });
+        });
         watch(computeScrollbarXToTop, () => {
             reScrollFlag.value++;
         });
@@ -3928,22 +3803,7 @@ var GanttViewComponent = defineVxeComponent({
         });
         onMounted(() => {
             nextTick(() => {
-                const { useScrollbar } = ganttProps;
-                const { elemStore } = internalData;
-                const el = refElem.value;
-                if (useScrollbar) {
-                    const viewInnerEl = getRefElem(elemStore['main-body-table']);
-                    const scrollObserver = globalResize.create(() => {
-                        reScrollFlag.value++;
-                    });
-                    if (el) {
-                        scrollObserver.observe(el);
-                    }
-                    if (viewInnerEl) {
-                        scrollObserver.observe(viewInnerEl);
-                    }
-                    internalData.scrollObserver = scrollObserver;
-                }
+                bindScrollbarResize();
             });
             globalEvents$1.on($xeGanttView, 'resize', handleGlobalResizeEvent);
         });
@@ -4080,6 +3940,7 @@ var VxeGanttComponent = defineVxeComponent({
         const VxeUITooltipComponent = VxeUI.getComponent('VxeTooltip');
         const scrollDefaultConf = Object.assign({}, getConfig().scrollbar);
         const { computeSize } = useFns.useSize(props);
+        const { computeIsVScrollbar } = useFns.useVScrollbar(props);
         const reactData = reactive(createReactData());
         const internalData = createInternalData();
         const refElem = ref();
@@ -4284,8 +4145,9 @@ var VxeGanttComponent = defineVxeComponent({
             return taskBarOpts.showCriticalPath;
         });
         const computeWrapperStyle = computed(() => {
-            const { height, maxHeight, useScrollbar, taskBarSubviewConfig } = props;
+            const { height, maxHeight, taskBarSubviewConfig } = props;
             const { isZMax, tZindex, overflowY, scrollbarWidth } = reactData;
+            const isVScrollbar = computeIsVScrollbar.value;
             const taskViewOpts = computeTaskViewOpts.value;
             const { viewStyle, tableStyle } = taskViewOpts;
             const taskBarOpts = computeTaskBarOpts.value;
@@ -4298,7 +4160,7 @@ var VxeGanttComponent = defineVxeComponent({
             const barWidth = computeScrollYWidth.value;
             const barHeight = computeScrollXHeight.value;
             const stys = {
-                '--vxe-ui-gantt-scrollbar-width': (overflowY ? (useScrollbar ? 'var(--vxe-ui-scrollbar-y-width)' : (scrollbarWidth + 'px')) : '')
+                '--vxe-ui-gantt-scrollbar-width': (overflowY ? (isVScrollbar ? 'var(--vxe-ui-scrollbar-y-width)' : (scrollbarWidth + 'px')) : '')
             };
             if (cpLineColor) {
                 stys['--vxe-ui-gantt-view-bar-critical-path-line-color'] = cpLineColor;
@@ -4491,6 +4353,8 @@ var VxeGanttComponent = defineVxeComponent({
             refPopupContainerElem
         };
         const computeMaps = {
+            computeSize,
+            computeIsVScrollbar,
             computeProxyOpts,
             computePagerOpts,
             computeFormOpts,
@@ -6397,8 +6261,8 @@ var VxeGanttComponent = defineVxeComponent({
             ]);
         };
         const renderChildLayout = (layoutKeys) => {
-            const { useScrollbar } = props;
             const { showLeftView, showRightView } = reactData;
+            const isVScrollbar = computeIsVScrollbar.value;
             const taskSplitOpts = computeTaskSplitOpts.value;
             const scrollbarXToTop = computeScrollbarXToTop.value;
             const scrollbarYToLeft = computeScrollbarYToLeft.value;
@@ -6422,9 +6286,9 @@ var VxeGanttComponent = defineVxeComponent({
                             ref: refGanttContainerElem,
                             key: 'tv',
                             class: ['vxe-gantt--gantt-container', `sx-pos--${scrollbarXToTop ? 'top' : 'bottom'}`, `sy-pos--${scrollbarYToLeft ? 'left' : 'right'}`, {
-                                    'is--virtual-scrollbar': useScrollbar,
-                                    'ov-x--auto-hide': useScrollbar && scrollXAutoHide,
-                                    'ov-y--auto-hide': useScrollbar && scrollYAutoHide,
+                                    'is--virtual-scrollbar': isVScrollbar,
+                                    'ov-x--auto-hide': isVScrollbar && scrollXAutoHide,
+                                    'ov-y--auto-hide': isVScrollbar && scrollYAutoHide,
                                     'show--left': showLeftView,
                                     'hide--left': !showLeftView,
                                     'show--right': showRightView,
@@ -6544,6 +6408,7 @@ var VxeGanttComponent = defineVxeComponent({
         const renderVN = () => {
             const { showLeftView, showRightView, overflowY, overflowX, showSplitAnimat } = reactData;
             const vSize = computeSize.value;
+            const isVScrollbar = computeIsVScrollbar.value;
             const wrapperStyle = computeWrapperStyle.value;
             const isLoading = computeIsLoading.value;
             const taskSplitOpts = computeTaskSplitOpts.value;
@@ -6554,6 +6419,7 @@ var VxeGanttComponent = defineVxeComponent({
                 ref: refElem,
                 class: ['vxe-gantt', `border--${tableBorder}`, `sx-pos--${scrollbarXToTop ? 'top' : 'bottom'}`, `sy-pos--${scrollbarYToLeft ? 'left' : 'right'}`, {
                         [`size--${vSize}`]: vSize,
+                        'is--virtual-scrollbar': isVScrollbar,
                         'is--round': props.round,
                         'show--animat': taskSplitOpts.animation,
                         'is--maximize': reactData.isZMax,

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

@@ -236,8 +236,8 @@ export default defineVxeComponent({
                                     },
                                     onMousedown(evnt) {
                                         evnt.stopPropagation();
-                                        if ($xeGantt.handleTaskBarMousedownEvent) {
-                                            $xeGantt.handleTaskBarMousedownEvent(evnt, childCtParams);
+                                        if ($xeGantt.handleTaskBarModnEvent) {
+                                            $xeGantt.handleTaskBarModnEvent(evnt, childCtParams);
                                         }
                                     }
                                 }, [
@@ -341,8 +341,8 @@ export default defineVxeComponent({
                         $xeGantt.handleTaskBarDblclickEvent(evnt, barParams);
                     },
                     onMousedown(evnt) {
-                        if ($xeGantt.handleTaskBarMousedownEvent) {
-                            $xeGantt.handleTaskBarMousedownEvent(evnt, barParams);
+                        if ($xeGantt.handleTaskBarModnEvent) {
+                            $xeGantt.handleTaskBarModnEvent(evnt, barParams);
                         }
                     }
                 }, cbVNs)