ContextMenu hidden/invisible

Hello,

in orientation to this example i tried to use my own custon contextmenu.
I struggeled to get it going, so I almost copied the example. I only changed the names of the variables and methods a bit.
For some reason the contextMenu is not shown on my diagram.

Since the code for the contextMenu is the same as in the example, there must be a different reason.
I am using GoJS in combination with Leaflet.
I was using jquery contexmenus in the past, but I want to try out this one.

Take a look at the nodeTemplate that I am trying to use the contextMenu for,
I also tried using the contextMenu for the diagram ifself, so that a backgroundclick will trigger a contextMenu

basicGoJSNodeTemplate = $(go.Node, "Table", { locationObjectName: "", locationSpot: go.Spot.Center, selectable: true, selectionAdornmentTemplate: nodeSelectionAdornmentTemplate, resizable: true, resizeObjectName: "BODY", resizeAdornmentTemplate: nodeResizeAdornmentTemplate, rotatable: true, rotateAdornmentTemplate: nodeRotateAdornmentTemplate, contextMenu: contextMenuBasicNT }, $(go.Panel, "Auto", { row: 1, column: 1, stretch: go.GraphObject.Fill, }, $(go.Shape, "Circle", { // default figure fill: "blue", // default color strokeWidth: 3, name: "BODY", },

My first suggestion was that the contextMenu is behind the diagram, so I already tried to adjust the z-index.

I placed the contextMenu div outside the diagrams div

I hope you have some suggestions for me!
Best regards!

OK, so I just did what I think you described. I made a copy of the samples/leaflet.html file.

First, I added two trivial GoJS context menus, setting Diagram.contextMenu and GraphObject.contextMenu on the node template. Those worked.

Second, I deleted those two menus and copied the code from samples/customContextMenu.html. That meant adding the CSS style, the <div> element to act as the HTML context menu as a sibling of the Diagram div, changing the containing DIV to be position relative:

    .mapDiagram {
      position: relative;
      border: solid 1px black;
      width: 500px;
      height: 500px;
    }

and copying the code to create the HTMLInfo that is used as both context menus:

      // This is the actual HTML context menu:
      var cxElement = document.getElementById("contextMenu");

      // Since we have only one main element, we don't have to declare a hide method,
      // we can set mainElement and GoJS will hide it automatically
      var myContextMenu = $(go.HTMLInfo, {
        show: showContextMenu,
        mainElement: cxElement
      });

      myDiagram.contextMenu = myContextMenu;

      // We don't want the div acting as a context menu to have a (browser) context menu!
      cxElement.addEventListener("contextmenu", function(e) {
        e.preventDefault();
        return false;
      }, false);

      function showContextMenu(obj, diagram, tool) {
        // Show only the relevant buttons given the current state.
        var cmd = diagram.commandHandler;
        document.getElementById("cut").style.display = cmd.canCutSelection() ? "block" : "none";
        document.getElementById("copy").style.display = cmd.canCopySelection() ? "block" : "none";
        document.getElementById("paste").style.display = cmd.canPasteSelection() ? "block" : "none";
        document.getElementById("delete").style.display = cmd.canDeleteSelection() ? "block" : "none";
        document.getElementById("color").style.display = (obj !== null ? "block" : "none");

        // Now show the whole context menu element
        cxElement.style.display = "block";
        // we don't bother overriding positionContextMenu, we just do it here:
        var mousePt = diagram.lastInput.viewPoint;
        cxElement.style.left = mousePt.x + "px";
        cxElement.style.top = mousePt.y + "px";
      }

      myDiagram.nodeTemplate =
        $(go.Node, "Auto",
          { contextMenu: myContextMenu },
          . . .

    // This is the general menu command handler, parameterized by the name of the command.
    function cxcommand(event, val) {
      if (val === undefined) val = event.currentTarget.id;
      var diagram = myDiagram;
      switch (val) {
        case "cut": diagram.commandHandler.cutSelection(); break;
        case "copy": diagram.commandHandler.copySelection(); break;
        case "paste": diagram.commandHandler.pasteSelection(diagram.lastInput.documentPoint); break;
        case "delete": diagram.commandHandler.deleteSelection(); break;
        case "color": {
          var color = window.getComputedStyle(document.elementFromPoint(event.clientX, event.clientY).parentElement)['background-color'];
          changeColor(diagram, color); break;
        }
      }
      diagram.currentTool.stopTool();
    }

    // A custom command, for changing the color of the selected node(s).
    function changeColor(diagram, color) {
      // Always make changes in a transaction, except when initializing the diagram.
      diagram.startTransaction("change color");
      diagram.selection.each(function(node) {
        if (node instanceof go.Node) {  // ignore any selected Links and simple Parts
          node.elt(0).fill = color;
        }
      });
      diagram.commitTransaction("change color");
    }

Note that I modified the changeColor function to directly modify the Node, because the node template used in the leaflet sample does not have a Binding on Shape.fill.

Everything worked correctly on the first try.