Hi
I am Applying LayerName:“Background” property On link Template to Avoid Overlapping of Linkages and Group Nodes,
But now I am not able to show Links Connected With Inner Nodes of Groups.
is there way to make link visible in Group Node Placeholder?
Group Template:
Link Template:
Is there a reason that you put all Links into the “Background” Layer?
Have you tried putting them in the “Foreground” Layer?
Reason Behind to take all links into the “Background” Layer is that i want avoid link and node overlapping.
i have tried “Foreground” Layer but overlapping happened in that case.
I want to connect Multiple inner nodes of Group with another Group inner nodes without overlapping Links on Group.
using “Foreground” Layer :
OK, then you need to make sure that the body of the Group is transparent instead of “white”. That means setting the Shape.fill to “transparent” or null.
Setting the Group.background to “transparent” doesn’t help because the Shape is opaque.
But apparently you want there to be that kind of header in the group – you can’t then do that by filling the “RoundedRectangle” Shape and setting the Placeholder.background to “white” (I’m just guessing, because you don’t show the code).
You’ll need to implement something like: Rounded Groups With a Header and a Footer You can get the “RoundedTopRectangle” figure from extensions/RoundedRectangles.js. Of course you don’t want a footer, and you’ll want to set the Shape.strokeWidth to zero.
Hi walter
i am Try Rounded Groups With a Header and a Footer and above properties you mention but still overlapping or link break issue is not resolve,
diagram before use LayerName property :
diagram after use Layer Name “Background” property :
Group template:
Thanks for posting a piece of your Group template. But please post the text, not an image of the text.
I think the problem that I pointed out remains in your code:
Ok
Group Template:
myDiagram.groupTemplate =
$(go.Group, “Vertical”,
{
layout: $(go.LayeredDigraphLayout,
{
direction: 90,
layerSpacing: 300,
columnSpacing: 300,
setsPortSpots: true,
layeringOption: go.LayeredDigraphLayout.LayerLongestPathSource,
}),
background: “transparent”,
},
{ defaultStretch: go.GraphObject.Horizontal },
{ fromSpot: go.Spot.RightSide, toSpot: go.Spot.LeftSide },
$(go.Panel, “Auto”,
$(go.Shape, “RoundedTopRectangle”,
{ fill: “#3366ff” },
new go.Binding(“fill”, “role”, r => r[0] === ‘t’ ? “#3366ff” : “#3366ff”)),
$(go.TextBlock,
{ margin: new go.Margin(2, 2, 0, 2), textAlign: “center” },
new go.Binding(“text”, “text”)) ),
$(go.Panel, “Auto”,
$(go.Shape, { fill: "transparent" }),
$(go.Placeholder, { padding: 20,background:"white" }),
$(go.Shape, "BpmnActivityLoop",
{
fill: "transparent",
width: 10, height: 10,
alignment: new go.Spot(0.5, 1, 0, -3), alignmentFocus: go.Spot.Bottom
}
)
)
);
Hi
above mention code works fine there is no overlapping and links are visible in groups now , but now i am not able to select linkages inside group node.
how can i select linkages inside Group node?
Diagarm:
Link Template Code:
Set Shape.fill to null. A “transparent” fill isn’t drawn but does make it pickable/hittable.
By the way, I recommend that you use the latest GoJS v2.3 so that you can set LayeredDigraphLayout.alignOption.
