vxe-gantt 4.1.17 → 4.1.19

package/lib/index.umd.js

@@ -2785,7 +2785,7 @@ const {
   setConfig,
   setIcon
 } = core_.VxeUI;
-core_.VxeUI.ganttVersion = "4.1.17";
+core_.VxeUI.ganttVersion = "4.1.19";
 const ymdFormat = 'yyyy-MM-dd';
 const ymdhmsFormat = 'yyyy-MM-dd HH:mm:ss';
 setConfig({
@@ -2831,6 +2831,7 @@ setConfig({
     },
     taskLinkConfig: {
       enabled: true,
+      isHover: true,
       showArrow: true
     },
     taskViewScaleConfig: {
@@ -2894,7 +2895,7 @@ setIcon({
 const {
   log
 } = core_.VxeUI;
-const version = `gantt v${"4.1.17"}`;
+const version = `gantt v${"4.1.19"}`;
 const warnLog = log.create('warn', version);
 const errLog = log.create('error', version);
 ;// ./packages/ui/src/depend.ts
@@ -3343,7 +3344,7 @@ const tableEmits = ['ready', 'init-rendered', 'data-rendered', 'update:data', 'k
 const gridEmits = [...tableEmits, 'page-change', 'form-submit', 'form-submit-invalid', 'form-reset', 'form-collapse', 'form-toggle-collapse', 'proxy-query', 'proxy-delete', 'proxy-save', 'toolbar-button-click', 'toolbar-tool-click', 'zoom'];
 ;// ./packages/gantt/src/emits.ts
 
-const ganttEmits = [...gridEmits, 'task-cell-click', 'task-cell-dblclick', 'task-bar-mouseenter', 'task-bar-mouseleave', 'task-bar-click', 'task-bar-dblclick', 'task-view-cell-click', 'task-view-cell-dblclick', 'task-move-start', 'task-move-drag', 'task-move-end', 'task-resize-start', 'task-resize-drag', 'task-resize-end'];
+const ganttEmits = [...gridEmits, 'task-cell-click', 'task-cell-dblclick', 'task-bar-mouseenter', 'task-bar-mouseleave', 'task-bar-click', 'task-bar-dblclick', 'task-view-cell-click', 'task-view-cell-dblclick', 'task-move-start', 'task-move-drag', 'task-move-end', 'task-resize-start', 'task-resize-drag', 'task-resize-end', 'task-link-click', 'task-link-dblclick', 'task-link-remove'];
 ;// ./packages/gantt/src/util.ts
 function getRefElem(refEl) {
   if (refEl) {
@@ -3380,9 +3381,6 @@ function getTaskBarLeft(chartRest, viewCellWidth) {
 function getTaskBarWidth(chartRest, viewCellWidth) {
   return Math.max(1, chartRest ? Math.floor(viewCellWidth * chartRest.oWidthSize) - 1 : 0);
 }
-function getTaskLinkKey(from, to) {
-  return `${from}_${to}`;
-}
 const taskTypeMaps = {
   milestone: true
 };
@@ -3575,6 +3573,7 @@ const gantt_chart_viewType = 'chart';
     const $xeGanttView = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.inject)('$xeGanttView', {});
     const {
       props: ganttProps,
+      reactData: ganttReactData,
       internalData: ganttInternalData
     } = $xeGantt;
     const {
@@ -3592,12 +3591,9 @@ const gantt_chart_viewType = 'chart';
     } = $xeGantt.getComputeMaps();
     const refElem = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.ref)();
     const refTaskWrapperElem = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.ref)();
-    const reflineWrapperElem = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.ref)();
+    const refChartBeforeWrapperElem = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.ref)();
+    const refChartAfterWrapperElem = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.ref)();
     const renderTaskBar = ($xeTable, row, rowid, rowIndex, $rowIndex, _rowIndex) => {
-      const tableProps = $xeTable.props;
-      const {
-        treeConfig
-      } = tableProps;
       const tableReactData = $xeTable.reactData;
       const {
         resizeHeightFlag
@@ -3619,6 +3615,10 @@ const gantt_chart_viewType = 'chart';
       const {
         taskBarMilestoneConfig
       } = ganttProps;
+      const {
+        activeLink,
+        activeBarRowid
+      } = ganttReactData;
       const titleField = computeTitleField.value;
       const progressField = computeProgressField.value;
       const typeField = computeTypeField.value;
@@ -3682,21 +3682,9 @@ const gantt_chart_viewType = 'chart';
         rowIndex,
         _rowIndex
       };
-      const ons = {
-        onClick(evnt) {
-          $xeGantt.handleTaskBarClickEvent(evnt, barParams);
-        },
-        onDblclick(evnt) {
-          $xeGantt.handleTaskBarDblclickEvent(evnt, barParams);
-        },
-        onMousedown(evnt) {
-          if ($xeGantt.handleTaskBarMousedownEvent) {
-            $xeGantt.handleTaskBarMousedownEvent(evnt, barParams);
-          }
-        }
-      };
+      const ctOns = {};
       if (showTooltip) {
-        ons.onMouseover = evnt => {
+        ctOns.onMouseover = evnt => {
           const {
             dragBarRow
           } = ganttInternalData;
@@ -3708,7 +3696,7 @@ const gantt_chart_viewType = 'chart';
           }
           $xeGantt.dispatchEvent('task-bar-mouseenter', ttParams, evnt);
         };
-        ons.onMouseleave = evnt => {
+        ctOns.onMouseleave = evnt => {
           const {
             dragBarRow
           } = ganttInternalData;
@@ -3727,12 +3715,15 @@ const gantt_chart_viewType = 'chart';
           isMilestone,
           title,
           vbStyle,
-          vpStyle
+          vpStyle,
+          rowid,
+          ctOns
         });
       } else if (taskBarSlot) {
         cbVNs.push((0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
           key: 'cbc',
-          class: 'vxe-gantt-view--chart-custom-bar-content'
+          class: 'vxe-gantt-view--chart-custom-bar-content-wrapper',
+          ...ctOns
         }, $xeGantt.callSlot(taskBarSlot, barParams)));
       } else {
         if (isMilestone) {
@@ -3747,7 +3738,8 @@ const gantt_chart_viewType = 'chart';
           };
           cbVNs.push((0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
             key: 'vcm',
-            class: 'vxe-gantt-view--chart-milestone-wrapper'
+            class: 'vxe-gantt-view--chart-milestone-wrapper',
+            ...ctOns
           }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
             class: ['vxe-gantt-view--chart-milestone-icon', iconStatus ? `theme--${external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().isFunction(iconStatus) ? iconStatus(tbmParams) : iconStatus}` : ''],
             style: iconStyle ? Object.assign({}, external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().isFunction(iconStyle) ? iconStyle(tbmParams) : iconStyle) : undefined
@@ -3757,18 +3749,22 @@ const gantt_chart_viewType = 'chart';
             class: 'vxe-gantt-view--chart-milestone-content'
           }, title) : renderEmptyElement($xeGantt)]));
         } else {
-          cbVNs.push(showProgress ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
+          cbVNs.push((0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
+            key: 'vbc',
+            class: 'vxe-gantt-view--chart-bar-content-wrapper',
+            ...ctOns
+          }, [showProgress ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
             key: 'vcp',
             class: 'vxe-gantt-view--chart-progress',
             style: vpStyle
           }) : renderEmptyElement($xeGantt), showContent ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
             key: 'vcc',
             class: 'vxe-gantt-view--chart-content'
-          }, title) : renderEmptyElement($xeGantt));
+          }, title) : renderEmptyElement($xeGantt)]));
         }
       }
       return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
