前言

为了进一步提高开发工作效率,最近我们基于 electron 开发了一款媲美 uTools 的开源工具箱 rubick。该工具箱不仅仅开源,最重要的是可以使用 uTools 生态内所有开源插件!这将是巨大的能力,意味着 uTools 生态内所有插件可以无差异化使用到 rubick 中。为了更满足 uTools 生态使用者的习惯,提高工作开发效率,我们又实现了 uTools 的超级面板能力:

代码仓库

Rubick github

功能截图:

文件夹下长按右建

选择文件后长按右键

选择文字后长按右键

实现原理

获取选中文案

要实现改功能核心是要读取当前用户选中的文案或者文件,根据当前选择内容进行不同功能展示。但是核心有一个问题是如何来实现获取当前选中的内容。这个问题思考了很久很久,要想获取选中的文案,感觉唯一的办法是使用 ctrl + c 或者 command + c 来先复制到剪切板,再通过 electron clipboard 来获取当前剪切板内容。但是 utools 可不是通过先复制再长按这样的操作来实现的,而是直接选中文本或者文件长按后呼起超级面板。所以一定要在右击长按前获取到当前选中的内容。

如果要这么干,可能真的无解了,之前就因为这么想,才被无解了。正确的思路应该是先长按再获取选中的内容。别看只是掉了个个,但实现确实天壤之别:

  1. 先获取选中内容:这就要求我们必须监听原生系统选中事件,但是 electron 并没有提供能力,我们也无法监听系统选择事件。
  2. 先右击,后获取内容,这样的好处在于先右击可以通过监听鼠标右击事件,相比选择事件更加容易。

所以思路就有了,先监听长按右击事件:

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

接下来一步就是要去实现获取选中内容,要获取选中内容有个比较骚的操作,就是:

  1. 通过 clipboard 先获取当前剪切板内容,并存下 A
  2. 通过 robot.js 来调用系统 command + c 或者 ctrl + c
  3. 再通过 clipboard 先获取当前剪切板内容,并存下 B
  4. 再将 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

为了提高开发效率,我实现了 uTools 的超级面板的更多相关文章

  1. 如何利用 Visual Studio 自带工具提高开发效率

    Visual Stuido 是一款强大的Windows 平台集成开发工具,你是否好好地利用了它呢? 显示行号 有些时候(比如错误定位)的时候,显示行号将有利于我们进行快速定位. 如何显示 1. 工具 ...

  2. 成吨提高开发效率:Intellij Shortcuts精简子集与思维模式

    在线精简cheatsheet备查表:intellij.linesh.twGithub项目:intellij-mac-frequent-keymap Intellij的快捷键多而繁杂,从官方推荐的key ...

  3. 善用VS中的Code Snippet来提高开发效率

    http://www.cnblogs.com/anderslly/archive/2009/02/16/vs2008-code-snippets.html http://www.cnblogs.com ...

  4. 实用手册:130+ 提高开发效率的 vim 常用命令

    Vim 是从 vi 发展出来的一个文本编辑器.代码补完.编译及错误跳转等方便编程的功能特别丰富,在程序员中被广泛使用.和 Emacs 并列成为类 Unix 系统用户最喜欢的编辑器.这里收录了130+程 ...

  5. 提高开发效率的 Eclipse 实用操作

    工欲善其事,必先利其器.对于程序员来说,Eclipse便是其中的一个“器”.本文会从Eclipse快捷键和实用技巧这两个篇章展开介绍.Eclipse快捷键用熟后,不用鼠标,便可进行编程开发,避免鼠标分 ...

  6. 10 款提高开发效率的 jQuery/CSS3 组件

    前端开发是一项十分繁琐而又耗体力的工作,如何更有效率的开发我们的应用,很多人会选择适当地使用一些jQuery插件.今天就要给大家分享10款可以提高开发效率的jQuery/CSS3组件.部分插件可以下载 ...

  7. 能够提高开发效率的Eclipse实用操作

    工欲善其事,必先利其器.对于程序员来说,Eclipse便是其中的一个“器”.本文会从Eclipse快捷键和实用技巧这两个篇章展开介绍.Eclipse快捷键用熟后,不用鼠标,便可进行编程开发,避免鼠标分 ...

  8. tomcat免重启随意更改java代码 提高开发效率

    转载:http://developer.51cto.com/art/201012/241243.htm 做为了一个java开发人员,总是为因为要增加一个类,或是增加删除一个方法,甚至修改一个小处代码而 ...

  9. 能够提高开发效率的 Eclipse 实用操作

    工欲善其事,必先利其器.对于程序员来说,Eclipse便是其中的一个“器”.本文会从Eclipse快捷键和实用技巧这两个篇章展开介绍.Eclipse快捷键用熟后,不用鼠标,便可进行编程开发,避免鼠标分 ...

随机推荐

  1. ES6学习-3 const

    const声明一个只读的常量.一旦声明,常量的值就不能改变,所以在声名时就进行赋值. const的作用域与let命令相同,只在声明所在的块级作用域内有效. const命令声明的常量,同样存在暂时性死区 ...

  2. 通过Dapr实现一个简单的基于.net的微服务电商系统(十四)——开发环境容器调试小技巧

    之前有很多同学提到如何做容器调试,特别是k8s环境下的容器调试,今天就讲讲我是如何调试的.大家都知道在vs自带的创建项目模板里勾选docker即可通过F5启动docker容器调试.但是对于启动在k8s ...

  3. [DB] Kafka

    介绍 一种高吞吐量的分布式发布订阅消息系统 消息类型:主体Topic(广播).队列Queue(一对一) 消息系统类型:同步消息系统.异步消息系统 常见消息产品:Redis.Kafka.JMS 术语 P ...

  4. 使用CSS设置边框和背景

    一.设置边框 1.边框样式 属性 说明 border-width 设置边框的宽度 boder-style 设置边框的样式 border-color 设置边框的颜色 a.border-width属性 自 ...

  5. Linux查看PCIe版本及速率# lspci -vvv |grep Width -i

    Linux查看PCIe版本及速率 https://www.cnblogs.com/lsgxeva/p/9542975.html# lspci -vvv |grep Width -i # lspci | ...

  6. 【转载】Windows 10系统默认将画面显示比例调整至125%或150%,最高分辨率已经达到3840×2160(4K)这一级别。

    高分屏打开软件界面模糊?不会设置太浪费 2017-08-31 19:37 抹又重彩 现在有好多朋友都喜欢并买了高分屏笔记本电脑.高分屏笔记本就是配有高分辨率屏幕的笔记本.为了给用户带来更好的视觉体验, ...

  7. 查看报错原因 sshd -t

    b for ssh.service failed because the control process exited with error code. See "systemctl sta ...

  8. CentOS7启动SSH服务报:Job for ssh.service failed because the control process exited with error code

    CentOS7启动SSH服务报:Job for ssh.service failed because the control process exited with error code....... ...

  9. Mysql数据库-多实例主从复制-主从故障详解

    一.mysql结构 1.实例 1.什么是单实例 一个进程 + 多个线程 + 一个预分配的内存空间 2.多实例 多个进程 + 多个线程 + 多个预分配的内存空间 ](http://shelldon.51 ...

  10. 文本编辑_Vim&Vi

    一.Vim.Vi文本编辑器 1️⃣:vi: Visual Interface,文本编辑器 2️⃣:文本:ASCII, Unicode 3️⃣:VIM - Vi IMproved 二.Vim.vi的特点 ...