Hi Folks
- I did some modification in gojs swimlane (i.e) i need to put swimlane name in top of the lanes
- But, when i add second swimlane its overlapping the first swimlane
Grouptemplate code:
myDiagram.groupTemplate =
$(go.Group, "Vertical", groupStyle(), {
background: "transparent",
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
}),
// highlight when dragging into the Group
mouseDragEnter: function(e, grp, prev) { highlightGroup(e, grp, true); },
mouseDragLeave: function(e, grp, next) { highlightGroup(e, grp, false); },
stretch: go.GraphObject.Fill,
selectable: false,
computesBoundsAfterDrag: true,
computesBoundsIncludingLocation: true,
handlesDragDropForMembers: true,
canUngroup: function(e, group) {},
// 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: function(e, group) {
var dropppedNode = group.diagram.selection.first()
var node = dropppedNode.data // cannot change groups with an unmodified drag-and-drop
// don't allow drag-and-dropping a mix of regular Nodes and Groups
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.data)
}
} else { // failure upon trying to add parts to this group
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("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
$(go.Panel, "Vertical", // title above Placeholder
$(go.Panel, "Horizontal", // button next to TextBlock
//new go.Binding("visible", "isSubGraphExpanded").ofObject(), { stretch: go.GraphObject.Horizontal },
$(go.TextBlock, {
alignment: go.Spot.Left,
editable: true,
margin: 5,
font: "bold 16px sans-serif",
stroke: "#777"
},
new go.Binding("text", "text").makeTwoWay()),
$("SubGraphExpanderButton", { alignment: go.Spot.TopRight, margin: 5 })
), // end Horizontal Panel
//$("SubGraphExpanderButton", { margin: 5 }),
$(go.Panel, "Auto", { name: "PANEL" },
$(go.Shape, "Rectangle", // the rectangular shape around the members
{
fill: "#f6f6f6",
stroke: "gray",
strokeWidth: 1,
strokeDashArray: [2, 2, 2, 2],
portId: "",
cursor: "pointer"
}),
new go.Binding("desiredSize", "size", go.Size.parse).makeTwoWay(go.Size.stringify),
$(go.Placeholder, { margin: 10, background: "transparent" }) // represents where the members are
)
) // end Vertical Panel
);
Current Output:
OutPut expected:
Hope I will get good solution from your side.
