vue + gojs 實(shí)現(xiàn)拖拽流程圖效果
一、流程圖效果
最近一段時(shí)間在研究go.js,它是一款前端開發(fā)畫流程圖的一個(gè)插件，也是一個(gè)難點(diǎn)，要說(shuō)為什么是難點(diǎn)，首先，它是依賴畫布canvas知識(shí)開發(fā)。其次，要依賴于內(nèi)部API開發(fā)需求，開發(fā)項(xiàng)目需求的時(shí)候就要花費(fèi)大量的時(shí)間去熟悉go.js的API，然后才能進(jìn)行開發(fā)。話不多說(shuō)，我就先把我最近做的項(xiàng)目案例效果圖展示一下：
看到效果圖大家可能會(huì)想這個(gè)挺簡(jiǎn)單的，會(huì)想沒(méi)什么難點(diǎn)，其實(shí)真正開發(fā)的時(shí)候才會(huì)知道的、才會(huì)領(lǐng)悟到。
二、為什么選go.js流程圖插件去開發(fā)項(xiàng)目？
在項(xiàng)目開發(fā)一期的時(shí)候我用的不是go.js,而用的是一款輕便的流程插件jsplumb.js,它也集成了各種功能性API，但是在開發(fā)二期的時(shí)候它的內(nèi)部功能已經(jīng)滿足不了需求了，所以我就開始在網(wǎng)上查找流程插件，看了很多插件，比如：G6，D3 等這些可視化流程插件都是不能滿足需求。要說(shuō)為什么不能滿足需求,原因如下：
一、首先，看到效果圖里的內(nèi)置多點(diǎn)和其他模塊單點(diǎn)連線問(wèn)題，其他插件是無(wú)法這個(gè)滿足需求的，可能我沒(méi)有深入去了解其他的流程插件吧，但是go.js里內(nèi)置點(diǎn)連線可以讓開發(fā)者很快的理解代碼邏輯，不用耗費(fèi)大量的時(shí)間去想點(diǎn)與點(diǎn)的連線。
二、代碼上的數(shù)據(jù)結(jié)構(gòu)問(wèn)題，其他插件里的API數(shù)據(jù)字段繁瑣量多，不夠清晰明了，而go.js里的數(shù)據(jù)結(jié)構(gòu)就兩個(gè)重要字段，一是所有模塊的字段集合二是連線字段集合，根據(jù)需求可以隨意加字段。
三、項(xiàng)目開發(fā)
（一）、首先直接使用go.js，畫布中是有水印的
其實(shí)這個(gè)問(wèn)題不大，替換一行代碼就可以去除水印
引入go.js后，直接在編輯器中全局搜索7eba17a4ca3b1a8346，找到類似這樣結(jié)構(gòu)的代碼
a.ir=b.W[Ra("7eba17a4ca3b1a8346")][Ra("78a118b7")](b.W,ok,4,4);
注：不同的版本代碼不是完全相同的，可能是a.jv（屬性名是會(huì)變的） =‘xxxxx’，將這行代碼替換成
a.ir=function(){return true;}; //a.屬性名 要保持一致
去除水印的效果
（二）、HTML
<--第一種-->
<template>
<div id="wrap">
<div id="chart-wrap">
<div id="chart-palette"></div><-- 畫布一 -->
<div id="chart-diagram"></div><-- 畫布二 -->
</div>
</div>
</template>如圖：
第二種
結(jié)合vue的拖拽組件vuedraggable 實(shí)現(xiàn)業(yè)務(wù)需求。
<template>
<div id="chart-wrap">
<div v-for="tab in tabLIst" :key="tab.id" class="tab">
//拖動(dòng)
<vuedraggable @end.stop="end" @start.stop="move">
<i :class="tab.icon" /> {{ tab.text }}
<el-tooltip effect="dark" :content="tab.tooltip" placement="top">
<i class="el-icon-question" />
</el-tooltip>
</vuedraggable>
</div>
<div id="chart-diagram"/> <--畫布-->
</div>
</template> 如圖：
（三）、畫布的基本設(shè)置 。
this.diagram = $(go.Diagram, "chart-diagram",
{
// 畫布初始位置
initialContentAlignment: go.Spot.LeftSide, // 居中顯示
"undoManager.isEnabled": true, // 支持 Ctrl-Z 和 Ctrl-Y 操作
// 初始坐標(biāo)
// initialPosition: new go.Point(0, 0),
//allowSelect:false, ///禁止選中
// "toolManager.hoverDelay": 100, //tooltip提示顯示延時(shí)
// "toolManager.toolTipDuration": 10000, //tooltip持續(xù)顯示時(shí)間
// isReadOnly:true,//只讀
//禁止水平拖動(dòng)畫布
//禁止水平滾動(dòng)條
allowHorizontalScroll: false,
// 禁止垂直拖動(dòng)畫布
//禁止垂直滾動(dòng)條
allowVerticalScroll: false,
allowZoom: true,//畫布是否可以縮放
"grid.visible": false, //顯示網(wǎng)格
// allowMove: true, //允許拖動(dòng)
// allowDragOut:true,
allowDelete: true,//禁止刪除節(jié)點(diǎn)
allowCopy: true,//禁止復(fù)制
// 禁止撤銷和重做
// "undoManager.isEnabled": false,
// 畫布比例
// scale:1.5，
// minScale:1.2,//畫布最小比例
// maxScale:2.0,//畫布最大比例
// 畫布初始化動(dòng)畫時(shí)間
// "animationManager.duration": 600,
// 禁止畫布初始化動(dòng)畫
"animationManager.isEnabled": false,
// autoScale:go.Diagram.Uniform,//自適應(yīng)
// autoScale:go.Diagram.UniformToFill,//自適應(yīng)
// "draggingTool.dragsLink": false,//拖動(dòng)線
// autoScale:go.Diagram.None,//默認(rèn)值不自適應(yīng)
// 畫布邊距padding
// padding:80或者new go.Margin(2, 0)或new go.Margin(1, 0, 0, 1)
// validCycle: go.Diagram.CycleDestinationTree，//只允許有一個(gè)父節(jié)點(diǎn)
//節(jié)點(diǎn)模塊動(dòng)畫 S
// "animationManager.initialAnimationStyle":go.Animation.EaseOutExpo,
// "animationManager.initialAnimationStyle": go.Animation.EaseInOutQuad,
"animationManager.initialAnimationStyle": go.AnimationManager.None,
// "animationManager.initialAnimationStyle":go.AnimationManager.AnimateLocations,
//節(jié)點(diǎn)模塊動(dòng)畫 D
// validCycle: go.Diagram.CycleNotUndirected，
// validCycle: go.Diagram.CycleNotDirected，
// validCycle: go.Diagram.CycleSourceTree，
//ismodelfied:true //禁止拖拽
// 禁止鼠標(biāo)拖動(dòng)區(qū)域選中
// "dragSelectingTool.isEnabled" : false,
//允許使用delete鍵刪除模塊
"commandHandler.deletesTree": true,
// "hasHorizontalScrollbar":false,//去除水平滾動(dòng)條
// "hasVerticalScrollbar":false,//去除豎直滾動(dòng)條
// "canStart":false,
// allowClipboard: true,
// "toolManager.mouseWheelBehavior": go.ToolManager.WheelZoom, //有鼠標(biāo)滾輪事件放大和縮小，而不是向上和向下滾動(dòng)
// layout: $(go.TreeLayout,
// { angle: 90, layerSpacing: 80 }),
}
);
（三）、整體畫布事件及節(jié)點(diǎn)的監(jiān)聽
// 監(jiān)聽連線
this.diagram.addDiagramListener("LinkDrawn", (e) => {
console.log(e.subject.part);
});
// 監(jiān)聽刪除
this.diagram.addDiagramListener("SelectionDeleted", (e) => {
e.subject.each(function (n) {
console.log(n.data.key);
});
})
// 修改節(jié)點(diǎn)
this.diagram.addDiagramListener("TextEdited", (evt) => {
console.log(e.subject.part);
});
// 監(jiān)聽點(diǎn)擊
this.diagram.addDiagramListener("ObjectSingleClicked", (e) => {
//這是清除高亮的
// e.diagram.commit((d) => {
// d.clearHighlighteds();
// }, "no highlighteds");
});
// // 移動(dòng)事件
this.diagram.addDiagramListener("SelectionMoved", (e) => {
console.log(e.diagram.lastInput.documentPoint);
});(四)、連線點(diǎn)封裝函數(shù)
// 節(jié)點(diǎn)連接線
makePort (name, align, spot, output, input) {
var horizontal = align.equals(go.Spot.Top) || align.equals(go.Spot.Bottom)
return $(go.Shape, {
fill: 'transparent', // 默認(rèn)透明不現(xiàn)實(shí)
strokeWidth: 0, // 無(wú)邊框
fromMaxLinks: 1, //
width: horizontal ? NaN : 10, // 垂直"port"則8像素寬
height: !horizontal ? NaN : 5, // 水平"port"則8像素
alignment: align, // 同其模塊對(duì)齊
stretch: horizontal
? go.GraphObject.Horizontal
: go.GraphObject.Vertical, // 自動(dòng)同其模塊一同伸縮
portId: name, // 聲明ID
fromSpot: spot, // 聲明連線頭連出此"port"的位置
fromLinkable: output, // 布爾型，是否允許連線從此"port"連出
toLinkable: input, // 布爾型，是否允許連線從此"port"連出
toSpot: spot, // 聲明連線尾連入此"port"的位置
cursor: 'pointer', // 鼠標(biāo)由指針改為手指，表示此處可點(diǎn)擊生成連線
mouseEnter: function (e, port) {
// 鼠標(biāo)移到"port"位置后，高亮
if (!e.diagram.isReadOnly) port.fill = 'rgba(255,0,255,0.3)'
},
mouseLeave: function (e, port) {
// 鼠標(biāo)移出"port"位置后，透明
port.fill = 'transparent'
}
})
}
（五）、節(jié)點(diǎn)連線的高亮函數(shù)。
isHighlightedFun(link) {
return $$(go.Shape,
"RoundedRectangle", {
fill: "rgba(217,236,255,.2)",
stroke: "rgba(39,154,242,.1)",
strokeWidth: 1,
},
new go.Binding("stroke", "isHighlighted", (h) => {
return h ? "rgba(39,154,242,1)" : "rgba(39,154,242,.8)";
}).ofObject(),
new go.Binding("strokeWidth", "isHighlighted", (h) => {
return h ? 2.5 : 1.3;
}).ofObject(),
)
}如圖：
(六)、 節(jié)點(diǎn)連接線。（方法封裝）
makePort(name, align, spot, output, input) {
var horizontal = align.equals(go.Spot.Top) || align.equals(go.Spot.Bottom);
return $$(go.Shape,
{
fill: "transparent", // 默認(rèn)透明
strokeWidth: 0, // 無(wú)邊框
fromMaxLinks: 1, //最大連接數(shù)
width: horizontal ? NaN : 10, // 垂直"port"則8像素寬
height: !horizontal ? NaN : 2, // 水平"port"則8像素
alignment: align, // 同其模塊對(duì)齊
stretch: (horizontal ? go.GraphObject.Horizontal : go.GraphObject.Vertical),//自動(dòng)同其模塊一同伸縮
portId: name, // 聲明ID
fromSpot: spot, // 聲明連線頭連出此"port"的位置
fromLinkable: output, // 布爾型，是否允許連線從此"port"連出
toLinkable: input, // 布爾型，是否允許連線從此"port"連出
toSpot: spot, // 聲明連線尾連入此"port"的位置
cursor: "pointer", // 鼠標(biāo)由指針改為手指，表示此處可點(diǎn)擊生成連線
mouseEnter: (e, port) => { //鼠標(biāo)移到"port"位置后，高亮
if (!e.diagram.isReadOnly) port.fill = "rgba(255,0,255,0.3)";
},
mouseLeave: (e, port) => {// 鼠標(biāo)移出"port"位置后，透明
port.fill = "transparent";
}
});
}注意：要在this.diagram.nodeTemplateMap.add 增加模塊里調(diào)用。
示例：
this.diagram.nodeTemplateMap.add(type,
$$(go.Node, "Auto",
this.makePort("T", go.Spot.Top, go.Spot.TopCenter, false, true)
))四、當(dāng)前畫布的監(jiān)聽事件名稱包括
"AnimationStarting" ：動(dòng)畫渲染前事件,加載圖表的動(dòng)畫即將開始;
"AnimationFinished" ：動(dòng)畫渲染完事件,加載圖表剛剛完成的動(dòng)畫;
"BackgroundSingleClicked"： 背景單擊事件, 單擊圖表背景;
"BackgroundDoubleClicked" ：背景雙擊事件, 雙擊圖表背景;
"BackgroundContextClicked" ：背景右鍵事件, 右鍵單擊圖表背景;
"ChangingSelection"： 改變選擇前事件, 一個(gè)操作即將改變Diagram.selection圖表選擇集合,
"ChangedSelection" ：改變選擇后事件, 一個(gè)操作已經(jīng)改變?Diagram.selection圖表選擇集合,
"ClipboardChanged" ：剪切板改變事件, 零部件已被CommandHandler.copySelection復(fù)制到剪貼板上;
"ClipboardPasted" ：剪切板粘貼事件,零部件已由CommandHandler.pasteSelection從剪貼板復(fù)制到圖表中;
"DocumentBoundsChanged"： 文檔范圍改變事件, 圖表中各零部件的面積,?Diagram.documentBounds,已經(jīng)改變了;
"ExternalObjectsDropped" ：(節(jié)點(diǎn)或線等)零部件拖放生成事件, 零部件已經(jīng)通過(guò)拖拽從圖的外部復(fù)制到圖中;
"GainedFocus" ：獲得鍵盤焦點(diǎn)事件, 該圖獲得了鍵盤焦點(diǎn)，例如在調(diào)用Diagram.focus之后.
"LayoutCompleted" ：布局完成事件, 整個(gè)圖表布局剛剛更新;
"LinkDrawn"： 線創(chuàng)建事件,用戶剛剛使用LinkingTool創(chuàng)建了一個(gè)新鏈接;?
"LinkRelinked"： 線重新連接事件, 用戶剛剛通過(guò)RelinkingTool?或?DraggingTool重新連接了現(xiàn)有線;
"LinkReshaped"： 線路徑改變事件, 用戶剛剛通過(guò)LinkReshapingTool調(diào)整了線的路徑;
"LostFocus" ：圖表失去焦點(diǎn)事件,這個(gè)圖表失去了鍵盤焦點(diǎn),
"Modified" ：圖表改變事件,?Diagram.isModified?屬性已被設(shè)置為一個(gè)新值——用于將窗口標(biāo)記為自上次保存以來(lái)已被修改;
"ObjectSingleClicked"： 對(duì)象單擊事件, 單擊了圖形對(duì)象（節(jié)點(diǎn)和線等）;
"ObjectDoubleClicked"：雙擊了圖形對(duì)象（節(jié)點(diǎn)和線等）;
"ObjectContextClicked"：右鍵單擊了圖形對(duì)象（節(jié)點(diǎn)和線等）;
"PartCreated" ：Part創(chuàng)建事件,用戶通過(guò)?ClickCreatingTool插入新的零部件;
"PartResized" ：Part大小改變事件, 用戶通過(guò)ResizingTool 調(diào)整工具改變了一個(gè)圖形對(duì)象的大小;
"PartRotated" ：Part旋轉(zhuǎn)事件, 用戶通過(guò)RotatingTool 旋轉(zhuǎn)工具改變了一個(gè)圖形對(duì)象的角度 ;
"SelectionMoved" ：拖動(dòng)事件, 用戶通過(guò)DraggingTool 拖動(dòng)工具移動(dòng)了選定的部分;
"SelectionCopied" ：復(fù)制事件,戶通過(guò)DraggingTool 拖動(dòng)工具復(fù)制了選定的部分;
"SelectionDeleted" ：刪除后事件,用戶通過(guò)?CommandHandler.deleteSelection?已經(jīng)刪除了選定的部分;
"SelectionDeleting" ：刪除前事件,用戶通過(guò)?CommandHandler.deleteSelection即將刪除選定的部分;
"SelectionGrouped" ：選擇創(chuàng)建分組事件, 通過(guò)CommandHandler.groupSelection已經(jīng)從選擇的零部件中創(chuàng)建了一個(gè)新的組 ;
"SelectionUngrouped"：用戶已刪除選定的組，但通過(guò)CommandHandler.ungroupSelection保留其成員;
"SubGraphCollapsed" ：子圖折疊事件, 用戶通過(guò)CommandHandler.collapseSubGraph將選定的組折疊;
"SubGraphExpanded" ：子圖展開事件, 用戶通過(guò)CommandHandler.expandSubGraph將選定的組展開;
"TextEdited" ：文本塊修改事件,用戶通過(guò)文本編輯工具改變了文本塊的字符串值;
"TreeCollapsed"： 樹折疊事件, 用戶通過(guò)CommandHandler.collapseTree折疊所選節(jié)點(diǎn)的子樹;
"TreeExpanded" ：樹展開事件, 用戶通過(guò)CommandHandler.expandTree展開了所選節(jié)點(diǎn)的子樹;
"ViewportBoundsChanged"：視窗范圍改變事件,圖表中可見的區(qū)域,?Diagram.viewportBounds,發(fā)生了改變;
五、迭代篇
（一）、項(xiàng)目的迭代。
從數(shù)據(jù)結(jié)構(gòu)到ui風(fēng)格的整體重構(gòu)，有了新的變化。
整體流程 如圖一：
模塊流程側(cè)邊設(shè)置圖二：
伸縮當(dāng)前灰色意圖如圖三：
為什么收起意圖會(huì)有多條連線，是因?yàn)楫?dāng)前模塊下的意圖和部分模塊有關(guān)系線，所以在收起時(shí)要知道當(dāng)前模塊下有幾個(gè)意圖和其他模塊有關(guān)系。
（二）、整體用的js方法
1、畫布里的功能js：
2、工具條js 方法：
（三）、功能分析
1、工具條中的功能方法
（1）、查看
注： 是通過(guò)gojs 實(shí)例中的makeSVG方法打開一個(gè)新窗口生成的一個(gè)svg
printDiagram() {
var svgWindow = window.open();
if (!svgWindow) return;
var printSize = new go.Size(3000, 2000);
var bnds = this.diagram.documentBounds;
var x = bnds.x;
var y = bnds.y;
while (y < bnds.bottom) {
while (x < bnds.right) {
var svg = this.diagram.makeSVG({scale: 1.0, position: new go.Point(x, y), size: printSize});
svgWindow.document.body.appendChild(svg);
x += printSize.width;
}
x = bnds.x;
y += printSize.height;
}
}（2）、居中
這里將調(diào)用CommandHandler.scrollToPart，先還原畫布初始狀態(tài)后執(zhí)行動(dòng)畫以將視口滾動(dòng)到節(jié)點(diǎn)所在的位置。
注：如果節(jié)點(diǎn)靠近邊緣，除非您增加Diagram.scrollMargin，否則無(wú)法滾動(dòng)視口，以使該節(jié)點(diǎn)更靠近視口的中心。
centerDiagram() {
this.resetCanvas();
this.diagram.commandHandler.scrollToPart(this.diagram.findNodeForKey(this.initModuleId));
},
// 還原
resetCanvas() {
this.diagram.scale = 1;
this.$refs.set.zoom = 100;
},到此這篇關(guān)于vue + gojs 實(shí)現(xiàn)拖拽流程圖的文章就介紹到這了,更多相關(guān)vue拖拽 流程圖內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
uni-file-picker搭配uni.uploadFile在使用問(wèn)題上踩了不少坑,我至今還是沒(méi)辦法在不改uniapp源碼基礎(chǔ)上實(shí)現(xiàn)限制重復(fù)文件的上傳,這篇文章介紹vue3+uniapp 上傳附件的操作代碼,感興趣的朋友一起看看吧2024-01-01
5個(gè)可以加速開發(fā)的VueUse函數(shù)庫(kù)(小結(jié))
VueUse為Vue開發(fā)人員提供了大量適用于Vue2和Vue3的基本Composition API 實(shí)用程序函數(shù)。具有一定的參考價(jià)值，感興趣的可以了解一下2021-11-11
Vue2實(shí)現(xiàn)子組件修改父組件值的方法小結(jié)
在 Vue 2 中,子組件不能直接修改父組件的值,因?yàn)?nbsp;Vue 遵循單向數(shù)據(jù)流的原則,為了實(shí)現(xiàn)子組件修改父組件的數(shù)據(jù),本文給大家介紹了Vue2實(shí)現(xiàn)子組件修改父組件值的四種方法,并通過(guò)代碼示例講解的非常詳細(xì),需要的朋友可以參考下2025-03-03
這篇文章主要為大家介紹了vue可用于拖動(dòng)排序組件示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-06-06
vue動(dòng)態(tài)添加store、路由和國(guó)際化配置方式
這篇文章主要介紹了vue動(dòng)態(tài)添加store、路由和國(guó)際化配置方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-03-03
vuex結(jié)合session存儲(chǔ)數(shù)據(jù)解決頁(yè)面刷新數(shù)據(jù)丟失問(wèn)題
在項(xiàng)目中表單篩選項(xiàng)里，選擇完之后刷新頁(yè)面數(shù)據(jù)就變了，沒(méi)有保留在自己選擇的選項(xiàng)上。本文使用session存儲(chǔ)數(shù)據(jù)，具有一定的參考價(jià)值，感興趣的可以了解一下2021-09-09
Vue項(xiàng)目中解決數(shù)字精度丟失問(wèn)題
我們知道,浮點(diǎn)類型的數(shù)據(jù),在計(jì)算機(jī)中是以二進(jìn)制的方式存儲(chǔ)的,但是表示的數(shù)據(jù)也有個(gè)上限和下限,當(dāng)超過(guò)限制?,在計(jì)算機(jī)上顯示只能取最接近的限值,?數(shù)字解析精度丟失說(shuō)的就是這個(gè)現(xiàn)象,所以本文給大家介紹了Vue項(xiàng)目中解決數(shù)字精度丟失問(wèn)題的解決,需要的朋友可以參考下2024-02-02
Vue監(jiān)聽使用方法和過(guò)濾器實(shí)現(xiàn)
這篇文章主要介紹了Vue監(jiān)聽使用方法和過(guò)濾器實(shí)現(xiàn)，過(guò)濾器為頁(yè)面中數(shù)據(jù)進(jìn)行強(qiáng)化，具有局部過(guò)濾器和全局過(guò)濾器2022-06-06
vue element項(xiàng)目引入icon圖標(biāo)的方法
這篇文章主要介紹了vue element項(xiàng)目引入icon圖標(biāo)的方法,本文圖文并茂給大家介紹的非常詳細(xì)，需要的朋友可以參考下2018-06-06
這篇文章主要介紹了vue引入axios同源跨域問(wèn)題，文章給大家提供了解決方案，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-09-09