Label placement on Group

Hi,

I have been extending the BPMN subprocessGroupTemplate to customize it. I am having trouble getting the label to place correctly. The label is set to place at TopLeft if the group is expanded and center if it is collapsed.

I have attached a png of the issue. The label places at topleft for an expanded subprocess if the subprocess has a couple of nodes placed inside and the subprocess is sized larger by the nodes. On first drop, the label centers at the top. After a single added node, the label starts to align left. How can I get the label to align at topleft always when the group is expanded?

Thanks so much for your help.

Andrea


      var subProcessGroupTemplate =
        $(go.Group, "Spot",
          {
            copyable: false,
            locationSpot: go.Spot.Center,
            locationObjectName: "PH",
           // resizable: true, resizeObjectName: "PH",
      		fromSpot: go.Spot.AllSides, toSpot: go.Spot.AllSides, portId: "",            isSubGraphExpanded: true,            memberValidation: function (group, part) {
              return !(part instanceof go.Group) ||
                (part.category !== "Pool" && part.category !== "Lane");
            },
            mouseDragEnter: function(e, grp, prev) { highlightGroup(e, grp, true); },
            mouseDragLeave: function(e, grp, next) { highlightGroup(e, grp, false); },
            computesBoundsAfterDrag: true,
            // 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: finishDrop,
            handlesDragDropForMembers: true,  // don't need to define handlers on member Nodes and Links
            // Groups containing Groups lay out their members horizontally
            contextMenu: activityNodeMenu,
            itemTemplate: boundaryEventItemTemplate,
            selectionAdornmentTemplate:
          $(go.Adornment, "Auto",
            $(go.Shape, "RoundedRectangle",
            { fill: null, stroke: "#296796", strokeWidth: 1.5,
            strokeDashArray: [3,2] }),
            $(go.Placeholder)
          )
          },
          new go.Binding("background", "isHighlighted", function(h) {
            if(h) return "rgba(41,103,150)"; else return "transparent";}).ofObject(),
          new go.Binding("itemArray", "boundaryEventArray"),
        $(go.Panel, "Auto",
            $(go.Shape, "RoundedRectangle",
              {
                name: "PH", fill: "rgba(255,255,255, 0.8)", stroke: SubprocessNodeStroke,
                portId: "", fromLinkable: true, toLinkable: true, cursor: "pointer",
                fromSpot: go.Spot.RightSide, toSpot: go.Spot.LeftSide
              }, 
              new go.Binding("minSize", "isSubGraphExpanded", 
              function(s) {
                if(s){return new go.Size(200, 100);} 
                else {return new go.Size(ActivityNodeWidth, ActivityNodeHeight);}}).ofObject(),
              new go.Binding("strokeWidth", "isCall", function (s) { return s ? ActivityNodeStrokeWidthIsCall : ActivityNodeStrokeWidth; })
            ),
            $(go.Panel, "Vertical",
              { defaultAlignment: go.Spot.TopLeft },
              $(go.TextBlock,  // label
                { margin: 3, editable: true },
                new go.Binding("text", "label").makeTwoWay(),
                new go.Binding("alignment", "isSubGraphExpanded", function (s) { return s ? go.Spot.TopLeft : go.Spot.Center; })),
              // create a placeholder to represent the area where the contents of the group are
              $(go.Placeholder,
            { padding: new go.Margin(20, 20)},
              ),
              makeMarkerPanel(true, 1)  // sub-process,  loop, parallel, sequential, ad doc and compensation markers
            )  // end Vertical Panel
          )
        );

You appear to have a “Spot” Panel with only one element in it – that’s probably a waste, unless you have left some stuff out of the template just to ask this question.

The “Auto” Panel has the “RoundedRectangle” Shape surround the “Vertical” Panel.

The “Vertical” Panel holds a TextBlock, the Placeholder, and maybe some other stuff.

So the TextBlock is always at the left side of the “Vertical” Panel, but its relative positioning depends on the widths of the other elements in the “Vertical” Panel. If those other elements have widths that are close to the width of the TextBlock, the TextBlock cannot be much to the left of those other elements.