-        key: treeConfig ? rowid : $rowIndex,
+        key: rowid,
         rowid,
         class: ['vxe-gantt-view--chart-row', `is--${gettaskType(typeValue)}`, {
           'is--round': round,
@@ -3781,10 +3777,23 @@ const gantt_chart_viewType = 'chart';
           $xeGantt.handleTaskBarContextmenuEvent(evnt, ctParams);
         }
       }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.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,
         rowid,
-        ...ons
+        onClick(evnt) {
+          $xeGantt.handleTaskBarClickEvent(evnt, barParams);
+        },
+        onDblclick(evnt) {
+          $xeGantt.handleTaskBarDblclickEvent(evnt, barParams);
+        },
+        onMousedown(evnt) {
+          if ($xeGantt.handleTaskBarMousedownEvent) {
+            $xeGantt.handleTaskBarMousedownEvent(evnt, barParams);
+          }
+        }
       }, cbVNs)]);
     };
     const renderTaskRows = ($xeTable, tableData) => {
@@ -3838,25 +3847,42 @@ const gantt_chart_viewType = 'chart';
     };
     const renderVN = () => {
       const $xeTable = ganttViewInternalData.xeTable;
+      const {
+        dragLinkFromStore
+      } = ganttReactData;
       const {
         tableData
       } = ganttViewReactData;
       const taskLinkOpts = computeTaskLinkOpts.value;
+      const taskBarOpts = computeTaskBarOpts.value;
       const {
-        showArrow
+        isCurrent,
+        isHover
       } = taskLinkOpts;
+      const {
+        linkCreatable
+      } = taskBarOpts;
       return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
         ref: refElem,
-        class: 'vxe-gantt-view--chart-wrapper'
-      }, [$xeGantt.renderGanttTaskLines ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
-        ref: reflineWrapperElem,
-        class: ['vxe-gantt-view--chart-line-wrapper', {
-          'show-arrow': showArrow
+        class: ['vxe-gantt-view--chart-wrapper', {
+          'is--cl-drag': dragLinkFromStore.rowid
+        }]
+      }, [$xeGantt.renderGanttTaskChartBefores ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
+        ref: refChartBeforeWrapperElem,
+        class: ['vxe-gantt-view--chart-before-wrapper', {
+          'link--current': isCurrent,
+          'link--hover': isHover
         }]
-      }, $xeTable && isEnableConf(taskLinkOpts) ? $xeGantt.renderGanttTaskLines() : []) : renderEmptyElement($xeGantt), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
+      }, $xeTable && isEnableConf(taskLinkOpts) ? $xeGantt.renderGanttTaskChartBefores() : []) : renderEmptyElement($xeGantt), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
         ref: refTaskWrapperElem,
