【发布时间】：2020-06-19 19:45:07
【问题描述】：
我不清楚如何编辑GoJS Pipes example here 以便在“管道”中显示文本而不会弄乱布局。我正在尝试申请the answer to the same question given here，但它太旧了，可能已经过时了，或者它可能不够明确，我对这个库的了解有限，无法正确理解它。
我已经启动了一个看起来像这样的硬编码管道：
管道代码：
const base = 15;
const minLen = base * 2;
const maxLen = base * 6;
const minInc1 = minLen + base;
const minInc2 = minLen * 2;
const minInc3 = minLen + (base * 3);
interface IShapeParams {
angle?: number
text?: string
key: number
}
const createShapeI = (params: IShapeParams): ObjectData => ({
geo: `F1 M0 0 L${minLen} 0 ${minLen} ${maxLen} 0 ${maxLen}z`,
ports: [
{ id: "U1", spot: "0.5 0 0 0.5" },
{ id: "U2", spot: "0.5 1 0 -0.5" }
],
...params
});
const startHorz = 0;
const startVert = 0;
export const pipeline = {
"class": "go.GraphLinksModel",
"copiesArrays": true,
"copiesArrayObjects": true,
"linkFromPortIdProperty": "fid",
"linkToPortIdProperty": "tid",
"nodeDataArray": [
{
...createShapeI({ key: 1, text: "Pipe 1", angle: 90 }),
"loc": `${startHorz} ${startVert}`
},
{
...createShapeI({ key: 2, text: "Pipe 2", angle: 90 }),
"loc": `${startHorz - maxLen} ${startVert}`
}
],
"linkDataArray": [
{ "from": 1, "to": 2, "fid": "U2", "tid": "U1" }
]
};
来自管道源代码的原始nodeTemplate：
myDiagram.nodeTemplate =
$(go.Node, "Spot",
{
locationObjectName: "SHAPE",
locationSpot: go.Spot.Center,
selectionAdorned: false, // use a Binding on the Shape.stroke to show selection
itemTemplate:
// each port is an "X" shape whose alignment spot and port ID are given by the item data
$(go.Panel,
new go.Binding("portId", "id"),
new go.Binding("alignment", "spot", go.Spot.parse),
$(go.Shape, "XLine",
{ width: 6, height: 6, background: "transparent", fill: null, stroke: "gray" },
new go.Binding("figure", "id", portFigure), // portFigure converter is defined below
new go.Binding("angle", "angle"))
),
// hide a port when it is connected
linkConnected: (node, link, port) => {
if (link.category === "") {
port.visible = false;
}
},
linkDisconnected: (node, link, port) => {
if (link.category === "") {
port.visible = true;
}
}
},
// this creates the variable number of ports for this Spot Panel, based on the data
new go.Binding("itemArray", "ports"),
// remember the location of this Node
new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
// remember the angle of this Node
new go.Binding("angle", "angle").makeTwoWay(),
// move a selected part into the Foreground layer, so it isn't obscured by any non-selected parts
new go.Binding("layerName", "isSelected", function(s) {
return s ? "Foreground" : "";
}).ofObject(),
$(go.Shape,
{
name: "SHAPE",
// the following are default values;
// actual values may come from the node data object via data binding
geometryString: "F1 M0 0 L20 0 20 20 0 20 z",
fill: "rgba(128, 128, 128, 0.5)"
},
// this determines the actual shape of the Shape
new go.Binding("geometryString", "geo"),
// selection causes the stroke to be blue instead of black
new go.Binding("stroke", "isSelected", (s) => {
return s ? "dodgerblue" : "black";
}).ofObject())
);
现在，当我尝试应用 solution given on the referenced thread 时，我最终会得到 nodeTemplate，如下所示：
myDiagram.nodeTemplate =
$(go.Node, "Spot",
{
locationObjectName: "SHAPE",
locationSpot: go.Spot.Center,
selectionAdorned: false, // use a Binding on the Shape.stroke to show selection
// hide a port when it is connected
linkConnected: (node, link, port) => {
if (link.category === "") {
port.visible = false;
}
},
linkDisconnected: (node, link, port) => {
if (link.category === "") {
port.visible = true;
}
}
},
$(go.Panel, "Spot",
{
itemTemplate:
// each port is an "X" shape whose alignment spot and port ID are given by the item data
$(go.Panel,
new go.Binding("portId", "id"),
new go.Binding("alignment", "spot", go.Spot.parse),
$(go.Shape, "XLine",
{ width: 6, height: 6, background: "transparent", fill: null, stroke: "gray" },
new go.Binding("figure", "id", portFigure), // portFigure converter is defined below
new go.Binding("angle", "angle"))
)
},
// this creates the variable number of ports for this Spot Panel, based on the data
new go.Binding("itemArray", "ports"),
// remember the location of this Node
new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
// remember the angle of this Node
new go.Binding("angle", "angle").makeTwoWay(),
// move a selected part into the Foreground layer, so it isn't obscured by any non-selected parts
new go.Binding("layerName", "isSelected", function(s) {
return s ? "Foreground" : "";
}).ofObject(),
$(go.Shape,
{
name: "SHAPE",
// the following are default values;
// actual values may come from the node data object via data binding
geometryString: "F1 M0 0 L20 0 20 20 0 20 z",
fill: "rgba(128, 128, 128, 0.5)"
},
// this determines the actual shape of the Shape
new go.Binding("geometryString", "geo"),
// selection causes the stroke to be blue instead of black
new go.Binding("stroke", "isSelected", (s) => {
return s ? "dodgerblue" : "black";
}).ofObject())
),
$(go.TextBlock, { margin: 5 }, new go.Binding("text", "text"))
);
这可以正确呈现文本，但是由于端口切换了侧边，它完全破坏了布局，我不知道为什么。最重要的是，现在我无法通过尝试更改管道上的 loc 字符串来协调管道之间的空间，实际上我现在对 loc 属性所做的任何事情都没有。见下图：
如何在保持相同布局和功能的同时向这些形状添加文本块？
【问题讨论】：
标签： javascript typescript gojs