Skip to content

Core API

@iyotsuba/gantt-core 不依赖 Vue、React 或 DOM,负责三类共享能力:数据类型、时间轴算法与多实例同步协议。

GanttTask

ts
interface GanttTask {
  id: string
  title: string
  start: string | number | Date
  end?: string | number | Date
  kind?: 'task' | 'project' | 'milestone'
  parentId?: string
  level?: number
  progress?: number
  owner?: { name: string; avatar?: string; color?: string }
  status?: 'planned' | 'active' | 'blocked' | 'done'
  color?: string
  icon?: string
  barStyle?: 'solid' | 'outline' | 'striped' | 'soft' | 'gradient' | 'glass'
  barTemplate?: 'auto' | 'standard' | 'compact' | 'progress' | 'segmented' | 'summary' | 'milestone'
  barHeight?: number
  barMinWidth?: number
  barRadius?: number
  effect?: 'none' | 'auto' | 'shimmer' | 'pulse' | 'flow' | 'progress'
  segments?: GanttTaskSegment[]
  pattern?: GanttPatternOptions | false
  glow?: boolean
  disabled?: boolean
  meta?: Record<string, unknown>
}

Web 端进度使用 0...100meta 保留宿主业务字段;组件不会改写传入对象。

ts
interface GanttLink {
  id: string
  source: string
  target: string
  type?: 'finish-start' | 'start-start' | 'finish-finish' | 'start-finish'
  style?: 'orthogonal' | 'rounded' | 'curve' | 'dashed'
  color?: string
  effect?: 'none' | 'auto' | 'flow' | 'pulse' | 'glow'
  lineWidth?: number
  hitWidth?: number
  curveRadius?: number
  arrowSize?: number
  meta?: Record<string, unknown>
}

时间轴

导出说明
SCALE_PRESETS六档刻度配置
VIEW_ORDER从粗到细的维度顺序
buildTimeline(start, end, view)构建双层表头和时间格
dateToX(date, timeline)日期转像素坐标
xToDate(x, timeline)像素坐标转日期
snapDateToTimeline(date, timeline)按当前刻度吸附
getTaskRange(tasks, view)计算带缓冲的任务范围
parseGanttDate(input)统一解析日期输入

自动聚焦

findFocusDate(tasks, strategy, windowDays) 支持:

  • dense:在线性时间内对任务中点分桶,找到任务最密集窗口。
  • earliest:定位最早任务。
  • today:定位今天。

AutoFocusOptions.scope 可选 autoviewportall。大数据场景使用 viewport 可以只根据当前纵向窗口定位。

多图同步

ganttSyncHub 传递时间锚点和维度,不直接复制像素值。消息包含 sourceId,接收端不会回环广播。

ts
type GanttSyncMode = 'none' | 'scroll' | 'view' | 'all'

以 MIT License 开源