update：更好的预览支持。拖入节点的默认大小为原始大小。

src/App.vue

@@ -207,7 +207,7 @@ function importData(){
 
 function saveData(){
     // console.log('nodeCount', nodeCount.count)
-    console.log(selectedNode.value?.data)
+    console.log(selectedNode.value)
 }
 
 function changeData(){
@@ -281,9 +281,9 @@ function initDiagram(){
     myDiagram.linkTemplateMap.add('Flow', FlowLink)
 
     //多种类型的节点
-    myDiagram.nodeTemplateMap.add('svg', makeDiagramNodeTemplate('svg', 100))
-    myDiagram.nodeTemplateMap.add('geometry', makeDiagramNodeTemplate('geometry', 100))
-    myDiagram.nodeTemplateMap.add('shape', makeDiagramNodeTemplate('shape', 100))
+    myDiagram.nodeTemplateMap.add('svg', makeDiagramNodeTemplate('svg'))
+    myDiagram.nodeTemplateMap.add('geometry', makeDiagramNodeTemplate('geometry'))
+    myDiagram.nodeTemplateMap.add('shape', makeDiagramNodeTemplate('shape'))
 }
 
 function listenDiagram(){

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

@@ -34,7 +34,7 @@ function init(){
             { cellSize: new go.Size(45, 45), spacing: new go.Size(5, 5)},
             {wrappingColumn: 4},
         ),
-        nodeTemplate: makeSourcePanelNodeTemplate(props.category.type, 30)
+        nodeTemplate: makeSourcePanelNodeTemplate(props.category.type, go.GraphObject.Uniform, 30)
     })
 
 

src/kit/NodeTemplateKit.ts

@@ -4,47 +4,50 @@ import go from "gojs";
 // 源节点图片或形状大小
 
 // 源节点的模板--type: svg
-export function makeSVGNode (size:number) {
+/*
+* size: 节点大小 例如: 40 undefined 表示使用原始大小
+ */
+export function makeSVGNode (stretch: typeof go.GraphObject.Fill = go.GraphObject.Fill, size?:number) {
     return GO(go.Picture,
-        {name:"view", width:size, height:size, imageStretch: go.GraphObject.Fill },
+        {name:"view", width:size, height:size, imageStretch: stretch },
         new go.Binding("source", "img"),
-        new go.Binding('desiredSize', "size", go.Size.parse),
+        new go.Binding('desiredSize', "size", go.Size.parse).makeTwoWay(go.Size.stringify),
     )
 }
 
 // 源节点的模板--type: geometry
-export function makeGeometryNode(size:number) {
+export function makeGeometryNode(stretch: typeof go.GraphObject.Fill = go.GraphObject.Fill, size?:number){
     return GO(go.Shape,
-        {name:"view", width:size,height:size, geometryStretch: go.GraphObject.Fill},
+        {name:"view", width:size,height:size, geometryStretch: stretch},
         new go.Binding("geometryString", "geometry"),
         new go.Binding("fill", "fill"),
         new go.Binding("stroke", "stroke"),
-        new go.Binding('desiredSize', "size", go.Size.parse),
+        new go.Binding('desiredSize', "size", go.Size.parse).makeTwoWay(go.Size.stringify),
     )
 }
 
 // 源节点的模板--type: shape
-export function makeShapeNode (size:number){
+export function makeShapeNode (stretch: typeof go.GraphObject.Fill = go.GraphObject.Fill, size?:number){
     return GO(go.Shape,
-        {name:"view", width:size,height:size, geometryStretch: go.GraphObject.Fill},
+        {name:"view", width:size,height:size, geometryStretch: stretch},
         new go.Binding("figure", "shape"),
         new go.Binding("fill", "fill"),
         new go.Binding("stroke", "stroke"),
-        new go.Binding('desiredSize', "size", go.Size.parse),
+        new go.Binding('desiredSize', "size", go.Size.parse).makeTwoWay(go.Size.stringify),
     )
 }
 
 /*
 * 不同类型返回不同的节点模板
 */
-export function makeNodeTemplate(type:string, size:number){
+export function makeNodeTemplate(type:string, stretch=go.GraphObject.Fill, size?:number){
     switch (type) {
         case 'svg':
-            return makeSVGNode(size)
+            return makeSVGNode(stretch, size)
         case 'geometry':
-            return makeGeometryNode(size)
+            return makeGeometryNode(stretch, size)
         case 'shape':
-            return makeShapeNode(size)
+            return makeShapeNode(stretch, size)
         default:
             return GO(go.Shape)
     }
@@ -53,7 +56,7 @@ export function makeNodeTemplate(type:string, size:number){
 /*
 * 创建节点模板，相比于 makeNodeTemplate 外面套了一层公共部分，方便整体修改
  */
-export function makeDiagramNodeTemplate(type:string, size:number){
+export function makeDiagramNodeTemplate(type:string, stretch=go.GraphObject.Fill,  size?:number){
     return GO(go.Node, "Spot",
         {selectable: true, selectionAdornmentTemplate: nodeSelectionAdornment},
         {resizable: true,  resizeAdornmentTemplate: nodeResizeAdornment, resizeObjectName: "view"},
@@ -61,14 +64,12 @@ export function makeDiagramNodeTemplate(type:string, size:number){
         {itemTemplate: nodePortTemplate},
         new go.Binding('location', "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
         new go.Binding('angle').makeTwoWay(),
-        new go.Binding('desiredSize', "size", go.Size.parse).makeTwoWay(go.Size.stringify),
         new go.Binding("itemArray", "portArray"),
-        makeNodeTemplate(type, size),
+        makeNodeTemplate(type, stretch, size)
     )
 }
 
-export function makeSourcePanelNodeTemplate(nodeType:string, size:number){
-    let previewSize = size * 3
+export function makeSourcePanelNodeTemplate(nodeType:string, stretch=go.GraphObject.Fill, size:number){
     return GO(go.Node, "Auto",
         {selectionAdornmentTemplate:GO(go.Adornment)},
         {width:40, height:40 },
@@ -83,11 +84,11 @@ export function makeSourcePanelNodeTemplate(nodeType:string, size:number){
         GO(go.Shape, "RoundedRectangle",
             {width:40, height:40,stroke:null, fill:null, name:"SHAPE"},
         ),
-        makeNodeTemplate(nodeType, size),
+        makeNodeTemplate(nodeType, stretch, size),
         {
             toolTip: GO('ToolTip', {width:100},
                 GO(go.Panel, "Vertical",
-                    makeNodeTemplate(nodeType, previewSize),
+                    makeNodeTemplate(nodeType, go.GraphObject.Uniform, size*3),
                     GO(go.Shape,  {figure:"LineH", width:100,height:10}),
                     GO(go.TextBlock, {margin:5 }, new go.Binding("text", "name"))
                 )