update：缩放，旋转，连接，信息展示。

src/components/center-diagram/center-canvas.vue

-<template>
-    <div id="myDiagram"></div>
-</template>
-
-<script setup lang="ts">
-import {onMounted} from 'vue'
-import go from 'gojs'
-import {$, makePort, showSmallPorts} from '../../kit/GOJSKit.ts'
-import {
-    nodeSelectionAdornmentTemplate,
-    nodeResizeAdornmentTemplate,
-    nodeRotateAdornmentTemplate,
-    makeTopRotatingTool
-} from "../../kit/NodeTemplateKit.ts";
-
-import { linkSelectionAdornmentTemplate } from '../../kit/LinkTemplateKit.ts'
-
-
-
-var myDiagram:any = null
-
-function initDiagram() {
-    myDiagram = $(go.Diagram, "myDiagram", {
-        initialContentAlignment: go.Spot.Center,
-        //允许撤销
-        "undoManager.isEnabled": true,
-        //展示网格
-        "grid.visible": true,
-        //滚轮缩放
-        "allowZoom": true,
-        //连线是否可以不和节点连接。
-        "draggingTool.dragsLink": true,
-        //旋转点相关
-        "rotatingTool": $(makeTopRotatingTool()),
-        "rotatingTool.handleAngle": 270,
-        "rotatingTool.handleDistance": 50,
-        "rotatingTool.snapAngleMultiple": 15,
-        "rotatingTool.snapAngleEpsilon": 15,
-        //连接线相关
-        "draggingTool.dragsLink": true,
-        "draggingTool.isGridSnapEnabled": true,
-        "linkingTool.isUnconnectedLinkValid": true,
-        "linkingTool.portGravity": 20,
-        "relinkingTool.isUnconnectedLinkValid": true,
-        "relinkingTool.portGravity": 20,
-        "relinkingTool.fromHandleArchetype":
-            $(go.Shape, "Diamond", { segmentIndex: 0, cursor: "pointer", desiredSize: new go.Size(8, 8), fill: "tomato", stroke: "darkred" }),
-        "relinkingTool.toHandleArchetype":
-            $(go.Shape, "Diamond", { segmentIndex: -1, cursor: "pointer", desiredSize: new go.Size(8, 8), fill: "darkred", stroke: "tomato" }),
-        "linkReshapingTool.handleArchetype":
-            $(go.Shape, "Diamond", { desiredSize: new go.Size(7, 7), fill: "lightblue", stroke: "deepskyblue" }),
-
-    })
-    myDiagram.nodeTemplate = $(go.Node, "Spot",
-        new go.Binding('location', "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
-        {selectable: true, selectionAdornmentTemplate: nodeSelectionAdornmentTemplate},
-        { resizable: true, resizeObjectName: "PANEL", resizeAdornmentTemplate: nodeResizeAdornmentTemplate },
-        { rotatable: true, rotateAdornmentTemplate: nodeRotateAdornmentTemplate, locationSpot:go.Spot.Center },
-        new go.Binding('angle').makeTwoWay(),
-        $(go.Panel, "Vertical",
-            // {name:"PANEL", cursor: "pointer", background: "lightblue"},
-            {name:"PANEL", cursor: "pointer"},
-            new go.Binding("desiredSize", "size", go.Size.parse).makeTwoWay(go.Size.stringify),
-            $(go.Picture, new go.Binding("source", "img")),
-            // $(go.Shape, "Rectangle", {stroke:"red", fill:"yellow", name:"IMAGE"}),
-            // $(go.TextBlock, {margin: 4, text:"", editable:true, background:"green"}, new go.Binding("text", "name")),
-            $(go.TextBlock, {margin: 4, text:"", editable:true}, new go.Binding("text", "name")),
-        ),
-        // four small named ports, one on each side:
-        makePort("T", go.Spot.Top, true, true),
-        makePort("L", go.Spot.Left, true, true),
-        makePort("R", go.Spot.Right, true, true),
-        makePort("B", go.Spot.Bottom, true, true),
-        { // handle mouse enter/leave events to show/hide the ports
-            mouseEnter: function(e, node) { showSmallPorts(node, true); },
-            mouseLeave: function(e, node) { showSmallPorts(node, false); }
-        }
-    )
-    myDiagram.linkTemplate = $(go.Link,
-        { selectable: true, selectionAdornmentTemplate: linkSelectionAdornmentTemplate },
-        { relinkableFrom: true, relinkableTo: true, reshapable: true },
-        { routing: go.Link.AvoidsNodes, corner: 5, curve: go.Link.JumpOver, toShortLength: 4 },
-        new go.Binding("points").makeTwoWay(),
-        $(go.Shape,  // the link path shape
-            { isPanelMain: true, strokeWidth: 2 }),
-        $(go.Shape,  // the arrowhead
-            { toArrow: "Standard", stroke: null }),
-        $(go.Panel, "Auto",
-            // new go.Binding("visible", "isSelected").ofObject(),
-            $(go.Shape, "RoundedRectangle",  // the link shape
-                { fill: "transparent", stroke: null }),
-            $(go.TextBlock,
-                {
-                    textAlign: "center",
-                    font: "10pt",
-                    stroke: "#000000",
-                    margin: 2,
-                    minSize: new go.Size(10, NaN),
-                    editable: true
-                }
-            )
-        )
-    );
-    myDiagram.addDiagramListener("Modified", function(e) {
-        if (myDiagram.isModified) {
-            console.log(myDiagram.model.toJson())
-        }
-    });
-}
-function init() {
-    initDiagram()
-}
-
-onMounted(() => {
-    init()
-})
-
-</script>
\ No newline at end of file

src/components/prop-panel/prop-panel.vue

-<template>
-    <div></div>
-</template>
-<script setup lang="ts">
-</script>
\ No newline at end of file

src/components/source-panel/source-collapse.vue

@@ -6,7 +6,7 @@ import { onMounted, ref } from 'vue';
 import go from 'gojs'
 
 import {$} from '../../kit/GOJSKit'
-import { PictureNodeTemplate} from '../../kit/NodeTemplateKit';
+import { SourcePictureNodeTemplate} from '../../kit/NodeTemplateKit';
 import {picModel} from '../../kit/ModelData.ts'
 
 
@@ -24,7 +24,7 @@ var sourceModel:any = ref(null)
 function init(){
     sourcePalette = $(go.Palette, props.category, {
         layout: $(go.GridLayout, { alignment: go.GridLayout.Location }),
-        nodeTemplate: PictureNodeTemplate,
+        nodeTemplate: SourcePictureNodeTemplate,
         allowZoom: false
     })
     sourceModel.value = picModel.filter((item:any) => {

src/components/source-panel/source-panel.vue

-<template>
-    <el-collapse>
-        <el-collapse-item class="m-2" v-for="category in categoryList" :title=category.name>
-            <SourceCollapse class="w-full h-[240px] m-4" :category="category.key"></SourceCollapse>
-        </el-collapse-item>
-    </el-collapse>
-</template>
-<script setup lang="ts">
-
-import { onMounted, ref } from 'vue'
-import { picCategory } from '../../kit/ModelData.ts'
-import SourceCollapse from './source-collapse.vue';
-
-const categoryList: any = ref(null)
-
-function init(){
-   categoryList.value = picCategory
-}
-
-onMounted(() => {
-    init()
-})
-</script>
\ No newline at end of file

src/kit/LinkTemplateKit.ts

@@ -5,5 +5,7 @@ export var linkSelectionAdornmentTemplate =
 $(go.Adornment, "Link",
   $(go.Shape,
     // isPanelMain declares that this Shape shares the Link.geometry
-    { isPanelMain: true, fill: null, stroke: "deepskyblue", strokeWidth: 0 })  // use selection object's strokeWidth
+    { isPanelMain: true, fill: null, stroke: "deepskyblue", strokeWidth: 1 },
+      new go.Binding("stroke").makeTwoWay()
+  )  // use selection object's strokeWidth
  );
\ No newline at end of file

src/kit/ModelData.ts

@@ -2,14 +2,15 @@
 export const picCategory = [
     {key:"valve",name:"阀门"},
     {key:"pump",name:"泵"},
+    {key:"computer",name:"计算机"},
 ]
 
 export const picModel = [
-    { name: "computer1", category: "comnputer", img: "src/assets/models/computer/电脑.svg"},
+    { name: "computer1", category: "computer", img: "src/assets/models/computer/电脑.svg"},
     { name: "valve2", category: "valve", img: "src/assets/models/valve/阀-2.svg"},
-    { name: "vavle3", category: "valve", img: "src/assets/models/valve/阀.svg"},
-    { name: "vavle4", category: "valve", img: "src/assets/models/valve/阀门-01.svg"},
-    { name: "vavle5", category: "valve", img: "src/assets/models/valve/阀门2-01.svg"},
+    { name: "valve3", category: "valve", img: "src/assets/models/valve/阀.svg"},
+    { name: "valve4", category: "valve", img: "src/assets/models/valve/阀门-01.svg"},
+    { name: "valve5", category: "valve", img: "src/assets/models/valve/阀门2-01.svg"},
     {name: "pump1", category: "pump", img: "src/assets/models/pump/立式泵.svg"},
     {name: "pump2", category: "pump", img: "src/assets/models/pump/卧式泵.svg"},
     {name: "pump3", category: "pump", img: "src/assets/models/pump/旋转泵.svg"},

src/kit/NodeTemplateKit.ts

-import {$} from './GOJSKit.js';
+import {$, makePort, showSmallPorts} from './GOJSKit.js';
 import go from 'gojs';
 
 // 节点选中时的边框效果
@@ -9,8 +9,8 @@ $(go.Adornment, "Auto",
  );
 
 // 表示节点旋转的锚点效果
-export const makeTopRotatingTool = () => (
-    class TopRotatingTool extends go.RotatingTool {
+export const makeKitTopRotatingTool = () => (
+    class KitTopRotatingTool extends go.RotatingTool {
         updateAdornments(part) {
             go.RotatingTool.prototype.updateAdornments.call(this, part)
             const adornment = part.findAdornment('Rotating');
@@ -46,7 +46,7 @@ $(go.Adornment, "Spot",
   $(go.Shape, { alignment: go.Spot.BottomRight, cursor: "sw-resize", desiredSize: new go.Size(6, 6), fill: "lightblue", stroke: "deepskyblue" })
 );
 
-export var PictureNodeTemplate =
+export var SourcePictureNodeTemplate =
 $(go.Node, "Vertical",
     $(go.Picture,
         { width:80,height:80},
@@ -57,3 +57,29 @@ $(go.Node, "Vertical",
         new go.Binding("text", "name"))
 )
 
+export var DiagramPictureNodeTemplate = $(go.Node, "Spot",
+    new go.Binding('location', "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
+    {selectable: true, selectionAdornmentTemplate: nodeSelectionAdornmentTemplate},
+    { resizable: true, resizeObjectName: "PANEL", resizeAdornmentTemplate: nodeResizeAdornmentTemplate },
+    { rotatable: true, rotateAdornmentTemplate: nodeRotateAdornmentTemplate, locationSpot:go.Spot.Center },
+    {resizable: true, resizeObjectName: "view"},
+    new go.Binding('angle').makeTwoWay(),
+    $(go.Panel, "Vertical",
+        {name:"PANEL", cursor: "pointer", background: "lightblue"},
+        $(go.Panel, "Viewbox",{name:"view", viewboxStretch: go.GraphObject.Uniform},
+            new go.Binding("desiredSize", "size", go.Size.parse).makeTwoWay(go.Size.stringify),
+            $(go.Picture, new go.Binding("source", "img")),
+        ),
+        $(go.TextBlock, {margin: 4, text:"", editable:true, background:"green", alignment:go.Spot.Bottom, alignmentFocus:go.Spot.Top}, new go.Binding("text", "name").makeTwoWay()),
+    ),
+    // four small named ports, one on each side:
+    makePort("T", go.Spot.Top, true, true),
+    makePort("L", go.Spot.Left, true, true),
+    makePort("R", go.Spot.Right, true, true),
+    makePort("B", go.Spot.Bottom, true, true),
+    { // handle mouse enter/leave events to show/hide the ports
+        mouseEnter: function(e, node) { showSmallPorts(node, true); console.log(myDiagram.model.toJson())},
+        mouseLeave: function(e, node) { showSmallPorts(node, false); }
+    }
+);
+