Frappe Gantt 项目中的当前时间高亮功能实现解析

背景介绍

Frappe Gantt 是一个基于 JavaScript 的开源甘特图库，广泛应用于项目管理、任务调度等场景。在实际使用中，用户经常需要快速定位当前时间在甘特图中的位置，特别是在 Quarter Day（四分之一天）和 Half Day（半天）视图模式下。

功能需求分析

在甘特图应用中，当前时间的高亮显示是一个常见的用户体验优化点。它能够帮助用户：

1. 快速定位当前时间在项目时间轴中的位置
2. 直观了解任务进度与当前时间的关系
3. 提高时间管理和任务调度的效率

技术实现方案

核心思路

实现当前时间高亮的核心思路是：

1. 获取当前系统时间
2. 计算当前时间在甘特图时间轴上的对应位置
3. 绘制一条垂直的标记线

具体实现代码

在 Frappe Gantt 项目中，可以通过扩展 make_grid_extras 方法来实现这一功能。以下是关键代码实现：

make_grid_current_time(view_mode) {
  let tick_x = 0;
  let tick_y = this.options.header_height + this.options.padding / 2;
  let tick_height = (this.options.bar_height + this.options.padding) * this.tasks.length;
  createSVG("g", { class: 'current_time', append_to: this.layers.grid });

  let today = date_utils.today();
  for (let date of this.dates) {
    if (date.toString() === today.toString()) {
      let current_time_class = "current-time";
      let day_columns = 1;
      if (view_mode === VIEW_MODE.HOUR) {
        day_columns = 24;
      }
      if (view_mode === VIEW_MODE.QUARTER_DAY) {
        day_columns = 4;
      }
      if (view_mode === VIEW_MODE.HALF_DAY) {
        day_columns = 2;
      }
      let tick_secs = (this.options.column_width * day_columns) / 86400;
      let timestamp = Math.floor(new Date().getTime()) / 1000;
      let today_timestamp = Math.floor(new Date(today).getTime()) / 1000;
      let today_secs = timestamp - today_timestamp;
      tick_x += today_secs * tick_secs;

      createSVG("path", {
        d: `M ${tick_x} ${tick_y} v ${tick_height}`,
        class: current_time_class,
        append_to: this.layers.grid,
      });
      return;
    }
    tick_x += this.options.column_width;
  }
}

视图模式适配

该实现支持多种视图模式：

1. 小时视图：将一天分为24列
2. 四分之一天视图：将一天分为4列
3. 半天视图：将一天分为2列
4. 日视图：默认一天1列

CSS样式配置

为了使高亮线更加醒目，可以添加以下CSS样式：

.gantt .current-time {
    stroke: red;
    stroke-width: 1px;
}

技术难点与解决方案

时间计算精度

在实现过程中，需要精确计算当前时间在甘特图中的位置。这里使用了秒级时间戳进行计算，确保定位准确。

跨日期处理

代码中通过比较日期字符串来判断是否是今天，确保只在当天日期列中绘制高亮线。

视图模式适配

不同视图模式下，时间轴的划分方式不同。通过 day_columns 变量来适配不同视图模式的时间轴划分。

扩展思考

其他视图模式的适配

虽然当前实现已经支持了主要的时间视图模式，但对于周视图、月视图和年视图，可以考虑：

1. 高亮显示当前周/月/年
2. 在更宏观的时间尺度上提供时间定位参考

用户体验优化

可以进一步优化用户体验：

1. 添加时间标签显示当前具体时间
2. 实现高亮线的动态更新（每分钟或每秒钟）
3. 提供配置选项让用户自定义高亮线的样式

总结

在 Frappe Gantt 中实现当前时间高亮功能，不仅提升了用户体验，也展示了如何通过计算时间位置和SVG绘图来增强可视化效果。这种思路可以应用于其他需要时间定位的可视化场景中。开发者可以根据实际需求，进一步扩展和优化这一功能。