关于GoJs的总结及多功能实例项⽬需要⽤到GoJs实现可视化，先说⼀下需求吧
1、实现可拖拽新建节点
2、点击节点可修改保存节点信息
3、可以⼿动新建节点之间的连线
4、点击连线可修改保存连线信息
5、节点⿏标右键菜单
⽹上的都是零零碎碎的，查了很多⽂档然后终于实现了上述的所有功能...
废话不多说，直接上代码：
<!DOCTYPE html>
<html>
<head>
<meta chart="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 >
<div id="myPaletteDiv" > </div>
<div id="myDiagramDiv" ></div>
<div id="nodeDetail" >
<p >节点名称：<input type="text" v-model="lectNode.name"/></p>
<p >节点描述：</p>
<textarea v-model="lectNode.description" ></textarea>
<button id="SaveButton" @click="saveNode">保存</button>
</div>
<div id="linkDetail" >
<p >连线名称：<input type="text" v-model="lectLink.name"/></p>
<p >连线描述：</p>
<textarea v-model="lectLink.description" ></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:{
lectNode:{
name:'',
description:''
},
lectLink:{
name:'',
description:''
}
},
methods:{
saveNode(){ //保存节点信息
},
saveLink(){
}
},
mounted(){
var mySelf = this;
const MAKE = go.GraphObject.make;
"draggingTool.dragsLink": true,
"undoManager.isEnabled": true ,// ⽀持 Ctrl-Z 和 Ctrl-Y 操作
"toolManager.hoverDelay": 100,//tooltip提⽰显⽰延时
"lTipDuration": 10000,//tooltip持续显⽰时间
//isReadOnly:true,//只读
// "grid.visible":true,//显⽰⽹格
allowMove:true,//允许拖动
// allowDragOut:true,
allowDelete:fal,
allowCopy:fal,
allowClipboard:fal,
"uWheelBehavior": go.ToolManager.WheelZoom,//有⿏标滚轮事件放⼤和缩⼩，⽽不是向上和向下滚动
});
var that=this;
if(e.subject.part.data.key == undefined){
英语时态练习that.lectLink=e.subject.part.data;
}el{
that.lectNode=e.subject.part.data;
}
});
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.Inrt) {
that.wValue;
好看的qq动漫头像}
});
});
// 定义个简单的 Node 模板
MAKE(go.Node, "Auto",
new go.Binding("location", "loc", go.Point.par),
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) {
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 mouEnter 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 ur may draw links from here toSpot: spot, // declare where links may connect at this port
toLinkable: input, // declare whether the ur may draw links to here
cursor: "pointer", // show a different cursor to indicate potential link point mouEnter: function(e, port) { // the PORT argument will be this Shape
if (!e.diagram.isReadOnly) port.fill = "rgba(255,0,255,0.5)";
},
mouLeave: function(e, port) {
port.fill = "transparent";
}
});
}
function textStyle() {
return {
font: "bold 11pt Helvetica, Arial, sans-rif",
stroke: "whitesmoke"
}
}
电脑刻录光盘
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())
new go.Binding("text","name").makeTwoWay())五项要求
)
,
// four named ports, one on each side:
makePort("T", go.Spot.Top, go.Spot.TopSide, fal, 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, fal)
));
//定义连线
var linkSelectionAdornmentTemplate =
MAKE(go.Adornment, "Link",
MAKE(go.Shape,
/
/ isPanelMain declares that this Shape shares ry
{ isPanelMain: true, fill: null, stroke: "deepskyblue", strokeWidth: 0 }) // u lection object's strokeWidth );
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",
gmentOfft: 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: deTemplateMap,
autoScale: go.Diagram.Uniform // everything always fits in viewport
});
{}, // default node
];
