I am getting the context-menu successfully. When one of the context menu is clicked I need it to be appeared as the following screenshot:
Now I am getting it in the center of the “roundedrectangle” as shown in the following screenshot:
I am pasting the code below:
private prepareSubProcessGroupTemplate() {
const topBottomMargin = 5;
const rightLeftMargin = 5;
const noSize = new go.Size(NaN, NaN);
const minSize = new go.Size(1, 1);
return go.GraphObject.make(go.Group, ‘Spot’,
{
locationSpot: go.Spot.Center,
locationObjectName: ‘SHAPE’,//ToDo:for sub process locationObjectName was PH changed to SHAPE
// locationSpot: go.Spot.Center,
isSubGraphExpanded: false,
resizable: true, resizeObjectName: ‘SHAPE’,
memberValidation: (group: object, part: object) => {
return !(part instanceof go.Group) ||
(part.category !== ‘Pool’ && part.category !== ‘Lane’);
},
mouseDrop: (e: object, grp: go.Group) => {
const ok = grp.addMembers(grp.diagram.selection, true);
if (!ok) grp.diagram.currentTool.doCancel();
},
// context menu will be assigned form diagaram componet
// contextMenu: activityNodeMenu,
contextMenu: {},
itemTemplate: this.boundaryEventItemTemplate
},
new go.Binding('itemArray', 'boundaryEventArray'),
new go.Binding('location', 'loc', go.Point.parse).makeTwoWay(go.Point.stringify),
// move a selected part into the Foreground layer, so it isn't obscured by any non-selected parts
// new go.Binding("layerName", "isSelected", function (s) { return s ? "Foreground" : ""; }).ofObject(),
go.GraphObject.make(go.Panel, 'Auto',
new go.Binding('visible', 'isSubGraphExpanded', function (v) { return !v; }).ofObject(),
new go.Binding('desiredSize', 'isSubGraphExpanded', function (v) { return v ? minSize : noSize; }).ofObject(),
go.GraphObject.make(go.Shape, 'RoundedRectangle',
{
//ToDo:for sub process locationObjectName was PH changed to SHAPE
name: 'SHAPE', fill: this.SubprocessNodeFill, stroke: this.SubprocessNodeStroke,
minSize: new go.Size(this.ActivityNodeWidth, this.ActivityNodeHeight),
portId: '', fromLinkable: true, toLinkable: true, cursor: 'pointer',
fromSpot: go.Spot.RightSide, toSpot: go.Spot.LeftSide
},
new go.Binding('desiredSize', 'size', go.Size.parse).makeTwoWay(go.Size.stringify),
new go.Binding('strokeWidth', 'isCall', (s: boolean) => s ? this.ActivityNodeStrokeWidthIsCall : this.ActivityNodeStrokeWidth)
),
go.GraphObject.make(go.Panel, 'Vertical',
{ defaultAlignment: go.Spot.Left },
go.GraphObject.make(go.TextBlock, // label
{ margin: new go.Margin(0, 10, 0, 10), editable: true },
new go.Binding('text', 'text').makeTwoWay(),
new go.Binding('alignment', 'isSubGraphExpanded', (s: boolean) => s ? go.Spot.TopLeft : go.Spot.Center),
new go.Binding('font', 'font'),
new go.Binding('stroke', 'textColor')),
// create a placeholder to represent the area where the contents of the group are
// go.GraphObject.make(go.Placeholder,
// { padding: new go.Margin(15,25) }),
this.makeMarkerPanel(true, 1,true) // sub-process, loop, parallel, sequential, ad doc and compensation markers
) // end Vertical Panel
),
go.GraphObject.make(go.Panel, 'Auto',
new go.Binding('visible', 'isSubGraphExpanded').ofObject(),
go.GraphObject.make(go.Shape, 'RoundedRectangle',
{
fill: this.SubprocessNodeFill, stroke: this.SubprocessNodeStroke,
minSize: new go.Size(this.ActivityNodeWidth, this.ActivityNodeHeight),
portId: '', fromLinkable: true, toLinkable: true, cursor: 'pointer',
fromSpot: go.Spot.RightSide, toSpot: go.Spot.LeftSide
},
new go.Binding('strokeWidth', 'isCall', function (s) { return s ? this.ActivityNodeStrokeWidthIsCall : this.ActivityNodeStrokeWidth; })
),
go.GraphObject.make(go.Panel, 'Vertical',
{ defaultAlignment: go.Spot.Left },
go.GraphObject.make(go.TextBlock, // label
{ margin: new go.Margin(0, 0, 0, 0), editable: true, alignment: go.Spot.TopLeft },
new go.Binding('text', 'text').makeTwoWay(),
new go.Binding('font', 'font'),
new go.Binding('stroke', 'textColor')
),
// create a placeholder to represent the area where the contents of the group are
// go.GraphObject.make(go.Placeholder,
//{ padding: new go.Margin(topBottomMargin, rightLeftMargin) }),
this.makeMarkerPanel(true, 1,true) // sub-process, loop, parallel, sequential, ad doc and compensation markers
) // end Vertical Panel
)
); // end Group
}