vue+go.js：實現流程圖

轉載自：https://www.cnblogs.com/sexintercourse/p/12456291.html

第一步：引入package.json引入gojs依賴包-- "gojs": "^2.0.3", (npm install gojs --save)

第二步：運行下述代碼

<template>
    <div id="wrap">
        <div id="chart-wrap">
            <div id="chart-palette"></div>
            <div id="chart-diagram"></div>
        </div>
        <button @click="onSubmit"></button>
    </div>
    </div>
</template>
<script>
    import go from 'gojs'
    const MAKE = go.GraphObject.make;
    export default {
        data() {
            return {}
        },
        mounted() {
            var mySelf = this;
            mySelf.myDiagram = MAKE(go.Diagram, "chart-diagram", {
                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,
                "toolManager.mouseWheelBehavior": go.ToolManager.WheelZoom, //有鼠標滾輪事件放大和縮小，而不是向上和向下滾動
                layout: MAKE(go.TreeLayout, {
                    angle: 0,
                    layerSpacing: 35
                })
            }); //構建gojs對象
            console.log(mySelf.myDiagram);
            mySelf.myDiagram.addDiagramListener("ObjectSingleClicked", function(e) {
                debugger
                console.log(e.subject.part);
 
            });
 
            mySelf.myDiagram.addDiagramListener("BackgroundSingleClicked", function(e) {
                debugger
                console.log("Double-clicked at" + e.diagram.lastInput.documentPoint);
            });
 
            mySelf.myDiagram.addDiagramListener("ClipboardPasted", function(e) {
                debugger
                console.log("Pasted" + e.diagram.selection.count + "parts");
            });
 
            mySelf.myDiagram.linkTemplate = MAKE(go.Link, {
                    curve: go.Link.Bezier
                }, // 貝塞爾曲線
                {
                    routing: go.Link.Orthogonal,
                    corner: 15
                },
                MAKE(go.Shape, {
                    strokeWidth: 2,
                    stroke: "#F60"
                }),
                MAKE(go.Shape, {
                    toArrow: "Standard",
                    fill: "red",
                    stroke: "blue"
                }), //箭頭
                MAKE(go.TextBlock, {
                        margin: 20,
                        stroke: "blue",
                        font: "14px sans-serif",
                        width: 50,
                        wrap: go.TextBlock.WrapDesiredSize
                    },
                    new go.Binding("text", "linktext")), {
                    toolTip: MAKE(go.Adornment, "Auto",
                        MAKE(go.Shape, {
                            fill: "#FFFFCC"
                        }),
                        MAKE(go.TextBlock, {
                            margin: 4
                        }, new go.Binding("text", "name1"))
                    ) // end of Adornment
                }
            );
            let myModel = MAKE(go.GraphLinksModel); //也可以創建link model;需要配置myModel.linkDataArray 如下
            myModel.nodeDataArray = [];
            myModel.linkDataArray = [];
 
            var lightText = "whitesmoke";
            mySelf.myDiagram.nodeTemplateMap.add(
                "Next",
                MAKE(
                    go.Node,
                    "Spot",
                    // nodeStyle(),
                    MAKE( //聲明創建一個新的面板對象,自定義方式可參考mySelf.myDiagram.nodeTemplate
                        go.Panel, //表明需要創建一個panel面板對象
                        "Auto", //頁面布局為自動
                        MAKE( //聲明構建一個圓角矩形
                            go.Shape,
                            "RoundedRectangle", {
                                fill: "#44CCFF",
                                stroke: '#FFF',
                                strokeWidth: 1,
                                angle: 0
                            },
                            new go.Binding("figure", "figure") //聲明並創建一個新的圖形
                        ),
                        MAKE( //聲明一個可編輯文本域
                            go.TextBlock, {
                                font: "12pt Helvetica, Arial, sans-serif",
                                stroke: lightText,
                                width: 125,
                                maxSize: new go.Size(360, NaN),
                                wrap: go.TextBlock.WrapFit, //文本域換行
                                editable: true, //是否可編輯
                                margin: 12,
                                wrap: go.TextBlock.WrapDesiredSize
                            },
                            new go.Binding("text").makeTwoWay()
                        )
                    ),
                    // four named ports, one on each side:
                    makePort("T", go.Spot.Top, false, true),
                    makePort("L", go.Spot.Left, true, true),
                    makePort("R", go.Spot.Right, true, true),
                    makePort("B", go.Spot.Bottom, true, false)
                )
            );
 
            //Node連接線
            function makePort(name, spot, output, input) {
                return MAKE(go.Shape, "Circle", {
                    fill: "transparent",
                    stroke: null, // this is changed to "white" in the showPorts function
                    desiredSize: new go.Size(10, 10),
                    alignment: spot,
                    alignmentFocus: spot, // align the port on the main Shape
                    portId: name, // declare this object to be a "port"
                    fromSpot: spot,
                    toSpot: spot, // declare where links may connect at this port
                    fromLinkable: output,
                    toLinkable: input, // declare whether the user may draw links to/from here
                    cursor: "pointer" // show a different cursor to indicate potential link point
                });
            };
            mySelf.myDiagram.model = myModel;
            mySelf.init();
        },
        methods: {
            onSubmit() {
 
            },
            init() {
                var mySelf = this;
                window.myPalette = MAKE(
                    go.Palette,
                    "chart-palette", // must name or refer to the DIV HTML element
                    {
                        scrollsPageOnFocus: false,
                        nodeTemplateMap: mySelf.myDiagram.nodeTemplateMap, // share the templates used by myDiagram
                        model: new go.GraphLinksModel([
                            // specify the contents of the Palette
                            {
                                category: "Next",
                                text: "新規則"
                            }
                        ])
                    }
                );
            },
        }
    }