-        class: 'vxe-gantt-view--chart-task-wrapper'
-      }, $xeTable ? renderTaskRows($xeTable, tableData) : [])]);
+        class: ['vxe-gantt-view--chart-task-wrapper', {
+          'link--current': isCurrent,
+          'link--create': linkCreatable
+        }]
+      }, $xeTable ? renderTaskRows($xeTable, tableData) : []), $xeGantt.renderGanttTaskChartAfters ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
+        ref: refChartAfterWrapperElem,
+        class: 'vxe-gantt-view--chart-after-wrapper'
+      }, $xeTable && isEnableConf(taskLinkOpts) ? $xeGantt.renderGanttTaskChartAfters() : []) : renderEmptyElement($xeGantt)]);
     };
     (0,external_commonjs_vue_commonjs2_vue_root_Vue_.onMounted)(() => {
       const {
@@ -3864,7 +3890,8 @@ const gantt_chart_viewType = 'chart';
       } = ganttViewInternalData;
       const prefix = 'main-chart-';
       elemStore[`${prefix}task-wrapper`] = refTaskWrapperElem;
-      elemStore[`${prefix}line-wrapper`] = reflineWrapperElem;
+      elemStore[`${prefix}before-wrapper`] = refChartBeforeWrapperElem;
+      elemStore[`${prefix}after-wrapper`] = refChartAfterWrapperElem;
     });
     (0,external_commonjs_vue_commonjs2_vue_root_Vue_.onUnmounted)(() => {
       const {
@@ -3872,7 +3899,8 @@ const gantt_chart_viewType = 'chart';
       } = 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;
     });
     return renderVN;
   }
@@ -4580,15 +4608,8 @@ const maxYHeight = 5e6;
           const q = Math.ceil((itemDate.getMonth() + 1) / 3);
           const W = `${external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().getYearWeek(itemDate, weekScale ? weekScale.startDay : undefined)}`;
           const WW = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().padStart(W, 2, '0');
-          let wYear = yyyy;
-          // 周维度，由于年份和第几周是冲突的行为，所以需要特殊处理，判断是否跨年，例如
-          // '2024-12-31' 'yyyy-MM-dd W' >> '2024-12-31 1'
-          // '2025-01-01' 'yyyy-MM-dd W' >> '2025-01-01 1'
-          if (W === '1' && MM === '12') {
-            wYear = `${Number(yyyy) + 1}`;
-            if (isMinWeek) {
-              yyyy = wYear;
-            }
+          if (isMinWeek && checkWeekOfsetYear(W, M)) {
+            yyyy = `${Number(yyyy) + 1}`;
           }
           const dateObj = {
             date: itemDate,
@@ -4713,6 +4734,30 @@ const maxYHeight = 5e6;
         groupCols
       };
     };
