Skip to content

G
gojs-project
Commit d5b2cc75 by jlc
Options

update：右键菜单和悬浮信息的添加

parent 172686cc
Showing with 369 additions and 1 deletions
package-lock.json
......@@ -8,6 +8,7 @@
"name": "vue3-ts-gojs",
"version": "0.0.0",
"dependencies": {
"element-plus": "^2.7.5",
"uuid": "^10.0.0",
"vue": "^3.4.21"
},
......@@ -32,6 +33,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",
......@@ -400,11 +417,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",
......@@ -628,6 +673,19 @@
"@types/sizzle": "*"
}
},
"node_modules/@types/lodash": {
"version": "4.17.5",
"resolved": "https://registry.npmmirror.com/@types/lodash/-/lodash-4.17.5.tgz",
"integrity": "sha512-MBIOHVZqVqgfro1euRDWX7OO0fBVUUMrN6Pwm8LQsz8cWhEpihlvR70ENj3f40j58TNxZaWv2ndSkInykNBBJw=="
},
"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",
......@@ -640,6 +698,11 @@
"integrity": "sha512-7gqG38EyHgyP1S+7+xomFtL+ZNHcKv6DwNaCZmJmo1vgMugyF3TCnXVg4t1uk89mLNwnLtnY3TpOpCOyp1/xHQ==",
"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",
......@@ -794,6 +857,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",
......@@ -820,12 +971,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.5",
"resolved": "https://registry.npmmirror.com/element-plus/-/element-plus-2.7.5.tgz",
"integrity": "sha512-e4oqhfRGBpdblgsjEBK+tA2+fg1H1KZ2Qinty1SaJl0X49FrMLK0lpXQNheWyBqI4V/pyjVOF9sRjz2hfyoctw==",
"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",
......@@ -875,6 +1056,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",
......@@ -909,6 +1095,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",
......@@ -917,6 +1123,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",
......@@ -955,6 +1166,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.5",
"uuid": "^10.0.0",
"vue": "^3.4.21"
},
......
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/imageNode.vue
......@@ -14,6 +14,12 @@
<div>
<button @click="exportData">导出数据</button>
</div>
<el-dialog v-model="dialogVisible" title="给节点添加端口">
<div>
<button @click="addPort()">添加端口</button>
</div>
</el-dialog>
</template>
<script setup lang="ts">
......@@ -28,6 +34,7 @@ import { RotateMultipleTool } from './extensions/RotateMultipleTool';
const $ = go.GraphObject.make;
var myDiagram: any;
const dialogVisible = ref(false)
function initDiagram() {
myDiagram = $(go.Diagram, "diagramDiv", {
......@@ -76,6 +83,39 @@ function initDiagram() {
},
new go.Binding('text', 'key').makeTwoWay(),
),
{
toolTip: // 定义节点工具提示
$("ToolTip",
$(go.TextBlock, { margin: 4 },
new go.Binding("text", "key")) // 绑定节点的颜色信息
)
},
{
contextMenu: // 为每个节点定义上下文菜单
$("ContextMenu",
$("ContextMenuButton",
$(go.TextBlock, "Cut"),
{
click: (e) => e.diagram.commandHandler.cutSelection(),
"ButtonBorder.fill": "white",
"_buttonFillOver": "skyblue",
}
),
$("ContextMenuButton",
$(go.TextBlock, "Copy"),
{
click: (e) => e.diagram.commandHandler.copySelection(),
"ButtonBorder.fill": "white",
"_buttonFillOver": "skyblue",
}
)
)
},
{
doubleClick : function(){ // 在节点中鼠标左键双击打开添加节点端口弹出框
dialogVisible.value = true;
}
},
$(go.Shape, "Rectangle",
{
width: 6,
......@@ -158,6 +198,39 @@ function initDiagram() {
},
new go.Binding('text', 'key').makeTwoWay(),
),
{
toolTip: // 定义节点工具提示
$("ToolTip",
$(go.TextBlock, { margin: 4 },
new go.Binding("text", "key")) // 绑定节点的颜色信息
)
},
{
contextMenu: // 为每个节点定义上下文菜单
$("ContextMenu",
$("ContextMenuButton",
$(go.TextBlock, "Cut"),
{
click: (e) => e.diagram.commandHandler.cutSelection(),
"ButtonBorder.fill": "white",
"_buttonFillOver": "skyblue",
}
),
$("ContextMenuButton",
$(go.TextBlock, "Copy"),
{
click: (e) => e.diagram.commandHandler.copySelection(),
"ButtonBorder.fill": "white",
"_buttonFillOver": "skyblue",
}
)
)
},
{
doubleClick : function(){ // 在节点中鼠标左键双击打开添加节点端口弹出框
dialogVisible.value = true;
}
},
$(go.Shape, "Rectangle",
{
width: 6,
......@@ -215,6 +288,73 @@ function initDiagram() {
)
);
// 画布提示工具函数
function diagramInfo(model: any) {
return "Model:\n" + model.nodeDataArray.length + " nodes, " + model.linkDataArray.length + " links";
}
// 当未覆盖任何节点时，提供图表背景的工具提示
myDiagram.toolTip =
$("ToolTip",
$(go.TextBlock, { margin: 4 },
new go.Binding("text", "", diagramInfo)) // 绑定函数转换器显示相关的信息
);
myDiagram.contextMenu =
$("ContextMenu",
// 创建新节点上下文按钮
$("ContextMenuButton",
$(go.TextBlock, "New Node"),
{
click: function(e) {
e.diagram.commit(function(d) {
var data = {};
d.model.addNodeData(data);
var part = d.findPartForData(data);
// 在ContextMenuTool中设置保存mouseDownPoint的位置
// 节点创建的位置就是鼠标右键的位置
if(part){
part.location = d.toolManager.contextMenuTool.mouseDownPoint;
}
}, 'new node');
},
"ButtonBorder.fill": "white",
"_buttonFillOver": "skyblue",
}
),
$("ContextMenuButton",
$(go.TextBlock, "Paste"),
{
click: (e) => e.diagram.commandHandler.pasteSelection(e.diagram.toolManager.contextMenuTool.mouseDownPoint),
"ButtonBorder.fill": "white",
"_buttonFillOver": "skyblue",
}
),
// 撤销按钮
$("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())
);
const nodeDataArray = [
{ key: "add1", color: "lightyellow", loc: new go.Point(-150, 200) },
{ key: "add2", color: "lightblue", loc: new go.Point(100, 50), category: "zhaChi" },
......@@ -285,6 +425,13 @@ function drop(event: any) {
myDiagram.commitTransaction('new node');
}
// 添加端口
function addPort() {
}
onMounted(() => {
initDiagram()
});
......
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