feat: ✨添加点击连线事件

demo/demo.vue

@@ -184,7 +184,7 @@ ganttData[0].children = [
 ];
 
 let linkId = 1;
-const ganttLinks = [
+const ganttLinks = reactive([
   {
     index: linkId++,
     from: 1,
@@ -208,7 +208,7 @@ const ganttLinks = [
     to: 3,
     color: '#abc'
   }
-];
+]);
 
 const showExpand = ref(true);
 function onExpand() {
@@ -287,12 +287,22 @@ const onAddLink = (
   };
   ganttLinks.push(_link);
 
-  console.log('add link', _link, data);
+  console.log('add link', _link, data, ganttLinks);
   cb(_link);
 };
 
-const onClickLink = (data: any) => {
-  console.log('click link', data);
+const onClickLink = (link: any | null) => {
+  console.log('click link', link);
+
+  if (link) {
+    setTimeout(() => {
+      ganttLinks.splice(
+        ganttLinks.findIndex(l => l.from === link.from && l.to === link.to),
+        1
+      );
+      console.log('remove link', ganttLinks);
+    }, 1000);
+  }
 };
 
 function onMove(data: any) {

src/components/links/LinkPath.vue

@@ -49,6 +49,7 @@ import useStyle from '@/composables/useStyle';
 import { LinkItem } from '@/models/data/links';
 import { computed, PropType, Ref, ref } from 'vue';
 import { onClickOutside } from '@vueuse/core';
+import useEvent from '@/composables/useEvent';
 
 const props = defineProps({
   link: {
@@ -57,14 +58,20 @@ const props = defineProps({
   }
 });
 
+const { EmitClickLink } = useEvent();
+
 const selected = ref(false);
 function onClick() {
   selected.value = true;
+  EmitClickLink(props.link.originLink);
 }
 
 const svgRef = ref(null) as Ref<SVGGElement | null>;
 onClickOutside(svgRef, () => {
+  if (!selected.value) return;
+
   selected.value = false;
+  EmitClickLink(null);
 });
 
 const { ganttHeader } = useGanttHeader();

src/components/root/RootWrap.vue

@@ -30,7 +30,7 @@ const emit = defineEmits<{
     data: { from: any; to: any },
     cb: (link: LinkProps) => void
   ): void;
-  (e: 'click-link', data: LinkProps): void;
+  (e: 'click-link', link: LinkProps | null): void;
   (e: 'no-date-error', date: Date): void;
 }>();
 

src/components/root/index.vue

@@ -139,13 +139,13 @@ const { tableWidth } = useTableWidth();
 // #endregion
 
 // #region 初始化各种数据
-const { data, links } = toRefs(props);
+const { data } = toRefs(props);
 
 const { initData } = useData();
 initData(data, props);
 
 const { initLinks } = useLinks();
-initLinks(links);
+initLinks(props.links);
 // #endregion
 
 // #region 监听 gantt 尺寸变化，表头和宽度需要重新渲染

src/components/slider/index.vue

@@ -331,17 +331,18 @@ onDrag(outAnchorRef, {
   }
 });
 
+// 最后抛出添加连线事件
 const { EmitAddLink } = useEvent();
 function onPointerUp() {
   if (!props.allowLink) return;
 
   if (linking.startRow) {
-    const link = $links.addLink(linking.startRow, props.data!);
+    const link = $links.createLink(linking.startRow, props.data!);
     if (link) {
       EmitAddLink(
         link,
         { from: linking.startRow.data, to: props.data!.data },
-        _link => $links.updateLink(_link)
+        _link => $links.addLink(_link, linking.startRow!, props.data!)
       );
     }
 

src/composables/useEvent.ts

@@ -63,6 +63,13 @@ export default () => {
     );
   }
 
+  /**
+   * 点击连线事件
+   */
+  function EmitClickLink(link: LinkProps | null) {
+    rootEmit.value?.('click-link', link ? toRaw(link) : null);
+  }
+
   /**
    * 日期不存在当前组件中事件
    */
@@ -76,6 +83,7 @@ export default () => {
     EmitRowChecked,
     EmitMoveSlider,
     EmitAddLink,
+    EmitClickLink,
     EmitNoDateError
   };
 };

src/composables/useLinks.ts

@@ -1,22 +1,18 @@
 import type RowItem from '@/models/data/row';
 import { useStore } from '@/store';
 import { isBoolean } from 'lodash';
-import { watch, type Ref } from 'vue';
+import { watchEffect } from 'vue';
 
 export default () => {
   const { linking, $links, $data } = useStore();
 
-  function initLinks(links: Ref<any[]>) {
-    $links.init($data.flatData, links.value);
+  function initLinks(links: any[]) {
+    $links.init($data.flatData, links);
 
-    watch(
-      () => [links, $data.flatData],
-      () => {
-        // 更新数据
-        $links.update($data.flatData, links.value);
-      },
-      { deep: true }
-    );
+    watchEffect(() => {
+      // 更新数据
+      $links.update($data.flatData, links);
+    });
   }
 
   function setLinking(params: {

src/models/data/links.ts

@@ -63,12 +63,13 @@ export default class AllLinks {
    */
   update(data: RowItem[], links?: LinkProps[]) {
     this.init(data, links ?? this.originLinks);
+    console.log('update links', this.links, this.originLinks);
   }
 
   /**
-   * 添加一条连线
+   * 创建一条连线
    */
-  addLink(from: RowItem, to: RowItem): LinkProps | null {
+  createLink(from: RowItem, to: RowItem): LinkProps | null {
     if (
       from.uuid === to.uuid ||
       this.links.some(
@@ -82,12 +83,24 @@ export default class AllLinks {
       from: from.id,
       to: to.id
     };
+    return link;
+  }
+
+  /**
+   * 添加一条连线
+   */
+  addLink(link: LinkProps, from: RowItem, to: RowItem) {
+    if (!link.from || !link.to) return;
+    if (this.originLinks.some(l => l.from === link.from && l.to === link.to))
+      return;
+
     this.originLinks.push(link);
     this.links.push(new LinkItem(link, from, to));
-
-    return link;
   }
 
+  /**
+   * 更新一条连线
+   */
   updateLink(link: LinkProps) {
     if (!link.from || !link.to) return;