+    /**
+     * 判断周的年份是否跨年
+     */
+    const checkWeekOfsetYear = (W, M) => {
+      return `${W}` === '1' && `${M}` === '12';
+    };
+    /**
+     * 周维度，由于年份和第几周是冲突的行为，所以需要特殊处理，判断是否跨年，例如
+     * '2024-12-31' 'yyyy-MM-dd W' >> '2024-12-31 1'
+     * '2025-01-01' 'yyyy-MM-dd W' >> '2025-01-01 1'
+     */
+    const parseWeekObj = (date, firstDay) => {
+      const currDate = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().toStringDate(date);
+      let yyyy = currDate.getFullYear();
+      const month = currDate.getMonth();
+      const weekNum = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().getYearWeek(currDate, firstDay);
+      if (checkWeekOfsetYear(weekNum, month + 1)) {
+        yyyy++;
+      }
+      return {
+        yyyy,
+        W: weekNum
+      };
+    };
     const createChartRender = fullCols => {
       const {
         minViewDate
@@ -4811,13 +4856,11 @@ const maxYHeight = 5e6;
             return (startValue, endValue) => {
               const startDate = parseStringDate(startValue);
               const endDate = parseStringDate(endValue);
-              const startStr = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().toDateString(startDate, 'yyyy-W', {
-                firstDay: weekScale ? weekScale.startDay : undefined
-              });
+              const startWeekObj = parseWeekObj(startDate, weekScale ? weekScale.startDay : undefined);
+              const startStr = `${startWeekObj.yyyy}-${startWeekObj.W}`;
               const startFirstDate = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().getWhatWeek(startDate, 0, weekScale ? weekScale.startDay : undefined, weekScale ? weekScale.startDay : undefined);
-              const endStr = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().toDateString(endDate, 'yyyy-W', {
-                firstDay: weekScale ? weekScale.startDay : undefined
-              });
+              const endWeekObj = parseWeekObj(endDate, weekScale ? weekScale.startDay : undefined);
+              const endStr = `${endWeekObj.yyyy}-${endWeekObj.W}`;
               const endFirstDate = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().getWhatWeek(endDate, 0, weekScale ? weekScale.startDay : undefined, weekScale ? weekScale.startDay : undefined);
               const dateSize = Math.floor((external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().getWhatWeek(endDate, 1, weekScale ? weekScale.startDay : undefined, weekScale ? weekScale.startDay : undefined).getTime() - endFirstDate.getTime()) / dayMs);
               const subtract = (startDate.getTime() - startFirstDate.getTime()) / dayMs / dateSize;
@@ -5290,7 +5333,7 @@ const maxYHeight = 5e6;
         bodyTableElem.style.width = `${vmTableWidth}px`;
       }
       reactData.scrollXWidth = viewTableWidth;
-      return Promise.all([updateTaskChart(), $xeGantt.handleUpdateTaskLink ? $xeGantt.handleUpdateTaskLink($xeGanttView) : null]);
+      return Promise.all([updateTaskChart(), $xeGantt.handleUpdateTaskLinkStyle ? $xeGantt.handleUpdateTaskLinkStyle($xeGanttView) : null]);
     };
     const handleRecalculateStyle = () => {
       const el = refElem.value;
@@ -5486,10 +5529,15 @@ const maxYHeight = 5e6;
       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();
       return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.nextTick)();
@@ -5543,10 +5591,15 @@ const maxYHeight = 5e6;
       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;
@@ -6061,9 +6114,51 @@ function gantt_createInternalData() {
     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() {
+  return {
+    tableLoading: false,
+    proxyInited: false,
+    isZMax: false,
+    tableLinks: [],
+    tableData: [],
+    filterData: [],
+    formData: {},
+    sortData: [],
+    footerData: [],
+    tZindex: 0,
+    tablePage: {
+      total: 0,
+      pageSize: getConfig().pager?.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
   };
 }
 const viewTypeLevelMaps = {
@@ -6124,34 +6219,7 @@ function getViewTypeLevel(type) {
     const {
       computeSize
     } = useFns.useSize(props);
-    const reactData = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.reactive)({
-      tableLoading: false,
-      proxyInited: false,
-      isZMax: false,
-      tableLinks: [],
-      tableData: [],
-      filterData: [],
-      formData: {},
-      sortData: [],
-      footerData: [],
-      tZindex: 0,
-      tablePage: {
-        total: 0,
-        pageSize: getConfig().pager?.pageSize || 10,
-        currentPage: 1
-      },
-      showLeftView: true,
-      showRightView: true,
-      taskScaleList: [],
-      barTipStore: {
-        row: null,
-        content: '',
-        visible: false,
-        params: null
-      },
-      linkList: [],
-      upLinkFlag: 0
-    });
+    const reactData = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.reactive)(createReactData());
     const internalData = gantt_createInternalData();
     const refElem = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.ref)();
     const refTable = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.ref)();
@@ -6268,6 +6336,15 @@ function getViewTypeLevel(type) {
       } = taskViewOpts;
       return scales;
     });
