Context Menu button click issue

@premthomas95 wrote:

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:

Capture.PNG736x260 3.42 KB

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

}

Posts: 1

Participants: 1

Read full topic