【分享】Excalidraw 画板挂件(小改)

写在前面

大致是将思源笔记里的【悬浮预览】、【引用块跳转】功能融入到 Excalidraw 画板中。用来画一下简单的关系图并链接到本地的笔记,感觉效果还可以,主要是画板比较自由,挺适合做那个【内容地图】(Map of Content)。

只需要稍微修改一下 theme.css 和 main.js 就可以了,其中修改 main.js 的做法跟那个【分享】导图挂件更新 是一样的,已经改过的就不用改了。

原 Excalidraw 仓库地址:

https://github.com/excalidraw/excalidraw

在原仓库基础上主要修改了两个文件:

excalidraw-master\src\components\App.tsx
excalidraw-master\src\element\Hyperlink.tsx

来处理悬浮预览、超链接按钮点击、超链接编辑区点击,其他一些按钮和简单逻辑是直接在 index.html 里写的。

视频演示

画板全屏 + 内容悬浮预览

分屏模式下使用画板

开始使用

1、更新挂件

  • 下载挂件的压缩包后,解压得到一个【画板】的文件夹;
  • 打开挂件所在文件夹 笔记数据所在文件夹\data\widgets\
  • 如果有旧的,那就需要删掉旧的画板挂件,再将新的放进去;

2、修改 theme.css

这个是为了给画板挂件【全屏】功能使用的,Excalidraw 画板本身就有全屏的功能,但它全屏后会置顶,然后就遮挡了悬浮预览的窗口,故换了个方式让它全屏铺满。这里用的是增/删 类名的方式,所以要在 theme.css 中添加一个样式。

比如:现在使用的主题是 Tsundoku Dark

打开思源笔记——【更多】——【设置】——【外观】——【打开主题文件夹】,打开后,找到【Tsundoku Dark】文件夹,里面有个 theme.css,打开后在最后加上:

.fullScreen {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 1165;
}

修改后保存文件。

3、修改 main.js

这个跟【分享】导图挂件更新 是一样的,已经改过的就不用改了。

比如:windows 10 平台 笔记版本 2.0.12,使用编辑器比如 vsCode 打开 笔记安装的文件夹\SiYuan\resources\stage\build\app\main.js,使用查找/替换功能:

t.WYSIWYG=class

替换成:

window._o=n(1828);window._M=n(5751);t.WYSIWYG=class
t.initBlockPopover=()

替换成:

window._a=n(3781);t.initBlockPopover=()

4、清除缓存后,重启笔记

打开【思源笔记】——【更多】——【开发者工具】

image.png

刷新后,取消勾选 Disable cache ,然后关闭【开发者工具】,重启笔记。

5、插入挂件,开始使用

挂件压缩包

1、初始

画板.rar

2、按钮有点不搭,换成图标好看一点

画板.rar

画板.png

已知存在的问题——图片缓存

图片的缓存有点问题,具体表现就是:

如果你在绘图中插入了图片,而且画布的数据还没保存到本地文件,此时你不小心刷新了页面或者关闭了窗口的话,图片就莫得了。

  • 已经保存到本地文件的话就无所谓了,重新打开文件就是了。
  • 如果你的画布里没有图片,那就不用担心这个,画布数据会缓存到 LocalStorage。
  • 如果你的画布里用到很多图片,建议先用网页版的 Excalidraw 画板(https://excalidraw.com/)绘制好后,导出为包含画布数据的 png 图片,然后在笔记中的画布挂件中打开使用。又或者在使用本地画板绘制时,在保存数据之前,不要刷新或者关闭页面。

Tips

1、选中某个图形后 Ctrl+K 快捷键不能弹出超链接输入框?

可能是因为图形的 编组 ,选中图形后 Ctrl+shift+G 解除编组后再试试。

image.png

2、添加常用元素到个人素材库

可以绘制并添加一些常用的图形元素到 个人素材库中,后续绘制时直接通过点击插入元素即可。

image.png

image.png

3、文本要自动换行?

使用【将文本绑定到容器】这个功能即可。

image.png

1 操作
BryceAndJuly 在 2022-06-25 10:26:17 更新了该帖

相关帖子

欢迎来到这里!

我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。

注册 关于
请输入回帖内容 ...
  • teacherQ 1 评论
    订阅者

    强啊,老哥,羡慕 ob 的功能很久了,请问能上传到集市里吗?

    上架最好还是到手即用的那种好一点,这个还要用户自己改东西的不太合适。
    BryceAndJuly
  • zyu318

    希望上传到集市,感谢

  • Jagger
    订阅者

    厉害 越来越有感觉了