+    const computeTaskLinkStyle = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
+      const {
+        lineType,
+        lineWidth,
+        lineStatus,
+        lineColor
+      } = computeTaskLinkOpts.value;
+      return `${lineType || ''}_${lineWidth || ''}_${lineStatus || ''}_${lineColor || ''}`;
+    });
     const computeTitleField = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
       const taskOpts = computeTaskOpts.value;
       return taskOpts.titleField || 'title';
@@ -7985,12 +8062,26 @@ function getViewTypeLevel(type) {
             $xeTable.handleToggleCheckRowEvent(evnt, params);
           }
         }
+        reactData.isActiveCeLe = false;
+        reactData.activeBarRowid = null;
+        reactData.activeLink = null;
         $xeGantt.dispatchEvent('task-cell-click', params, evnt);
       },
       handleTaskCellDblclickEvent(evnt, params) {
         $xeGantt.dispatchEvent('task-cell-dblclick', params, evnt);
       },
       handleTaskBarClickEvent(evnt, params) {
+        const $xeTable = refTable.value;
+        const taskBarOpts = computeTaskBarOpts.value;
+        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) {
@@ -7998,12 +8089,17 @@ function getViewTypeLevel(type) {
       },
       triggerTaskBarTooltipEvent(evnt, params) {
         const {
-          barTipStore
+          barTipStore,
+          activeLink
         } = reactData;
         const {
-          dragBarRow
+          dragBarRow,
+          dragLineRow
         } = internalData;
-        if (dragBarRow) {
+        if (dragBarRow || dragLineRow) {
+          return;
+        }
+        if (activeLink) {
           return;
         }
         const taskBarTooltipOpts = computeTaskBarTooltipOpts.value;
@@ -8625,6 +8721,11 @@ function getViewTypeLevel(type) {
       handleTaskScaleConfig();
       $xeGantt.refreshTaskView();
     });
+    (0,external_commonjs_vue_commonjs2_vue_root_Vue_.watch)(computeTaskLinkStyle, () => {
+      if ($xeGantt.handleUpdateTaskLinkData) {
+        $xeGantt.handleUpdateTaskLinkData();
+      }
+    });
     hooks.forEach(options => {
       const {
         setupGantt
@@ -8636,15 +8737,15 @@ function getViewTypeLevel(type) {
         }
       }
     });
-    if ($xeGantt.handleTaskUpdateLinks) {
+    if ($xeGantt.handleTaskLoadLinks) {
       if (props.links) {
-        $xeGantt.handleTaskUpdateLinks(props.links);
+        $xeGantt.handleTaskLoadLinks(props.links);
       }
     }
     handleTaskScaleConfig();
     initPages();
     (0,external_commonjs_vue_commonjs2_vue_root_Vue_.onMounted)(() => {
-      if (!$xeGantt.handleUpdateTaskLink) {
+      if (!$xeGantt.handleUpdateTaskLinkData) {
         if (props.links) {
           warnLog('vxe.error.notProp', ['links']);
         }
@@ -8699,6 +8800,9 @@ function getViewTypeLevel(type) {
       initGanttView();
       gantt_globalEvents.on($xeGantt, 'keydown', handleGlobalKeydownEvent);
     });
+    (0,external_commonjs_vue_commonjs2_vue_root_Vue_.onBeforeUnmount)(() => {
+      external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().assign(reactData, createReactData());
+    });
     (0,external_commonjs_vue_commonjs2_vue_root_Vue_.onUnmounted)(() => {
       gantt_globalEvents.off($xeGantt, 'keydown');
       external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().assign(internalData, gantt_createInternalData());