HI im working with group in gojs, group title is overlapping with group member so i cannot show group title here, I tried zorder it doesn’t work.
Here i have attached my screenshot
What is your Group template?
Here I attached my sample code
myDiagram.groupTemplate = // for cells
$(go.Group, "Auto", {
layerName: "Background",
stretch: go.GraphObject.Fill,
selectable: false,
computesBoundsAfterDrag: true,
computesBoundsIncludingLocation: true,
handlesDragDropForMembers: true, // don't need to define handlers on member Nodes and Links
mouseDragEnter: function(e, group, prev) { group.isHighlighted = true; },
mouseDragLeave: function(e, group, next) { group.isHighlighted = false; },
canUngroup: function(e, group) {},
mouseDrop: function(e, group) {
var dropppedNode = group.diagram.selection.first()
var node = dropppedNode.data
// if any dropped part wasn't already a member of this group, we'll want to let the group's row
// column allow themselves to be resized automatically, in case the row height or column width
// had been set manually by the LaneResizingTool
var anynew = e.diagram.selection.any(function(p) {
return p.containingGroup !== group;
});
var ok = group.addMembers(e.diagram.selection, true);
if (ok) {
if (anynew) {
addGroupMember(node, group)
e.diagram.layout.getRowDefinition(group.row).height = NaN;
e.diagram.layout.getColumnDefinition(group.column).width = NaN;
}
} else { // failure upon trying to add parts to this group
e.diagram.currentTool.doCancel();
}
}
},
new go.Binding("row"),
new go.Binding("column", "col"),
// the group is normally unseen -- it is completely transparent except when given a color or when highlighted
$(go.Shape, {
fill: "transparent",
stroke: "transparent",
strokeWidth: myDiagram.nodeTemplate.margin.left,
stretch: go.GraphObject.Fill
},
new go.Binding("fill", "color"),
new go.Binding("stroke", "isHighlighted", function(h) {
return h ? "red" : "transparent";
}).ofObject()),
$(go.Placeholder, { // leave a margin around the member nodes of the group which is the same as the member node margin
alignment: (function(m) {
return new go.Spot(0, 0, m.top, m.left);
})(myDiagram.nodeTemplate.margin),
padding: (function(m) {
return new go.Margin(0, m.right, m.bottom, 0);
})(myDiagram.nodeTemplate.margin)
}),
$(go.Panel, "Spot",
new go.Binding("zOrder"),
new go.Binding("opacity", "text", function(t) {
return t ? 1 : 0;
}),
// note that the opacity defaults to zero (not visible),
// in case there is no "ribbon" property
{
opacity: 0,
alignment: new go.Spot(1, 0, 0, 0),
alignmentFocus: go.Spot.TopRight
},
$(go.Shape, // the ribbon itself
{
geometryString: "F1 M0 0 L30 0 70 40 70 70z",
fill: "red",
stroke: null,
strokeWidth: 0
}),
$(go.TextBlock,
new go.Binding("text", "text"), {
alignment: new go.Spot(1, 0, -29, 29),
angle: 45,
maxSize: new go.Size(100, NaN),
stroke: "white",
font: "bold 13px sans-serif",
textAlign: "center"
})
)
// $(go.TextBlock, // group title
// { alignment: go.Spot.TopRight, font: " 9pt Sans-Serif", margin: new go.Margin(6, 8, 20, 20) },
// new go.Binding("text", "text"))
);Part.zOrder is a property on Part, so it doesn’t make sense to try to bind it on Panel. You should have seen a warning about this in the console if you are using the debug library.
may i know what is the solution for this?
You need to make sure the Group is in front of its members. The easiest way to do that is to set layerName: "Foreground" on the group template, and to leave the member nodes in the default Layer.
But you can control the relative z-ordering of individual Parts by setting or binding the Part.zOrder property.
Hi walter, I came accross the same problem, and I tried your solution. now the ribbon can be appeared in front of the group’s content, but I have some clickable node inside the group content, now the nodes cannot be clicked, I think it’s because the placeholder blocked the mouse event. can you help me find any solution?
Use null, instead of “transparent” or some other Shape.fill color, in the Shape that covers the member Nodes.
It works, thank you walter.