</script>
<style lang="less" scoped>
    #form-wrap {
        padding: 20px 40px;
        // background-color: white;
        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;
 
        #chart-palette {
            width: 180px;
            margin-right: 30px;
            background-color: white;
            border: solid 1px rgb(244, 244, 244);
        }
 
        #chart-diagram {
            flex-grow: 1;
            height: 720px;
            background-color: white;
            border: solid 1px rgb(244, 244, 244);
        }
    }
 
    #lateEntry {
        clear: both;
        background-color: rgb(255, 255, 255);
        border: solid 1px rgb(244, 244, 244);
 
        >span {
            display: inline-block;
            height: 50px;
            font-size: 16px;
            line-height: 50px;
            text-indent: 30px;
            letter-spacing: 0.8px;
            text-align: left;
            color: rgb(35, 35, 35);
            // border-bottom: 1px solid rgb(234, 234, 234);
        }
    }
</style>

第三步：去水印

在哪個文件中找到破解的文件。 

在node_modules\gojs\release\go.js 下進行破解

1. 在文件中搜索7eba17a4ca3b1a8346，找到類似a.$q=b.V[Za("7eba17a4ca3b1a8346")][Za("78a118b7")](b.V,yk,4,4);這樣結構的代碼
2. 將其注釋，替換成a.$q=function(){return true;};
3. 直接npm install可以在module里尋找go.js文件，需修改的代碼一般在769行

------拓展：相關構建gojs流程圖時的某些參數及相關配置使用方式

====================-構建gojs流程面板
import go from  'gojs'
const MAKE = go.GraphObject.make;
mySelf.myDiagram = MAKE(go.Diagram, "mygoChart", {
    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: false,//允許剪切
    "toolManager.mouseWheelBehavior": go.ToolManager.WheelZoom, //有鼠標滾輪事件放大和縮小，而不是向上和向下滾動
    layout: MAKE(go.TreeLayout, {//創建布局,示例為樹
        angle: 0,    //角度
        layerSpacing: 35 //層間距
    })
}); //構建gojs對象
====================-
mySelf.myDiagram.nodeTemplateMap.add(： //聲明左側Node工具欄Tools
        "Next", // 關鍵參數,需要與init初始化時window.myPalette中model對象配置的category保持一致
         MAKE(
            go.Node, //
            "Spot",
            // nodeStyle(),
            MAKE(//聲明創建一個新的面板對象,自定義方式可參考mySelf.myDiagram.nodeTemplate
                go.Panel, //表明需要創建一個panel面板對象
                "Auto",      //頁面布局為自動
                MAKE(     //聲明構建一個圓角矩形
                    go.Shape,
                    "RoundedRectangle", {
                        fill: "rgb(54, 128, 181)", //內填充顏色
                        stroke: null  //外邊框顏色
                    },
                    new go.Binding("figure", "figure") //聲明並創建一個新的圖形
                ),
                MAKE(    //聲明一個可編輯文本域
                    go.TextBlock, {
                        font: "11pt Helvetica, Arial, sans-serif",
                        stroke: lightText,
                        margin: 8,
                        maxSize: new go.Size(160, NaN),
                        wrap: go.TextBlock.WrapFit, //文本域換行
                        editable: true    //是否可編輯
                    },
                    new go.Binding("text").makeTwoWay()
                )
            ),
            makePort("T", go.Spot.Top, false, true),//創建Top頂端可延申鏈接點
            makePort("L", go.Spot.Left, true, true),//創建Left左端可延申鏈接點
            makePort("R", go.Spot.Right, true, true),//創建Righ右端可延申鏈接點
            makePort("B", go.Spot.Bottom, true, false)//創建Buttom底端可延申鏈接點
        )
    );
