In a group when I put some nodes and refresh them, the connection is misadjusted, and it looks like the connections are not connecting to any node.
See the image below. Indicated with a red circle.
Also when I put some nodes horizontally, on in any fashion and refreshes the page, it forgets their location and is placed vertically. Is there any way to store the position of the nodes in Group even after refresh?
See the image below
What is your Group.layout? Maybe do not set that property?
This is my group layout
myDiagram.groupTemplate =
$(go.Group, “Auto”,
{
background: “transparent”,
ungroupable: true,
// highlight when dragging into the Group
mouseDragEnter: function (e, grp, prev) { highlightGroup(e, grp, true); },
mouseDragLeave: function (e, grp, next) { highlightGroup(e, grp, false); },
computesBoundsAfterDrag: true,
// when the selection is dropped into a Group, add the selected Parts into that Group;
// if it fails, cancel the tool, rolling back any changes
mouseDrop: finishDrop,
handlesDragDropForMembers: true, // don’t need to define handlers on member Nodes and Links
// Groups containing Groups lay out their members horizontally
layout: makeLayout(false)
},
new go.Binding(“layout”, “horiz”, makeLayout),
new go.Binding(“background”, “isHighlighted”, function (h) {
return h ? “rgba(255,0,0,0.2)” : “transparent”;
}).ofObject(),
$(go.Shape, “Rectangle”,
{ fill: null, stroke: defaultColor(false), strokeWidth: 2 },
new go.Binding(“stroke”, “horiz”, defaultColor),
new go.Binding(“stroke”, “color”)),
$(go.Panel, “Vertical”, // title above Placeholder
$(go.Panel, “Horizontal”, // button next to TextBlock
{ stretch: go.GraphObject.Horizontal, background: defaultColor(false) },
new go.Binding(“background”, “horiz”, defaultColor),
new go.Binding(“background”, “color”),
$(“SubGraphExpanderButton”,
{ alignment: go.Spot.Right, margin: 5 }),
$(go.TextBlock,
{
alignment: go.Spot.Left,
editable: true,
margin: 5,
font: defaultFont(false),
opacity: 0.75, // allow some color to show through
stroke: “#404040”
},
new go.Binding(“text”, “viewName”).makeTwoWay()),
new go.Binding(“font”, “horiz”, defaultFont),
), // end Horizontal Panel
$(go.Placeholder,
{ padding: 20, alignment: go.Spot.Right })
) // end Vertical Panel
);
Please tell me the properties I am missing
If you want to let users position nodes manually, I was suggesting that you delete these lines that set and that bind the Group.layout property:
// Groups containing Groups lay out their members horizontally
layout: makeLayout(false)
new go.Binding(“layout”, “horiz”, makeLayout),
Thanks, it worked.
Actually, I want both layout options in the group. And links should auto adjust according to the group layout. Right now links keeks it old position and group items auto-adjust.
What do you mean by “both layout options”? And how are links not auto adjusting?
Sorry, I was saying, I need both auto Layout group and auto-adjusts connection inside the group. Right now it is seen disconnected.
My LinkTemplate
myDiagram.linkTemplate =
$(go.Link, // the whole link panel
{ selectable: true, selectionAdornmentTemplate: linkSelectionAdornmentTemplate },
{ relinkableFrom: true, relinkableTo: true, reshapable: true },
{
routing: go.Link.AvoidsNodes,
curve: go.Link.JumpOver,
corner: 5,
toShortLength: 4
},
new go.Binding("points").makeTwoWay(),
$(go.Shape, // the link path shape
{ isPanelMain: true, strokeWidth: 2 }),
$(go.Shape, // the arrowhead
{ toArrow: "Standard", stroke: null }),
$(go.Panel, "Auto",
new go.Binding("visible", "isSelected").ofObject(),
$(go.Shape, "RoundedRectangle", // the link shape
{ fill: "#F8F8F8", stroke: null }),
$(go.TextBlock,
{
textAlign: "center",
font: "10pt helvetica, arial, sans-serif",
stroke: "#919191",
margin: 2,
minSize: new go.Size(10, NaN),
editable: true
},
new go.Binding("text").makeTwoWay())
)
);
My Group Template
myDiagram.groupTemplate =
$(go.Group, "Auto",
{
background: "transparent",
ungroupable: true,
mouseDragEnter: function (e, grp, prev) { highlightGroup(e, grp, true); },
mouseDragLeave: function (e, grp, next) { highlightGroup(e, grp, false); },
computesBoundsAfterDrag: true,
mouseDrop: finishDrop,
handlesDragDropForMembers: true,
computesBoundsIncludingLocation: true,
layout: makeLayout(false)
},
new go.Binding("layout", "horiz", makeLayout),
new go.Binding("background", "isHighlighted", function (h) {
return h ? "rgba(255,0,0,0.2)" : "transparent";
}).ofObject(),
$(go.Shape, "Rectangle",
{ fill: null, stroke: defaultColor(false), strokeWidth: 2 },
new go.Binding("stroke", "horiz", defaultColor),
new go.Binding("stroke", "color")),
$(go.Panel, "Vertical", // title above Placeholder
$(go.Panel, "Horizontal", // button next to TextBlock
{ stretch: go.GraphObject.Horizontal, background: defaultColor(false) },
new go.Binding("background", "horiz", defaultColor),
new go.Binding("background", "color"),
$("SubGraphExpanderButton",
{ alignment: go.Spot.Right, margin: 5 }),
$(go.TextBlock,
{
alignment: go.Spot.Left,
editable: true,
margin: 5,
font: defaultFont(false),
opacity: 0.75, // allow some color to show through
stroke: "#404040"
},
new go.Binding("text", "viewName").makeTwoWay()),
new go.Binding("font", "horiz", defaultFont),
),
$(go.Placeholder, // becomes zero-sized when Group.isSubGraphExpanded is false
{ row: 1, columnSpan: 2, padding: 10, alignment: go.Spot.TopLeft },
new go.Binding("padding", "isSubGraphExpanded",
function (exp) { return exp ? 10 : 0; }).ofObject())
) // end Vertical Panel
);