Skip to content

Commit

Permalink
更新版本为 0.0.4
Browse files Browse the repository at this point in the history 
添加当前文档定位功能。
支持点击路径切换文档列表路径。
  • Loading branch information
@Misuzu2027
Misuzu2027 committed Oct 6, 2024
1 parent 2d45847 commit e25ec12
Show file tree
Hide file tree
Showing 8 changed files with 227 additions and 25 deletions.
6 changes: 4 additions & 2 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,10 @@

### 功能介绍
1. 点击文档树中的的笔记本或文档会切换（刷新）文档列表。
2. 双击文档列表的文档，会在文档树中定位该文档；如果该文档存在子文档，同时会切换路径。
3. 文档列表中的文档支持拖拽到文档树进行移动，同时支持按紧 Ctrl + 单击 实现多选后拖拽。（不支持文档树拖拽到文档列表）
2. 双击文档列表的文档，如果该文档存在子文档，会切换路径查看子文档。
3. 文档列表选中的文档可以拖拽到文档树进行移动，支持按紧 Ctrl + 单击 实现多选文档后拖拽。（不支持文档树拖拽到文档列表）
4. 可以在文档树的更多菜单，切换二级文档列表的显示。
5. 路径可以点击进行切换。

#### 何时会切换路径
1. 点击笔记本名称或文档名称。
Expand Down
5 changes: 3 additions & 2 deletions README_zh_CN.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,10 @@

### 功能介绍
1. 点击文档树中的的笔记本或文档会切换（刷新）文档列表。
2. 双击文档列表的文档，会在文档树中定位该文档；如果该文档存在子文档，同时会切换路径。
3. 文档列表中的文档支持拖拽到文档树进行移动，同时支持按紧 Ctrl + 单击 实现多选后拖拽。（不支持文档树拖拽到文档列表）
2. 双击文档列表的文档，如果该文档存在子文档，会切换路径查看子文档。
3. 文档列表选中的文档可以拖拽到文档树进行移动，支持按紧 Ctrl + 单击 实现多选文档后拖拽。（不支持文档树拖拽到文档列表）
4. 可以在文档树的更多菜单，切换二级文档列表的显示。
5. 路径可以点击进行切换。

