Condition context menu when link snap happens

GoJS
1

I want to show this context menu when we connect (while link is getting snapped) exclusive gateway with other shape. on Press YES the condition gets set as label in link

My problem: not able to trigger while the link is getting created, this context is acting as normal behavior i.e on RIght click, but i want to trigger while the link is getting snapped

Code for link template and its context menu below

const $ = go.GraphObject.make;
    return $(
      go.Link, // the whole link panel
      {
        selectable: true,
      },
      {
        relinkableFrom: true,
        relinkableTo: true,
        reshapable: true,
        resegmentable: true,
      },
      {
        routing: go.Link.AvoidsNodes,
        curve: go.Link.JumpOver,
        corner: 10,
        toShortLength: 4,
      },
      new go.Binding("points").makeTwoWay(),
      $(
        go.Shape, // the link path shape
        {
          isPanelMain: true,
          strokeWidth: 1,
        }
      ),
      $(
        go.Shape, // the arrowhead
        {
          toArrow: "Boomerang",
        }, ),
      $(
        go.TextBlock,
        {
          editable: true,
          text: "Condition",
          shadowVisible: false,
          visible: linkType === "labeled" ? true : false,
          segmentOffset: new go.Point(30, 18),
        },
        new go.Binding("text", "label").makeTwoWay()
      ),
      {

        contextMenu: $(
          "ContextMenu",
          this.createContextMenuTextBlock("Yes"),
          this.createContextMenuTextBlock("No")
        ),
      }
    );
  }

  createContextMenuTextBlock(menuItem) {
    const $ = go.GraphObject.make;
    return $(
      "ContextMenuButton",
      $(go.TextBlock, "Horizontal", {
        text: menuItem,
        width: 137,
        height: 32,
        textAlign: "left",
        margin: new go.Margin(0, 0, 0, 10),
        verticalAlignment: go.Spot.Center,
      }),
      {
        click: (e) => this.conditionHandler(e, menuItem),
      }
    );
  }

  conditionHandler(e, menuItem) {
    if ("Yes" === menuItem) {
     //implement for yes case
    } else if ("No" === menuItem) {
     //implement for no case
    }
  }

image
image941×309 21.4 KB

Note: I already have a callback of linkDrawn it gets called when i snap the connection, the only thing im not able to do is trigger

 this.diagram.addDiagramListener("LinkDrawn", (e) => {
      if (typeof this.callbacks?.onLinkDrawn === "function") {
      
   // operation when link is drawn

      }
    });
2

You have to wait until the Link drawing has finished before it makes sense to show the context menu.

    $(go.Diagram, . . .,
      {
        "LinkDrawn": function(e) {
          setTimeout(function() {
            e.diagram.commandHandler.showContextMenu(e.subject);
          });
        },
3

Above solution worked thanks for that,

this is another problem which i want to solve,
When i press the context item (like: YES) it should appear on the label of the link.
The above code is used for the link template.
below is the code of context menu item YES

  menu.push({
            label: "Yes",
            keepOpen: false,
            action: () => {
                node.data.label = 'Yes'
            },
        });

this changes the linkDataArray=[] but does not change in the canvas itself

image
image

4

If you are depending on updating of GraphObject properties (such as TextBlock.text) via data Bindings, then you have to call Model methods in order to change the data – in particular you need to call Model.set when changing the value of data.label.

And all of the changes need to be executed within a single transaction.

action: () => {
  myDiagram.model.commit(m => {
    m.set(node.data, "label", "Yes");
  });
}