共计 3079 个字符,预计需要花费 8 分钟才能阅读完成。
前言
为了进一步提高开发工作效率,最近咱们基于 electron
开发了一款媲美 uTools
的开源工具箱 rubick。该工具箱不仅仅开源,最重要的是能够应用 uTools
生态内所有开源插件!这将是微小的能力,意味着 uTools
生态内所有插件能够无差异化应用到 rubick 中。
设计交互上为了更能进步用户的应用效率,咱们又尝试去实现了 uTools
中十分优良的一些设计,比方: 超级面板 。该性能能够通过鼠标疾速唤起 uTools
插件能力,而不必再关上利用。比方上传图片,只有咱们装置了图床插件,那么当鼠标抉择桌面上某张图片时,即可疾速呼出上传图片的菜单选项,不便省事。接下来一起看看实现形式吧!
代码仓库
Rubick github
性能截图:
文件夹下长按右建
抉择文件后长按右键
抉择文字后长按右键
实现原理
获取选中文案
要实现改性能外围是要读取以后用户选中的文案或者文件,依据以后抉择内容进行不同性能展现。然而外围有一个问题是如何来实现获取以后选中的内容。这个问题思考了很久很久,要想获取选中的文案,感觉惟一的方法是应用 ctrl + c
或者 command + c
来先复制到剪切板,再通过 electron clipboard
来获取以后剪切板内容。然而 utools
可不是通过先复制再长按这样的操作来实现的,而是间接选中文本或者文件长按后呼起超级面板。 所以肯定要在右击长按前获取到以后选中的内容。
如果要这么干,可能真的无解了,之前就因为这么想,才被无解了。正确的思路应该是先长按再获取选中的内容。别看只是掉了个个,但实现的确天壤之别:
- 先获取选中内容:这就要求咱们必须监听原生零碎选中事件,然而
electron
并没有提供能力,咱们也无奈监听系统抉择事件。 - 先右击,后获取内容,这样的益处在于先右击能够通过监听鼠标右击事件,相比抉择事件更加容易。
所以思路就有了,先监听长按右击事件:
// macos
const mouseEvents = require("osx-mouse");
const mouseTrack = mouseEvents();
// 按上来的 time
let down_time = 0;
// 是否弹起
let isPress = false;
// 监听右击
mouseTrack.on('right-down', () => {
isPress = true;
down_time = Date.now();
// 长按 500ms 后触发
setTimeout(async () => {if (isPress) {
// 获取选中内容
const copyResult = await getSelectedText();}, 500);
})
mouseTrack.on('right-up', () => {isPress = false;});
接下来一步就是要去实现获取选中内容,要获取选中内容有个比拟骚的操作,就是:
- 通过
clipboard
先获取以后剪切板内容,并存下 A - 通过
robot.js
来调用零碎command + c
或者ctrl + c
- 再通过
clipboard
先获取以后剪切板内容,并存下 B - 再将 A 写到剪切板中,返回 B
先存剪切板内容的目标在于咱们是偷偷帮用户执行了复制动作,当读取完用户抉择内容后,须要回复用户之前的剪切板内容。接下来看一下简略的实现:
const getSelected = () => {return new Promise((resolve) => {
// 缓存之前的文案
const lastText = clipboard.readText('clipboard');
const platform = process.platform;
// 执行复制动作
if (platform === 'darwin') {robot.keyTap('c', 'command');
} else {robot.keyTap('c', 'control');
}
setTimeout(() => {
// 读取剪切板内容
const text = clipboard.readText('clipboard') || ''const fileUrl = clipboard.read('public.file-url');
// 复原剪切板内容
clipboard.writeText(lastText);
resolve({
text,
fileUrl
})
}, 300);
})
}
告诉超级面板窗口以后选中内容
当获取到了选中内容后,接下来就是须要创立超级面板的 BrowserWindow
:
const {BrowserWindow, ipcMain, app} = require("electron");
module.exports = () => {
let win;
let init = (mainWindow) => {if (win === null || win === undefined) {createWindow();
}
};
let createWindow = () => {
win = new BrowserWindow({
frame: false,
autoHideMenuBar: true,
width: 250,
height: 50,
show: false,
alwaysOnTop: true,
webPreferences: {
webSecurity: false,
enableRemoteModule: true,
backgroundThrottling: false,
nodeIntegration: true,
devTools: false,
},
});
win.loadURL(`file://${__static}/plugins/superPanel/index.html`);
win.once('ready-to-show', () => win.show());
win.on("closed", () => {win = undefined;});
};
let getWindow = () => win;
return {
init: init,
getWindow: getWindow,
};
};
而后再告诉 superPanel
进行内容展现:
win.webContents.send('trigger-super-panel', {
...copyResult,
optionPlugin: optionPlugin.plugins,
});
超级面板点击操作
接下来要实现超级面板点击操作,这块也是比较简单的了,间接上代码好了:
1. 关上 Terminal
const {spawn} = require ('child_process');
spawn('open', [ '-a', 'Terminal', fileUrl]);
2. 新建文件
remote.dialog.showSaveDialog({
title: "请抉择要保留的文件名",
buttonLabel: "保留",
defaultPath: fileUrl.replace('file://', ''),
showsTagField: false,
nameFieldLabel: '',
}).then(result => {fs.writeFileSync(result.filePath, '');
});
3. 复制门路
clipboard.writeText(fileUrl.replace('file://', ''))
最初
本篇次要介绍如何实现一个相似于 utools 的超级面板性能,当然这远远不是 utools 的全副,下期咱们再持续介绍如何实现 utools 其余能力。欢送大家返回体验 Rubick 有问题能够随时提 issue 咱们会及时反馈。
另外,如果感觉设计实现思路对你有用,也欢送给个 Star:https://github.com/clouDr-f2e/rubick