update：节点旋转后的端口移动

src/stageAchievements/extensions/PortShiftingTool.ts

@@ -144,15 +144,36 @@ export class PortShiftingTool extends go.Tool {
    * inside the main element -- it cannot wander away from the node.
    * This does not modify the port's {@link go.GraphObject.alignmentFocus} property.
    */
+
+  
+  // updateAlignment(): void {
+  //   if (this.port === null || this.port.panel === null) return;
+  //   const last = this.diagram.lastInput.documentPoint;
+  //   const main = this.port.panel.findMainElement();
+  //   if (main === null) return;
+  //   const tl = main.getDocumentPoint(go.Spot.TopLeft);
+  //   const br = main.getDocumentPoint(go.Spot.BottomRight);
+  //   const x = Math.max(0, Math.min((last.x - tl.x) / (br.x - tl.x), 1));
+  //   const y = Math.max(0, Math.min((last.y - tl.y) / (br.y - tl.y), 1));
+  //   this.port.alignment = new go.Spot(x, y);
+  // }
+
+  // 修改updateAlignment函数，使端口可以在节点旋转后进行正常的移动
   updateAlignment(): void {
     if (this.port === null || this.port.panel === null) return;
+    // 获取最后输入的文档点
     const last = this.diagram.lastInput.documentPoint;
+
     const main = this.port.panel.findMainElement();
     if (main === null) return;
-    const tl = main.getDocumentPoint(go.Spot.TopLeft);
-    const br = main.getDocumentPoint(go.Spot.BottomRight);
-    const x = Math.max(0, Math.min((last.x - tl.x) / (br.x - tl.x), 1));
-    const y = Math.max(0, Math.min((last.y - tl.y) / (br.y - tl.y), 1));
+
+    // 将最后输入的点转换为局部坐标系中的点
+    const localPoint = main.getLocalPoint(last);
+    const tl = new go.Point(0, 0);
+    const br = new go.Point(main.actualBounds.width, main.actualBounds.height);
+  
+    const x = Math.max(0, Math.min((localPoint.x - tl.x) / (br.x - tl.x), 1));
+    const y = Math.max(0, Math.min((localPoint.y - tl.y) / (br.y - tl.y), 1));
     this.port.alignment = new go.Spot(x, y);
   }
 }

src/stageAchievements/imageNode.vue

@@ -202,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),  // 进行元素位置信息的绑定
@@ -219,7 +219,7 @@ function initDiagram() {
                 $(go.Shape, "RoundedRectangle", 
                 { 
                     fill: "white",
-                    strokeWidth: 0
+                    strokeWidth: 0,
                 },
                 new go.Binding("fill", "color"),
                 ),
@@ -711,13 +711,13 @@ function initDiagram() {
     // 检查连接的起点或终点是否是信息面板
     if ((fromNode && fromNode.category === "infoPanel") || (toNode && toNode.category === "infoPanel")) {
         // 设置连接的类别为 infoPanelLink
-        myDiagram.model.set(link.data, "category", "infoPanelLink");
+        myDiagram.model.set(link.data, "LinkCategory", "infoPanelLink");
     }
     });
 
     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: [], geometry: zhaChiGeometry, isHorizontalFlipped: false, isVerticalFlipped: false },
+        { key: "add2", color: "lightblue", loc: new go.Point(100, 50), category: "zhaChi", portArray: [{portId: "bottom0", portKey: "bottom"}], markArray: [] },
         { 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"}
@@ -725,7 +725,7 @@ function initDiagram() {
     const linkDataArray = [
         { from: "add1", fromPort: "top0", to: "add2", toPort: "bottom0", labelKeys: ["pipe1"] },
         { from: "add1", fromPort: "bottom0", to: "add3", toPort: "bottom0" },
-        { from: "pipe1信息面板", fromPort: "bottom0", to: "pipe1", toPort: "top0", category: "infoPanelLink"}
+        { from: "pipe1信息面板", fromPort: "bottom0", to: "pipe1", toPort: "top0", LinkCategory: "infoPanelLink"}
     ];
 
     myDiagram.model =
@@ -738,6 +738,8 @@ function initDiagram() {
                 linkDataArray: linkDataArray
             }
         );
+
+    myDiagram.model.linkCategoryProperty = "LinkCategory";
 }
 
 // 导出画布中的节点和连线数据
@@ -1010,10 +1012,8 @@ function addDataPanel(){
 }
 
 function APItest(){
-    var node = myDiagram.findNodeForKey("add1");
-    if (node) {
-        myDiagram.model.setDataProperty(node.data, "color", "red");
-    }
+    const linkData = myDiagram.model.linkDataArray[0];
+    myDiagram.model.setLabelKeysForLinkData(linkData, ['pipe1','add3']);
 }
 
 // svg节点进行水平翻转
@@ -1050,7 +1050,7 @@ function verticalFlip() {
         if (!(node instanceof go.Node)) return;
 
         // 获取节点翻转标志
-        var isHorizontalFlipped = node.data.isHorizontalFlipped || false;
+        var isHorizontalFlipped = node.data.isHorizontalFlipped || false;  // 如果属性不存在则默认为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");