电子中上下文菜单的堆叠 [英] Stacking of Context Menus in Electron

问题描述

我正在构建一个基于电子的应用程序，其中包含一个包含唯一行的网格.我想要一个特定于每行的上下文菜单.这是一个示例:

I am building an Electron based application that contains a grid containing unique rows. I would like a context-menu that is specific to each row. Here is an example:

尽管此屏幕截图已裁剪，但您可以看到有多行，每行包含单独的数据.由于我想右键单击一行并获得唯一的上下文菜单，因此我实现了 electron -context-menu ，它在第一次右键单击时起作用，但随后的右键单击会导致上下文菜单的堆叠效果.

Although this screen shot is cropped, you can see there are multiple rows and each row contains separate data. Since I'd like to right-click on a row and get a unique context menu, I have implemented electron-context-menu, which does work on the first right click, but then subsequent right-clicks causes a stacking effect of context menus.

具体来说，会发生以下情况:

Specifically, here is what happens:

1. 我右键单击第1行，然后显示适当的上下文菜单
2. 我右键单击第2行，然后显示重复的第1行上下文菜单，然后显示第2行的上下文菜单. (请注意，屏幕快照中上下文菜单显示的内容与鼠标悬停的行不对应)
3. 这重复一遍.

在React.JS中，这是我的侦听器，它根据electron-context-menu模块的需要收集contextmenu对象:

In React.JS, here is my listener, which collects the contextmenu object as needed by the electron-context-menu module:

  handleContextMenu() {
    this.props.contextMenu({
      window: electron.remote.BrowserWindow.getFocusedWindow(),
      prepend: (params, browserWindow) => [{
        label: `Library Compare ${this.state.msn}`,
        click: () => this.runLibCompare()
      }],
      append: (params, browserWindow) => [{
        label: '---',
      }]
    })
  };

this.props.contextMenu(...)在哪里将React.JS组件填充到其中:

Where this.props.contextMenu(...) perculates up the React.JS components to be fed into:

const contextMenu = eRequire('electron-context-menu');

我已经进行了一些大规模的调试，我认为问题不在于模块.我使用的模块实质上是组织有关上下文菜单的信息，然后使用electron.remote函数和menu.popup函数，这些函数来自电子内部.这是指向 github中特定行的链接.

I have done some massive debugging and I don't think the issue is the module. The module I am using essentially organizes the information about the context menu and then uses electron.remote functions and a menu.popup function which comes from electron internals. Here is a link to the specific line in github.

const menu = (electron.Menu || electron.remote.Menu).buildFromTemplate(menuTpl);
menu.popup(electron.remote ? electron.remote.getCurrentWindow() : win);

对此menu.popup的调用导致此电子中的线.

  const remoteMemberFunction = function (...args) {
    if (this && this.constructor === remoteMemberFunction) {
      // Constructor call.
      let ret = ipcRenderer.sendSync('ELECTRON_BROWSER_MEMBER_CONSTRUCTOR', metaId, member.name, wrapArgs(args))
      return metaToValue(ret)
    } else {
      // Call member function.
      let ret = ipcRenderer.sendSync('ELECTRON_BROWSER_MEMBER_CALL', metaId, member.name, wrapArgs(args))
      return metaToValue(ret)
    }

}

所以我看到了对ipcRender.sendSync的调用-但是当我在ipcMain的

So I see a call to ipcRender.sendSync -- however when I add debugging statements in ipcMain's receiver of those calls, I don't see any output!

ipcMain.on('ELECTRON_BROWSER_MEMBER_CALL', function (event, id, method, args) {
  try {
    args = unwrapArgs(event.sender, args)
    let obj = objectsRegistry.get(id)

    if (obj == null) {
      throwRPCError(`Cannot call function '${method}' on missing remote object ${id}`)
    }

    callFunction(event, obj[method], obj, args)
  } catch (error) {
    event.returnValue = exceptionToMeta(error)
  }
})

当我将调试语句添加到上述函数中时，没有看到任何输出.这就是我搜寻他的墙的地方.

When I added debug statements to the above function, I didn't see any output. And that is where my search his a wall.

我正在使用电子1.4.15.我知道这个问题应该可以解决，毕竟Atom IDE(基于电子)毕竟没有这个问题，即使它具有多个上下文菜单.

I am using electron 1.4.15. I know this issue should be resolvable, after-all the Atom IDE (which is electron based) does not have this issue even though it has multiple context menus.

我认为我需要清除一些内存，我只是想不通如何清除以前的上下文菜单堆栈！

I think there is some memory I need to clear somewhere, I just can't figure out how to clear the stack of previous context menus!

推荐答案

我通过首先使用e.target获取点击目标来解决此问题.然后，据此，我调用相应的上下文菜单.如果目标匹配不在我应用的目标列表中，则使用默认的上下文菜单.

I solve this by first getting the target of the click using e.target. Then, depending on that, I call the corresponding contextmenu. If target hit is not in the list of targets for my app, I use a default contextmenu.

window.addEventListener(
    "contextmenu",
    e => {
        e.preventDefault();
        if (e.target.id === 'fullscr'){

        console.log(e && e.target);

       // e.preventDefault();
        mymenu.popup(remote.getCurrentWindow());
        }else{
            editmenu.popup(remote.getCurrentWindow());
        }
        console.log(e.which);
    },
    false
);  

这篇关于电子中上下文菜单的堆叠的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！