vxe-gantt 3.9.0-beta.0 → 3.9.0-beta.1

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

@@ -252,8 +252,8 @@ export default defineVxeComponent({
                                         },
                                         mousedown(evnt) {
                                             evnt.stopPropagation();
-                                            if ($xeGantt.handleTaskBarMousedownEvent) {
-                                                $xeGantt.handleTaskBarMousedownEvent(evnt, childCtParams);
+                                            if ($xeGantt.handleTaskBarModnEvent) {
+                                                $xeGantt.handleTaskBarModnEvent(evnt, childCtParams);
                                             }
                                         }
                                     }
@@ -384,8 +384,8 @@ export default defineVxeComponent({
                             $xeGantt.handleTaskBarDblclickEvent(evnt, barParams);
                         },
                         mousedown(evnt) {
-                            if ($xeGantt.handleTaskBarMousedownEvent) {
-                                $xeGantt.handleTaskBarMousedownEvent(evnt, barParams);
+                            if ($xeGantt.handleTaskBarModnEvent) {
+                                $xeGantt.handleTaskBarModnEvent(evnt, barParams);
                             }
                         }
                     }

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

@@ -1680,7 +1680,13 @@ export default defineVxeComponent({
             reScrollFlag: 0
         };
     },
-    computed: Object.assign(Object.assign({}, {}), { computeScrollbarXOpts() {
+    computed: Object.assign(Object.assign({}, {}), { computeGanttIsVScrollbar() {
+            const $xeGanttView = this;
+            const $xeGantt = $xeGanttView.$xeGantt;
+            const isVScrollbar = $xeGantt.computeIsVScrollbar;
+            return isVScrollbar;
+        },
+        computeScrollbarXOpts() {
             const $xeGanttView = this;
             const $xeGantt = $xeGanttView.$xeGantt;
             const scrollbarOpts = $xeGantt.computeScrollbarOpts;
@@ -2241,6 +2247,32 @@ export default defineVxeComponent({
             handleLazyRecalculate($xeGanttView);
         },
         // 滚动条
+        bindScrollbarResize() {
+            const $xeGanttView = this;
+            const internalData = $xeGanttView.internalData;
+            const { elemStore, scrollObserver } = internalData;
+            const isVScrollbar = $xeGanttView.$refs.computeIsVScrollbar;
+            if (isVScrollbar) {
+                if (!scrollObserver) {
+                    const el = $xeGanttView.$refs.refElem;
+                    const viewInnerXEl = getRefElem(elemStore['main-body-xSpace']);
+                    const viewInnerYEl = getRefElem(elemStore['main-body-xSpace']);
+                    const scrollObserver = globalResize.create(() => {
+                        $xeGanttView.reScrollFlag++;
+                    });
+                    if (el) {
+                        scrollObserver.observe(el);
+                    }
+                    if (viewInnerXEl) {
+                        scrollObserver.observe(viewInnerXEl);
+                    }
+                    if (viewInnerYEl) {
+                        scrollObserver.observe(viewInnerYEl);
+                    }
+                    internalData.scrollObserver = scrollObserver;
+                }
+            }
+        },
         updateThumbSize() {
             const $xeGanttView = this;
             const reactData = $xeGanttView.reactData;
@@ -2535,11 +2567,10 @@ export default defineVxeComponent({
             const $xeGantt = $xeGanttView.$xeGantt;
             const reactData = $xeGanttView.reactData;
             const ganttReactData = $xeGantt.reactData;
-            const ganttProps = $xeGantt;
             const { showLeftView } = ganttReactData;
-            const { useScrollbar } = ganttProps;
             const { xThumbWidth, yThumbHeight } = reactData;
             const scrollbarOpts = $xeGantt.computeScrollbarOpts;
+            const isVScrollbar = $xeGantt.computeIsVScrollbar;
             const scrollXAutoHide = $xeGanttView.computeScrollXAutoHide;
             const scrollYAutoHide = $xeGanttView.computeScrollYAutoHide;
             const scrollXVisible = $xeGanttView.computeScrollXVisible;
@@ -2550,10 +2581,10 @@ export default 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
                     }]
@@ -2611,9 +2642,8 @@ export default defineVxeComponent({
             const $xeGanttView = this;
             const $xeGantt = $xeGanttView.$xeGantt;
             const reactData = $xeGanttView.reactData;
-            const ganttProps = $xeGantt;
-            const { useScrollbar } = ganttProps;
             const { overflowX, overflowY, scrollXLoad, scrollYLoad } = reactData;
+            const isVScrollbar = $xeGantt.computeIsVScrollbar;
             const scrollbarXToTop = $xeGantt.computeScrollbarXToTop;
             return h('div', {
                 ref: 'refElem',
@@ -2626,7 +2656,7 @@ export default defineVxeComponent({
             }, [
                 h('div', {
                     class: 'vxe-gantt-view--render-wrapper'
-                }, useScrollbar
+                }, isVScrollbar
                     ? [$xeGanttView.renderVirtualBody(h)]
                     : (scrollbarXToTop
                         ? [
@@ -2649,6 +2679,15 @@ export default defineVxeComponent({
         }
     },
     watch: {
+        computeGanttIsVScrollbar() {
+            const $xeGanttView = this;
+            $xeGanttView.$nextTick(() => {
+                $xeGanttView.bindScrollbarResize();
+                $xeGanttView.$nextTick(() => {
+                    $xeGanttView.reScrollFlag++;
+                });
+            });
+        },
         computeScrollbarXToTop() {
             const $xeGanttView = this;
             $xeGanttView.reScrollFlag++;
@@ -2685,26 +2724,8 @@ export default defineVxeComponent({
     },
     mounted() {
         const $xeGanttView = this;
-        const $xeGantt = $xeGanttView.$xeGantt;
-        const internalData = $xeGanttView.internalData;
         $xeGanttView.$nextTick(() => {
-            const ganttProps = $xeGantt;
-            const { useScrollbar } = ganttProps;
-            const { elemStore } = internalData;
-            const el = $xeGanttView.$refs.refElem;
-            if (useScrollbar) {
-                const viewInnerEl = getRefElem(elemStore['main-body-table']);
-                const scrollObserver = globalResize.create(() => {
-                    $xeGanttView.reScrollFlag++;
-                });
-                if (el) {
-                    scrollObserver.observe(el);
-                }
-                if (viewInnerEl) {
-                    scrollObserver.observe(viewInnerEl);
-                }
-                internalData.scrollObserver = scrollObserver;
-            }
+            $xeGanttView.bindScrollbarResize();
         });
         globalEvents.on($xeGanttView, 'resize', $xeGanttView.handleGlobalResizeEvent);
     },

package/es/gantt/src/gantt.js

@@ -136,7 +136,8 @@ function createReactData() {
 export default {
     name: 'VxeGantt',
     mixins: [
-        globalMixins.sizeMixin
+        globalMixins.sizeMixin,
+        globalMixins.vScrollbarMixin
     ],
     props: Object.assign(Object.assign({}, tableProps), { columns: Array, pagerConfig: Object, proxyConfig: Object, toolbarConfig: Object, formConfig: Object, zoomConfig: Object, links: Array, layouts: Array, taskConfig: Object, taskViewScaleConfig: Object, taskNowLineConfig: Object, taskViewConfig: Object, taskLinkConfig: Object, taskBarConfig: Object, taskBarMilestoneConfig: Object, taskCriticalPathConfig: Object, taskBarSubviewConfig: Object, taskBarTooltipConfig: Object, taskSplitConfig: Object, taskBarResizeConfig: Object, taskBarResizeTooltipConfig: Object, taskBarMoveConfig: Object, taskBarMoveTooltipConfig: Object, size: {
             type: String,
@@ -407,8 +408,9 @@ export default {
             const $xeGantt = this;
             const props = $xeGantt;
             const reactData = $xeGantt.reactData;
-            const { height, maxHeight, useScrollbar, taskBarSubviewConfig } = props;
+            const { height, maxHeight, taskBarSubviewConfig } = props;
             const { isZMax, tZindex, overflowY, scrollbarWidth } = reactData;
+            const isVScrollbar = $xeGantt.computeIsVScrollbar;
             const taskViewOpts = $xeGantt.computeTaskViewOpts;
             const { viewStyle, tableStyle } = taskViewOpts;
             const taskBarOpts = $xeGantt.computeTaskBarOpts;
@@ -421,7 +423,7 @@ export default {
             const barWidth = $xeGantt.computeScrollYWidth;
             const barHeight = $xeGantt.computeScrollXHeight;
             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;
@@ -2649,10 +2651,9 @@ export default {
         },
         renderChildLayout(h, layoutKeys) {
             const $xeGantt = this;
-            const props = $xeGantt;
             const reactData = $xeGantt.reactData;
-            const { useScrollbar } = props;
             const { showLeftView, showRightView } = reactData;
+            const isVScrollbar = $xeGantt.computeIsVScrollbar;
             const taskSplitOpts = $xeGantt.computeTaskSplitOpts;
             const scrollbarXToTop = $xeGantt.computeScrollbarXToTop;
             const scrollbarYToLeft = $xeGantt.computeScrollbarYToLeft;
@@ -2674,7 +2675,7 @@ export default {
                             ref: 'refGanttContainerElem',
                             key: 'tv',
                             class: ['vxe-gantt--gantt-container', `sx-pos--${scrollbarXToTop ? 'top' : 'bottom'}`, `sy-pos--${scrollbarYToLeft ? 'left' : 'right'}`, {
-                                    'is--virtual-scrollbar': useScrollbar,
+                                    'is--virtual-scrollbar': isVScrollbar,
                                     'show--left': showLeftView,
                                     'hide--left': !showLeftView,
                                     'show--right': showRightView,
@@ -2804,6 +2805,7 @@ export default {
             const reactData = $xeGantt.reactData;
             const { showLeftView, showRightView, overflowY, overflowX, showSplitAnimat } = reactData;
             const vSize = $xeGantt.computeSize;
+            const isVScrollbar = $xeGantt.computeIsVScrollbar;
             const wrapperStyle = $xeGantt.computeWrapperStyle;
             const isLoading = $xeGantt.computeIsLoading;
             const taskSplitOpts = $xeGantt.computeTaskSplitOpts;
@@ -2814,6 +2816,7 @@ export default {
                 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/ui/index.js

@@ -1,6 +1,6 @@
 import { VxeUI } from '@vxe-ui/core';
 const { setConfig, setIcon } = VxeUI;
-VxeUI.ganttVersion = "3.9.0-beta.0";
+VxeUI.ganttVersion = "3.9.0-beta.1";
 const ymdFormat = 'yyyy-MM-dd';
 const ymdhmsFormat = 'yyyy-MM-dd HH:mm:ss';
 setConfig({

package/es/ui/src/log.js

@@ -1,6 +1,6 @@
 import { VxeUI } from '@vxe-ui/core';
 const { log } = VxeUI;
-const ganttVersion = `gantt v${"3.9.0-beta.0"}`;
+const ganttVersion = `gantt v${"3.9.0-beta.1"}`;
 export function createComponentLog(name) {
     const uiVersion = VxeUI.uiVersion ? `ui v${VxeUI.uiVersion}` : '';
     const tableVersion = VxeUI.tableVersion ? `table v${VxeUI.tableVersion}` : '';

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

@@ -276,8 +276,8 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
                   },
                   mousedown: function mousedown(evnt) {
                     evnt.stopPropagation();
-                    if ($xeGantt.handleTaskBarMousedownEvent) {
-                      $xeGantt.handleTaskBarMousedownEvent(evnt, childCtParams);
+                    if ($xeGantt.handleTaskBarModnEvent) {
+                      $xeGantt.handleTaskBarModnEvent(evnt, childCtParams);
                     }
                   }
                 }
@@ -385,8 +385,8 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
             $xeGantt.handleTaskBarDblclickEvent(evnt, barParams);
           },
           mousedown: function mousedown(evnt) {
-            if ($xeGantt.handleTaskBarMousedownEvent) {
-              $xeGantt.handleTaskBarMousedownEvent(evnt, barParams);
+            if ($xeGantt.handleTaskBarModnEvent) {
+              $xeGantt.handleTaskBarModnEvent(evnt, barParams);
             }
           }
         }

package/lib/gantt/src/gantt-chart.min.js

@@ -1 +1 @@
-Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _comp=require("../../ui/src/comp"),_core=require("@vxe-ui/core"),_xeUtils=_interopRequireDefault(require("xe-utils")),_util=require("./util"),_utils=require("../../ui/src/utils");function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}function _toConsumableArray(e){return _arrayWithoutHoles(e)||_iterableToArray(e)||_unsupportedIterableToArray(e)||_nonIterableSpread()}function _nonIterableSpread(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function _unsupportedIterableToArray(e,t){var a;if(e)return"string"==typeof e?_arrayLikeToArray(e,t):"Map"===(a="Object"===(a={}.toString.call(e).slice(8,-1))&&e.constructor?e.constructor.name:a)||"Set"===a?Array.from(e):"Arguments"===a||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(a)?_arrayLikeToArray(e,t):void 0}function _iterableToArray(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}function _arrayWithoutHoles(e){if(Array.isArray(e))return _arrayLikeToArray(e)}function _arrayLikeToArray(e,t){(null==t||t>e.length)&&(t=e.length);for(var a=0,r=Array(t);a<t;a++)r[a]=e[a];return r}var getIcon=_core.VxeUI.getIcon,renderEmptyElement=_core.VxeUI.renderEmptyElement,sourceType="gantt",viewType="chart",_default=exports.default=(0,_comp.defineVxeComponent)({name:"VxeGanttViewChart",inject:{$xeGantt:{default:null},$xeGanttView:{default:null}},props:{},data:function(){return{}},computed:Object.assign({},{}),methods:{renderTaskBar:function(w,g,e,t,a,r,n,i,O){var h,f,m=this.$xeGantt,V=g.resizeHeightFlag,G=g.pendingRowFlag,o=g.fullAllDataRowIdData,F=g.pendingRowMaps,s=g.computeCellOpts,l=g.computeRowOpts,c=g.computeDefaultRowHeight,u=g.computeTreeOpts,u=u.children||u.childrenField,d=m.reactData,v=m.internalData,p=m.$scopedSlots,b=p.taskBar||p["task-bar"],p=p.taskBarOverview||p["task-bar-overview"],x=m.treeConfig,L=m.taskBarMilestoneConfig,j=m.taskBarSubviewConfig,k=d.activeLink,N=d.activeBarRowid,W=d.criticalPathFlag,P=v.criticalRowMaps,q=m.computeTitleField,H=m.computeProgressField,z=m.computeTypeField,d=m.computeTaskBarOpts,y=m.computeTaskBarMilestoneOpts,T=m.computeTaskBarSubviewOpts,K=T.showOverview,_=T.barStyle,E=m.computeScaleUnit,C={$gantt:m,source:sourceType,type:viewType,scaleType:E,row:e,$rowIndex:r,rowIndex:a,_rowIndex:n},B=d.showProgress,Y=d.showCriticalPath,S=d.showContent,A=d.contentMethod,I=d.barStyle,$=d.moveable,r=d.showTooltip,R=_xeUtils.default.isFunction(I),a=(I?R?I(C):I:{})||{},n=a.round,d=a.bgColor,U=a.completedBgColor,a=a.style,o=o[t]||{},V=V?(0,_util.getCellRestHeight)(o,s,l,c):0,o=(0,_utils.getStringValue)(_xeUtils.default.get(e,q)),s=B?Math.min(100,Math.max(0,_xeUtils.default.toNumber(_xeUtils.default.get(e,H)))):0,l=(0,_util.getTaskType)(_xeUtils.default.get(e,z)),c=!(!(0,_utils.hasEnableConf)(L,y)||!(0,_util.hasMilestoneTask)(l)),M=Object.assign({},C),D={},s={width:"".concat(s||0,"%")},d=(c||R&&(d&&(D["--vxe-ui-gantt-view-task-bar-background-color"]=d),U)&&(D["--vxe-ui-gantt-view-task-bar-completed-background-color"]=U),a&&_xeUtils.default.assign(D,a),[]);return m.renderGanttTaskBarContent?d=m.renderGanttTaskBarContent(w,M,{$gantt:m,$table:g,rowid:t}):(U=!(!(0,_utils.hasEnableConf)(j,T)||!(0,_util.hasSubviewTask)(l)),A&&(o=(0,_utils.getStringValue)(A({row:e,title:o,scaleType:E}))),h={},r&&(h.mouseover=function(e){var t=v.dragBarRow,a=Object.assign({$event:e},M);t||m.triggerTaskBarTooltipEvent(e,a),m.dispatchEvent("task-bar-mouseenter",a,e)},h.mouseleave=function(e){var t=v.dragBarRow,a=Object.assign({$event:e},M);t||m.handleTaskBarTooltipLeaveEvent(e,a),m.dispatchEvent("task-bar-mouseleave",a,e)}),U&&x&&i&&i.length?O?K&&d.push(w("div",{key:"vcso",class:"vxe-gantt-view--chart-subview-wrapper is--overview"},[w("div",{key:t,attrs:{rowid:t},class:["vxe-gantt-view--chart-subview-row",{"is--progress":B,"is--round":n,"is--move":$}]},[w("div",{attrs:{rowid:t},class:[p?"vxe-gantt-view--chart-subview-custom-bar":"vxe-gantt-view--chart-subview-bar","is--".concat(l)]},[p?w("div",{key:"cbc",class:"vxe-gantt-view--chart-subview-custom-bar-content-wrapper"},m.callSlot(p,C,w)):w("div",{class:"vxe-gantt-view--chart-subview-bar-content-wrapper"},[S?w("div",{class:"vxe-gantt-view--chart-content"},o):renderEmptyElement(m)])])])])):(f=[],_xeUtils.default.eachTree(i,function(e){var t,a,r={$gantt:m,source:sourceType,type:viewType,scaleType:E,row:e,$rowIndex:g.getRowIndex(e),rowIndex:g.getVMRowIndex(e),_rowIndex:g.getVTRowIndex(e)},n=_xeUtils.default.isFunction(_),n=_xeUtils.default.assign({},(I?R?I(r):I:{})||{},(_?n?_(r):_:{})||{}),i=n.round,o=n.bgColor,s=n.completedBgColor,l=n.style,c=g.getRowid(e),u=(0,_utils.getStringValue)(_xeUtils.default.get(e,q)),d=B?Math.min(100,Math.max(0,_xeUtils.default.toNumber(_xeUtils.default.get(e,H)))):0,v=(0,_util.getTaskType)(_xeUtils.default.get(e,z)),p=!(!(0,_utils.hasEnableConf)(L,y)||!(0,_util.hasMilestoneTask)(v));(!(0,_utils.hasEnableConf)(j,T)||!(0,_util.hasSubviewTask)(v))&&(t={},d={width:"".concat(d||0,"%")},p||(o&&(t["--vxe-ui-gantt-view-task-bar-background-color"]=o),s&&(d["--vxe-ui-gantt-view-task-bar-completed-background-color"]=s)),n.top&&(t.top=n.top),l&&_xeUtils.default.assign(t,l),a=Object.assign({},r),A&&(u=(0,_utils.getStringValue)(A({row:e,title:u,scaleType:E}))),f.push(w("div",{key:c,attrs:{rowid:c},class:["vxe-gantt-view--chart-subview-row","is--".concat(v),{"is--progress":B,"is--critical":Y&&W&&P.has(c),"is--round":i,"is--move":$,"row--pending":!!G&&!!F[c]}]},[w("div",{attrs:{rowid:c},class:[b?"vxe-gantt-view--chart-subview-custom-bar":"vxe-gantt-view--chart-subview-bar","is--".concat(v)],style:t,on:{click:function(e){e.stopPropagation(),m.handleTaskBarClickEvent(e,a)},dblclick:function(e){e.stopPropagation(),m.handleTaskBarDblclickEvent(e,a)},mousedown:function(e){e.stopPropagation(),m.handleTaskBarMousedownEvent&&m.handleTaskBarMousedownEvent(e,a)}}},[b?w("div",{key:"cbc",class:"vxe-gantt-view--chart-subview-custom-bar-content-wrapper",on:h},m.callSlot(b,a,w)):w("div",{class:"vxe-gantt-view--chart-subview-bar-content-wrapper",on:h},[B?w("div",{class:"vxe-gantt-view--chart-progress",style:d}):renderEmptyElement(m),S?w("div",{class:"vxe-gantt-view--chart-content"},u):renderEmptyElement(m)])])])))},{children:u}),d.push(w("div",{key:"vcsc",class:"vxe-gantt-view--chart-subview-wrapper is--inline"},f))):b?d.push(w("div",{key:"cbc",class:"vxe-gantt-view--chart-custom-bar-content-wrapper",on:h},m.callSlot(b,C,w))):c?(a=y.icon,r=y.iconStatus,U=y.iconStyle,x={$gantt:m,row:e},d.push(w("div",{key:"vcm",class:"vxe-gantt-view--chart-milestone-wrapper",on:h},[w("div",{class:["vxe-gantt-view--chart-milestone-icon",r?"theme--".concat(_xeUtils.default.isFunction(r)?r(x):r):""],style:U?Object.assign({},_xeUtils.default.isFunction(U)?U(x):U):void 0},[w("i",{class:(a?_xeUtils.default.isFunction(a)?a(x):a:"")||getIcon().GANTT_VIEW_TASK_MILESTONE})]),S?w("div",{class:"vxe-gantt-view--chart-milestone-content"},o):renderEmptyElement(m)]))):d.push(w("div",{key:"vbc",class:"vxe-gantt-view--chart-bar-content-wrapper",on:h},[B?w("div",{class:"vxe-gantt-view--chart-progress",style:s}):renderEmptyElement(m),S?w("div",{class:"vxe-gantt-view--chart-content"},o):renderEmptyElement(m)]))),w("div",{key:t,attrs:{rowid:t},class:["vxe-gantt-view--chart-row","is--".concat(l),{"is--progress":B,"is--critical":Y&&W&&P.has(t),"row--pending":!!G&&!!F[t],"is--round":n,"is--move":$}],style:{height:"".concat(V,"px")},on:{onDragstart:function(e){v.dragBarRow&&e.preventDefault()},contextmenu:function(e){m.handleTaskBarContextmenuEvent(e,M)}}},[w("div",{class:[b?"vxe-gantt-view--chart-custom-bar":"vxe-gantt-view--chart-bar","is--".concat(l),{"is--active":N===t,"active--link":k&&(t==="".concat(k.from)||t==="".concat(k.to))}],style:D,attrs:{rowid:t},on:{click:function(e){m.handleTaskBarClickEvent(e,C)},dblclick:function(e){m.handleTaskBarDblclickEvent(e,C)},mousedown:function(e){m.handleTaskBarMousedownEvent&&m.handleTaskBarMousedownEvent(e,C)}}},d)])},renderTaskRows:function(s,l,e){var c=this,t=c.$xeGanttView.reactData,u=l.treeConfig,d=l.treeExpandedFlag,v=l.fullAllDataRowIdData,p=l.treeExpandedMaps,a=l.computeTreeOpts,w=a.transform,g=a.children||a.childrenField,h=t.scrollYLoad,f=[];return e.forEach(function(e,t){var a=l.getRowid(e),r=v[a]||{},n=t,i=-1,r=(r&&(n=r.index,i=r._index),!1),o=[];u&&(o=e[g],r=!!d&&o&&0<o.length&&!!p[a]),f.push(c.renderTaskBar(s,l,e,a,n,t,i,o,r)),u&&r&&!h&&!w&&f.push.apply(f,_toConsumableArray(c.renderTaskRows(s,l,o)))}),f},renderVN:function(e){var t=this.$xeGantt,a=this.$xeGanttView,r=t.reactData,n=a.internalData.xeTable,i=t.$scopedSlots,r=r.dragLinkFromStore,o=a.reactData.tableData,s=t.computeTaskLinkOpts,a=a.computeNowLineLeft,l=s.isCurrent,c=s.isHover,u=t.computeTaskBarOpts.linkCreatable,i=i.taskNowLine||i["task-now-line"];return e("div",{ref:"refElem",class:["vxe-gantt-view--chart-wrapper",{"is--cl-drag":r.rowid}]},[0<a?e("div",{ref:"refNowLineElem",class:"vxe-gantt-view--chart-now-line",style:{left:a+"px"}},i?i({}):[]):renderEmptyElement(t),t.renderGanttTaskChartBefores?e("div",{ref:"refChartBeforeWrapperElem",class:["vxe-gantt-view--chart-before-wrapper",{"link--current":l,"link--hover":c}]},n&&(0,_utils.isEnableConf)(s)?t.renderGanttTaskChartBefores(e):[]):renderEmptyElement(t),e("div",{ref:"refTaskWrapperElem",class:["vxe-gantt-view--chart-task-wrapper",{"link--current":l,"link--create":u}]},n?this.renderTaskRows(e,n,o):[]),t.renderGanttTaskChartAfters?e("div",{ref:"refChartAfterWrapperElem",class:"vxe-gantt-view--chart-after-wrapper"},n&&(0,_utils.isEnableConf)(s)?t.renderGanttTaskChartAfters(e):[]):renderEmptyElement(t)])}},mounted:function(){var e=this,t=e.$xeGanttView.internalData.elemStore,a="main-chart-";t["".concat(a,"now-line")]=e.$refs.refNowLineElem,t["".concat(a,"task-wrapper")]=e.$refs.refTaskWrapperElem,t["".concat(a,"before-wrapper")]=e.$refs.refChartBeforeWrapperElem,t["".concat(a,"after-wrapper")]=e.$refs.refChartAfterWrapperElem},destroyed:function(){var e=this.$xeGanttView.internalData.elemStore,t="main-chart-";e["".concat(t,"now-line")]=null,e["".concat(t,"task-wrapper")]=null,e["".concat(t,"before-wrapper")]=null,e["".concat(t,"after-wrapper")]=null},render:function(e){return this.renderVN(e)}});
+Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _comp=require("../../ui/src/comp"),_core=require("@vxe-ui/core"),_xeUtils=_interopRequireDefault(require("xe-utils")),_util=require("./util"),_utils=require("../../ui/src/utils");function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}function _toConsumableArray(e){return _arrayWithoutHoles(e)||_iterableToArray(e)||_unsupportedIterableToArray(e)||_nonIterableSpread()}function _nonIterableSpread(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function _unsupportedIterableToArray(e,t){var a;if(e)return"string"==typeof e?_arrayLikeToArray(e,t):"Map"===(a="Object"===(a={}.toString.call(e).slice(8,-1))&&e.constructor?e.constructor.name:a)||"Set"===a?Array.from(e):"Arguments"===a||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(a)?_arrayLikeToArray(e,t):void 0}function _iterableToArray(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}function _arrayWithoutHoles(e){if(Array.isArray(e))return _arrayLikeToArray(e)}function _arrayLikeToArray(e,t){(null==t||t>e.length)&&(t=e.length);for(var a=0,r=Array(t);a<t;a++)r[a]=e[a];return r}var getIcon=_core.VxeUI.getIcon,renderEmptyElement=_core.VxeUI.renderEmptyElement,sourceType="gantt",viewType="chart",_default=exports.default=(0,_comp.defineVxeComponent)({name:"VxeGanttViewChart",inject:{$xeGantt:{default:null},$xeGanttView:{default:null}},props:{},data:function(){return{}},computed:Object.assign({},{}),methods:{renderTaskBar:function(w,g,e,t,a,r,n,i,O){var h,f,m=this.$xeGantt,V=g.resizeHeightFlag,G=g.pendingRowFlag,o=g.fullAllDataRowIdData,F=g.pendingRowMaps,s=g.computeCellOpts,l=g.computeRowOpts,c=g.computeDefaultRowHeight,u=g.computeTreeOpts,u=u.children||u.childrenField,d=m.reactData,v=m.internalData,p=m.$scopedSlots,b=p.taskBar||p["task-bar"],p=p.taskBarOverview||p["task-bar-overview"],x=m.treeConfig,L=m.taskBarMilestoneConfig,j=m.taskBarSubviewConfig,k=d.activeLink,N=d.activeBarRowid,W=d.criticalPathFlag,P=v.criticalRowMaps,q=m.computeTitleField,H=m.computeProgressField,z=m.computeTypeField,d=m.computeTaskBarOpts,y=m.computeTaskBarMilestoneOpts,T=m.computeTaskBarSubviewOpts,K=T.showOverview,_=T.barStyle,E=m.computeScaleUnit,C={$gantt:m,source:sourceType,type:viewType,scaleType:E,row:e,$rowIndex:r,rowIndex:a,_rowIndex:n},B=d.showProgress,Y=d.showCriticalPath,S=d.showContent,A=d.contentMethod,I=d.barStyle,$=d.moveable,r=d.showTooltip,R=_xeUtils.default.isFunction(I),a=(I?R?I(C):I:{})||{},n=a.round,d=a.bgColor,U=a.completedBgColor,a=a.style,o=o[t]||{},V=V?(0,_util.getCellRestHeight)(o,s,l,c):0,o=(0,_utils.getStringValue)(_xeUtils.default.get(e,q)),s=B?Math.min(100,Math.max(0,_xeUtils.default.toNumber(_xeUtils.default.get(e,H)))):0,l=(0,_util.getTaskType)(_xeUtils.default.get(e,z)),c=!(!(0,_utils.hasEnableConf)(L,y)||!(0,_util.hasMilestoneTask)(l)),M=Object.assign({},C),D={},s={width:"".concat(s||0,"%")},d=(c||R&&(d&&(D["--vxe-ui-gantt-view-task-bar-background-color"]=d),U)&&(D["--vxe-ui-gantt-view-task-bar-completed-background-color"]=U),a&&_xeUtils.default.assign(D,a),[]);return m.renderGanttTaskBarContent?d=m.renderGanttTaskBarContent(w,M,{$gantt:m,$table:g,rowid:t}):(U=!(!(0,_utils.hasEnableConf)(j,T)||!(0,_util.hasSubviewTask)(l)),A&&(o=(0,_utils.getStringValue)(A({row:e,title:o,scaleType:E}))),h={},r&&(h.mouseover=function(e){var t=v.dragBarRow,a=Object.assign({$event:e},M);t||m.triggerTaskBarTooltipEvent(e,a),m.dispatchEvent("task-bar-mouseenter",a,e)},h.mouseleave=function(e){var t=v.dragBarRow,a=Object.assign({$event:e},M);t||m.handleTaskBarTooltipLeaveEvent(e,a),m.dispatchEvent("task-bar-mouseleave",a,e)}),U&&x&&i&&i.length?O?K&&d.push(w("div",{key:"vcso",class:"vxe-gantt-view--chart-subview-wrapper is--overview"},[w("div",{key:t,attrs:{rowid:t},class:["vxe-gantt-view--chart-subview-row",{"is--progress":B,"is--round":n,"is--move":$}]},[w("div",{attrs:{rowid:t},class:[p?"vxe-gantt-view--chart-subview-custom-bar":"vxe-gantt-view--chart-subview-bar","is--".concat(l)]},[p?w("div",{key:"cbc",class:"vxe-gantt-view--chart-subview-custom-bar-content-wrapper"},m.callSlot(p,C,w)):w("div",{class:"vxe-gantt-view--chart-subview-bar-content-wrapper"},[S?w("div",{class:"vxe-gantt-view--chart-content"},o):renderEmptyElement(m)])])])])):(f=[],_xeUtils.default.eachTree(i,function(e){var t,a,r={$gantt:m,source:sourceType,type:viewType,scaleType:E,row:e,$rowIndex:g.getRowIndex(e),rowIndex:g.getVMRowIndex(e),_rowIndex:g.getVTRowIndex(e)},n=_xeUtils.default.isFunction(_),n=_xeUtils.default.assign({},(I?R?I(r):I:{})||{},(_?n?_(r):_:{})||{}),i=n.round,o=n.bgColor,s=n.completedBgColor,l=n.style,c=g.getRowid(e),u=(0,_utils.getStringValue)(_xeUtils.default.get(e,q)),d=B?Math.min(100,Math.max(0,_xeUtils.default.toNumber(_xeUtils.default.get(e,H)))):0,v=(0,_util.getTaskType)(_xeUtils.default.get(e,z)),p=!(!(0,_utils.hasEnableConf)(L,y)||!(0,_util.hasMilestoneTask)(v));(!(0,_utils.hasEnableConf)(j,T)||!(0,_util.hasSubviewTask)(v))&&(t={},d={width:"".concat(d||0,"%")},p||(o&&(t["--vxe-ui-gantt-view-task-bar-background-color"]=o),s&&(d["--vxe-ui-gantt-view-task-bar-completed-background-color"]=s)),n.top&&(t.top=n.top),l&&_xeUtils.default.assign(t,l),a=Object.assign({},r),A&&(u=(0,_utils.getStringValue)(A({row:e,title:u,scaleType:E}))),f.push(w("div",{key:c,attrs:{rowid:c},class:["vxe-gantt-view--chart-subview-row","is--".concat(v),{"is--progress":B,"is--critical":Y&&W&&P.has(c),"is--round":i,"is--move":$,"row--pending":!!G&&!!F[c]}]},[w("div",{attrs:{rowid:c},class:[b?"vxe-gantt-view--chart-subview-custom-bar":"vxe-gantt-view--chart-subview-bar","is--".concat(v)],style:t,on:{click:function(e){e.stopPropagation(),m.handleTaskBarClickEvent(e,a)},dblclick:function(e){e.stopPropagation(),m.handleTaskBarDblclickEvent(e,a)},mousedown:function(e){e.stopPropagation(),m.handleTaskBarModnEvent&&m.handleTaskBarModnEvent(e,a)}}},[b?w("div",{key:"cbc",class:"vxe-gantt-view--chart-subview-custom-bar-content-wrapper",on:h},m.callSlot(b,a,w)):w("div",{class:"vxe-gantt-view--chart-subview-bar-content-wrapper",on:h},[B?w("div",{class:"vxe-gantt-view--chart-progress",style:d}):renderEmptyElement(m),S?w("div",{class:"vxe-gantt-view--chart-content"},u):renderEmptyElement(m)])])])))},{children:u}),d.push(w("div",{key:"vcsc",class:"vxe-gantt-view--chart-subview-wrapper is--inline"},f))):b?d.push(w("div",{key:"cbc",class:"vxe-gantt-view--chart-custom-bar-content-wrapper",on:h},m.callSlot(b,C,w))):c?(a=y.icon,r=y.iconStatus,U=y.iconStyle,x={$gantt:m,row:e},d.push(w("div",{key:"vcm",class:"vxe-gantt-view--chart-milestone-wrapper",on:h},[w("div",{class:["vxe-gantt-view--chart-milestone-icon",r?"theme--".concat(_xeUtils.default.isFunction(r)?r(x):r):""],style:U?Object.assign({},_xeUtils.default.isFunction(U)?U(x):U):void 0},[w("i",{class:(a?_xeUtils.default.isFunction(a)?a(x):a:"")||getIcon().GANTT_VIEW_TASK_MILESTONE})]),S?w("div",{class:"vxe-gantt-view--chart-milestone-content"},o):renderEmptyElement(m)]))):d.push(w("div",{key:"vbc",class:"vxe-gantt-view--chart-bar-content-wrapper",on:h},[B?w("div",{class:"vxe-gantt-view--chart-progress",style:s}):renderEmptyElement(m),S?w("div",{class:"vxe-gantt-view--chart-content"},o):renderEmptyElement(m)]))),w("div",{key:t,attrs:{rowid:t},class:["vxe-gantt-view--chart-row","is--".concat(l),{"is--progress":B,"is--critical":Y&&W&&P.has(t),"row--pending":!!G&&!!F[t],"is--round":n,"is--move":$}],style:{height:"".concat(V,"px")},on:{onDragstart:function(e){v.dragBarRow&&e.preventDefault()},contextmenu:function(e){m.handleTaskBarContextmenuEvent(e,M)}}},[w("div",{class:[b?"vxe-gantt-view--chart-custom-bar":"vxe-gantt-view--chart-bar","is--".concat(l),{"is--active":N===t,"active--link":k&&(t==="".concat(k.from)||t==="".concat(k.to))}],style:D,attrs:{rowid:t},on:{click:function(e){m.handleTaskBarClickEvent(e,C)},dblclick:function(e){m.handleTaskBarDblclickEvent(e,C)},mousedown:function(e){m.handleTaskBarModnEvent&&m.handleTaskBarModnEvent(e,C)}}},d)])},renderTaskRows:function(s,l,e){var c=this,t=c.$xeGanttView.reactData,u=l.treeConfig,d=l.treeExpandedFlag,v=l.fullAllDataRowIdData,p=l.treeExpandedMaps,a=l.computeTreeOpts,w=a.transform,g=a.children||a.childrenField,h=t.scrollYLoad,f=[];return e.forEach(function(e,t){var a=l.getRowid(e),r=v[a]||{},n=t,i=-1,r=(r&&(n=r.index,i=r._index),!1),o=[];u&&(o=e[g],r=!!d&&o&&0<o.length&&!!p[a]),f.push(c.renderTaskBar(s,l,e,a,n,t,i,o,r)),u&&r&&!h&&!w&&f.push.apply(f,_toConsumableArray(c.renderTaskRows(s,l,o)))}),f},renderVN:function(e){var t=this.$xeGantt,a=this.$xeGanttView,r=t.reactData,n=a.internalData.xeTable,i=t.$scopedSlots,r=r.dragLinkFromStore,o=a.reactData.tableData,s=t.computeTaskLinkOpts,a=a.computeNowLineLeft,l=s.isCurrent,c=s.isHover,u=t.computeTaskBarOpts.linkCreatable,i=i.taskNowLine||i["task-now-line"];return e("div",{ref:"refElem",class:["vxe-gantt-view--chart-wrapper",{"is--cl-drag":r.rowid}]},[0<a?e("div",{ref:"refNowLineElem",class:"vxe-gantt-view--chart-now-line",style:{left:a+"px"}},i?i({}):[]):renderEmptyElement(t),t.renderGanttTaskChartBefores?e("div",{ref:"refChartBeforeWrapperElem",class:["vxe-gantt-view--chart-before-wrapper",{"link--current":l,"link--hover":c}]},n&&(0,_utils.isEnableConf)(s)?t.renderGanttTaskChartBefores(e):[]):renderEmptyElement(t),e("div",{ref:"refTaskWrapperElem",class:["vxe-gantt-view--chart-task-wrapper",{"link--current":l,"link--create":u}]},n?this.renderTaskRows(e,n,o):[]),t.renderGanttTaskChartAfters?e("div",{ref:"refChartAfterWrapperElem",class:"vxe-gantt-view--chart-after-wrapper"},n&&(0,_utils.isEnableConf)(s)?t.renderGanttTaskChartAfters(e):[]):renderEmptyElement(t)])}},mounted:function(){var e=this,t=e.$xeGanttView.internalData.elemStore,a="main-chart-";t["".concat(a,"now-line")]=e.$refs.refNowLineElem,t["".concat(a,"task-wrapper")]=e.$refs.refTaskWrapperElem,t["".concat(a,"before-wrapper")]=e.$refs.refChartBeforeWrapperElem,t["".concat(a,"after-wrapper")]=e.$refs.refChartAfterWrapperElem},destroyed:function(){var e=this.$xeGanttView.internalData.elemStore,t="main-chart-";e["".concat(t,"now-line")]=null,e["".concat(t,"task-wrapper")]=null,e["".concat(t,"before-wrapper")]=null,e["".concat(t,"after-wrapper")]=null},render:function(e){return this.renderVN(e)}});

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

@@ -1858,6 +1858,12 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
     };
   },
   computed: Object.assign(Object.assign({}, {}), {
+    computeGanttIsVScrollbar: function computeGanttIsVScrollbar() {
+      var $xeGanttView = this;
+      var $xeGantt = $xeGanttView.$xeGantt;
+      var isVScrollbar = $xeGantt.computeIsVScrollbar;
+      return isVScrollbar;
+    },
     computeScrollbarXOpts: function computeScrollbarXOpts() {
       var $xeGanttView = this;
       var $xeGantt = $xeGanttView.$xeGantt;
@@ -2446,6 +2452,33 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
       _handleLazyRecalculate($xeGanttView);
     },
     // 滚动条
+    bindScrollbarResize: function bindScrollbarResize() {
+      var $xeGanttView = this;
+      var internalData = $xeGanttView.internalData;
+      var elemStore = internalData.elemStore,
+        scrollObserver = internalData.scrollObserver;
+      var isVScrollbar = $xeGanttView.$refs.computeIsVScrollbar;
+      if (isVScrollbar) {
+        if (!scrollObserver) {
+          var el = $xeGanttView.$refs.refElem;
+          var viewInnerXEl = (0, _util.getRefElem)(elemStore['main-body-xSpace']);
+          var viewInnerYEl = (0, _util.getRefElem)(elemStore['main-body-xSpace']);
+          var _scrollObserver = globalResize.create(function () {
+            $xeGanttView.reScrollFlag++;
+          });
+          if (el) {
+            _scrollObserver.observe(el);
+          }
+          if (viewInnerXEl) {
+            _scrollObserver.observe(viewInnerXEl);
+          }
+          if (viewInnerYEl) {
+            _scrollObserver.observe(viewInnerYEl);
+          }
+          internalData.scrollObserver = _scrollObserver;
+        }
+      }
+    },
     updateThumbSize: function updateThumbSize() {
       var $xeGanttView = this;
       var reactData = $xeGanttView.reactData;
@@ -2715,12 +2748,11 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
       var $xeGantt = $xeGanttView.$xeGantt;
       var reactData = $xeGanttView.reactData;
       var ganttReactData = $xeGantt.reactData;
-      var ganttProps = $xeGantt;
       var showLeftView = ganttReactData.showLeftView;
-      var useScrollbar = ganttProps.useScrollbar;
       var xThumbWidth = reactData.xThumbWidth,
         yThumbHeight = reactData.yThumbHeight;
       var scrollbarOpts = $xeGantt.computeScrollbarOpts;
+      var isVScrollbar = $xeGantt.computeIsVScrollbar;
       var scrollXAutoHide = $xeGanttView.computeScrollXAutoHide;
       var scrollYAutoHide = $xeGanttView.computeScrollYAutoHide;
       var scrollXVisible = $xeGanttView.computeScrollXVisible;
@@ -2731,10 +2763,10 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
       return h('div', {
         key: 'lvb',
         class: ['vxe-gantt--layout-wrapper', "sx-pos--".concat(scrollbarXToTop ? 'top' : 'bottom'), "sy-pos--".concat(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
         }]
@@ -2778,12 +2810,11 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
       var $xeGanttView = this;
       var $xeGantt = $xeGanttView.$xeGantt;
       var reactData = $xeGanttView.reactData;
-      var ganttProps = $xeGantt;
-      var useScrollbar = ganttProps.useScrollbar;
       var overflowX = reactData.overflowX,
         overflowY = reactData.overflowY,
         scrollXLoad = reactData.scrollXLoad,
         scrollYLoad = reactData.scrollYLoad;
+      var isVScrollbar = $xeGantt.computeIsVScrollbar;
       var scrollbarXToTop = $xeGantt.computeScrollbarXToTop;
       return h('div', {
         ref: 'refElem',
@@ -2795,7 +2826,7 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
         }]
       }, [h('div', {
         class: 'vxe-gantt-view--render-wrapper'
-      }, useScrollbar ? [$xeGanttView.renderVirtualBody(h)] : scrollbarXToTop ? [$xeGanttView.renderScrollX(h), $xeGanttView.renderNativeBody(h)] : [$xeGanttView.renderNativeBody(h), $xeGanttView.renderScrollX(h)]), h('div', {
+      }, isVScrollbar ? [$xeGanttView.renderVirtualBody(h)] : scrollbarXToTop ? [$xeGanttView.renderScrollX(h), $xeGanttView.renderNativeBody(h)] : [$xeGanttView.renderNativeBody(h), $xeGanttView.renderScrollX(h)]), h('div', {
         class: 'vxe-gantt-view--render-vars'
       }, [h('div', {
         ref: 'refColInfoElem',
@@ -2804,6 +2835,15 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
     }
   },
   watch: {
+    computeGanttIsVScrollbar: function computeGanttIsVScrollbar() {
+      var $xeGanttView = this;
+      $xeGanttView.$nextTick(function () {
+        $xeGanttView.bindScrollbarResize();
+        $xeGanttView.$nextTick(function () {
+          $xeGanttView.reScrollFlag++;
+        });
+      });
+    },
     computeScrollbarXToTop: function computeScrollbarXToTop() {
       var $xeGanttView = this;
       $xeGanttView.reScrollFlag++;
@@ -2840,26 +2880,8 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
   },
   mounted: function mounted() {
     var $xeGanttView = this;
-    var $xeGantt = $xeGanttView.$xeGantt;
-    var internalData = $xeGanttView.internalData;
     $xeGanttView.$nextTick(function () {
-      var ganttProps = $xeGantt;
-      var useScrollbar = ganttProps.useScrollbar;
-      var elemStore = internalData.elemStore;
-      var el = $xeGanttView.$refs.refElem;
-      if (useScrollbar) {
-        var viewInnerEl = (0, _util.getRefElem)(elemStore['main-body-table']);
-        var scrollObserver = globalResize.create(function () {
-          $xeGanttView.reScrollFlag++;
-        });
-        if (el) {
-          scrollObserver.observe(el);
-        }
-        if (viewInnerEl) {
-          scrollObserver.observe(viewInnerEl);
-        }
-        internalData.scrollObserver = scrollObserver;
-      }
+      $xeGanttView.bindScrollbarResize();
     });
     globalEvents.on($xeGanttView, 'resize', $xeGanttView.handleGlobalResizeEvent);
   },