Electron Windows增加托盤懸浮框功能

背景

在做Electron Windows 桌面應用時候，做鼠標懸浮到托盤圖標上時顯示一個懸浮框（例如做消息提醒），但因為Windows沒有提供托盤mouse-enter/mouse-leave事件，無法直接做這個功能，考慮到還有mouse-move事件，弄個間接的方式實現。

實現步驟

1、監聽mouse-move事件，當觸發時，即也相當觸發mouse-enter事件。

2、開始定時（100ms）獲取托盤位置和鼠標位置，判斷鼠標是否還在托盤圖標里，當已不在時，觸發mouse-leave事件並停止定時查詢。

//判斷鼠標是否還在托盤圖標
trayBounds = tray.getBounds();
point = screen.getCursorScreenPoint();
if(!(trayBounds.x < point.x && trayBounds.y < point.y && point.x < (trayBounds.x + trayBounds.width) && point.y < (trayBounds.y  + trayBounds.height))){
//已不在托盤，觸發mouse-leave                    
}

3、當mouse-enter時，顯示懸浮窗口到托盤上方，當mouse-enter，隱藏懸浮窗口。

PS：懸浮窗口需要設置置頂屬性，且不顯示在任務欄。

具體代碼

var leaveInter,
    trayBounds,
    point,
    isLeave = true;

function checkTrayLeave(){
    clearInterval(leaveInter)
    leaveInter = setInterval(function(){
        trayBounds = tray.getBounds();
        point = screen.getCursorScreenPoint();
        if(!(trayBounds.x < point.x && trayBounds.y < point.y && point.x < (trayBounds.x + trayBounds.width) && point.y < (trayBounds.y  + trayBounds.height))){
            //觸發mouse-leave
            clearInterval(leaveInter);
            isLeave = true;
        }
    }, 100)
}

tray.on('mouse-move', () => {
    if (isLeave) {
        //觸發mouse-enter
        isLeave = false;
        checkTrayLeave();
    }
})