update：优化选中装饰器和端口覆盖的问题。文字显示和端口冲突的问题。

src/kit/LinkTemplateKit.ts

@@ -102,6 +102,7 @@ export function animateFlow(myDiagram:go.Diagram){
     myAnimation.start();
 }
 
+//在 link 上添加 开始 中间 结束 三个位置的文本。
 export function makeLinkLabel(){
     return [
         GO(go.TextBlock,

src/kit/NodeTemplateKit.ts

@@ -9,7 +9,7 @@ import go from "gojs";
  */
 export function makeSVGNode (stretch: typeof go.GraphObject.Fill = go.GraphObject.Fill, size?:number) {
     return GO(go.Picture,
-        {name:"view", width:size, height:size, imageStretch: stretch },
+        {name:"view", width:size, height:size, imageStretch: stretch},
         new go.Binding("source", "img"),
         new go.Binding('desiredSize', "size", go.Size.parse).makeTwoWay(go.Size.stringify),
     )
@@ -65,7 +65,13 @@ export function makeDiagramNodeTemplate(type:string, stretch=go.GraphObject.Fill
         new go.Binding('location', "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
         new go.Binding('angle').makeTwoWay(),
         new go.Binding("itemArray", "portArray"),
-        makeNodeTemplate(type, stretch, size)
+        GO(go.Panel, "Spot",
+            makeNodeTemplate(type, stretch, size),
+            GO(go.TextBlock, {stroke:"red"},
+                new go.Binding("text", "name"),
+                new go.Binding("angle", 'angle', v=>-v)
+            ),
+        )
     )
 }
 
@@ -118,7 +124,7 @@ export var nodeRotateAdornment = GO(go.Adornment,
 
 // 节点选中效果 装饰器
 export var nodeSelectionAdornment = GO(go.Adornment, "Auto",
-    GO(go.Shape, { fill: null, stroke: "deepskyblue", strokeWidth: 0.5, strokeDashArray: [4, 2] }),
+    GO(go.Shape, { fill: null, stroke: "deepskyblue", strokeWidth: 1.5, strokeDashArray: [4, 2] }),
     GO(go.Placeholder)
 );
 
@@ -127,13 +133,14 @@ export var nodeSelectionAdornment = GO(go.Adornment, "Auto",
 export var nodeResizeAdornment = GO(go.Adornment, "Spot",
     { locationSpot: go.Spot.Right },
     GO(go.Placeholder),
+    //上下左右的点容易挡住端口
     GO(go.Shape, { alignment: go.Spot.TopLeft, cursor: "nw-resize", desiredSize: new go.Size(6, 6), fill: "white", stroke: "deepskyblue" }),
-    GO(go.Shape, { alignment: go.Spot.Top, cursor: "n-resize", desiredSize: new go.Size(6, 6), fill: "white", stroke: "deepskyblue" }),
+    // GO(go.Shape, { alignment: go.Spot.Top, cursor: "n-resize", desiredSize: new go.Size(6, 6), fill: "white", stroke: "deepskyblue" }),
     GO(go.Shape, { alignment: go.Spot.TopRight, cursor: "ne-resize", desiredSize: new go.Size(6, 6), fill: "white", stroke: "deepskyblue" }),
-    GO(go.Shape, { alignment: go.Spot.Left, cursor: "w-resize", desiredSize: new go.Size(6, 6), fill: "white", stroke: "deepskyblue" }),
-    GO(go.Shape, { alignment: go.Spot.Right, cursor: "e-resize", desiredSize: new go.Size(6, 6), fill: "white", stroke: "deepskyblue" }),
+    // GO(go.Shape, { alignment: go.Spot.Left, cursor: "w-resize", desiredSize: new go.Size(6, 6), fill: "white", stroke: "deepskyblue" }),
+    // GO(go.Shape, { alignment: go.Spot.Right, cursor: "e-resize", desiredSize: new go.Size(6, 6), fill: "white", stroke: "deepskyblue" }),
     GO(go.Shape, { alignment: go.Spot.BottomLeft, cursor: "se-resize", desiredSize: new go.Size(6, 6), fill: "white", stroke: "deepskyblue" }),
-    GO(go.Shape, { alignment: go.Spot.Bottom, cursor: "s-resize", desiredSize: new go.Size(6, 6), fill: "white", stroke: "deepskyblue" }),
+    // GO(go.Shape, { alignment: go.Spot.Bottom, cursor: "s-resize", desiredSize: new go.Size(6, 6), fill: "white", stroke: "deepskyblue" }),
     GO(go.Shape, { alignment: go.Spot.BottomRight, cursor: "sw-resize", desiredSize: new go.Size(6, 6), fill: "white", stroke: "deepskyblue" })
 );
 

src/main.ts

 import { createApp } from 'vue'
-// import App from './App-old.vue'
 import App from './App.vue'
 import gojs from 'gojs'
 import ElementUI from 'element-plus';