update：svg节点的水平翻转和垂直翻转

src/stageAchievements/imageNode.vue

@@ -22,8 +22,11 @@
         </div>
     </div>
     <div>
-        <button @click="exportData">导出数据</button>
-        <button @click="toggleEditMode">切换编辑/预览模式</button>
+        <button @click="exportData" style="margin: 8px;">导出数据</button>
+        <button @click="toggleEditMode" style="margin: 8px;">切换编辑/预览模式</button>
+        <button @click="APItest" style="margin: 8px;">测试API按钮</button>
+        <button @click="horizontalFlip" style="margin: 8px;">水平翻转选中节点</button>
+        <button @click="verticalFlip" style="margin: 8px;">垂直翻转选中节点</button>
     </div>
 
     <el-dialog v-model="dialogVisible" title="给当前节点添加端口/标定点">
@@ -32,10 +35,10 @@
             </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>
+                <button @click="addPort('top')" style="margin-right: 8px;">添加上端口</button>
+                <button @click="addPort('bottom')" style="margin-right: 8px;">添加下端口</button>
+                <button @click="addPort('left')" style="margin-right: 8px;">添加左端口</button>
+                <button @click="addPort('right')" style="margin-right: 8px;">添加右端口</button>
                 <button style="margin-left: 280px" @click="addDataPanel">创建数据面板</button>
             </div>
             <div v-else>
@@ -51,7 +54,7 @@
 
 <script setup lang="ts">
 import { onMounted, ref } from 'vue';
-import go from 'gojs';
+import go, { Geometry } from 'gojs';
 import { PortShiftingTool } from './extensions/PortShiftingTool';
 import { ResizeMultipleTool } from './extensions/ResizeMultipleTool';
 // import { LinkLabelDraggingTool } from './extensions/LinkLabelDraggingTools';
@@ -165,6 +168,8 @@ const markPanel = $(go.Panel,
     )
 )
 
+var zhaChiGeometry = 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");
+
 // 切换添加端口/标定点的形式
 function toggleDivs(value: boolean) {
     changeModel.value = value;
@@ -197,7 +202,7 @@ function initDiagram() {
         $(go.Node, "Spot", 
             { 
                 resizable: true,
-                rotatable: true
+                rotatable: true,
             },
             new go.Binding("location", "loc"),
             new go.Binding("desiredSize", "size", go.Size.parse).makeTwoWay(go.Size.stringify),  // 进行元素位置信息的绑定
@@ -287,11 +292,12 @@ function initDiagram() {
         $(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"),
+                geometry: zhaChiGeometry,
                 stroke: "black",
                 fill: "white",
                 strokeWidth: 1.5
             },
+            new go.Binding('geometry', 'geometry')
         ),
         $(go.TextBlock,
             { 
@@ -301,7 +307,7 @@ function initDiagram() {
                 stroke: '#484848', 
                 editable: true,
                 _isNodeLabel: true,
-                cursor: "move" 
+                cursor: "move",
             },
             new go.Binding('text', 'key').makeTwoWay(),
         ),
@@ -709,11 +715,9 @@ function initDiagram() {
     }
     });
 
-    // myDiagram.commit((d: any) => d.remove("add1"), "Remove Part");
-
     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"}], markArray: [] },
-        { key: "add2", color: "lightblue", loc: new go.Point(100, 50), category: "zhaChi", portArray: [{portId: "bottom0", portKey: "bottom"}], markArray: [] },
+        { key: "add2", color: "lightblue", loc: new go.Point(100, 50), category: "zhaChi", portArray: [{portId: "bottom0", portKey: "bottom"}], markArray: [], geometry: zhaChiGeometry, isHorizontalFlipped: false, isVerticalFlipped: false },
         { key: "add3", color: "lightblue", loc: new go.Point(300, 150), category: "zhaChi", portArray: [{portId: "bottom0", portKey: "bottom"}], markArray: [] },
         { key: "pipe1", color: "gray", loc: new go.Point(0, 100), category: "pipe", portArray: [{portId: "top0", portKey: "top"}], markArray: [{portId: "mark0"}]},
         { key: "pipe1信息面板", color: "red", loc: new go.Point(-80, -120), portArray: [{portId: "top0", portKey: "top"}, {portId: "left0", portKey: "left"}, {portId: "right0", portKey: "right"}, {portId: "bottom0", portKey: "bottom"}], DCSArray: [{name: "流速", value: "20", unit: "m/s"}, {name: "温度", value: "30", unit: "℃"}], damageArray: [{damageName: "盐酸腐蚀", damageValue: "100%"}], alarmArray: [{alarmName: "警报"}], riskData: "高风险", category: "infoPanel"}
@@ -731,7 +735,7 @@ function initDiagram() {
                 linkToPortIdProperty: "toPort",
                 linkLabelKeysProperty: "labelKeys",
                 nodeDataArray: nodeDataArray,
-                linkDataArray: linkDataArray 
+                linkDataArray: linkDataArray
             }
         );
 }
