This website requires JavaScript.

又一个折腰的 VSCode 插件

2020.05.31 16:07 字数 1685 喜欢 1 评论 0

1

最近这两周周末都在折腾 VSCode 白板插件,其主要原理是将 Excalidraw 嵌入到 VSCode 的 WebView 中。如果所有功能正常,那么相比于在 Web 中使用,在 VSCode 中将会更方便。

截至目前,该插件的功能大概完成在 70% 左右。

基础的画图功能:

demo01.png

以及导出为 png/svg 格式:

demo02.gif

2

将 Excalidraw 做为 VSCode 插件以后,一些原 Web 上如 command/ctrl + s 等事件,便显的多余。

如何在不改变源代码的前提下,拦截 keydown 事件中某一指定事件,这着实让笔者费了不少时间。

最后,在参考浏览器插件的实现原理后,笔者魔改了 addEventListener 事件:

const isDarwin = /Mac|iPod|iPhone|iPad/.test(window.navigator.platform);
const CTRL_OR_CMD = isDarwin ? 'metaKey' : 'ctrlKey';

function patchFn(originalFn) {
    return function (...args) {
        const [eventName, oldHandler] = args;
        if (eventName === 'keydown') {
            args[1] = e => {
                if (e.key === "s" && e[CTRL_OR_CMD]) {
                    return false;
                }
                return oldHandler(e);
            }
        }
        return originalFn.apply(this, args);
    }
}

document.addEventListener = patchFn(document.addEventListener);

当然,这种方法,不是万不得己,建议还是不要使用。

3

还有一些在 Web 中可以正常使用,但在插件中并没有实现的功能,比如共享协作。

Excalidraw 在使用 WebSocket 生成房间 ID 以及传输内容时,使用了浏览器自带的加密算法 API SubtleCrypto 。而该 API 只能用于 HTTPS 协议,也就无法用于 VSCode WebView 中。在笔者尝试了 GitHub 上大部分的 polyfill 后,也仍然无济于事, stackoveflow 上也比较冷清。

因此,该功能只能遗憾止步于此。

关于该插件的更多细节,请参考 vscode-excalidraw

Contact

微信公众号

微信

相关推荐

暂无推荐文章