文章目录
前言
使用GOJS在vue项目中实现拖拉拽的图形化需求，记录了常用功能的实现，需要完整使用的可以去官方文档查看。
1. Gojs的安装
首先通过npm命令添加go.js插件
npm install gojs --save
2. 在vue项目中的引用
使用时需要在html用dom容器来挂载渲染图像，这里我通常使用div元素
<template>
<div id="wrap">
<div id="chart-wrap">
<div id="myPalette"></div>
<div id="myDiagramDiv"></div>
</div>
<div>
<button type="button" id="SaveButton" @click="save()" class="save-Botton">SAVE</button>
</div>
</div>
</template>
然后看心情在全局main.js文件或在组件中引用
3. js导入
import go from 'gojs' //在export default前
const $ = go.GraphObject.make;
4. 画布初始化
在methods方法中创建init()函数
init() {
var mySelf = this;
mySelf.myDiagram =
$(go.Diagram, "myDiagramDiv",//为DIV.HTML元素创建一个画布
{
//设置画布配置
});
}
画布基础配置
isReadOnly: true, // 只读，无法编辑操作
allowMove: true, // 允许拖动画板
allowDragOut:true, // 允许拖拽节点
allowDelete: true, // 允许删除节点
allowCopy: true, // 允许复制节点
allowClipboard: true, // 允许粘贴节点
allowLink: true,//是否可以绘制新链接。
allowRelink: true,//是否可以重新连接现有链接
initialContentAlignment: go.Spot.Center, // 居中显示
initialAutoScale: go.Diagram.Uniform, // 缩放以使所有内容都适合
"grid.visible": true, //显示网格
"undoManager.isEnabled": true, // 支持 Ctrl-Z 和 Ctrl-Y 操作
"toolManager.hoverDelay": 100, //tooltip提示显示延时
"toolManager.toolTipDuration": 10000, //tooltip持续显示时间
"toolManager.mouseWheelBehavior": go.ToolManager.WheelZoom, //有鼠标滚轮事件放大和缩小，而不是向上和向下滚动
"clickCreatingTool.archetypeNodeData": { text: "node258", color: "white" },//允许在后台双击以创建新node258节点
主画布layout配置
本文配置的是雪花关系图，代码段同样放在init()函数中
class DemoForceDirectedLayout extends go.ForceDirectedLayout {
makeNetwork(coll) {
const net = super.makeNetwork(coll);
net.vertexes.each(vertex => {
const node = vertex.node;
if (node !== null) vertex.isFixed = node.isSelected;
});
return net;
}
}
然后在画布中配置layout，这样不会出现新节点产生时与原节点重合的情况
layout: new DemoForceDirectedLayout()
右侧画布配置
initPalette() 放在 methods中，在init()函数中用 mySelf.initPalette();即可显示。
initPalette() {
var mySelf = this;
window.myPalette = $(
go.Palette,
"myPalette", // 必须命名或引用DIV.HTML元素
{
scrollsPageOnFocus: false,
nodeTemplateMap: mySelf.myDiagram.nodeTemplateMap, // 共享myDiagram使用的模板
model: new go.GraphLinksModel([
// 指定调色板的内容
{
category: "node258",
text: "规则"
},
{
category: "node258",
text: "计划1"
},
{
category: "node258",
text: "执行2"
}
])
}
);
}
5. 连接线的配置
mySelf.myDiagram.linkTemplate = $(go.Link, {
selectable: true, //连接线是否可选
relinkableFrom: true,//出发点是否可以改变
relinkableTo: true,//目标点是否可以改变
},new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),//记录loc
$(go.Shape, {
strokeWidth: 2,//节点连接线宽度
stroke: "#F60"//颜色
}),
$(go.Shape, {
toArrow: "Standard",
fill: "red",//箭头填充色
stroke: "blue"//外边框颜色
})//箭头
);
6. 节点的配置
mySelf.myDiagram.nodeTemplateMap.add(//创建名为node258的节点
"node258",
$(go.Node,
"auto",
{//节点配置
movable:true,//是否可拖动
deletable:true,//是否可删除
selectable:true, //是否可选择
selectionAdorned:false, //显示选中边框
// reshapable:true, // 重塑(改变shape形状边界时使用，将影响节点大小)
// resizable: true, // 可调整大小的(手动调整节点大小时，节点内容显示区域时使用)
},new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
$(go.Panel, //表明需要创建一个panel面板对象//声明创建一个新的面板对象,自定义方式可参考mySelf.myDiagram.nodeTemplate
"Auto", //页面布局为自动
$(go.Shape,//声明构建一个圆形
"Circle", {
fill: "#44CCFF",//内填充色
cursor: "pointer",//指针
stroke: null,//外框颜色null
portId: "",
fromLinkable: true,
fromLinkableSelfNode: false,
fromLinkableDuplicates: true,
toLinkable: true,
toLinkableSelfNode: false,
toLinkableDuplicates: false,
},
new go.Binding("figure", "figure") //声明并创建一个新的图形
),
$(go.TextBlock, {//声明一个可编辑文本域
font: "12pt Helvetica, Arial, sans-serif",
width: 50,
maxSize: new go.Size(360, NaN),
wrap: go.TextBlock.WrapFit, //文本域换行
editable: true, //是否可编辑
margin: 12,
},
new go.Binding("text").makeTwoWay()
),
),
{// 悬浮提示
toolTip:
$("ToolTip",
$(go.TextBlock, { margin: 4 },
new go.Binding("text", "text"))
),
}
)
);
7. 节点数据
第一种
this.myDiagram.model.nodeDataArray = [] //节点数据 格式为[{ key: "Alpha", color: "lightblue", loc: "400 0" }]
this.myDiagram.model.linkDataArray = [] //连线数据 格式为[{ from: "Beta", to: "Alpha" }]
第二种
或者在data中
data() {
return {
nodeData: [],
linkData: [],
}
}
节点与连接线保存的数据格式
nodeData: [
{"category":"node258","text":"规则","key":-1,"loc":"-605.5896437273716 -214.50164873808765"},
{"category":"node258","text":"计划1","key":-2,"loc":"-173.03724493296755 -192.24882726306356"},
],
linkData: [
{"from":-1,"to":-2},
],
mySelf.myDiagram.model.nodeDataArray = mySelf.nodeData;
mySelf.myDiagram.model.linkDataArray = mySelf.linkData;
第三种
let myModel = $(go.GraphLinksModel); //也可以创建link model;需要配置myModel.linkDataArray 如下
myModel.nodeDataArray = mySelf.nodeData;
myModel.linkDataArray = mySelf.linkData;
8 保存
监听画布是否修改
mySelf.myDiagram.addDiagramListener("Modified", e => { //监听画布是否修改
const button = document.getElementById("SaveButton");
if (button) button.disabled = !mySelf.myDiagram.isModified;
const idx = document.title.indexOf("*");
if (mySelf.myDiagram.isModified) {
if (idx < 0) document.title += "*";
} else {
if (idx >= 0) document.title = document.title.slice(0, idx);
}
});
在方法中创建save()函数
save(){
var mySelf = this;
console.log(mySelf.myDiagram.model.toJson());
mySelf.myDiagram.isModified = false;
},
这是里是把修改后的函数打印出来了，如果想存到后端的话也是可以的。
9 源代码
<template>
<div id="wrap">
<div id="chart-wrap">
<div id="myPalette"></div>
<div id="myDiagramDiv"></div>
</div>
<div>
<button type="button" id="SaveButton" @click="save()" class="save-Botton">SAVE</button>
</div>
</div>
</template>
<script>
import go from 'gojs' //在export default前
const $ = go.GraphObject.make;
export default {
data() {
return {
nodeData: [
{"category":"node258","text":"规则","key":-1,"loc":"-605.5896437273716 -214.50164873808765"},
{"category":"node258","text":"计划1","key":-2,"loc":"-173.03724493296755 -192.24882726306356"},
],
linkData: [
{"from":-1,"to":-2},
],
}
},
mounted() {
this.init()
},
methods: {
save(){
var mySelf = this;
console.log(mySelf.myDiagram.model.toJson());
mySelf.myDiagram.isModified = false;
},
init() {
class DemoForceDirectedLayout extends go.ForceDirectedLayout { //布局
makeNetwork(coll) {
const net = super.makeNetwork(coll);
net.vertexes.each(vertex => {
const node = vertex.node;
if (node !== null) vertex.isFixed = node.isSelected;
});
return net;
}
}
var mySelf = this;
mySelf.myDiagram =
$(go.Diagram, "myDiagramDiv", // 为DIV.HTML元素创建一个画布
{
//设置画布配置
initialContentAlignment: go.Spot.Center, // 居中显示
"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: true,
allowCopy: true,
allowClipboard: true, initialAutoScale: go.Diagram.Uniform, // 缩放以使所有内容都适合
"toolManager.mouseWheelBehavior": go.ToolManager.WheelZoom, //有鼠标滚轮事件放大和缩小，而不是向上和向下滚动
'clickCreatingTool.archetypeNodeData': { category: 'node258', text: '新节点', notice: ''}, // 双击新建节点(可以写入节点的默认信息)；
layout: new DemoForceDirectedLayout()
});
mySelf.myDiagram.linkTemplate = $(go.Link, {
selectable: true, //连接线是否可选
relinkableFrom: true,//出发点是否可以改变
relinkableTo: true,//目标点是否可以改变
},new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
$(go.Shape, {
strokeWidth: 2,//节点连接线宽度
stroke: "#F60"//颜色
}),
$(go.Shape, {
toArrow: "Standard",
fill: "red",//箭头填充色
stroke: "blue"//外边框颜色
})//箭头
);
mySelf.myDiagram.nodeTemplateMap.add(//创建名为node258的节点
"node258",
$(go.Node,
"auto",
{
movable:true,//是否可拖动
deletable:true,//是否可删除
selectable:true, //是否可选择
selectionAdorned:false, //显示选中边框
// reshapable:true, // 重塑(改变shape形状边界时使用，将影响节点大小)
// resizable: true, // 可调整大小的(手动调整节点大小时，节点内容显示区域时使用)
},new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
$(go.Panel, //表明需要创建一个panel面板对象//声明创建一个新的面板对象,自定义方式可参考mySelf.myDiagram.nodeTemplate
"Auto", //页面布局为自动
$(go.Shape,//声明构建一个圆形
"Circle", {
fill: "#44CCFF",//内填充色
cursor: "pointer",//指针
stroke: null,//外框颜色null
portId: "",
fromLinkable: true,
fromLinkableSelfNode: false,
fromLinkableDuplicates: true,
toLinkable: true,
toLinkableSelfNode: false,
toLinkableDuplicates: false,
},
new go.Binding("figure", "figure") //声明并创建一个新的图形
),
$(go.TextBlock, {//声明一个可编辑文本域
font: "12pt Helvetica, Arial, sans-serif",
width: 50,
maxSize: new go.Size(360, NaN),
wrap: go.TextBlock.WrapFit, //文本域换行
editable: true, //是否可编辑
margin: 12,
},
new go.Binding("text").makeTwoWay()
),
),
{// 悬浮提示
toolTip:
$("ToolTip",
$(go.TextBlock, { margin: 4 },
new go.Binding("text", "text"))
),
}
)
);
// let myModel = $(go.GraphLinksModel); //也可以创建link model;需要配置myModel.linkDataArray 如下
// myModel.nodeDataArray = mySelf.nodeData;
// myModel.linkDataArray = mySelf.linkData;
// mySelf.myDiagram.model = myModel;
mySelf.myDiagram.model.nodeDataArray = mySelf.nodeData;
mySelf.myDiagram.model.linkDataArray = mySelf.linkData;
mySelf.initPalette();
mySelf.myDiagram.addDiagramListener("Modified", e => { //监听画布是否修改
const button = document.getElementById("SaveButton");
if (button) button.disabled = !mySelf.myDiagram.isModified;
const idx = document.title.indexOf("*");
if (mySelf.myDiagram.isModified) {
if (idx < 0) document.title += "*";
} else {
if (idx >= 0) document.title = document.title.slice(0, idx);
}
});
},
initPalette() {
var mySelf = this;
window.myPalette = $(
go.Palette,
"myPalette", // 必须命名或引用DIV.HTML元素
{
scrollsPageOnFocus: false,
nodeTemplateMap: mySelf.myDiagram.nodeTemplateMap, // 共享myDiagram使用的模板
model: new go.GraphLinksModel([
// 指定调色板的内容
{
category: "node258",
text: "规则"
},
{
category: "node258",
text: "计划1"
},
{
category: "node258",
text: "执行2"
}
])
}
);
},
}
}
</script>
<style lang="less" scoped>
#form-wrap {
padding: 20px 40px;
border: solid 1px rgb(244, 244, 244);
}
#submit {
width: 102px;
height: 40px;
float: right;
margin: 20px 5px 16px 0;
}
#chart-wrap {
width: 100%;
display: flex;
justify-content: space-between;
margin-bottom: 22px;
#myPalette {
width: 180px;
margin-right: 30px;
background-color: white;
border: solid 1px rgb(244, 244, 244);
}
#myDiagramDiv {
flex-grow: 1;
height: 720px;
background-color: white;
border: solid 1px rgb(244, 244, 244);
}
}
#SaveButton{
position: relative;
height: 60px;
width: 100px;
top: -60px;
margin-left: 800px;
background: #82ff90;
}
</style>
总结
至此，就能在vue项目中使用Gojs实现简单的双画布托拉拽雪花图需求。
7659
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
