Skip to content

Improve the backlink panel #13008

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
SaXz2 opened this issue Nov 3, 2024 · 91 comments
Closed

Improve the backlink panel #13008

SaXz2 opened this issue Nov 3, 2024 · 91 comments
Assignees
Milestone

Comments

@SaXz2
Copy link

SaXz2 commented Nov 3, 2024

反链面板面包屑改进

In what scenarios do you need this feature?

关联:#12862

目前的反链面包屑存在一些逻辑上的问题,例如不显示标题面包屑,但某些情况下又会显示,使用上还有待改进,不够统一。

3.1.11 dev9 的问题:
Clip_2024-11-03_08-43-11

这种逻辑会导致 a和c以及123 这三个块会在一种层级下,缺少了标题面包屑,无法区分内容。

Clip_2024-11-03_08-49-33

不同块嵌套会导致重名面包屑

Describe the optimal solution

改进建议

  • 添加标题面包屑
  • 无序列表中嵌套标题块,删除标题块面包屑仅保留无序列表面包屑(到底保留那个还不确定,但是经过测试还是有必要删掉一个的,都保留不太合适)
    Clip_2024-11-03_09-02-30

我看Logseq的解决方式是比较暴力的,不显示块标,直接展示对应路径,标题和无序列表统一,我觉得删掉无序列表中内嵌标题影响不大,已经有前人验证了。
Clip_2024-11-03_09-16-11

@TCOTC
Copy link
Contributor

TCOTC commented Nov 3, 2024

  • 考虑到大纲笔记用户的习惯,建议:同时有列表项和标题的情况,保留列表项面包屑、去除标题面包屑
  • 考虑到面包屑的一致性,建议:  只有标题的情况,增加标题面包屑

@88250 88250 added this to the 3.1.11 milestone Nov 3, 2024
@88250 88250 changed the title 反链面板面包屑改进 Improve the backlink panel breadcrumb and block sorting Nov 3, 2024
@88250
Copy link
Member

88250 commented Nov 3, 2024

再补充一个改进:按文档内容顺序排序

@cordinGH
Copy link

cordinGH commented Nov 3, 2024

再补充一个改进:按文档内容顺序排序

非常支持

@SaXz2
Copy link
Author

SaXz2 commented Nov 3, 2024

再补充一个改进:按文档内容顺序排序

这个会不会做成一个按钮,遵循内容顺序排序就够了,不必增加额外按钮。虽然按钮可以提供更多排序选项,但根据我使用Logseq的经验,这种额外的排序并不是很实用。

我更倾向于不给用户提供文档内容的排序按钮,全都按文档内容顺序排序,不知道D大怎么看。

88250 added a commit that referenced this issue Nov 3, 2024

Verified

This commit was signed with the committer’s verified signature.
@88250
Copy link
Member

88250 commented Nov 3, 2024

不加按钮,默认就是按内容排序。

@88250
Copy link
Member

88250 commented Nov 3, 2024

总结一下改进点:

  • 列表中的标题块不再显示于面包屑中
  • 反链块按文档内容顺序排序
  • 不显示最后一层(跳转已经通过 块标 - 打开 解决)
  • 面包屑父级相同时合并简化显示

image

@SaXz2
Copy link
Author

SaXz2 commented Nov 3, 2024

看着已经非常不错了,但是D大这么一总结发现这面包屑要突破天际了,要不学一学Logseq这样,超过多少层前面折叠一下?
Clip_2024-11-03_11-42-55

@TCOTC
Copy link
Contributor

TCOTC commented Nov 3, 2024

面包屑应该默认横向滚动到最右边,左边的就看不见了,这样就不需要特意隐藏了

@SaXz2
Copy link
Author

SaXz2 commented Nov 3, 2024

面包屑应该默认横向滚动到最右边,左边的就看不见了,这样就不需要特意隐藏了

这解决方案也不错,那直接把面包屑变成从右到左呢,就是跟其他地方有些割裂了不够统一

例子: 5 级标题 < 4 级标题 < 3 级标题 < 2 级标题 < 1 级标题

@88250
Copy link
Member

88250 commented Nov 3, 2024

顺序就不要变了吧,默认滚动到最右边好了。

