Skip to content

一个基于Excalidraw的挂件,嵌入后会自动铺满文档,将一个文档当成一个白板。融合了悬浮预览、内容块的检索和嵌入等小功能。

Notifications You must be signed in to change notification settings

BryceAndJuly/Whiteboard

Repository files navigation

一、当前版本

V2.0.4

见顶部预览图:

  • 白板中嵌入的内容块,右上角添加刷新按钮。方便更新内容后单独重载该内容块,而不是重载整个白板 。
    • 需要先单击卡片中央的【点击以开始交互】或者双击卡片的边缘区域进入卡片后才能点击该按钮
  • 白板中嵌入的内容块,背景色默认设置为透明,以便元素设置的背景色生效。
  • 内容块检索面板(Alt+P)新增深色模式,当白板的主题为深色模式时生效(是直接设置为深色,而不是System mode)。

新增注意事项:

  • 将笔记中的内容块拖拽到白板中生成卡片后,首次拖拽卡片前需要先单击卡片的边缘区域(中间点击以开始交互以外的区域) 来进行重新选中。
  • 如果在已有其他内容的文档中误嵌入该挂件,可参考:误操作插入挂件后如何撤销?

对于当前版本:V2.0.4

如果你不想默认开启自动保存功能,可以使用VS Code之类的编辑器打开挂件文件夹Whiteboard——custom.js

搜索:

window._autoSave = true;

改成:

window._autoSave = false;

如果你想调整自动保存的延时时间(默认是2000ms),可以打开挂件文件夹Whiteboard——custom.js

搜索:

window._autoSaveDelay = 2000;

将2000 改成你想设置的数值即可,单位是毫秒。


二、简介

一个基于Excalidraw的挂件,嵌入后会自动铺满文档,将一个文档当成一个白板。融合了悬浮预览、内容块的检索和嵌入等小功能。

可通过引用文档的方式来引用白板。如果需要将画好的白板导出并分享给别人,可以使用白板所在文档的导出/导入SiYuan .sy.zip文件的功能(导出前建议先点击保存块引用按钮,导入后点击修复块超链接按钮)。每个白板绑定一个存储在assets/ExcalidrawFiles/中的文件,文档删除后白板绑定的文件也会作为【未引用的资源】来方便手动删除。

三、使用前的设置

1、添加CSS代码片段

白板创建时,会自动设置所在文档的属性——别名的值为:whiteboard,这是为了解决打开白板所在文档时页面闪现出文档标题的问题。相应的,你需要在笔记软件的设置——外观中添加对应的CSS代码片段:

/* 白板挂件——隐藏当前文档的标题、面包屑 */
.protyle-title.protyle-wysiwyg--attr:has(+ .protyle-wysiwyg.protyle-wysiwyg--attr[alias="whiteboard"]){
   display: none !important;
}

/* 隐藏白板文档中的无序列表 */
.iframe[custom-data-assets^="assets/ExcalidrawFiles/"] ~ .list[data-subtype="u"] {
  display: none !important;
}
/* 在不聚焦的情况下,隐藏白板文档顶栏的面包屑 */
.protyle-breadcrumb:has(button.protyle-breadcrumb__icon.ariaLabel.fn__none):has(+ .protyle-content.protyle-content--transition > .protyle-wysiwyg.protyle-wysiwyg--attr[alias="whiteboard"]) {
    display: none !important;
}

/* 如果是新版本,比如SiYuan V3.0.16,还需要以下片段 */
.protyle-top:has(+ .protyle-wysiwyg.protyle-wysiwyg--attr[alias="whiteboard"]){
   display: none !important;
}

