Lanes over lapping each other

@Gowrishankar wrote:

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:

2.jpg1200x677 32.4 KB

OutPut expected:

1.jpg1200x677 30.7 KB

Hope I will get good solution from your side.

Posts: 2

Participants: 2

Read full topic