Hi,
-
I would like to allow the user to decide how he wants to view the graph - vertical or horizental. by default the graph is Vertical (groups and node) and the entites inside the groups are Vertical.
-
The nodes that are inside the graph aren’t aligned to the center, and i can’t figure out what i’m missing. i’m using a placeholder in the groups.
This example is relevant for both issues:
- The links are overlapping each other, so i tried using the “fromSpot” ant “toSpot” to allow links to be spread the link drawing on the sides, but it’s not working.
in the example you can see that the label “Contains” of several links are merge with bad look.
Here is my code setup:
myDiagram =
$(go.Diagram, “myDiagramDiv”, // create a Diagram for the DIV HTML element
{
initialContentAlignment: go.Spot.Center,
initialAutoScale: go.Diagram.Uniform,
allowCopy: false,
allowGroup: false,
allowInsert: false,
allowLink: false,
allowTextEdit: false,
allowUngroup: false,
commandHandler: new DrawCommandHandler(),
// more stuff...
});
myDiagram.nodeTemplate =
(go.Node, "Auto",
{
fromSpot: go.Spot.RightSide,
toSpot: go.Spot.LeftSide,
portId: "",
cursor: "pointer",
doubleClick: function(e, node) {
doFilter(node.data.key);
},
},
(go.Shape, “RoundedRectangle”, { name: “ItemShape” },
new go.Binding(“fill”, “isExceptionEntity”, function(d) {
if (d == “true”) { return exceptionBackground; } else { return nodeBackground; }
})),
(go.Panel, "Vertical",
(go.Panel, “Auto”, { },
$(go.Picture, { desiredSize: new go.Size(24, 24) },
new go.Binding(“source”, “images”, function(e) { if (e[0]) return e[0]; else return “”})),
$(go.Picture, { desiredSize: new go.Size(10, 10), alignment: go.Spot.BottomRight },
new go.Binding("source", "images", function(e) { if (e[1]) return e[1]; else return ""}))
),
$(go.TextBlock, { font: nodeFont, stroke: '#333', margin: 6, isMultiline: false, editable: false, stretch: go.GraphObject.Vertical },
new go.Binding("text", "label"),
new go.Binding("stroke", "labelcolor"))
),
{
contextMenu: partContextMenu
}
);
myDiagram.linkTemplate =
$(go.Link,
{
routing: go.Link.AvoidsNodes,
reshapable: true,
resegmentable: true,
adjusting: go.Link.Stretch,
corner: 4
},
new go.Binding(“key”, “key”),
$(go.Shape, { }, new go.Binding("stroke", "lineColor")),
$(go.Shape, { },
new go.Binding("fill", "lineColor"),
new go.Binding("toArrow", "showDirection", function(data) {
if (data == "true") { return "Standard"; } else { return ""; }
}),
new go.Binding("fromArrow", "showDirection", function(data) {
if (data == "true") { return "Standard"; } else { return ""; }
})
),
$(go.TextBlock, {
name: "LinkText",
stroke: "#1e4373",
textAlign: "center",
segmentIndex: -1, segmentOffset: new go.Point(NaN, NaN),
segmentOrientation: go.Link.OrientUpright,
background: "transparent"
},
new go.Binding("text", "typeName"))
);
myDiagram.groupTemplate =
$(go.Group, “Vertical”,
{
fromSpot: go.Spot.RightSide,
toSpot: go.Spot.LeftSide,
stretch: go.GraphObject.Vertical,
resizeObjectName: “GroupShape”,
selectionObjectName: “GroupShape”,
locationObjectName: “GroupShape”,
computesBoundsIncludingLinks: false,
computesBoundsIncludingLocation: true,
layout: $(go.TreeLayout, { layerSpacing: 100, arrangementSpacing: new go.Size(60, 60) }),
selectionChanged: function(node) {
var shape = node.findObject("GroupShape");
if (node.isSelected == true) {
shape.fill = selectedBackground;
${onClick}(node.data.key, false);
} else {
if (node.data.isExceptionEntity == "true") {
shape.fill = exceptionBackground;
} else {
shape.fill = nodeBackground;
}
}
},
},
$(go.Panel, "Vertical", // title above Placeholder
{ cursor: "pointer" },
$(go.Panel, "Horizontal", // button next to TextBlock
{ stretch: go.GraphObject.Horizontal, background: "#004280", padding: 4 },
$(go.Picture, new go.Binding("source", "images", function(e) { return e[0]})),
$(go.Picture, new go.Binding("source", "images", function(e) { return e[1]})),
$(go.TextBlock, { alignment: go.Spot.Left, editable: false, isMultiline: false, margin: 5, font: groupFont, stroke: "white" }, new go.Binding("text", "label"))
),
$(go.Panel, "Auto",
{ opacity: 0.6, stretch: go.GraphObject.Fill },
// the rectangular shape around the members
$(go.Shape, "Rectangle", { name: "GroupShape", stroke: "#004280", strokeWidth: 1, stretch: go.GraphObject.Fill },
new go.Binding("fill", "isExceptionEntity", function(d) {
if (d == "true") { return exceptionBackground; } else { return groupBackground; }
})
)
,$(go.Panel, "Vertical", { defaultAlignment: go.Spot.Center },
$(go.Placeholder, { margin: 10, alignment: go.Spot.Center, stretch: go.GraphObject.Fill })
)
)
), // end Vertical Panel
);