/* 挂件——去掉边框 */
.b3-typography iframe, .protyle-wysiwyg iframe {
    border: none;   
}
/* 处理在白板文档中,文档树右侧(调整页面宽度)的拖拽线被遮挡的问题 */
.layout__resize--lr {
    z-index: 3;
}
/* 白板文档作为嵌入块嵌入到其他文档时——隐藏底边可能出现的空白行 */
.protyle-wysiwyg__embed>.iframe[custom-data-assets^="assets/ExcalidrawFiles/"] ~ .p {
    display: none;
}
/* 处理问题:挂件铺满文档的过程中,左侧出现明显闪烁的输入光标。 */
.iframe ,iframe{
    -webkit-user-modify: read-only;
}

还有一个可选的样式,是设置悬浮窗大小的,个人感觉默认的窗口有点过于宽了才设置的,可以根据自己的需要来进行修改。

/* 悬浮窗口 */
.block__popover {
    width: 735px;
    min-height: 70vh;
    max-height: 75vh !important;
}

2、添加JS代码片段

可通过拖拽的方式快速往白板中嵌入文档/块。

需要在笔记软件的设置——外观中添加对应的JS代码片段来辅助获取当前拖拽块的ID。

document.addEventListener("dragstart", (event) => {
    if (event.target.tagName === "SPAN" && event.target.parentElement.getAttribute('data-node-id')) {
        window._currentBlockID = event.target.parentElement.getAttribute('data-node-id');  
    } else if (event.target.tagName === "LI" && event.target.getAttribute("data-node-id")) {
        window._currentBlockID = event.target.getAttribute("data-node-id");  
    } else {
        window._currentBlockID = null;
    }
}
);

3、安装插件【开放 API】

  • 安装这个插件是为了能在白板中悬浮预览笔记内块/文档的内容。
  • 设置——集市——插件页面,下载并启用插件开放 API即可。

四、开始使用

1、插入白板

下载完挂件后,在新建的空白文档中设置好文档标题后,输入/g并回车,在挂件列表选择Whiteboard即可在当前文档中插入白板,默认铺满文档。

2、数据的保存

单击左上角的保存按钮或者使用快捷键Ctrl+S来保存白板的数据。左上角会弹出提示:已保存

白板的数据保存在:assets/ExcalidrawFiles/ 文件夹中,文件路径类似于:

assets/ExcalidrawFiles/20231227015401-w0olmpi.excalidraw

使用白板挂件块的ID作为文件名。

  • 默认开启自动保存,一般在增、删或移动元素后约2s触发保存。如果想默认关闭自动保存或者调整延时时间,可以参考文档顶部描述的方法。
  • 如果是临时手动开启/关闭自动保存,可以使用快捷键Alt+F(挂件V1.0.8后的版本使用该快捷键,之前的使用Alt+S),左上角会有提示。

编辑完后记得点击【保存】、记得点击【保存】、记得点击【保存】,不然什么都没了。 我自己使用的是手动保存模式,而且勤按Ctrl+S,所以目前还没丢过内容。

3、块超链接的悬浮预览

  • 在白板中插入链接的方式没有变化:先复制一个链接地址(外部链接或者某个块/文档的块超链接),在画板中点击选中一个元素后按Ctrl+K后弹出链接输入框,粘贴链接并回车即可。
  • 值得注意的是,如果插入的是块超链接,并且想在白板中悬浮预览该块的内容,你需要先打开预览开关。先单击白板空白处,然后按快捷键Alt+Q是开启预览,按快捷键Alt+W是关闭预览。默认是关闭的,在开启状态下,鼠标悬浮在白板中某个元素的链接图标上时,能弹出悬浮窗来预览该块的内容,弹出窗口后可通过按ESC键(若不生效可先点击一下该悬浮窗口的顶栏后再试)或者鼠标点击右上角X来关闭窗口。

4、保存块引用、修复块超链接

