vxe-gantt 3.1.18 → 3.1.19

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

@@ -28,8 +28,6 @@ export default defineVxeComponent({
         renderTaskBar(h, $xeTable, row, rowid, rowIndex, $rowIndex, _rowIndex) {
             const _vm = this;
             const $xeGantt = _vm.$xeGantt;
-            const tableProps = $xeTable;
-            const { treeConfig } = tableProps;
             const tableReactData = $xeTable;
             const { resizeHeightFlag } = tableReactData;
             const tableInternalData = $xeTable;
@@ -38,9 +36,12 @@ export default defineVxeComponent({
             const rowOpts = $xeTable.computeRowOpts;
             const defaultRowHeight = $xeTable.computeDefaultRowHeight;
             const ganttProps = $xeGantt;
+            const ganttReactData = $xeGantt.reactData;
+            const ganttInternalData = $xeGantt.internalData;
             const ganttSlots = $xeGantt.$scopedSlots;
             const taskBarSlot = ganttSlots.taskBar || ganttSlots['task-bar'];
             const { taskBarMilestoneConfig } = ganttProps;
+            const { activeLink, activeBarRowid } = ganttReactData;
             const titleField = $xeGantt.computeTitleField;
             const progressField = $xeGantt.computeProgressField;
             const typeField = $xeGantt.computeTypeField;
@@ -84,25 +85,23 @@ export default defineVxeComponent({
                 rowIndex,
                 _rowIndex
             };
-            const ons = {
-                click(evnt) {
-                    $xeGantt.handleTaskBarClickEvent(evnt, barParams);
-                },
-                dblclick(evnt) {
-                    $xeGantt.handleTaskBarDblclickEvent(evnt, barParams);
-                },
-                mousedown(evnt) {
-                    if ($xeGantt.handleTaskBarMousedownEvent) {
-                        $xeGantt.handleTaskBarMousedownEvent(evnt, barParams);
-                    }
-                }
-            };
+            const ctOns = {};
             if (showTooltip) {
-                ons.mouseover = (evnt) => {
-                    $xeGantt.triggerTaskBarTooltipEvent(evnt, Object.assign({ $event: evnt }, ctParams));
+                ctOns.mouseover = (evnt) => {
+                    const { dragBarRow } = ganttInternalData;
+                    const ttParams = Object.assign({ $event: evnt }, ctParams);
+                    if (!dragBarRow) {
+                        $xeGantt.triggerTaskBarTooltipEvent(evnt, ttParams);
+                    }
+                    $xeGantt.dispatchEvent('task-bar-mouseenter', ttParams, evnt);
                 };
-                ons.mouseleave = (evnt) => {
-                    $xeGantt.handleTaskBarTooltipLeaveEvent(evnt, Object.assign({ $event: evnt }, ctParams));
+                ctOns.mouseleave = (evnt) => {
+                    const { dragBarRow } = ganttInternalData;
+                    const ttParams = Object.assign({ $event: evnt }, ctParams);
+                    if (!dragBarRow) {
+                        $xeGantt.handleTaskBarTooltipLeaveEvent(evnt, ttParams);
+                    }
+                    $xeGantt.dispatchEvent('task-bar-mouseleave', ttParams, evnt);
                 };
             }
             let cbVNs = [];
@@ -111,13 +110,16 @@ export default defineVxeComponent({
                     isMilestone,
                     title,
                     vbStyle,
-                    vpStyle
+                    vpStyle,
+                    rowid,
+                    ctOns
                 });
             }
             else if (taskBarSlot) {
                 cbVNs.push(h('div', {
                     key: 'cbc',
-                    class: 'vxe-gantt-view--chart-custom-bar-content'
+                    class: 'vxe-gantt-view--chart-custom-bar-content-wrapper',
+                    on: ctOns
                 }, $xeGantt.callSlot(taskBarSlot, barParams, h)));
             }
             else {
@@ -126,7 +128,8 @@ export default defineVxeComponent({
                     const tbmParams = { $gantt: $xeGantt, row };
                     cbVNs.push(h('div', {
                         key: 'vcm',
-                        class: 'vxe-gantt-view--chart-milestone-wrapper'
+                        class: 'vxe-gantt-view--chart-milestone-wrapper',
+                        on: ctOns
                     }, [
                         h('div', {
                             class: ['vxe-gantt-view--chart-milestone-icon', iconStatus ? `theme--${XEUtils.isFunction(iconStatus) ? iconStatus(tbmParams) : iconStatus}` : ''],
@@ -144,22 +147,29 @@ export default defineVxeComponent({
                     ]));
                 }
                 else {
-                    cbVNs.push(showProgress
-                        ? h('div', {
-                            key: 'vcp',
-                            class: 'vxe-gantt-view--chart-progress',
-                            style: vpStyle
-                        })
-                        : renderEmptyElement($xeGantt), showContent
-                        ? h('div', {
-                            key: 'vcc',
-                            class: 'vxe-gantt-view--chart-content'
-                        }, title)
-                        : renderEmptyElement($xeGantt));
+                    cbVNs.push(h('div', {
+                        key: 'vbc',
+                        class: 'vxe-gantt-view--chart-bar-content-wrapper',
+                        on: ctOns
+                    }, [
+                        showProgress
+                            ? h('div', {
+                                key: 'vcp',
+                                class: 'vxe-gantt-view--chart-progress',
+                                style: vpStyle
+                            })
+                            : renderEmptyElement($xeGantt),
+                        showContent
+                            ? h('div', {
+                                key: 'vcc',
+                                class: 'vxe-gantt-view--chart-content'
+                            }, title)
+                            : renderEmptyElement($xeGantt)
+                    ]));
                 }
             }
             return h('div', {
-                key: treeConfig ? rowid : $rowIndex,
+                key: rowid,
                 attrs: {
                     rowid
                 },
@@ -177,12 +187,27 @@ export default defineVxeComponent({
                 }
             }, [
                 h('div', {
-                    class: [taskBarSlot ? 'vxe-gantt-view--chart-custom-bar' : 'vxe-gantt-view--chart-bar', `is--${gettaskType(typeValue)}`],
+                    class: [taskBarSlot ? 'vxe-gantt-view--chart-custom-bar' : 'vxe-gantt-view--chart-bar', `is--${gettaskType(typeValue)}`, {
+                            'is--active': activeBarRowid === rowid,
+                            'active--link': activeLink && (rowid === `${activeLink.from}` || rowid === `${activeLink.to}`)
+                        }],
                     style: vbStyle,
                     attrs: {
                         rowid
                     },
-                    on: ons
+                    on: {
+                        click(evnt) {
+                            $xeGantt.handleTaskBarClickEvent(evnt, barParams);
+                        },
+                        dblclick(evnt) {
+                            $xeGantt.handleTaskBarDblclickEvent(evnt, barParams);
+                        },
+                        mousedown(evnt) {
+                            if ($xeGantt.handleTaskBarMousedownEvent) {
+                                $xeGantt.handleTaskBarMousedownEvent(evnt, barParams);
+                            }
+                        }
+                    }
                 }, cbVNs)
             ]);
         },
@@ -228,28 +253,44 @@ export default defineVxeComponent({
             const _vm = this;
             const $xeGantt = _vm.$xeGantt;
             const $xeGanttView = _vm.$xeGanttView;
+            const ganttReactData = $xeGantt.reactData;
             const ganttViewInternalData = $xeGanttView.internalData;
             const ganttViewReactData = $xeGanttView.reactData;
             const $xeTable = ganttViewInternalData.xeTable;
+            const { dragLinkFromStore } = ganttReactData;
             const { tableData } = ganttViewReactData;
             const taskLinkOpts = $xeGantt.computeTaskLinkOpts;
-            const { showArrow } = taskLinkOpts;
+            const taskBarOpts = $xeGantt.computeTaskBarOpts;
+            const { isCurrent, isHover } = taskLinkOpts;
+            const { linkCreatable } = taskBarOpts;
             return h('div', {
                 ref: 'refElem',
-                class: 'vxe-gantt-view--chart-wrapper'
+                class: ['vxe-gantt-view--chart-wrapper', {
+                        'is--cl-drag': dragLinkFromStore.rowid
+                    }]
             }, [
-                $xeGantt.renderGanttTaskLines
+                $xeGantt.renderGanttTaskChartBefores
                     ? h('div', {
-                        ref: 'reflineWrapperElem',
-                        class: ['vxe-gantt-view--chart-line-wrapper', {
-                                'show-arrow': showArrow
+                        ref: 'refChartBeforeWrapperElem',
+                        class: ['vxe-gantt-view--chart-before-wrapper', {
+                                'link--current': isCurrent,
+                                'link--hover': isHover
                             }]
-                    }, $xeTable && isEnableConf(taskLinkOpts) ? $xeGantt.renderGanttTaskLines(h) : [])
+                    }, $xeTable && isEnableConf(taskLinkOpts) ? $xeGantt.renderGanttTaskChartBefores(h) : [])
                     : renderEmptyElement($xeGantt),
                 h('div', {
                     ref: 'refTaskWrapperElem',
-                    class: 'vxe-gantt-view--chart-task-wrapper'
-                }, $xeTable ? _vm.renderTaskRows(h, $xeTable, tableData) : [])
+                    class: ['vxe-gantt-view--chart-task-wrapper', {
+                            'link--current': isCurrent,
+                            'link--create': linkCreatable
+                        }]
+                }, $xeTable ? _vm.renderTaskRows(h, $xeTable, tableData) : []),
+                $xeGantt.renderGanttTaskChartAfters
+                    ? h('div', {
+                        ref: 'refChartAfterWrapperElem',
+                        class: 'vxe-gantt-view--chart-after-wrapper'
+                    }, $xeTable && isEnableConf(taskLinkOpts) ? $xeGantt.renderGanttTaskChartAfters(h) : [])
+                    : renderEmptyElement($xeGantt)
             ]);
         }
     },
@@ -260,7 +301,8 @@ export default defineVxeComponent({
         const { elemStore } = ganttViewInternalData;
         const prefix = 'main-chart-';
         elemStore[`${prefix}task-wrapper`] = _vm.$refs.refTaskWrapperElem;
-        elemStore[`${prefix}line-wrapper`] = _vm.$refs.reflineWrapperElem;
+        elemStore[`${prefix}before-wrapper`] = _vm.$refs.refChartBeforeWrapperElem;
+        elemStore[`${prefix}after-wrapper`] = _vm.$refs.refChartAfterWrapperElem;
     },
     destroyed() {
         const _vm = this;
@@ -269,7 +311,8 @@ export default defineVxeComponent({
         const { elemStore } = ganttViewInternalData;
         const prefix = 'main-chart-';
         elemStore[`${prefix}task-wrapper`] = null;
-        elemStore[`${prefix}line-wrapper`] = null;
+        elemStore[`${prefix}before-wrapper`] = null;
+        elemStore[`${prefix}after-wrapper`] = null;
     },
     render(h) {
         return this.renderVN(h);

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

@@ -766,7 +766,7 @@ function updateStyle($xeGanttView) {
     reactData.scrollXWidth = viewTableWidth;
     return Promise.all([
         updateTaskChart($xeGanttView),
-        $xeGantt.handleUpdateTaskLink ? $xeGantt.handleUpdateTaskLink($xeGanttView) : null
+        $xeGantt.handleUpdateTaskLinkStyle ? $xeGantt.handleUpdateTaskLinkStyle($xeGanttView) : null
     ]);
 }
 function handleRecalculateStyle($xeGanttView) {
@@ -928,10 +928,15 @@ function updateScrollXSpace($xeGanttView) {
     if (scrollXSpaceEl) {
         scrollXSpaceEl.style.width = `${scrollXWidth}px`;
     }
-    const lineWrapper = getRefElem(elemStore['main-chart-line-wrapper']);
-    const svgElem = lineWrapper ? lineWrapper.firstElementChild : null;
-    if (svgElem) {
-        svgElem.style.width = `${scrollXWidth}px`;
+    const beforeWrapper = getRefElem(elemStore['main-chart-before-wrapper']);
+    const beforeSvgElem = beforeWrapper ? beforeWrapper.firstElementChild : null;
+    if (beforeSvgElem) {
+        beforeSvgElem.style.width = `${scrollXWidth}px`;
+    }
+    const afterWrapper = getRefElem(elemStore['main-chart-after-wrapper']);
+    const afterSvgElem = afterWrapper ? afterWrapper.firstElementChild : null;
+    if (afterSvgElem) {
+        afterSvgElem.style.width = `${scrollXWidth}px`;
     }
     calcScrollbar($xeGanttView);
     return $xeGanttView.$nextTick();
@@ -990,10 +995,15 @@ function updateScrollYSpace($xeGanttView) {
     if (scrollYSpaceEl) {
         scrollYSpaceEl.style.height = ySpaceHeight ? `${ySpaceHeight}px` : '';
     }
-    const lineWrapper = getRefElem(elemStore['main-chart-line-wrapper']);
-    const svgElem = lineWrapper ? lineWrapper.firstElementChild : null;
-    if (svgElem) {
-        svgElem.style.height = ySpaceHeight ? `${ySpaceHeight}px` : '';
+    const beforeWrapper = getRefElem(elemStore['main-chart-before-wrapper']);
+    const beforeSvgElem = beforeWrapper ? beforeWrapper.firstElementChild : null;
+    if (beforeSvgElem) {
+        beforeSvgElem.style.height = ySpaceHeight ? `${ySpaceHeight}px` : '';
+    }
+    const afterWrapper = getRefElem(elemStore['main-chart-after-wrapper']);
+    const afterSvgElem = afterWrapper ? afterWrapper.firstElementChild : null;
+    if (afterSvgElem) {
+        afterSvgElem.style.height = ySpaceHeight ? `${ySpaceHeight}px` : '';
     }
     reactData.scrollYTop = scrollYTop;
     reactData.scrollYHeight = scrollYHeight;

package/es/gantt/src/gantt.js

@@ -4,7 +4,6 @@ import XEUtils from 'xe-utils';
 import { getLastZIndex, nextZIndex, isEnableConf, formatText } from '../../ui/src/utils';
 import { getOffsetHeight, getPaddingTopBottomSize, getDomNode, toCssUnit, addClass, removeClass } from '../../ui/src/dom';
 import { getSlotVNs } from '../../ui/src/vn';
-import { getTaskLinkKey } from './util';
 import { warnLog, errLog } from '../../ui/src/log';
 import GanttViewComponent from './gantt-view';
 import { VxeTable as VxeTableComponent } from 'vxe-table';
@@ -58,32 +57,58 @@ XEUtils.each(VxeTableComponent.methods, (fn, name) => {
         return $xeTable && $xeTable[name](...args);
     };
 });
-function handleTaskAddLink(item, linkConfs, fromConfMaps, fromKeyMaps, uniqueMaps) {
-    if (item) {
-        const { type, from, to, lineStatus, lineColor, lineType, lineWidth, showArrow } = item;
-        const tlKey = getTaskLinkKey(from, to);
-        if (from && to && !uniqueMaps[tlKey]) {
-            let confs = fromConfMaps[from];
-            if (!confs) {
-                confs = fromConfMaps[from] = [];
-            }
-            const confObj = { type, from, to, lineStatus, lineColor, lineType, lineWidth, showArrow };
-            confs.push(confObj);
-            linkConfs.push(confObj);
-            fromKeyMaps[from] = confObj;
-            uniqueMaps[tlKey] = confObj;
-        }
-    }
-}
 function createInternalData() {
     return {
         linkFromConfMaps: {},
         linkFromKeyMaps: {},
         linkUniqueMaps: {},
         uFoot: false,
-        resizeTableWidth: 0
-        // barTipTimeout: null
-        // dragBarRow: null
+        resizeTableWidth: 0,
+        // barTipTimeout: null,
+        // dragBarRow: null,
+        // dragLineRow: null,
+        dragLinkToStore: {
+            rowid: null,
+            type: 0
+        }
+    };
+}
+function createReactData() {
+    var _a;
+    return {
+        tableLoading: false,
+        proxyInited: false,
+        isZMax: false,
+        tableLinks: [],
+        tableData: [],
+        filterData: [],
+        formData: {},
+        sortData: [],
+        footerData: [],
+        tZindex: 0,
+        tablePage: {
+            total: 0,
+            pageSize: ((_a = getConfig().pager) === null || _a === void 0 ? void 0 : _a.pageSize) || 10,
+            currentPage: 1
+        },
+        showLeftView: true,
+        showRightView: true,
+        taskScaleList: [],
+        barTipStore: {
+            row: null,
+            content: '',
+            visible: false,
+            params: null
+        },
+        dragLinkFromStore: {
+            rowid: null,
+            type: 0
+        },
+        activeBarRowid: null,
+        activeLink: null,
+        isActiveCeLe: false,
+        linkList: [],
+        upLinkFlag: 0
     };
 }
 export default {
@@ -104,36 +129,8 @@ export default {
         };
     },
     data() {
-        var _a;
         const xID = XEUtils.uniqueId();
-        const reactData = {
-            tableLoading: false,
-            proxyInited: false,
-            isZMax: false,
-            tableLinks: [],
-            tableData: [],
-            filterData: [],
-            formData: {},
-            sortData: [],
-            footerData: [],
-            tZindex: 0,
-            tablePage: {
-                total: 0,
-                pageSize: ((_a = getConfig().pager) === null || _a === void 0 ? void 0 : _a.pageSize) || 10,
-                currentPage: 1
-            },
-            showLeftView: true,
-            showRightView: true,
-            taskScaleList: [],
-            barTipStore: {
-                row: null,
-                content: '',
-                visible: false,
-                params: null
-            },
-            linkList: [],
-            upLinkFlag: 0
-        };
+        const reactData = createReactData();
         const internalData = createInternalData();
         return {
             xID,
@@ -249,6 +246,11 @@ export default {
             const { scales } = taskViewOpts;
             return scales;
         },
+        computeTaskLinkStyle() {
+            const $xeGantt = this;
+            const { lineType, lineWidth, lineStatus, lineColor } = $xeGantt.computeTaskLinkOpts;
+            return `${lineType || ''}_${lineWidth || ''}_${lineStatus || ''}_${lineColor || ''}`;
+        },
         /**
          * 已废弃，保留兼容
          * @deprecated
@@ -512,6 +514,12 @@ export default {
             const $xeGantt = this;
             $xeGantt.handleTaskScaleConfig();
             $xeGantt.refreshTaskView();
+        },
+        computeTaskLinkStyle() {
+            const $xeGantt = this;
+            if ($xeGantt.handleUpdateTaskLinkData) {
+                $xeGantt.handleUpdateTaskLinkData();
+            }
         }
     },
     methods: Object.assign(Object.assign({}, tableMethods), { dispatchEvent(type, params, evnt) {
@@ -1725,6 +1733,7 @@ export default {
         },
         handleTaskCellClickEvent(evnt, params) {
             const $xeGantt = this;
+            const reactData = $xeGantt.reactData;
             const $xeTable = $xeGantt.$refs.refTable;
             if ($xeTable) {
                 const tableProps = $xeTable;
@@ -1752,6 +1761,9 @@ export default {
                     $xeTable.handleToggleCheckRowEvent(evnt, params);
                 }
             }
+            reactData.isActiveCeLe = false;
+            reactData.activeBarRowid = null;
+            reactData.activeLink = null;
             $xeGantt.dispatchEvent('task-cell-click', params, evnt);
         },
         handleTaskCellDblclickEvent(evnt, params) {
@@ -1760,6 +1772,14 @@ export default {
         },
         handleTaskBarClickEvent(evnt, params) {
             const $xeGantt = this;
+            const reactData = $xeGantt.reactData;
+            const $xeTable = $xeGantt.$refs.refTable;
+            const taskBarOpts = $xeGantt.computeTaskBarOpts;
+            const { linkCreatable } = taskBarOpts;
+            const { row } = params;
+            reactData.isActiveCeLe = !!linkCreatable;
+            reactData.activeBarRowid = $xeTable ? $xeTable.getRowid(row) : row;
+            reactData.activeLink = null;
             $xeGantt.dispatchEvent('task-bar-click', params, evnt);
         },
         handleTaskBarDblclickEvent(evnt, params) {
@@ -1770,9 +1790,12 @@ export default {
             const $xeGantt = this;
             const reactData = $xeGantt.reactData;
             const internalData = $xeGantt.internalData;
-            const { barTipStore } = reactData;
-            const { dragBarRow } = internalData;
-            if (dragBarRow) {
+            const { barTipStore, activeLink } = reactData;
+            const { dragBarRow, dragLineRow } = internalData;
+            if (dragBarRow || dragLineRow) {
+                return;
+            }
+            if (activeLink) {
                 return;
             }
             const taskBarTooltipOpts = $xeGantt.computeTaskBarTooltipOpts;
@@ -1846,25 +1869,6 @@ export default {
             const { linkList } = reactData;
             reactData.tableLinks = linkList.slice(0);
         },
-        handleTaskAddLink,
-        handleTaskUpdateLinks(links) {
-            const $xeGantt = this;
-            const reactData = $xeGantt.reactData;
-            const internalData = $xeGantt.internalData;
-            const linkConfs = [];
-            const fromConfMaps = {};
-            const fromKeyMaps = {};
-            const uniqueMaps = {};
-            XEUtils.each(links || [], item => {
-                handleTaskAddLink(item, linkConfs, fromConfMaps, fromKeyMaps, uniqueMaps);
-            });
-            reactData.linkList = linkConfs;
-            internalData.linkFromConfMaps = fromConfMaps;
-            internalData.linkFromKeyMaps = fromKeyMaps;
-            internalData.linkUniqueMaps = uniqueMaps;
-            $xeGantt.handleTableLinks();
-            return $xeGantt.$nextTick();
-        },
         handleTaskHeaderContextmenuEvent(evnt, params) {
             const $xeGantt = this;
             const $xeTable = $xeGantt.$refs.refTable;
@@ -2456,7 +2460,7 @@ export default {
         if (props.expandConfig) {
             warnLog('vxe.error.notProp', ['expand-config']);
         }
-        if (!$xeGantt.handleUpdateTaskLink) {
+        if (!$xeGantt.handleUpdateTaskLinkData) {
             if (props.taskLinkConfig) {
                 warnLog('vxe.error.notProp', ['task-link-config']);
             }
@@ -2490,8 +2494,10 @@ export default {
                 }
             }
         });
-        if (props.links) {
-            $xeGantt.handleTaskUpdateLinks(props.links);
+        if ($xeGantt.handleTaskLoadLinks) {
+            if (props.links) {
+                $xeGantt.handleTaskLoadLinks(props.links);
+            }
         }
         $xeGantt.handleTaskScaleConfig();
         $xeGantt.initPages();
@@ -2508,6 +2514,11 @@ export default {
         $xeGantt.initGanttView();
         globalEvents.on($xeGantt, 'keydown', $xeGantt.handleGlobalKeydownEvent);
     },
+    beforeDestroy() {
+        const $xeGantt = this;
+        const reactData = $xeGantt.reactData;
+        XEUtils.assign(reactData, createReactData());
+    },
     destroyed() {
         const $xeGantt = this;
         const internalData = $xeGantt.internalData;

package/es/gantt/src/util.js

@@ -24,9 +24,6 @@ export function getTaskBarLeft(chartRest, viewCellWidth) {
 export function getTaskBarWidth(chartRest, viewCellWidth) {
     return Math.max(1, chartRest ? (Math.floor(viewCellWidth * chartRest.oWidthSize) - 1) : 0);
 }
-export function getTaskLinkKey(from, to) {
-    return `${from}_${to}`;
-}
 const taskTypeMaps = {
     milestone: true
 };

package/es/gantt/style.css

@@ -14,6 +14,11 @@
 .vxe-gantt-view--chart-row.is--round > .vxe-gantt-view--chart-bar, .vxe-gantt-view--chart-row.is--round > .vxe-gantt-view--chart-custom-bar {
   border-radius: var(--vxe-ui-gantt-view-task-bar-border-radius);
 }
+.vxe-gantt-view--chart-row.is--round > .vxe-gantt-view--chart-bar .vxe-gantt-view--chart-bar-content-wrapper,
+.vxe-gantt-view--chart-row.is--round > .vxe-gantt-view--chart-bar .vxe-gantt-view--chart-custom-bar-content-wrapper, .vxe-gantt-view--chart-row.is--round > .vxe-gantt-view--chart-custom-bar .vxe-gantt-view--chart-bar-content-wrapper,
+.vxe-gantt-view--chart-row.is--round > .vxe-gantt-view--chart-custom-bar .vxe-gantt-view--chart-custom-bar-content-wrapper {
+  border-radius: var(--vxe-ui-gantt-view-task-bar-border-radius);
+}
 .vxe-gantt-view--chart-row.is--round > .vxe-gantt-view--chart-bar:hover::after, .vxe-gantt-view--chart-row.is--round > .vxe-gantt-view--chart-custom-bar:hover::after {
   border-radius: var(--vxe-ui-gantt-view-task-bar-border-radius);
 }
@@ -26,7 +31,6 @@
   top: 50%;
   left: 0;
   transform: translateY(-50%);
-  overflow: hidden;
   pointer-events: all;
 }
 .vxe-gantt-view--chart-bar.is--default,
@@ -35,8 +39,18 @@
   background-color: var(--vxe-ui-gantt-view-task-bar-background-color);
 }
 
-.vxe-gantt-view--chart-custom-bar-content {
+.vxe-gantt-view--chart-bar-content-wrapper,
+.vxe-gantt-view--chart-custom-bar-content-wrapper {
   width: 100%;
+  overflow: hidden;
+}
+
+.vxe-gantt-view--chart-bar-content-wrapper {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
 }
 
 .vxe-gantt-view--chart-bar {