====================-自定義流程圖流程節點相關配置
mySelf.myDiagram.nodeTemplate : 自定義流程圖節點
    -> MAKE(go.Node,//聲明創建的是node對象
        new go.Binding("location", "loc", go.Point.parse),//創建節點並設定節點的初始位置
        MAKE(go.Shape, "RoundedRectangle", {//構建節點的形狀,示例為圓角矩形
            fill: "#44CCFF",//模塊內填充顏色
            stroke: 'green',//外填充顏色(可理解為margin,也可以當成外邊框顏色來理解)
            strokeWidth: 2,//外邊框(填充)寬度
            angle: 0//模塊形狀的偏移量(角度)
       }),
       "Auto", //設置並定義節點模塊內容布局走向:Vertical(垂直),Auto(自動),Horizontal(水平)
       { background: "#44CCFF" },//將Node背景底色渲染為藍色
       MAKE(go.Picture,//構建Node區域圖像類內容
            { source:"../assets/img/01.png",margin: 10, width: 50, height: 50, background: "red" },//基本參數設置
       new go.Binding("source")),//*Picture.source參數值與模型數據中的"source"字段綁定
       MAKE(go.TextBlock,//構建Node區域文本類內容
         "Default Text",  // 初始化默認文本
         // 文字周圍的空隙, 大號字體, 白色筆畫:
         { margin: 12, stroke: "white", font: "bold 16px sans-serif",
            width:75,
            wrap: go.TextBlock.WrapDesiredSize
         },
       new go.Binding("text", "name1")), // name1為linktext為nodeDataArray對象中的參數
       {
           mouseEnter: function(e, node, prev) {
               console.log('mouseEnter');//鼠標點擊事件
           },
           mouseLeave: function(e, node, prev) {
               mySelf.detailShow = false;//鼠標移開事件
           },
       },
       MAKE(go.Panel, "Horizontal", {//創建並設置node內模板:實現Node塊內的控件布局
               padding: 5
       },
====================-自定義流程圖連接線相關配置
mySelf.myDiagram.linkTemplate:自定義流程圖連接線
    -> { curve: go.Link.Bezier } ： 設置並定義連接線曲線樣式,示例為貝塞爾曲線
    -> MAKE(go.Shape, {
            strokeWidth: 2, //連接線寬(厚)度
            stroke: "#F60"//連接線筆畫默認(未選中)顏色
        }) : 設置並定義連接線寬度及顏色
    -> MAKE(go.Shape, {
            toArrow: "Standard",//箭頭樣式,示例為標准
            fill: "#000",//箭頭的填充顏色(內填充,可以理解為padding)
            stroke: null//連接線筆畫默認(未選中)顏色,(外填充,可以理解為margin)
        }), //設置並定義箭頭樣式
    --> MAKE(go.TextBlock, { //文本塊創建器
                margin: 20,//外邊距,默認單位為px
                stroke: "blue",//字體顏色
                font: "14px sans-serif",//字體樣式
                width:50,//內容寬度
                wrap: go.TextBlock.WrapDesiredSize//樣式包裝器
            },
            new go.Binding("text", "linktext")), { //創建並綁定顯示的文本域信息,linktext為nodeDataArray對象中的參數
            toolTip: MAKE(go.Adornment, "Auto",
                    MAKE(go.Shape, {
                        fill: "#FFFFCC",//懸浮提示框內填充顏色
                    }),
                    MAKE(go.TextBlock, {
                        margin: 4 // 外邊距
                    }, new go.Binding("text", "name1")) //創建並綁定顯示的文本域信息,name1為nodeDataArray對象中的參數
                ) ：設置並定義鼠標懸浮提示信息樣式
            } : 設置並定義連接線指示及指針懸浮提示內容
=================-渲染數據相關配置
--> let myModel = MAKE(go.Model);//無連接線模型渲染
    let myModel = MAKE(go.GraphLinksModel);//指定連接(適用於復雜業務);需要配置myModel.linkDataArray
    let myModel = MAKE(go.TreeModel); //使用Tree樹圖模型渲染
--> myModel.nodeDataArray = [{},{},{}] : 流程節點數據(對象數組)
--> myModel.linkDataArray = [ {from:"1",to:"2"}, {from:"1",to:"2"}……] : 流程鏈接指示數組,用於構建各個node節點間的數據關系，需要使用go.GraphLinksModel
--> mySelf.myDiagram.model = myModel; 需渲染數據賦值