update：端口隐藏问题

src/stageAchievements/imageNode.vue

@@ -13,6 +13,7 @@
     </div>
     <div>
         <button @click="exportData">导出数据</button>
+        <button @click="toggleEditMode">切换编辑/预览模式</button>
     </div>
 
     <el-dialog v-model="dialogVisible" title="给当前节点添加端口/标定点">
@@ -42,6 +43,7 @@ import { LinkLabelDraggingTool } from './extensions/LinkLabelDraggingTools';
 import { NodeLabelDraggingTool } from './extensions/NodeLabelDraggingTool';
 import { GuidedDraggingTool } from './extensions/GuidedDraggingTool';
 import { RotateMultipleTool } from './extensions/RotateMultipleTool';
+import { ElMessage } from 'element-plus';
 
 const $ = go.GraphObject.make;
 var myDiagram: any;
@@ -71,6 +73,7 @@ function initDiagram() {
         "draggingTool.guidelineWidth": 1,    // 设置辅助对齐的线条的粗细
         // 旋转节点
         rotatingTool: new RotateMultipleTool(),
+        "relinkingTool.isUnconnectedLinkValid": false,
     });
 
     myDiagram.toolManager.mouseMoveTools.insertAt(0, new PortShiftingTool());  // 设置端口移动
@@ -96,6 +99,7 @@ function initDiagram() {
                     toLinkable: true,
                     cursor: 'pointer',
                     alignment: go.Spot.Top,
+                    visible: true,
                     contextMenu:
                     $("ContextMenu",
                         $("ContextMenuButton",
@@ -109,6 +113,7 @@ function initDiagram() {
                     ),
                 },
                 new go.Binding('portId', 'portId'),
+                new go.Binding('visible', 'visible'),
                 new go.Binding('alignment', 'portKey', (portKey: string) => {
                     switch(portKey) {
                         case "top": return go.Spot.Top;
@@ -251,6 +256,7 @@ function initDiagram() {
                 toLinkable: true,
                 cursor: 'pointer',
                 alignment: go.Spot.Top,
+                visible: true,
                 contextMenu:
                 $("ContextMenu",
                     $("ContextMenuButton",
@@ -264,6 +270,7 @@ function initDiagram() {
                 ),
             },
             new go.Binding('portId', 'portId'),
+            new go.Binding('visible', 'visible'),
             new go.Binding('alignment', 'portKey', (portKey: string) => {
                 switch(portKey) {
                     case "top": return go.Spot.Top;
@@ -393,8 +400,9 @@ function initDiagram() {
             curve: go.Curve.JumpGap,
             corner: 5,  
             adjusting: go.LinkAdjusting.Stretch, 
-            reshapable: true   // 设置连接线的形态是否可以被修改
+            reshapable: false   // 设置连接线的形态是否可以被修改
           },
+          new go.Binding("points").makeTwoWay(),
           $(go.Shape,  // 链接线的样式
             { 
                 strokeWidth: 1.5 
@@ -511,7 +519,7 @@ function initDiagram() {
         { key: "add2", color: "lightblue", loc: new go.Point(100, 50), category: "zhaChi", portArray: [{portId: "bottom0", portKey: "bottom"}], markArray: [{markId: "mark0"}] },
     ];
     const linkDataArray = [
-        { from: "add1", fromPort: "top0", to: "add2", toPort: "bottom0", text: "1->2" },
+        { from: "add1", fromPort: "top0", to: "add2", toPort: "bottom0", text: "1->2", "points":[-96.5,200,-96.5,190,-96.5,166.4,191.45,166.4,191.45,142.8,191.45,132.8]},
     ];
 
     myDiagram.model =
@@ -660,6 +668,35 @@ function removeMark(mark: any) {
     myDiagram.commitTransaction('removeMark');
 }
 
+// 设置一开始画布为编辑模式
+const isEditMode = ref(true)
+
+// 切换编辑和预览模式
+function toggleEditMode() {
+    myDiagram.startTransaction("changeModel");
+    isEditMode.value = !isEditMode.value;
+    if(isEditMode.value){
+        ElMessage('编辑模式')
+    } else {
+        ElMessage({
+            message: '预览模式',
+            type: 'success',
+        })
+    }
+    if (myDiagram) {
+        myDiagram.isReadOnly = !isEditMode.value;
+        myDiagram.allowEdit = isEditMode.value;
+
+        // 隐藏所有的节点端口
+        myDiagram.nodes.each((node: any) => {
+            node.ports.each((port: any) => {
+                myDiagram.model.setDataProperty(port.data, 'visible', isEditMode.value);
+            });
+        });
+    }
+    myDiagram.commitTransaction("changeModel");
+}
+
 onMounted(() => {
     initDiagram()
 });