在Angular项⽬中使⽤GoJS
本⽂章主要介绍了在Angular中怎么使⽤GoJS，以及去除⽔印，怎么使⽤GoJS提供的扩展
在angular项⽬中使⽤GoJS
1. 安装
npm install gojs --save
2. 引⼊
import * as go from 'gojs';
3. 申明
const $ = go.GraphObject.make;
4.初始化
ngOnInit(): void {
this.diagram1 = this.initModel("myDiagramDiv");
}
initModel(divId) {
var diagram =
$(go.Diagram, divId,
{
initialContentAlignment: go.Spot.Center,//图像居中
layout: $(go.TreeLayout, //设置树形图布局
{ nodeSpacing: 15, layerSpacing: 30 } //设置节点之间的间距，angle属性可以设置旋转，值有90，180
)
});
$(go.Node,
$(go.Panel, "Auto", {
//⿏标移⼊移除效果
mouseEnter:(e, obj) => {
this.diagramMouseEnter(e, obj.part)
},
mouseLeave:(e, obj) => {
this.diagramMouseLeave(e, obj.part)
},
//点击事件
click: (e, obj) => {
this.click(e, obj.part)
}
// mouseEnter: this.diagramMouseEnter, mouseLeave: this.diagramMouseLeave
},//设置⿏标与节点的互动事件
$(go.Shape, "RoundedRectangle", { name: "SHAPE" },//设置属性名，为了之后快速查go.Shape相关属性值            // new go.Binding("a", "b"))格式是动态绑定，将传⼊数据的b值绑定节点的shape的a属性。
new go.Binding("width", "width"),
new go.Binding("height", "height"),
new go.Binding("fill", "color"),
new go.Binding("figure", "fig"),
new go.Binding("stroke", "stroke")),
//设置⽔平排列
$(go.Panel, "Horizontal",
//设置图⽚
$(go.Picture, { source: "favicon.ico", width: 20, height: 20,cursor:"pointer" }, new go.Binding("source", "img")),
//设置⽂本格式
$(go.TextBlock,
{
{
name: "TEXT",
font: " 13px Helvetica, sans-serif",
margin: 3,
cursor:"pointer"
},
new go.Binding("stroke", "fontColor"),
new go.Binding("text", "key")
)),
),
),
);
diagram.linkTemplate =
$(go.Link,  // the whole link panel
{ selectable: false },
$(go.Shape));  // the link shape
//设置节点之间的连线属性
diagram.linkTemplate =
$(go.Link,
{ selectable: false },
$(go.Shape, { fill: "dodgerblue", stroke: "dodgerblue" }),
angular安装$(go.Shape, { toArrow: "Feather", fill: "dodgerblue", stroke: "null" })      );
return diagram;
}
//创建事件⽅法，添加过程在初始化模型中有介绍
diagramMouseEnter(e, obj) {
//需要先定义name
var shape = obj.findObject("SHAPE");
shape.fill = "#d3e6f8";
shape.stroke = "#8dc5fa";
var text = obj.findObject("TEXT");
text.stroke = "#000";
};
diagramMouseLeave(e, obj) {
//⿏标离开节点触发
var shape = obj.findObject("SHAPE");
shape.fill = obj['ob'].color||"#fff";
shape.stroke = "#000";
var text = obj.findObject("TEXT");
text.stroke = obj['ob'].fontColor||"#000";
};
click(e,obj){
console.log(obj)
}
5.配置要显⽰的数据
ngOnInit(): void {
this.diagram1 = this.initModel("myDiagramDiv");    //要展⽰的数据
let data = [
{
"key": "JF_ERP26",
"name": "JF_ERP",
"color": "#3c5f84",
"fig": "RoundedRectangle",
"stroke": null,
"width": 90,
"height": 45,
"fontColor": "white"
},
{
"key": "采购订单确认27",
"name": "采购订单确认 / SCP-ERP-002",
"color": "#52b4e0",
"fig": "RoundedRectangle",
"stroke": null,
"width": null,
"height": 32,
"fontColor": "black",
"parent": "JF_ERP26",
"servNo": "SCP-ERP-002",
"fromSys": "JF_ERP",
"toSys": "JF_WMS",
"techType": "webservice",
"servOper": null
},
{
"key": "JF_WMS28",
"name": "JF_WMS",
"color": "#84dcfb",
"fig": "RoundedRectangle",
"stroke": null,
"width": null,
"height": 32,
"fontColor": "black",
"parent": "采购订单确认27"
},
{
"key": "JF_SCP29",
"name": "JF_SCP",
"color": "#84dcfb",
"fig": "RoundedRectangle",
"stroke": null,
"width": null,
"height": 32,
"fontColor": "black",
"parent": "采购订单确认27"
}
]
//将数据加载到 this.diagram1模型
var model1 = $(go.TreeModel);
del = model1;
}
去除左上⾓的⽔印⽅法
gojs版本：@2.1.56
修改⽂件地址：node_modules\gojs\release\go.js
搜索`5da73c80a36455d5038e4972187c3cae51fd22
屏蔽掉以下代码：
/*b[c]=Qa("398c3597c01238");
for(var d=["5da73c80a36455d5038e4972187c3cae51fd22",
ra.Dx+"4ae6247590da4bb21c324ba3a84e385776",
ld.xF+"fb236cdfda5de14c134ba1a95a2d4c7cc6f93c1387",
L.za],e=1;5>e;e++)b[Qa("7ca11abfd7330390")](Qa(d[e-1]),10,15*e);
b[c]=Qa("39f046ebb36e4b");
for(c=1;5>c;c++)b[Qa("7ca11abfd7330390")](Qa(d[c-1]),10,15*c);
if(4!==d.length||"5"!==d[0][0]||"7"!==d[3][0])ld.prototype.Jd=ld.prototype.Zx;*/
完成(版本不同，可能有区别)
在angular项⽬中怎么使⽤gojs提供的扩展
在tsconfig.app.json中的include加⼊:
"include": [
...
"./node_modules/gojs/extensionsTs/*.ts"
]
然后在需要使⽤的页⾯的ts⽂件引⼊：
我这⾥以DoubleTreeLayout为例
import { DoubleTreeLayout } from 'gojs/extensionsTS/DoubleTreeLayout';
使⽤：
var diagram =
$(go.Diagram, divId,
{
initialContentAlignment: go.Spot.Center,//图像居中
layout: $(DoubleTreeLayout, //设置树形图布局
{
//vertical: true,  // default directions are horizontal
// choose whether this subtree is growing towards the right or towards the left:              directionFunction: function (n) { return n.data && n.data.dir !== "left"; },
// controlling the parameters of each TreeLayout:
// bottomRightOptions: { nodeSpacing: 0, layerSpacing: 20 },
// topLeftOptions: { alignment: go.TreeLayout.AlignmentStart },
}
)
});

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。