v1.5.0 - new features

2025-12-13 13:46:16 +08:00
parent f8c6474efc
commit ae3b2cad4b
6 changed files with 82 additions and 3 deletions
@@ -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
@@ -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：**

@@ -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 类型定义：**

@@ -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拖放事件的触发",
+      "<span style=\"font-weight: bold; color: #f00;\">特别感谢 @qiuchengw的专业贡献</span>",
+      "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",
+      "<span style=\"font-weight: bold; color: #f00;\">Special thanks to @qiuchengw for his professional contribution</span>"
+    ]
  }
 ]
@@ -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",
@@ -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<DragState>({
    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()
    }
  }