在mxGraph中克隆Vertex对象报错：terminal.insertEdge is not a function

你遇到的问题根源在于：mxGraph的Vertex本质是mxCell类的实例，它依赖原型链上的方法（比如报错里的insertEdge）和内部维护的图形状态关联。你用的普通JS克隆方法（structuredClone、JSON序列化、Object.assign、扩展运算符）都会破坏这些结构——克隆出的只是普通JS对象，不是合法的mxCell实例，自然找不到对应的方法，还会干扰后续的图形渲染。

正确的克隆方式 #

方法1：使用mxGraph自带的cloneCells API（推荐）

mxGraph提供了专门的克隆方法，能完整保留顶点的类结构和关键属性：

// graph 是你的mxGraph实例，vertex 是目标顶点
const vertexClone = graph.cloneCells([vertex])[0];

// 修改克隆顶点的坐标（不会影响原顶点）
vertexClone.geometry.x = 100; // 替换成你的目标x坐标
vertexClone.geometry.y = 200; // 替换成你的目标y坐标

// 将克隆后的顶点添加到图中
graph.addCell(vertexClone);

方法2：手动创建新的mxCell实例

如果需要更精细的属性控制，可以手动实例化mxCell并复制原顶点的关键属性：

// 复制原顶点的几何信息（宽高、位置）
const geometry = new mxGeometry(
  vertex.geometry.x,
  vertex.geometry.y,
  vertex.geometry.width,
  vertex.geometry.height
);

// 创建新的顶点实例，复制值、样式
const vertexClone = new mxCell(vertex.value, geometry, vertex.style);
vertexClone.vertex = true; // 明确标记为顶点类型

// 可选：如果需要自定义ID，避免冲突
// vertexClone.id = mxUtils.createId();

// 添加到图中
graph.addCell(vertexClone);

为什么原来的方法无效？ #

• structuredClone/JSON.parse(JSON.stringify())：会丢失对象原型链，且无法序列化mxGraph内部的循环引用、特殊对象，克隆结果是无方法的普通对象。
• Object.assign/{...vertex}：仅做浅拷贝，既丢失原型链上的方法，内部复杂对象（如geometry）的引用还可能导致意外修改原对象。

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