Swim lane view background turns darkgray when node drag into other lanes

This issue occur when i update my gojs version from 2.1.22 to 2.3.11

  function PoolLayout() {
       go.GridLayout.call(this);
       this.cellSize = new go.Size(1, 1);
       this.wrappingColumn = 1;
       this.wrappingWidth = Infinity;
       this.isRealtime = false;  // don't continuously layout while dragging
       this.alignment = go.GridLayout.Position;
       // This sorts based on the location of each Group.
       // This is useful when Groups can be moved up and down in order to change their order.
       this.comparer = function (a, b) {
           var ay = a.location.y;
           var by = b.location.y;
           if (isNaN(ay) || isNaN(by)) return 0;
           if (ay < by) return -1;
           if (ay > by) return 1;
           return 0;
       };
   }
   go.Diagram.inherit(PoolLayout, go.GridLayout);

    PoolLayout.prototype.doLayout = function (coll) {
        var diagram = this.diagram;
        if (diagram === null) return;
        diagram.startTransaction("PoolLayout");
        var pool = this.group;
        if (pool !== null && pool.category === "Pool") {
            // make sure all of the Group Shapes are big enough
            var minsize = computeMinPoolSize(pool);
            pool.memberParts.each(function (lane) {
                if (!(lane instanceof go.Group)) return;
                if (lane.category !== "Pool") {
                    var shape = lane.resizeObject;
                    if (shape !== null) {  // change the desiredSize to be big enough in both directions
                        var sz = computeLaneSize(lane);
                        shape.width = (isNaN(shape.width) ? minsize.width : Math.max(shape.width, minsize.width));
                        shape.height = (!isNaN(shape.height)) ? Math.max(shape.height, sz.height) : sz.height;
                        var cell = lane.resizeCellSize;
                        if (!isNaN(shape.width) && !isNaN(cell.width) && cell.width > 0) shape.width = Math.ceil(shape.width / cell.width) * cell.width;
                        if (!isNaN(shape.height) && !isNaN(cell.height) && cell.height > 0) shape.height = Math.ceil(shape.height / cell.height) * cell.height;
                    }
                }
            });
        }
        // now do all of the usual stuff, according to whatever properties have been set on this GridLayout
        go.GridLayout.prototype.doLayout.call(this, coll);
        diagram.commitTransaction("PoolLayout");
    };

    this.poolGroupTemplate =
        $(go.Group, "Auto", groupStyle(),
            {
                selectionAdorned: false,  // use a Binding on the Shape.stroke to show selection
                computesBoundsIncludingLinks: false,
                // use a simple layout that ignores links to stack the "lane" Groups on top of each other
                layout: $(PoolLayout, { spacing: new go.Size(0, 0) })  // no space between lanes
            },
            new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
            $(go.Shape,
                { fill: "white" },
                new go.Binding("fill", "color")),
            $(go.Panel, "Table",
                { defaultColumnSeparatorStroke: "black" },
                $(go.Panel, "Horizontal",
                    { column: 0, angle: 270 }
                    //$(go.TextBlock,
                    //    { editable: true, margin: new go.Margin(0, 0, 0, 0) },  // margin matches private process (black box pool)
                    //    new go.Binding("text").makeTwoWay())
                ),
                $(go.Placeholder,
                    { background: "darkgray", column: 1 })
            )
        ); // end poolGroupTemplate

Does it help if you set the Placeholder.background to “transparent”?

yes walter, i have tried transparent but the problem is outline for lanes are also faded.

this is my diagram of lane by using darkgray

Ah, you did start with an old copy of the SwimLanes sample. If you look at the current SwimLanes sample, Swim Lanes, it doesn’t use that darkgray background.

Hmmm, I looked back at older versions and didn’t find that problem. Even in version 1.6.0, literally 8 years ago, the Placeholder did not have a gray background. Maybe you started from some other sample?

If you look at the latest sample, perhaps you can see how to change your Pool Group template or your Lane Group template in the way that you want.
Check your common groupStyle too.

