Label placement on Group

@aples wrote:

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

SubprocessSamples.png1046x540 31 KB

      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
          )
        );

Posts: 1

Participants: 1

Read full topic