建议:优化列表块脑图显示的一种方案

本帖是对 思源笔记建议: 脑图模式的意义与脑图优化的建议 一贴的补充,建议先看那一贴(尤其是我的回帖)再来看本帖。

列表项的显示

列表项容器内各块以标准大纲形式组织时

定义

如何显示?

就像任何一个大纲类笔记一样转换。具体来说:

  1. 若列表项容器(P)内只有唯一一个块 A

    • 则 P 和 A 作为一个结点显示,显示内容为 A(若 A 是超级块,则渲染)
  2. 若列表项容器(P)内有且只有两个块:非列表块 A 和列表块 B

    1. P 和 A 作为一个结点 PA 显示,显示内容为 A(若 A 是超级块,则渲染)
    2. 列表块 B 的图标不显示
    3. 列表块 B 的子块作为 PA 的子结点

image.png

理想情况:image.png

特别地,当 A 是超级块时,将 A 结点渲染出来(渲染时会稍微缩小字体):image.png

列表项容器内各块以线性形式组织时

定义

列表项容器内各块不以标准大纲形式组织,称列表项容器内各块以线性形式组织

image.png

换句话说,在幕布等大纲类笔记中实现不了的结构都一律称为线性结构。

我估计以线性形式组织(不以标准大纲形式组织)的情况占实际使用的比例不超过 20%,没有必要花大量精力去解析其逻辑结构,而且由于线性结构变换多端过于复杂想解析也是很难的,下面将介绍一种简便的显示方式。⭐️ 核心是显示时保留线性结构,放弃软件自动解析为大纲,而是让用户手动根据实际情况来构建大纲。

显示方法

将内容以线性形式组织的列表项容器渲染为一个结点(就好像这个节点是一个嵌入块),渲染时字体大小相对正常块更小,而且节点大小不能过大(高度、宽度控制在合适范围内,通过滚动条上下查看,允许用户拖拽边界修改大小)。

暂时命个名:
以这种方式显示的结点称为线性结点(内部包含多个块,各块线性组合在一起),以标准大纲形式正常显示的结点称为大纲结点

image.png

线性结点中的任何一个块都可以被提出,即放到线性结点之后作为其子结点,被提出的结点的类型为大纲结点。如果是列表块被提出,则自动展开;如果是标题块,则按照上一贴所说的方式自动展开。

image.png

再举一个例子(例子里的内容实际上放在线性结点里就行了,没有必要提出显示在脑图中,但请不要在意)
image.png

列表块图标的显示

总结

下面总结从文档块开始到标题块再到列表块内部,各块转为脑图后的显示方式

线性结点的特点:

大纲结点的特点:

测试用例

内容块动态查询示例:

1 操作
EndlessErrors 在 2021-05-02 00:56:49 更新了该帖

广告 我要投放

欢迎来到这里!

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

注册 关于
请输入回帖内容 ...
  • 88250
    订阅者

    感谢帮忙思考,有点硬核,需要时间消化 🙏

    1 回复
  • EndlessErrors 1 赞同
    支持者 订阅者 作者

    其实也没有很硬核,看似繁杂但实质很简单且符合直觉,要理解我说的方案,关键点有两个,一是理解“线性结点”和“大纲结点”两个概念,二是心里要有一个理想的脑图形式然后想办法去实现它。

    帖子写了很多啰里啰嗦的东西,都是实现起来的细节,即如何实现。我补充一下为什么要这么做。

    (时间有限,我只能直接放一个大纲在这里)

    • 引入线性结点的出发点

      • 减少块数量,使脑图兼具完整性和简洁性

        • 多个块被压缩到一个结点
      • 放弃软件自动解析线性组织的块集合,把构建脑图的任务转交给用户手动完成

        • 原因:太复杂 + 情况少见
        • 方式:“提出”功能把关键的块从线性结构中分离出去(然后软件继续自动解析展开这些关键的块)
      • 标准大纲解析模式无法完整描述文档层次结构,引入线性结点则可以

        • 标准大纲解析模式引入引入线性结点后,暂时可以称为“线性-大纲”结构解析模式,适应于“文档包围大纲”的编辑模式
    • 突破性

      • 块与结点的关系,类似砖块与房间的关系

        • 块是结构材料,脑图结点是逻辑单元
      • 脑图关注的更多是逻辑关系,所以块作为脑图基本单元是不合适的(V1.1.8 脑图不合理的根源)

      • 线性结点本质不是逻辑单元,但是“提出”功能允许用户把逻辑单元作为其子结点

    • 自然性(直觉)

      • 从属关系自然

        • 大纲结点的子结点对应的块是父结点对应的块的子块
        • 线性结点的子结点对应的块是父结点对应的块集合的一个成员
      • 脑图各个结点的顺序是和所见即所得模式的块(或块集合)顺序一致

    然后再对方案做点补充。

    对线性结点进一步优化

    如果线性结点对应的块集合只有一个块,线性结点退化为大纲结点

    脑图展开形式对面包屑的启发

    在脑图上沿文档块走到每一个块的路径就是这个块的面包屑。大纲结点和线性结点的显示略有不同。

    大纲结点在面包屑中的显示

    每一个大纲结点都显示块标(标题块或列表项块标)+ 内容

    例子:(假设列表块是文档块的唯一子块,则列表块标并不会显示)image.png

    image.png\image.pngfoo\image.pngbar\image.pngbaz1.1\image.pngbaz1.1

    线性结点在面包屑中的显示

    1. 处于标题块(和文档块首尾)之间的线性结点,不显示块标和内容;
    2. 处于列表中间的线性结点,显示块标(列表项块标)和内容。

    例子:

    image.png

    image.png\image.png示例\(这里本来有一个处于标题块之间的线性结点,不显示块标和内容)\image.png\image.png查询内容中包含内容块的列表项!{{i:内容块}} (这是处于列表中间的线性结点,显示块标和内容,内容太长的话会精简)\image.png!{{i:内容块}}

    实际效果:

    image.png \image.png示例\image.png\image.png查询内容中包含内容... \image.png!{{i:内容块}}

    (是否显示列表块图标见本帖正文)