Skip to content

G
gojs-project
Commit e96bc2f5 by jlc
Options

update: port端口

parent f93688f4
Showing with 628 additions and 3 deletions
package-lock.json
......@@ -8,6 +8,7 @@
"name": "vue3-ts-gojs",
"version": "0.0.0",
"dependencies": {
"element-plus": "^2.7.4",
"vue": "^3.4.21"
},
"devDependencies": {
......@@ -30,6 +31,22 @@
"node": ">=6.0.0"
}
},
"node_modules/@ctrl/tinycolor": {
"version": "3.6.1",
"resolved": "https://registry.npmmirror.com/@ctrl/tinycolor/-/tinycolor-3.6.1.tgz",
"integrity": "sha512-SITSV6aIXsuVNV3f3O0f2n/cgyEDWoSqtZMYiAmcsYHydcKrOz3gUxB/iXd/Qf08+IZX4KpgNbvUdMBmWz+kcA==",
"engines": {
"node": ">=10"
}
},
"node_modules/@element-plus/icons-vue": {
"version": "2.3.1",
"resolved": "https://registry.npmmirror.com/@element-plus/icons-vue/-/icons-vue-2.3.1.tgz",
"integrity": "sha512-XxVUZv48RZAd87ucGS48jPf6pKu0yV5UCg9f4FFwtrYxXOwWuVJo6wOvSLKEoMQKjv8GsX/mhP6UsC1lRwbUWg==",
"peerDependencies": {
"vue": "^3.2.0"
}
},
"node_modules/@esbuild/aix-ppc64": {
"version": "0.20.2",
"resolved": "https://registry.npmmirror.com/@esbuild/aix-ppc64/-/aix-ppc64-0.20.2.tgz",
......@@ -398,11 +415,39 @@
"node": ">=12"
}
},
"node_modules/@floating-ui/core": {
"version": "1.6.2",
"resolved": "https://registry.npmmirror.com/@floating-ui/core/-/core-1.6.2.tgz",
"integrity": "sha512-+2XpQV9LLZeanU4ZevzRnGFg2neDeKHgFLjP6YLW+tly0IvrhqT4u8enLGjLH3qeh85g19xY5rsAusfwTdn5lg==",
"dependencies": {
"@floating-ui/utils": "^0.2.0"
}
},
"node_modules/@floating-ui/dom": {
"version": "1.6.5",
"resolved": "https://registry.npmmirror.com/@floating-ui/dom/-/dom-1.6.5.tgz",
"integrity": "sha512-Nsdud2X65Dz+1RHjAIP0t8z5e2ff/IRbei6BqFrl1urT8sDVzM1HMQ+R0XcU5ceRfyO3I6ayeqIfh+6Wb8LGTw==",
"dependencies": {
"@floating-ui/core": "^1.0.0",
"@floating-ui/utils": "^0.2.0"
}
},
"node_modules/@floating-ui/utils": {
"version": "0.2.2",
"resolved": "https://registry.npmmirror.com/@floating-ui/utils/-/utils-0.2.2.tgz",
"integrity": "sha512-J4yDIIthosAsRZ5CPYP/jQvUAQtlZTTD/4suA08/FEnlxqW3sKS9iAhgsa9VYLZ6vDHn/ixJgIqRQPotoBjxIw=="
},
"node_modules/@jridgewell/sourcemap-codec": {
"version": "1.4.15",
"resolved": "https://registry.npmmirror.com/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz",
"integrity": "sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg=="
},
"node_modules/@popperjs/core": {
"name": "@sxzz/popperjs-es",
"version": "2.11.7",
"resolved": "https://registry.npmmirror.com/@sxzz/popperjs-es/-/popperjs-es-2.11.7.tgz",
"integrity": "sha512-Ccy0NlLkzr0Ex2FKvh2X+OyERHXJ88XJ1MXtsI9y9fGexlaXaVTPzBCRBwIxFkORuOb+uBqeu+RqnpgYTEZRUQ=="
},
"node_modules/@rollup/rollup-android-arm-eabi": {
"version": "4.18.0",
"resolved": "https://registry.npmmirror.com/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.18.0.tgz",
......@@ -626,12 +671,30 @@
"@types/sizzle": "*"
}
},
"node_modules/@types/lodash": {
"version": "4.17.4",
"resolved": "https://registry.npmmirror.com/@types/lodash/-/lodash-4.17.4.tgz",
"integrity": "sha512-wYCP26ZLxaT3R39kiN2+HcJ4kTd3U1waI/cY7ivWYqFP6pW3ZNpvi6Wd6PHZx7T/t8z0vlkXMg3QYLa7DZ/IJQ=="
},
"node_modules/@types/lodash-es": {
"version": "4.17.12",
"resolved": "https://registry.npmmirror.com/@types/lodash-es/-/lodash-es-4.17.12.tgz",
"integrity": "sha512-0NgftHUcV4v34VhXm8QBSftKVXtbkBG3ViCjs6+eJ5a6y6Mi/jiFGPc1sC7QK+9BFhWrURE3EOggmWaSxL9OzQ==",
"dependencies": {
"@types/lodash": "*"
}
},
"node_modules/@types/sizzle": {
"version": "2.3.8",
"resolved": "https://registry.npmmirror.com/@types/sizzle/-/sizzle-2.3.8.tgz",
"integrity": "sha512-0vWLNK2D5MT9dg0iOo8GlKguPAU02QjmZitPEsXRuJXU/OGIOt9vT9Fc26wtYuavLxtO45v9PGleoL9Z0k1LHg==",
"dev": true
},
"node_modules/@types/web-bluetooth": {
"version": "0.0.16",
"resolved": "https://registry.npmmirror.com/@types/web-bluetooth/-/web-bluetooth-0.0.16.tgz",
"integrity": "sha512-oh8q2Zc32S6gd/j50GowEjKLoOVOwHP/bWVjKJInBwQqdOYMdPrf1oVlelTlyfFK3CKxL1uahMDAr+vy8T7yMQ=="
},
"node_modules/@vitejs/plugin-vue": {
"version": "5.0.4",
"resolved": "https://registry.npmmirror.com/@vitejs/plugin-vue/-/plugin-vue-5.0.4.tgz",
......@@ -786,6 +849,94 @@
"resolved": "https://registry.npmmirror.com/@vue/shared/-/shared-3.4.27.tgz",
"integrity": "sha512-DL3NmY2OFlqmYYrzp39yi3LDkKxa5vZVwxWdQ3rG0ekuWscHraeIbnI8t+aZK7qhYqEqWKTUdijadunb9pnrgA=="
},
"node_modules/@vueuse/core": {
"version": "9.13.0",
"resolved": "https://registry.npmmirror.com/@vueuse/core/-/core-9.13.0.tgz",
"integrity": "sha512-pujnclbeHWxxPRqXWmdkKV5OX4Wk4YeK7wusHqRwU0Q7EFusHoqNA/aPhB6KCh9hEqJkLAJo7bb0Lh9b+OIVzw==",
"dependencies": {
"@types/web-bluetooth": "^0.0.16",
"@vueuse/metadata": "9.13.0",
"@vueuse/shared": "9.13.0",
"vue-demi": "*"
},
"funding": {
"url": "https://github.com/sponsors/antfu"
}
},
"node_modules/@vueuse/core/node_modules/vue-demi": {
"version": "0.14.8",
"resolved": "https://registry.npmmirror.com/vue-demi/-/vue-demi-0.14.8.tgz",
"integrity": "sha512-Uuqnk9YE9SsWeReYqK2alDI5YzciATE0r2SkA6iMAtuXvNTMNACJLJEXNXaEy94ECuBe4Sk6RzRU80kjdbIo1Q==",
"hasInstallScript": true,
"bin": {
"vue-demi-fix": "bin/vue-demi-fix.js",
"vue-demi-switch": "bin/vue-demi-switch.js"
},
"engines": {
"node": ">=12"
},
"funding": {
"url": "https://github.com/sponsors/antfu"
},
"peerDependencies": {
"@vue/composition-api": "^1.0.0-rc.1",
"vue": "^3.0.0-0 || ^2.6.0"
},
"peerDependenciesMeta": {
"@vue/composition-api": {
"optional": true
}
}
},
"node_modules/@vueuse/metadata": {
"version": "9.13.0",
"resolved": "https://registry.npmmirror.com/@vueuse/metadata/-/metadata-9.13.0.tgz",
"integrity": "sha512-gdU7TKNAUVlXXLbaF+ZCfte8BjRJQWPCa2J55+7/h+yDtzw3vOoGQDRXzI6pyKyo6bXFT5/QoPE4hAknExjRLQ==",
"funding": {
"url": "https://github.com/sponsors/antfu"
}
},
"node_modules/@vueuse/shared": {
"version": "9.13.0",
"resolved": "https://registry.npmmirror.com/@vueuse/shared/-/shared-9.13.0.tgz",
"integrity": "sha512-UrnhU+Cnufu4S6JLCPZnkWh0WwZGUp72ktOF2DFptMlOs3TOdVv8xJN53zhHGARmVOsz5KqOls09+J1NR6sBKw==",
"dependencies": {
"vue-demi": "*"
},
"funding": {
"url": "https://github.com/sponsors/antfu"
}
},
"node_modules/@vueuse/shared/node_modules/vue-demi": {
"version": "0.14.8",
"resolved": "https://registry.npmmirror.com/vue-demi/-/vue-demi-0.14.8.tgz",
"integrity": "sha512-Uuqnk9YE9SsWeReYqK2alDI5YzciATE0r2SkA6iMAtuXvNTMNACJLJEXNXaEy94ECuBe4Sk6RzRU80kjdbIo1Q==",
"hasInstallScript": true,
"bin": {
"vue-demi-fix": "bin/vue-demi-fix.js",
"vue-demi-switch": "bin/vue-demi-switch.js"
},
"engines": {
"node": ">=12"
},
"funding": {
"url": "https://github.com/sponsors/antfu"
},
"peerDependencies": {
"@vue/composition-api": "^1.0.0-rc.1",
"vue": "^3.0.0-0 || ^2.6.0"
},
"peerDependenciesMeta": {
"@vue/composition-api": {
"optional": true
}
}
},
"node_modules/async-validator": {
"version": "4.2.5",
"resolved": "https://registry.npmmirror.com/async-validator/-/async-validator-4.2.5.tgz",
"integrity": "sha512-7HhHjtERjqlNbZtqNqy2rckN/SpOOlmDliet+lP7k+eKZEjPk3DgyeU9lIXLdeLz0uBbbVp+9Qdow9wJWgwwfg=="
},
"node_modules/balanced-match": {
"version": "1.0.2",
"resolved": "https://registry.npmmirror.com/balanced-match/-/balanced-match-1.0.2.tgz",
......@@ -812,12 +963,42 @@
"resolved": "https://registry.npmmirror.com/csstype/-/csstype-3.1.3.tgz",
"integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw=="
},
"node_modules/dayjs": {
"version": "1.11.11",
"resolved": "https://registry.npmmirror.com/dayjs/-/dayjs-1.11.11.tgz",
"integrity": "sha512-okzr3f11N6WuqYtZSvm+F776mB41wRZMhKP+hc34YdW+KmtYYK9iqvHSwo2k9FEH3fhGXvOPV6yz2IcSrfRUDg=="
},
"node_modules/de-indent": {
"version": "1.0.2",
"resolved": "https://registry.npmmirror.com/de-indent/-/de-indent-1.0.2.tgz",
"integrity": "sha512-e/1zu3xH5MQryN2zdVaF0OrdNLUbvWxzMbi+iNA6Bky7l1RoP8a2fIbRocyHclXt/arDrrR6lL3TqFD9pMQTsg==",
"dev": true
},
"node_modules/element-plus": {
"version": "2.7.4",
"resolved": "https://registry.npmmirror.com/element-plus/-/element-plus-2.7.4.tgz",
"integrity": "sha512-ADBN3zHdhg8R9m6IXR2B5txSWvCn1+nAD+aA9kaJ4rZHMr37DVX6EOdwUjqAMPKz2xC0tculgkJ5rh5zVNiDNQ==",
"dependencies": {
"@ctrl/tinycolor": "^3.4.1",
"@element-plus/icons-vue": "^2.3.1",
"@floating-ui/dom": "^1.0.1",
"@popperjs/core": "npm:@sxzz/popperjs-es@^2.11.7",
"@types/lodash": "^4.14.182",
"@types/lodash-es": "^4.17.6",
"@vueuse/core": "^9.1.0",
"async-validator": "^4.2.5",
"dayjs": "^1.11.3",
"escape-html": "^1.0.3",
"lodash": "^4.17.21",
"lodash-es": "^4.17.21",
"lodash-unified": "^1.0.2",
"memoize-one": "^6.0.0",
"normalize-wheel-es": "^1.2.0"
},
"peerDependencies": {
"vue": "^3.2.0"
}
},
"node_modules/entities": {
"version": "4.5.0",
"resolved": "https://registry.npmmirror.com/entities/-/entities-4.5.0.tgz",
......@@ -867,6 +1048,11 @@
"@esbuild/win32-x64": "0.20.2"
}
},
"node_modules/escape-html": {
"version": "1.0.3",
"resolved": "https://registry.npmmirror.com/escape-html/-/escape-html-1.0.3.tgz",
"integrity": "sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow=="
},
"node_modules/estree-walker": {
"version": "2.0.2",
"resolved": "https://registry.npmmirror.com/estree-walker/-/estree-walker-2.0.2.tgz",
......@@ -901,6 +1087,26 @@
"he": "bin/he"
}
},
"node_modules/lodash": {
"version": "4.17.21",
"resolved": "https://registry.npmmirror.com/lodash/-/lodash-4.17.21.tgz",
"integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
},
"node_modules/lodash-es": {
"version": "4.17.21",
"resolved": "https://registry.npmmirror.com/lodash-es/-/lodash-es-4.17.21.tgz",
"integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw=="
},
"node_modules/lodash-unified": {
"version": "1.0.3",
"resolved": "https://registry.npmmirror.com/lodash-unified/-/lodash-unified-1.0.3.tgz",
"integrity": "sha512-WK9qSozxXOD7ZJQlpSqOT+om2ZfcT4yO+03FuzAHD0wF6S0l0090LRPDx3vhTTLZ8cFKpBn+IOcVXK6qOcIlfQ==",
"peerDependencies": {
"@types/lodash-es": "*",
"lodash": "*",
"lodash-es": "*"
}
},
"node_modules/magic-string": {
"version": "0.30.10",
"resolved": "https://registry.npmmirror.com/magic-string/-/magic-string-0.30.10.tgz",
......@@ -909,6 +1115,11 @@
"@jridgewell/sourcemap-codec": "^1.4.15"
}
},
"node_modules/memoize-one": {
"version": "6.0.0",
"resolved": "https://registry.npmmirror.com/memoize-one/-/memoize-one-6.0.0.tgz",
"integrity": "sha512-rkpe71W0N0c0Xz6QD0eJETuWAJGnJ9afsl1srmwPrI+yBCkge5EycXXbYRyvL29zZVUWQCY7InPRCv3GDXuZNw=="
},
"node_modules/minimatch": {
"version": "9.0.4",
"resolved": "https://registry.npmmirror.com/minimatch/-/minimatch-9.0.4.tgz",
......@@ -947,6 +1158,11 @@
"node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
}
},
"node_modules/normalize-wheel-es": {
"version": "1.2.0",
"resolved": "https://registry.npmmirror.com/normalize-wheel-es/-/normalize-wheel-es-1.2.0.tgz",
"integrity": "sha512-Wj7+EJQ8mSuXr2iWfnujrimU35R2W4FAErEyTmJoJ7ucwTn2hOUSsRehMb5RSYkxXGTM7Y9QpvPmp++w5ftoJw=="
},
"node_modules/path-browserify": {
"version": "1.0.1",
"resolved": "https://registry.npmmirror.com/path-browserify/-/path-browserify-1.0.1.tgz",
......
package.json
......@@ -9,6 +9,7 @@
"preview": "vite preview"
},
"dependencies": {
"element-plus": "^2.7.4",
"vue": "^3.4.21"
},
"devDependencies": {
......
src/App.vue
......@@ -11,7 +11,8 @@
<!-- <panel></panel> -->
<!-- <contextMenu></contextMenu> -->
<!-- <firstProject></firstProject> -->
<port></port>
<!-- <port></port> -->
<portProject></portProject>
</template>
<script setup lang="ts">
......@@ -27,7 +28,8 @@
// import panel from './components/panel.vue';
// import contextMenu from './components/contextMenu.vue';
// import firstProject from './stageAchievements/firstProject.vue';
import port from './components/port.vue';
// import port from './components/port.vue';
import portProject from './stageAchievements/portProject.vue';
</script>
<style scoped>
......
src/main.ts
import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import './style.css'
import App from './App.vue'
createApp(App).mount('#app')
const app = createApp(App)
app.use(ElementPlus)
app.mount('#app')
src/stageAchievements/portProject.vue 0 → 100644
<template>
<div id="diagramDiv" style="width: 100%; height: 900px; background-color: #DAE4E4;"></div>
<div>
<button @click="exportData">导出数据</button>
</div>
<el-dialog v-model="dialogVisible" title="给节点添加端口">
<div>
<button @click="addPort('top')">添加上端口</button>
<button @click="addPort('left')">添加左端口</button>
<button @click="addPort('right')">添加右端口</button>
<button @click="addPort('bottom')">添加下端口</button>
</div>
</el-dialog>
</template>
<script setup lang="ts">
import { onMounted, ref } from 'vue';
import go from 'gojs';
const $ = go.GraphObject.make;
var myDiagram: any;
const dialogVisible = ref(false);
function initDiagram() {
myDiagram = $(go.Diagram, "diagramDiv", {
contentAlignment: go.Spot.Center,
'undoManager.isEnabled': true
});
myDiagram.nodeTemplate =
$(go.Node, "Table",
new go.Binding("location", "loc"),
$(go.Panel,
'Auto',
{
// 设置在表格中的行列位置
row: 1,
column: 1,
stretch: go.Stretch.Fill,
},
$(go.Shape, 'Rectangle',
{
width: 60,
height: 60,
fill: 'lightgray',
stroke: 'gray',
strokeWidth: 0.5
}
),
$(go.TextBlock,
{
margin: 10,
textAlign: 'center',
font: 'bold 14px Segoe UI,sans-serif',
stroke: '#484848',
editable: true
},
new go.Binding('text', 'text').makeTwoWay()
),
{
doubleClick : function(){ // 在节点中鼠标左键双击打开弹出框
dialogVisible.value = true;
}
}
),
// 上端点
$(go.Panel, 'Horizontal', new go.Binding('itemArray', 'topArray'), { // 上端口进行水平布局
row: 0,
column: 1,
itemTemplate: $(go.Panel,
{
_side: 'top',
fromSpot: go.Spot.Top, // 从端口顶部发出连接
toSpot: go.Spot.Top, // 从端口顶部接收连接
fromLinkable: true,
toLinkable: true,
cursor: 'pointer', // 鼠标在端口悬停时，改变光标
contextMenu:
$("ContextMenu",
$("ContextMenuButton",
$(go.TextBlock, "Remove Port"),
{
click: (e: any, obj: any) => removePort(obj.part.adornedObject),
"ButtonBorder.fill": "white",
"_buttonFillOver": "skyblue"
}
)
),
},
new go.Binding('portId', 'portId'),
$(go.Shape,
'Rectangle',
{
stroke: null,
strokeWidth: 0,
desiredSize: new go.Size(8, 8),
margin: new go.Margin(0, 1) // 设置端口的左右间距
},
new go.Binding('ports')
)
),
}),
// 左端点
$(go.Panel, 'Vertical', new go.Binding('itemArray', 'leftArray'), {
row: 1,
column: 0,
itemTemplate: $(go.Panel,
{
_side: 'left',
fromSpot: go.Spot.Left,
toSpot: go.Spot.Left,
fromLinkable: true,
toLinkable: true,
cursor: 'pointer',
contextMenu:
$("ContextMenu",
$("ContextMenuButton",
$(go.TextBlock, "Remove Port"),
{
click: (e: any, obj: any) => removePort(obj.part.adornedObject),
"ButtonBorder.fill": "white",
"_buttonFillOver": "skyblue"
}
)
),
},
new go.Binding('portId', 'portId'),
$(go.Shape,
'Rectangle',
{
stroke: null,
strokeWidth: 0,
desiredSize: new go.Size(8, 8),
margin: new go.Margin(1, 0), // 各个端口的上下间距
},
new go.Binding('ports')
)
),
}),
// 右端点
$(go.Panel, 'Vertical', new go.Binding('itemArray', 'rightArray'), {
row: 1,
column: 2,
itemTemplate: $(go.Panel,
{
_side: 'right',
fromSpot: go.Spot.Right,
toSpot: go.Spot.Right,
fromLinkable: true,
toLinkable: true,
cursor: 'pointer',
contextMenu:
$("ContextMenu",
$("ContextMenuButton",
$(go.TextBlock, "Remove Port"),
{
click: (e: any, obj: any) => removePort(obj.part.adornedObject),
"ButtonBorder.fill": "white",
"_buttonFillOver": "skyblue"
}
)
),
},
new go.Binding('portId', 'portId'),
$(go.Shape,
'Rectangle',
{
stroke: null,
strokeWidth: 0,
desiredSize: new go.Size(8, 8),
margin: new go.Margin(1, 0),
},
new go.Binding('ports')
)
),
}),
// 下端点
$(go.Panel, 'Horizontal', new go.Binding('itemArray', 'bottomArray'), {
row: 2,
column: 1,
itemTemplate: $(go.Panel,
{
_side: 'bottom',
fromSpot: go.Spot.Bottom,
toSpot: go.Spot.Bottom,
fromLinkable: true,
toLinkable: true,
cursor: 'pointer',
contextMenu:
$("ContextMenu",
$("ContextMenuButton",
$(go.TextBlock, "Remove Port"),
{
click: (e: any, obj: any) => removePort(obj.part.adornedObject),
"ButtonBorder.fill": "white",
"_buttonFillOver": "skyblue"
}
)
),
},
new go.Binding('portId', 'portId'),
$(go.Shape,
'Rectangle',
{
stroke: null,
strokeWidth: 0,
desiredSize: new go.Size(8, 8),
margin: new go.Margin(0, 1),
},
new go.Binding('ports')
)
),
}),
{
contextMenu: // 为每个节点定义上下文菜单
$("ContextMenu",
$("ContextMenuButton",
$(go.TextBlock, "Add Top Port"),
{
click: () => addPort('top'),
"ButtonBorder.fill": "white",
"_buttonFillOver": "skyblue",
}
),
$("ContextMenuButton",
$(go.TextBlock, "Add Left Port"),
{
click: () => addPort('left'),
"ButtonBorder.fill": "white",
"_buttonFillOver": "skyblue",
}
),
$("ContextMenuButton",
$(go.TextBlock, "Add Right Port"),
{
click: () => addPort('right'),
"ButtonBorder.fill": "white",
"_buttonFillOver": "skyblue",
}
),
$("ContextMenuButton",
$(go.TextBlock, "Add Bottom Port"),
{
click: () => addPort('bottom'),
"ButtonBorder.fill": "white",
"_buttonFillOver": "skyblue",
}
),
)
}
);
myDiagram.linkTemplate =
$(go.Link,
{
routing:go.Routing.AvoidsNodes,
curve: go.Curve.JumpGap,
corner: 5, // 设置垂直连续垂直处的圆角
selectionAdorned: true,
fromPortId: "from",
toPortId: "to",
relinkableTo: true, // 允许重新连接
relinkableFrom: true, // 允许重新链接
},
$(go.Shape, // 设置链接线样式
{
stroke: "black",
strokeWidth: 1.5
},
),
$(go.Shape, // 设置箭头样式
{
toArrow: "Triangle",
fill: "black"
},
)
);
// 画布自定义右键菜单，包括撤销和重做
myDiagram.contextMenu =
$("ContextMenu",
// 撤销按钮
$("ContextMenuButton",
$(go.TextBlock, "Undo"),
{
click: function(e) { e.diagram.commandHandler.undo(); },
"ButtonBorder.fill": "white",
"_buttonFillOver": "skyblue",
},
new go.Binding("visible", "", function(o) { // 根据是否有可撤销的操作来决定是否可见
return o.diagram.commandHandler.canUndo(); // 可以撤销返回true，否则返回false
}).ofObject()),
// 重做按钮
$("ContextMenuButton",
$(go.TextBlock, "Redo"),
{
click: function(e) { e.diagram.commandHandler.redo(); },
"ButtonBorder.fill": "white",
"_buttonFillOver": "skyblue",
},
new go.Binding("visible", "", function(o) { // 根据是否有可重做的操作来决定是否可见
return o.diagram.commandHandler.canRedo(); // 可以重做返回true，否则返回false
}).ofObject())
);
// 鼠标左键双击画布添加新节点
myDiagram.toolManager.clickCreatingTool.archetypeNodeData = {
text: "new",
leftArray: [],
rightArray: [],
topArray: [],
bottomArray: [],
};
var nodeDataArray = [
{ key: 1, text: "One", loc: new go.Point(0, 20), topArray: [{portId: "top0"}], leftArray: [{portId: "left0"}], rightArray: [{portId: "right0"}, {portId: "right1"}] ,bottomArray: [{portId: "bottom0"}]},
{ key: 2, text: "Two" , loc: new go.Point(200, -20), topArray: [{portId: "top0"}], leftArray: [{portId: "left0"}, {portId: "left1"}, {portId: "left2"}], bottomArray: [{portId: "bottom0"}, {portId: "bottom1"}, {portId: "bottom2"}]},
{ key: 3, text: "Three", loc: new go.Point(250, 150), topArray: [{portId: "top0"}], leftArray: [{portId: "left0"}, {portId: "left1"}, {portId: "left2"}], bottomArray: [{portId: "bottom0"}]},
{ key: 4, text: "Four", loc: new go.Point(20, 170), topArray: [{portId: "top0"}], leftArray: [{portId: "left0"}], rightArray: [{portId: "right0"}, {portId: "right1"}], bottomArray: [{portId: "bottom0"}] },
];
var linkDataArray = [
{ from: 1, fromPort: "right0", to: 2, toPort: "left1" },
{ from: 1, fromPort: "right1", to: 2, toPort: "left2" },
{ from: 4, fromPort: "right1", to: 3, toPort: "left2" },
{ from: 4, fromPort: "right0", to: 3, toPort: "left0" },
{ from: 3, fromPort: "top0", to: 2, toPort: "bottom1" },
{ from: 4, fromPort: "top0", to: 2, toPort: "bottom0" },
{ from: 4, fromPort: "top0", to: 2, toPort: "bottom0" },
];
myDiagram.model =
$(go.GraphLinksModel,
{
copiesArrays: true,
copiesArrayObjects: true,
linkFromPortIdProperty: "fromPort",
linkToPortIdProperty: "toPort",
nodeDataArray: nodeDataArray,
linkDataArray: linkDataArray
}
);
}
// 添加端口
function addPort(side: string) {
myDiagram.startTransaction('addPort');
myDiagram.selection.each((node: any) => {
// 跳过任何被选定的连接
if (!(node instanceof go.Node)) return;
// 计算下一个可用的索引
let i = 0;
// 从小到大遍历索引i，获取一个可以使用的索引（没有被占用）
while (node.findPort(side + i.toString()) !== node) i++;
// 为新端口设置name，传入的side字符串加上可用的索引
const name = side + i.toString();
// 获取要修改的端口数据的数组，索引的属性为side传入字符串的端口数组
const arr = node.data[side + 'Array'];
if (arr) {
// 创建一个新的端口数据对象
const newportdata = {
portId: name,
};
// 其添加到端口数据数组中
myDiagram.model.insertArrayItem(arr, -1, newportdata);
}
});
myDiagram.commitTransaction('addPort');
}
// 删除端口
function removePort(port: any) {
myDiagram.startTransaction('removePort');
// console.log(port.portId); // 如top0
const pid = port.portId;
const arr = port.panel.itemArray;
for (let i = 0; i < arr.length; i++) {
if (arr[i].portId === pid) {
myDiagram.model.removeArrayItem(arr, i); // 删除数组中的项
break;
}
}
myDiagram.commitTransaction('removePort');
}
// 导出JSON数据
function exportData() {
if (myDiagram) {
console.log(myDiagram.model.toJson());
}
}
onMounted(() => {
initDiagram();
})
</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