Skip to content

G
gojs-project
Commit d5b2cc75 by jlc
Options

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

parent 172686cc
Showing with 153 additions and 1 deletions
package.json
...@@ -9,6 +9,7 @@ ...@@ -9,6 +9,7 @@
"preview": "vite preview" "preview": "vite preview"
}, },
"dependencies": { "dependencies": {
"element-plus": "^2.7.5",
"uuid": "^10.0.0", "uuid": "^10.0.0",
"vue": "^3.4.21" "vue": "^3.4.21"
}, },
......
src/main.ts
import { createApp } from 'vue' import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import './style.css' import './style.css'
import App from './App.vue' 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 @@ ...@@ -14,6 +14,12 @@
<div> <div>
<button @click="exportData">导出数据</button> <button @click="exportData">导出数据</button>
</div> </div>
<el-dialog v-model="dialogVisible" title="给节点添加端口">
<div>
<button @click="addPort()">添加端口</button>
</div>
</el-dialog>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
...@@ -28,6 +34,7 @@ import { RotateMultipleTool } from './extensions/RotateMultipleTool'; ...@@ -28,6 +34,7 @@ import { RotateMultipleTool } from './extensions/RotateMultipleTool';
const $ = go.GraphObject.make; const $ = go.GraphObject.make;
var myDiagram: any; var myDiagram: any;
const dialogVisible = ref(false)
function initDiagram() { function initDiagram() {
myDiagram = $(go.Diagram, "diagramDiv", { myDiagram = $(go.Diagram, "diagramDiv", {
...@@ -76,6 +83,39 @@ function initDiagram() { ...@@ -76,6 +83,39 @@ function initDiagram() {
}, },
new go.Binding('text', 'key').makeTwoWay(), 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", $(go.Shape, "Rectangle",
{ {
width: 6, width: 6,
...@@ -158,6 +198,39 @@ function initDiagram() { ...@@ -158,6 +198,39 @@ function initDiagram() {
}, },
new go.Binding('text', 'key').makeTwoWay(), 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", $(go.Shape, "Rectangle",
{ {
width: 6, width: 6,
...@@ -215,6 +288,73 @@ function initDiagram() { ...@@ -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 = [ const nodeDataArray = [
{ key: "add1", color: "lightyellow", loc: new go.Point(-150, 200) }, { key: "add1", color: "lightyellow", loc: new go.Point(-150, 200) },
{ key: "add2", color: "lightblue", loc: new go.Point(100, 50), category: "zhaChi" }, { key: "add2", color: "lightblue", loc: new go.Point(100, 50), category: "zhaChi" },
...@@ -285,6 +425,13 @@ function drop(event: any) { ...@@ -285,6 +425,13 @@ function drop(event: any) {
myDiagram.commitTransaction('new node'); myDiagram.commitTransaction('new node');
} }
// 添加端口
function addPort() {
}
onMounted(() => { onMounted(() => {
initDiagram() 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