v1.4.2-patch.3 - 性能提升

CHANGELOG.md

@@ -5,6 +5,30 @@ 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.4.2-patch3] - 2025-11-13
+
+### Added
+- 支持视图上下/左右拖拽
+- Support for vertical/horizontal dragging of the view
+
+### Enhancement
+- 性能优化：canvas绘制性能优化
+- 性能优化：拖拽视图性能优化，拖拽期间禁止重绘canvas
+- 性能优化：周视图月开始分隔线实现使用canvas替代dom
+- 性能优化：使用canvas替代svg links实现
+- 性能优化：路径缓存+防抖+shallowRef计算
+- Performance Optimization: Canvas drawing performance optimization
+- Performance Optimization: View dragging performance optimization, disabling canvas redraw during dragging
+- Performance Optimization: Weekly view month start separator line implemented using canvas instead of DOM
+- Performance Optimization: Using canvas instead of SVG links implementation
+- Performance Optimization: Path caching + debounce + shallowRef calculation
+
+## [1.4.2-patch1] - 2025-11-03
+
+### Fixed
+- 缺陷修复：更新父级任务后，再次更新子级任务是发生无限循环调用的问题修复
+- Defect fix: Fixed the issue of infinite loop calls when updating child tasks after updating the parent task
+
 ## [1.4.2-patch2] - 2025-11-11
 
 ### Fixed

README-EN.md

@@ -1778,53 +1778,56 @@ Override or extend default translations via `localeMessages` prop:
 
 <script setup lang="ts">
 const customMessages = {
-  // Task list related
-  name: 'Task Name (Custom)',
-  startDate: 'Start Date',
-  endDate: 'End Date',
-  duration: 'Duration',
-  progress: 'Completion',
-  predecessor: 'Predecessors',
-  assignee: 'Assignee',
-  estimatedHours: 'Estimated Hours',
-  actualHours: 'Actual Hours'
+  "zh-CN": {
+    // Task list related
+    name: 'Task Name (Custom)',
+    startDate: 'Start Date',
+    endDate: 'End Date',
+    duration: 'Duration',
+    progress: 'Completion',
+    predecessor: 'Predecessors',
+    assignee: 'Assignee',
+    estimatedHours: 'Estimated Hours',
+    actualHours: 'Actual Hours'
 
-  // Toolbar related
-  addTask: 'New Task',
-  addMilestone: 'New Milestone',
-  today: 'Today',
-  exportCsv: 'Export CSV',
-  exportPdf: 'Export PDF',
-  fullscreen: 'Fullscreen',
-  exitFullscreen: 'Exit Fullscreen',
-  language: 'Language',
-  theme: 'Theme',
-  expandAll: 'Expand All',
-  collapseAll: 'Collapse All'
+    // Toolbar related
+    addTask: 'New Task',
+    addMilestone: 'New Milestone',
+    today: 'Today',
+    exportCsv: 'Export CSV',
+    exportPdf: 'Export PDF',
+    fullscreen: 'Fullscreen',
+    exitFullscreen: 'Exit Fullscreen',
+    language: 'Language',
+    theme: 'Theme',
+    expandAll: 'Expand All',
+    collapseAll: 'Collapse All'
 
-  // Internal Task editor related
-  title: 'Task Details',
-  titleEdit: 'Edit Task',
-  titleNew: 'New Task',
-  name: 'Task Name',
-  startDate: 'Start Date',
-  endDate: 'End Date',
-  assignee: 'Assignee',
-  predecessor: 'Predecessors',
-  description: 'Description',
-  estimatedHours: 'Estimated Hours',
-  actualHours: 'Actual Hours',
-  progress: 'Progress',
-  save: 'Save',
-  cancel: 'Cancel',
-  delete: 'Delete'
+    // Internal Task editor related
+    title: 'Task Details',
+    titleEdit: 'Edit Task',
+    titleNew: 'New Task',
+    name: 'Task Name',
+    startDate: 'Start Date',
+    endDate: 'End Date',
+    assignee: 'Assignee',
+    predecessor: 'Predecessors',
+    description: 'Description',
+    estimatedHours: 'Estimated Hours',
+    actualHours: 'Actual Hours',
+    progress: 'Progress',
+    save: 'Save',
+    cancel: 'Cancel',
+    delete: 'Delete'
 
-  // Other texts
-  days: 'days',
-  hours: 'hours',
-  overtime: 'overtime',
-  overdue: 'overdue',
-  // ... More custom translations
+    // Other texts
+    days: 'days',
+    hours: 'hours',
+    overtime: 'overtime',
+    overdue: 'overdue',
+    // ... More custom translations
+  },
+  "en-US": {......}
 }
 </script>
 ```

README.md

@@ -1769,53 +1769,56 @@ const handleLanguageChange = (lang: 'zh-CN' | 'en-US') => {
 
 <script setup lang="ts">
 const customMessages = {
-  // 任务列表相关
-  name: '任务名称（自定义）',
-  startDate: '开始日期',
-  endDate: '结束日期',
-  duration: '工期',
-  progress: '完成度',
-  predecessor: '前置任务',
-  assignee: '负责人',
-  estimatedHours: '预估工时',
-  actualHours: '实际工时'
+  "zh-CN": {
+    // 任务列表相关
+    name: '任务名称（自定义）',
+    startDate: '开始日期',
+    endDate: '结束日期',
+    duration: '工期',
+    progress: '完成度',
+    predecessor: '前置任务',
+    assignee: '负责人',
+    estimatedHours: '预估工时',
+    actualHours: '实际工时'
 
-  // 工具栏相关
-  addTask: '新建任务',
-  addMilestone: '新建里程碑',
-  today: '今天',
-  exportCsv: '导出 CSV',
-  exportPdf: '导出 PDF',
-  fullscreen: '全屏',
-  exitFullscreen: '退出全屏',
-  language: '语言',
-  theme: '主题',
-  expandAll: '全部展开',
-  collapseAll: '全部折叠'
+    // 工具栏相关
+    addTask: '新建任务',
+    addMilestone: '新建里程碑',
+    today: '今天',
+    exportCsv: '导出 CSV',
+    exportPdf: '导出 PDF',
+    fullscreen: '全屏',
+    exitFullscreen: '退出全屏',
+    language: '语言',
+    theme: '主题',
+    expandAll: '全部展开',
+    collapseAll: '全部折叠'
 
-  // 内置任务编辑器相关
-  title: '任务详情',
-  titleEdit: '编辑任务',
-  titleNew: '新建任务',
-  name: '任务名称',
-  startDate: '开始日期',
-  endDate: '结束日期',
-  assignee: '负责人',
-  predecessor: '前置任务',
-  description: '描述',
-  estimatedHours: '预估工时',
-  actualHours: '实际工时',
-  progress: '进度',
-  save: '保存',
-  cancel: '取消',
-  delete: '删除'
+    // 内置任务编辑器相关
+    title: '任务详情',
+    titleEdit: '编辑任务',
+    titleNew: '新建任务',
+    name: '任务名称',
+    startDate: '开始日期',
+    endDate: '结束日期',
+    assignee: '负责人',
+    predecessor: '前置任务',
+    description: '描述',
+    estimatedHours: '预估工时',
+    actualHours: '实际工时',
+    progress: '进度',
+    save: '保存',
+    cancel: '取消',
+    delete: '删除'
 
-  // 其他文本
-  days: '天',
-  hours: '小时',
-  overtime: '超时',
-  overdue: '逾期',
-  // ... 更多自定义翻译
+    // 其他文本
+    days: '天',
+    hours: '小时',
+    overtime: '超时',
+    overdue: '逾期',
+    // ... 更多自定义翻译
+  },
+  "en-US": {......}
 }
 </script>
 ```

demo/version-history.json

@@ -286,5 +286,25 @@
       "Defect fix: Fixed the issue of invalid column width configuration in TaskList",
       "<span style=\"font-weight: bold; color: #f00;\">Special thanks to @SHENGLONG749 for their valuable use and feedback</span>"
     ]
