@canvas-components/gantt-table 0.1.1 → 0.1.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +184 -1
- package/dist/index.cjs +2321 -161
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +218 -21
- package/dist/index.d.ts +218 -21
- package/dist/index.js +2314 -162
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/dist/index.d.cts
CHANGED
|
@@ -1,21 +1,55 @@
|
|
|
1
1
|
/** 甘特图缩放级别。 */
|
|
2
2
|
type GanttScale = "day" | "week" | "month";
|
|
3
|
+
/** 时间轴多层表头的时间单位。 */
|
|
4
|
+
type GanttHeaderUnit = "year" | "quarter" | "month" | "week" | "day";
|
|
5
|
+
/** 时间轴单层表头配置。 */
|
|
6
|
+
interface GanttHeaderLevel {
|
|
7
|
+
unit: GanttHeaderUnit;
|
|
8
|
+
/** 当前层高度；未配置时使用 headerHeight。 */
|
|
9
|
+
height?: number;
|
|
10
|
+
/** 自定义当前分组的显示文本。 */
|
|
11
|
+
formatter?: (start: Date, end: Date) => string;
|
|
12
|
+
}
|
|
3
13
|
/** 甘特任务定义。 */
|
|
4
14
|
interface GanttTask {
|
|
5
15
|
id: string;
|
|
6
16
|
title: string;
|
|
7
|
-
|
|
8
|
-
|
|
17
|
+
/** 多任务行模式下，同一行内的任务条。 */
|
|
18
|
+
tasks?: GanttTask[];
|
|
19
|
+
/** 任务开始时间；与 end 同时存在时绘制行内进度条。 */
|
|
20
|
+
start?: Date | string | number;
|
|
21
|
+
/** 任务结束时间；与 start 同时存在时绘制行内进度条。 */
|
|
22
|
+
end?: Date | string | number;
|
|
9
23
|
progress?: number;
|
|
10
24
|
color?: string;
|
|
25
|
+
/** 当前任务已完成进度的颜色，未配置时使用主题色。 */
|
|
26
|
+
progressColor?: string;
|
|
27
|
+
/** 自定义任务条内部内容。 */
|
|
28
|
+
render?: GanttTaskRender;
|
|
29
|
+
/** 自定义任务条内部文字样式。 */
|
|
30
|
+
style?: GanttTaskStyle;
|
|
11
31
|
parentId?: string;
|
|
12
32
|
collapsed?: boolean;
|
|
13
33
|
}
|
|
34
|
+
/** 任务条内文字内容的样式。 */
|
|
35
|
+
interface GanttTaskStyle {
|
|
36
|
+
color?: string;
|
|
37
|
+
fontSize?: number;
|
|
38
|
+
fontWeight?: string | number;
|
|
39
|
+
fontFamily?: string;
|
|
40
|
+
textAlign?: "left" | "center" | "right";
|
|
41
|
+
}
|
|
42
|
+
/** 任务条自定义内容渲染结果。 */
|
|
43
|
+
type GanttTaskRenderResult = string | number | null | undefined;
|
|
44
|
+
/** 任务条自定义内容渲染函数。 */
|
|
45
|
+
type GanttTaskRender = (task: GanttTask, rowIndex: number) => GanttTaskRenderResult;
|
|
14
46
|
/** 任务依赖定义。 */
|
|
15
47
|
interface GanttDependency {
|
|
16
48
|
from: string;
|
|
17
49
|
to: string;
|
|
18
50
|
type?: "finish-to-start" | "start-to-start" | "finish-to-finish";
|
|
51
|
+
/** 当前依赖连线颜色，未配置时使用主题色。 */
|
|
52
|
+
color?: string;
|
|
19
53
|
}
|
|
20
54
|
/** 甘特图主题。 */
|
|
21
55
|
interface GanttTheme {
|
|
@@ -41,11 +75,42 @@ interface GanttOptions {
|
|
|
41
75
|
endDate?: Date | string | number;
|
|
42
76
|
scale?: GanttScale;
|
|
43
77
|
rowHeight?: number;
|
|
78
|
+
/** 单层表头高度。@default 56 */
|
|
44
79
|
headerHeight?: number;
|
|
80
|
+
/** 时间轴表头层级，由上至下配置；默认仅显示当前 scale 对应层级。 */
|
|
81
|
+
headerLevels?: GanttHeaderLevel[];
|
|
45
82
|
taskColumnWidth?: number;
|
|
83
|
+
/** 固定任务列的表头文案。@default "任务" */
|
|
84
|
+
taskColumnTitle?: string;
|
|
85
|
+
/** 是否允许拖拽调整固定任务列宽度。@default true */
|
|
86
|
+
taskColumnResizable?: boolean;
|
|
87
|
+
/** 固定任务列最小宽度。@default 120 */
|
|
88
|
+
taskColumnMinWidth?: number;
|
|
89
|
+
/** 固定任务列最大宽度。@default 480 */
|
|
90
|
+
taskColumnMaxWidth?: number;
|
|
91
|
+
/** 是否开启任务条编辑模式。@default false */
|
|
92
|
+
editable?: boolean;
|
|
93
|
+
/** 编辑模式下是否允许拖拽任务条两端调整日期范围。@default true */
|
|
94
|
+
taskResizable?: boolean;
|
|
95
|
+
/** 拖拽移动或缩放任务条时，是否吸附到最小日维度。@default false */
|
|
96
|
+
snapToColumn?: boolean;
|
|
97
|
+
/** 是否显示周末背景色。@default true */
|
|
98
|
+
weekendBackground?: boolean;
|
|
99
|
+
/** 是否允许在固定任务列中拖拽调整任务行顺序。@default false */
|
|
100
|
+
rowDraggable?: boolean;
|
|
101
|
+
/** 是否开启一行多个任务条模式。@default false */
|
|
102
|
+
multiTask?: boolean;
|
|
46
103
|
theme?: Partial<GanttTheme>;
|
|
47
104
|
onTaskClick?: (task: GanttTask) => void;
|
|
105
|
+
/** 任务条新增、移动、缩放或删除完成时触发。 */
|
|
48
106
|
onTaskChange?: (task: GanttTask) => void;
|
|
107
|
+
/** 点击依赖连线时触发。 */
|
|
108
|
+
onDependencyClick?: (dependency: GanttDependency, index: number) => void;
|
|
109
|
+
/** 依赖连线新增、修改或删除完成时触发。 */
|
|
110
|
+
onDependenciesChange?: (dependencies: GanttDependency[]) => void;
|
|
111
|
+
onTaskColumnResize?: (width: number) => void;
|
|
112
|
+
/** 任务行顺序发生变化时触发。 */
|
|
113
|
+
onTaskReorder?: (tasks: GanttTask[], fromIndex: number, targetIndex: number) => void;
|
|
49
114
|
}
|
|
50
115
|
declare const defaultGanttTheme: GanttTheme;
|
|
51
116
|
|
|
@@ -54,13 +119,11 @@ declare class Gantt {
|
|
|
54
119
|
private readonly container;
|
|
55
120
|
private readonly canvas;
|
|
56
121
|
private readonly context;
|
|
122
|
+
private readonly runtime;
|
|
123
|
+
private readonly eventController;
|
|
57
124
|
private options;
|
|
58
|
-
private layout;
|
|
59
|
-
private selectedId;
|
|
60
|
-
private scrollLeft;
|
|
61
|
-
private scrollTop;
|
|
62
125
|
private resizeObserver;
|
|
63
|
-
private
|
|
126
|
+
private renderFrameId;
|
|
64
127
|
constructor(container: HTMLElement, options: GanttOptions);
|
|
65
128
|
/** 挂载并开始渲染。 */
|
|
66
129
|
mount(): void;
|
|
@@ -68,37 +131,171 @@ declare class Gantt {
|
|
|
68
131
|
updateOptions(options: GanttOptions): void;
|
|
69
132
|
/** 获取当前选中任务。 */
|
|
70
133
|
getSelectedTask(): GanttTask | null;
|
|
134
|
+
/** 获取当前选中的依赖连线。 */
|
|
135
|
+
getSelectedDependency(): GanttDependency | null;
|
|
136
|
+
/** 滚动到指定位置，超出内容范围的坐标会被自动约束。 */
|
|
137
|
+
scrollTo(left: number, top?: number): void;
|
|
71
138
|
/** 销毁实例。 */
|
|
72
139
|
destroy(): void;
|
|
73
140
|
private render;
|
|
74
|
-
private
|
|
75
|
-
private handlePointerDown;
|
|
76
|
-
private handlePointerMove;
|
|
77
|
-
private handlePointerUp;
|
|
78
|
-
private handleWheel;
|
|
141
|
+
private scheduleRender;
|
|
79
142
|
}
|
|
80
143
|
|
|
144
|
+
interface GanttLayoutRow {
|
|
145
|
+
task: GanttTask;
|
|
146
|
+
tasks: GanttTask[];
|
|
147
|
+
index: number;
|
|
148
|
+
y: number;
|
|
149
|
+
}
|
|
150
|
+
interface GanttHeaderLevelLayout extends GanttHeaderLevel {
|
|
151
|
+
y: number;
|
|
152
|
+
height: number;
|
|
153
|
+
}
|
|
81
154
|
interface GanttLayout {
|
|
155
|
+
scale: GanttScale;
|
|
82
156
|
start: number;
|
|
83
157
|
end: number;
|
|
84
158
|
dayWidth: number;
|
|
85
159
|
rowHeight: number;
|
|
86
160
|
headerHeight: number;
|
|
161
|
+
headerLevels: GanttHeaderLevelLayout[];
|
|
87
162
|
taskColumnWidth: number;
|
|
88
|
-
rows:
|
|
89
|
-
task: GanttTask;
|
|
90
|
-
index: number;
|
|
91
|
-
y: number;
|
|
92
|
-
}>;
|
|
163
|
+
rows: GanttLayoutRow[];
|
|
93
164
|
totalWidth: number;
|
|
94
165
|
totalHeight: number;
|
|
95
166
|
}
|
|
96
|
-
declare function resolveDayWidth(scale: GanttScale):
|
|
97
|
-
declare function buildGanttLayout(options: GanttOptions,
|
|
167
|
+
declare function resolveDayWidth(scale: GanttScale): 12 | 28 | 80;
|
|
168
|
+
declare function buildGanttLayout(options: GanttOptions, _width: number): GanttLayout;
|
|
98
169
|
declare function xForDate(timestamp: number, layout: GanttLayout): number;
|
|
99
170
|
|
|
171
|
+
interface GanttScrollState {
|
|
172
|
+
left: number;
|
|
173
|
+
top: number;
|
|
174
|
+
}
|
|
175
|
+
interface GanttScrollBounds {
|
|
176
|
+
maxLeft: number;
|
|
177
|
+
maxTop: number;
|
|
178
|
+
}
|
|
179
|
+
interface GanttViewportLayout {
|
|
180
|
+
width: number;
|
|
181
|
+
height: number;
|
|
182
|
+
contentRight: number;
|
|
183
|
+
contentBottom: number;
|
|
184
|
+
timelineViewportWidth: number;
|
|
185
|
+
bodyViewportHeight: number;
|
|
186
|
+
hasHorizontalScrollbar: boolean;
|
|
187
|
+
hasVerticalScrollbar: boolean;
|
|
188
|
+
bounds: GanttScrollBounds;
|
|
189
|
+
}
|
|
190
|
+
/** 计算内容视口与占位式滚动条所需空间。 */
|
|
191
|
+
declare function resolveGanttViewportLayout(layout: GanttLayout, width: number, height: number): GanttViewportLayout;
|
|
192
|
+
/** 计算甘特图在当前视口内的最大滚动距离。 */
|
|
193
|
+
declare function resolveGanttScrollBounds(layout: GanttLayout, width: number, height: number): GanttScrollBounds;
|
|
194
|
+
/** 将滚动位置约束在有效内容范围内。 */
|
|
195
|
+
declare function clampGanttScroll(scroll: GanttScrollState, bounds: GanttScrollBounds): GanttScrollState;
|
|
196
|
+
|
|
197
|
+
interface GanttScrollbarRect {
|
|
198
|
+
x: number;
|
|
199
|
+
y: number;
|
|
200
|
+
width: number;
|
|
201
|
+
height: number;
|
|
202
|
+
}
|
|
203
|
+
interface GanttAxisScrollbarLayout {
|
|
204
|
+
decreaseButton: GanttScrollbarRect;
|
|
205
|
+
increaseButton: GanttScrollbarRect;
|
|
206
|
+
track: GanttScrollbarRect;
|
|
207
|
+
thumb: GanttScrollbarRect;
|
|
208
|
+
}
|
|
209
|
+
interface GanttScrollbarLayout {
|
|
210
|
+
horizontal?: GanttAxisScrollbarLayout;
|
|
211
|
+
vertical?: GanttAxisScrollbarLayout;
|
|
212
|
+
}
|
|
213
|
+
type GanttScrollbarRole = "decrease-button" | "increase-button" | "track" | "thumb";
|
|
214
|
+
interface GanttScrollbarHit {
|
|
215
|
+
axis: "horizontal" | "vertical";
|
|
216
|
+
role: GanttScrollbarRole;
|
|
217
|
+
}
|
|
218
|
+
/** 计算带两端按钮的占位式滚动条布局。 */
|
|
219
|
+
declare function computeGanttScrollbarLayout(params: {
|
|
220
|
+
layout: GanttLayout;
|
|
221
|
+
viewport: GanttViewportLayout;
|
|
222
|
+
scroll: GanttScrollState;
|
|
223
|
+
}): GanttScrollbarLayout;
|
|
224
|
+
/** 命中滚动条的按钮、轨道或滑块。 */
|
|
225
|
+
declare function hitTestGanttScrollbar(x: number, y: number, layout: GanttScrollbarLayout): GanttScrollbarHit | null;
|
|
226
|
+
|
|
100
227
|
declare function hitTestTask(x: number, y: number, layout: GanttLayout): GanttTask | null;
|
|
101
228
|
|
|
102
|
-
|
|
229
|
+
interface GanttTaskBarRect {
|
|
230
|
+
x: number;
|
|
231
|
+
y: number;
|
|
232
|
+
width: number;
|
|
233
|
+
height: number;
|
|
234
|
+
}
|
|
235
|
+
|
|
236
|
+
interface GanttDependencyPoint {
|
|
237
|
+
x: number;
|
|
238
|
+
y: number;
|
|
239
|
+
}
|
|
240
|
+
interface GanttDependencyRoute {
|
|
241
|
+
points: GanttDependencyPoint[];
|
|
242
|
+
arrowDirection: "left" | "right";
|
|
243
|
+
}
|
|
244
|
+
/** 计算类似示意图的正交依赖连线路径。 */
|
|
245
|
+
declare function resolveDependencyRoute(params: {
|
|
246
|
+
from: GanttTaskBarRect;
|
|
247
|
+
to: GanttTaskBarRect;
|
|
248
|
+
rowHeight: number;
|
|
249
|
+
type?: GanttDependency["type"];
|
|
250
|
+
}): GanttDependencyRoute;
|
|
251
|
+
/** 根据任务布局计算一条依赖线的完整路径。 */
|
|
252
|
+
declare function resolveDependencyLayoutRoute(dependency: GanttDependency, layout: GanttLayout, rowOffsets?: ReadonlyMap<string, number>): GanttDependencyRoute | null;
|
|
253
|
+
/** 命中距离鼠标最近的依赖折线。 */
|
|
254
|
+
declare function hitTestGanttDependency(params: {
|
|
255
|
+
x: number;
|
|
256
|
+
y: number;
|
|
257
|
+
layout: GanttLayout;
|
|
258
|
+
dependencies: GanttDependency[];
|
|
259
|
+
tolerance?: number;
|
|
260
|
+
}): {
|
|
261
|
+
dependency: GanttDependency;
|
|
262
|
+
index: number;
|
|
263
|
+
route: GanttDependencyRoute;
|
|
264
|
+
} | null;
|
|
265
|
+
|
|
266
|
+
type GanttDependencySide = "start" | "finish";
|
|
267
|
+
interface GanttDependencyDragVisualState {
|
|
268
|
+
sourceTaskId: string;
|
|
269
|
+
sourceSide: GanttDependencySide;
|
|
270
|
+
sourceX: number;
|
|
271
|
+
sourceY: number;
|
|
272
|
+
currentX: number;
|
|
273
|
+
currentY: number;
|
|
274
|
+
targetTaskId: string | null;
|
|
275
|
+
targetSide: GanttDependencySide | null;
|
|
276
|
+
}
|
|
277
|
+
|
|
278
|
+
interface GanttRowDragVisualState {
|
|
279
|
+
phase: "potential" | "dragging";
|
|
280
|
+
taskId: string;
|
|
281
|
+
fromIndex: number;
|
|
282
|
+
targetIndex: number;
|
|
283
|
+
offsets: ReadonlyMap<string, number>;
|
|
284
|
+
}
|
|
285
|
+
|
|
286
|
+
interface RenderGanttViewport {
|
|
287
|
+
viewport: GanttViewportLayout;
|
|
288
|
+
scroll: GanttScrollState;
|
|
289
|
+
scrollbars?: GanttScrollbarLayout;
|
|
290
|
+
taskColumnTitle?: string;
|
|
291
|
+
taskResizable?: boolean;
|
|
292
|
+
weekendBackground?: boolean;
|
|
293
|
+
rowDrag?: GanttRowDragVisualState | null;
|
|
294
|
+
selectedDependencyIndex?: number | null;
|
|
295
|
+
dependencyDrag?: GanttDependencyDragVisualState | null;
|
|
296
|
+
dependencyEditable?: boolean;
|
|
297
|
+
}
|
|
298
|
+
/** 按表体、固定列、固定表头和滚动条分层绘制甘特图。 */
|
|
299
|
+
declare function renderGantt(context: CanvasRenderingContext2D, layout: GanttLayout, dependencies: GanttDependency[], selectedId: string | null, theme: GanttTheme, renderViewport?: RenderGanttViewport): void;
|
|
103
300
|
|
|
104
|
-
export { Gantt, type GanttDependency, type GanttLayout, type GanttOptions, type GanttScale, type GanttTask, type GanttTheme, buildGanttLayout, defaultGanttTheme, hitTestTask, renderGantt, resolveDayWidth, xForDate };
|
|
301
|
+
export { Gantt, type GanttAxisScrollbarLayout, type GanttDependency, type GanttHeaderLevel, type GanttHeaderUnit, type GanttLayout, type GanttOptions, type GanttScale, type GanttScrollBounds, type GanttScrollState, type GanttScrollbarHit, type GanttScrollbarLayout, type GanttScrollbarRect, type GanttScrollbarRole, type GanttTask, type GanttTaskRender, type GanttTaskRenderResult, type GanttTaskStyle, type GanttTheme, type GanttViewportLayout, type RenderGanttViewport, buildGanttLayout, clampGanttScroll, computeGanttScrollbarLayout, defaultGanttTheme, hitTestGanttDependency, hitTestGanttScrollbar, hitTestTask, renderGantt, resolveDayWidth, resolveDependencyLayoutRoute, resolveDependencyRoute, resolveGanttScrollBounds, resolveGanttViewportLayout, xForDate };
|
package/dist/index.d.ts
CHANGED
|
@@ -1,21 +1,55 @@
|
|
|
1
1
|
/** 甘特图缩放级别。 */
|
|
2
2
|
type GanttScale = "day" | "week" | "month";
|
|
3
|
+
/** 时间轴多层表头的时间单位。 */
|
|
4
|
+
type GanttHeaderUnit = "year" | "quarter" | "month" | "week" | "day";
|
|
5
|
+
/** 时间轴单层表头配置。 */
|
|
6
|
+
interface GanttHeaderLevel {
|
|
7
|
+
unit: GanttHeaderUnit;
|
|
8
|
+
/** 当前层高度；未配置时使用 headerHeight。 */
|
|
9
|
+
height?: number;
|
|
10
|
+
/** 自定义当前分组的显示文本。 */
|
|
11
|
+
formatter?: (start: Date, end: Date) => string;
|
|
12
|
+
}
|
|
3
13
|
/** 甘特任务定义。 */
|
|
4
14
|
interface GanttTask {
|
|
5
15
|
id: string;
|
|
6
16
|
title: string;
|
|
7
|
-
|
|
8
|
-
|
|
17
|
+
/** 多任务行模式下，同一行内的任务条。 */
|
|
18
|
+
tasks?: GanttTask[];
|
|
19
|
+
/** 任务开始时间；与 end 同时存在时绘制行内进度条。 */
|
|
20
|
+
start?: Date | string | number;
|
|
21
|
+
/** 任务结束时间；与 start 同时存在时绘制行内进度条。 */
|
|
22
|
+
end?: Date | string | number;
|
|
9
23
|
progress?: number;
|
|
10
24
|
color?: string;
|
|
25
|
+
/** 当前任务已完成进度的颜色，未配置时使用主题色。 */
|
|
26
|
+
progressColor?: string;
|
|
27
|
+
/** 自定义任务条内部内容。 */
|
|
28
|
+
render?: GanttTaskRender;
|
|
29
|
+
/** 自定义任务条内部文字样式。 */
|
|
30
|
+
style?: GanttTaskStyle;
|
|
11
31
|
parentId?: string;
|
|
12
32
|
collapsed?: boolean;
|
|
13
33
|
}
|
|
34
|
+
/** 任务条内文字内容的样式。 */
|
|
35
|
+
interface GanttTaskStyle {
|
|
36
|
+
color?: string;
|
|
37
|
+
fontSize?: number;
|
|
38
|
+
fontWeight?: string | number;
|
|
39
|
+
fontFamily?: string;
|
|
40
|
+
textAlign?: "left" | "center" | "right";
|
|
41
|
+
}
|
|
42
|
+
/** 任务条自定义内容渲染结果。 */
|
|
43
|
+
type GanttTaskRenderResult = string | number | null | undefined;
|
|
44
|
+
/** 任务条自定义内容渲染函数。 */
|
|
45
|
+
type GanttTaskRender = (task: GanttTask, rowIndex: number) => GanttTaskRenderResult;
|
|
14
46
|
/** 任务依赖定义。 */
|
|
15
47
|
interface GanttDependency {
|
|
16
48
|
from: string;
|
|
17
49
|
to: string;
|
|
18
50
|
type?: "finish-to-start" | "start-to-start" | "finish-to-finish";
|
|
51
|
+
/** 当前依赖连线颜色，未配置时使用主题色。 */
|
|
52
|
+
color?: string;
|
|
19
53
|
}
|
|
20
54
|
/** 甘特图主题。 */
|
|
21
55
|
interface GanttTheme {
|
|
@@ -41,11 +75,42 @@ interface GanttOptions {
|
|
|
41
75
|
endDate?: Date | string | number;
|
|
42
76
|
scale?: GanttScale;
|
|
43
77
|
rowHeight?: number;
|
|
78
|
+
/** 单层表头高度。@default 56 */
|
|
44
79
|
headerHeight?: number;
|
|
80
|
+
/** 时间轴表头层级，由上至下配置；默认仅显示当前 scale 对应层级。 */
|
|
81
|
+
headerLevels?: GanttHeaderLevel[];
|
|
45
82
|
taskColumnWidth?: number;
|
|
83
|
+
/** 固定任务列的表头文案。@default "任务" */
|
|
84
|
+
taskColumnTitle?: string;
|
|
85
|
+
/** 是否允许拖拽调整固定任务列宽度。@default true */
|
|
86
|
+
taskColumnResizable?: boolean;
|
|
87
|
+
/** 固定任务列最小宽度。@default 120 */
|
|
88
|
+
taskColumnMinWidth?: number;
|
|
89
|
+
/** 固定任务列最大宽度。@default 480 */
|
|
90
|
+
taskColumnMaxWidth?: number;
|
|
91
|
+
/** 是否开启任务条编辑模式。@default false */
|
|
92
|
+
editable?: boolean;
|
|
93
|
+
/** 编辑模式下是否允许拖拽任务条两端调整日期范围。@default true */
|
|
94
|
+
taskResizable?: boolean;
|
|
95
|
+
/** 拖拽移动或缩放任务条时，是否吸附到最小日维度。@default false */
|
|
96
|
+
snapToColumn?: boolean;
|
|
97
|
+
/** 是否显示周末背景色。@default true */
|
|
98
|
+
weekendBackground?: boolean;
|
|
99
|
+
/** 是否允许在固定任务列中拖拽调整任务行顺序。@default false */
|
|
100
|
+
rowDraggable?: boolean;
|
|
101
|
+
/** 是否开启一行多个任务条模式。@default false */
|
|
102
|
+
multiTask?: boolean;
|
|
46
103
|
theme?: Partial<GanttTheme>;
|
|
47
104
|
onTaskClick?: (task: GanttTask) => void;
|
|
105
|
+
/** 任务条新增、移动、缩放或删除完成时触发。 */
|
|
48
106
|
onTaskChange?: (task: GanttTask) => void;
|
|
107
|
+
/** 点击依赖连线时触发。 */
|
|
108
|
+
onDependencyClick?: (dependency: GanttDependency, index: number) => void;
|
|
109
|
+
/** 依赖连线新增、修改或删除完成时触发。 */
|
|
110
|
+
onDependenciesChange?: (dependencies: GanttDependency[]) => void;
|
|
111
|
+
onTaskColumnResize?: (width: number) => void;
|
|
112
|
+
/** 任务行顺序发生变化时触发。 */
|
|
113
|
+
onTaskReorder?: (tasks: GanttTask[], fromIndex: number, targetIndex: number) => void;
|
|
49
114
|
}
|
|
50
115
|
declare const defaultGanttTheme: GanttTheme;
|
|
51
116
|
|
|
@@ -54,13 +119,11 @@ declare class Gantt {
|
|
|
54
119
|
private readonly container;
|
|
55
120
|
private readonly canvas;
|
|
56
121
|
private readonly context;
|
|
122
|
+
private readonly runtime;
|
|
123
|
+
private readonly eventController;
|
|
57
124
|
private options;
|
|
58
|
-
private layout;
|
|
59
|
-
private selectedId;
|
|
60
|
-
private scrollLeft;
|
|
61
|
-
private scrollTop;
|
|
62
125
|
private resizeObserver;
|
|
63
|
-
private
|
|
126
|
+
private renderFrameId;
|
|
64
127
|
constructor(container: HTMLElement, options: GanttOptions);
|
|
65
128
|
/** 挂载并开始渲染。 */
|
|
66
129
|
mount(): void;
|
|
@@ -68,37 +131,171 @@ declare class Gantt {
|
|
|
68
131
|
updateOptions(options: GanttOptions): void;
|
|
69
132
|
/** 获取当前选中任务。 */
|
|
70
133
|
getSelectedTask(): GanttTask | null;
|
|
134
|
+
/** 获取当前选中的依赖连线。 */
|
|
135
|
+
getSelectedDependency(): GanttDependency | null;
|
|
136
|
+
/** 滚动到指定位置，超出内容范围的坐标会被自动约束。 */
|
|
137
|
+
scrollTo(left: number, top?: number): void;
|
|
71
138
|
/** 销毁实例。 */
|
|
72
139
|
destroy(): void;
|
|
73
140
|
private render;
|
|
74
|
-
private
|
|
75
|
-
private handlePointerDown;
|
|
76
|
-
private handlePointerMove;
|
|
77
|
-
private handlePointerUp;
|
|
78
|
-
private handleWheel;
|
|
141
|
+
private scheduleRender;
|
|
79
142
|
}
|
|
80
143
|
|
|
144
|
+
interface GanttLayoutRow {
|
|
145
|
+
task: GanttTask;
|
|
146
|
+
tasks: GanttTask[];
|
|
147
|
+
index: number;
|
|
148
|
+
y: number;
|
|
149
|
+
}
|
|
150
|
+
interface GanttHeaderLevelLayout extends GanttHeaderLevel {
|
|
151
|
+
y: number;
|
|
152
|
+
height: number;
|
|
153
|
+
}
|
|
81
154
|
interface GanttLayout {
|
|
155
|
+
scale: GanttScale;
|
|
82
156
|
start: number;
|
|
83
157
|
end: number;
|
|
84
158
|
dayWidth: number;
|
|
85
159
|
rowHeight: number;
|
|
86
160
|
headerHeight: number;
|
|
161
|
+
headerLevels: GanttHeaderLevelLayout[];
|
|
87
162
|
taskColumnWidth: number;
|
|
88
|
-
rows:
|
|
89
|
-
task: GanttTask;
|
|
90
|
-
index: number;
|
|
91
|
-
y: number;
|
|
92
|
-
}>;
|
|
163
|
+
rows: GanttLayoutRow[];
|
|
93
164
|
totalWidth: number;
|
|
94
165
|
totalHeight: number;
|
|
95
166
|
}
|
|
96
|
-
declare function resolveDayWidth(scale: GanttScale):
|
|
97
|
-
declare function buildGanttLayout(options: GanttOptions,
|
|
167
|
+
declare function resolveDayWidth(scale: GanttScale): 12 | 28 | 80;
|
|
168
|
+
declare function buildGanttLayout(options: GanttOptions, _width: number): GanttLayout;
|
|
98
169
|
declare function xForDate(timestamp: number, layout: GanttLayout): number;
|
|
99
170
|
|
|
171
|
+
interface GanttScrollState {
|
|
172
|
+
left: number;
|
|
173
|
+
top: number;
|
|
174
|
+
}
|
|
175
|
+
interface GanttScrollBounds {
|
|
176
|
+
maxLeft: number;
|
|
177
|
+
maxTop: number;
|
|
178
|
+
}
|
|
179
|
+
interface GanttViewportLayout {
|
|
180
|
+
width: number;
|
|
181
|
+
height: number;
|
|
182
|
+
contentRight: number;
|
|
183
|
+
contentBottom: number;
|
|
184
|
+
timelineViewportWidth: number;
|
|
185
|
+
bodyViewportHeight: number;
|
|
186
|
+
hasHorizontalScrollbar: boolean;
|
|
187
|
+
hasVerticalScrollbar: boolean;
|
|
188
|
+
bounds: GanttScrollBounds;
|
|
189
|
+
}
|
|
190
|
+
/** 计算内容视口与占位式滚动条所需空间。 */
|
|
191
|
+
declare function resolveGanttViewportLayout(layout: GanttLayout, width: number, height: number): GanttViewportLayout;
|
|
192
|
+
/** 计算甘特图在当前视口内的最大滚动距离。 */
|
|
193
|
+
declare function resolveGanttScrollBounds(layout: GanttLayout, width: number, height: number): GanttScrollBounds;
|
|
194
|
+
/** 将滚动位置约束在有效内容范围内。 */
|
|
195
|
+
declare function clampGanttScroll(scroll: GanttScrollState, bounds: GanttScrollBounds): GanttScrollState;
|
|
196
|
+
|
|
197
|
+
interface GanttScrollbarRect {
|
|
198
|
+
x: number;
|
|
199
|
+
y: number;
|
|
200
|
+
width: number;
|
|
201
|
+
height: number;
|
|
202
|
+
}
|
|
203
|
+
interface GanttAxisScrollbarLayout {
|
|
204
|
+
decreaseButton: GanttScrollbarRect;
|
|
205
|
+
increaseButton: GanttScrollbarRect;
|
|
206
|
+
track: GanttScrollbarRect;
|
|
207
|
+
thumb: GanttScrollbarRect;
|
|
208
|
+
}
|
|
209
|
+
interface GanttScrollbarLayout {
|
|
210
|
+
horizontal?: GanttAxisScrollbarLayout;
|
|
211
|
+
vertical?: GanttAxisScrollbarLayout;
|
|
212
|
+
}
|
|
213
|
+
type GanttScrollbarRole = "decrease-button" | "increase-button" | "track" | "thumb";
|
|
214
|
+
interface GanttScrollbarHit {
|
|
215
|
+
axis: "horizontal" | "vertical";
|
|
216
|
+
role: GanttScrollbarRole;
|
|
217
|
+
}
|
|
218
|
+
/** 计算带两端按钮的占位式滚动条布局。 */
|
|
219
|
+
declare function computeGanttScrollbarLayout(params: {
|
|
220
|
+
layout: GanttLayout;
|
|
221
|
+
viewport: GanttViewportLayout;
|
|
222
|
+
scroll: GanttScrollState;
|
|
223
|
+
}): GanttScrollbarLayout;
|
|
224
|
+
/** 命中滚动条的按钮、轨道或滑块。 */
|
|
225
|
+
declare function hitTestGanttScrollbar(x: number, y: number, layout: GanttScrollbarLayout): GanttScrollbarHit | null;
|
|
226
|
+
|
|
100
227
|
declare function hitTestTask(x: number, y: number, layout: GanttLayout): GanttTask | null;
|
|
101
228
|
|
|
102
|
-
|
|
229
|
+
interface GanttTaskBarRect {
|
|
230
|
+
x: number;
|
|
231
|
+
y: number;
|
|
232
|
+
width: number;
|
|
233
|
+
height: number;
|
|
234
|
+
}
|
|
235
|
+
|
|
236
|
+
interface GanttDependencyPoint {
|
|
237
|
+
x: number;
|
|
238
|
+
y: number;
|
|
239
|
+
}
|
|
240
|
+
interface GanttDependencyRoute {
|
|
241
|
+
points: GanttDependencyPoint[];
|
|
242
|
+
arrowDirection: "left" | "right";
|
|
243
|
+
}
|
|
244
|
+
/** 计算类似示意图的正交依赖连线路径。 */
|
|
245
|
+
declare function resolveDependencyRoute(params: {
|
|
246
|
+
from: GanttTaskBarRect;
|
|
247
|
+
to: GanttTaskBarRect;
|
|
248
|
+
rowHeight: number;
|
|
249
|
+
type?: GanttDependency["type"];
|
|
250
|
+
}): GanttDependencyRoute;
|
|
251
|
+
/** 根据任务布局计算一条依赖线的完整路径。 */
|
|
252
|
+
declare function resolveDependencyLayoutRoute(dependency: GanttDependency, layout: GanttLayout, rowOffsets?: ReadonlyMap<string, number>): GanttDependencyRoute | null;
|
|
253
|
+
/** 命中距离鼠标最近的依赖折线。 */
|
|
254
|
+
declare function hitTestGanttDependency(params: {
|
|
255
|
+
x: number;
|
|
256
|
+
y: number;
|
|
257
|
+
layout: GanttLayout;
|
|
258
|
+
dependencies: GanttDependency[];
|
|
259
|
+
tolerance?: number;
|
|
260
|
+
}): {
|
|
261
|
+
dependency: GanttDependency;
|
|
262
|
+
index: number;
|
|
263
|
+
route: GanttDependencyRoute;
|
|
264
|
+
} | null;
|
|
265
|
+
|
|
266
|
+
type GanttDependencySide = "start" | "finish";
|
|
267
|
+
interface GanttDependencyDragVisualState {
|
|
268
|
+
sourceTaskId: string;
|
|
269
|
+
sourceSide: GanttDependencySide;
|
|
270
|
+
sourceX: number;
|
|
271
|
+
sourceY: number;
|
|
272
|
+
currentX: number;
|
|
273
|
+
currentY: number;
|
|
274
|
+
targetTaskId: string | null;
|
|
275
|
+
targetSide: GanttDependencySide | null;
|
|
276
|
+
}
|
|
277
|
+
|
|
278
|
+
interface GanttRowDragVisualState {
|
|
279
|
+
phase: "potential" | "dragging";
|
|
280
|
+
taskId: string;
|
|
281
|
+
fromIndex: number;
|
|
282
|
+
targetIndex: number;
|
|
283
|
+
offsets: ReadonlyMap<string, number>;
|
|
284
|
+
}
|
|
285
|
+
|
|
286
|
+
interface RenderGanttViewport {
|
|
287
|
+
viewport: GanttViewportLayout;
|
|
288
|
+
scroll: GanttScrollState;
|
|
289
|
+
scrollbars?: GanttScrollbarLayout;
|
|
290
|
+
taskColumnTitle?: string;
|
|
291
|
+
taskResizable?: boolean;
|
|
292
|
+
weekendBackground?: boolean;
|
|
293
|
+
rowDrag?: GanttRowDragVisualState | null;
|
|
294
|
+
selectedDependencyIndex?: number | null;
|
|
295
|
+
dependencyDrag?: GanttDependencyDragVisualState | null;
|
|
296
|
+
dependencyEditable?: boolean;
|
|
297
|
+
}
|
|
298
|
+
/** 按表体、固定列、固定表头和滚动条分层绘制甘特图。 */
|
|
299
|
+
declare function renderGantt(context: CanvasRenderingContext2D, layout: GanttLayout, dependencies: GanttDependency[], selectedId: string | null, theme: GanttTheme, renderViewport?: RenderGanttViewport): void;
|
|
103
300
|
|
|
104
|
-
export { Gantt, type GanttDependency, type GanttLayout, type GanttOptions, type GanttScale, type GanttTask, type GanttTheme, buildGanttLayout, defaultGanttTheme, hitTestTask, renderGantt, resolveDayWidth, xForDate };
|
|
301
|
+
export { Gantt, type GanttAxisScrollbarLayout, type GanttDependency, type GanttHeaderLevel, type GanttHeaderUnit, type GanttLayout, type GanttOptions, type GanttScale, type GanttScrollBounds, type GanttScrollState, type GanttScrollbarHit, type GanttScrollbarLayout, type GanttScrollbarRect, type GanttScrollbarRole, type GanttTask, type GanttTaskRender, type GanttTaskRenderResult, type GanttTaskStyle, type GanttTheme, type GanttViewportLayout, type RenderGanttViewport, buildGanttLayout, clampGanttScroll, computeGanttScrollbarLayout, defaultGanttTheme, hitTestGanttDependency, hitTestGanttScrollbar, hitTestTask, renderGantt, resolveDayWidth, resolveDependencyLayoutRoute, resolveDependencyRoute, resolveGanttScrollBounds, resolveGanttViewportLayout, xForDate };
|