Vanessa219 added a commit that referenced this issue Nov 3, 2024
Vanessa219 added a commit that referenced this issue Nov 3, 2024
@cordinGH
Copy link

cordinGH commented Nov 3, 2024

总结一下改进点:

  • 列表中的标题块不再显示于面包屑中
  • 反链块按文档内容顺序排序
  • 不显示最后一层(跳转已经通过 块标 - 打开 解决)
  • 面包屑父级相同时合并简化显示

image

@88250 这4条改动太棒了吧🎉关于第四点,我早上还准备提这个issue,现在不用提了~~

@SaXz2
Copy link
Author

SaXz2 commented Nov 4, 2024

dev10问题反馈

文件:test4.sy.zip

Clip_2024-11-04_14-32-17

  • 外观:空行问题
  • 方便跳转回原始位置:标题面包屑缺少块标跳转回原始位置并且应该仅保留块标去掉文字
  • 保持简洁和可读性:面包屑过长应该限制每一层的最大长度
  • 易于操作:Ctrl+左键跳转应该增加在后台打开的按钮和快捷键

详情见图片和文件

@cordinGH
Copy link

cordinGH commented Nov 4, 2024

总结一下改进点:

  • 列表中的标题块不再显示于面包屑中
  • 反链块按文档内容顺序排序
  • 不显示最后一层(跳转已经通过 块标 - 打开 解决)
  • 面包屑父级相同时合并简化显示

第三点,跳转在刚发布的dev版本里,表现为聚焦打开。之前版本的跳转是不聚焦的。

@cordinGH
Copy link

cordinGH commented Nov 4, 2024

dev10问题反馈

文件:test4.sy.zip

Clip_2024-11-04_14-32-17

  • 外观:空行问题
  • 方便跳转回原始位置:标题面包屑缺少块标跳转回原始位置并且应该仅保留块标去掉文字
  • 保持简洁和可读性:面包屑过长应该限制每一层的最大长度
  • 易于操作:Ctrl+左键跳转应该增加在后台打开的按钮和快捷键

详情见图片和文件

发现这里的空行,似乎可以作为一种视觉区分,区分面包屑的囊括范围,如下图
image

@SaXz2
Copy link
Author

SaXz2 commented Nov 4, 2024

发现这里的空行,似乎可以作为一种视觉区分,区分面包屑的囊括范围,如下图

干这活的是分割线不应该留空

@cordinGH
Copy link

cordinGH commented Nov 4, 2024

发现这里的空行,似乎可以作为一种视觉区分,区分面包屑的囊括范围,如下图

干这活的是分割线不应该留空

你说的也有道理。可是这里如果把空行,换成分割线,似乎并不一个很好的处理,
这会使得 #page tmp#page level 1 block / c 在样式上,变得和上方 #page child block 1 #page child block 2 一样。
如下图:
image

但是 block 1block 2是兄弟块,而 tmpblock/c 并不是兄弟块

@cordinGH
Copy link

cordinGH commented Nov 4, 2024

我怎么整也就这三个方案挑了

自投一票~
补充:图里空白行问题没作处理,毕竟D大修复好了已经
image

@cordinGH
Copy link

cordinGH commented Nov 4, 2024

其实就是之前的图A,只不过之前的图A是dark模式截的图,不明显。

@88250 88250 changed the title Improve the backlink panel breadcrumb and block sorting Improve the backlink panel Nov 4, 2024
@88250
Copy link
Member

88250 commented Nov 4, 2024

相邻块之间的横线去掉了,打个 dev 包各位帮忙测试下。

@TCOTC
Copy link
Contributor

TCOTC commented Nov 4, 2024

@88250 还有点问题:

  1. 不相邻的块之间没有分隔线
  2. 点击末尾的面包屑没有恢复原来的多个合并显示的块,而是聚焦其中的一个块
video.webm

@cordinGH
Copy link

cordinGH commented Nov 4, 2024

有点bug,反链位置错了,child block 跑到了顶层
image

@88250
Copy link
Member

88250 commented Nov 4, 2024

有点复杂,这个横线暂时去不掉了,先回滚代码。

@88250
Copy link
Member

88250 commented Nov 4, 2024

点击末尾的面包屑没有恢复原来的多个合并显示的块,而是聚焦其中的一个块

