feat: ✨添加点击连线事件

demo/demo.vue

@@ -13,6 +13,7 @@
       @row-click="onClickRow"
       @move-slider="onMoveSlider"
       @add-link="onAddLink"
+      @click-link="onClickLink"
     >
       <x-gantt-column label="group1">
         <x-gantt-column prop="index" width="120px"></x-gantt-column>
@@ -100,7 +101,7 @@ let id = 0;
 
 const ganttData = reactive<any>([]);
 
-for (let i = 0; i < 5; i++) {
+for (let i = 0; i < 15; i++) {
   onAdd();
 }
 
@@ -197,6 +198,10 @@ const onAddLink = (data: any) => {
   console.log('add link', data);
 };
 
+const onClickLink = (data: any) => {
+  console.log('click link', data);
+};
+
 function onMove(data: any) {
   return true;
 }

src/components/common/GanttBody.vue

@@ -88,6 +88,7 @@ const { ganttBodyRef } = useElement();
     height: 100%;
     position: absolute;
     z-index: 5;
+    pointer-events: none;
   }
 
   .xg-gantt-body-date-line {
@@ -96,6 +97,7 @@ const { ganttBodyRef } = useElement();
     position: absolute;
     top: 0;
     opacity: 0.6;
+    pointer-events: none;
   }
 }
 </style>

src/components/common/Row.vue

@@ -9,7 +9,8 @@
       {
         'xg-row__select':
           props.renderStyle && $param.selectItem?.uuid === props.data?.uuid
-      }
+      },
+      { 'xg-row__only': !props.renderStyle }
     ]"
     :style="{
       top: `${(props.data?.flatIndex ?? 0) * rowHeight}px`,
@@ -18,8 +19,8 @@
       backgroundColor: props.renderStyle ? ($styleBox.levelColor[props.data!.level] ?? undefined) : undefined,
       ...$styleBox.getBorderColor()
     }"
-    @pointerenter="onEnter"
-    @pointerleave="onLeave"
+    @pointerenter.stop="onEnter"
+    @pointerleave.stop="onLeave"
     @click="onClick"
     @dblclick="onDblClick"
   >
@@ -69,6 +70,10 @@ function onDblClick() {
   box-sizing: border-box;
 }
 
+.xg-row__only {
+  pointer-events: none;
+}
+
 .xg-row.xg-row__hover {
   background-color: #f0f0f0aa !important;
 }

src/components/links/LinkPath.vue

@@ -1,5 +1,9 @@
 <template>
-  <g>
+  <g
+    ref="svgRef"
+    :class="['xg-link', { 'xg-link__selected': selected }]"
+    @click.stop="onClick"
+  >
     <path
       :d="path"
       fill="transparent"
@@ -15,7 +19,7 @@
         :id="`triangle_${link.color}`"
         markerWidth="5"
         markerHeight="4"
-        refX="0"
+        refX="2"
         refY="2"
         orient="auto"
         markerUnits="strokeWidth"
@@ -43,7 +47,8 @@ import useGanttHeader from '@/composables/useGanttHeader';
 import useGanttWidth from '@/composables/useGanttWidth';
 import useStyle from '@/composables/useStyle';
 import { LinkItem } from '@/models/data/links';
-import { computed, PropType } from 'vue';
+import { computed, PropType, Ref, ref } from 'vue';
+import { onClickOutside } from '@vueuse/core';
 
 const props = defineProps({
   link: {
@@ -52,6 +57,16 @@ const props = defineProps({
   }
 });
 
+const selected = ref(false);
+function onClick() {
+  selected.value = true;
+}
+
+const svgRef = ref(null) as Ref<SVGGElement | null>;
+onClickOutside(svgRef, () => {
+  selected.value = false;
+});
+
 const { ganttHeader } = useGanttHeader();
 const { ganttColumnWidth, currentMillisecond } = useGanttWidth();
 const { rowHeight } = useStyle();
@@ -90,4 +105,24 @@ const path = computed(
 );
 </script>
 
-<style scoped lang="scss"></style>
+<style scoped lang="scss">
+.xg-link {
+  cursor: pointer;
+  transition: filter 0.2s;
+  pointer-events: auto;
+
+  path {
+    transition: stroke-width 0.2s;
+  }
+
+  &:hover {
+    filter: brightness(1.2);
+  }
+}
+
+.xg-link__selected {
+  path {
+    stroke-width: 3;
+  }
+}
+</style>

src/components/slider/index.vue

@@ -317,10 +317,8 @@ onDrag(outAnchorRef, {
 const { EmitAddLink } = useEvent();
 function onPointerUp() {
   if (linking.startRow) {
-    if (linking.startRow?.uuid !== props.data?.uuid) {
-      const link = $links.addLink(linking.startRow, props.data!);
-      EmitAddLink(link);
-    }
+    const link = $links.addLink(linking.startRow, props.data!);
+    if (link) EmitAddLink(link);
 
     setLinking({ startRow: null, endRow: null });
   }
@@ -332,6 +330,7 @@ function onPointerUp() {
 .xg-slider {
   position: absolute;
   transition: filter 0.2s;
+  pointer-events: auto;
 
   .xg-slider-block {
     overflow: hidden;

src/composables/useEvent.ts

@@ -39,7 +39,6 @@ export default () => {
     );
   }
 
-  // (e: 'add-link', data: LinkProps): void;
   /**
    * 添加连线事件
    * @param data