@antv/x6 自定义节点Safari兼容问题处理

news2024/9/20 9:34:19

背景

为什么选择@antv/x6？
由于x6提供了一套强大友好的流程图API，并且支持使用 React、Vue 组件来渲染节点。这样可以使用组件开发的方式去快速完成卡片开发，并实现更加复杂的业务逻辑。
遇到了Safari的兼容问题
由于x6自定义节点基于SVG foreignObject节点去实现的，但是Safari对foreignObject的实现不够完整，这就出现了在safari上出现了无法设置节点的位置，有些内容展示不出来的问题。
以下是x6官网上Vue使用案例在Chrome和Safari上的展示对比：
Chrome 效果

Safari 效果

卡片跑到了左上角位置，设置的卡片位置完成无效了

参考：

Safari上SVG foreignObject中<video>元素的位置错误

解决Safari浏览器使用SVG foreignObject 不生效,错位的问题

解决方式

一开始想的是有没有对应的polyfill去解决foreignObject的兼容问题，但是没有找到。后面发现了x6-html-shape这个库，采用了html节点的方式，避开了foreignObject。

x6-html-shape原理解析

节点绘制
x6-html-shape通过创建一个html容器节点覆盖在svg画布的上层，使用绝对定位+transform将自定义节点绘制到这个html容器内，在每个节点的下层会对应相关的svg空节点。这样避免了使用Svg foreignObject的方式。
事件处理
对于画布上的事件通过添加pointer-events:none样式，使事件透传。卡片上事件通过监听直接转发到下层的svg节点。核心代码如下：

Dom.css(htmlContainer, {
    position: "absolute",
    width: "100%",
    height: "100%",
    "touch-action": "none",
    "user-select": "none",
    "pointer-events": "none",
    'z-index': 0,
    'transform-origin': 'left top',
});
htmlContainer.classList.add("x6-html-shape-container");

Dom.css(container, {
    "pointer-events": "auto",
    "touch-action": "none",
    "user-select": "none",
    "transform-origin": "center",
    position: "absolute",
})
container.classList.add("x6-html-shape-node");
      // forward events
const events = "click,dblclick,contextmenu,mousedown,mousemove,mouseup,mouseover,mouseout,mouseenter,mouseleave".split(",");
events.forEach((eventType) =>
    forwardEvent(eventType, container, this.container)
);
this.graph.htmlContainer.append(container);

container 就是自定义的卡片容器，卡片内容将放在里面, this.container能获取到对应的svg节点。这里container的pointer-events设置成了auto保证了卡片上的事件能正常触发。

export function forwardEvent(eventType, fromElement, toElement) {
  fromElement.addEventListener(eventType, function (event) {
    toElement.dispatchEvent(new event.constructor(event.type, event));
    event.preventDefault();
    event.stopPropagation();
  });
}

通过调用forwardEvent将自定义卡片上的事件转发到svg节点上。

使用中的问题

可能由于这个库，使用的人并不多，很多问题没有被发现，我在实际使用的时候也遇到了以下的问题：

缩放后节点错位，节点并没有合理缩放
卡片上不能滚动问题
节点删除后，下层对应的svg节点未删除
无法显示或隐藏节点问题
节点较多时缩放失效问题
卡片上点击功能按钮el-popover不展示问题（开发卡片时阻止按钮的事件冒泡行为即可）
由于原作者精力有限，忙于其他事情。我就自己主动提交了PR，参与到了这个项目的贡献。后续作者也给开通了github代码提交权限和npm包的发布权限，以上问题都得到了解决。