Frappe Gantt 项目中的时间轴精确绘制优化方案

在项目管理工具Frappe Gantt的开发过程中，时间轴的精确绘制一直是一个关键的技术挑战。本文将深入分析如何通过分钟级精度优化时间轴绘制，以及相关的网格刻度对齐改进方案。

时间轴绘制精度问题

传统的时间轴绘制通常以小时为基本单位进行计算，这在大多数情况下足够使用。但在某些精细化管理场景下，特别是当任务持续时间较短或需要精确到分钟级别时，小时级别的精度就显得不足了。

原代码中的计算方式主要基于小时差：

const diff = date_utils.diff(task_start, gantt_start, "hour");
let x = (diff / step) * column_width;

这种计算方式会导致：

1. 任务开始和结束位置不够精确
2. 短时间任务显示不准确
3. 时间轴刻度与标签不完全对齐

分钟级精度优化方案

通过将计算单位从小时改为分钟，我们显著提高了时间轴的绘制精度。优化后的关键计算逻辑如下：

const diff = date_utils.diff(task_start, gantt_start, "minute");
let x = (diff / 60 / step) * column_width + column_width / 2;

这一改进带来了几个重要优势：

1. 任务位置计算更加精确
2. 短时间任务能够正确显示
3. 时间轴刻度与标签完美对齐
4. 支持更精细的时间管理需求

网格刻度对齐优化

在提高时间精度的同时，我们还改进了网格刻度的绘制逻辑，使其与时间标签更好地对齐：

1. 垂直刻度线居中显示：通过添加column_width / 2的偏移量，使刻度线位于时间标签中心位置
2. 月份高亮优化：修正了月份视图下的高亮显示问题
3. 动态时间计算：实现了基于当前时间的动态网格生成

if (this.view_is(VIEW_MODE.MONTH)) {
  x += (date_utils.get_days_in_month(date) * this.options.column_width) / 30;
}

动态示例数据生成

为了更直观地展示优化效果，我们改进了示例数据的生成方式，使其能够基于当前时间动态创建测试任务：

function getDate(number, scale) {
    let today = new Date();
    switch(scale) {
        case 'minute':
            today.setMinutes(today.getMinutes() + number);
            break;
        case 'hour':
            today.setHours(today.getHours() + number);
            break;
        // 其他时间单位处理...
    }
    return formatted_date_string;
}

这种方法使得示例数据总是反映当前时间，便于测试和演示各种时间场景下的显示效果。

技术实现要点

1. 时间差计算：使用date_utils.diff()方法计算分钟级时间差
2. 位置转换：将时间差转换为像素位置时考虑步长(step)和列宽(column_width)
3. 视图模式适配：为不同视图模式(日/周/月)提供特定的计算逻辑
4. 性能考量：在提高精度的同时保持计算效率

总结

通过将Frappe Gantt的时间轴绘制精度从小时级提升到分钟级，并结合网格刻度对齐优化，我们显著提高了工具的实用性和显示精度。这些改进特别适合需要精细时间管理的项目场景，为项目管理提供了更准确的时间可视化支持。

这一系列优化不仅解决了原始问题，还为工具的未来发展奠定了更坚实的基础，使其能够适应更多样化的项目管理需求。