update：右键菜单和悬浮信息的添加

package.json

@@ -9,6 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "element-plus": "^2.7.5",
     "uuid": "^10.0.0",
     "vue": "^3.4.21"
   },

src/main.ts

 import { createApp } from 'vue'
+import ElementPlus from 'element-plus'
+import 'element-plus/dist/index.css'
 import './style.css'
 import App from './App.vue'
 
-createApp(App).mount('#app')
+const app = createApp(App)
+app.use(ElementPlus)
+app.mount('#app')

src/stageAchievements/imageNode.vue

@@ -14,6 +14,12 @@
     <div>
         <button @click="exportData">导出数据</button>
     </div>
+
+    <el-dialog v-model="dialogVisible" title="给节点添加端口">
+        <div>
+            <button @click="addPort()">添加端口</button>
+        </div>
+    </el-dialog>
 </template>
 
 <script setup lang="ts">
@@ -28,6 +34,7 @@ import { RotateMultipleTool } from './extensions/RotateMultipleTool';
 
 const $ = go.GraphObject.make;
 var myDiagram: any;
+const dialogVisible = ref(false)
 
 function initDiagram() {
     myDiagram = $(go.Diagram, "diagramDiv", {
@@ -76,6 +83,39 @@ function initDiagram() {
                 },
                 new go.Binding('text', 'key').makeTwoWay(),
             ),
+            {
+                toolTip:  // 定义节点工具提示
+                    $("ToolTip",
+                        $(go.TextBlock, { margin: 4 },
+                            new go.Binding("text", "key"))  // 绑定节点的颜色信息
+                    )
+            },
+            {
+                contextMenu:   // 为每个节点定义上下文菜单
+                $("ContextMenu",  
+                    $("ContextMenuButton",
+                        $(go.TextBlock, "Cut"),
+                        { 
+                            click: (e) => e.diagram.commandHandler.cutSelection(),
+                            "ButtonBorder.fill": "white",
+                            "_buttonFillOver": "skyblue",
+                        }
+                    ),
+                    $("ContextMenuButton",
+                        $(go.TextBlock, "Copy"),
+                        { 
+                            click: (e) => e.diagram.commandHandler.copySelection(),
+                            "ButtonBorder.fill": "white",
+                            "_buttonFillOver": "skyblue",
+                        }
+                    )
+                )
+            },
+            {
+                doubleClick : function(){   // 在节点中鼠标左键双击打开添加节点端口弹出框
+                    dialogVisible.value = true;
+                }
+            },
             $(go.Shape, "Rectangle",
                 { 
                     width: 6, 
@@ -158,6 +198,39 @@ function initDiagram() {
                 },
                 new go.Binding('text', 'key').makeTwoWay(),
             ),
+            {
+                toolTip:  // 定义节点工具提示
+                    $("ToolTip",
+                        $(go.TextBlock, { margin: 4 },
+                            new go.Binding("text", "key"))  // 绑定节点的颜色信息
+                    )
+            },
+            {
+                contextMenu:   // 为每个节点定义上下文菜单
+                $("ContextMenu",  
+                    $("ContextMenuButton",
+                        $(go.TextBlock, "Cut"),
+                        { 
+                            click: (e) => e.diagram.commandHandler.cutSelection(),
+                            "ButtonBorder.fill": "white",
+                            "_buttonFillOver": "skyblue",
+                        }
+                    ),
+                    $("ContextMenuButton",
+                        $(go.TextBlock, "Copy"),
+                        { 
+                            click: (e) => e.diagram.commandHandler.copySelection(),
+                            "ButtonBorder.fill": "white",
+                            "_buttonFillOver": "skyblue",
+                        }
+                    )
+                )
+            },
+            {
+                doubleClick : function(){   // 在节点中鼠标左键双击打开添加节点端口弹出框
+                    dialogVisible.value = true;
+                }
+            },
             $(go.Shape, "Rectangle",
                 { 
                     width: 6, 
@@ -215,6 +288,73 @@ function initDiagram() {
           )
         );
 
+    // 画布提示工具函数
+    function diagramInfo(model: any) {
+        return "Model:\n" + model.nodeDataArray.length + " nodes, " + model.linkDataArray.length + " links";
+    }
+
+    // 当未覆盖任何节点时，提供图表背景的工具提示
+    myDiagram.toolTip =
+    $("ToolTip",
+        $(go.TextBlock, { margin: 4 },
+        new go.Binding("text", "", diagramInfo)) // 绑定函数转换器显示相关的信息
+    );
+
+    myDiagram.contextMenu =
+    $("ContextMenu",
+        // 创建新节点上下文按钮
+        $("ContextMenuButton",
+        $(go.TextBlock, "New Node"),
+        { 
+            click: function(e) {
+                e.diagram.commit(function(d) {
+                    var data = {};
+                    d.model.addNodeData(data);
+                    var part = d.findPartForData(data);
+                    // 在ContextMenuTool中设置保存mouseDownPoint的位置
+                    // 节点创建的位置就是鼠标右键的位置
+                    if(part){
+                        part.location = d.toolManager.contextMenuTool.mouseDownPoint; 
+                    }
+                    }, 'new node');
+                },
+                "ButtonBorder.fill": "white",
+                "_buttonFillOver": "skyblue",
+            }
+        ),
+        $("ContextMenuButton",
+            $(go.TextBlock, "Paste"),
+            { 
+                click: (e) => e.diagram.commandHandler.pasteSelection(e.diagram.toolManager.contextMenuTool.mouseDownPoint),
+                "ButtonBorder.fill": "white",
+                "_buttonFillOver": "skyblue",
+            }
+        ),
+        // 撤销按钮
+        $("ContextMenuButton",
+        $(go.TextBlock, "Undo"),
+        { 
+            click: function(e) { e.diagram.commandHandler.undo(); },
+            "ButtonBorder.fill": "white",
+            "_buttonFillOver": "skyblue",
+        },
+        new go.Binding("visible", "", function(o) {   // 根据是否有可撤销的操作来决定是否可见
+            return o.diagram.commandHandler.canUndo();  // 可以撤销返回true，否则返回false
+        }).ofObject()),
+        // 重做按钮
+        $("ContextMenuButton",
+        $(go.TextBlock, "Redo"),
+        { 
+            click: function(e) { e.diagram.commandHandler.redo(); },
+            "ButtonBorder.fill": "white",
+            "_buttonFillOver": "skyblue",
+        },
+        new go.Binding("visible", "", function(o) {   // 根据是否有可重做的操作来决定是否可见
+            return o.diagram.commandHandler.canRedo();  // 可以重做返回true，否则返回false
+        }).ofObject())
+    );
+
+
     const nodeDataArray = [
         { key: "add1", color: "lightyellow", loc: new go.Point(-150, 200) },
         { key: "add2", color: "lightblue", loc: new go.Point(100, 50), category: "zhaChi" },
@@ -285,6 +425,13 @@ function drop(event: any) {
     myDiagram.commitTransaction('new node');
 }
 
+// 添加端口
+function addPort() {
+    
+
+}
+
+
 onMounted(() => {
     initDiagram()
 });