更新版本为 v0.0.10

优化二级文档列表头部开关样式。
Misuzu2027 · Oct 17, 2024 · 49080dc · 49080dc
1 parent 466d4e4
commit 49080dc
Show file tree

Hide file tree

Showing 6 changed files with 128 additions and 57 deletions.
diff --git a/plugin.json b/plugin.json
@@ -2,7 +2,7 @@
   "name": "syplugin-dual-doc-list",
   "author": "Misuzu2027",
   "url": "https://github.com/Misuzu2027/syplugin-dual-doc-list",
-  "version": "0.0.9",
+  "version": "0.0.10",
   "minAppVersion": "3.0.12",
   "backends": [
     "all"

diff --git a/src/components/doc-list/doc-list.svelte b/src/components/doc-list/doc-list.svelte
@@ -23,7 +23,7 @@
     } from "@/service/search/search-util";
     import { convertIconInIal } from "@/utils/icon-util";
     import { SETTING_DOCUMENT_LIST_SORT_METHOD_ELEMENT } from "@/models/setting-constant";
-    import { isArrayEmpty } from "@/utils/array-util";
+    import { isArrayEmpty, isArrayNotEmpty } from "@/utils/array-util";
     import {
         isStrBlank,
         isStrNotBlank,
@@ -32,7 +32,7 @@
     import { createDoc, getBlockByID, getDocInfo } from "@/utils/api";
     import { SiyuanConstants } from "@/models/siyuan-constant";
     import {
-    clearSyFileTreeItemFocus,
+        clearSyFileTreeItemFocusClass,
         convertNumberToSordMode,
         getParentPath,
     } from "@/utils/siyuan-util";
@@ -58,7 +58,8 @@
 
     let lockPath: boolean = false;
     let lockSortOrder: boolean = false;
-    let showSubDocOfSubDoc: boolean = false;
+    let localShowSubDocOfSubDoc: boolean = false;
+    let localFullTextSearch: boolean = false;
     let showCurPath = "/";
 
     let curPathNotebookId: string;
@@ -70,8 +71,7 @@
     let waitRefreshSelectDocId: string = null;
 
     onMount(async () => {
-        showSubDocOfSubDoc =
-            SettingService.ins.SettingConfig.showSubDocOfSubDoc;
+        initData();
         initEvent();
         initSiyuanEventBus();
         switchPath(null, null, null);
@@ -81,6 +81,11 @@
         destorySiyuanEventBus();
     });
 
+    function initData() {
+        let settingConfig = SettingService.ins.SettingConfig;
+        localShowSubDocOfSubDoc = settingConfig.showSubDocOfSubDoc;
+        localFullTextSearch = settingConfig.fullTextSearch;
+    }
     function initEvent() {
         rootElement.addEventListener("mousedown", () => {
             window.siyuan.menus.menu.remove();
@@ -490,12 +495,13 @@
         if (lastOpenBlockId == blockId) {
             previewProtyleMatchFocusIndex++;
         } else {
-            previewProtyleMatchFocusIndex = 0;
+            previewProtyleMatchFocusIndex = -1;
         }
         lastOpenBlockId = blockId;
+        // 优化定位，搜索出来打开，第一次打开不定位，这样默认会是上一次的界面，防止一点开就定位到开头。
         // 如果被查找节点不是聚焦状态，节点文档是当前查看文档，节点的文档element 存在，文档element 包含查找的节点
         let activeDocTab = getActiveTab();
-        if (activeDocTab) {
+        if (isArrayNotEmpty(lastKeywords) && activeDocTab) {
             let activeDocContentElement = activeDocTab.querySelector(
                 "div.protyle-content",
             ) as HTMLElement;
@@ -508,15 +514,14 @@
                     lastKeywords,
                     previewProtyleMatchFocusIndex,
                 );
-
-                matchFocusRangePromise.then((focusRange) => {
-                    renderNextSearchMarkByRange(focusRange);
-                });
-
+                if (previewProtyleMatchFocusIndex >= 0) {
+                    matchFocusRangePromise.then((focusRange) => {
+                        renderNextSearchMarkByRange(focusRange);
+                    });
+                }
                 return;
             }
         }
-
         let docTabPromise: Promise<ITab> = openTab({
             app: EnvConfig.ins.app,
             doc: {
@@ -663,7 +668,12 @@
     }
 
     async function switchShowSubDocOfSubDoc() {
-        showSubDocOfSubDoc = !showSubDocOfSubDoc;
+        localShowSubDocOfSubDoc = !localShowSubDocOfSubDoc;
+        refreshDocList();
+    }
+
+    async function switchFullTextSearch() {
+        localFullTextSearch = !localFullTextSearch;
         refreshDocList();
     }
 
@@ -708,9 +718,10 @@
         searchKey: string,
         docSortMethod: DocumentSortMode,
     ) {
-        let settingConfig = SettingService.ins.SettingConfig;
-        let showSubDocuments = showSubDocOfSubDoc;
-        let fullTextSearch = settingConfig.fullTextSearch;
+        // let settingConfig = SettingService.ins.SettingConfig;
+        let showSubDocuments = localShowSubDocOfSubDoc;
+        let fullTextSearch = localFullTextSearch;
+        // let fullTextSearch = settingConfig.fullTextSearch;
         let keywords = splitKeywordStringToArray(searchKey);
 
         waitRefreshByDatabase = false;
@@ -764,7 +775,7 @@
                 docPath,
                 keywords,
                 showSubDocuments,
-                fullTextSearch,
+                localFullTextSearch,
                 docSortMethod,
             ).then((docTreeInfoArray) => {
                 documentItems = docTreeInfoArray;
@@ -872,21 +883,20 @@
     function handleKeyDownDefault() {}
 
     async function afterOpenDocTab(docTabPromise: Promise<ITab>) {
+        if (isArrayEmpty(lastKeywords)) {
+            return;
+        }
+        previewProtyleMatchFocusIndex = -1;
         let docTab = await docTabPromise;
-        // console.log("afterOpenDocTab");
         let lastDocumentContentElement = docTab.panelElement
             .children[1] as HTMLElement;
 
         delayedTwiceRefresh(() => {
-            let matchFocusRangePromise = highlightElementTextByCss(
+            highlightElementTextByCss(
                 lastDocumentContentElement,
                 lastKeywords,
-                0,
+                null,
             );
-
-            matchFocusRangePromise.then((focusRange) => {
-                renderFirstSearchMarkByRange(focusRange);
-            });
         }, 50);
     }
 
@@ -913,7 +923,7 @@
             .forEach((item) => {
                 item.remove();
             });
-        clearSyFileTreeItemFocus();
+        clearSyFileTreeItemFocusClass();
 
         // 下面全抄官方的，把 this.element 换成了 rootElement
         // https://github.com/siyuan-note/siyuan/blob/f3b0ee51d5fb505c852c7378ba85776d15e22b86/app/src/layout/dock/Files.ts#L371
@@ -989,7 +999,7 @@
     }
 
     function localIsQueryDocByPathApi(): boolean {
-        let showSubDocuments = showSubDocOfSubDoc;
+        let showSubDocuments = localShowSubDocOfSubDoc;
         let fullTextSearch = SettingService.ins.SettingConfig.fullTextSearch;
 
         return isQueryDocByPathApi(
@@ -1004,6 +1014,8 @@
 
 <!-- svelte-ignore a11y-no-static-element-interactions -->
 <!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
+<!-- svelte-ignore a11y-label-has-associated-control -->
+
 <div
     class="fn__flex-column misuzu2027__doc-list"
     style="height: 100%;width: calc(100% - 7px);"
@@ -1029,45 +1041,75 @@
                 ><svg><use xlink:href="#iconFocus"></use></svg></span
             >
             <span class="fn__space"></span>
+            <span class="fn__space"></span>
             <label
-                class="block__icon ariaLabel"
+                class="block__icon ariaLabel {lockPath ? 'label-selected' : ''}"
                 aria-label="锁定当前路径 "
                 style="opacity: 1;"
+                on:click={() => {
+                    lockPath = !lockPath;
+                }}
+                on:keydown={handleKeyDownDefault}
                 ><svg><use xlink:href="#iconLockPath"></use></svg>
-                <span class="fn__space"></span>
-                <input
+                <!-- <span class="fn__space"></span> -->
+                <!-- <input
                     class="b3-switch fn__flex-center"
                     type="checkbox"
                     bind:checked={lockPath}
-                />
+                /> -->
             </label>
             <span class="fn__space"></span>
             <label
-                class="block__icon ariaLabel"
+                class="block__icon ariaLabel {lockSortOrder
+                    ? 'label-selected'
+                    : ''}"
                 aria-label="锁定排序方式"
                 style="opacity: 1;"
+                on:click={() => {
+                    lockSortOrder = !lockSortOrder;
+                }}
+                on:keydown={handleKeyDownDefault}
                 ><svg><use xlink:href="#iconLockSort"></use></svg>
-                <span class="fn__space"></span>
-                <input
+                <!-- <span class="fn__space"></span> -->
+                <!-- <input
                     class="b3-switch fn__flex-center"
                     type="checkbox"
                     bind:checked={lockSortOrder}
-                />
+                /> -->
             </label>
 
             <span class="fn__space"></span>
             <label
-                class="block__icon ariaLabel"
+                class="block__icon ariaLabel {localShowSubDocOfSubDoc
+                    ? 'label-selected'
+                    : ''}"
                 aria-label="显示子文档的子文档"
                 style="opacity: 1;"
+                on:click={switchShowSubDocOfSubDoc}
+                on:keydown={handleKeyDownDefault}
                 ><svg><use xlink:href="#iconShowSubDoc"></use></svg>
-                <span class="fn__space"></span>
-                <input
+
+                <!-- <span class="fn__space"></span> -->
+
+                <!-- <input
                     class="b3-switch fn__flex-center"
                     type="checkbox"
                     bind:checked={showSubDocOfSubDoc}
                     on:click={switchShowSubDocOfSubDoc}
-                />
+                /> -->
+            </label>
+            <span class="fn__space"></span>
+            <label
+                class="block__icon ariaLabel {localFullTextSearch
+                    ? 'label-selected'
+                    : ''}"
+                aria-label="使用全文搜索"
+                style="opacity: 1;"
+                on:click={switchFullTextSearch}
+                on:keydown={handleKeyDownDefault}
+                ><svg><use xlink:href="#iconFullTextSearch"></use></svg>
+
+                <!-- <span class="fn__space"></span> -->
             </label>
         </div>
         <!-- 路径信息 -->
@@ -1269,15 +1311,27 @@
         // box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* 添加阴影效果 */
     }
 
-    .block__icon {
-        padding: 4px 1px;
-    }
-    label.block__icon span.fn__space {
-        width: 4px;
+    // .block__icon {
+    //     padding: 4px 1px;
+    // }
+    // label.block__icon span.fn__space {
+    //     width: 4px;
+    // }
+
+    .misuzu2027__doc-list label.label-selected {
+        // border: 1px solid #66ccff; rgba(102, 204, 255, 0.5)
+        // box-shadow: inset 0 0 5px 2px var(--b3-theme-primary-light);
+        background-color: var(--b3-theme-primary-light);
+        transition: box-shadow 0.5s ease-in-out;
     }
 
     .b3-switch:hover:not(:disabled):before,
     .b3-switch:focus:not(:disabled):before {
         content: none;
     }
+
+    .misuzu2027__doc-list .flat_doc_tree--top .block__icon svg {
+        height: 14px;
+        width: 14px;
+    }
 </style>
diff --git a/src/models/icon-constant.ts b/src/models/icon-constant.ts
@@ -9,11 +9,15 @@ export const CUSTOM_ICON_MAP =
     },
     iconShowSubDoc: {
         id: "iconShowSubDoc",
-        source: `<symbol id="iconShowSubDoc" viewBox="0 0 1024 1024">
+        source: `<symbol id="iconShowSubDoc" viewBox="0 0 32 32">
+ <path d="M25.707,17.293l-5-5A1,1,0,0,0,20,12H14a2,2,0,0,0-2,2V28a2,2,0,0,0,2,2H24a2,2,0,0,0,2-2V18A1,1,0,0,0,25.707,17.293ZM23.5857,18H20V14.4141ZM14,28V14h4v4a2,2,0,0,0,2,2h4v8Z"/><path d="M8,27H4a2.0023,2.0023,0,0,1-2-2V5A2.0023,2.0023,0,0,1,4,3h7.5857A1.9865,1.9865,0,0,1,13,3.5859L16.4143,7H28a2.0023,2.0023,0,0,1,2,2v8H28V9H15.5857l-4-4H4V25H8Z"/>
+
+    </symbol>`
+        /*     
     <path d="M719.127 463.127h-179.2c-41.89 0-74.472-34.909-74.472-74.472V211.782c0-6.982 0-13.964 2.327-20.946 2.327-9.309 11.636-16.29 20.945-18.618 9.31-2.327 20.946 0 27.928 6.982l235.054 232.727c6.982 6.982 9.31 18.618 6.982 27.928-2.327 9.309-11.636 18.618-20.946 20.945-6.981 2.327-11.636 2.327-18.618 2.327z m-195.49-195.49v121.018c0 9.309 6.981 18.618 18.618 18.618h118.69L523.636 267.636z"></path>
     <path d="M684.218 1005.382H209.455c-41.891 0-74.473-34.91-74.473-74.473V232.727c0-41.89 34.909-74.472 74.473-74.472h288.581c6.982 0 13.964 2.327 20.946 9.309L751.709 400.29c4.655 4.654 9.31 13.964 9.31 20.945v512c-2.328 39.564-34.91 72.146-76.8 72.146zM209.455 214.109c-9.31 0-18.619 6.982-18.619 18.618V930.91c0 9.31 6.982 18.618 18.619 18.618h474.763c9.31 0 18.618-6.982 18.618-18.618V430.545L486.4 214.11H209.455z"></path>
     <path d="M823.855 865.745h-95.419c-16.29 0-30.254-11.636-30.254-27.927s13.963-27.927 27.927-27.927h97.746c9.309 0 18.618-6.982 18.618-18.618V276.945L640 76.8H351.418c-9.309 0-18.618 6.982-18.618 18.618v93.091c0 16.291-13.964 27.927-27.927 27.927s-30.255-13.963-30.255-30.254V93.09c0-41.891 34.91-74.473 76.8-74.473h300.218c6.982 0 13.964 2.327 20.946 9.31l221.09 218.763c2.328 2.327 6.983 9.309 6.983 18.618v525.964c0 41.89-34.91 74.472-76.8 74.472z"></path>
-    </symbol>`
+         */
     },
     iconLockPath: {
         id: "iconLockPath",
@@ -31,6 +35,13 @@ export const CUSTOM_ICON_MAP =
 	<path d="m60.4 486.5h243.1q60.8 0 60.8 60.7 0 60.8-60.8 60.8h-243.1q-60.7 0-60.7-60.8 0-60.7 60.7-60.7z"/>
     </symbol>`
     },
+    iconFullTextSearch: {
+        id: "iconFullTextSearch",
+        source: `<symbol id="iconFullTextSearch" viewBox="0 0 1024 1024 ">
+    <path d="M298.432 902.592c38.784 4.032 88.96 4.096 159.232 4.096h11.648a32 32 0 0 1 0 64h-13.44c-68.032 0-121.6 0-164.096-4.48-43.392-4.48-79.04-13.952-109.568-35.392a208.64 208.64 0 0 1-43.072-40.64c-23.296-29.184-33.536-63.616-38.4-105.088-4.736-40.32-4.736-90.88-4.736-154.688V518.592c0-62.208 0-110.528 2.56-149.504 2.56-39.488 7.936-71.68 19.712-101.248 35.712-90.24 111.04-160.64 205.568-193.92 54.4-19.008 120.128-20.48 229.632-20.608a176.128 176.128 0 0 1 1.6 0h41.792c69.76 0 113.28 0 149.12 12.608 57.536 20.16 103.68 63.168 125.632 118.656 7.488 18.816 10.688 38.784 12.16 62.016 1.536 22.72 1.536 50.688 1.536 85.888V512a32 32 0 0 1-64 0V333.568c0-36.48 0-62.4-1.344-82.752-1.28-20.096-3.84-32.64-7.808-42.688a144.384 144.384 0 0 0-87.424-81.856c-24.192-8.512-55.68-8.96-135.168-8.96H552.32a110.208 110.208 0 0 0-107.968 110.272c0 6.272 0.32 12.992 0.64 20.544l0.128 2.816c0.32 6.656 0.64 13.824 0.832 20.992a192 192 0 0 1-5.12 53.44c-9.536 35.584-37.312 63.36-72.896 72.896a192 192 0 0 1-53.376 5.12c-7.168-0.192-14.4-0.576-20.992-0.832l-2.816-0.128a452.672 452.672 0 0 0-20.608-0.64A110.208 110.208 0 0 0 160 512.832V628.352c0 66.24 0 113.152 4.288 149.248 4.16 35.392 11.968 56.512 24.96 72.768 8.384 10.56 18.432 20.032 29.824 28.096 17.792 12.544 41.088 20.096 79.36 24.128z m-136.128-527.36a173.44 173.44 0 0 1 107.904-37.44c7.936 0 16 0.32 23.552 0.64l2.944 0.192c6.656 0.32 12.928 0.64 19.2 0.704 14.592 0.32 26.24-0.384 35.52-2.88a39.104 39.104 0 0 0 27.712-27.648c2.496-9.344 3.2-20.992 2.88-35.52a737.152 737.152 0 0 0-0.768-19.2l-0.128-2.944a512.64 512.64 0 0 1-0.64-23.552c0-40.32 13.568-77.312 36.48-106.816-29.568 2.432-51.904 6.592-71.936 13.568-77.952 27.392-138.688 84.992-167.296 157.056-8.256 20.864-12.928 45.568-15.36 81.92l-0.064 1.92z"></path>
+    <path d="M522.688 743.616a178.304 178.304 0 1 1 324.928 101.376l71.04 71.04a32 32 0 0 1-45.312 45.248l-71.04-71.04a178.304 178.304 0 0 1-279.68-146.688z m178.24-114.304a114.304 114.304 0 1 0 0 228.608 114.304 114.304 0 0 0 0-228.608z"></path>
+    </symbol>`
+    }
 
 
 };
diff --git a/src/service/doc-list/DocListManager.ts b/src/service/doc-list/DocListManager.ts
@@ -6,7 +6,7 @@ import { SettingConfig } from "@/models/setting-model";
 import { SettingService } from "@/service/setting/SettingService";
 import { findParentElementWithAttribute, getAttributeRecursively } from "@/utils/html-util";
 import Instance from "@/utils/Instance";
-import { clearSyFileTreeItemFocus, isElementHidden } from "@/utils/siyuan-util";
+import { clearSyFileTreeItemFocusClass, isElementHidden } from "@/utils/siyuan-util";
 
 const EmbedDualDocListElementAttrName = "data-misuzu2027-embed-dualDocList";
 
@@ -178,7 +178,7 @@ export class DocListManager {
         }
         // 如果是笔记本，判断一下是否启用双击切换文档折叠。
         if (targetLiElementType == "navigation-root") {
-            if (this.handleNotebookDoubleClick(event)) {
+            if (this.handleNotebookDoubleClick(event, targetLiElement)) {
                 return;
             }
         }
@@ -187,7 +187,7 @@ export class DocListManager {
     }
 
     // return ： 是否双击
-    private handleNotebookDoubleClick(event: MouseEvent): boolean {
+    private handleNotebookDoubleClick(event: MouseEvent, targetLiElement: HTMLElement): boolean {
         let settingConfig = SettingService.ins.SettingConfig;
         if (!settingConfig || !settingConfig.doubleClickToggleNotebook) {
             return false;
@@ -200,6 +200,8 @@ export class DocListManager {
             setTimeout(() => {
                 this.clickCount = 0;
             }, doubleClickTimeout);
+            clearSyFileTreeItemFocusClass();
+            targetLiElement.classList.add("b3-list-item--focus");
             return false;
         }
         return true;
@@ -278,7 +280,7 @@ function getDragElement(): HTMLElement {
         if (!fileTreeDocElement || !docListElement) {
             return;
         }
-        clearSyFileTreeItemFocus();
+        clearSyFileTreeItemFocusClass();
         startX = e.clientX;
         // 获取当前 flex-item 的初始宽度
         startWidth = docListElement.offsetWidth;