go.js节点上右击显示

// 创建一个新的 Go.Diagram
var $ = go.GraphObject.make;
var myDiagram = $(go.Diagram, "myDiagramDiv", {
  // 其他设置...
});

// 定义节点模板
myDiagram.nodeTemplate =
  $(go.Node, "Auto",
    $(go.Shape, "RoundedRectangle", { fill: "white" },
      new go.Binding("fill", "color")),
    $(go.TextBlock, { margin: 8 },
      new go.Binding("text", "key"))
  );

// 添加示例数据
myDiagram.model = new go.GraphLinksModel(
  [
    { key: "Node1", color: "lightblue" },
    { key: "Node2", color: "lightgreen" }
  ],
  []
);

// 自定义右击事件
myDiagram.addDiagramListener("ContextClicked", function(e) {
  var node = e.diagram.selection.first();
  if (node instanceof go.Node) {
    showContextMenu(e.documentPoint, node);
  }
});

// 显示自定义右击菜单
function showContextMenu(pt, node) {
  // 创建一个简单的右击菜单
  var menu = document.createElement("div");
  menu.style.position = "absolute";
  menu.style.left = pt.x + "px";
  menu.style.top = pt.y + "px";
  menu.style.backgroundColor = "white";
  menu.style.border = "1px solid black";
  menu.style.padding = "5px";

  // 添加菜单项
  var editItem = document.createElement("div");
  editItem.textContent = "Edit";
  editItem.onclick = function() {
    alert("Editing node: " + node.data.key);
    // 这里可以添加编辑节点的逻辑
  };
  menu.appendChild(editItem);

  var deleteItem = document.createElement("div");
  deleteItem.textContent = "Delete";
  deleteItem.onclick = function() {
    myDiagram.remove(node);
  };
  menu.appendChild(deleteItem);

  // 将菜单添加到文档中
  document.body.appendChild(menu);

  // 移除菜单的事件监听
  menu.onmouseleave = function() {
    document.body.removeChild(menu);
  };
}