Skip to content

V
vue-gojs
Commit c3433f26 by 吴斌
Options

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

parent 1f6bb6b6
Showing with 164 additions and 127 deletions
README.md
# Vue-gojs # Vue-gojs
使用 node 版本为 [v18.18.0](https://nodejs.org/download/release/v18.18.0/node-v18.18.0-win-x64.zip)
项目启动
```bash ```bash
npm install npm install
npm run dev npm run dev
......
src/App.vue
<template> <template>
<div class="space-y-4 h-90vh"> <div class="space-y-4 h-90vh">
<div class="flex h-full space-x-4"> <div class="flex h-full space-x-4">
<div class="w-[400px] h-full border-1 border-black rounded border-solid"> <div class="w-[400px] h-full border-1 border-black rounded border-solid">
<el-collapse> <el-collapse>
<el-collapse-item class="m-2" v-for="category in categoryList" :title=category.name> <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> <SourceCollapse class="w-full h-[240px] m-4" :category="category.key"></SourceCollapse>
</el-collapse-item> </el-collapse-item>
</el-collapse> </el-collapse>
</div> </div>
<div id="myDiagram" class="w-full h-full border-1 border-black rounded border-solid"></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 class="w-[400px] h-full border-1 border-black rounded border-solid flex-col">
<div id="myInfo"></div> <div id="myInfo"> </div>
</div> </div>
</div> </div>
<div class="flex"> <div class="flex">
<div class="w-full"></div> <div class="w-full"></div>
<el-button @click="importData">导入</el-button> <el-button @click="importData">导入</el-button>
<el-button type="primary" @click="exportData">导出</el-button> <el-button type="primary">导出</el-button>
</div> </div>
</div> </div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import go from "gojs"; import * as go from "gojs";
import SourceCollapse from "./components/source-panel/source-collapse.vue"; import SourceCollapse from "./components/source-panel/source-collapse.vue";
import {onMounted, ref} from "vue"; import {onMounted, ref} from "vue";
import {picCategory} from "./kit/ModelData.ts"; import {picCategory} from "./kit/ModelData.ts";
import {$, makePort, showSmallPorts} from "./kit/GOJSKit.ts"; import {GO, makePort, showSmallPorts} from "./kit/GOJSKit.ts";
import { import {
makeKitTopRotatingTool, makeKitTopRotatingTool,
nodeResizeAdornmentTemplate, nodeRotateAdornmentTemplate, nodeResizeAdornmentTemplate, nodeRotateAdornmentTemplate,
...@@ -38,14 +38,17 @@ import {Inspector} from "./kit/DataInspector.ts"; ...@@ -38,14 +38,17 @@ import {Inspector} from "./kit/DataInspector.ts";
const categoryList: any = ref(null) const categoryList: any = ref(null)
let myDiagram: any = null; let myDiagram: any = null;
let inspector:any = null let inspector: any = null
let inspector2: any = null
function initPalette(){ let changeTimer: any = null
function initPalette() {
categoryList.value = picCategory categoryList.value = picCategory
} }
function initDiagram(){ function initDiagram() {
myDiagram = $(go.Diagram, "myDiagram", { myDiagram = GO(go.Diagram, "myDiagram", {
initialContentAlignment: go.Spot.Center, initialContentAlignment: go.Spot.Center,
//允许撤销 //允许撤销
"undoManager.isEnabled": true, "undoManager.isEnabled": true,
...@@ -53,15 +56,14 @@ function initDiagram(){ ...@@ -53,15 +56,14 @@ function initDiagram(){
"grid.visible": true, "grid.visible": true,
//滚轮缩放 //滚轮缩放
"allowZoom": true, "allowZoom": true,
//连线是否可以不和节点连接。
"draggingTool.dragsLink": true,
//旋转点相关 //旋转点相关
"rotatingTool": $(makeKitTopRotatingTool()), "rotatingTool": GO(makeKitTopRotatingTool()),
"rotatingTool.handleAngle": 270, "rotatingTool.handleAngle": 270,
"rotatingTool.handleDistance": 50, "rotatingTool.handleDistance": 50,
"rotatingTool.snapAngleMultiple": 15, "rotatingTool.snapAngleMultiple": 15,
"rotatingTool.snapAngleEpsilon": 15, "rotatingTool.snapAngleEpsilon": 15,
//连接线相关 //连接线相关
//连线是否可以不和节点连接。
"draggingTool.dragsLink": true, "draggingTool.dragsLink": true,
"draggingTool.isGridSnapEnabled": true, "draggingTool.isGridSnapEnabled": true,
"linkingTool.isUnconnectedLinkValid": true, "linkingTool.isUnconnectedLinkValid": true,
...@@ -69,50 +71,68 @@ function initDiagram(){ ...@@ -69,50 +71,68 @@ function initDiagram(){
"relinkingTool.isUnconnectedLinkValid": true, "relinkingTool.isUnconnectedLinkValid": true,
"relinkingTool.portGravity": 20, "relinkingTool.portGravity": 20,
"relinkingTool.fromHandleArchetype": "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": "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": "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": "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, "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), new go.Binding('location', "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
{selectable: true, selectionAdornmentTemplate: nodeSelectionAdornmentTemplate}, {selectable: true, selectionAdornmentTemplate: nodeSelectionAdornmentTemplate},
{ resizable: true, resizeObjectName: "view", resizeAdornmentTemplate: nodeResizeAdornmentTemplate }, {resizable: true, resizeObjectName: "view", resizeAdornmentTemplate: nodeResizeAdornmentTemplate},
{ rotatable: true, rotateAdornmentTemplate: nodeRotateAdornmentTemplate, locationSpot:go.Spot.Center }, {rotatable: true, rotateAdornmentTemplate: nodeRotateAdornmentTemplate, locationSpot: go.Spot.Center},
new go.Binding('angle').makeTwoWay(), 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")), 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: // four small named ports, one on each side:
makePort("T", go.Spot.Top, true, true), makePort("T", go.Spot.Top, true, true),
makePort("L", go.Spot.Left, true, true), makePort("L", go.Spot.Left, true, true),
makePort("R", go.Spot.Right, true, true), makePort("R", go.Spot.Right, true, true),
makePort("B", go.Spot.Bottom, true, true), makePort("B", go.Spot.Bottom, true, true),
{ // handle mouse enter/leave events to show/hide the ports { // handle mouse enter/leave events to show/hide the ports
mouseEnter: function(e, node) { showSmallPorts(node, true); console.log(myDiagram.model.toJson())}, mouseEnter: function (_e, node) {
mouseLeave: function(e, node) { showSmallPorts(node, false); }, 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, myDiagram.linkTemplate = GO(go.Link,
{ selectable: true, selectionAdornmentTemplate: linkSelectionAdornmentTemplate }, {selectable: true, selectionAdornmentTemplate: linkSelectionAdornmentTemplate},
{ relinkableFrom: true, relinkableTo: true, reshapable: true }, {relinkableFrom: true, relinkableTo: true, reshapable: true},
{ routing: go.Link.AvoidsNodes, corner: 5, curve: go.Link.JumpOver, toShortLength: 4 }, {routing: go.Link.AvoidsNodes, corner: 10, curve: go.Link.JumpOver, toShortLength: 4},
new go.Binding("points").makeTwoWay(), new go.Binding("points").makeTwoWay(),
new go.Binding("stroke").makeTwoWay(), new go.Binding("stroke").makeTwoWay(),
$(go.Shape, // the link path shape GO(go.Shape, // the link path shape
{ isPanelMain: true, strokeWidth: 2 }), {isPanelMain: true, strokeWidth: 2}),
$(go.Shape, // the arrowhead GO(go.Shape, // the arrowhead
{ toArrow: "Standard", stroke: null }), {toArrow: "Standard", stroke: null}),
$(go.Panel, "Auto", GO(go.Panel, "Auto",
// new go.Binding("visible", "isSelected").ofObject(), // new go.Binding("visible", "isSelected").ofObject(),
$(go.Shape, "RoundedRectangle", // the link shape GO(go.Shape, "RoundedRectangle", // the link shape
{ fill: "transparent", stroke: null }), {fill: "transparent", stroke: null}),
$(go.TextBlock, GO(go.TextBlock,
{ {
textAlign: "center", textAlign: "center",
font: "10pt", font: "10pt",
...@@ -124,40 +144,64 @@ function initDiagram(){ ...@@ -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, inspector = new Inspector('myInfo', myDiagram,
{ {
includesOwnProperties: false,
properties: { properties: {
// key would be automatically added for nodes, but we want to declare it read-only also: "name":{show:Inspector.showIfPresent, readOnly:true},
"key": { readOnly: true, show: Inspector.showIfPresent }, "press":{show:Inspector.showIfPresent, readOnly:true},
// fill and stroke would be automatically added for nodes, but we want to declare it a color also: "img":{show:Inspector.showIfPresent, readOnly:true},
"fill": { show: Inspector.showIfPresent, type: 'color' }, "category":{show:Inspector.showIfPresent, readOnly:true},
"stroke": { show: Inspector.showIfPresent, type: 'color' }, "loc": {show: Inspector.showIfPresent},
"pressLimit": {show: Inspector.showIfPresent},
} }
}); });
}
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 importData(){ function exportData() {
console.log("import"); console.log(myDiagram.model.toJson())
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 exportData(){
console.log("export"); 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(); onMounted(() => {
initDiagram(); initPalette();
initInfo(); initDiagram();
initInfo();
importData();
changePress();
// changePress2();
}) })
</script> </script>
\ No newline at end of file
src/components/source-panel/source-collapse.vue
...@@ -5,7 +5,7 @@ ...@@ -5,7 +5,7 @@
import { onMounted, ref } from 'vue'; import { onMounted, ref } from 'vue';
import go from 'gojs' import go from 'gojs'
import {$} from '../../kit/GOJSKit' import {GO} from '../../kit/GOJSKit'
import { SourcePictureNodeTemplate} from '../../kit/NodeTemplateKit'; import { SourcePictureNodeTemplate} from '../../kit/NodeTemplateKit';
import {picModel} from '../../kit/ModelData.ts' import {picModel} from '../../kit/ModelData.ts'
...@@ -22,8 +22,8 @@ var sourcePalette: any = ref(null) ...@@ -22,8 +22,8 @@ var sourcePalette: any = ref(null)
var sourceModel:any = ref(null) var sourceModel:any = ref(null)
function init(){ function init(){
sourcePalette = $(go.Palette, props.category, { sourcePalette = GO(go.Palette, props.category, {
layout: $(go.GridLayout, { alignment: go.GridLayout.Location }), layout: GO(go.GridLayout, { alignment: go.GridLayout.Location }),
nodeTemplate: SourcePictureNodeTemplate, nodeTemplate: SourcePictureNodeTemplate,
allowZoom: false allowZoom: false
}) })
......
src/kit/GOJSKit.ts
import go from 'gojs'; import go from 'gojs';
export var $ = go.GraphObject.make; export var GO = go.GraphObject.make;
/** /**
* 用于连接的锚点效果 * 用于连接的锚点效果
...@@ -9,8 +9,8 @@ export var $ = go.GraphObject.make; ...@@ -9,8 +9,8 @@ export var $ = go.GraphObject.make;
* @param {Boolean} output 是否可以从此锚点连接出去 * @param {Boolean} output 是否可以从此锚点连接出去
* @param {Boolean} input 是否可以连接到此锚点 * @param {Boolean} input 是否可以连接到此锚点
*/ */
export function makePort(name, spot, output, input) { export function makePort(name:any, spot:any, output:any, input:any) {
return $(go.Shape, "Circle", return GO(go.Shape, "Circle",
{ {
fill: null, fill: null,
stroke: null, stroke: null,
...@@ -28,10 +28,11 @@ export function makePort(name, spot, output, input) { ...@@ -28,10 +28,11 @@ export function makePort(name, spot, output, input) {
* @param {Node} node 节点 * @param {Node} node 节点
* @param {Boolean} show 是否展示 * @param {Boolean} show 是否展示
*/ */
export function showSmallPorts(node, show) { export function showSmallPorts(node:any, show:any) {
node.ports.each(function(port) { node.ports.each(function(port:any) {
if (port.portId !== "") { // don't change the default port, which is the big shape if (port.portId !== "") { // don't change the default port, which is the big shape
port.fill = show ? "rgba(0,0,0,.3)" : null; port.fill = show ? "rgba(0,0,0,.3)" : null;
} }
}); });
} }
\ No newline at end of file
src/kit/LinkTemplateKit.ts
import {$} from './GOJSKit' import {GO} from './GOJSKit'
import go from 'gojs' import go from 'gojs'
export var linkSelectionAdornmentTemplate = export var linkSelectionAdornmentTemplate =
$(go.Adornment, "Link", GO(go.Adornment, "Link",
$(go.Shape, GO(go.Shape,
// isPanelMain declares that this Shape shares the Link.geometry // isPanelMain declares that this Shape shares the Link.geometry
{ isPanelMain: true, fill: null, stroke: "deepskyblue", strokeWidth: 1 }, { isPanelMain: true, fill: null, stroke: "deepskyblue", strokeWidth: 1 },
new go.Binding("stroke").makeTwoWay() 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'; import go from 'gojs';
// 节点选中时的边框效果 // 节点选中时的边框效果
export var nodeSelectionAdornmentTemplate = export var nodeSelectionAdornmentTemplate =
$(go.Adornment, "Auto", GO(go.Adornment, "Auto",
$(go.Shape, { fill: null, stroke: "deepskyblue", strokeWidth: 1.5, strokeDashArray: [4, 2] }), GO(go.Shape, { fill: null, stroke: "deepskyblue", strokeWidth: 1.5, strokeDashArray: [4, 2] }),
$(go.Placeholder) GO(go.Placeholder)
); );
// 表示节点旋转的锚点效果 // 表示节点旋转的锚点效果
export const makeKitTopRotatingTool = () => ( export const makeKitTopRotatingTool = () => (
class KitTopRotatingTool extends go.RotatingTool { class KitTopRotatingTool extends go.RotatingTool {
updateAdornments(part) { updateAdornments(part: any) {
go.RotatingTool.prototype.updateAdornments.call(this, part) go.RotatingTool.prototype.updateAdornments.call(this, part)
const adornment = part.findAdornment('Rotating'); const adornment = part.findAdornment('Rotating');
if (adornment !== null) { if (adornment !== null) {
adornment.location = part.rotateObject.getDocumentPoint(new go.Spot(0.5, 0, 0, -30)) // above middle top 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 = export var nodeRotateAdornmentTemplate =
$(go.Adornment, GO(go.Adornment,
{ locationSpot: go.Spot.Center, locationObjectName: "CIRCLE" }, { locationSpot: go.Spot.Center, locationObjectName: "CIRCLE" },
$(go.Shape, "Circle", { name: "CIRCLE", cursor: "pointer", desiredSize: new go.Size(7, 7), fill: "lightblue", stroke: "deepskyblue" }), GO(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, { geometryString: "M3.5 7 L3.5 30", isGeometryPositioned: true, stroke: "deepskyblue", strokeWidth: 1.5, strokeDashArray: [4, 2] })
); );
// 可以调整节点大小的锚点效果 // 可以调整节点大小的锚点效果
export var nodeResizeAdornmentTemplate = export var nodeResizeAdornmentTemplate =
$(go.Adornment, "Spot", GO(go.Adornment, "Spot",
{ locationSpot: go.Spot.Right }, { locationSpot: go.Spot.Right },
$(go.Placeholder), GO(go.Placeholder),
$(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.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(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(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(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(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(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(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.Shape, { alignment: go.Spot.BottomRight, cursor: "sw-resize", desiredSize: new go.Size(6, 6), fill: "lightblue", stroke: "deepskyblue" })
); );
export var SourcePictureNodeTemplate = export var SourcePictureNodeTemplate =
$(go.Node, "Vertical", GO(go.Node, "Vertical",
$(go.Picture, GO(go.Picture,
{ width:80,height:80}, { width:80,height:80},
new go.Binding("source", "img") new go.Binding("source", "img")
), ),
$(go.TextBlock, GO(go.TextBlock,
{ margin: 8 ,text: "123"}, { margin: 8 ,text: "123"},
new go.Binding("text", "name")) 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), new go.Binding('location', "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
{selectable: true, selectionAdornmentTemplate: nodeSelectionAdornmentTemplate}, {selectable: true, selectionAdornmentTemplate: nodeSelectionAdornmentTemplate},
{ resizable: true, resizeObjectName: "PANEL", resizeAdornmentTemplate: nodeResizeAdornmentTemplate }, { resizable: true, resizeObjectName: "PANEL", resizeAdornmentTemplate: nodeResizeAdornmentTemplate },
{ rotatable: true, rotateAdornmentTemplate: nodeRotateAdornmentTemplate, locationSpot:go.Spot.Center }, { rotatable: true, rotateAdornmentTemplate: nodeRotateAdornmentTemplate, locationSpot:go.Spot.Center },
{resizable: true, resizeObjectName: "view"}, {resizable: true, resizeObjectName: "view"},
new go.Binding('angle').makeTwoWay(), new go.Binding('angle').makeTwoWay(),
$(go.Panel, "Vertical", GO(go.Panel, "Vertical",
{name:"PANEL", cursor: "pointer", background: "lightblue"}, {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), 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: // four small named ports, one on each side:
makePort("T", go.Spot.Top, true, true), makePort("T", go.Spot.Top, true, true),
...@@ -78,8 +74,8 @@ export var DiagramPictureNodeTemplate = $(go.Node, "Spot", ...@@ -78,8 +74,8 @@ export var DiagramPictureNodeTemplate = $(go.Node, "Spot",
makePort("R", go.Spot.Right, true, true), makePort("R", go.Spot.Right, true, true),
makePort("B", go.Spot.Bottom, true, true), makePort("B", go.Spot.Bottom, true, true),
{ // handle mouse enter/leave events to show/hide the ports { // handle mouse enter/leave events to show/hide the ports
mouseEnter: function(e, node) { showSmallPorts(node, true); console.log(myDiagram.model.toJson())}, mouseEnter: function(_e, node) { showSmallPorts(node, true);},
mouseLeave: function(e, node) { showSmallPorts(node, false); } mouseLeave: function(_e, node) { showSmallPorts(node, false); }
} }
); );
src/pages/index.vue deleted 100644 → 0
<template>
</template>
<script setup lang="ts">
</script>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment