5. gojs的配置和常用设置
郏实
gojs
一、配置参数详解
var rps = [
[
{
key: "001",
title: "标题文字",
text: "#tab",
"bgSrc": "./images/bg01.png",
"iconSrc": "./images/icon01.png"
},
{
key: "002",
title: "标题文字",
text: "这是一段描述文字",
"bgSrc": "./images/bg01.png",
"iconSrc": "./images/icon02.png"
},
{
key: "003",
title: "标题文字",
text: "这是一段描述文字",
"bgSrc": "./images/bg01.png",
"iconSrc": "./images/icon03.png"
},
{
key: "004",
title: "标题文字",
text: "这是一段描述文字",
"bgSrc": "./images/bg01.png",
"iconSrc": "./images/icon04.png"
},
{
key: "005",
title: "标题文字",
text: "这是一段描述文字",
"bgSrc": "./images/bg01.png",
"iconSrc": "./images/icon05.png"
},
{
key: "006",
title: "标题文字",
text: "这是一段描述文字",
"bgSrc": "./images/bg01.png",
"iconSrc": "./images/icon06.png"
},
{
key: "011",
title: "标题文字",
text: "这是一段描述文字",
"bgSrc": "./images/bg01.png",
"iconSrc": "./images/icon07.png"
},
{
key: "012",
title: "标题文字",
text: "这是一段描述文字",
"bgSrc": "./images/bg01.png",
"iconSrc": "./images/icon08.png"
},
{
key: "007",
title: "标题文字",
text: "这是一段描述文字",
"bgSrc": "./images/bg01.png",
"iconSrc": "./images/icon09.png"
},
{
key: "008",
title: "标题文字",
text: "这是一段描述文字",
"bgSrc": "./images/bg01.png",
"iconSrc": "./images/icon10.png"
},
{
key: "009",
title: "标题文字",
text: "这是一段描述文字",
"bgSrc": "./images/bg01.png",
"iconSrc": "./images/icon11.png"
},
{
key: "010",
title: "标题文字",
text: "这是一段描述文字",
"bgSrc": "./images/bg01.png",
"iconSrc": "./images/icon12.png"
}
],
//从哪连接到哪
[
{from: "001", to: "002"},
{from: "002", to: "004"},
{from: "001", to: "003"},
{from: "003", to: "006"},
{from: "004", to: "005"},
{from: "004", to: "006"},
{from: "005", to: "011"},
{from: "006", to: "011"},
{from: "006", to: "012"},
{from: "007", to: "008"},
{from: "008", to: "009"},
{from: "009", to: "010"},
{from: "010", to: "007"}
]
];
function init(rps) {
var MAKE = go.GraphObject.make; //构建GoJS对象
//参数设置 https://gojs.net/latest/api/symbols/Diagram.html
myDiagram = MAKE(go.Diagram, "J_chartArea",
//图表整体属性设置
{
initialContentAlignment: go.Spot.Center, //设置整个图表在容器中的位置 https://gojs.net/latest/api/symbols/Spot.html
allowZoom: true,
"grid.visible": false,//是否显示背景栅格
"grid.gridCellSize": new go.Size(10, 10),//栅格大小
"commandHandler.copiesTree": true, // 启用复制快捷键
"commandHandler.deletesTree": true, // 启用删除快捷键
"toolManager.mouseWheelBehavior": go.ToolManager.WheelZoom, //启用视图放大缩小
allowLink: true,//是否允许拖拽连线
allowRelink: true,//是否允许重新连线
padding: 10,
//布局设置 https://gojs.net/latest/api/symbols/Layout.html
//LayeredDigraphLayout布局 https://gojs.net/latest/api/symbols/LayeredDigraphLayout.html
layout: MAKE(go.LayeredDigraphLayout,
{direction: 0, layeringOption: go.LayeredDigraphLayout.LayerLongestPathSource}),//0向右，90向下，180向左，270向上。默认值是0
"undoManager.isEnabled": false //是否启用撤销回退 Ctrl-Z Ctrl-Y
});
//设置连线...参考网址： https://gojs.net/latest/intro/links.html
myDiagram.linkTemplate =
MAKE(go.Link,
//设置连接线属性
{
relinkableFrom: true,
relinkableTo: true,
selectable: true,
corner: 12,
routing: go.Link.Orthogonal,
curve: go.Link.JumpOver
},
//设置连线
MAKE(go.Shape, {stroke: "#46bee9", strokeWidth: 2}),
//设置箭头
MAKE(go.Shape, {toArrow: "Standard", stroke: "#46bee9", fill: "#46bee9"})
);
//设置节点样式
myDiagram.nodeTemplate =
MAKE(go.Node, "Horizontal",//将多个GraphObjects比如下面的Panel和Button元素垂直对齐还是水平对齐
{
portId: "",
fromLinkable: true,
toLinkable: true
},
MAKE(go.Panel, "Table",
{
defaultAlignment: go.Spot.Left
},
//图片元素设置-背景图 https://gojs.net/latest/intro/pictures.html
MAKE(go.Picture,
{width: 208, height: 102,source: "./images/bg02.png"}
/*new go.Binding("source", "bgSrc")*/
),
MAKE(go.Panel, "Table",
{defaultAlignment: go.Spot.Left},
MAKE(go.RowColumnDefinition, {column: 0, width: 48}),
//设置文本块元素-标题
MAKE(go.TextBlock,
{
row: 0,//所在行
column: 1,//所在列
columnSpan: 2,//合并列
fromLinkable: false,
toLinkable: false,
alignment: go.Spot.Left,//文本对齐
stroke: "#00434C",//标题文字的颜色
margin: new go.Margin(5, 0, 0, 5),//边距
font: "12pt helvetica, arial, sans-serif"//文字样式
},
new go.Binding("text", "title")//绑定数据
),
//设置图片(就是文件等等的小图标属性)-Icon小图标
MAKE(go.Picture,
{
row: 1,
column: 0,
width: 48,
height: 48,
background: "transparent",
alignment: go.Spot.Center,
margin: new go.Margin(0, 0, 0, 5)
},
new go.Binding("source", "iconSrc")),
//设置文本块-详情
MAKE(go.TextBlock,
{
row: 1,
column: 1,
stroke: "#00434C",
font: "8pt sans-serif",
wrap: go.TextBlock.WrapFit,//文本换行
desiredSize: new go.Size(150, 50),//期望的区域尺寸
alignment: go.Spot.Left,
margin: new go.Margin(5, 0, 0, 5)
},
{
row: 1,
column: 1,
stroke: "#00434C",
font: "8pt sans-serif",
wrap: go.TextBlock.WrapFit,//文本换行
desiredSize: new go.Size(150, 50),//期望的区域尺寸
alignment: go.Spot.Left,
margin: new go.Margin(5, 0, 0, 5)
},
new go.Binding("text", "text")
)
)
),
//设置展开收缩按钮
MAKE("Panel",
{width: 12, height: 12},
MAKE(go.Picture,
{width: 12, height: 12, source: "./images/button.png"},
new go.Binding("visible", "isTreeLeaf",
function (leaf) {
return !leaf;
})
.ofObject()),
MAKE(go.Panel, "Table",
{visible: false, desiredSize: new go.Size(12, 12)},
//绑定自定义数据
new go.Binding("visible", "isTreeLeaf",
function (leaf) {
return !leaf;
})
.ofObject(),
MAKE(go.Shape,
{
name: "ButtonIcon",
figure: "MinusLine",//自动生成几何图形 这里生成“-”
desiredSize: new go.Size(7, 7)//尺寸
},
new go.Binding("figure", "isCollapsed",// 根据collapsed函数的返回值设置图形是“+”还是“-”
function (collapsed) {
return collapsed ? "PlusLine" : "MinusLine";
})),
{
click: function (e, obj) {
e.diagram.startTransaction();
var node = obj.part;
if (node.data.isCollapsed) {
expandFrom(node, node);
} else {
collapseFrom(node, node);
}
e.diagram.commitTransaction("toggled visibility of dependencies");
}
}
)
)
);
//收缩
function collapseFrom(node, start) {
if (node.data.isCollapsed) return;
node.diagram.model.setDataProperty(node.data, "isCollapsed", true);
if (node !== start) node.visible = false;
node.findNodesOutOf().each(collapseFrom);
}
//展开
function expandFrom(node, start) {
if (!node.data.isCollapsed) return;
node.diagram.model.setDataProperty(node.data, "isCollapsed", false);
if (node !== start) node.visible = true;
node.findNodesOutOf().each(expandFrom);
}
//数据
myDiagram.model = new go.GraphLinksModel(rps[0], rps[1]);
//绑定元素点击事件
myDiagram.addDiagramListener("ObjectSingleClicked",
function (e) {
var part = e.subject.part;
if (!(part instanceof go.Link)) {
console.info(part.data.key)
}
});
myDiagram.addDiagramListener("LinkDrawn",
function(e){
var part = e.subject.data; //这是这个线条的数据
for(var key in part){
var a = part[key].toString();
alert(a);
}
}) ;
}
window.onload = function () {
init(rps);
}
二、设置节点不可拖拽，调节界面自动调整节点位置
$(go.Diagram, "myDiagramDiv", // must name or refer to the DIV HTML element
{
isReadOnly: true,//设置节点不可拖拽
initialAutoScale: go.Diagram.Uniform,
contentAlignment: go.Spot.Center,
layout:
$(ContinuousForceDirectedLayout, // automatically spread nodes apart while dragging
{ defaultSpringLength: 40, defaultElectricalCharge: 10 }), //设置调节界面自动调整节点位置
"SelectionMoved": function(e) { e.diagram.layout.invalidateLayout();
}});
三、给节点添加位置信息
使用myDiagram.model.toJson()获取gojs整体的数据时，nodeDataArray中会带有location位置信息
myDiagram.nodeTemplate =
$(go.Node, "Vertical", { locationSpot: go.Spot.Center},{ // the whole node panel
selectionAdorned: true,
resizable: true,
layoutConditions: go.Part.LayoutStandard & ~go.Part.LayoutNodeSized,
fromSpot: go.Spot.AllSides,
toSpot: go.Spot.AllSides,
isShadowed: true,
//desiredSize: new go.Size(NaN, 300),
stretch: go.GraphObject.Fill,
shadowColor: "#C5C1AA"},
new go.Binding("location", "location").makeTwoWay(),
$(go.Panel, "Auto",
{name: "PANEL" },
$(go.Shape, "Circle",
{stroke: "gray", strokeWidth: 3, portId: "", cursor: "pointer",
fromLinkable: false, fromLinkableSelfNode: false, fromLinkableDuplicates: false,
toLinkable: false, toLinkableSelfNode: false, toLinkableDuplicates: false},
new go.Binding("fill", "color")) // represents where the members are
),
$(go.TextBlock,
{font: "bold 16px sans-serif", isMultiline: false, editable: true},
new go.Binding("text", "name").makeTwoWay()),
);
四、设置连线不可删除
myDiagram.addDiagramListener("SelectionDeleting", function(e) {
e.subject.each(function(n) {
//禁止删除连线，获取数据使用e.data.to
e.cancel = true;
});
});
类似资料：