stable-diffusion-webui-ux/javascript/contextMenus.js

contextMenuInit = function () {
  let eventListenerApplied = false;
  let menuSpecs = new Map();

  const uid = function () {
    return Date.now().toString(36) + Math.random().toString(36).substring(2);
  };

  function showContextMenu(event, element, menuEntries) {
    let posx =
      event.clientX +
      document.body.scrollLeft +
      document.documentElement.scrollLeft;
    let posy =
      event.clientY +
      document.body.scrollTop +
      document.documentElement.scrollTop;

    let oldMenu = gradioApp().querySelector("#context-menu");
    if (oldMenu) {
      oldMenu.remove();
    }

    let baseStyle = window.getComputedStyle(uiCurrentTab);

    const contextMenu = document.createElement("nav");
    contextMenu.id = "context-menu";
    contextMenu.style.background = baseStyle.background;
    contextMenu.style.color = baseStyle.color;
    contextMenu.style.fontFamily = baseStyle.fontFamily;
    contextMenu.style.top = posy + "px";
    contextMenu.style.left = posx + "px";

    const contextMenuList = document.createElement("ul");
    contextMenuList.className = "context-menu-items";
    contextMenu.append(contextMenuList);

    menuEntries.forEach(function (entry) {
      let contextMenuEntry = document.createElement("a");
      contextMenuEntry.innerHTML = entry["name"];
      contextMenuEntry.addEventListener("click", function () {
        entry["func"]();
      });
      contextMenuList.append(contextMenuEntry);
    });

    gradioApp().appendChild(contextMenu);

    let menuWidth = contextMenu.offsetWidth + 4;
    let menuHeight = contextMenu.offsetHeight + 4;

    let windowWidth = window.innerWidth;
    let windowHeight = window.innerHeight;

    if (windowWidth - posx < menuWidth) {
      contextMenu.style.left = windowWidth - menuWidth + "px";
    }

    if (windowHeight - posy < menuHeight) {
      contextMenu.style.top = windowHeight - menuHeight + "px";
    }
  }

  function appendContextMenuOption(
    targetElementSelector,
    entryName,
    entryFunction
  ) {
    var currentItems = menuSpecs.get(targetElementSelector);

    if (!currentItems) {
      currentItems = [];
      menuSpecs.set(targetElementSelector, currentItems);
    }
    let newItem = {
      id: targetElementSelector + "_" + uid(),
      name: entryName,
      func: entryFunction,
      isNew: true,
    };

    currentItems.push(newItem);
    return newItem["id"];
  }

  function removeContextMenuOption(uid) {
    menuSpecs.forEach(function (v) {
      let index = -1;
      v.forEach(function (e, ei) {
        if (e["id"] == uid) {
          index = ei;
        }
      });
      if (index >= 0) {
        v.splice(index, 1);
      }
    });
  }

  function addContextMenuEventListener(){
    if(eventListenerApplied){
      return;
    }
    gradioApp().addEventListener("click", function(e) {
      if(! e.isTrusted){
        return
      }

      let oldMenu = gradioApp().querySelector('#context-menu')
      if(oldMenu){
        oldMenu.remove()
      }
    });
    gradioApp().addEventListener("contextmenu", function(e) {
      let oldMenu = gradioApp().querySelector('#context-menu')
      if(oldMenu){
        oldMenu.remove()
      }
      menuSpecs.forEach(function(v,k) {
        if(e.composedPath()[0].matches(k)){
          showContextMenu(e,e.composedPath()[0],v)
          e.preventDefault()
        }
      })
    });
    eventListenerApplied=true

  }

  return [appendContextMenuOption, removeContextMenuOption, addContextMenuEventListener]
}


initResponse = contextMenuInit();
appendContextMenuOption = initResponse[0];
removeContextMenuOption = initResponse[1];
addContextMenuEventListener = initResponse[2];

(function () {
  //Start example Context Menu Items
  let generateOnRepeat = function (genbuttonid, interruptbuttonid) {
    let genbutton = gradioApp().querySelector(genbuttonid);
    let interruptbutton = gradioApp().querySelector(interruptbuttonid);
    if (!interruptbutton.offsetParent) {
      genbutton.click();
    }
    clearInterval(window.generateOnRepeatInterval);
    window.generateOnRepeatInterval = setInterval(function () {
      if (!interruptbutton.offsetParent) {
        genbutton.click();
      }
    }, 500);
  };

  appendContextMenuOption("#txt2img_generate", "Generate forever", function () {
    generateOnRepeat("#txt2img_generate", "#txt2img_interrupt");
  });
  appendContextMenuOption("#img2img_generate", "Generate forever", function () {
    generateOnRepeat("#img2img_generate", "#img2img_interrupt");
  });

  let cancelGenerateForever = function () {
    clearInterval(window.generateOnRepeatInterval);
  };

  appendContextMenuOption(
    "#txt2img_interrupt",
    "Cancel generate forever",
    cancelGenerateForever
  );
  appendContextMenuOption(
    "#txt2img_generate",
    "Cancel generate forever",
    cancelGenerateForever
  );
  appendContextMenuOption(
    "#img2img_interrupt",
    "Cancel generate forever",
    cancelGenerateForever
  );
  appendContextMenuOption(
    "#img2img_generate",
    "Cancel generate forever",
    cancelGenerateForever
  );
})();
//End example Context Menu Items

onUiUpdate(function () {
  addContextMenuEventListener();
});