vxe-gantt 4.1.18 → 4.1.19

package/lib/index.umd.js

@@ -2785,7 +2785,7 @@ const {
   setConfig,
   setIcon
 } = core_.VxeUI;
-core_.VxeUI.ganttVersion = "4.1.18";
+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.18"}`;
+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
         }]
-      }, $xeTable && isEnableConf(taskLinkOpts) ? $xeGantt.renderGanttTaskLines() : []) : renderEmptyElement($xeGantt), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
+      }, [$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.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;
   }
@@ -5305,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;
@@ -5501,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)();
@@ -5558,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;
@@ -6076,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 = {
@@ -6139,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)();
@@ -6283,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';
@@ -8000,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) {
@@ -8013,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;
@@ -8640,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
@@ -8651,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']);
         }
@@ -8714,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());