【插件】BulletPath 节点路径

Innis 4月前 582

 

代码:

/**
 * @title BulletPath(节点路径)
 * @author Innis
 * @note 你可以在这里看到当前光标所在节点的路径,方便观察当前节点的所属关系。
 */
pluginManager.register("bulletpath", {

    highlight(nv) {
        const offsets = [{
            ...nv.$btn.offset(),
            width: nv.$btn.width(),
            height: nv.$btn.height()
        }];
        nv.$node.parents(".node:not(.node-top)").each(function () {
            offsets.push({
                ...this.nv.$btn.offset(),
                width: this.nv.$btn.width(),
                height: this.nv.$btn.height()
            });
        });
        for (let i = 1; i < offsets.length; i++) {
            $(`<div class='path-highlight'></div>`)
                .appendTo(document.body)
                .css({
                    width: offsets[i - 1].left - offsets[i].left,
                    height: offsets[i - 1].top - offsets[i].top,
                    top: offsets[i].top + offsets[i].height / 2,
                    left: offsets[i].left + offsets[i].width / 2
                }).layerTop();
        };
    },

    remove() {
        $(document.body).find("> .path-highlight").remove();
    },

    run() {
         cssHtml(".path-highlight", {
            border: "2px solid",
            "border-color": "var(--info) !important",
            "border-top": "none",
            "border-right": "none",
            "border-bottom-left-radius": "5px",
            "event-pointer": "none",
            position: "absolute"
        });
        EVT(".node-top .node > .node-child .node-text, .node-top .node > .node-child .node-btn", {
            mouseenter_highlightPath() {
                plugin.bulletpath.highlight(this.nv);
            },
            mouseleave_hideHighlightPath() {
                plugin.bulletpath.remove();
            }
        })(".main-unit", {
            mousewheel_hideHighlightPath() {
                plugin.bulletpath.remove();
            }
        });
    }

});

代码安装方法可参考:https://club.roamedit.com/club/?thread-1976.htm

 

自定义路径颜色的方法:

例如:

 

修改"border-color"为 "#fbc02d",

效果:

快速回复
最新回复 (3)
  • dongfanghong 4月前
    2 2

    给大佬反馈个问题哈~现在的路径显示应该是依鼠标的位置定的,这样就会出现已经通过回车进入下一个bullet编辑而路径显示仍旧停留在上一个bullet的情况~

    如果能改成依目前编辑的bullet确定路径显示就更好了。

     

  • dongfanghong 3月前
    1 3
    dongfanghong 给大佬反馈个问题哈~现在的路径显示应该是依鼠标的位置定的,这样就会出现已经通过回车进入下一个bullet编辑而路径显示仍旧停留在上一个bullet的情况~ 如果能改成依目前编辑的bullet确定 ...

    不知道大佬有没有时间改一下插件呢~

     

  • dongfanghong 3月前
    1 4
    https://gist.github.com/azlen/cc8d543f0e46e17d978e705650df0e9e
    这是rr上bullet path的插件
返回
Innis
管理员
200
主题数
126
帖子数
精华数
14