@@ -1005,6 +1009,68 @@ function addDataPanel(){
     myDiagram.commitTransaction("addDataPanel");
 }
 
+function APItest(){
+    var node = myDiagram.findNodeForKey("add1");
+    if (node) {
+        myDiagram.model.setDataProperty(node.data, "color", "red");
+    }
+}
+
+// svg节点进行水平翻转
+function horizontalFlip() {
+    myDiagram.startTransaction('horizontalFlip');
+    myDiagram.selection.each((node: any) => {
+        if (!(node instanceof go.Node)) return;
+
+        // 获取节点翻转标志
+        var isHorizontalFlipped = node.data.isHorizontalFlipped || false;
+        var isVerticalFlipped = node.data.isVerticalFlipped || false;
+
+        var zhaChiGeometrySample = 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");
+        // 根据翻转标志计算当前翻转状态
+        var currentGeometry = zhaChiGeometrySample;
+        if (isHorizontalFlipped) {
+            currentGeometry = currentGeometry.scale(-1, 1);
+        }
+        if (isVerticalFlipped) {
+            currentGeometry = currentGeometry.scale(1, -1);
+        }
+        // 翻转几何图形
+        var flippedGeometry = currentGeometry.scale(-1, 1);
+        myDiagram.model.setDataProperty(node.data, "geometry", flippedGeometry);
+        myDiagram.model.setDataProperty(node.data, "isHorizontalFlipped", !isHorizontalFlipped);
+    });
+    myDiagram.commitTransaction('horizontalFlip');
+}
+
+// svg节点进行垂直翻转
+function verticalFlip() {
+    myDiagram.startTransaction('verticalFlip');
+    myDiagram.selection.each((node: any) => {
+        if (!(node instanceof go.Node)) return;
+
+        // 获取节点翻转标志
+        var isHorizontalFlipped = node.data.isHorizontalFlipped || false;
+        var isVerticalFlipped = node.data.isVerticalFlipped || false;
+
+        var zhaChiGeometrySample = 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");
+        // 根据翻转标志计算当前翻转状态
+        var currentGeometry = zhaChiGeometrySample;
+        if (isHorizontalFlipped) {
+            currentGeometry = currentGeometry.scale(-1, 1);
+        }
+        if (isVerticalFlipped) {
+            currentGeometry = currentGeometry.scale(1, -1);
+        }
+
+        // 翻转几何图形
+        var flippedGeometry = currentGeometry.scale(1, -1);
+        myDiagram.model.setDataProperty(node.data, "geometry", flippedGeometry);
+        myDiagram.model.setDataProperty(node.data, "isVerticalFlipped", !isVerticalFlipped);
+    });
+    myDiagram.commitTransaction('verticalFlip');
+}
+
 onMounted(() => {
     initDiagram()
 });