左上角下拉主菜单新增两个功能:保存块引用修复块超链接

  • 保存块引用

    • 获取白板中已嵌入的块超链接,以引用块的形式插入到白板挂件块后的无序列表中,建立白板对其他文档/块的引用关系。
    • 引用关系建立后,白板文档以 SiYuan .sy.zip形式导出时能自动包含已嵌入白板的文档/块,保证导出白板时数据的完整性。
  • 修复块超链接

    • 一般在白板文档以 SiYuan .sy.zip形式被导入后,才用到该功能。
    • 该功能生效的前提是:需要在白板文档以 SiYuan .sy.zip形式被导出前就使用保存块引用功能来更新白板对其他块的引用关系。
    • 在导入过程中,文档/块的ID被软件重置,这通常会导致白板上已有的块超链接失效。该功能根据引用块中新旧块ID的对应关系,更新白板中的块超链接,达到修复失效块超链接的目的。

5、拖拽嵌入内容块

可通过拖拽的方式快速在白板中嵌入文档/块

  • 1、使用拖拽方式来嵌入文档

    • 在文档树,鼠标左键按住文档后往白板拖拽即可。
  • 2、使用拖拽方式来嵌入块

    • 建议先分屏,白板在左侧,文档在右侧。(白板此时建议开启禅模式,以减少编辑栏弹出带来的干扰)
    • 文档处于编辑状态。
    • 鼠标悬浮在块上方时,块的左上角显示块标,鼠标左键按住块标后往白板拖拽即可。

6、内容块检索面板

可通过快捷键Alt+P开启/关闭【内容块检索面板】,通过此面板可快速检索和嵌入检索到的内容块。

基本使用:

  • 鼠标单击白板空白处获得焦点后,可通过快捷键Alt+P开启/关闭【内容块检索面板】
  • 该面板打开后输入框自动获得焦点,可直接输入关键词,多个关键词以空格隔开。输入关键词约0.5s后,搜索结果显示在下方列表中,自动选中第一个搜索结果。
  • 此时可通过键盘的上/下方向键来切换选中的搜索结果。按下Enter键,可将当前选中的搜索结果以嵌入文档的形式嵌入到白板的左上角。可通过上、下方向键和Enter键连续嵌入多个搜索结果。
  • 点击【清空】按钮后,输入框清空关键词并自动获得焦点,可继续输入新的关键词来进行检索。

