update：标定点的增加和删除

src/stageAchievements/imageNode.vue

@@ -15,13 +15,21 @@
         <button @click="exportData">导出数据</button>
     </div>
 
-    <el-dialog v-model="dialogVisible" title="给节点添加端口">
+    <el-dialog v-model="dialogVisible" title="给当前节点添加端口/标定点">
         <div>
+            <el-switch v-model="changeModel" @change="toggleDivs">
+            </el-switch>
+            <br>
+            <div v-if="changeModel">
                 <button @click="addPort('top')">添加上端口</button>
                 <button @click="addPort('bottom')">添加下端口</button>
                 <button @click="addPort('left')">添加左端口</button>
                 <button @click="addPort('right')">添加右端口</button>
             </div>
+            <div v-else>
+                <button @click="addMark()">添加标定点</button>
+            </div>
+        </div>
     </el-dialog>
 </template>
 
@@ -38,6 +46,12 @@ import { RotateMultipleTool } from './extensions/RotateMultipleTool';
 const $ = go.GraphObject.make;
 var myDiagram: any;
 const dialogVisible = ref(false)
+const changeModel = ref(true)
+
+// 切换添加端口/标定点的形式
+function toggleDivs(value: boolean) {
+    changeModel.value = value;
+}
 
 function initDiagram() {
     myDiagram = $(go.Diagram, "diagramDiv", {
@@ -127,6 +141,36 @@ function initDiagram() {
                 ),
             },
             $(go.Panel, 'Spot',
+            // 标定点模板
+            new go.Binding('itemArray', 'markArray'), { 
+                itemTemplate: $(go.Panel,
+                {
+                    portId: "mark",
+                    cursor: 'pointer',
+                    alignment: new go.Spot(0.5, 0.2),
+                    contextMenu:
+                    $("ContextMenu",
+                        $("ContextMenuButton",
+                            $(go.TextBlock, "Remove Mark", { font: "bold 12px sans-serif", width: 100, textAlign: "center" }),
+                            {
+                                click: (e: any, obj: any) => removeMark(obj.part.adornedObject),
+                                "ButtonBorder.fill": "white",
+                                "_buttonFillOver": "skyblue"
+                            }
+                        )
+                    ),
+                },
+                new go.Binding('portId', 'markId'),
+                $(go.Shape, 'Rectangle',
+                    {
+                        strokeWidth: 1,
+                        desiredSize: new go.Size(6, 6),
+                        fill: "red"
+                    },
+                )
+                )
+            },
+            $(go.Panel, 'Spot',
                 $(go.Shape, "RoundedRectangle", 
                 { 
                     fill: "white",
@@ -179,6 +223,7 @@ function initDiagram() {
                         dialogVisible.value = true;
                     }
                 },
+            )
             ),
         ),
 
@@ -251,6 +296,35 @@ function initDiagram() {
             ),
         },
         $(go.Panel, 'Spot',
+        // 标定点模板
+        new go.Binding('itemArray', 'markArray'), { 
+            itemTemplate: $(go.Panel,
+            {
+                portId: "mark",
+                cursor: 'pointer',
+                alignment: new go.Spot(0.9, 0.2),
+                contextMenu:
+                $("ContextMenu",
+                    $("ContextMenuButton",
+                        $(go.TextBlock, "Remove Mark", { font: "bold 12px sans-serif", width: 100, textAlign: "center" }),
+                        {
+                            click: (e: any, obj: any) => removeMark(obj.part.adornedObject),
+                            "ButtonBorder.fill": "white",
+                            "_buttonFillOver": "skyblue"
+                        }
+                    )
+                ),
+            },
+            new go.Binding('portId', 'markId'),
+            $(go.Shape, 'Rectangle',
+                {
+                    strokeWidth: 1,
+                    desiredSize: new go.Size(6, 6),
+                    fill: "red"
+                },
+             ))
+        },
+        $(go.Panel, 'Spot',
         $(go.Shape, "RoundedRectangle", 
             { 
                 geometry: go.Geometry.parse("XFM88 77.8 0 77.8 0 53.8 88 53.8 136.6 0 181.4 0 181.4 35.3 157.5 35.3 157.5 24.5 136.6 24.5z XM 86.8 70.1 L 141.7 10.2 XM 82.8 66.1 L 137.1 6.4 XM142 8.8B 0 360 139 8.8 3 3 XM87 68.8B 0 360 84 68.8 3 3"),
@@ -304,7 +378,7 @@ function initDiagram() {
                 dialogVisible.value = true;
             }
         }
-        ),
+        )),
         )
     );
 
@@ -417,8 +491,8 @@ function initDiagram() {
 
 
     const nodeDataArray = [
-        { key: "add1", color: "lightyellow", loc: new go.Point(-150, 200), portArray: [{portId: "top0", portKey: "top"}, {portId: "left0", portKey: "left"}, {portId: "right0", portKey: "right"}, {portId: "bottom0", portKey: "bottom"}] },
-        { key: "add2", color: "lightblue", loc: new go.Point(100, 50), category: "zhaChi", portArray: [{portId: "bottom0", portKey: "bottom"}] },
+        { key: "add1", color: "lightyellow", loc: new go.Point(-150, 200), portArray: [{portId: "top0", portKey: "top"}, {portId: "left0", portKey: "left"}, {portId: "right0", portKey: "right"}, {portId: "bottom0", portKey: "bottom"}], markArray: [{markId: "mark0"}] },
+        { 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" },
@@ -494,7 +568,8 @@ function drop(event: any) {
         key: key,
         color: 'aqua',
         loc: new go.Point(point.x, point.y),
-        portArray: [{portId: "bottom0", portKey: "bottom"}],
+        portArray: [],
+        markArray: [],
         category: category
     };
     myDiagram.model.addNodeData(newData);
@@ -543,6 +618,39 @@ function removePort(port: any) {
     myDiagram.commitTransaction('removePort');
 }
 
+// 添加标定点
+function addMark() {
+    myDiagram.startTransaction('addMark');
+    myDiagram.selection.each((node: any) => {
+        if (!(node instanceof go.Node)) return;
+        let i = 0;
+        while (node.findPort("mark" + i.toString()) !== node) i++;
+        const name = "mark" + i.toString();
+        const newMarkData = {
+            markId: name
+        };
+        const arr = node.data.markArray;
+        if (arr) {
+            myDiagram.model.insertArrayItem(arr, -1, newMarkData);
+        }
+    });
+    myDiagram.commitTransaction('addMark');
+}
+
+// 删除标定点
+function removeMark(mark: any) {
+    myDiagram.startTransaction('removeMark');
+    const markId = mark.portId;
+    const arr = mark.panel.itemArray;
+    for (let i = 0; i < arr.length; i++) {
+        if (arr[i].markId === markId) {
+            myDiagram.model.removeArrayItem(arr, i);
+            break;
+        }
+    }
+    myDiagram.commitTransaction('removeMark');
+}
+
 onMounted(() => {
     initDiagram()
 });