这个看来也没法合并了 😂

@TCOTC
Copy link
Contributor

TCOTC commented Nov 4, 2024

能不能搞个特殊一点的面包屑功能,点击不是聚焦而是恢复反链显示

@88250
Copy link
Member

88250 commented Nov 4, 2024

现在不考虑加特性了,我们还是小步前进保险点。

88250 added a commit that referenced this issue Nov 4, 2024
@TCOTC
Copy link
Contributor

TCOTC commented Nov 4, 2024

@88250 这样算下来的话这个 issue 是改了哪些东西?

@88250
Copy link
Member

88250 commented Nov 4, 2024

  • 列表中的标题块不再显示于面包屑中
  • 反链块按文档内容顺序排序
  • 太长的面包屑缩略

@Achuan-2
Copy link
Member

Achuan-2 commented Nov 4, 2024

反链块能按文档内容顺序排序,现在嵌入块查询能按文档内容排序了吗

@SaXz2
Copy link
Author

SaXz2 commented Nov 4, 2024 via email

@88250
Copy link
Member

88250 commented Nov 4, 2024

反链块能按文档内容顺序排序,现在嵌入块查询能按文档内容排序了吗

嵌入块的还搞不了

@SaXz2
Copy link
Author

SaXz2 commented Nov 5, 2024

关于合并的改进

目前只有同级别无序列表的会有问题,现在这个版本的体验已经超越大部分块级双链软件了,这个合并影响的范围也不大。
Clip_2024-11-05_08-15-03

关于顺序问题

这个明显是把L1下的aaa识别到错误的地方了,应该修复
Clip_2024-11-05_08-23-44

对比其他软件

对比Logseq:目前的反链体验是超越的存在,Logseq的反链面板不支持排序、块也没有时间戳、点击上一层级也无法返回当前层级只能折叠。

嵌入块的体验上,还有待提高,可以学一学Roam的方式生成块引UID(随机码-随机码)来实现在同一块插入嵌入内容而不是现在单独把嵌入变成一种块类型。

好处:可引用一个块内某几个字、可实时编辑、点击字体可以跳转原文。跟目前的嵌入块不冲突,只是这样改动有些太大了,还需要一个新的ID属性,做成双重ID就跟Roam一样但跟Roam还是不一样的咱们这个可以根据选定的内容生成一个UID,Roam那个是每一个块生成ID和UID

Clip_2024-11-05_08-50-17

我的想法是,目前每一个块都有唯一性的ID,可以当做索引。生成的UID插入到其他地方来渲染,块ID也能关联上,引用多少次也能统计在右上角,反链也能看到。

例子:

原文:我是一个大好人
块ID = 111111-asd
UID1 = {{aaaa-bbbb}} = 大好人
UID2 = {{bbbb-aaaa}} =一个大好人

引用显示:大好人一个大好人(UID1+UID2)

UID1 → 块ID (111111-asd)
UID2 → 块ID (111111-asd)

更新:感觉也没必要目前的静态块引用也够用了

@cordinGH
Copy link

cordinGH commented Nov 5, 2024

Logseq的反链面板不支持排序、块也没有时间戳、点击上一层级也无法返回当前层级只能折叠。

dev 10 版本目前的核心问题就是合并之后,无法很好的聚焦和展开面包屑。
对于这一点,我觉得其实可以借鉴一下 Roam 的实现方式

Roam的反链面板里,通过在光标处,使用 聚焦快捷键( alt + ← / → ),可以实现展开和折叠。(展开也可以通过点击对应面包屑做到)。

  • 下图演示了「 alt + ← 展开」和 「点击面包屑展开」。展开后再通过alt + → 折叠回去
    roam 折叠展开面包屑

而在思源中使用 聚焦快捷键,则会直接跳转打开页签(以聚焦状态)。这其实是多余的,因为这个需求已经被「ctrl + 单击块标」满足了。 @88250

所以,或许可以借鉴一下 Roam ?让聚焦快捷键在反链面板中表现为聚焦和展开面包屑。

这样的话,前两天提到的两个改进点就都能很好的实现了。

  • 不显示最后一层(跳转已经通过 块标 - 打开 解决)
  • 面包屑父级相同时合并简化显示

@TCOTC
Copy link
Contributor

