Context Menu button click issue


#1

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:Capture1

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

}


#2

I’m sorry, but you have commented out the original contextMenu and set it to an invalid object. Are you using go-debug.js and checking the console output for any warnings or errors?

And your code (which would be more readable if it were formatted correctly, Code Formatting) does not appear to implement a context menu at all. Perhaps it’s implemented elsewhere?


#3

Didn’t get your point…Please explain me…Pasting the code again:

    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
  } ```

#4

I was just saying that I did not see the definition of your context menu. And I still don’t see it in the code that you just posted.