update：动态数据，修改阈值。

README.md

 # Vue-gojs
 
+使用 node 版本为 [v18.18.0](https://nodejs.org/download/release/v18.18.0/node-v18.18.0-win-x64.zip)
+
+项目启动
+
 ```bash
 npm install
 npm run dev

src/App.vue

@@ -9,25 +9,25 @@
                 </el-collapse>
             </div>
             <div id="myDiagram" class="w-full h-full border-1 border-black rounded border-solid"></div>
-      <div  class="w-[400px] h-full border-1 border-black rounded border-solid">
-          <div id="myInfo"></div>
+            <div class="w-[400px] h-full border-1 border-black rounded border-solid flex-col">
+               <div id="myInfo"> </div>
             </div>
         </div>
         <div class="flex">
             <div class="w-full"></div>
             <el-button @click="importData">导入</el-button>
-    <el-button type="primary" @click="exportData">导出</el-button>
+            <el-button type="primary">导出</el-button>
         </div>
     </div>
 </template>
 
 <script setup lang="ts">
 
-import go from "gojs";
+import * as go from "gojs";
 import SourceCollapse from "./components/source-panel/source-collapse.vue";
 import {onMounted, ref} from "vue";
 import {picCategory} from "./kit/ModelData.ts";
-import {$, makePort, showSmallPorts} from "./kit/GOJSKit.ts";
+import {GO, makePort, showSmallPorts} from "./kit/GOJSKit.ts";
 import {
     makeKitTopRotatingTool,
     nodeResizeAdornmentTemplate, nodeRotateAdornmentTemplate,
@@ -38,14 +38,17 @@ import {Inspector} from "./kit/DataInspector.ts";
 
 const categoryList: any = ref(null)
 let myDiagram: any = null;
-let inspector:any = null
+let inspector: any = null
+let inspector2: any = null
+
+let changeTimer: any = null
 
-function initPalette(){
+function initPalette() {
     categoryList.value = picCategory
 }
 
-function initDiagram(){
-    myDiagram = $(go.Diagram, "myDiagram", {
+function initDiagram() {
+    myDiagram = GO(go.Diagram, "myDiagram", {
         initialContentAlignment: go.Spot.Center,
         //允许撤销
         "undoManager.isEnabled": true,
@@ -53,15 +56,14 @@ function initDiagram(){
         "grid.visible": true,
         //滚轮缩放
         "allowZoom": true,
-        //连线是否可以不和节点连接。
-        "draggingTool.dragsLink": true,
         //旋转点相关
-        "rotatingTool": $(makeKitTopRotatingTool()),
+        "rotatingTool": GO(makeKitTopRotatingTool()),
         "rotatingTool.handleAngle": 270,
         "rotatingTool.handleDistance": 50,
         "rotatingTool.snapAngleMultiple": 15,
         "rotatingTool.snapAngleEpsilon": 15,
         //连接线相关
+        //连线是否可以不和节点连接。
         "draggingTool.dragsLink": true,
         "draggingTool.isGridSnapEnabled": true,
         "linkingTool.isUnconnectedLinkValid": true,
@@ -69,50 +71,68 @@ function initDiagram(){
         "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" }),
+            GO(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" }),
+            GO(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" }),
+            GO(go.Shape, "Diamond", {desiredSize: new go.Size(7, 7), fill: "lightblue", stroke: "deepskyblue"}),
         //调整大小
         "resizingTool.handleArchetype":
-            $(go.Shape, "Rectangle", { desiredSize: new go.Size(7, 7), fill: "lightblue", stroke: "deepskyblue" }),
+            GO(go.Shape, "Rectangle", {desiredSize: new go.Size(7, 7), fill: "lightblue", stroke: "deepskyblue"}),
         "resizingTool.isGridSnapEnabled": true,
+        //tooltip
+        "toolManager.hoverDelay": 200 ,
     })
-    myDiagram.nodeTemplate = $(go.Node, "Auto",
+    myDiagram.nodeTemplate = GO(go.Node, "Auto",
         new go.Binding('location', "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
         {selectable: true, selectionAdornmentTemplate: nodeSelectionAdornmentTemplate},
-        { resizable: true, resizeObjectName: "view", resizeAdornmentTemplate: nodeResizeAdornmentTemplate },
-        { rotatable: true, rotateAdornmentTemplate: nodeRotateAdornmentTemplate, locationSpot:go.Spot.Center },
+        {resizable: true, resizeObjectName: "view", resizeAdornmentTemplate: nodeResizeAdornmentTemplate},
+        {rotatable: true, rotateAdornmentTemplate: nodeRotateAdornmentTemplate, locationSpot: go.Spot.Center},
         new go.Binding('angle').makeTwoWay(),
-        $(go.Picture, {name:"view", cursor: "pointer", width: 100, height: 100, imageStretch: go.GraphObject.Fill},
+        GO(go.Picture, {name: "view", cursor: "pointer", width: 100, height: 100, imageStretch: go.GraphObject.Fill},
             new go.Binding("source", "img")),
-        $(go.TextBlock, {margin: 4, text:"", editable:true}, new go.Binding("text", "name").makeTwoWay()),
+        // GO(go.TextBlock, {margin: 4, text: "", editable: true},
+        //     new go.Binding("text", "name").makeTwoWay(),
+        // ),
+        GO(go.TextBlock, {margin: 4, text: "", editable: true},
+            new go.Binding("text", "press"),
+            new go.Binding("stroke", "",
+                function(data,_node) { return data.press>data.pressLimit?"red":"green"}
+            )
+        ),
         // 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); },
+            mouseEnter: function (_e, node) {
+                showSmallPorts(node, true);
+                console.log(myDiagram.model.toJson())
+            },
+            mouseLeave: function (_e, node) {
+                showSmallPorts(node, false);
+            },
+        },
+        {
+            toolTip:GO("ToolTip", GO(go.TextBlock, {margin: 4}, new go.Binding("text", "press")))
         }
     );
-    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 },
+    myDiagram.linkTemplate = GO(go.Link,
+        {selectable: true, selectionAdornmentTemplate: linkSelectionAdornmentTemplate},
+        {relinkableFrom: true, relinkableTo: true, reshapable: true},
+        {routing: go.Link.AvoidsNodes, corner: 10, curve: go.Link.JumpOver, toShortLength: 4},
         new go.Binding("points").makeTwoWay(),
         new go.Binding("stroke").makeTwoWay(),
-        $(go.Shape,  // the link path shape
-            { isPanelMain: true, strokeWidth: 2 }),
-        $(go.Shape,  // the arrowhead
-            { toArrow: "Standard", stroke: null }),
-        $(go.Panel, "Auto",
+        GO(go.Shape,  // the link path shape
+            {isPanelMain: true, strokeWidth: 2}),
+        GO(go.Shape,  // the arrowhead
+            {toArrow: "Standard", stroke: null}),
+        GO(go.Panel, "Auto",
             // new go.Binding("visible", "isSelected").ofObject(),
-            $(go.Shape, "RoundedRectangle",  // the link shape
-                { fill: "transparent", stroke: null }),
-            $(go.TextBlock,
+            GO(go.Shape, "RoundedRectangle",  // the link shape
+                {fill: "transparent", stroke: null}),
+            GO(go.TextBlock,
                 {
                     textAlign: "center",
                     font: "10pt",
@@ -124,40 +144,64 @@ function initDiagram(){
             )
         )
     );
-    myDiagram.addDiagramListener("Modified", function(e) {
-        if (myDiagram.isModified) {
-            console.log(myDiagram.model.toJson())
-        }
-    });
 }
 
-function initInfo(){
+function initInfo() {
     inspector = new Inspector('myInfo', myDiagram,
         {
+            includesOwnProperties: false,
             properties: {
-                // key would be automatically added for nodes, but we want to declare it read-only also:
-                "key": { readOnly: true, show: Inspector.showIfPresent },
-                // fill and stroke would be automatically added for nodes, but we want to declare it a color also:
-                "fill": { show: Inspector.showIfPresent, type: 'color' },
-                "stroke": { show: Inspector.showIfPresent, type: 'color' },
+                "name":{show:Inspector.showIfPresent, readOnly:true},
+                "press":{show:Inspector.showIfPresent, readOnly:true},
+                "img":{show:Inspector.showIfPresent, readOnly:true},
+                "category":{show:Inspector.showIfPresent, readOnly:true},
+                "loc": {show: Inspector.showIfPresent},
+                "pressLimit": {show: Inspector.showIfPresent},
             }
         });
+
 }
 
-function importData(){
-  console.log("import");
-    myDiagram.model = go.Model.fromJson({ "class": "GraphLinksModel",
-        "nodeDataArray": [{"name":"valve2","category":"valve","img":"src/assets/models/valve/阀-2.svg","key":-1,"loc":"-198.477783203125 -137.25607910156253","size":"190 230"}],
-        "linkDataArray": []});
+function importData() {
+    myDiagram.model = go.Model.fromJson(
+        { "class": "GraphLinksModel",
+        "nodeDataArray": [
+            {"name":"valve2","category":"valve","img":"src/assets/models/valve/阀-2.svg","key":-1,"press":"120", "pressLimit": 50},
+            {"name":"valve3","category":"valve","img":"src/assets/models/valve/阀-2.svg","key":-2,"press":"121", "pressLimit": 50},
+            {"name":"valve4","category":"valve","img":"src/assets/models/valve/阀-2.svg","key":-3,"press":"122", "pressLimit": 50},
+            {"name":"valve5","category":"valve","img":"src/assets/models/valve/阀-2.svg","key":-4,"press":"123", "pressLimit": 50},
+        ],
+        "linkDataArray": [
+            {'from': -1, 'to': -2},
+            {'from': -1, 'to': -3},
+            {'from': -1, 'to': -4},
+        ]}
+    );
 }
-function exportData(){
-  console.log("export");
+
+function exportData() {
+    console.log(myDiagram.model.toJson())
 }
 
-onMounted(()=>{
+function changePress(){
+    let model = myDiagram.model
+    changeTimer = setInterval(()=>{
+        let nodeDataArray = myDiagram.model.nodeDataArray
+        nodeDataArray.forEach((item:any)=>{
+            model.set(item, "press", Math.floor(Math.random()*100))
+        })
+        console.log(myDiagram.model.nodeDataArray)
+    },1000)
+}
+
+
+onMounted(() => {
     initPalette();
     initDiagram();
     initInfo();
+    importData();
+    changePress();
+    // changePress2();
 })
 
 </script>
\ No newline at end of file

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

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

src/kit/GOJSKit.ts

 import go from 'gojs';
 
-export var $ = go.GraphObject.make;
+export var GO = go.GraphObject.make;
 
  /**
   * 用于连接的锚点效果
@@ -9,8 +9,8 @@ export var $ = go.GraphObject.make;
   * @param {Boolean} output 是否可以从此锚点连接出去
   * @param {Boolean} input 是否可以连接到此锚点
   */
-export function makePort(name, spot, output, input) {
-    return $(go.Shape, "Circle",
+export function makePort(name:any, spot:any, output:any, input:any) {
+    return GO(go.Shape, "Circle",
              {
         fill: null,
         stroke: null,
@@ -28,10 +28,11 @@ export function makePort(name, spot, output, input) {
   * @param {Node} node 节点
   * @param {Boolean} show 是否展示
   */
-export function showSmallPorts(node, show) {
-    node.ports.each(function(port) {
+export function showSmallPorts(node:any, show:any) {
+    node.ports.each(function(port:any) {
         if (port.portId !== "") {  // don't change the default port, which is the big shape
             port.fill = show ? "rgba(0,0,0,.3)" : null;
         }
     });
 }
+

src/kit/LinkTemplateKit.ts

-import {$} from './GOJSKit'
+import {GO} from './GOJSKit'
 import go from 'gojs'
 
 export var linkSelectionAdornmentTemplate =
-$(go.Adornment, "Link",
-  $(go.Shape,
+GO(go.Adornment, "Link",
+  GO(go.Shape,
     // isPanelMain declares that this Shape shares the Link.geometry
     { isPanelMain: true, fill: null, stroke: "deepskyblue", strokeWidth: 1 },
       new go.Binding("stroke").makeTwoWay()

src/kit/NodeTemplateKit.ts

-import {$, makePort, showSmallPorts} from './GOJSKit.js';
+import {GO, makePort, showSmallPorts} from './GOJSKit.js';
 import go from 'gojs';
 
 // 节点选中时的边框效果
 export var nodeSelectionAdornmentTemplate =
-$(go.Adornment, "Auto",
-  $(go.Shape, { fill: null, stroke: "deepskyblue", strokeWidth: 1.5, strokeDashArray: [4, 2] }),
-  $(go.Placeholder)
+GO(go.Adornment, "Auto",
+  GO(go.Shape, { fill: null, stroke: "deepskyblue", strokeWidth: 1.5, strokeDashArray: [4, 2] }),
+  GO(go.Placeholder)
  );
 
 // 表示节点旋转的锚点效果
 export const makeKitTopRotatingTool = () => (
     class KitTopRotatingTool extends go.RotatingTool {
-        updateAdornments(part) {
+        updateAdornments(part: any) {
             go.RotatingTool.prototype.updateAdornments.call(this, part)
             const adornment = part.findAdornment('Rotating');
             if (adornment !== null) {
                 adornment.location = part.rotateObject.getDocumentPoint(new go.Spot(0.5, 0, 0, -30))  // above middle top
             }
         }
-        //动一下就是 90 度
-        // rotate(newangle) {
-        //     go.RotatingTool.prototype.rotate.call(this, newangle + 90)
-        // }
     }
 )
 export var nodeRotateAdornmentTemplate =
-$(go.Adornment,
+GO(go.Adornment,
   { locationSpot: go.Spot.Center, locationObjectName: "CIRCLE" },
-  $(go.Shape, "Circle", { name: "CIRCLE", cursor: "pointer", desiredSize: new go.Size(7, 7), fill: "lightblue", stroke: "deepskyblue" }),
-  $(go.Shape, { geometryString: "M3.5 7 L3.5 30", isGeometryPositioned: true, stroke: "deepskyblue", strokeWidth: 1.5, strokeDashArray: [4, 2] })
+  GO(go.Shape, "Circle", { name: "CIRCLE", cursor: "pointer", desiredSize: new go.Size(7, 7), fill: "lightblue", stroke: "deepskyblue" }),
+  GO(go.Shape, { geometryString: "M3.5 7 L3.5 30", isGeometryPositioned: true, stroke: "deepskyblue", strokeWidth: 1.5, strokeDashArray: [4, 2] })
 );
 
 // 可以调整节点大小的锚点效果
 export var nodeResizeAdornmentTemplate =
-$(go.Adornment, "Spot",
+GO(go.Adornment, "Spot",
   { locationSpot: go.Spot.Right },
-  $(go.Placeholder),
-  $(go.Shape, { alignment: go.Spot.TopLeft, cursor: "nw-resize", desiredSize: new go.Size(6, 6), fill: "lightblue", stroke: "deepskyblue" }),
-  $(go.Shape, { alignment: go.Spot.Top, cursor: "n-resize", desiredSize: new go.Size(6, 6), fill: "lightblue", stroke: "deepskyblue" }),
-  $(go.Shape, { alignment: go.Spot.TopRight, cursor: "ne-resize", desiredSize: new go.Size(6, 6), fill: "lightblue", stroke: "deepskyblue" }),
-  $(go.Shape, { alignment: go.Spot.Left, cursor: "w-resize", desiredSize: new go.Size(6, 6), fill: "lightblue", stroke: "deepskyblue" }),
-  $(go.Shape, { alignment: go.Spot.Right, cursor: "e-resize", desiredSize: new go.Size(6, 6), fill: "lightblue", stroke: "deepskyblue" }),
-  $(go.Shape, { alignment: go.Spot.BottomLeft, cursor: "se-resize", desiredSize: new go.Size(6, 6), fill: "lightblue", stroke: "deepskyblue" }),
-  $(go.Shape, { alignment: go.Spot.Bottom, cursor: "s-resize", desiredSize: new go.Size(6, 6), fill: "lightblue", stroke: "deepskyblue" }),
-  $(go.Shape, { alignment: go.Spot.BottomRight, cursor: "sw-resize", desiredSize: new go.Size(6, 6), fill: "lightblue", stroke: "deepskyblue" })
+  GO(go.Placeholder),
+  GO(go.Shape, { alignment: go.Spot.TopLeft, cursor: "nw-resize", desiredSize: new go.Size(6, 6), fill: "lightblue", stroke: "deepskyblue" }),
+  GO(go.Shape, { alignment: go.Spot.Top, cursor: "n-resize", desiredSize: new go.Size(6, 6), fill: "lightblue", stroke: "deepskyblue" }),
+  GO(go.Shape, { alignment: go.Spot.TopRight, cursor: "ne-resize", desiredSize: new go.Size(6, 6), fill: "lightblue", stroke: "deepskyblue" }),
+  GO(go.Shape, { alignment: go.Spot.Left, cursor: "w-resize", desiredSize: new go.Size(6, 6), fill: "lightblue", stroke: "deepskyblue" }),
+  GO(go.Shape, { alignment: go.Spot.Right, cursor: "e-resize", desiredSize: new go.Size(6, 6), fill: "lightblue", stroke: "deepskyblue" }),
+  GO(go.Shape, { alignment: go.Spot.BottomLeft, cursor: "se-resize", desiredSize: new go.Size(6, 6), fill: "lightblue", stroke: "deepskyblue" }),
+  GO(go.Shape, { alignment: go.Spot.Bottom, cursor: "s-resize", desiredSize: new go.Size(6, 6), fill: "lightblue", stroke: "deepskyblue" }),
+  GO(go.Shape, { alignment: go.Spot.BottomRight, cursor: "sw-resize", desiredSize: new go.Size(6, 6), fill: "lightblue", stroke: "deepskyblue" })
 );
 
 export var SourcePictureNodeTemplate =
-$(go.Node, "Vertical",
-    $(go.Picture,
+GO(go.Node, "Vertical",
+    GO(go.Picture,
         { width:80,height:80},
         new go.Binding("source", "img")
         ),
-    $(go.TextBlock,
+    GO(go.TextBlock,
         { margin: 8 ,text: "123"},
         new go.Binding("text", "name"))
 )
 
-export var DiagramPictureNodeTemplate = $(go.Node, "Spot",
+export var DiagramPictureNodeTemplate = GO(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",
+    GO(go.Panel, "Vertical",
         {name:"PANEL", cursor: "pointer", background: "lightblue"},
-        $(go.Panel, "Viewbox",{name:"view", viewboxStretch: go.GraphObject.Uniform},
+        GO(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(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()),
+        GO(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),
@@ -78,8 +74,8 @@ export var DiagramPictureNodeTemplate = $(go.Node, "Spot",
     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); }
+        mouseEnter: function(_e, node) { showSmallPorts(node, true);},
+        mouseLeave: function(_e, node) { showSmallPorts(node, false); }
     }
 );
 

src/pages/index.vue

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