+  },
+  {
+    "version": "1.4.2-patch3",
+    "date": "2025-11-13",
+    "notes": [
+      "新增：支持视图上下/左右拖拽",
+      "性能优化：canvas绘制性能优化",
+      "性能优化：拖拽视图性能优化，拖拽期间禁止重绘canvas",
+      "性能优化：周视图月开始分隔线实现使用canvas替代dom",
+      "性能优化：使用canvas替代svg links实现",
+      "性能优化：路径缓存+防抖+shallowRef计算",
+      "Added: Support for vertical/horizontal dragging of the view",
+      "Performance Optimization: Canvas drawing performance optimization",
+      "Performance Optimization: View dragging performance optimization, disabling canvas redraw during dragging",
+      "Performance Optimization: Weekly view month start separator line implemented using canvas instead of DOM",
+      "Performance Optimization: Using canvas instead of SVG links implementation",
+      "Performance Optimization: Path caching + debounce + shallowRef calculation",
+      "<span style=\"font-weight: bold; color: #f00;\">特别感谢 @qiuchengw的专业贡献</span>",
+      "<span style=\"font-weight: bold; color: #f00;\">Special thanks to @qiuchengw for his professional contribution</span>"
+    ]
   }
 ]

npm-webpack-demo/src/App.vue

@@ -1,90 +1,5 @@
-<template>
-  <div>
-    <div style="height: 600px;">
-      <GanttChart 
-        :tasks="tasks" 
-        :milestones="milestones"
-        :task-list-config="taskListConfig"
-        :toolbar-config="toolbarConfig"
-        :use-default-drawer="false"
-        :use-default-milestone-dialog="false"
-        :locale-messages="customMessages"
-        :allow-drag-and-resize="true"
-        @add-task="showAddTaskDrawer = true"
-        @add-milestone="showAddMilestoneDialog = true"
-        @task-double-click="onTaskDblclick"
-        @task-click="onTaskClick"
-        @milestone-double-click="onMilestoneDblclick"
-      >
-    </GanttChart>
-    </div>
-    <!-- 自定义添加任务按钮 -->
-    <div>
-      <button class="btn btn-primary" @click="showAddTaskDrawer = true">添加任务</button>
-      <button class="btn btn-primary" @click="showAddMilestoneDialog = true">添加里程碑</button>
-    </div>
-    
-    <!-- 自定义抽屉组件 (原生HTML替代 el-drawer) -->
-    <div v-if="showAddTaskDrawer" class="drawer-overlay" @click="showAddTaskDrawer = false">
-      <div class="drawer-container" @click.stop>
-        <div class="drawer-header">
-          <h3>自定义添加任务组件</h3>
-          <button class="close-btn" @click="showAddTaskDrawer = false">×</button>
-        </div>
-        
-        <div class="drawer-body">
-          <div class="form-item">
-            <label>任务名称:</label>
-            <input v-model="newTask.name" type="text" placeholder="请输入任务名称" />
-          </div>
-          
-          <div class="form-item">
-            <label>开始日期:</label>
-            <input v-model="newTask.startDate" type="date" />
-          </div>
-          
-          <div class="form-item">
-            <label>结束日期:</label>
-            <input v-model="newTask.endDate" type="date" />
-          </div>
-        </div>
-        
-        <div class="drawer-footer">
-          <button class="btn btn-primary" @click="addTask">确定</button>
-          <button class="btn btn-default" @click="showAddTaskDrawer = false">取消</button>
-        </div>
-      </div>
-    </div>
-
-    <!-- 自定义Dialog组件基于element plus -->
-    <el-dialog 
-      title="自定义添加里程碑组件 - Element Plus" 
-      v-model="showAddMilestoneDialog" 
-      width="400px"
-      @close="newTask = { name: '', startDate: '', endDate: '' }"
-    >
-      <template #default>
-        <div class="form-item">
-          <label>任务名称:</label>
-          <el-input v-model="newTask.name" placeholder="请输入任务名称" />
-        </div>
-
-        <div class="form-item">
-          <label>日期:</label>
-          <el-date-picker v-model="newTask.startDate" type="date" value-format="YYYY-MM-DD" />
-        </div>
-      </template>
-
-      <template #footer>
-        <el-button @click="addMilestone">确定</el-button>
-        <el-button @click="showAddMilestoneDialog = false">取消</el-button>
-      </template>
-    </el-dialog>  
-  </div>
-</template>
-
 <script setup lang="ts">
-import { ref } from 'vue';
+import { ref } from 'vue'
 import { GanttChart } from 'jordium-gantt-vue3'
 import 'jordium-gantt-vue3/dist/assets/jordium-gantt-vue3.css'
 
@@ -121,7 +36,7 @@ const tasks = ref([
     department: '管理部',
     departmentCode: 'D001',
     type: 'task',
-  }
+  },
 ])
 
 const milestones = ref([
@@ -130,8 +45,8 @@ const milestones = ref([
     name: '项目立项',
     startDate: '2025-10-29',
     type: 'milestone',
-    icon: 'diamond'
-  }
+    icon: 'diamond',
+  },
 ])
 
 const customMessages = {
@@ -142,13 +57,13 @@ const customMessages = {
   'en-US': {
     department: 'Department',
     departmentCode: 'Department Code',
-  }
+  },
 }
 // const tasks = ref([])
 
 // const milestones = ref([])
-const showAddTaskDrawer = ref(false);
-const showAddMilestoneDialog = ref(false);
+const showAddTaskDrawer = ref(false)
+const showAddMilestoneDialog = ref(false)
 
 // 定义可动态配置的列
 const availableColumns = ref<TaskListColumnConfig[]>([
@@ -164,7 +79,7 @@ const taskListConfig = {
   defaultWidth: '50%',  // 默认展开宽度50%
   minWidth: '300px',      // 最小宽度300px（默认280px）
   maxWidth: '1200px',      // 最大宽度1200px（默认1160px）
-  columns: availableColumns.value
+  columns: availableColumns.value,
 }
 
 // toolbar配置示例
@@ -179,18 +94,17 @@ const toolbarConfig: ToolbarConfig = {
   showFullscreen: true,            // 显示全屏按钮
   showTimeScale: true,             // 显示时间刻度按钮组
   timeScaleDimensions: [           // 显示所有时间刻度维度
-    'hour', 'day', 'week', 'month', 'quarter', 'year'
+    'hour', 'day', 'week', 'month', 'quarter', 'year',
   ],
   defaultTimeScale: 'week',        // 默认选中周视图
-  showExpandCollapse: false         // 显示展开/折叠按钮
+  showExpandCollapse: false,         // 显示展开/折叠按钮
 }
 
-
 const newTask = ref({
   name: '',
   startDate: '',
-  endDate: ''
-});
+  endDate: '',
+})
 
 const addTask = () => {
   tasks.value.push({
@@ -202,10 +116,10 @@ const addTask = () => {
     department: '未分配',
     departmentCode: 'D000',
     type: 'task',
-  });
-  newTask.value = { name: '', startDate: '', endDate: '' };
-  showAddTaskDrawer.value = false;
-};
+  })
+  newTask.value = { name: '', startDate: '', endDate: '' }
+  showAddTaskDrawer.value = false
+}
 
 const addMilestone = () => {
   milestones.value.push({
@@ -213,11 +127,11 @@ const addMilestone = () => {
     name: newTask.value.name,
     startDate: newTask.value.startDate,
     type: 'milestone',
-    icon: 'diamond'
-  });
+    icon: 'diamond',
+  })
   console.log('milestones: ', milestones.value)
-  newTask.value = { name: '', startDate: '', endDate: '' };
-  showAddMilestoneDialog.value = false;
+  newTask.value = { name: '', startDate: '', endDate: '' }
+  showAddMilestoneDialog.value = false
 }
 
 const onTaskDblclick = (task: any) => {
@@ -231,6 +145,91 @@ const onMilestoneDblclick = (milestone: any) => {
 }
 </script>
 
+<template>
+  <div>
+    <div style="height: 600px;">
+      <GanttChart
+        :tasks="tasks"
+        :milestones="milestones"
+        :task-list-config="taskListConfig"
+        :toolbar-config="toolbarConfig"
+        :use-default-drawer="false"
+        :use-default-milestone-dialog="false"
+        :locale-messages="customMessages"
+        :allow-drag-and-resize="true"
+        @add-task="showAddTaskDrawer = true"
+        @add-milestone="showAddMilestoneDialog = true"
+        @task-double-click="onTaskDblclick"
+        @task-click="onTaskClick"
+        @milestone-double-click="onMilestoneDblclick"
+      >
+    </GanttChart>
+    </div>
+    <!-- 自定义添加任务按钮 -->
+    <div>
+      <button class="btn btn-primary" @click="showAddTaskDrawer = true">添加任务</button>
+      <button class="btn btn-primary" @click="showAddMilestoneDialog = true">添加里程碑</button>
+    </div>
+
+    <!-- 自定义抽屉组件 (原生HTML替代 el-drawer) -->
+    <div v-if="showAddTaskDrawer" class="drawer-overlay" @click="showAddTaskDrawer = false">
+      <div class="drawer-container" @click.stop>
+        <div class="drawer-header">
+          <h3>自定义添加任务组件</h3>
+          <button class="close-btn" @click="showAddTaskDrawer = false">×</button>
+        </div>
+
+        <div class="drawer-body">
+          <div class="form-item">
+            <label>任务名称:</label>
+            <input v-model="newTask.name" type="text" placeholder="请输入任务名称" />
+          </div>
+
+          <div class="form-item">
+            <label>开始日期:</label>
+            <input v-model="newTask.startDate" type="date" />
+          </div>
+
+          <div class="form-item">
+            <label>结束日期:</label>
+            <input v-model="newTask.endDate" type="date" />
+          </div>
+        </div>
+
+        <div class="drawer-footer">
+          <button class="btn btn-primary" @click="addTask">确定</button>
+          <button class="btn btn-default" @click="showAddTaskDrawer = false">取消</button>
+        </div>
+      </div>
+    </div>
+
+    <!-- 自定义Dialog组件基于element plus -->
+    <el-dialog
+      v-model="showAddMilestoneDialog"
+      title="自定义添加里程碑组件 - Element Plus"
+      width="400px"
+      @close="newTask = { name: '', startDate: '', endDate: '' }"
+    >
+      <template #default>
+        <div class="form-item">
+          <label>任务名称:</label>
+          <el-input v-model="newTask.name" placeholder="请输入任务名称" />
+        </div>
+
+        <div class="form-item">
+          <label>日期:</label>
+          <el-date-picker v-model="newTask.startDate" type="date" value-format="YYYY-MM-DD" />
+        </div>
+      </template>
+
+      <template #footer>
+        <el-button @click="addMilestone">确定</el-button>
+        <el-button @click="showAddMilestoneDialog = false">取消</el-button>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
 <style scoped>
 /* 抽屉遮罩层 */
 .drawer-overlay {

npm-webpack-demo/src/main.js

@@ -1,8 +1,8 @@
-import { createApp } from 'vue';
-import App from './App.vue';
-import ElementPlus from 'element-plus';
-import 'element-plus/theme-chalk/index.css';
+import { createApp } from 'vue'
+import App from './App.vue'
+import ElementPlus from 'element-plus'
+import 'element-plus/theme-chalk/index.css'
 
-const app = createApp(App);
-app.use(ElementPlus);
-app.mount('#app');
+const app = createApp(App)
+app.use(ElementPlus)
+app.mount('#app')

package.json

@@ -1,6 +1,6 @@
 {
   "name": "jordium-gantt-vue3",
-  "version": "1.4.2-patch.2",
+  "version": "1.4.2-patch.3",
   "type": "module",
   "main": "dist/jordium-gantt-vue3.cjs.js",
   "module": "dist/jordium-gantt-vue3.es.js",