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