项目需要用到GoJs实现可视化，先说一下需求吧
1、实现可拖拽新建节点
2、点击节点可修改保存节点信息
3、可以手动新建节点之间的连线
4、点击连线可修改保存连线信息
5、节点鼠标右键菜单
网上的都是零零碎碎的，查了很多文档然后终于实现了上述的所有功能...
废话不多说，直接上代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>dsDemo</title>
<meta name="description" content="A workflow diagram showing navigation between web pages, with an editable list of comments and to-dos." />
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Copyright 1998-2019 by Northwoods Software Corporation. -->
</head>
<body>
<div id="container">
<div style="width: 100%; display: flex; justify-content: space-between">
<div id="myPaletteDiv" style="width: 150px; margin-right: 2px; background-color: whitesmoke; border: solid 1px black"></div>
<div id="myDiagramDiv" style="flex-grow: 1; height: 600px; border: solid 1px black"></div>
<div id="nodeDetail" style="width:200px; margin-right: 2px; background-color: whitesmoke; border: solid 1px black;padding:10px">
<p style="text-align: left">节点名称：<input type="text" v-model="selectNode.name"/></p>
<p style="text-align: left">节点描述：</p>
<textarea v-model="selectNode.description" style="width:98%;height:200px"></textarea>
<button id="SaveButton" @click="saveNode">保存</button>
</div>
<div id="linkDetail" style="width:200px; margin-right: 2px; background-color: whitesmoke; border: solid 1px black;padding:10px;display:none;">
<p style="text-align: left">连线名称：<input type="text" v-model="selectLink.name"/></p>
<p style="text-align: left">连线描述：</p>
<textarea v-model="selectLink.description" style="width:98%;height:200px"></textarea>
<button id="SaveButton" @click="saveLink">保存</button>
</div>
</div>
</div>
</body>
<script src="./go.js"></script>
<script src="./vue.min.js"></script>
<script id="code">
new Vue({
el:'#container',
data:{
selectNode:{
name:'',
description:''
},
selectLink:{
name:'',
description:''
}
},
methods:{
saveNode(){ //保存节点信息
this.myDiagram.model.updateTargetBindings(this.selectNode);
},
saveLink(){
this.myDiagram.model.updateTargetBindings(this.selectLink);
}
},
mounted(){
var mySelf = this;
const MAKE = go.GraphObject.make;
mySelf.myDiagram = MAKE(go.Diagram, "myDiagramDiv",{
"draggingTool.dragsLink": true,
"undoManager.isEnabled": true ,// 支持 Ctrl-Z 和 Ctrl-Y 操作
"toolManager.hoverDelay": 100,//tooltip提示显示延时
"toolManager.toolTipDuration": 10000,//tooltip持续显示时间
//isReadOnly:true,//只读
// "grid.visible":true,//显示网格
allowMove:true,//允许拖动
// allowDragOut:true,
allowDelete:false,
allowCopy:false,
allowClipboard:false,
"toolManager.mouseWheelBehavior": go.ToolManager.WheelZoom,//有鼠标滚轮事件放大和缩小，而不是向上和向下滚动
});
var that=this;
mySelf.myDiagram.addDiagramListener("ObjectSingleClicked",function (e) {
if(e.subject.part.data.key == undefined){
that.selectLink=e.subject.part.data;
document.getElementById("nodeDetail").style.display="none";
document.getElementById("linkDetail").style.display="block";
}else{
that.selectNode=e.subject.part.data;
document.getElementById("nodeDetail").style.display="block";
document.getElementById("linkDetail").style.display="none";
}
});
mySelf.myDiagram.addModelChangedListener(function (evt) {
if (!evt.isTransactionFinished) return;
var txn = evt.object;
if (txn === null) return;
txn.changes.each(function(e) {
if (e.modelChange !== "nodeDataArray") return;
if (e.change === go.ChangedEvent.Insert) {
that.selectNode=e.newValue;
}
});
});
// 定义个简单的 Node 模板
mySelf.myDiagram.nodeTemplate =
MAKE(go.Node, "Auto",
new go.Binding("location", "loc", go.Point.parse),
MAKE(go.Shape, "RoundedRectangle",
{
fill: "#fff",stroke: '#289de9',strokeWidth:1
}),
MAKE(go.TextBlock, "new node",
{
margin: 8 ,
font: "bold 14px Helvetica Neue",
},
new go.Binding("text", "name")));
function makePort(name, align, spot, output, input) {
var horizontal = align.equals(go.Spot.Top) || align.equals(go.Spot.Bottom);
return MAKE(go.Shape,
{
fill: "transparent", // changed to a color in the mouseEnter event handler
strokeWidth: 0, // no stroke
width: horizontal ? NaN : 8, // if not stretching horizontally, just 8 wide
height: !horizontal ? NaN : 8, // if not stretching vertically, just 8 tall
alignment: align, // align the port on the main Shape
stretch: (horizontal ? go.GraphObject.Horizontal : go.GraphObject.Vertical),
portId: name, // declare this object to be a "port"
fromSpot: spot, // declare where links may connect at this port
fromLinkable: output, // declare whether the user may draw links from here
toSpot: spot, // declare where links may connect at this port
toLinkable: input, // declare whether the user may draw links to here
cursor: "pointer", // show a different cursor to indicate potential link point
mouseEnter: function(e, port) { // the PORT argument will be this Shape
if (!e.diagram.isReadOnly) port.fill = "rgba(255,0,255,0.5)";
},
mouseLeave: function(e, port) {
port.fill = "transparent";
}
});
}
function textStyle() {
return {
font: "bold 11pt Helvetica, Arial, sans-serif",
stroke: "whitesmoke"
}
}
mySelf.myDiagram.nodeTemplateMap.add("", // the default category
MAKE(go.Node, "Auto",
{
contextMenu: // define a context menu for each node
MAKE("ContextMenu", // that has one button
MAKE("ContextMenuButton",
MAKE(go.TextBlock, "Undo"),
{
click: function(e, obj) {
console.log(1)
}
},
))
},
MAKE(go.Panel, "Auto",
MAKE(go.Shape, "RoundedRectangle",
{
fill: "#fff",stroke: '#289de9',strokeWidth:1
}),
MAKE(go.TextBlock, "new node",
{
margin: 8,
font: "bold 14px Helvetica Neue",
},
new go.Binding("text","name").makeTwoWay())
),
// four named ports, one on each side:
makePort("T", go.Spot.Top, go.Spot.TopSide, false, true),
makePort("L", go.Spot.Left, go.Spot.LeftSide, true, true),
makePort("R", go.Spot.Right, go.Spot.RightSide, true, true),
makePort("B", go.Spot.Bottom, go.Spot.BottomSide, true, false)
));
//定义连线
var linkSelectionAdornmentTemplate =
MAKE(go.Adornment, "Link",
MAKE(go.Shape,
// isPanelMain declares that this Shape shares the Link.geometry
{ isPanelMain: true, fill: null, stroke: "deepskyblue", strokeWidth: 0 }) // use selection object's strokeWidth
);
mySelf.myDiagram.linkTemplate =
MAKE("Link",
MAKE("Shape",
{ strokeWidth: 2,stroke: '#289de9'}),
MAKE("Shape",
{ toArrow: "Standard", fill:"#289de9",stroke:null}),
MAKE(go.TextBlock, "new link",
{
margin: 8,
font: "bold 14px Helvetica Neue",
segmentOffset: new go.Point(0, -10)
},
new go.Binding("text","name").makeTwoWay()),
);
var palette =
MAKE(go.Palette, "myPaletteDiv", // create a new Palette in the HTML DIV element
{
// share the template map with the Palette
nodeTemplateMap: mySelf.myDiagram.nodeTemplateMap,
autoScale: go.Diagram.Uniform // everything always fits in viewport
});
palette.model.nodeDataArray = [
{}, // default node
];
let myModel = MAKE(go.GraphLinksModel);
myModel.nodeDataArray =
[
// {key:"1", name: "a",age:12,description:'我是a节点'},
//{key:"2", parent:"1", name: "b",age:13 ,description:'我是b节点'},
//{key:"3", parent:"1", name: "c",age:13 ,description:'我是b节点'},
];
myModel.linkDataArray = [
//{from:"1",to:"2"},
//{from:"1",to:"3"},
// {from:"1",to:"4"},
// {from:"1",to:"5"},
];
mySelf.myDiagram.model = myModel;
}
})
</script>
</html>
关于GoJs的方法
（Ps:这里只写我觉得比较常用的，其他的请自行查阅其他文档，谢谢！）
1.更新数据
this.myDiagram.model.updateTargetBindings(this.selectNode);
参数是你当前编辑的数据，这里可以是节点信息也可以是连线信息
2.mySelf.myDiagram.addDiagramListener("ObjectSingleClicked",function (e) {
console.log(e.subject.part.data);
});
监听点击事件，可以是点击节点也可以是连线，如果要区分，可以判断获取的数据里面是否有key属性，节点有key属性，连线有from,to属性。
if（e.subject.part.data.key == undefined){
.......
}
3.监听新拖拽到画布的节点
mySelf.myDiagram.addModelChangedListener(function (evt) {
if (!evt.isTransactionFinished) return;
var txn = evt.object;
if (txn === null) return;
txn.changes.each(function(e) {
if (e.modelChange !== "nodeDataArray") return;
if (e.change === go.ChangedEvent.Insert) {
that.selectNode=e.newValue;
}
});
});
4、通过key值去查找节点
mySelf.myDiagram.findNodeForKey(key).data
这里的key值是节点的key值
扫一扫
1079
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
