Swimlane Collapse/Expand breadth issue

Hi,
I am using swimlanes in a web socket. There is a issue occuring when the any one of the lane is collapsed grp width :undefined shape width: 213.90087890625 are the values for user who performed the collapsed
but for the broadcasted users it is like this
grp width undefined shape width 26.52284749830794 which is a min width value
Here is the grouptemplate , these are the properties for group style

 {
          layerName: "Background",  // all pools and lanes are always behind all nodes and links
          background: "transparent",  // can grab anywhere in bounds
          movable: true, // allows users to re-order by dragging
          copyable: false,  // can't copy lanes or pools
          avoidable: false,  // don't impede AvoidsNodes routed Links
        },
$(Group, "Vertical", 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: $(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: 90,
              columnSpacing: 10,
              layeringOption: 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 Group; })) {
              var ok = (grp as Group).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.width = grp._savedBreadth;
            } else {
              grp._savedBreadth = shp.width;
              shp.width = NaN;
            }
            updateCrossLaneLinks(grp);
          }
        },
        new Binding("isSubGraphExpanded", "expanded").makeTwoWay(),
        // the lane header consisting of a Shape and a TextBlock
        $(Panel, "Horizontal",
          {
            name: "HEADER",
            angle: 0,  // maybe rotate the header to read sideways going up
            alignment: Spot.Center
          },
          $(Panel, "Horizontal",  // this is hidden when the swimlane is collapsed
            new Binding("visible", "isSubGraphExpanded").ofObject(),
            $(Shape, "Diamond",
              { width: 8, height: 8, fill: "white" },
              new Binding("fill", "color")),
            $(TextBlock,  // the lane label
              { font: "bold 13pt sans-serif", editable: true, margin: new Margin(2, 0, 0, 0) },
              new Binding("text", "text").makeTwoWay())
          ),
          $("SubGraphExpanderButton", { margin: 5 })  // but this remains always visible!
        ),  // end Horizontal Panel
        $(Panel, "Auto",  // the lane consisting of a background Shape and a Placeholder representing the subgraph
          $(Shape, "Rectangle",  // this is the resized object
            { name: "SHAPE", fill: "white", contextMenu: contextForLane },
            new Binding("fill", "color"),
            new Binding("desiredSize", "size", Size.parse).makeTwoWay(Size.stringify)),
          $(Placeholder,
            { padding: 12, alignment: Spot.TopLeft }),
          $(TextBlock,  // this TextBlock is only seen when the swimlane is collapsed
            {
              name: "LABEL",
              font: "bold 13pt sans-serif", editable: true,
              angle: 90, alignment: Spot.TopLeft, margin: new Margin(4, 0, 0, 2)
            },
            new Binding("visible", "isSubGraphExpanded", function (e) { return !e; }).ofObject(),
            new Binding("text", "text").makeTwoWay())
        )  // end Auto Panel
      );

I wasn’t able to understand what might be causing change in shape width over the broadcast.
The issue goes like this when i add the initial swimlane group it looks fine for all users but when the any of the user tries to collapse and expand the lane. The collapse looks fine for all but when expanded the lane the main user lane width is looking fine while for the rest of the users it is not same width

You need to decide whether you need to broadcast the width at all. Why is it needed? Can’t each diagram figure out what the width should be depending only on whether or not the group is expanded?

Actually, I’m not broadcasting any width. The size property in groupTemplate has a two-way binding. It should update those values through incremental data, right?
I think the same kind of scenario exists in the swimlane example of gojs page.
Swimlane Vertical
Try to perform the following steps

  1. Resize any of the lane widths and save the data
    without collapsing any of the lanes

  2. Load back that data. You can see that the lane width was preserved

  3. Now perform the above two steps this time save the data by collapsing the lane that was resized and when you load back the data if you expand the lane it doesn’t have resized lane width before it was collapsed

Here is the image data of the scenario
Before the save


After loading the JSON it is the same.
If I collapse lane 1 save and load the JSON and now if I expand lane 1 it doesn’t have the previous resized width of lane 1 and looks like this instead of the above image

I would like to know how to save the resized width of the lane when I am trying to save the data with the lane collapsed. So that when I load back the data if I expand the lane I can have the previous resized width

Replace the use of “_savedBreadth”, which is just in memory, to the use of a “savedBreadth” property on the group data object:

            subGraphExpandedChanged: function(grp) {
              var shp = grp.resizeObject;
              if (grp.diagram.undoManager.isUndoingRedoing) return;
              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);
            }
1 Like

Thanks Walter. It worked but is there api docs regarding these properties

Which properties? _savedBreadth was just an app-specific property added to a Group. I moved it to the Group.data object in the model so that it would be saved and later restored, just like any other property on model data objects.

By the way, Model.toJson does not save any properties whose names start with “_”, which is why I renamed the property to savedBreadth.

1 Like