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...100。meta 保留宿主业务字段;组件不会改写传入对象。
GanttLink
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 可选 auto、viewport、all。大数据场景使用 viewport 可以只根据当前纵向窗口定位。
多图同步
ganttSyncHub 传递时间锚点和维度,不直接复制像素值。消息包含 sourceId,接收端不会回环广播。
ts
type GanttSyncMode = 'none' | 'scroll' | 'view' | 'all'