diff --git a/CHANGELOG.md b/CHANGELOG.md index ec32d03..f0653dc 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -5,6 +5,20 @@ All notable changes to this project will be documented in this file. The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html). +## [1.5.0] - 2025-12-13 + +### Added +- TaskBar增加可视化关系线添加,删除功能 +- 支持适配uniapp开发 +- TaskListConfig支持Task图标显示/隐藏配置 +- TaskBar adds visual relationship line addition and deletion functions +- Support for uniapp development +- TaskListConfig supports Task icon show/hide configuration + +### Fixed +- Task双击时,禁止Task拖放事件的触发 +- Disabled Task drag-and-drop event trigger on double-click + ## [1.4.6-patch.1] - 2025-12-09 ### Fixed diff --git a/README-EN.md b/README-EN.md index 9b67581..c893f90 100644 --- a/README-EN.md +++ b/README-EN.md @@ -1514,6 +1514,7 @@ Customize task list display columns, width limits, etc. Task list is located on | `defaultWidth` | `number \| string` | `320` | Default expanded width. Supports pixel number (like `320`) or percentage string (like `'30%'`) | | `minWidth` | `number \| string` | `280` | Minimum width. Supports pixel number (like `280`) or percentage string (like `'20%'`). Cannot be less than 280px | | `maxWidth` | `number \| string` | `1160` | Maximum width. Supports pixel number (like `1160`) or percentage string (like `'80%'`) | +| `showTaskIcon` | `boolean` | `true` | Whether to show Tasks' icons | **TaskListColumnConfig Type Definition:** diff --git a/README.md b/README.md index dfc8467..f610c51 100644 --- a/README.md +++ b/README.md @@ -1505,6 +1505,7 @@ const toolbarConfig: ToolbarConfig = { | `defaultWidth` | `number \| string` | `320` | 默认展开宽度。支持像素数字(如 `320`)或百分比字符串(如 `'30%'`) | | `minWidth` | `number \| string` | `280` | 最小宽度。支持像素数字(如 `280`)或百分比字符串(如 `'20%'`)。不能小于 280px | | `maxWidth` | `number \| string` | `1160` | 最大宽度。支持像素数字(如 `1160`)或百分比字符串(如 `'80%'`) | +| `showTaskIcon` | `boolean` | `true` | 是否展示任务图标 | **TaskListColumnConfig 类型定义:** diff --git a/demo/version-history.json b/demo/version-history.json index 70fa791..e6cad9b 100644 --- a/demo/version-history.json +++ b/demo/version-history.json @@ -362,5 +362,21 @@ "修复:Github编译错误", "Fixed: The build errors on Github" ] + }, + { + "version": "1.5.0", + "date": "2025-12-13", + "notes": [ + "新增:TaskBar增加可视化关系线添加,删除功能", + "新增:支持适配uniapp开发", + "新增:TaskListConfig支持Task图标显示/隐藏配置", + "修复:Task双击时,禁止Task拖放事件的触发", + "特别感谢 @qiuchengw的专业贡献", + "Added: TaskBar adds visual relationship line addition and deletion functions", + "Added: Support for uniapp development", + "Added: TaskListConfig supports Task icon show/hide configuration", + "Fixed: Disabled Task drag-and-drop event trigger on double-click", + "Special thanks to @qiuchengw for his professional contribution" + ] } ] diff --git a/package.json b/package.json index e2895b9..fb80977 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "jordium-gantt-vue3", - "version": "1.4.6-patch.1", + "version": "1.5.0", "type": "module", "main": "npm-package/dist/jordium-gantt-vue3.cjs.js", "module": "npm-package/dist/jordium-gantt-vue3.es.js", diff --git a/src/composables/useTaskRowDrag.ts b/src/composables/useTaskRowDrag.ts index c468a7b..c547cf3 100644 --- a/src/composables/useTaskRowDrag.ts +++ b/src/composables/useTaskRowDrag.ts @@ -3,28 +3,37 @@ import type { Task } from '../models/classes/Task' interface DragState { isDragging: boolean + isPreparing: boolean // 新增:准备拖拽状态(鼠标按下但未移动足够距离) draggedTask: Task | null draggedElement: HTMLElement | null ghostElement: HTMLElement | null dropTargetTask: Task | null dropPosition: 'after' | 'child' | null + startX: number // 记录起始鼠标位置 + startY: number } interface UseDragOptions { enabled: boolean + dragThreshold?: number // 拖拽触发阈值(像素),默认5px onDragStart?: (task: Task) => void onDragOver?: (task: Task, position: 'after' | 'child') => void onDrop?: (draggedTask: Task, targetTask: Task, position: 'after' | 'child') => void } export function useTaskRowDrag(options: UseDragOptions) { + const DRAG_THRESHOLD = options.dragThreshold ?? 5 // 默认5px触发拖拽 + const dragState = ref({ isDragging: false, + isPreparing: false, draggedTask: null, draggedElement: null, ghostElement: null, dropTargetTask: null, dropPosition: null, + startX: 0, + startY: 0, }) const startDrag = (task: Task, element: HTMLElement, event: MouseEvent) => { @@ -38,9 +47,23 @@ export function useTaskRowDrag(options: UseDragOptions) { event.preventDefault() event.stopPropagation() - dragState.value.isDragging = true + // 进入准备状态,记录起始位置,但不创建ghost + dragState.value.isPreparing = true dragState.value.draggedTask = task dragState.value.draggedElement = element + dragState.value.startX = event.clientX + dragState.value.startY = event.clientY + } + + // 真正激活拖拽(创建ghost等) + const activateDrag = (event: MouseEvent) => { + if (!dragState.value.isPreparing || dragState.value.isDragging) return + + const task = dragState.value.draggedTask! + const element = dragState.value.draggedElement! + + dragState.value.isDragging = true + dragState.value.isPreparing = false // 创建拖拽的幽灵元素 const ghost = element.cloneNode(true) as HTMLElement @@ -143,6 +166,14 @@ export function useTaskRowDrag(options: UseDragOptions) { } const endDrag = () => { + // 如果只是准备状态(未真正拖拽),直接取消 + if (dragState.value.isPreparing && !dragState.value.isDragging) { + dragState.value.isPreparing = false + dragState.value.draggedTask = null + dragState.value.draggedElement = null + return + } + if (!dragState.value.isDragging) return const draggedTask = dragState.value.draggedTask @@ -178,15 +209,31 @@ export function useTaskRowDrag(options: UseDragOptions) { // 重置状态 dragState.value = { isDragging: false, + isPreparing: false, draggedTask: null, draggedElement: null, ghostElement: null, dropTargetTask: null, dropPosition: null, + startX: 0, + startY: 0, } } const handleMouseMove = (event: MouseEvent) => { + // 如果处于准备状态,检查是否移动超过阈值 + if (dragState.value.isPreparing && !dragState.value.isDragging) { + const deltaX = Math.abs(event.clientX - dragState.value.startX) + const deltaY = Math.abs(event.clientY - dragState.value.startY) + const distance = Math.sqrt(deltaX * deltaX + deltaY * deltaY) + + // 超过阈值,激活真正的拖拽 + if (distance > DRAG_THRESHOLD) { + activateDrag(event) + } + return + } + if (dragState.value.isDragging) { updateGhostPosition(event) @@ -222,7 +269,7 @@ export function useTaskRowDrag(options: UseDragOptions) { } const handleMouseUp = () => { - if (dragState.value.isDragging) { + if (dragState.value.isDragging || dragState.value.isPreparing) { endDrag() } }