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/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