可视化—gojs 超多超实用经验分享(三)
目录
32.go.Palette 一排放两个
go.Palette 是 GoJS 库中的一个组件，用于显示一组预定义的图形元素，用户可以从中选择并将其拖放到画布中。如果要在一排中显示两个 go.Palette，
一、可以使用 HTML 和 CSS 来控制它们的布局。使用display: inline-block 将 div 元素水平排列在同一行中
<style>
#palette1,
#palette2 {
display: inline-block;
width: 200px;
height: 300px;
border: 1px solid black;
margin-right: 20px;
}
</style>
<div id="palette1"></div>
<div id="palette2"></div>
<script>
var $ = go.GraphObject.make;
var palette1 = $(go.Palette, "palette1");
var palette2 = $(go.Palette, "palette2");
</script>
二、（建议）还可以使用gojs自带的属性，完成go.Palette 自定义
- alignment 属性设置为 go.GridLayout.Position: 使节点从左开始布局。
- wrappingColumn 属性设置为 2，以确保节点布局为 2 列。
- cellSize 和 spacing 属性， 控制节点之间的间距和大小。
const myPalette = $(go.Palette, "myPaletteDiv", {
layout: $(go.GridLayout, {
alignment: go.GridLayout.Position,
wrappingColumn: 2,
cellSize: new go.Size(100, 0),
spacing: new go.Size(5, 5),
}),
});
33.go.Palette 基本用法
<div id="myPaletteDiv"></div>
const myPalette = $(go.Palette, "myPaletteDiv", {
layout: $(go.GridLayout, {
alignment: go.GridLayout.Position,
cellSize: new go.Size(100, 0),
wrappingColumn: 2
})
nodeTemplate: myDiagram.nodeTemplate,
model: new go.GraphLinksModel([
{ key: "Alpha", text: "Alpha: Patron" },
{ key: "Beta", text: "Beta: Patron" },
{ key: "Gamma", text: "Gamma: Patron" },
]),
});
myPalette.groupTemplateMap.add('groupA', groupATemplate()) // 可以为多组
myPalette.model = new go.GraphLinksModel([ ]) // 属性可以直接写在对象里，也可以后续修复
34.创建自己指向自己的连线
主要是在节点上设置两个属性，
{
fromLinkableSelfNode: true,
toLinkableSelfNode: true,
}
35.设置不同的 groupTemplate 和 linkTemplate
可以使用 Group 类型的 groupTemplate 属性来设置不同的组模板。groupTemplate 属性可以接受一个函数，该函数返回一个 Group 类型的模板。
定义了两个不同的组模板，分别使用不同的颜色。使用时会默认读取分组名称。
groupTemplate
myDiagram.groupTemplateMap.add(
"Group1",
$(go.Group, "Auto", $(go.Shape, "Rectangle", { fill: "red" }))
);
myDiagram.groupTemplateMap.add(
"Group2",
$(go.Group, "Auto", $(go.Shape, "Rectangle", { fill: "green" }))
);
myDiagram.model.addNodeData({ key: 1, isGroup: true, category: "Group1" });
myDiagram.model.addNodeData({ key: 2, isGroup: true, category: "Group2" });
linkTemplate
myDiagram.linkTemplateMap.add(
"straight", // 直线连接
$(go.Link, $(go.Shape))
);
myDiagram.linkTemplateMap.add(
"curved", // 曲线连接
$(go.Link, { curve: go.Link.Bezier }, $(go.Shape))
);
myDiagram.model.addLinkData({ from: 1, to: 2, category: "straight" });
myDiagram.model.addLinkData({ from: 3, to: 4, category: "curved" });
36.监听在图形对象 GraphObject 上的右键单击
也就是获取 右键点击的对象
myDiagram.addDiagramListener("ObjectContextClicked", function (e) {
var linkOrNode = myDiagram.findPartAt(e.diagram.firstInput.documentPoint);
if (linkOrNode instanceof go.Link) {
// TODO
}
if (linkOrNode instanceof go.Node) {
// TODO
}
});
37.定义节点/连线/canvas 背景上的右键菜单
可以结合 右键点击的对象，进行一些操作，对右键的对象，进行一些 contextMenu 中的操作
myDiagram = $(go.Diagram, "myDiagramDiv", {
contextMenu: createContextMenu(),
});
myDiagram.nodeTemplate.contextMenu = createContextMenu();
myDiagram.linkTemplate.contextMenu = createContextMenu();
function groupContextMenu() {
return $(
"ContextMenu",
"Vertical",
$(
"ContextMenuButton",
$(
go.Panel,
"Horizontal",
{
alignment: go.Spot.Left,
},
$(go.Picture, "图片src，如果不需要图片可删除", {
desiredSize: new go.Size(60, 30),
margin: new go.Margin(5, 5, 5, 10),
}),
$(go.TextBlock, "文本")
),
{
click: (event, obj) => {}, // 右键菜单面板点击事件
}
)
);
}
38.从节点动态拉出一根连线时，判断其方向是左还是右?
可以通过判断连线的起点和终点的位置来确定其方向。具体来说，可以通过比较起点和终点的 x 坐标来判断连线的方向，如果起点的 x 坐标小于终点的 x 坐标，则连线是从左向右的，反之则是从右向左的。
重写了insertLink方法，当用户在节点上开始拖动连线时，会调用该方法。在该方法中首先调用了go.LinkingTool.prototype.insertLink.call(this)来执行默认的连线操作，然后根据起点和终点的位置来设置连线的样式。如果起点的 x 坐标小于终点的 x 坐标，则将连线的颜色设置为绿色，否则将其设置为红色。
// 连线基本模板配置
myDiagram.linkTemplate = $(
MessageLink,
{ selectionAdorned: true, curviness: 0 },
$(go.Shape, "Rectangle", new go.Binding("stroke", "stroke").makeTwoWay()),
$(
go.Shape,
{ toArrow: "OpenTriangle" },
new go.Binding("stroke", "stroke").makeTwoWay()
)
);
// insertLink
go.LinkingTool.prototype.insertLink = function (
fromnode,
fromport,
tonode,
toport
) {
var newlink = go.LinkingTool.prototype.insertLink.call(
this,
fromnode,
fromport,
tonode,
toport
);
if (newlink !== null) {
var model = this.diagram.model;
if (fromnode.position.x < tonode.position.x) {
model.setDataProperty(newlink.data, "stroke", "green"); // 从左向右的连线
} else {
model.setDataProperty(newlink.data, "stroke", "red"); // 从左向右的连线
}
}
return newlink;
};
39.linkTemplate routing 取值
linkTemplate 是用于定义连接线的模板。而 routing 是用于定义连接线的路径的属性之一
如果没有设置 routing 属性，连接线的默认路径是 go.Link.Normal。表示连接线会直接从起点到终点的位置。这种路径适用于大多数情况，但在某些情况下可能需要更复杂的路径。 以下值 ：
go.Link.Normal：连接线会直接从起点到终点的位置。go.Link.JumpOver：连接线会跳过节点，但可能会穿过其他连接线。go.Link.AvoidsNodes：连接线会避开节点，但可能会穿过其他连接线。go.Link.Orthogonal：连接线会沿着水平和垂直方向移动，直到到达目标节点的位置。
40.在移动连线时，改变所有点的位置
在 gojs 中，可以通过重写go.DraggingTool.prototype.moveParts方法来实现移动时改变所有点的位置。具体实现步骤如下：
- 获取被移动的部件的所有连接线（links）。
- 遍历连接线，获取连接线的路径（path）。
- 遍历路径的所有点（points），将每个点的位置加上移动的距离（deltaX 和 deltaY）。
- 将修改后的点数组设置回路径的
part.points属性中。
MessageDraggingTool.prototype.moveParts = function (parts, offset, check) {
go.DraggingTool.prototype.moveParts.call(this, parts, offset, check);
var it = parts.iterator;
while (it.next()) {
if (it.key instanceof go.Link) {
var link = it.key;
var path = link.path;
var points = path.part.points;
if (points.length == 3) {
// 表示直线
var startX = it.value.point.x;
var startY = it.value.point.y;
var x = startX + offset.x;
var y = startY + offset.y;
link.diagram.model.set(link.data, "表示连线定位的字段x", "当前位置x");
link.diagram.model.set(link.data, "表示连线定位的字段y", "当前位置y");
} else {
// 表示曲线
var pointArray: any = [];
for (var i = 0; i < points.length; i++) {
var point = points._dataArray[i];
pointArray.push(new go.Point(point.x + offset.x, point.y + offset.y));
}
path.part.points = pointArray;
}
}
}
};
