如何为vis network图表实现专属粘贴事件监听？

一、复制功能的优化建议 #

你当前用document.getSelection()?.type !== "Range"来区分常规复制和图表复制的思路可行，但可以更精准，避免误判：

const copier = (e: ClipboardEvent) => {
  const selection = document.getSelection();
  // 双重判断：无文本选中 + 图表有选中元素（节点/边）
  const isCopyingGraph = !selection?.toString().trim() && 
                        (network.getSelectedNodes().length > 0 || network.getSelectedEdges().length > 0);
  
  if (isCopyingGraph) {
    e.preventDefault(); // 阻止默认复制，避免空内容写入剪贴板
    navigator.clipboard.writeText(JSON.stringify(graph));
  }
};

document.addEventListener("copy", copier);

这个逻辑更贴合业务场景：只有当用户选中图表元素、且没有选中页面文本时，才触发图表内容复制，不会干扰常规文本复制。

二、粘贴功能的解决方案 #

由于Canvas本身不支持焦点和输入事件，无法直接绑定paste事件，核心思路是全局监听paste事件+维护图表交互状态，精准区分粘贴操作是否针对图表：

1. 维护图表活跃状态 #

通过Vis Network的交互事件和页面点击事件，标记用户是否正在和图表交互：

let isGraphActive = false;
const graphContainer = document.getElementById("your-graph-container") as HTMLElement;
const network = new vis.Network(graphContainer, data, options);

// 图表被点击/选中时，标记为活跃状态
network.on("click", () => { isGraphActive = true; });
graphContainer.addEventListener("click", () => { isGraphActive = true; });

// 点击页面其他区域时，重置活跃状态
document.addEventListener("click", (e) => {
  if (!graphContainer.contains(e.target as Node)) {
    isGraphActive = false;
  }
});

2. 全局处理paste事件 #

在全局paste事件中，结合图表活跃状态和当前焦点位置，判断是否处理图表粘贴：

document.addEventListener("paste", async (e: ClipboardEvent) => {
  const activeElement = document.activeElement as HTMLElement;
  // 判断当前焦点是否在可输入组件（避免干扰文本框/编辑器的粘贴）
  const isInInput = activeElement?.tagName === "INPUT" || 
                    activeElement?.tagName === "TEXTAREA" || 
                    activeElement.isContentEditable;

  // 仅当图表活跃、且不在输入组件中时，处理图表粘贴
  if (isGraphActive && !isInInput) {
    e.preventDefault();
    try {
      const clipboardText = await navigator.clipboard.readText();
      // 解析剪贴板中的图表数据（需和复制时的JSON格式匹配）
      const pastedGraphData = JSON.parse(clipboardText);
      
      // 这里写你的粘贴逻辑：比如合并节点/边、插入到图表中
      network.addNodes(pastedGraphData.nodes);
      network.addEdges(pastedGraphData.edges);
    } catch (err) {
      console.error("粘贴失败：", err);
    }
  }
});

补充细节 #

• 如果希望仅在图表有选中元素时响应粘贴，可以在判断条件中加入network.getSelectedNodes().length > 0 || network.getSelectedEdges().length > 0；
• 若需要支持粘贴纯字符串转化为节点，可以在解析失败时，将剪贴板文本作为新节点的标签添加到图表中。

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