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();
}
}
}
}
});
GoJS、AngularJS自定义组件JS SDK注解参考的更多相关文章
- 微信小程序 导航（a 连接）自定义组件
导航:navigator 组件 组件上的属性: target:跳到其他小程序( 默认是当前小程序 ),当属性值为 miniProgram 时,跳到别的小程序(如果要跳到别的小程序,需要填写 appid ...
- Vue自定义组件实现v-model指令
Tips: 本文所描述的Vue均默认是Vue2版本 在我们初次接触Vue的时候,一定会了解到一个语法糖,那就是v-model指令,它带给我们的第一印象就是它可以实现双向绑定 那么,什么是双向绑定?通俗 ...
- Vue结合原生js实现自定义组件自动生成
就目前三大前端主流数据驱动框架(vue,ng,react)而言,均具有创建自定义组件的api,但都是必须先做到事先写好挂载点,这个挂载点可以是原有静态元素标签也可以是自定义模板:对于多种组件通过同一数 ...
- 【Spring注解驱动开发】自定义组件如何注入Spring底层的组件？看了这篇我才真正理解了原理！！
写在前面 最近,很多小伙伴出去面试都被问到了Spring问题,关于Spring,细节点很多,面试官也非常喜欢问一些很细节的技术点.所以,在 Spring 专题中,我们尽量把Spring的每个技术细节说 ...
- 原生js也可以自定义组件
Web Components 是一套不同的技术,允许您创建可重用的定制元素(它们的功能封装在您的代码之外)并且在您的web应用中使用它们. 它由三项主要技术组成,它们可以一起使用来创建封装功能的定制元 ...
- JS SDK 随手笔记
JS SDK 随手笔记 窗口模块 Frame/Multi Frame 对话框 页面间的通讯 生命周期 窗口层叠 窗口模块 窗口模块是是AppCan移动应用界面最基本的单位.窗口是每个界面布局的基础,他 ...
- Android开发——构建自定义组件
Android中,你的应用程序程序与View类组件有着一种固定的联系,例如按钮(Button). 文本框(TextView), 可编辑文本框(EditText), 列表框(ListView), 复选框 ...
- ExtJS 自定义组件
主要参考的是官方文档 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...
- vue.js2.0 自定义组件初体验
理解 组件(Component)是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素, Vue.js 的编译器为它添加特殊功能.在有些情况 ...
随机推荐
- php 安装 swoole
1.安装swoole cd /usr/local/src wget https://github.com/swoole/swoole-src/archive/v1.9.1-stable.tar.gz ...
- vue 之 axios Vue路由与element-UI
一. 在组件中使用axios获取数据 1. 安装和配置axios 默认情况下,我们的项目中并没有对axios包的支持,所以我们需要下载安装. 在项目根目录中使用 npm安装包 npm install ...
- 简单描述MySQL常用引擎的特点及MySQL的逻辑架构
目录 表的分类数据库引擎? 首先得说说mysql的逻辑架构,它整体分为3层: 常用引擎: 补充知识点: 表的分类数据库引擎? 引擎是什么? 引擎就是一个系统最核心的部分,比如汽车的发动机,人的心脏 数 ...
- frp 配置
前言 对于没有公网 IP 的内网用户来说,远程管理或在外网访问内网机器上的服务是一个问题. 今天给大家介绍一款好用内网穿透工具 FRP,FRP 全名:Fast Reverse Proxy.FRP 是一 ...
- Python学习笔记009
不换行 print("Hello,world!",end='')print("Hello,world!",end='')print("Hello,wo ...
- 如何用C++读取图片中的像素
来源:https://bbs.csdn.net/topics/391956973 3楼 #include <iostream> #include <fstream> #inc ...
- [swscaler @ ...] deprecated pixel format used, make sure you did set range correctly
我自己在使用如下函数进行转换时报的错 int sws_scale(struct SwsContext *c, const uint8_t *const srcSlice[], const int sr ...
- Python 基础之面向对象类的继承与多态
一.继承 定义:一个类除了拥有自身的属性方法之外,还拥有另外一个类的属性和方法继承: 1.单继承 2.多继承子类: 一个类继承了另外一个类,那么这个类是子类(衍生类)父类:一个类继承了另外一个类,被继 ...
- Java 实现简单的人机猜拳游戏
import java.util.Scanner; import java.util.Random; public class TestGuess{ public static void main(S ...
- Redis有序集合类型
命令 增加元素 ZADD score member [score member ...] > ZADD scoreboard 89 Tom 76 Peter 100 David (integer ...