其他:

  • 在笔记软件的设置——编辑器——[[ 仅搜索文档,若开启此项,则白板上的【内容块检索面板】的搜索结果只保留文档块。

  • 在【内容块检索面板】搜索和在文档中使用【【+关键字搜索引用块用的是同款API:/api/search/searchRefBlock,因此在笔记软件的设置——搜索——块级类型中的设置能直接影响【内容块检索面板】中检索结果的类型。

  • 在搜索结果的列表中

    • 点击搜索结果前面的图标,可跳转到对应的内容块。
    • 点击搜索结果后面的+图标,可将对应的搜索结果以嵌入文档的形式嵌入到白板的左上角。

五、注意事项

  • 触发自动保存时,鼠标右键弹出的菜单会被关闭,如果觉得这个干扰太大,可以默认关闭或者临时关闭自动保存。(临时关闭自动保存的快捷键是Alt+F)。
  • 【嵌入网页】框的边角建议用直角,有弧度的那个边角可能会导致文档模糊。
  • 在白板中渲染数据库表格的时候虽然没有滚动条,但是可以通过shift+鼠标滚轮的方式来横向滚动查看数据表格。
  • 将笔记中的内容块拖拽到白板中生成卡片后,首次拖拽卡片前需要先单击卡片的边缘区域(除了中间点击以开始交互那部分) 来进行重新选中。
  • 如果在已有其他内容的文档中误嵌入该挂件,可参考:误操作插入挂件后如何撤销?

六、其他可选的配置

1、手动更改画笔的粗细

对于版本V2.0.4,打开挂件文件夹Whiteboard——assets——index-ZsssFvwm.js,在该js文件中搜索:

n={simulatePressure:e.simulatePressure,size:e.strokeWidth*1.2,thinning

那个1.2是现在设置的值(已经比较小了),最开始的默认值是4点几,你可以根据自己需要更改这个值的大小来修改画笔的粗细。

2、是否默认将白板中的文本写入到备注中

  • 保存时默认自动将白板中的文本内容写入到所在文档的属性——备注中。

这样做的好处是:在全局搜索、引用块搜索、嵌入块搜索中,除了通过白板的文档名、别名外,现在还可以通过白板中已输入的文本来检索并命中白板文档。

当然,如果你不希望白板中的文本参与到全局搜索中,可以手动关闭此功能。

打开挂件文件夹Whiteboard——custom.js,搜索:

window._allowSetMemo = true;

改成:

window._allowSetMemo = false;

3、设置固定端口(Windows端)

如果白板的素材库用的比较多的话,最好设置笔记的固定端口启动,因为添加进素材库的内容都是存到LocalStorage中的,设置后已添加到素材库的内容就不会在下一次启动后不显示了。

鼠标右键笔记桌面图标——属性——快捷方式——目标(T),在目标(T)这栏的输入框中,是思源笔记可执行文件的路径,比如:

D:\Siyuan\SiYuan.exe

在后面指定端口即可,比如:

D:\Siyuan\SiYuan.exe  --port=6806

七、更新记录

V2.0.0

  • Excalidraw 版本更新:V0.17.0——>V0.18.0 , 具体更新内容可参考:https://github.com/excalidraw/excalidraw/releases

    • 在该版本中,官方已添加【文本检索】、【元素链接】这两项功能,所以旧版挂件的【文本检索】和【元素链接】功能已废弃。

      • 关于【元素链接】:不必担心之前建立的元素链接关系会失效,经适配,当前版本的元素链接会继续保持之前的元素链接格式,形如:excalidraw://7LItP1OJtttbMuytaDgp2。通过鼠标右键的 Copy link to object选项来获取。

        备注:触发自动保存时会关闭鼠标右键菜单,如果需要频繁获取元素链接,建议先通过快捷键Alt+F临时关闭自动保存。

      • 关于【文本检索】,可通过快捷键Ctrl+F唤出,官方版默认的单关键词检索已修改成支持多关键词检索,关键词之间用空格隔开,跟之前的检索方式保持一致。

    • 其他感觉比较好用的更新点:

      • 默认支持中文手写字体。字体文件在Whiteboard/fonts/Xiaolai文件夹下,被拆分成多个woff2文件以便懒加载。虽然字体文件略大,但是字形看着不错,兼顾了可读性和美观。
      • 支持了Elbow arrows。可快速并规整地连接元素,绘制起流程图来更方便了。
      • 图片裁剪,可对嵌入到白板的图片进行简单的裁剪。
  • 修复嵌入文档(Web Embed)的加载问题

    • 之前刚打开或刷新白板后,需要在白板中随便挪动一下鼠标才会开始渲染嵌入的文档。其他通过拖拽或者【块引检索面板】添加的嵌入文档也是如此。修复后,嵌入白板的文档会自动加载,不需要等鼠标挪动等操作。

V2.0.1

刚刚发现一个问题:同时打开多个白板时,因为LocalStorage缓存而导致白板数据互相干扰。 在修复前,请保持在V1.6.0,先不要更新!!!

V2.0.2

  • 修复问题:在V2.0.0中,同时打开多个白板时,因LocalStorage缓存导致白板数据互相干扰。

V2.0.3

修复问题:在V2.0.2中,当元素添加的链接为外链(比如以https://http://开头的链接),点击元素右上角的链接图标未能跳转,需要单击元素后点击上方显示的链接输入框才能跳转。

八、参考与感谢

About

一个基于Excalidraw的挂件,嵌入后会自动铺满文档,将一个文档当成一个白板。融合了悬浮预览、内容块的检索和嵌入等小功能。

Resources

Stars

Watchers

Forks

Packages

No packages published