TCOTC commented Nov 5, 2024

而在思源中使用 聚焦快捷键,则会直接跳转打开页签(以聚焦状态)。这其实是多余的,因为这个需求已经被「ctrl + 单击块标」满足了。

那个就是打开页签的快捷键,跟 Ctrl+点击 的效果一致

@cordinGH
Copy link

cordinGH commented Nov 5, 2024

而在思源中使用 聚焦快捷键,则会直接跳转打开页签(以聚焦状态)。这其实是多余的,因为这个需求已经被「ctrl + 单击块标」满足了。

那个就是打开页签的快捷键,跟 Ctrl+点击 的效果一致

image
在编辑器页面表现为聚焦(roam也是如此),我就以「聚焦快捷键」称呼了,因为官方的命名也是聚焦。

@SaXz2
Copy link
Author

SaXz2 commented Nov 5, 2024

而在思源中使用 聚焦快捷键,则会直接跳转打开页签(以聚焦状态)。这其实是多余的,因为这个需求已经被「ctrl + 单击块标」满足了。 @88250

所以,或许可以借鉴一下 Roam ?让聚焦快捷键在反链面板中表现为聚焦和展开面包屑。

其实你加个中键折叠展开的js片段就能舒服很多,面包屑聚焦鼠标就够了

/**----------------鼠标中键标题、列表文本折叠/展开----------------*/
function collapseExpand_Head_List() {
    var flag45 = false;
    AddEvent(document.body, "mouseup", () => {
        flag45 = false;
    });

    AddEvent(document.body, "mousedown", (e) => {
        if (e.button == 2) { flag45 = true; return }
        if (flag45 || e.shiftKey || e.altKey || e.button != 1) return;
        var target = e.target;

        if (target.getAttribute("contenteditable") == null) {
            isFatherFather(target, (v) => {
                if (v.getAttribute("contenteditable") != null) {
                    target = v;
                    return true;
                }
                return false;
            }, 10);
        }

        var targetParentElement = target.parentElement;
        if (targetParentElement == null) return;

        //是标题吗?
        if (targetParentElement != null && targetParentElement.getAttribute("data-type") == "NodeHeading") {

            var targetParentElementParentElement = targetParentElement.parentElement;
            //标题父元素是列表吗?
            if (targetParentElementParentElement != null && targetParentElementParentElement.getAttribute("data-type") == "NodeListItem") {
                e.preventDefault();
                //列表项实现折叠
                _collapseExpand_NodeListItem(target);
            } else {
                e.preventDefault();
                //标题块标项实现折叠
                _collapseExpand_NodeHeading(target);
            }
        } else {//是列表
            var targetParentElementParentElement = targetParentElement.parentElement;
            if (targetParentElementParentElement != null && targetParentElementParentElement.getAttribute("data-type") == "NodeListItem") {
                e.preventDefault();
                //列表项实现折叠
                _collapseExpand_NodeListItem(target);
            }
        }
    });

    //标题,块标实现折叠
    function _collapseExpand_NodeHeading(element) {

        var i = 0;
        while (element.className != "protyle" && element.className != "fn__flex-1 protyle" && element.className != "block__edit fn__flex-1 protyle" && element.className != "fn__flex-1 spread-search__preview protyle") {
            if (i == 999) return;
            i++;
            element = element.parentElement;
        }
        var ddddd = element.children;
        for (let index = ddddd.length - 1; index >= 0; index--) {
            const element = ddddd[index];
            if (element.className == "protyle-gutters") {
                var fold = diguiTooONE_1(element, (v) => { return v.getAttribute("data-type") === "fold"; })
                if (fold != null) fold.click();
                return;
            }
        }
    }

    //列表,列表项实现折叠
    function _collapseExpand_NodeListItem(element) {

        //在悬浮窗中第一个折叠元素吗?
        var SiyuanFloatingWindow = isSiyuanFloatingWindow(element);
        if (SiyuanFloatingWindow) {
            var vs = isFatherFather(element, (v) => v.classList.contains("li"), 7);
            if (vs != null && (vs.previousElementSibling == null)) {
                var foid = vs.getAttribute("fold");
                if (foid == null || foid == "0") {//判断是折叠
                    vs.setAttribute("fold", "1");
                } else {
                    vs.setAttribute("fold", "0");
                }
                return;
            }
        }


        var i = 0;
        while (element.getAttribute("contenteditable") == null) {
            if (i == 999) return;
            i++;
            element = element.parentElement;
        }
        var elementParentElement = element.parentElement.parentElement;

        var fold = elementParentElement.getAttribute("fold");

        if (elementParentElement.children.length == 3) return;

        if (fold == null || fold == "0") {
            setBlockfold_1(elementParentElement.getAttribute("data-node-id"));
        } else {
            setBlockfold_0(elementParentElement.getAttribute("data-node-id"));
        }
    }
}

