Xếp chồng các menu ngữ cảnh trong điện tử

Question

Tôi đang xây dựng một ứng dụng dựa trên điện tử có chứa một mạng lưới chứa các hàng duy nhất. Tôi muốn một menu ngữ cảnh cụ thể cho từng hàng. Dưới đây là một ví dụ:

Mặc dù ảnh chụp màn hình này được cắt, bạn có thể thấy có nhiều hàng và mỗi hàng chứa dữ liệu riêng biệt. Vì tôi muốn nhấp chuột phải vào hàng và có trình đơn ngữ cảnh duy nhất, tôi đã triển khai electron-context-menu, hoạt động trên nhấp chuột phải đầu tiên, nhưng sau đó nhấp chuột phải tiếp theo sẽ gây ra hiệu ứng xếp chồng của menu ngữ cảnh.

Cụ thể, đây là những gì sẽ xảy ra:

1. tôi phải bấm vào Row-1 và menu ngữ cảnh thích hợp xuất hiện
2. tôi phải bấm vào Row-2 và một sự lặp lại của các menu ngữ cảnh cho Row -1 xuất hiện sau đó trình đơn ngữ cảnh của Row-2 xuất hiện. (Thông báo trong ảnh chụp màn hình menu ngữ cảnh hiển thị không tương ứng với hàng chuột của tôi đã qua)
3. Điều này lặp lại chính nó.

Trong React.JS, đây là người biết lắng nghe tôi, mà thu thập các đối tượng contextmenu khi cần thiết bởi 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: '---', 
     }] 
    }) 
    }; 

đâu this.props.contextMenu(...) perculates lập các thành phần React.JS được đưa vào:

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

Tôi đã thực hiện một số gỡ lỗi lớn và tôi không nghĩ vấn đề là mô-đun. Mô-đun tôi đang sử dụng về cơ bản sắp xếp thông tin về menu ngữ cảnh và sau đó sử dụng các chức năng electron.remote và chức năng menu.popup đến từ ruột điện tử. Đây là một liên kết đến specific line in github.

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

Cuộc gọi này đến menu.popup dẫn đến điều này line in electron.

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) 
    } 

}

Vì vậy, tôi thấy một cuộc gọi đến ipcRender.sendSync - tuy nhiên khi tôi thêm tuyên bố gỡ lỗi trong ipcMain 's receiver of those calls, tôi không thấy bất kỳ đầu ra!

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) 
    } 
}) 

Khi tôi thêm câu lệnh gỡ lỗi vào chức năng trên, tôi không thấy bất kỳ đầu ra nào. Và đó là nơi tôi tìm kiếm bức tường của anh ấy.

Tôi đang sử dụng điện tử 1.4.15. Tôi biết vấn đề này nên được giải quyết, sau khi tất cả các IDE Atom (được dựa trên điện tử) không có vấn đề này mặc dù nó có nhiều menu ngữ cảnh.

Tôi nghĩ rằng có một số bộ nhớ tôi cần phải xóa một nơi nào đó, tôi chỉ không thể tìm ra cách để xóa chồng các menu ngữ cảnh trước đó!

Answer 1

Tôi giải quyết điều này bằng cách trước tiên nhận được mục tiêu của nhấp chuột bằng cách sử dụng e.target. Sau đó, tùy thuộc vào điều đó, tôi gọi contextmenu tương ứng. Nếu mục tiêu truy cập không nằm trong danh sách mục tiêu cho ứng dụng của tôi, tôi sử dụng menu ngữ cảnh mặc định.

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 
);