记Electron踩坑，窗口拖动

Electron中的frame：false经常被我们用来隐藏标题栏，但是随之而来的问题就是窗口拖动，像一般人一样，我也是先去搜了一下怎么实现，看到的无非几种做法

修改css

-webkit-app-region: drag;

2.使用electron-drag

npm install electron-drag

let drag = require('electron-drag');
let clear = drag(document);//这里可以传任意你想选中的元素
clear();

3.事件监听

function mouseMove(e){
    //do something
}

el.onmousedown = e => {
    addEventListener('mousemove', mouseMove);
}

el.onmouseup = e => {
    removeEvenetListener('mousemove', mouseMove);
}

这些个方案其实问题都不大，但都各有各的缺点，其中有一个共有的特大的bug
在一些机器上拖动窗口的时候窗口大小会瞎吉儿改变，还会瞎吉儿乱动，直到最后，我确定了一个方案，如下

import { screen, ipcMain } from 'electron';

//在一些机器上会出现拖动窗口导致的窗口大小莫名其妙改变的bug，这里采用在移动窗口的时候锁死窗口大小

export const windowMove = (win, id) => {
    let moving_interval = null;

    ipcMain.on('window-move-evt', (sender, data) => {
        if(data['id'] === id && data['move']){
            const win_size = win.getSize();
            const win_pos = win.getPosition();
            const mos_pos = screen.getCursorScreenPoint();
            if(moving_interval){
                clearInterval(moving_interval);
            }
            moving_interval = setInterval(() => {
                const current_pos = screen.getCursorScreenPoint();
                const x = win_pos[0] + current_pos.x - mos_pos.x;
                const y = win_pos[1] + current_pos.y - mos_pos.y;
                win.setBounds({ x: x, y: y, width: win_size[0], height: win_size[1] });
            }, 15);
        }else{
            clearInterval(moving_interval);
        }
    });
}

通过在主进程中添加事件循环实时修改窗口大小和位置，防止之前出现的鬼畜情况，其中
id为窗口对应的id，每个窗口的id都不同，这个用来实现多个窗口的移动，win为主进程中的窗口实例，当我们执行

windowMove(mainWindow, 1);

此时ipcMain已经添加了window-move-evt事件，只需要在渲染进程中

ipc.send('window-move-evt', { 
   id : 当前窗口id,
   move : true
});

启动窗口移动

ipc.send('window-move-evt', { 
   id : 当前窗口id,
   move : true
});

关闭窗口移动
至于窗口ID，这个可以自己瞎设，只要保证ID和窗口是一一对应的就行了