GoJS、AngularJS自定义组件JS SDK注解参考
下面是一个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 width: 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, width: 160 } } //选中修饰 var nodeSelectionAdornmentTemplate = $(go.Adornment, "Auto", $(go.Shape, "Rectangle", { fill: "#00A1FD", stroke: null, strokeWidth: 1, width: 140 }), $(go.Placeholder), $(go.TextBlock, { stroke: "#FFFFFF", font: nodefigTheme.jdxzztys, isMultiline: false, maxLines: 1, overflow: go.TextBlock.OverflowEllipsis, width: 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, width: 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, // width: 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, { width: 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, // width: 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, // width: 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, // width: 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(); } } } } });
