GoJS、AngularJS自定义组件JS SDK注解参考

通常一个SDK包含一个或多个API

下面是一个SDK的实例：

if (typeof(wlNgApp) === "undefined")
    wlNgApp = angular.module("wl.controls", []);
/**
 * 定义wl-study-nodefig组件该组件可以挂接以下几个事件
 */
wlNgApp.directive("wlPlanNodefig", function() {
    return {
        templateUrl: WLJS.getWebRoot() + '/resources/comp/wl-study/wl-study-nodefig-gojs/nodefigtemplate.html',
        restrict: 'E',
        replace: true,
        scope: { //创建一个新的“隔离”scope，通过绑定与父scope通信
            readonly: "@", //单向绑定
            theme: "@",
            methods: "=wlPlanNodefig", //双向绑定、供外部调用方法集
            saveFig: "&onSaveFig", //当directive中有什么动作需要更新到父scope中的时候，可以调用父scope的定义的nodefigOnsavefig(figureId)方法
            createNode: "&onCreateNode",
            nodeOnClick: "&onClickNode",
            saveNode: "&onSaveNode",
            removeNode: "&onRemoveNode",
            editNode: "&onEditNode",
            nodeFocusOut: "&onNodeFocusOut",
            showWindow: "&onShowWindow",
        },
        controller: function($scope, $element, $http, $filter) {
            this.$filter = $filter;
            $(".icon-fullscreen").fadeOut(1);
            $scope.expandToolBar = true;
            $scope.$watch('readonly', function() {//监听
                if ($scope.readonly == 'true') {
                    $scope.readonly = true;
                } else if ($scope.readonly == 'false') {
                    $scope.readonly = false;
                }
                if ($scope.readonly == true) {
                    $(".icon-fullscreen").fadeOut(1);
                    $("#paletteDraggable").fadeOut(1);
                    //连线
                    nodeFigDiagram.allowLink = false;
                    //节点移动
                    nodeFigDiagram.allowMove = false;
                    // //节点选择
                    // nodeFigDiagram.allowSelect = true;
                } else {
                    $(".icon-fullscreen").fadeOut(1);
                    $("#paletteDraggable").fadeIn(500);
                    nodeFigDiagram.allowMove = true;
                    // nodeFigDiagram.allowSelect = true;
                }
            });
            //展开工具
            $scope.toolExpand = function() {
                    if ($scope.expandToolBar) {
                        $("#paletteDraggable").fadeOut(1);
                        $(".icon-fullscreen").fadeIn(500);
                    } else {
                        $(".icon-fullscreen").fadeOut(1);
                        $("#paletteDraggable").fadeIn(500);
                    }
                    $scope.expandToolBar = !$scope.expandToolBar;
                }
                //保存流程图
            $scope.saveFigInner = function(data) {
                $scope.saveFig({ figureId: $scope.figureId });
            };
            $scope.saveFigInner();
            //保存节点
            $scope.saveNodeInner = function(data) {
                    if ($scope.figureId) {
                        var saveFigure = WLJS.getWebRoot() + "/rest/inner/platform/nodefig/saveFigure?figureId=";
                        $http.post(saveFigure + $scope.figureId, nodeFigDiagram.model.toJson()).success(function(res) {
                            if (res.ret == WLJS.ResultStatus.OK) {
                                $scope.saveNode({ nodeData: data });
                            } else {
                                console.log("后台请求错误");
                                alert("后台请求错误");
                            }
                        }).error(function() {
                            console.log("数据请求错误");
                            alert("数据请求错误");
                        });
                    }
                }
                /** GOJS监听：新增节点 */
            $scope.createNodeInner = function(data) {
                    if ($scope.figureId) {
                        var saveFigure = WLJS.getWebRoot() + "/rest/inner/platform/nodefig/saveFigure?figureId=";
                        $http.post(saveFigure + $scope.figureId, nodeFigDiagram.model.toJson()).success(function(res) {
                            if (res.ret == WLJS.ResultStatus.OK) {
                                $scope.createNode({ nodeData: data });
                            } else {
                                console.log("后台请求错误");
                                alert("后台请求错误");
                            }
                        }).error(function() {
                            console.log("数据请求错误");
                            alert("数据请求错误");
                        });
                    }
                }
                //单击节点
            $scope.nodeOnClickInner = function(data) {
                    $scope.nodeOnClick({ nodeData: data });
                }
                //删除节点
            $scope.removeNodeInner = function(data) {
                    if ($scope.figureId) {
                        var saveFigure = WLJS.getWebRoot() + "/rest/inner/platform/nodefig/saveFigure?figureId=";
                        $http.post(saveFigure + $scope.figureId, nodeFigDiagram.model.toJson()).success(function(res) {
                            if (res.ret == WLJS.ResultStatus.OK) {
                                $scope.removeNode({ nodeData: data });
                            } else {
                                console.log("后台请求错误");
                                alert("后台请求错误");
                            }
                        }).error(function() {
                            console.log("数据请求错误");
                            alert("数据请求错误");
                        });
                    }
                }
                //删除线
            $scope.removeLineInner = function(data) {
                    if ($scope.figureId) {
                        var saveFigure = WLJS.getWebRoot() + "/rest/inner/platform/nodefig/saveFigure?figureId=";
                        $http.post(saveFigure + $scope.figureId, nodeFigDiagram.model.toJson()).success(function(res) {
                            if (res.ret == WLJS.ResultStatus.OK) {
                                // $scope.removeNode({nodeData: data});
                            } else {
                                console.log("后台请求错误");
                                alert("后台请求错误");
                            }
                        }).error(function() {
                            console.log("数据请求错误");
                            alert("数据请求错误");
                        });
                    }
                }
                //删除本次流程图
            $scope.deleteFigureInner = function(data) {
                    if ($scope.figureId) {
                        var deleteFigure = WLJS.getWebRoot() + "/rest/inner/platform/nodefig/deleteFigure?figureId=";
                        $http.post(deleteFigure + $scope.figureId).success(function(res) {
                            if (res.ret == WLJS.ResultStatus.OK) {
                                $scope.figureId = undefined;
                                $scope.load();
                            } else {
                                console.log("后台请求错误");
                                alert("后台请求错误");
                            }
                        }).error(function() {
                            console.log("数据请求错误");
                            alert("数据请求错误");
                        });
                    }
                }
                //编辑节点信息
            $scope.editNodeInner = function(data) {
                    if ($scope.figureId) {
                        var saveFigure = WLJS.getWebRoot() + "/rest/inner/platform/nodefig/saveFigure?figureId=";
                        $http.post(saveFigure + $scope.figureId, nodeFigDiagram.model.toJson()).success(function(res) {
                            if (res.ret == WLJS.ResultStatus.OK) {
                                $scope.editNode({ nodeData: data });
                            } else {
                                console.log("后台请求错误");
                                alert("后台请求错误");
                            }
                        }).error(function() {
                            console.log("数据请求错误");
                            alert("数据请求错误");
                        });
                    }
                }
                //点击背景一次，即离开节点
            $scope.nodeFocusOutInner = function() {
                    $scope.nodeFocusOut();
                }
                //打开节点文本编辑框
            $scope.showWindowInner = function(data) {
                    if (data.key) {
                        $scope.showWindow({ nodeData: data });
                    }
                }
                //移动节点位置
            $scope.moveNodeInner = function(data) {
                    if ($scope.figureId) {
                        var saveFigure = WLJS.getWebRoot() + "/rest/inner/platform/nodefig/saveFigure?figureId=";
                        $http.post(saveFigure + $scope.figureId, nodeFigDiagram.model.toJson()).success(function(res) {
                            if (res.ret == WLJS.ResultStatus.OK) {
                                $scope.editNode({ nodeData: data });
                            } else {
                                console.log("后台请求错误");
                                alert("后台请求错误");
                            }
                        }).error(function() {
                            console.log("数据请求错误");
                            alert("数据请求错误");
                        });
                    }
                }
                //编辑线
            $scope.editLineInner = function(data) {
                    if ($scope.figureId) {
                        var saveFigure = WLJS.getWebRoot() + "/rest/inner/platform/nodefig/saveFigure?figureId=";
                        $http.post(saveFigure + $scope.figureId, nodeFigDiagram.model.toJson()).success(function(res) {
                            if (res.ret == WLJS.ResultStatus.OK) {
                                $scope.editNode({ nodeData: data });
                            } else {
                                console.log("后台请求错误");
                                alert("后台请求错误");
                            }
                        }).error(function() {
                            console.log("数据请求错误");
                            alert("数据请求错误");
                        });
                    }
                }
                //加载数据
            $scope.load = function() {
                if ($scope.figureId) {
                    var getFigureById = WLJS.getWebRoot() + "/rest/inner/platform/nodefig/getFigureById?figureId=";
                    $.post(getFigureById + $scope.figureId, function(res) {
                        if (res.ret == 'ok') {
                            // var flowNodeData = JSON.parse(res.content);
                            if (res.content) {
                                nodeFigDiagram.model = go.Model.fromJson(res.content);
                            } else {
                                nodeFigDiagram.model = go.Model.fromJson({});
                            }
                        } else {
                            console.log("后台请求错误");
                            alert("后台请求错误");
                        }
                    }).error(function() {
                        console.log("数据请求错误");
                        alert("数据请求错误");
                    });
                    /* var modelData={
                    "class": "go.GraphLinksModel",
                    "linkFromPortIdProperty": "fromPort",
                    "linkToPortIdProperty": "toPort",
                    "nodeDataArray": [
                    {"key": -1, "loc": "175 0", "text": "Start21"},
                    {
                    "key": 1,
                    "loc": "175 100",
                    "text": "In a bowl, blend: 1 cup margarine, 1.5 teaspoon vanilla, 1 teaspoon salt"
                    }
                    ],
                    "linkDataArray": [
                    {"from": -1, "to": 1}
                    ]
                    };*/
                } else {
                    nodeFigDiagram.model = go.Model.fromJson({});
                }
            }
        },
        link: function(scope, elem, attr) { //如果使用compile，link会被忽略
            console.log();
        },
        compile: function(tele, tattrs, $filter, $http) { //compile返回的是一个函数，即link函数
            return {
                pre: function($scope, ele, attrs, $filter) {//在controller之前执行
                    $filter = $filter.$filter;
                    $scope.methods = {//定义供外部调用的方法集
                        setFigureId: function(figureId) {//定义供外部调用的方法
                            $scope.figureId = figureId;
                            $scope.load();
                        },
                        setFigNodeName: function(key, nodeName) {//定义供外部调用的方法
                            var node = nodeFigDiagram.model.findNodeDataForKey(key);
                            if (node) {
                                node.text = nodeName;
                                //更新节点
                                nodeFigDiagram.model.updateTargetBindings(node); // 这种更新似乎不会通知raiseDataChanged
                                // nodeFigDiagram.model.setDataProperty(node, "text", nodeName); // 也不更新，$apply还报错。
                                // nodeFigDiagram.layoutDiagram(false); //格式化画布，会自动变成横向
                                $scope.saveNodeInner();
                                // 手动重新加载
                                nodeFigDiagram.model = go.Model.fromJson(nodeFigDiagram.model.toJson());
                            }
                        },
                        setFigureData: function(figureData) {//定义供外部调用的方法
                            console.log("保存流程图");
                            // TODO 保存model
                            nodeFigDiagram.model = go.Model.fromJson(figureData);
                            $scope.saveNodeInner();
                            /*var saveFigure = WLJS.getWebRoot() + "/rest/inner/platform/nodefig/saveFigure?figureId=";
                            $http.post(saveFigure + $scope.figureId, figureData).success(function(res) {
                                if (res.ret == WLJS.ResultStatus.OK) {
                                    $scope.load();
                                } else {
                                    console.log("后台请求错误");
                                    alert("后台请求错误");
                                }
                            }).error(function() {
                                console.log("数据请求错误");
                                alert("数据请求错误");
                            });*/
                        },
                        deleteFigure: function() {//定义供外部调用的方法
                            $scope.deleteFigureInner();
                        },
                        deleteFigNode: function(key) { // 删除流程节点、定义供外部调用的方法
                            var node = nodeFigDiagram.model.findNodeDataForKey(key);
                            nodeFigDiagram.model.removeNodeData(node);
                            $scope.saveNodeInner();
                        }
                    };
                    $scope.init = function() {//初始化
                            //判断选取主题
                            if ($scope.theme == 'darkBlue') {
                                var nodefigTheme = darkBlue;
                            } else if ($scope.theme == 'blueWhite') {
                                var nodefigTheme = blueWhite;
                            } else {
                                var nodefigTheme = blueWhite;
                            }
                            document.getElementById("myDiagramDiv").style.backgroundColor = nodefigTheme.hbbjs;//流程框
                            document.getElementById("myDiagramDiv").style.opacity = nodefigTheme.hbbjtmd;
                            document.getElementById("myPaletteDiv").style.backgroundColor = nodefigTheme.gjlbjs;//操作框
                            document.getElementById("paletteDraggable").style.backgroundColor = nodefigTheme.gjlbjs;//操作框边框
                            document.getElementById("paletteDraggable").style.borderColor = nodefigTheme.gjlbks;
                            //判断赋值画布高度、整个流程图范围
                            var wlPlanNodefigObj = document.getElementById("nodefigObj");
                            if (wlPlanNodefigObj.offsetHeight < 100) {
                                wlPlanNodefigObj.style.height = "350px";
                            }
                            // ? 无用 if (window.goSamples) goSamples(); // init for these samples -- you don't need to call this
                            var $ = go.GraphObject.make; // for conciseness in defining templates
                            nodeFigDiagram =
                                $(go.Diagram, "myDiagramDiv", // must name or refer to the DIV HTML element
                                    {
                                        initialContentAlignment: go.Spot.Center,//对齐方式居中
                                        allowDrop: true, // must be true to accept drops from the Palette 必须从操作框往外拖拽
                                        "draggingTool.dragsLink": true, //允许线从面板拖动 
                                        "relinkingTool.isUnconnectedLinkValid": true, //允许线连接到节点
                                        "LinkDrawn": showLinkLabel, // this DiagramEvent listener is defined below
                                        "LinkRelinked": showLinkLabel,
                                        scrollsPageOnFocus: false,//在焦点上滚动页面
                                        // "clickCreatingTool.archetypeNodeData": {text: "Node", color: "white"},// allow double-click in background to create a new node
                                        "undoManager.isEnabled": false, // enable undo & redo 支持 Ctrl-Z 和 Ctrl-Y 操作
                                        isReadOnly: ($scope.readonly == true ? true : false), //只读
                                        //禁止横竖拖动和鼠标滚动，流程图整体的拖动
                                        allowHorizontalScroll: false,
                                        allowVerticalScroll: false,
                                        //默认不可连线，选盘选中直线才可
                                        allowLink: false,
                                        //移动节点
                                        allowMove: true,
                                        layout: $(go.LayeredDigraphLayout, {//布局
                                            isInitial: false,
                                            isOngoing: false, //?是否连续
                                            layerSpacing: 50 // 层间隔
                                        }),
                                        //禁止组团
                                        allowGroup: false,
                                        //设置最大选择数
                                        maxSelectionCount: 1,
                                        //延时布局
                                        delaysLayout: true,
                                        //禁止鼠标左键拖动多选
                                        "dragSelectingTool.isEnabled": false,
                                        //定义节点不可周边自行连线，只能从选盘拖动线
                                        allowLink: false,
                                    });
                            // nodeFigDiagram.layoutDiagram(true);//重新加载画布
                            // To simplify this code we define a function for creating a context menu button:
                            function makeButton(text, action, visiblePredicate) {
                                return $("ContextMenuButton",
                                    $(go.TextBlock, text), { click: action },
                                    // don't bother with binding GraphObject.visible if there's no predicate
                                    visiblePredicate ? new go.Binding("visible", "", function(o, e) {
                                        return o.diagram ? visiblePredicate(o, e) : false;
                                    }).ofObject() : {});
                            }

                            // a context menu is an Adornment with a bunch of buttons in them
                            var partContextMenu =
                                $(go.Adornment, "Vertical",
                                    makeButton("文本编辑",
                                        function(e, obj) {
                                            $scope.showWindowInner();
                                            e.diagram.commandHandler.editTextBlock();
                                        },
                                        function(o) {
                                            var temp = o.part.data.key;
                                            if (temp) {
                                                return true;
                                            }
                                            return false;
                                        }),
                                    makeButton("删除",
                                        function(e, obj) {
                                            e.diagram.commandHandler.deleteSelection();
                                            $scope.removeNodeInner();
                                        },
                                        function(o) {
                                            return o.diagram.commandHandler.canDeleteSelection();
                                        }),
                                );
                            // when the document is modified, add a "*" to the title and enable the "Save" button
                            nodeFigDiagram.addDiagramListener("Modified", function(e) {
                                var idx = document.title.indexOf("*");
                                if (nodeFigDiagram.isModified) {
                                    if (idx < 0) document.title += "*";
                                } else {
                                    if (idx >= 0) document.title = document.title.substr(0, idx);
                                }
                            });

                            // helper definitions for node templates
                            function nodeStyle() {
                                return [
                                    // The Node.location comes from the "loc" property of the node data,
                                    // converted by the Point.parse static method.
                                    // If the Node.location is changed, it updates the "loc" property of the node data,
                                    // converting back using the Point.stringify static method.
                                    new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
                                    {
                                        // the Node.location is at the center of each node
                                        locationSpot: go.Spot.Center
                                    }
                                ];
                            }

                            // Define a function for creating a "port" that is normally transparent.
                            // The "name" is used as the GraphObject.portId,
                            // the "align" is used to determine where to position the port relative to the body of the node,
                            // the "spot" is used to control how links connect with the port and whether the port
                            // stretches along the side of the node,
                            // and the boolean "output" and "input" arguments control whether the user can draw links from or to the port.
                            function makePort(name, align, spot, output, input) {
                                var horizontal = align.equals(go.Spot.Top) || align.equals(go.Spot.Bottom);
                                // the port is basically just a transparent rectangle that stretches along the side of the node,
                                // and becomes colored when the mouse passes over it
                                return $(go.Shape, {
                                    fill: "transparent", // changed to a color in the mouseEnter event handler 变色　　
                                    strokeWidth: 0, // no stroke
                                     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 user may draw links from here 声明用户是否可以从此处绘制链接
                                    toSpot: spot, // declare where links may connect at this port  声明链接可以在此端口连接的位置
                                    toLinkable: input, // declare whether the user may draw links to here  声　　明用户是否可以从此处绘制链接
                                    // cursor: "pointer", // show a different cursor to indicate potential link point
                                    mouseEnter: function(e, port) { // the PORT argument will be this Shape
                                        // if (!e.diagram.isReadOnly) port.fill = "rgba(255,0,255,0.5)";
                                        if (!e.diagram.isReadOnly) port.fill = "transparent";
                                    },
                                    mouseLeave: function(e, port) {
                                        port.fill = "transparent";
                                    }
                                });
                            }

                            //重写复制ctrl+c
                            nodeFigDiagram.commandHandler.copySelection = function(obj) {
                                // go.CommandHandler.prototype.copySelection.call(nodeFigDiagram.commandHandler);//注意，这句话就是调用原有API提供的操作进行复制。
                            }

                            function textStyle() {
                                return {
                                    font: nodefigTheme.jdzcztys,
                                    stroke: nodefigTheme.jdztys,
                                    isMultiline: false,
                                    //省略过长文本
                                    maxLines: 1,
                                    overflow: go.TextBlock.OverflowEllipsis,
                                     160
                                }
                            }

                            //选中修饰
                            var nodeSelectionAdornmentTemplate = $(go.Adornment, "Auto",
                                $(go.Shape, "Rectangle", {
                                    fill: "#00A1FD",
                                    stroke: null,
                                    strokeWidth: 1,
                                     140
                                }),
                                $(go.Placeholder),
                                $(go.TextBlock, {
                                        stroke: "#FFFFFF",
                                        font: nodefigTheme.jdxzztys,
                                        isMultiline: false,
                                        maxLines: 1,
                                        overflow: go.TextBlock.OverflowEllipsis,
                                         140
                                    }, {
                                        margin: 8,
                                        maxSize: new go.Size(130, NaN),
                                        wrap: go.TextBlock.WrapFit,
                                        editable: true
                                    },
                                    new go.Binding("text").makeTwoWay()), { // this tooltip Adornment is shared by all nodes
                                    toolTip: $(go.Adornment, "Auto",
                                        $(go.Shape, { fill: "#FFFFCC" }),
                                        $(go.TextBlock, { margin: 4 }, // the tooltip shows the result of calling nodeInfo(data)
                                            new go.Binding("text", "", nodeInfo))
                                    ),
                                },
                            );

                            function nodeInfo(d) { // Tooltip info for a node data object
                                return d.text;
                            }

                            // define the Node templates for regular nodes
                            nodeFigDiagram.nodeTemplateMap.add("", // the default category
                                $(go.Node, "Table", nodeStyle(),
                                    // the main object is a Panel that surrounds a TextBlock with a rectangular Shape
                                    $(go.Panel, "Auto",
                                        $(go.Shape, "Rectangle", {
                                                fill: nodefigTheme.hbbjs,
                                                stroke: nodefigTheme.jdbkys,
                                                strokeWidth: nodefigTheme.jdbkkd,
                                                 140,
                                                height: 50,
                                            },
                                            new go.Binding("figure", "figure"),
                                            new go.Binding("fill", "fill")
                                        ),
                                        $(go.TextBlock, textStyle(), {
                                                margin: 8,
                                                maxSize: new go.Size(130, NaN),
                                                wrap: go.TextBlock.WrapFit,
                                                editable: true
                                                    // editable: false
                                            },
                                            new go.Binding("text").makeTwoWay()),
                                        // { // this tooltip Adornment is shared by all nodes
                                        // // this context menu Adornment is shared by all nodes
                                        // contextMenu: partContextMenu
                                        // },
                                    ), { //设置其可选择
                                        selectable: true,
                                        selectionAdornmentTemplate: nodeSelectionAdornmentTemplate
                                    },
                                    // four named ports, one on each side:
                                    makePort("T", go.Spot.Top, go.Spot.TopSide, false, 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, false), {
                                        mouseLeave: function(e, node) {
                                            console.log(node.part.data);
                                            // angular.element("#myDiagramDiv").scope().nodeFocusOut(node.part.data);
                                            // $scope.nodeFocusOutInner();
                                        },
                                        //选择节点变色
                                        selectionChanged: function(part) {
                                            //更新节点文本
                                            nodeFigDiagram.model.updateTargetBindings(part.data);
                                        },
                                    }, { // this tooltip Adornment is shared by all nodes
                                        toolTip: $(go.Adornment, "Auto",
                                            $(go.Shape, { fill: "#FFFFCC" }),
                                            $(go.TextBlock, { margin: 4 }, // the tooltip shows the result of calling nodeInfo(data)
                                                new go.Binding("text", "", nodeInfo))
                                        ),
                                    },
                                ));

                            nodeFigDiagram.nodeTemplateMap.add("Start",
                                $(go.Node, "Table", nodeStyle(),
                                    $(go.Panel, /*"Vertical",*/ "Auto",
                                        $(go.Shape,
                                            // "Circle",
                                            // {maxSize: new go.Size(25, 25), fill: "#DC3C00", strokeWidth: 0}//整圆，不是圆环
                                            {
                                                geometryString: "F1 M 0,0 a10,10 0 1,0 1,0 z F1 M 0,-3 a13,13 0 1,0 1,0 z",
                                                fill: "#49CC12",
                                                margin: 0,
                                                strokeWidth: 2,
                                                stroke: "white",
                                            }),
                                        // $(go.TextBlock, textStyle(), {
                                        //         margin: 8,
                                        //         maxSize: new go.Size(160, NaN),
                                        //         wrap: go.TextBlock.WrapFit,
                                        //         editable: true
                                        //         // editable: false
                                        //     },
                                        //     new go.Binding("text").makeTwoWay()),
                                    ), { //设置其可选择
                                        selectable: true,
                                        selectionAdornmentTemplate: $(go.Adornment, "Auto",
                                            $(go.Shape, {
                                                fill: null,
                                                stroke: "deepskyblue",
                                                strokeWidth: 2,
                                            }),
                                            $(go.Placeholder))
                                    },
                                    // three named ports, one on each side except the top, all output only:
                                    makePort("L", go.Spot.Left, go.Spot.Left, true, false),
                                    makePort("R", go.Spot.Right, go.Spot.Right, true, false),
                                    makePort("B", go.Spot.Bottom, go.Spot.Bottom, true, false)
                                ));

                            nodeFigDiagram.nodeTemplateMap.add("End",
                                $(go.Node, "Table", nodeStyle(),
                                    $(go.Panel, "Vertical",
                                        $(go.Shape,
                                            // "Circle",
                                            // {maxSize: new go.Size(25, 25), fill: "#DC3C00", strokeWidth: 0}//整圆，不是圆环
                                            {
                                                geometryString: "F1 M 0,0 a10,10 0 1,0 1,0 z F1 M 0,-3 a13,13 0 1,0 1,0 z",
                                                fill: "#DC3C00",
                                                margin: 0,
                                                strokeWidth: 2,
                                                stroke: "white",
                                            }),
                                    ), { //设置其可选择
                                        selectable: true,
                                        selectionAdornmentTemplate: $(go.Adornment, "Auto",
                                            $(go.Shape, {
                                                fill: null,
                                                stroke: "deepskyblue",
                                                strokeWidth: 2,
                                            }),
                                            $(go.Placeholder))
                                    },
                                    // three named ports, one on each side except the bottom, all input only:
                                    makePort("T", go.Spot.Top, go.Spot.Top, false, true),
                                    makePort("L", go.Spot.Left, go.Spot.Left, false, true),
                                    makePort("R", go.Spot.Right, go.Spot.Right, false, true)
                                ));


                            // replace the default Link template in the linkTemplateMap
                            nodeFigDiagram.linkTemplate =
                                $(go.Link, // the whole link panel
                                    {
                                        // routing: go.Link.AvoidsNodes,//线段都是垂直的线
                                        routing: go.Link.Bezier, //线段都是直（曲）线
                                        curve: go.Link.JumpOver,
                                        corner: 5,
                                        toShortLength: 4,
                                        relinkableFrom: true,
                                        relinkableTo: true,
                                        reshapable: true,
                                        resegmentable: true,
                                        // mouse-overs subtly highlight links:
                                        mouseEnter: function(e, link) {
                                            link.findObject("HIGHLIGHT").stroke = "rgba(30,144,255,0.2)";
                                        },
                                        mouseLeave: function(e, link) {
                                            link.findObject("HIGHLIGHT").stroke = "transparent";
                                        },
                                        selectionAdorned: false
                                    },
                                    new go.Binding("points").makeTwoWay(), //显示线的坐标
                                    $(go.Shape, // the highlight shape, normally transparent
                                        { isPanelMain: true, strokeWidth: 8, stroke: "transparent", name: "HIGHLIGHT" }),
                                    $(go.Shape, // the link path shape
                                        { isPanelMain: true, stroke: "#27AFFC", strokeWidth: 2 },
                                        new go.Binding("stroke", "isSelected", function(sel) {
                                            return sel ? "dodgerblue" : "#27AFFC";
                                        }).ofObject()),
                                    $(go.Shape, // the arrowhead
                                        { toArrow: "standard", strokeWidth: 0, fill: "#27AFFC" }),
                                    $(go.Panel, "Auto", // the link label, normally not visible
                                        { visible: false, name: "LABEL", segmentIndex: 2, segmentFraction: 0.5 },
                                        new go.Binding("visible", "visible").makeTwoWay(),
                                        $(go.Shape, "RoundedRectangle", // the label shape
                                            { fill: "#F8F8F8", strokeWidth: 0 }),
                                        $(go.TextBlock, "Yes", // the label
                                            {
                                                textAlign: "center",
                                                font: "14px helvetica, arial, sans-serif",
                                                stroke: "#333333",
                                                editable: true
                                            },
                                            new go.Binding("text").makeTwoWay())
                                    ),
                                );
                            // Make link labels visible if coming out of a "conditional" node.
                            // This listener is called by the "LinkDrawn" and "LinkRelinked" DiagramEvents.
                            function showLinkLabel(e) {
                                var label = e.subject.findObject("LABEL");
                                if (label !== null) label.visible = (e.subject.fromNode.data.category === "Conditional");
                            }

                            // temporary links used by LinkingTool and RelinkingTool are also orthogonal:
                            nodeFigDiagram.toolManager.linkingTool.temporaryLink.routing = go.Link.Orthogonal;
                            nodeFigDiagram.toolManager.relinkingTool.temporaryLink.routing = go.Link.Orthogonal;
                            $scope.load(); // load an initial diagram from some JSON text
                            //选盘连线选中事件
                            function onSelectionChanged(allowLink) {
                                //定义节点不可周边自行连线，只能从选盘拖动线
                                nodeFigDiagram.allowLink = false;
                                console.log(allowLink.Ai);
                                //选中选盘的直线时，不可选择移动节点
                                if (allowLink.Ai == null) { //null时为选中选盘直线状态
                                    nodeFigDiagram.allowMove = false;
                                } else { //反之
                                    nodeFigDiagram.allowMove = true;
                                }
                            }

                            // initialize the Palette that is on the left side of the page
                            nodeFigPalette =
                                $(go.Palette, "myPaletteDiv", // must name or refer to the DIV HTML element
                                    {
                                        maxSelectionCount: 1,
                                        scrollsPageOnFocus: false,
                                        // nodeTemplateMap: nodeFigDiagram.nodeTemplateMap, // share the templates used by nodeFigDiagram//下面重写面板Palette的节点样式，字体在节点下面
                                        linkTemplate: // simplify the link template, just in this Palette
                                            $(go.Link, {
                                                selectionChanged: onSelectionChanged
                                            }, { // because the GridLayout.alignment is Location and the nodes have locationSpot == Spot.Center,
                                                // to line up the Link in the same manner we have to pretend the Link has the same location spot
                                                locationSpot: go.Spot.Top,
                                                selectionAdornmentTemplate: $(go.Adornment, "Link", { locationSpot: go.Spot.Top },
                                                    $(go.Shape, {
                                                        isPanelMain: true,
                                                        fill: null,
                                                        stroke: "deepskyblue",
                                                        strokeWidth: 0,
                                                    }),
                                                    $(go.Shape, // the arrowhead
                                                        { toArrow: "Standard", stroke: null, fill: "deepskyblue" })
                                                ),
                                            }, {
                                                routing: go.Link.AvoidsNodes,
                                                curve: go.Link.JumpOver,
                                                corner: 5,
                                                toShortLength: 4,
                                            },
                                            new go.Binding("points"),
                                            $(go.Shape, // the link path shape
                                                {
                                                    isPanelMain: true,
                                                    strokeWidth: 2,
                                                    stroke: nodefigTheme.gjlztys,
                                                }),
                                            $(go.Shape, // the arrowhead
                                                {
                                                    toArrow: "Standard",
                                                    stroke: nodefigTheme.gjlztys,
                                                    fill: nodefigTheme.gjlztys
                                                }),
                                            $(go.TextBlock, {
                                                    margin: 0,
                                                    font: nodefigTheme.gjlzcztys,
                                                    stroke: nodefigTheme.gjlztys,
                                                    spacingAbove: 10, //上面距离
                                                    spacingBelow: -28, //下距离
                                                    // wrap: go.TextBlock.OverflowEllipsis,
                                                    //  72,
                                                    // textAlign: "center"
                                                },
                                                new go.Binding('text', 'text')),
                                        ),
                                    },
                                );
                            nodeFigPalette.nodeTemplate =
                                $(go.Node, "Vertical", {
                                        locationObjectName: "TB",
                                        locationSpot: go.Spot.Center,
                                        selectionAdornmentTemplate: $(go.Adornment, "Auto",
                                            $(go.Shape, {
                                                margin: 0,
                                                fill: null,
                                                stroke: "deepskyblue",
                                                strokeWidth: 2
                                            }),
                                            $(go.Placeholder)
                                        ),
                                    },
                                    $(go.Shape, {
                                             25,
                                            height: 20,
                                            fill: nodefigTheme.hbbjs,
                                            stroke: nodefigTheme.gjlztys
                                        },
                                        new go.Binding("fill", "color")
                                    ),
                                    $(go.TextBlock, {
                                            font: nodefigTheme.gjlzcztys,
                                            stroke: nodefigTheme.gjlztys,
                                        }, {
                                            margin: 3,
                                            maxSize: new go.Size(160, NaN),
                                            wrap: go.TextBlock.WrapFit,
                                            editable: true,
                                            // editable: false
                                            wrap: go.TextBlock.OverflowEllipsis,
                                            //  72,
                                            textAlign: "center"
                                        },
                                        new go.Binding("text").makeTwoWay()),
                                );

                            nodeFigPalette.nodeTemplateMap.add("Start",
                                $(go.Node, "Table", nodeStyle(), {
                                        selectionAdornmentTemplate: $(go.Adornment, "Auto",
                                            $(go.Shape, {
                                                margin: 0,
                                                fill: null,
                                                stroke: "deepskyblue",
                                                strokeWidth: 2
                                            }),
                                            $(go.Placeholder)
                                        ),
                                    },
                                    $(go.Panel, "Vertical",
                                        $(go.Shape,
                                            // "Circle",
                                            // {maxSize: new go.Size(25, 25), fill: "#DC3C00", strokeWidth: 0}//整圆，不是圆环
                                            {
                                                geometryString: "F1 M 0,0 a10,10 0 1,0 1,0 z F1 M 0,-3 a13,13 0 1,0 1,0 z",
                                                fill: "#49CC12",
                                                margin: 0,
                                                strokeWidth: 2,
                                                stroke: "white",
                                            }),
                                        $(go.TextBlock, "Start", {
                                                font: nodefigTheme.gjlzcztys,
                                                stroke: nodefigTheme.gjlztys,
                                                wrap: go.TextBlock.OverflowEllipsis,
                                                //  72,
                                                textAlign: "center"
                                            },
                                            new go.Binding("text"))
                                    ),
                                    // three named ports, one on each side except the top, all output only:
                                    makePort("L", go.Spot.Left, go.Spot.Left, true, false),
                                    makePort("R", go.Spot.Right, go.Spot.Right, true, false),
                                    makePort("B", go.Spot.Bottom, go.Spot.Bottom, true, false)
                                ));

                            nodeFigPalette.nodeTemplateMap.add("End",
                                $(go.Node, "Table", nodeStyle(), {
                                        selectionAdornmentTemplate: $(go.Adornment, "Auto",
                                            $(go.Shape, {
                                                margin: 0,
                                                fill: null,
                                                stroke: "deepskyblue",
                                                strokeWidth: 2
                                            }),
                                            $(go.Placeholder)
                                        ),
                                    },
                                    $(go.Panel, "Vertical",
                                        $(go.Shape,
                                            // "Circle",
                                            // {maxSize: new go.Size(25, 25), fill: "#DC3C00", strokeWidth: 0}//整圆，不是圆环
                                            {
                                                geometryString: "F1 M 0,0 a10,10 0 1,0 1,0 z F1 M 0,-3 a13,13 0 1,0 1,0 z",
                                                fill: "#DC3C00",
                                                margin: 0,
                                                strokeWidth: 2,
                                                stroke: "white",
                                            }),
                                        $(go.TextBlock, "End", {
                                                font: nodefigTheme.gjlzcztys,
                                                stroke: nodefigTheme.gjlztys,
                                                wrap: go.TextBlock.OverflowEllipsis,
                                                //  72,
                                                textAlign: "center"
                                            },
                                            new go.Binding("text"))
                                    ),
                                    // three named ports, one on each side except the bottom, all input only:
                                    makePort("T", go.Spot.Top, go.Spot.Top, false, true),
                                    makePort("L", go.Spot.Left, go.Spot.Left, false, true),
                                    makePort("R", go.Spot.Right, go.Spot.Right, false, true)
                                ));

                            //选盘model赋值
                            setTimeout(function() {
                                nodeFigPalette.model = new go.GraphLinksModel([ // specify the contents of the Palette
                                    {
                                        category: "Start",
                                        text: $filter('translate')('Start') /*开始*/
                                    },
                                    {
                                        category: "End",
                                        text: $filter('translate')('End') /*结束*/
                                    },
                                    {
                                        text: $filter('translate')('Disposal') /*处置*/
                                    },
                                ], [
                                    // the Palette also has a disconnected Link, which the user can drag-and-drop
                                    {
                                        points: new go.List(go.Point).addAll([new go.Point(25, 0), new go.Point(0, 20)]),
                                        text: $filter('translate')('ConnectingLine'), //连线
                                    },
                                ]);
                            }, 300);

                            //工具条
                            nodeFigPalette.addDiagramListener("InitialLayoutCompleted", function(diagramEvent) {
                                var pdrag = document.getElementById("paletteDraggable");
                                var palette = diagramEvent.diagram;
                                pdrag.style.width = palette.documentBounds.width + 28 + "px"; // account for padding/borders
                                // pdrag.style.width = "86px"; // account for padding/borders
                                pdrag.style.height = palette.documentBounds.height + 23 + "px";
                            });

                            //监听新拖拽到画布的节点
                            nodeFigPalette.addModelChangedListener(function(evt) {
                                // ignore unimportant Transaction events
                                if (!evt.isTransactionFinished) return;
                                var txn = evt.object; // a Transaction
                                if (txn === null) return;
                                // iterate over all of the actual ChangedEvents of the Transaction
                                txn.changes.each(function(e) {
                                    console.log(" removed node with key");
                                });
                            });
                            //监听新拖拽的连线
                            nodeFigPalette.addModelChangedListener(function(evt) {
                                // ignore unimportant Transaction events
                                if (!evt.isTransactionFinished) return;
                                var txn = evt.object; // a Transaction
                                if (txn === null) return;
                                // iterate over all of the actual ChangedEvents of the Transaction
                                txn.changes.each(function(e) {
                                    console.log("removed link");
                                });
                            });
                            //第二种
                            /*节点生成事件    externalobjectsdropped
                            线生成事件   LinkDrawn
                            线重新连接事件 LinkRelinked
                            删除后事件   SelectionDeleted
                            删除前事件   SelectionDeleting 例子入口
                            节点移动事件  SelectionMoved
                            */
                            //节点或线的正在删除事件监听
                            nodeFigDiagram.addDiagramListener("SelectionDeleting", function(e) {
                                e.subject.each(function(n) {
                                    //n为删除节点或线的对象
                                    console.log(n.data);
                                    //只读模式，不可删除
                                    if ($scope.readonly == true) {
                                        //不允许删除，给e.cancel赋值
                                        e.cancel = true;
                                    }
                                });
                            });
                            //节点或线的删除完成事件监听
                            nodeFigDiagram.addDiagramListener("SelectionDeleted", function(e) {
                                var allDeleteDataArray = [];
                                e.subject.each(function(n) {
                                    console.log(n.data.key);
                                    console.log("节点或线的删除事件监听");
                                    allDeleteDataArray.push(n.data);
                                    if (n.data.key) {
                                        $scope.removeNodeInner(n.data);
                                    } else {
                                        $scope.removeLineInner(n.data);
                                    }
                                });
                            });
                            //移动完成监听
                            nodeFigDiagram.addDiagramListener("SelectionMoved", function(e) {
                                e.subject.each(function(n) {
                                    console.log(n.data.key);
                                    console.log("移动完成监听");
                                    $scope.moveNodeInner(n.data);
                                });
                            });
                            //画线完成监听
                            nodeFigDiagram.addDiagramListener("LinkDrawn", function(e) {
                                console.log(e.subject.part.data);
                                console.log("画线完成监听");
                                var data = e.subject.part.data;
                                setTimeout(function() {
                                    if (data.from && data.to) {
                                        $scope.editLineInner(data);
                                    } else {
                                        e.diagram.commandHandler.redo();
                                    }
                                }, 100);
                            });
                            //重新画线指派完成监听
                            nodeFigDiagram.addDiagramListener("LinkRelinked", function(e) {
                                console.log(e.subject.part.data);
                                console.log("重新画线指派完成监听");
                                var data = e.subject.part.data;
                                setTimeout(function() {
                                    if (data.from && data.to) {
                                        $scope.editLineInner(data);
                                    } else {
                                        e.diagram.commandHandler.redo();
                                    }
                                }, 100);
                            });
                            var times = null;
                            //点击节点监听
                            nodeFigDiagram.addDiagramListener("ObjectSingleClicked", function(e) {
                                // 取消上次延时未执行的方法
                                clearTimeout(times);
                                times = setTimeout(function() {
                                    if (e.subject.part.data.key) {
                                        console.log("点击节点监听");
                                        $scope.nodeOnClickInner(e.subject.part.data);
                                    }
                                }, 300);
                            });
                            //节点新增监听-双击
                            nodeFigDiagram.addDiagramListener("PartCreated", function(e) {
                                console.log(e.subject.part);
                                console.log("节点新增监听");
                            });
                            //节点新增监听-拖拽
                            nodeFigDiagram.addDiagramListener("ExternalObjectsDropped", function(e) {
                                console.log(e.subject.Ea.value.$d);
                                console.log("节点新增监听");
                                if (e.subject.Ea.value.$d.key) {
                                    $scope.createNodeInner(e.subject.Ea.value.$d);
                                }
                            });
                            //节点文本修改完成监听
                            nodeFigDiagram.addDiagramListener("TextEdited", function(e) {
                                console.log(e.subject.part.data);
                                console.log("节点文本修改完成监听");
                                // nodeFigDiagram.layoutDiagram(true);//重新加载画布
                                $scope.editNodeInner(e.subject.part.data);
                                $scope.saveNodeInner(e.subject.part.data);
                            });
                            //右键事件
                            nodeFigDiagram.addDiagramListener("ObjectContextClicked", function(e) {
                                console.log(e.subject.part.data);
                                console.log("右键事件监听");
                                /*if ($scope.readonly != true) {
                                    $scope.showWindowInner(e.subject.part.data);
                                }*/
                            });
                            //背景点击一次
                            nodeFigDiagram.addDiagramListener("BackgroundSingleClicked", function(e) {
                                console.log("节点文本修改完成监听");
                                $scope.nodeFocusOutInner();
                            });
                            //双击节点重命名（编辑）会先执行单击的监听，再执行双击的监听
                            nodeFigDiagram.addDiagramListener("ObjectDoubleClicked", function(e) {
                                // 取消上次延时未执行的方法
                                clearTimeout(times);
                                console.log("双击节点编辑监听");
                                if ($scope.readonly != true) {
                                    $scope.showWindowInner(e.subject.part.data);
                                }
                            });
                        } // end init
                    $scope.init();
                },
                post: function($scope, ele, attrs) {
                    console.log();
                }
            }
        }
    }
});