Как добавить контекстное меню в блок-схему в GoJs

В примере кода я создаю контекстное меню на блок-схеме, в контекстном меню будут отображаться два пункта меню «Добавить примечания» и «Редактировать примечания». Откроется окно кендо для добавления или редактирования заметок.

Сначала создайте div в вашем html-файле.

<div id="contextMenu">
   <ul>
      <li><a href="#" id="addNotes">Add Notes</a></li>    
      <li><a href="#" id="EditNotes" onclick="editNotes()">Edit Notes</a></li>
   </ul>
</div>    

<div id="window">
   <div class="text">
      <textarea id="myTelText" style="width: 500px; height: 300px;"></textarea> 
      <button class="k-button" id="Save" onclick="SetRemark()">Save</button>
   </div>
</div>

Вы можете захотеть связать с ним какой-то стиль

<style>
    #contextMenu{z-index:300;position:absolute;left:5px;border:1px solid #444;background-color:#F5F5F5;display:none;box-shadow:0 0 10px rgba(0,0,0,.4);font-size:12px;font-family:sans-serif;font-weight:700}
    #contextMenu ul{list-style:none;top:0;left:0;margin:0;padding:0}
    #contextMenu li{position:relative;min-width:60px}
    #contextMenu a{color:#444;display:inline-block;padding:6px;text-decoration:none}
    #contextMenu li:hover{background:#444}
    #contextMenu li:hover a{color:#EEE}
</style>

включите необходимые файлы go js на вашу html-страницу. Теперь в файл js вашей страницы напишите этот код.

var contextMenu;
$(function() {
    initTelerikPopUp();
});

//-- initialize context menu and kendo popup.
function initTelerikPopUp() {
  var window = $("#window"),
  contextMenu = $("#contextMenu"),
      undo = $("#addNotes")
      .bind("click", function() {
          window.data("kendoWindow").open();
          contextMenu.hide();
      });

  function onClose(){

  }

  // initialize popup window      
  if (!window.data("kendoWindow")) {
      window.kendoWindow({
          visible: false,
          width: "600px",
          title: "Remarks",
          actions: [
              "Pin",
              "Minimize",
              "Maximize",
              "Close"
          ],

          close: onClose
      });
  }
}   

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

    // 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);
    cxElement.addEventListener("blur", function (e) { cxMenu.stopTool(); }, false);

    // Override the ContextMenuTool.showContextMenu and hideContextMenu methods
    // in order to modify the HTML appropriately.
    var cxTool = myDiagram.toolManager.contextMenuTool;

    // This is the override of ContextMenuTool.showContextMenu:
    // This does not not need to call the base method.
    cxTool.showContextMenu = function (contextmenu, obj) {        
        // Hide any other existing context menu
        if (contextmenu !== this.currentContextMenu) {
            this.hideContextMenu();
        }

        cxElement.style.display = "block";

        // Remember that there is now a context menu showing
        this.currentContextMenu = contextmenu;
    }

    // This is the corresponding override of ContextMenuTool.hideContextMenu:
    // This does not not need to call the base method.
    cxTool.hideContextMenu = function () {
        if (this.currentContextMenu === null) return;
        cxElement.style.display = "none";
        this.currentContextMenu = null;
    }

// this function will call on editnotes button click    
function editNotes() {
   // clicked on edit notes context menu item
}