my pool group template is -

    this.poolGroupTemplate =
        $(go.Group, "Auto", groupStyle(),
            {
                selectionAdorned: false,  
                computesBoundsIncludingLinks: false,
                layout: $(PoolLayout, { spacing: new go.Size(0, 0) })  
            },
            new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
            $(go.Shape,
                { fill: "white" },
                new go.Binding("fill", "color")),
            $(go.Panel, "Table",
                { defaultColumnSeparatorStroke: "black" },
                $(go.Panel, "Horizontal",
                    { column: 0, angle: 270 }
                ),
                $(go.Placeholder,
                    { background: "darkgray", column: 1 })
            )
        ); 

and here is groupStyle-

    function groupStyle() {  
        return [
            {
                layerName: "Background",  
                background: "transparent", 
                movable: false, 
                copyable: false,  
                avoidable: false 
            },
            new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify)
        ];
    }

even though I applied the layer name “background” and set the background to “dark gray” in the pool group template, there was no effect in the swim lane. The dark background still randomly appears when I drag the node into other lanes.
Walter, could you please suggest what changes I need to make to find a solution?

Ah, I suspect you started from the BPMN sample, not the SwimLanes sample.

Here’s the newer definition for poolGroupTemplate:

  const poolGroupTemplate = $(go.Group, 'Auto', groupStyle(),
    {
      computesBoundsAfterDrag: true, // needed to prevent recomputing Group.placeholder bounds too soon
      computesBoundsIncludingLinks: false,
      // use a simple layout that ignores links to stack the "lane" Groups on top of each other
      layout: $(PoolLayout, { spacing: new go.Size(0, 0) }), // no space between lanes
    },
    new go.Binding('location', 'loc', go.Point.parse).makeTwoWay(go.Point.stringify),
    $(go.Shape, { fill: 'white' }, new go.Binding('fill', 'color')),
    $(go.Panel, 'Table',
      { defaultColumnSeparatorStroke: 'black' },
      $(go.Panel, 'Horizontal',
        { column: 0, angle: 270 },
        $(go.TextBlock,
          { editable: true, margin: new go.Margin(5, 0, 5, 0) }, // margin matches private process (black box pool)
          new go.Binding('text').makeTwoWay()
        )
      ),
      $(go.Placeholder, { column: 1 })
    )
  ); // end poolGroupTemplate

Note that the setting of Placeholder.background has been removed – the default value is null.

image

This will remove my lane outlines

Do the (relevant) pieces of the rest of the Group template match what I just gave you, copied from an updated version of the BPMN sample?

yes, I have applied your code but lane outline are missing after drag node into another lane and background: darkgray is solved by doing this. can you please suggest changes for retaining the outlines of lane after the node drag into another lane.

I have used GroupTemplate like this-
this.swimLanesGroupTemplate.resizeAdornmentTemplate =
$(go.Adornment, “Spot”,
$(go.Placeholder),
$(go.Shape,
{
alignment: go.Spot.Right,
desiredSize: new go.Size(7, 50),
fill: “lightblue”, stroke: “dodgerblue”,
cursor: “col-resize”
},
new go.Binding(“visible”, “”, function (ad) {
if (ad.adornedPart === null) return false;
return ad.adornedPart.isSubGraphExpanded;
}).ofObject()),
$(go.Shape,
{
alignment: go.Spot.BottomCenter,
desiredSize: new go.Size(150, 7),
fill: “lightblue”, stroke: “dodgerblue”,
cursor: “row-resize”
},
new go.Binding(“visible”, “”, function (ad) {
if (ad.adornedPart === null) return false;
return ad.adornedPart.isSubGraphExpanded;
}).ofObject()),
$(go.Shape,
{
alignment: go.Spot.TopCenter,
desiredSize: new go.Size(150, 7),
fill: “lightblue”, stroke: “dodgerblue”,
cursor: “row-resize”
},
new go.Binding(“visible”, “”, function (ad) {
if (ad.adornedPart === null) return false;
return ad.adornedPart.isSubGraphExpanded;
}).ofObject())
);

Add this as the last element of swimLanesGroupTemplate:

    $(go.Shape, "LineH", { height: 0, alignment: go.Spot.Bottom, stretch: go.GraphObject.Horizontal })

i have applied but not affected in any way. the problem when click outside the lane then lanes get disappear.

All I did to change the latest copy of the projects/bpmn/BPMNScript.ts file was to add that “LineH” Shape as the last element of the swimLanesGroupTemplate and to remove the background: 'darkgray' from the poolGroupTemplate.

