alighasami/jordium-gantt-vue3
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

实现可视化task连接线操作

Browse Source
This commit is contained in:
qiuchengw
2025-12-02 19:44:05 +08:00
parent 734c1cf4cb
commit dc6ab95709
4 changed files with 1031 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/LinkAnchor.vue
+254
View File
@@ -0,0 +1,254 @@
<script setup lang="ts">
import { computed, ref, onUnmounted } from 'vue'
interface Props {
// 触点类型
type: 'predecessor' | 'successor' // left触点=前置, right触点=后置
taskId: number
// 显示控制
visible?: boolean // 是否显示（默认在 hover 时显示）
// 拖拽状态
isDragSource?: boolean // 是否是拖拽源
isDragTarget?: boolean // 是否是拖拽目标
isValidTarget?: boolean // 是否是合法目标
// 功能开关
enabled?: boolean // 是否启用连接功能（默认 true）
// 全局拖拽状态（用于优化显示逻辑）
globalDragging?: boolean // 是否有全局拖拽进行中
}
const props = withDefaults(defineProps<Props>(), {
visible: false,
isDragSource: false,
isDragTarget: false,
isValidTarget: true,
enabled: true,
globalDragging: false,
})
const emit = defineEmits<{
'drag-start': [{ taskId: number; type: 'predecessor' | 'successor'; x: number; y: number }]
'drag-move': [{ x: number; y: number }]
'drag-end': [{ taskId: number; type: 'predecessor' | 'successor' }]
}>()
// 触点自身悬停状态
const isHoveredAnchor = ref(false)
// 优化的显示逻辑
const shouldShow = computed(() => {
return (
props.visible || // TaskBar 悬停
props.globalDragging || // 全局拖拽进行中
props.isDragSource || // 是拖拽的源任务
isHoveredAnchor.value // 触点本身被悬停
)
})
// 全局拖拽监听器管理（组件自治）
let globalMouseMoveListener: ((e: MouseEvent) => void) | null = null
let globalMouseUpListener: ((e: MouseEvent) => void) | null = null
let isDragging = false
// 开始拖拽
function handleMouseDown(event: MouseEvent) {
if (!props.enabled) return
event.stopPropagation()
event.preventDefault()
isDragging = true
// 发射拖拽开始事件
emit('drag-start', {
taskId: props.taskId,
type: props.type,
x: event.clientX,
y: event.clientY,
})
// 添加全局监听器（组件自治）
globalMouseMoveListener = (e: MouseEvent) => {
if (!isDragging) return
// 发射拖拽移动事件
emit('drag-move', {
x: e.clientX,
y: e.clientY,
})
}
globalMouseUpListener = () => {
if (!isDragging) return
// 发射拖拽结束事件
emit('drag-end', {
taskId: props.taskId,
type: props.type,
})
cleanup()
}
document.addEventListener('mousemove', globalMouseMoveListener)
document.addEventListener('mouseup', globalMouseUpListener)
}
function handleMouseEnter() {
if (!props.enabled) return
isHoveredAnchor.value = true
}
function handleMouseLeave() {
if (!props.enabled) return
isHoveredAnchor.value = false
}
// 清理全局监听器
function cleanup() {
isDragging = false
if (globalMouseMoveListener) {
document.removeEventListener('mousemove', globalMouseMoveListener)
globalMouseMoveListener = null
}
if (globalMouseUpListener) {
document.removeEventListener('mouseup', globalMouseUpListener)
globalMouseUpListener = null
}
}
// 组件卸载时清理
onUnmounted(() => {
cleanup()
})
</script>
<template>
<div
v-if="enabled && shouldShow"
class="link-anchor"
:class="{
'anchor-predecessor': type === 'predecessor',
'anchor-successor': type === 'successor',
'drag-source': isDragSource,
'drag-target': isDragTarget,
'valid-target': isDragTarget && isValidTarget,
'invalid-target': isDragTarget && !isValidTarget,
'visible': shouldShow,
}"
@mousedown="handleMouseDown"
@mouseenter="handleMouseEnter"
@mouseleave="handleMouseLeave"
>
<!-- Tooltip -->
<div v-if="!isDragSource && !isDragTarget && !globalDragging" class="anchor-tooltip">
{{ type === 'predecessor' ? '添加前置任务' : '添加后置任务' }}
</div>
</div>
</template>
<style scoped>
.link-anchor {
position: absolute;
top: 50%;
width: 8px;
height: 8px;
border-radius: 50%;
background: #409eff;
border: 2px solid #fff;
cursor: pointer;
opacity: 0;
transition:
opacity 0.2s,
transform 0.2s;
z-index: 200;
/* 默认状态：垂直居中 */
transform: translateY(-50%) scale(1);
}
/* 前置任务触点（左侧） */
.link-anchor.anchor-predecessor {
left: -4px;
}
/* 后置任务触点（右侧） */
.link-anchor.anchor-successor {
right: -4px;
}
/* 当应该显示时，设置可见 */
.link-anchor.visible {
opacity: 1;
}
.link-anchor:hover {
/* 保持垂直居中的同时放大 */
transform: translateY(-50%) scale(1.3);
box-shadow: 0 0 8px rgba(64, 158, 255, 0.6);
opacity: 1 !important;
}
.link-anchor.drag-source {
opacity: 1;
/* 拖拽源也保持垂直居中 */
transform: translateY(-50%) scale(1);
}
.link-anchor.drag-target {
opacity: 1;
/* 拖拽目标：保持垂直居中并放大 */
transform: translateY(-50%) scale(1.5);
animation: pulse 0.8s infinite;
}
.link-anchor.valid-target {
background: #67c23a;
border-color: #fff;
}
.link-anchor.invalid-target {
background: #f56c6c;
border-color: #fff;
}
.anchor-tooltip {
position: absolute;
bottom: 100%;
left: 50%;
transform: translateX(-50%) translateY(-4px);
padding: 4px 8px;
background: rgba(0, 0, 0, 0.8);
color: white;
font-size: 12px;
white-space: nowrap;
border-radius: 4px;
opacity: 0;
pointer-events: none;
transition: opacity 0.2s;
}
.link-anchor:hover .anchor-tooltip {
opacity: 1;
}
@keyframes pulse {
0%,
100% {
box-shadow: 0 0 8px rgba(64, 158, 255, 0.6);
}
50% {
box-shadow: 0 0 16px rgba(64, 158, 255, 1);
}
}
/* 暗色主题支持 */
:global(html[data-theme='dark']) .link-anchor {
border-color: #1a1a1a;
}
:global(html[data-theme='dark']) .link-anchor.valid-target,
:global(html[data-theme='dark']) .link-anchor.invalid-target {
border-color: #1a1a1a;
}
:global(html[data-theme='dark']) .anchor-tooltip {
background: rgba(255, 255, 255, 0.9);
color: #1a1a1a;
}
</style>
src/components/LinkDragGuide.vue
+254
View File
@@ -0,0 +1,254 @@
<script setup lang="ts">
import { ref, watch, onMounted, onUnmounted } from 'vue'
interface Props {
active: boolean
startX: number
startY: number
endX: number
endY: number
width: number
height: number
offsetLeft?: number
offsetTop?: number
isValidTarget?: boolean // 是否是合法的连接目标
}
const props = withDefaults(defineProps<Props>(), {
offsetLeft: 0,
offsetTop: 0,
isValidTarget: true,
})
const canvasRef = ref<HTMLCanvasElement | null>(null)
// 使用 requestAnimationFrame 节流重绘
let rafId: number | null = null
let pendingDraw = false
// 缓存 canvas 上下文和尺寸信息，避免重复初始化
let cachedCtx: CanvasRenderingContext2D | null = null
let cachedWidth = 0
let cachedHeight = 0
let cachedDpr = 0
/**
* 初始化或更新 canvas 尺寸
*/
const initCanvas = () => {
const canvas = canvasRef.value
if (!canvas) return null
const displayWidth = props.width
const displayHeight = props.height
const dpr = window.devicePixelRatio || 1
// 只在尺寸或 DPR 变化时重新初始化
if (
!cachedCtx ||
cachedWidth !== displayWidth ||
cachedHeight !== displayHeight ||
cachedDpr !== dpr
) {
const ctx = canvas.getContext('2d', { alpha: true, willReadFrequently: false })
if (!ctx) return null
const pixelWidth = displayWidth * dpr
const pixelHeight = displayHeight * dpr
canvas.width = pixelWidth
canvas.height = pixelHeight
ctx.scale(dpr, dpr)
cachedCtx = ctx
cachedWidth = displayWidth
cachedHeight = displayHeight
cachedDpr = dpr
}
return cachedCtx
}
/**
* 绘制拖拽引导线
* 使用贝塞尔曲线，与 GanttLinks 保持一致的视觉风格
*/
const drawGuideLine = () => {
// 如果已经有待处理的绘制请求，取消标记
if (rafId !== null) {
pendingDraw = true
return
}
// 使用 requestAnimationFrame 确保在下一帧绘制
rafId = requestAnimationFrame(() => {
rafId = null
performDraw()
// 如果在绘制期间又有新的请求，再次绘制
if (pendingDraw) {
pendingDraw = false
drawGuideLine()
}
})
}
const performDraw = () => {
if (!props.active) return
const ctx = initCanvas()
if (!ctx) return
const displayWidth = cachedWidth
const displayHeight = cachedHeight
// 清空画布（使用缓存的尺寸）
ctx.clearRect(0, 0, displayWidth, displayHeight)
// 转换为 Canvas 局部坐标
const localX1 = props.startX - props.offsetLeft
const localY1 = props.startY - props.offsetTop
const localX2 = props.endX - props.offsetLeft
const localY2 = props.endY - props.offsetTop
// 检查坐标是否在 Canvas 范围内（增加缓冲区以允许部分可见）
const buffer = 100
const isInBounds =
(localX1 >= -buffer || localX2 >= -buffer) &&
(localX1 <= displayWidth + buffer || localX2 <= displayWidth + buffer) &&
(localY1 >= -buffer || localY2 >= -buffer) &&
(localY1 <= displayHeight + buffer || localY2 <= displayHeight + buffer)
if (!isInBounds) return
// 贝塞尔曲线控制点（与 GanttLinks 一致）
const c1x = localX1 + 40
const c1y = localY1
const c2x = localX2 - 40
const c2y = localY2
ctx.save()
// 根据是否是合法目标设置颜色
const color = props.isValidTarget ? '#67c23a' : '#f56c6c'
ctx.strokeStyle = color
ctx.lineWidth = 3
ctx.setLineDash([8, 4])
ctx.globalAlpha = 0.8
// 绘制贝塞尔曲线
ctx.beginPath()
ctx.moveTo(localX1, localY1)
ctx.bezierCurveTo(c1x, c1y, c2x, c2y, localX2, localY2)
ctx.stroke()
// 绘制箭头
const arrowAngle = Math.atan2(localY2 - c2y, localX2 - c2x)
const arrowLength = 8
const arrowWidth = 4
ctx.fillStyle = color
ctx.globalAlpha = 1
ctx.beginPath()
ctx.moveTo(localX2, localY2)
ctx.lineTo(
localX2 - arrowLength * Math.cos(arrowAngle) - arrowWidth * Math.sin(arrowAngle),
localY2 - arrowLength * Math.sin(arrowAngle) + arrowWidth * Math.cos(arrowAngle),
)
ctx.lineTo(
localX2 - arrowLength * Math.cos(arrowAngle) + arrowWidth * Math.sin(arrowAngle),
localY2 - arrowLength * Math.sin(arrowAngle) - arrowWidth * Math.cos(arrowAngle),
)
ctx.closePath()
ctx.fill()
ctx.restore()
}
/**
* 清空画布
*/
const clearCanvas = () => {
const ctx = cachedCtx
if (!ctx) return
ctx.clearRect(0, 0, cachedWidth, cachedHeight)
}
// 组件卸载时清除缓存
onUnmounted(() => {
if (rafId !== null) {
cancelAnimationFrame(rafId)
rafId = null
}
cachedCtx = null
})
watch(
[
() => props.active,
() => props.startX,
() => props.startY,
() => props.endX,
() => props.endY,
() => props.isValidTarget,
],
() => {
if (props.active) {
drawGuideLine()
} else {
clearCanvas()
}
},
)
// 监听尺寸变化，需要重新初始化 canvas（尺寸变化频率低）
watch(
[() => props.width, () => props.height],
() => {
// 清除缓存，强制重新初始化
cachedCtx = null
if (props.active) {
drawGuideLine()
}
},
)
onMounted(() => {
if (props.active) {
drawGuideLine()
}
})
// 组件卸载时取消待处理的动画帧
onUnmounted(() => {
if (rafId !== null) {
cancelAnimationFrame(rafId)
rafId = null
}
})
</script>
<template>
<canvas
v-if="active"
ref="canvasRef"
class="link-drag-guide-canvas"
:style="{
position: 'absolute',
left: `${offsetLeft}px`,
top: `${offsetTop}px`,
width: `${width}px`,
height: `${height}px`,
zIndex: 1002,
pointerEvents: 'none',
}"
/>
</template>
<style scoped>
.link-drag-guide-canvas {
display: block;
background: transparent;
opacity: 1;
}
</style>
src/components/TaskBar.vue
+90 -1
View File
@@ -4,6 +4,7 @@ import { ref, computed, onUnmounted, onMounted, nextTick, watch, useSlots } from
import type { Task } from '../models/classes/Task'
import { TimelineScale } from '../models/types/TimelineScale'
import TaskContextMenu from './TaskContextMenu.vue'
import LinkAnchor from './LinkAnchor.vue'
import { useI18n } from '../composables/useI18n'
import type { TaskBarConfig } from '../models/configs/TaskBarConfig'
@@ -35,6 +36,14 @@ interface Props {
isPrimaryHighlight?: boolean
// 是否处于高亮模式（有任务被高亮）
isInHighlightMode?: boolean
// 连接线拖拽模式：'predecessor' | 'successor' | null
dragLinkMode?: 'predecessor' | 'successor' | null
// 是否是连接线拖拽的起始任务
isLinkDragSource?: boolean
// 是否是有效的连接目标
isValidLinkTarget?: boolean
// 是否是无效的连接目标
isInvalidLinkTarget?: boolean
}
interface TaskStatus {
@@ -73,6 +82,9 @@ const emit = defineEmits([
'delete',
'context-menu',
'long-press',
'link-drag-start',
'link-drag-move',
'link-drag-end',
])
defineSlots<{
@@ -198,6 +210,9 @@ const longPressTimer = ref<number | null>(null)
const longPressTriggered = ref(false)
const LONG_PRESS_DURATION = 1000 // 1秒（缩短了）
// TaskBar 悬停状态（用于显示 LinkAnchor）
const isTaskBarHovered = ref(false)
// 防误触配置 - 使用配置项或默认值
const dragThreshold = computed(() => barConfig.value.dragThreshold ?? 5)
const isDragThresholdMet = ref(false) // 是否达到拖拽阈值
@@ -2227,7 +2242,48 @@ const handleTaskDelete = (task: Task, deleteChildren?: boolean) => {
closeContextMenu()
}
// 监听全局关闭菜单事件
// 连接线触点事件处理
const handleLinkDragStart = (event: { task: Task; type: 'predecessor' | 'successor'; mouseEvent: MouseEvent }) => {
emit('link-drag-start', event)
}
const handleLinkDragMove = (event: { mouseX: number; mouseY: number }) => {
emit('link-drag-move', event)
}
const handleLinkDragEnd = (event: { task: Task; type: 'predecessor' | 'successor' }) => {
emit('link-drag-end', event)
}
// 处理 LinkAnchor 的 drag-start 事件（转换为统一格式）
const handleAnchorDragStart = (anchorEvent: { taskId: number; type: 'predecessor' | 'successor'; x: number; y: number }) => {
const mouseEvent = {
clientX: anchorEvent.x,
clientY: anchorEvent.y,
} as MouseEvent
handleLinkDragStart({
task: props.task,
type: anchorEvent.type,
mouseEvent,
})
}
// 处理 LinkAnchor 的 drag-move 事件
const handleAnchorDragMove = (anchorEvent: { x: number; y: number }) => {
handleLinkDragMove({
mouseX: anchorEvent.x,
mouseY: anchorEvent.y,
})
}
// 处理 LinkAnchor 的 drag-end 事件
const handleAnchorDragEnd = (anchorEvent: { taskId: number; type: 'predecessor' | 'successor' }) => {
handleLinkDragEnd({
task: props.task,
type: anchorEvent.type,
})
}// 监听全局关闭菜单事件
onMounted(() => {
window.addEventListener('close-all-taskbar-menus', closeContextMenu)
})
@@ -2246,6 +2302,7 @@ onUnmounted(() => {
<div
ref="barRef"
class="task-bar"
:data-task-id="task.id"
:style="{
...taskBarStyle,
backgroundColor: taskStatus.bgColor,
@@ -2270,6 +2327,8 @@ onUnmounted(() => {
@click="handleTaskBarClick"
@contextmenu="handleContextMenu"
@dblclick="handleTaskBarDoubleClick"
@mouseenter="isTaskBarHovered = true"
@mouseleave="isTaskBarHovered = false"
>
<!-- 父级任务的标签 -->
<div v-if="isParent" class="parent-label">
@@ -2382,6 +2441,36 @@ onUnmounted(() => {
@mousedown="e => handleMouseDown(e, 'resize-right')"
></div>
<!-- 连接线触点 - 只在非高亮模式且非父级任务时显示 -->
<!-- 前置任务触点（左侧） -->
<LinkAnchor
v-if="!isParent && !isInHighlightMode"
type="predecessor"
:task-id="task.id"
:visible="isTaskBarHovered"
:is-drag-source="isLinkDragSource && dragLinkMode === 'predecessor'"
:is-drag-target="isValidLinkTarget || isInvalidLinkTarget"
:is-valid-target="isValidLinkTarget"
:global-dragging="!!dragLinkMode"
@drag-start="handleAnchorDragStart"
@drag-move="handleAnchorDragMove"
@drag-end="handleAnchorDragEnd"
/>
<!-- 后置任务触点（右侧） -->
<LinkAnchor
v-if="!isParent && !isInHighlightMode"
type="successor"
:task-id="task.id"
:visible="isTaskBarHovered"
:is-drag-source="isLinkDragSource && dragLinkMode === 'successor'"
:is-drag-target="isValidLinkTarget || isInvalidLinkTarget"
:is-valid-target="isValidLinkTarget"
:global-dragging="!!dragLinkMode"
@drag-start="handleAnchorDragStart"
@drag-move="handleAnchorDragMove"
@drag-end="handleAnchorDragEnd"
/>
<!-- 半圆气泡指示器 - 只在 TaskBar 完全消失时显示 -->
<div
v-if="bubbleIndicator.show && !isParent"
src/components/Timeline.vue
+433 -6
View File
@@ -3,6 +3,7 @@ import { ref, onMounted, onUnmounted, computed, watch, nextTick, shallowRef } fr
import TaskBar from './TaskBar.vue'
import MilestonePoint from './MilestonePoint.vue'
import GanttLinks from './GanttLinks.vue'
import LinkDragGuide from './LinkDragGuide.vue'
/* eslint-disable @typescript-eslint/no-explicit-any */
import { useI18n } from '../composables/useI18n'
import type { TaskBarConfig } from '../models/configs/TaskBarConfig'
@@ -646,6 +647,409 @@ const setHighlightTask = (taskId: number) => {
}
}
// ==================== 连接线拖拽状态管理 ====================
const dragLinkMode = ref<'predecessor' | 'successor' | null>(null) // 当前拖拽模式
const linkDragSourceTask = ref<Task | null>(null) // 拖拽起始任务
const linkDragCurrentX = ref(0) // 当前鼠标X坐标
const linkDragCurrentY = ref(0) // 当前鼠标Y坐标
const linkDragTargetTask = ref<Task | null>(null) // 当前悬停的目标任务
const isValidLinkTarget = ref(false) // 是否是有效的连接目标
const linkAutoScrollInterval = ref<number | null>(null) // 自动滚动定时器
// 开始连接线拖拽
const handleLinkDragStart = (event: { task: Task; type: 'predecessor' | 'successor'; mouseEvent: MouseEvent }) => {
dragLinkMode.value = event.type
linkDragSourceTask.value = event.task
// 将视口坐标转换为相对于 bodyContent 的坐标
if (!bodyContentRef.value) {
linkDragCurrentX.value = event.mouseEvent.clientX
linkDragCurrentY.value = event.mouseEvent.clientY
} else {
const baseRect = bodyContentRef.value.getBoundingClientRect()
linkDragCurrentX.value = event.mouseEvent.clientX - baseRect.left
linkDragCurrentY.value = event.mouseEvent.clientY - baseRect.top
}
linkDragTargetTask.value = null
isValidLinkTarget.value = false
// 启动自动滚动检测
startLinkAutoScroll()
// 添加 ESC 键监听，允许取消拖拽
document.addEventListener('keydown', handleLinkDragEscape)
// 在 Timeline 层级添加全局鼠标监听器（防止 LinkAnchor 因虚拟滚动卸载导致拖拽中断）
document.addEventListener('mousemove', handleGlobalMouseMove)
document.addEventListener('mouseup', handleGlobalMouseUp)
}
// 使用 requestAnimationFrame 节流鼠标移动处理
let mouseMoveRafId: number | null = null
let lastMouseX = 0
let lastMouseY = 0
// 全局鼠标移动处理
const handleGlobalMouseMove = (e: MouseEvent) => {
if (!dragLinkMode.value) return
// 保存最新的鼠标位置
lastMouseX = e.clientX
lastMouseY = e.clientY
// 如果已经有待处理的更新，直接返回
if (mouseMoveRafId !== null) return
// 使用 requestAnimationFrame 节流
mouseMoveRafId = requestAnimationFrame(() => {
mouseMoveRafId = null
handleLinkDragMove({
mouseX: lastMouseX,
mouseY: lastMouseY,
})
})
}
// 全局鼠标释放处理
const handleGlobalMouseUp = () => {
if (!dragLinkMode.value) return
// 取消待处理的 mousemove
if (mouseMoveRafId !== null) {
cancelAnimationFrame(mouseMoveRafId)
mouseMoveRafId = null
}
// 触发拖拽结束
if (linkDragSourceTask.value) {
handleLinkDragEnd({
task: linkDragSourceTask.value,
type: dragLinkMode.value,
})
}
}
// 处理 ESC 键取消拖拽
const handleLinkDragEscape = (e: KeyboardEvent) => {
if (e.key === 'Escape' && dragLinkMode.value) {
cleanupLinkDrag()
document.removeEventListener('keydown', handleLinkDragEscape)
}
}
// 缓存 bodyContent 的位置信息（避免频繁调用 getBoundingClientRect）
let cachedBodyRect: DOMRect | null = null
let bodyRectCacheTime = 0
const BODY_RECT_CACHE_DURATION = 50 // 50ms 缓存
// 拖拽过程中更新鼠标位置
const handleLinkDragMove = (event: { mouseX: number; mouseY: number }) => {
// 将视口坐标转换为相对于 bodyContent 的坐标
if (!bodyContentRef.value) {
linkDragCurrentX.value = event.mouseX
linkDragCurrentY.value = event.mouseY
} else {
// 使用缓存的 rect 或获取新的
const now = Date.now()
if (!cachedBodyRect || now - bodyRectCacheTime > BODY_RECT_CACHE_DURATION) {
cachedBodyRect = bodyContentRef.value.getBoundingClientRect()
bodyRectCacheTime = now
}
linkDragCurrentX.value = event.mouseX - cachedBodyRect.left
linkDragCurrentY.value = event.mouseY - cachedBodyRect.top
}
// 检测目标任务（使用原始视口坐标）
detectLinkTarget(event.mouseX, event.mouseY)
}
// 结束连接线拖拽
const handleLinkDragEnd = (event: { task: Task; type: 'predecessor' | 'successor' }) => {
// 清除缓存的 rect
cachedBodyRect = null
// 移除 ESC 键监听
document.removeEventListener('keydown', handleLinkDragEscape) // 移除全局鼠标监听器
document.removeEventListener('mousemove', handleGlobalMouseMove)
document.removeEventListener('mouseup', handleGlobalMouseUp)
// 停止自动滚动
stopLinkAutoScroll() // 如果有有效目标，创建连接
if (linkDragTargetTask.value && isValidLinkTarget.value) {
createLink(event.task, linkDragTargetTask.value, event.type)
}
// 重置拖拽状态
dragLinkMode.value = null
linkDragSourceTask.value = null
linkDragTargetTask.value = null
isValidLinkTarget.value = false
}
// 检测鼠标位置下的目标任务
const detectLinkTarget = (mouseX: number, mouseY: number) => {
if (!linkDragSourceTask.value) return
// 使用 elementFromPoint 直接获取鼠标下的元素（性能更好）
const element = document.elementFromPoint(mouseX, mouseY)
let foundTarget: Task | null = null
if (element) {
// 向上查找最近的 .task-bar 元素
const taskBar = element.closest('.task-bar') as HTMLElement
if (taskBar && taskBar.dataset.taskId) {
const taskId = parseInt(taskBar.dataset.taskId)
// 只有当目标任务变化时才查找（避免重复的 find 操作）
if (!foundTarget || foundTarget.id !== taskId) {
foundTarget = tasks.value.find(t => t.id === taskId) || null
}
}
}
// 只有当目标任务真正变化时才更新和验证
if (foundTarget?.id !== linkDragTargetTask.value?.id) {
linkDragTargetTask.value = foundTarget
// 验证连接的有效性
if (foundTarget && linkDragSourceTask.value) {
isValidLinkTarget.value = validateLink(
linkDragSourceTask.value,
foundTarget,
dragLinkMode.value!
)
} else {
isValidLinkTarget.value = false
}
}
}
// 验证连接是否有效
const validateLink = (sourceTask: Task, targetTask: Task, mode: 'predecessor' | 'successor'): boolean => {
// 1. 不能连接到自己
if (sourceTask.id === targetTask.id) {
return false
}
// 2. 不能连接父级任务或里程碑
if (targetTask.isParent || targetTask.type === 'milestone') {
return false
}
// 3. 不能创建循环依赖
if (mode === 'predecessor') {
// 如果目标任务已经依赖源任务（直接或间接），会形成循环
if (hasCircularDependency(targetTask.id, sourceTask.id)) {
return false
}
} else {
// successor模式：源任务不能已经依赖目标任务
if (hasCircularDependency(sourceTask.id, targetTask.id)) {
return false
}
}
// 4. 检查是否已存在该连接
if (mode === 'predecessor') {
// 检查目标任务的前置任务列表
if (targetTask.predecessor) {
const predecessorIds = getPredecessorIds(targetTask.predecessor)
if (predecessorIds.includes(sourceTask.id)) {
return false // 已存在
}
}
} else {
// successor模式：检查源任务的前置任务列表
if (sourceTask.predecessor) {
const predecessorIds = getPredecessorIds(sourceTask.predecessor)
if (predecessorIds.includes(targetTask.id)) {
return false // 已存在
}
}
}
return true
}
// 检查循环依赖
const hasCircularDependency = (taskId: number, targetId: number): boolean => {
const visited = new Set<number>()
const queue: number[] = [taskId]
while (queue.length > 0) {
const currentId = queue.shift()!
if (currentId === targetId) {
return true // 找到循环依赖
}
if (visited.has(currentId)) {
continue
}
visited.add(currentId)
// 查找当前任务
const currentTask = tasks.value.find(t => t.id === currentId)
if (currentTask && currentTask.predecessor) {
const predecessorIds = getPredecessorIds(currentTask.predecessor)
queue.push(...predecessorIds)
}
}
return false
}
// 创建连接
const createLink = (sourceTask: Task, targetTask: Task, mode: 'predecessor' | 'successor') => {
if (mode === 'predecessor') {
// 前置模式：将源任务添加到目标任务的前置任务列表
const predecessorIds = targetTask.predecessor ? getPredecessorIds(targetTask.predecessor) : []
if (!predecessorIds.includes(sourceTask.id)) {
predecessorIds.push(sourceTask.id)
// 将数组转换为适当的格式（数组或逗号分隔的字符串）
if (Array.isArray(targetTask.predecessor)) {
targetTask.predecessor = predecessorIds
} else {
targetTask.predecessor = predecessorIds.join(',')
}
// 触发任务更新事件
updateTask(targetTask)
}
} else {
// 后置模式：将目标任务的 ID 添加到源任务的前置任务列表
// 注意：这里实际是在源任务的 predecessor 中添加目标任务
// 因为"后置任务"的意思是：目标任务依赖于源任务
const predecessorIds = targetTask.predecessor ? getPredecessorIds(targetTask.predecessor) : []
if (!predecessorIds.includes(sourceTask.id)) {
predecessorIds.push(sourceTask.id)
// 将数组转换为适当的格式
if (Array.isArray(targetTask.predecessor)) {
targetTask.predecessor = predecessorIds
} else {
targetTask.predecessor = predecessorIds.join(',')
}
// 触发任务更新事件
updateTask(targetTask)
}
}
}
// 启动自动滚动检测
const startLinkAutoScroll = () => {
linkAutoScrollInterval.value = window.setInterval(() => {
if (!timelineContainerElement.value || !bodyContentRef.value) return
const horizontalContainer = timelineContainerElement.value // .timeline 负责横向滚动
const verticalContainer = timelineBodyElement.value // .timeline-body 负责纵向滚动
if (!verticalContainer) return
const bodyContent = bodyContentRef.value
const rect = horizontalContainer.getBoundingClientRect()
const SCROLL_ZONE = 80 // 边缘滚动区域宽度（增大以提供更好的体验）
const SCROLL_SPEED = 15 // 滚动速度
// 获取鼠标在视口中的实际位置（需要加上 bodyContent 的偏移）
const bodyRect = bodyContent.getBoundingClientRect()
const mouseX = linkDragCurrentX.value + bodyRect.left
const mouseY = linkDragCurrentY.value + bodyRect.top
let scrolled = false
// 检测水平滚动（使用 horizontalContainer）
if (mouseX < rect.left + SCROLL_ZONE && horizontalContainer.scrollLeft > 0) {
// 向左滚动
horizontalContainer.scrollLeft -= SCROLL_SPEED
scrolled = true
} else if (mouseX > rect.right - SCROLL_ZONE) {
// 向右滚动
const maxScrollLeft = horizontalContainer.scrollWidth - horizontalContainer.clientWidth
if (horizontalContainer.scrollLeft < maxScrollLeft) {
horizontalContainer.scrollLeft += SCROLL_SPEED
scrolled = true
}
}
// 检测垂直滚动（使用 verticalContainer）
if (mouseY < rect.top + SCROLL_ZONE && verticalContainer.scrollTop > 0) {
// 向上滚动
verticalContainer.scrollTop -= SCROLL_SPEED
scrolled = true
} else if (mouseY > rect.bottom - SCROLL_ZONE) {
// 向下滚动
const maxScrollTop = verticalContainer.scrollHeight - verticalContainer.clientHeight
if (verticalContainer.scrollTop < maxScrollTop) {
verticalContainer.scrollTop += SCROLL_SPEED
scrolled = true
}
}
// 如果发生了滚动，需要更新鼠标相对坐标
if (scrolled) {
// 触发重新检测目标（因为滚动可能改变了元素位置）
detectLinkTarget(mouseX, mouseY)
}
}, 30) // 降低间隔以提供更流畅的滚动体验
}
// 停止自动滚动
const stopLinkAutoScroll = () => {
if (linkAutoScrollInterval.value !== null) {
clearInterval(linkAutoScrollInterval.value)
linkAutoScrollInterval.value = null
}
}
// 清理连接线拖拽状态（用于异常情况）
const cleanupLinkDrag = () => {
stopLinkAutoScroll()
// 清除缓存
cachedBodyRect = null
// 取消待处理的 mousemove
if (mouseMoveRafId !== null) {
cancelAnimationFrame(mouseMoveRafId)
mouseMoveRafId = null
}
// 移除全局监听器
document.removeEventListener('keydown', handleLinkDragEscape)
document.removeEventListener('mousemove', handleGlobalMouseMove)
document.removeEventListener('mouseup', handleGlobalMouseUp)
dragLinkMode.value = null
linkDragSourceTask.value = null
linkDragTargetTask.value = null
isValidLinkTarget.value = false
}
// 获取连接线拖拽起始点的X坐标
const getLinkDragStartX = (): number => {
if (!linkDragSourceTask.value) return 0
const position = taskBarPositions.value[linkDragSourceTask.value.id]
if (!position) return 0
// 根据拖拽模式决定起始点位置
if (dragLinkMode.value === 'predecessor') {
// 前置任务：从任务条左侧开始
return position.left
} else {
// 后置任务：从任务条右侧开始
return position.left + position.width
}
}
// 获取连接线拖拽起始点的Y坐标
const getLinkDragStartY = (): number => {
if (!linkDragSourceTask.value) return 0
const position = taskBarPositions.value[linkDragSourceTask.value.id]
if (!position) return 0
// 从任务条中心位置开始
return position.top + position.height / 2
}
// 拖拽状态管理
const isSplitterDragging = ref(false)
@@ -1997,6 +2401,7 @@ function updateSvgSize() {
// 使用已经维护的 timelineScrollLeft，而不是从 DOM 重新读取
// 因为 handleTimelineScroll 已经实时更新了这个值
const scrollLeft = timelineScrollLeft.value
const scrollTop = timelineBodyScrollTop.value
// 虚拟渲染策略（统一模式）：
// Canvas 始终使用固定安全宽度，通过 offsetLeft 动态定位
@@ -2024,7 +2429,6 @@ function updateSvgSize() {
svgWidth.value = canvasWidth.value
svgHeight.value = clampedHeight
const scrollTop = timelineBodyScrollTop.value
const bufferTop = clampedHeight / 3
let idealOffsetTop = Math.max(0, scrollTop - bufferTop)
@@ -2037,9 +2441,7 @@ function updateSvgSize() {
canvasOffsetTop.value = idealOffsetTop
}
}
function handleBarMounted(payload: {
}function handleBarMounted(payload: {
id: number
left: number
top: number
@@ -2597,6 +2999,9 @@ onUnmounted(() => {
// 停止自动滚动
stopAutoScroll()
// 清理连接线拖拽状态
cleanupLinkDrag()
// 清理事件监听器
window.removeEventListener('task-row-double-click', handleTaskListDoubleClick as EventListener)
window.removeEventListener('task-list-hover', handleTaskListHover as EventListener)
@@ -3411,6 +3816,21 @@ const handleAddSuccessor = (task: Task) => {
:show-vertical-lines="currentTimeScale === TimelineScale.WEEK"
/>
<!-- 连接线拖拽引导线 -->
<LinkDragGuide
v-if="dragLinkMode && linkDragSourceTask"
:active="true"
:start-x="getLinkDragStartX()"
:start-y="getLinkDragStartY()"
:end-x="linkDragCurrentX"
:end-y="linkDragCurrentY"
:width="canvasWidth"
:height="canvasHeight"
:offset-left="canvasOffsetLeft"
:offset-top="canvasOffsetTop"
:is-valid-target="isValidLinkTarget"
/>
<!-- 年度视图今日标记线 -->
<div
v-if="isTodayVisibleInYearView && getTodayLinePositionInYearView >= 0"
@@ -3693,6 +4113,10 @@ const handleAddSuccessor = (task: Task) => {
:is-highlighted="highlightedTaskIds.has(task.id)"
:is-primary-highlight="highlightedTaskId === task.id"
:is-in-highlight-mode="isInHighlightMode"
:drag-link-mode="dragLinkMode"
:is-link-drag-source="linkDragSourceTask?.id === task.id"
:is-valid-link-target="linkDragTargetTask?.id === task.id && isValidLinkTarget"
:is-invalid-link-target="linkDragTargetTask?.id === task.id && !isValidLinkTarget"
@update:task="updateTask"
@bar-mounted="handleBarMounted"
@click="handleTaskBarClick(task, $event)"
@@ -3707,6 +4131,9 @@ const handleAddSuccessor = (task: Task) => {
@add-successor="handleAddSuccessor"
@delete="handleTaskDelete"
@long-press="setHighlightTask"
@link-drag-start="handleLinkDragStart"
@link-drag-move="handleLinkDragMove"
@link-drag-end="handleLinkDragEnd"
>
<template v-if="$slots['custom-task-content']" #custom-task-content="barScope">
<slot name="custom-task-content" v-bind="barScope" />
@@ -3729,13 +4156,13 @@ const handleAddSuccessor = (task: Task) => {
flex-direction: column;
background: var(--gantt-bg-primary, #ffffff);
overflow-x: auto; /* 横向滚动，显示滚动条 */
overflow-y: hidden; /* 纵向滚动，但不显示滚动条 */
overflow-y: auto; /* 纵向滚动，显示滚动条 */
width: 100%;
cursor: grab;
transition: background-color 0.3s ease;
position: relative; /* 为覆盖层定位 */
/* Webkit浏览器滚动条样式 - 只显示横向滚动条 */
/* Webkit浏览器滚动条样式 */
scrollbar-width: thin;
scrollbar-color: var(--gantt-scrollbar-thumb) transparent;
}