Vis.js Timeline嵌入应用后分组切换异常、事件冲突解决方法

问题复现代码 #

复现基于Vis.js Timeline官方分组示例，核心实现代码如下：

var now = moment().minutes(0).seconds(0).milliseconds(0);
var itemCount = 60;

// 初始化分组数据集
var groups = new vis.DataSet();

groups.add([
  {
    id: 1,
    content: "Lee",
    nestedGroups: [11, 12, 13],
  },
  {
    id: 2,
    content: "invisible group",
    visible: false,
  },
  {
    id: 3,
    content: "John",
    nestedGroups: [14],
    showNested: false,
  },
  {
    id: 4,
    content: "Alson",
  },
]);

groups.add([
  {
    id: 11,
    content: "cook",
  },
  {
    id: 12,
    content: "shop",
  },
  {
    id: 13,
    content: "clean house",
  },
  {
    id: 14,
    content: "wash dishes",
  },
]);

// 初始化时间条目数据集
var items = new vis.DataSet();
var groupIds = groups.getIds();
var types = ["box", "point", "range", "background"];
for (var i = 0; i < itemCount; i++) {
  var start = now.clone().add(Math.random() * 200, "hours");
  var end = start.clone().add(2, "hours");
  var randomGroupId = groupIds[Math.floor(Math.random() * groupIds.length)];
  var type = types[Math.floor(4 * Math.random())];

  items.add({
    id: i,
    group: randomGroupId,
    content: "item " + i,
    start: start,
    end: end,
    type: type,
  });
}

// 初始化时间轴组件
var container = document.getElementById("visualization");
var options = {
  groupOrder: "content", // 分组排序规则，可传属性名或自定义排序函数
};

var timeline = new vis.Timeline(container, items, groups, options);

问题现象 #

• 独立运行上述示例时，分组展开/折叠、时间轴渲染等所有功能正常
• 将组件嵌入带可折叠切换菜单结构的业务应用后，大部分时间轴功能可正常运行
• 执行分组切换操作时出现异常：分组无故消失、子分组无法正常展示
• 初步怀疑问题由Vis.js与宿主应用的事件触发冲突导致

排查解决步骤 #

1. 优先修复容器尺寸变化未触发重绘问题 #

90%以上同类异常并非事件冲突导致：可折叠菜单切换状态时，Timeline父容器的宽高会发生变化，但Vis.js Timeline默认不会监听父容器尺寸变化自动重绘，分组折叠/展开时计算的分组高度、位置参数错误，就会出现分组消失、子组渲染异常的表现。
修复方式：在菜单折叠/收起的动画完成回调中，主动调用Timeline的重绘方法：

// 菜单折叠/展开状态切换的动画执行完成后调用
timeline.redraw()
// 若视图偏移严重，可调用fit方法重置时间轴视图范围
// timeline.fit()

2. 事件冲突隔离方案 #

如果确认存在事件冒泡冲突，可通过两种方式实现事件隔离：

• 在事件捕获阶段拦截Timeline容器上的交互事件，阻止事件冒泡到外层宿主应用，避免外层菜单组件的事件监听被误触发：

const container = document.getElementById("visualization");
// 拦截所有交互类事件，阻止向上冒泡
['click', 'mousedown', 'mouseup', 'touchstart', 'touchend'].forEach(eventType => {
  container.addEventListener(eventType, (e) => {
    e.stopPropagation();
  }, true)
})

• 初始化Timeline时添加内置配置，直接阻止组件内部事件向外传播：

var options = {
  groupOrder: "content",
  preventDefault: true,
  stopPropagation: true
};

3. 分组数据合法性校验 #

如果上述操作后仍存在异常，逐一检查分组配置：

• 所有nestedGroups字段引用的子分组ID必须真实存在于groups数据集中，不能引用不存在、或被设置为visible:false的分组
• 分组嵌套层级不要超过3层，Vis.js Timeline对超过3层的嵌套分组存在已知渲染边界问题
• 手动修改分组状态后，可主动调用groups.update()触发分组数据全量重渲染

内容的提问来源于stack exchange，提问作者hacking_mike