<template>
    <div >
        <div >
            <div ></div>
            <div ></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>

====================-构建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; 需渲染数据赋值