#### 何时会切换路径
1. 点击笔记本名称或文档名称。
Expand Down
2 changes: 1 addition & 1 deletion plugin.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
"name": "syplugin-dual-doc-list",
"author": "Misuzu2027",
"url": "https://github.com/Misuzu2027/syplugin-dual-doc-list",
"version": "0.0.3",
"version": "0.0.4",
"minAppVersion": "3.0.12",
"backends": [
"all"
Expand Down
206 changes: 192 additions & 14 deletions src/components/doc-list/doc-list.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -74,6 +74,44 @@
rootElement.addEventListener("mousedown", () => {
window.siyuan.menus.menu.remove();
});
rootElement.addEventListener("click", (event: any) => {
const target = event.target;
if (
target.tagName.toLowerCase() === "span" &&
target.hasAttribute("data-path-type")
) {
let pathType = target.getAttribute("data-path-type");
let dataId = target.getAttribute("data-id");
let newNotebookId = null;
let newDocId = null;
let newDocPath = null;
if (pathType === "box") {
newNotebookId = dataId;
newDocId = null;
newDocPath = "/";
} else if (pathType === "doc") {
newNotebookId = curPathNotebookId;
newDocId = dataId;
newDocPath =
curPathDocPath.split(dataId)[0] + dataId + ".sy";
}
if (isStrNotBlank(newNotebookId)) {
console.log(
"click path switch path ",
newNotebookId,
" ",
newDocId,
" ",
newDocPath,
);
switchPath(newNotebookId, newDocId, newDocPath);
}
}
});
}
function initSiyuanEventBus() {
Expand Down Expand Up @@ -179,14 +217,15 @@
}
}
export function switchPath(
export async function switchPath(
notebookId: string,
docId: string,
docPath: string,
) {
if (lockPath) {
return;
}
clearItemFocus();
EnvConfig.ins.refreshNotebookMap();
curPathNotebookId = notebookId;
curPathDocId = docId;
Expand All @@ -211,7 +250,7 @@
curPathSortMethod = docSortMethodTemp;
}
updateDocList(
await updateDocList(
notebookId,
docId,
docPath,
Expand Down Expand Up @@ -258,6 +297,8 @@
toggleItemFocus(target);
return;
}
clearItemFocus();
target.classList.add("b3-list-item--focus");
handleClickLogic(event, blockId);
}
Expand All @@ -282,7 +323,6 @@
}
function handleClickLogic(event: MouseEvent, blockId: string) {
clearItemFocus();
clickCount++;
let doubleClickTimeout =
SettingService.ins.SettingConfig.doubleClickTimeout;
Expand Down Expand Up @@ -319,7 +359,8 @@
) as HTMLElement;
if (focusSpanElement) {
focusSpanElement.click();
// 暂时不聚焦一级文档树。
// focusSpanElement.click();
}
// 实现双击进入这个路径
let docItemInfo: DocumentTreeItemInfo;
Expand Down Expand Up @@ -464,6 +505,116 @@
}, 1536);
}
export const getInstanceById = (
id: string,
layout = window.siyuan.layout.centerLayout,
) => {
const _getInstanceById = (item: any, id: string) => {
if (item.id === id) {
return item;
}
if (!item.children) {
return;
}
let ret: ITab;
for (let i = 0; i < item.children.length; i++) {
ret = _getInstanceById(item.children[i], id) as ITab;
if (ret) {
return ret;
}
}
};
return _getInstanceById(layout, id);
};
async function selectCurDoc() {
const element =
document.querySelector(
".layout__wnd--active > .fn__flex > .layout-tab-bar > .item--focus",
) || document.querySelector("ul.layout-tab-bar > .item--focus");
if (!element) {
return;
}
const tab = getInstanceById(element.getAttribute("data-id"));
if (
!tab ||
!tab.model ||
!tab.model.editor ||
!tab.model.editor.protyle
) {
return;
}
let protyle = tab.model.editor.protyle;
let docId = protyle.block.id;
let notebookId = protyle.notebookId;
// 这里需要取打开文档的父级文档和路径。
let parentDocPath = getParentPath(protyle.path);
let parentDocId = getDocIdByPath(parentDocPath);
await switchPath(notebookId, parentDocId, parentDocPath);
const docLiElement = rootElement.querySelector(
`li[data-node-id="${docId}"]`,
) as HTMLElement;
docLiElement.classList.add("b3-list-item--focus");
let docListElement = docLiElement.parentElement.parentElement;
// console.log(
// "selectCurDoc",
// docLiElement.offsetTop,
// docListElement.clientHeight,
// );
if (docLiElement.offsetTop > docListElement.clientHeight) {
docListElement.scrollTop =
docLiElement.offsetTop -
docListElement.clientHeight / 2 -
docListElement.offsetTop;
} else {
docListElement.scrollTop = 0;
}
}
function getParentPath(path: string): string {
if (isStrBlank(path)) {
return null;
}
// 将路径按斜杠分割
const parts = path.split("/");
if (parts.length <= 1) {
return "/"; // 如果没有多余的路径部分，返回根路径
}
// 获取倒数第二部分并保留其后缀
const secondLast = parts[parts.length - 2];
const last = parts[parts.length - 1];
// 提取后缀，合并成新的路径
const suffix = last.split(".").pop();
return `/${parts.slice(1, -2).join("/")}/${secondLast}.${suffix}`;
}
function getDocIdByPath(path: string) {
if (isStrBlank(path)) {
return null;
}
// 将路径按斜杠分割
const parts = path.split("/");
if (parts.length < 1) {
return null; // 如果没有多余的路径部分，返回根路径
}
let docId = parts[parts.length - 1];
docId = docId.replace(".sy", "");
return docId;
}
async function switchShowSubDocOfSubDoc() {
showSubDocOfSubDoc = !showSubDocOfSubDoc;
refreshDocList();
}
async function refreshDocListBySearchKey(searchKey: string) {
await updateDocList(
curPathNotebookId,
Expand Down Expand Up @@ -520,12 +671,14 @@
fullTextSearch,
);
updateCurPath(parentDocId);
if (useDocByPathApi) {
if (docSortMethod == curNotebookSortMethod) {
docSortMethod = null;
}
queryDocumentByPath(
await queryDocumentByPath(
notebookId,
docPath,
keywords,
Expand All @@ -548,7 +701,7 @@
curPathSortMethod = docSortMethod;
}
queryDocumentByDb(
await queryDocumentByDb(
notebookId,
parentDocId,
keywords,
Expand All @@ -560,14 +713,19 @@
isSearching = Math.max(0, isSearching - 1);
});
}
}
// console.log("curPathcurPathcurPathcurPathcurPath")
async function updateCurPath(parentDocId: string) {
let showCurPathTemp = "/";
if (isStrNotBlank(parentDocId)) {
let parentDocInfo = await getBlockByID(parentDocId);
showCurPathTemp =
getBoxIconAndNameHtml(parentDocInfo.box) +
`<span>${parentDocInfo.hpath}</span>`;
showCurPathTemp = getBoxIconAndNameHtml(parentDocInfo.box);
let hpathSplit = parentDocInfo.hpath.split("/");
let pathSplit = parentDocInfo.path.split("/");
for (let i = 1; i < hpathSplit.length; i++) {
showCurPathTemp += `<span class="doc-path" data-path-type="doc" data-id="${pathSplit[i].replace(".sy", "")}">/${hpathSplit[i]}</span>`;
}
} else if (isStrNotBlank(curPathNotebookId)) {
showCurPathTemp = getBoxIconAndNameHtml(curPathNotebookId);
}
Expand All @@ -588,9 +746,11 @@
icon = notebook.icon;
}
let iconHtml = `<span class="box-path__icon">${icon}</span>`;
let nameHtml = `<span>${notebook.name}</span>`;
let nameHtml = `<span class="doc-path" data-path-type="box" data-id="${box}"> ${notebook.name}</span>`;
let boxPathHtml = iconHtml + nameHtml;
// let name = notebook.name;
return iconHtml + nameHtml;
console.log(box);
return boxPathHtml;
}
function handleKeyDownSelectItem(event: KeyboardEvent) {
Expand Down Expand Up @@ -773,7 +933,11 @@

<!-- svelte-ignore a11y-no-static-element-interactions -->
<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
<div class="fn__flex-column" style="height: 100%;" bind:this={rootElement}>
<div
class="fn__flex-column misuzu2027__doc-list"
style="height: 100%;"
bind:this={rootElement}
>
<div class="flat_doc_tree--top">
<div
class="block__icons"
Expand All @@ -785,7 +949,15 @@
>
</div>
<span class="fn__flex-1 fn__space"></span>

<span
class="block__icon ariaLabel"
aria-label="定位打开的文档 "
style="opacity: 1;"
on:click={selectCurDoc}
on:keydown={handleKeyDownDefault}
><svg><use xlink:href="#iconFocus"></use></svg></span
>
<span class="fn__space"></span>
<label
class="block__icon ariaLabel"
aria-label="锁定当前路径 "
Expand Down Expand Up @@ -823,6 +995,7 @@
class="b3-switch fn__flex-center"
type="checkbox"
bind:checked={showSubDocOfSubDoc}
on:click={switchShowSubDocOfSubDoc}
/>
</label>
</div>
Expand Down Expand Up @@ -1006,4 +1179,9 @@
label.block__icon span.fn__space {
width: 4px;
}
.b3-switch:hover:not(:disabled):before,
.b3-switch:focus:not(:disabled):before {
content: none;
}
</style>
Loading

0 comments on commit e25ec12

Please sign in to comment.