事件 (Events)

GanttFlow 提供了丰富的事件系统，方便你监听和响应各种操作。

事件列表

任务事件

事件名	参数	说明
task:click	(task: Task, event: MouseEvent)	点击任务时触发
task:dblclick	(task: Task, event: MouseEvent)	双击任务时触发
task:contextmenu	(task: Task, event: MouseEvent)	右键点击任务时触发
task:drag	(task: Task, event: MouseEvent, newStart: Date, newEnd: Date)	拖拽任务时持续触发
task:dragstart	(task: Task, event: MouseEvent)	拖拽开始时触发
task:dragend	(task: Task)	拖拽结束时触发
task:resize	(task: Task, newStart: Date, newEnd: Date)	调整任务大小时持续触发
task:resizestart	(task: Task)	调整大小开始时触发
task:resizeend	(task: Task)	调整大小结束时触发
task:progress	(task: Task, progress: number)	修改进度时触发
task:toggle	(task: Task, collapsed: boolean)	展开/折叠任务时触发
task:add	(task: Task)	添加新任务时触发
task:delete	(task: Task)	删除任务时触发
task:select	(task: Task, selected: boolean)	选中/取消选中任务时触发

视图事件

事件名	参数	说明
view:change	(viewMode: ViewMode)	切换视图模式时触发
view:mounted	()	视图挂载完成时触发
date:change	(startDate: Date, endDate: Date)	日期范围变化时触发
scroll	(scrollTop: number, scrollLeft: number)	滚动甘特图时触发
scrolltop	(scrollTop: number)	垂直滚动时触发
scrollleft	(scrollLeft: number)	水平滚动时触发
scrollbottom	()	滚动到底部时触发

依赖事件

事件名	参数	说明
dependency:add	(dependency: Dependency)	添加依赖时触发
dependency:delete	(dependency: Dependency)	删除依赖时触发
dependency:error	(error: Error)	依赖错误时触发（如循环依赖）
dependency:dragstart	(fromId: string)	开始拖拽创建依赖时触发
dependency:dragend	(fromId: string, toId: string)	拖拽创建依赖结束时触发

导出事件

事件名	参数	说明
export:start	(format: 'png' | 'pdf' | 'excel')	开始导出时触发
export:complete	(blob: Blob | string)	导出完成时触发
export:error	(error: Error)	导出失败时触发

主题事件

事件名	参数	说明
theme:change	(theme: 'light' | 'dark')	主题切换时触发

历史事件

事件名	参数	说明
history:change	(canUndo: boolean, canRedo: boolean)	历史记录变化时触发

使用方式

React Props 方式

<EnhancedGanttChart
  tasks={tasks}
  onTaskClick={(task, event) => {
    console.log('点击任务:', task.name)
  }}
  onTaskDrag={(task, event, newStart, newEnd) => {
    console.log('拖拽任务到:', newStart, newEnd)
  }}
  onViewChange={(mode) => {
    console.log('切换到视图:', mode)
  }}
  onProgressChange={(task, progress) => {
    console.log(`${task.name} 进度: ${progress}%`)
  }}
/>

通过 ref 监听（推荐）

import React, { useRef, useEffect } from "react"
import { EnhancedGanttChart } from "@agions/gantt-flow"

function App() {
  const ganttRef = useRef(null)

  useEffect(() => {
    const gantt = ganttRef.current?.getInstanceCore()
    if (!gantt) return

    // 任务点击
    const handleTaskClick = (task) => {
      console.log('任务点击:', task)
    }

    // 拖拽
    const handleTaskDrag = (task, event, newStart, newEnd) => {
      console.log('任务拖拽:', task.name, newStart, newEnd)
    }

    // 添加监听
    gantt.on('task:click', handleTaskClick)
    gantt.on('task:drag', handleTaskDrag)

    // 清理
    return () => {
      gantt.off('task:click', handleTaskClick)
      gantt.off('task:drag', handleTaskDrag)
    }
  }, [])

  return <EnhancedGanttChart ref={ganttRef} tasks={tasks} />
}

移除事件监听

const handleTaskClick = (task) => {
  console.log('任务:', task)
}

// 添加监听
gantt.on('task:click', handleTaskClick)

// 移除特定监听
gantt.off('task:click', handleTaskClick)

// 移除所有 task:click 监听
gantt.off('task:click')

// 移除所有监听
gantt.off()

一次性事件

// 只触发一次，然后自动移除
gantt.once('task:click', (task) => {
  console.log('首次点击:', task.name)
})

事件命名空间

// 使用命名空间组织事件
gantt.on('task.click', handleClick)
gantt.on('task.drag', handleDrag)

// 触发
gantt.emit('task.click', task)

// 移除命名空间下所有事件
gantt.off('task')

事件防抖

对于高频事件（如 scroll），建议使用防抖：

import { debounce } from 'lodash'

const handleScroll = debounce((scrollTop, scrollLeft) => {
  console.log('滚动位置:', scrollTop, scrollLeft)
}, 100)

gantt.on('scroll', handleScroll)

// 清理
gantt.off('scroll', handleScroll)

完整示例

import React, { useRef, useEffect } from "react"
import { EnhancedGanttChart } from "@agions/gantt-flow"
import "@agions/gantt-flow/style"

function GanttWithEvents() {
  const ganttRef = useRef(null)

  useEffect(() => {
    const gantt = ganttRef.current?.getInstanceCore()
    if (!gantt) return

    // 任务事件
    gantt.on('task:click', (task) => {
      console.log('✓ 任务点击:', task.name)
    })

    gantt.on('task:drag', (task, event, newStart, newEnd) => {
      console.log('↔ 任务拖拽:', task.name, newStart, newEnd)
    })

    gantt.on('task:dragstart', (task) => {
      console.log('▶ 拖拽开始:', task.name)
    })

    gantt.on('task:dragend', (task) => {
      console.log('■ 拖拽结束:', task.name)
    })

    gantt.on('task:progress', (task, progress) => {
      console.log('📊 进度更新:', task.name, progress)
    })

    // 视图事件
    gantt.on('view:change', (mode) => {
      console.log('🔄 视图切换:', mode)
    })

    // 依赖事件
    gantt.on('dependency:add', (dep) => {
      console.log('🔗 添加依赖:', dep)
    })

    gantt.on('dependency:error', (err) => {
      console.error('❌ 依赖错误:', err.message)
      alert(err.message)
    })

    // 导出事件
    gantt.on('export:start', (format) => {
      console.log('📤 开始导出:', format)
    })

    gantt.on('export:complete', (result) => {
      console.log('✅ 导出完成')
    })

    gantt.on('export:error', (err) => {
      console.error('❌ 导出失败:', err)
    })

    // 历史事件
    gantt.on('history:change', (canUndo, canRedo) => {
      console.log('📝 历史记录变化:', { canUndo, canRedo })
    })

    return () => {
      gantt.off() // 清理所有事件监听
    }
  }, [])

  return <EnhancedGanttChart ref={ganttRef} tasks={tasks} />
}

相关链接

• 组件属性 - Props 参考
• 方法 - 组件方法