Here are both of the modified templates:

  const swimLanesGroupTemplate =
    $(go.Group, 'Spot', groupStyle(),
      {
        name: 'Lane',
        contextMenu: laneEventMenu,
        minLocation: new go.Point(NaN, -Infinity),  // only allow vertical movement
        maxLocation: new go.Point(NaN, Infinity),
        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: go.InputEvent, grp: go.GraphObject) {  // dropping a copy of some Nodes and Links onto this Group adds them to this Group
          // don't allow drag-and-dropping a mix of regular Nodes and Groups
          if (!e.diagram.selection.any((n) => (n instanceof go.Group && n.category !== 'subprocess') || n.category === 'privateProcess')) {
            if (!(grp instanceof go.Group) || grp.diagram === null) return;
            const ok = grp.addMembers(grp.diagram.selection, true);
            if (ok) {
              updateCrossLaneLinks(grp);
              relayoutDiagram();
            } else {
              grp.diagram.currentTool.doCancel();
            }
          }
        },
        subGraphExpandedChanged: function (grp: go.Group) {
          if (grp.diagram === null) return;
          if (grp.diagram.undoManager.isUndoingRedoing) return;
          const shp = grp.resizeObject;
          if (grp.isSubGraphExpanded) {
            shp.height = grp.data.savedBreadth;
          } else {
            if (!isNaN(shp.height)) grp.diagram.model.set(grp.data, "savedBreadth", shp.height);
            shp.height = NaN;
          }
          updateCrossLaneLinks(grp);
        }
      },
      // new go.Binding("isSubGraphExpanded", "expanded").makeTwoWay(),

      $(go.Shape, 'Rectangle',  // this is the resized object
        { name: 'SHAPE', fill: 'white', stroke: null },  // need stroke null here or you gray out some of pool border.
        new go.Binding('fill', 'color'),
        new go.Binding('desiredSize', 'size', go.Size.parse).makeTwoWay(go.Size.stringify)),

      // 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.LeftCenter, alignmentFocus: go.Spot.LeftCenter
        },
        $(go.TextBlock,  // the lane label
          { editable: true, margin: new go.Margin(2, 0, 0, 8) },
          new go.Binding('visible', 'isSubGraphExpanded').ofObject(),
          new go.Binding('text', 'text').makeTwoWay()),
        $('SubGraphExpanderButton', { margin: 4, angle: -270 })  // but this remains always visible!
      ),  // end Horizontal Panel
      $(go.Placeholder,
        { padding: 12, alignment: go.Spot.TopLeft, alignmentFocus: go.Spot.TopLeft }),
      $(go.Panel, 'Horizontal', { alignment: go.Spot.TopLeft, alignmentFocus: go.Spot.TopLeft },
        $(go.TextBlock,  // this TextBlock is only seen when the swimlane is collapsed
          {
            name: 'LABEL',
            editable: true, visible: false,
            angle: 0, margin: new go.Margin(6, 0, 0, 20)
          },
          new go.Binding('visible', 'isSubGraphExpanded', function (e) { return !e; }).ofObject(),
          new go.Binding('text', 'text').makeTwoWay())
      ),
      $(go.Shape, "LineH", { height: 0, alignment: go.Spot.Bottom, stretch: go.GraphObject.Horizontal })
    );  // end swimLanesGroupTemplate
...
  const poolGroupTemplate =
    $(go.Group, 'Auto', groupStyle(),
      {
        computesBoundsIncludingLinks: false,
        // use a simple layout that ignores links to stack the "lane" Groups on top of each other
        layout: $(PoolLayout, { spacing: new go.Size(0, 0) })  // no space between lanes
      },
      new go.Binding('location', 'loc', go.Point.parse).makeTwoWay(go.Point.stringify),
      $(go.Shape,
        { fill: 'white' },
        new go.Binding('fill', 'color')),
      $(go.Panel, 'Table',
        { defaultColumnSeparatorStroke: 'black' },
        $(go.Panel, 'Horizontal',
          { column: 0, angle: 270 },
          $(go.TextBlock,
            { editable: true, margin: new go.Margin(5, 0, 5, 0) },  // margin matches private process (black box pool)
            new go.Binding('text').makeTwoWay())
        ),
        $(go.Placeholder,
          { column: 1 })
      )
    ); // end poolGroupTemplate