代码:
/**
* @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",
效果: