In this topic [How to limit delete key]
each 1st node has been place in top-left, but me drag and drop in center of the grid the save but each time 1st node only arrange like top-left. can you please give me a suggest for swimelane???
You seem to be asking about a new topic, so I have moved your post to be a new topic.
Could you please explain exactly what behavior you are asking about? Show me the lane’s Group.layout. Is there a TwoWay Binding on the Node.location so that the user’s manual movement of nodes is recorded in the node data objects in the model?
i drag and drop a node from palette in group(grid), then save the swim lane all of the node was in same place i mean which one i drop in which location that one will be save in data base with location. after reload a page the 1st node only re-arranged and showing in top-left side rest of the node is place it appropriate position.
exe : New Node4, New Node2, New Node3 this only miss order from that position always shows this kind, i thing in swim lane few property is default taking top left
OK, so I am guessing that your node template does have a TwoWay Binding on Node.location. But what is your group/lane’s layout? In fact, what is the lane’s template?
i cannot understand your question can you ask clearly?
What is the template that you are using for the lanes?
myDiagram.nodeTemplate
First, you aren’t showing how your template is defined. Second, I was asking about the template for the lanes, not for the nodes.
still i’m not understating your technical term, if this possible can you give me a screenshots or example
swim-lane Template currently using
So you have made absolutely no changes to the Group template that is used to represent lanes?
myDiagram.groupTemplate =
(go.Group, "Horizontal", groupStyle(),
{
selectionObjectName: "SHAPE", // selecting a lane causes the body of the lane to be highlit, not the label
resizable: true, resizeObjectName: "SHAPE", // the custom resizeAdornmentTemplate only permits two kinds of resizing
layout: (go.LayeredDigraphLayout, // automatically lay out the lane’s subgraph
{
isInitial: false, // don’t even do initial layout
isOngoing: false, // don’t invalidate layout when nodes or links are added or removed
// direction: 0,
// columnSpacing: 10,
// layeringOption: go.LayeredDigraphLayout.LayerLongestPathSource,
}),
computesBoundsAfterDrag: true, // needed to prevent recomputing Group.placeholder bounds too soon
computesBoundsIncludingLinks: false, // to reduce occurrences of links going briefly outside the lane
computesBoundsIncludingLocation: true, // to support empty space at top-left corner of lane
handlesDragDropForMembers: true, // don't need to define handlers on member Nodes and Links
mouseDrop: function (e, grp) { // dropping a copy of some Nodes and Links onto this Group adds them to this Group
if (!e.shift) return; // cannot change groups with an unmodified drag-and-drop
// don't allow drag-and-dropping a mix of regular Nodes and Groups
if (!e.diagram.selection.any(function (n) { return n instanceof go.Group; })) {
var ok = grp.addMembers(grp.diagram.selection, true);
if (ok) {
// updateCrossLaneLinks(grp);
} else {
grp.diagram.currentTool.doCancel();
}
} else {
e.diagram.currentTool.doCancel();
}
},
subGraphExpandedChanged: function (grp) {
var shp = grp.resizeObject;
if (grp.diagram.undoManager.isUndoingRedoing) return;
if (grp.isSubGraphExpanded) {
shp.height = grp._savedBreadth;
} else {
grp._savedBreadth = shp.height;
shp.height = NaN;
}
// updateCrossLaneLinks(grp);
}
},
new go.Binding("isSubGraphExpanded", "expanded").makeTwoWay(),
new go.Binding("position", "pos", go.Point.parse).makeTwoWay(go.Point.stringify),
this one used for this, here any thing i missed or add any?
myDiagram.groupTemplate =
$ (go.Group, "Horizontal", groupStyle(),
{
selectionObjectName: "SHAPE", // selecting a lane causes the body of the lane to be highlit, not the label
resizable: true, resizeObjectName: "SHAPE", // the custom resizeAdornmentTemplate only permits two kinds of resizing
layout: $(go.LayeredDigraphLayout, // automatically lay out the lane's subgraph
{
isInitial: false, // don't even do initial layout
isOngoing: false, // don't invalidate layout when nodes or links are added or removed
// direction: 0,
// columnSpacing: 10,
// layeringOption: go.LayeredDigraphLayout.LayerLongestPathSource,
}),
computesBoundsAfterDrag: true, // needed to prevent recomputing Group.placeholder bounds too soon
computesBoundsIncludingLinks: false, // to reduce occurrences of links going briefly outside the lane
computesBoundsIncludingLocation: true, // to support empty space at top-left corner of lane
handlesDragDropForMembers: true, // don't need to define handlers on member Nodes and Links
mouseDrop: function (e, grp) { // dropping a copy of some Nodes and Links onto this Group adds them to this Group
if (!e.shift) return; // cannot change groups with an unmodified drag-and-drop
// don't allow drag-and-dropping a mix of regular Nodes and Groups
if (!e.diagram.selection.any(function (n) { return n instanceof go.Group; })) {
var ok = grp.addMembers(grp.diagram.selection, true);
if (ok) {
// updateCrossLaneLinks(grp);
} else {
grp.diagram.currentTool.doCancel();
}
} else {
e.diagram.currentTool.doCancel();
}
},
subGraphExpandedChanged: function (grp) {
var shp = grp.resizeObject;
if (grp.diagram.undoManager.isUndoingRedoing) return;
if (grp.isSubGraphExpanded) {
shp.height = grp._savedBreadth;
} else {
grp._savedBreadth = shp.height;
shp.height = NaN;
}
// updateCrossLaneLinks(grp);
}
},
new go.Binding("isSubGraphExpanded", "expanded").makeTwoWay(),
new go.Binding("position", "pos", go.Point.parse).makeTwoWay(go.Point.stringify),
{ // what to do when a drag-over or a drag-drop occurs on a Group
mouseDragEnter: function (e, grp, prev) {
highlightGroup(grp, true);
},
mouseDragLeave: function (e, grp, next) {
highlightGroup(grp, false);
},
mouseDrop: function (e, grp) {
var searchResult = jQuery.grep(myDiagram.model["nodeDataArray"], function (elem) {
return elem.ID == myDiagram.selection.first().data.ID;
});
if (searchResult.length != 1) {
grp.diagram.currentTool.doCancel();
return false;
}
var ok = grp.addMembers(grp.diagram.selection, true);
if (!ok) grp.diagram.currentTool.doCancel();
grp.diagram;
ModuleUpdate();
}
},
// the lane header consisting of a Shape and a TextBlock
$(go.Panel, "Horizontal",
{
name: "HEADER",
angle: 270, // maybe rotate the header to read sideways going up
alignment: go.Spot.Center
},
$(go.Panel, "Horizontal", // this is hidden when the swimlane is collapsed
new go.Binding("visible", "isSubGraphExpanded").ofObject(),
$(go.Shape,
{ width: 0, height: 0 },
new go.Binding("fill", "color")),
$(go.TextBlock, // the lane label
{ font: "600 14px sans-serif", editable: false, textAlign: "center", stroke: '#fff', verticalAlignment: go.Spot.Center, background: "", width: 100, height: 30, margin: new go.Margin(0, 0, 0, 0) },
new go.Binding("text", "text").makeTwoWay()),
),//background: "lightblue",
$("SubGraphExpanderButton", {
"_buttonFillOver": "",
width: 20, height: 30
}) // but this remains always visible!
), // end Horizontal Panel
$(go.Panel, "Auto", // the lane consisting of a background Shape and a Placeholder representing the subgraph
$(go.Shape, "Rectangle", // this is the resized object
{ name: "SHAPE", fill: "white", strokeWidth: 2, stroke: '#fff' },
// new go.Binding("fill", "color"),
new go.Binding("desiredSize", "size", go.Size.parse).makeTwoWay(go.Size.stringify)),
$(go.Panel, "Grid",
{ name: "GRID", desiredSize: new go.Size(100, 100), gridCellSize: new go.Size(5, 5) },
new go.Binding("desiredSize", "size", go.Size.parse).makeTwoWay(go.Size.stringify),
new go.Binding("gridCellSize", "cell", go.Size.parse).makeTwoWay(go.Size.stringify),
$(go.Shape, "LineV",
new go.Binding("stroke")),
$(go.Shape, "LineH",
new go.Binding("stroke")
)
),
$(go.Placeholder,
{ padding: 12, alignment: go.Spot.TopLeft }),
$(go.TextBlock, // this TextBlock is only seen when the swimlane is collapsed
{
name: "LABEL",
font: "bold 13pt sans-serif", editable: false,
angle: 0, alignment: go.Spot.TopLeft, margin: new go.Margin(2, 0, 0, 4)
},
new go.Binding("visible", "isSubGraphExpanded", function (e) { return !e; }).ofObject(),
new go.Binding("text", "text").makeTwoWay()),
) // end Auto Panel
); // end Group
this is the already there in swim lane grouping template. exactly this one only right now i’m using
You have disabled initial layout (Layout.isInitial is false), so loading the diagram/model will not automatically re-arrange all of the nodes. That is what the SwimLanes sample does, and I think that is what you want.
The Group’s Placeholder is aligned to be at the TopLeft of the group, but that is OK because you have set Group.computesBoundsIncludingLocation to true. Again, the SwimLanes sample does that, and I think that is what you want.
When you try the SwimLanes sample, does it do what you want? I find that if I move the nodes in some lane/group to be away from the top left corner of the lane, save the model, then load the model, the nodes go back where I had dragged them. That is the behavior that you want, isn’t it? The nodes do not appear up in the top-left corner as you are describing.
that Layout.isInitial initially now true, Group.computesBoundsIncludingLocation also true but again shows same top left
If you want to use the saved values that you have for the node locations, you do not want the layout to move them around. That is what Layout.isInitial being false is for.
i cannot understand your answer,
layout: $(go.LayeredDigraphLayout, // automatically lay out the lane’s subgraph
{
isInitial: false, // don’t even do initial layout
isOngoing: false, // don’t invalidate layout when nodes or links are added or removed
// direction: 0,
// columnSpacing: 10,
// layeringOption: go.LayeredDigraphLayout.LayerLongestPathSource,
}),
isInitial: false, i given for old
now i tried true on that time each drop node has been arranged top left down 
https://gojs.net/latest/intro/layouts.html#LayoutInvalidation
Yes, normally (i.e. when Layout.isInitial is true) when you load a model the Diagram.layout will be invalidated and then it will be performed. In your case there is only one orange node in the top lane/Group, so that Group.layout will just position the one node, and the group of member nodes will be placed at the top-left corner of the lane because the Placeholder.alignment is go.Spot.TopLeft.