/**
 * 
 * @param {*} element 元素是否在思源悬浮窗中
 * @returns 是返回悬浮窗元素,否返回null
 */
function isSiyuanFloatingWindow(element) {
    return isFatherFather(element, (v) => {
        if (v.getAttribute("data-oid") != null) {
            return true;
        }
        return false;
    });
}

@88250
Copy link
Member

88250 commented Nov 5, 2024

目前就这样不动了吧,等会发正式版了。

@cordinGH
Copy link

cordinGH commented Nov 5, 2024

  • 方便跳转回原始位置:标题面包屑缺少块标跳转回原始位置并且应该仅保留块标去掉文字

其实你加个中键折叠展开的js片段就能舒服很多,面包屑聚焦鼠标就够了

@SaXz2 面包屑聚焦,是对应你之前提到的这个需求:「方便跳转回原始位置:标题面包屑缺少块标跳转回原始位置并且应该仅保留块标去掉文字」

@TCOTC
Copy link
Contributor

TCOTC commented Nov 5, 2024

面包屑聚焦,是对应你之前提到的这个需求:「方便跳转回原始位置:标题面包屑缺少块标跳转回原始位置并且应该仅保留块标去掉文字」

这个需求已经解决了

@SaXz2
Copy link
Author

SaXz2 commented Nov 5, 2024

@SaXz2 面包屑聚焦,是对应你之前提到的这个需求:「方便跳转回原始位置:标题面包屑缺少块标跳转回原始位置并且应该仅保留块标去掉文字」

这个js代码解决的是无序列表默认折叠,按中键展开方便,现在你想跳转直接在对应块按聚焦快捷键就行了

@SaXz2
Copy link
Author

SaXz2 commented Nov 5, 2024

Clip_2024-11-05_10-02-09
@88250 最后一层块标显示不全

@cordinGH
Copy link

cordinGH commented Nov 5, 2024

@SaXz2 面包屑聚焦,是对应你之前提到的这个需求:「方便跳转回原始位置:标题面包屑缺少块标跳转回原始位置并且应该仅保留块标去掉文字」

这个js代码解决的是无序列表默认折叠,按中键展开方便,现在你想跳转直接在对应块按聚焦快捷键就行了

折叠和展开操作 我一般通过 alt + click 对应的块标折叠,因为可以精准知道折叠的是哪个块(例如列表 or 列表项),尤其是存在超级块的时候,不会折错。
不过还是非常感谢你分享js片段❤️

@cordinGH
Copy link

cordinGH commented Nov 5, 2024

一些不方便获取焦点或选中的块 也可以通过 “ alt click块标”, 折叠展开。例如 代码块、嵌入块,数据库块

@cordinGH
Copy link

cordinGH commented Nov 5, 2024

面包屑聚焦,是对应你之前提到的这个需求:「方便跳转回原始位置:标题面包屑缺少块标跳转回原始位置并且应该仅保留块标去掉文字」

这个需求已经解决了

只能说是恢复了原样,而不是解决。因为D大起初计划 不显示最后一层块标(dev 10)。

但后续为了解决下图的问题,还是选择了重新显示最后一层。
image

  • 所以如果把聚焦快捷键( alt + ←/→ )的效果,变更为上述所说的「展开/聚焦回去」,那么就可以维持「不显示最后一层」的设计了,直接 alt + → 聚焦回去( 如下图, foo页面的反链面板
    • 并非彻底变更,而是 只变更在反链面板中 按下聚焦快捷键的效果。不知道可不可行。 @TCOTC
    • roam 折叠展开面包屑

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

6 participants