🎨 https://github.com/siyuan-note/siyuan/issues/10327

app/src/asset/anno.ts

@@ -6,6 +6,8 @@ import {setStorageVal, writeText} from "../protyle/util/compatibility";
 import {getAllModels} from "../layout/getAll";
 import {focusByRange} from "../protyle/util/selection";
 import {Constants} from "../constants";
+import {Dialog} from "../dialog";
+import {showMessage} from "../dialog/message";
 
 export const initAnno = (element: HTMLElement, pdf: any, pdfConfig: any) => {
     getConfig(pdf);
@@ -214,6 +216,13 @@ export const initAnno = (element: HTMLElement, pdf: any, pdfConfig: any) => {
                 event.stopPropagation();
                 processed = true;
                 break;
+            } else if (type === "relate") {
+                setRelation(pdf);
+                hideToolbar(element);
+                event.preventDefault();
+                event.stopPropagation();
+                processed = true;
+                break;
             } else if (type === "toggle") {
                 const config = getConfig(pdf);
                 const annoItem = config[rectElement.getAttribute("data-node-id")];
@@ -265,6 +274,81 @@ export const initAnno = (element: HTMLElement, pdf: any, pdfConfig: any) => {
     return pdf;
 };
 
+const getRelationHTML = (ids: string[]) => {
+    if (!ids) {
+        return `<li class="b3-list--empty">${window.siyuan.languages.emptyContent}</li>`;
+    }
+    let html = ""
+    ids.forEach((id: string) => {
+        html += `<li data-id="${id}" class="popover__block b3-list-item b3-list-item--narrow b3-list-item--hide-action">
+    <span class="b3-list-item__text">${id}</span>
+    <span data-type="clear" class="b3-tooltips b3-tooltips__w b3-list-item__action" aria-label="${window.siyuan.languages.delete}">
+        <svg><use xlink:href="#iconTrashcan"></use></svg>
+    </span>
+</li>`;
+    })
+    return html
+}
+
+const setRelation = (pdf: any) => {
+    const config = getConfig(pdf);
+    const configItem = config[rectElement.getAttribute("data-node-id")];
+    if (!configItem.ids) {
+        configItem.ids = [];
+    }
+    const dialog = new Dialog({
+        title: window.siyuan.languages.relation,
+        content: `<div class="b3-dialog__content">
+    <div class="fn__flex">
+        <input class="b3-text-field fn__flex-1" placeholder="Enter">
+        <div class="fn__space"></div>
+        <button class="b3-button b3-button--text" data-type="add">${window.siyuan.languages.addAttr}</button>
+    </div>
+    <div class="fn__hr"></div>
+    <ul class="b3-list b3-list--background">${getRelationHTML(configItem.ids)}</ul>
+</div>`,
+        width: "520px",
+    });
+    const inputElement = dialog.element.querySelector(".b3-text-field") as HTMLInputElement
+    inputElement.focus();
+
+    dialog.element.addEventListener("click", (event) => {
+        let target = event.target as HTMLElement;
+        while (target && !target.classList.contains("b3-dialog__content")) {
+            const type = target.getAttribute("data-type");
+            if (type === "add") {
+                if (/\d{14}-\w{7}/.test(inputElement.value)) {
+                    if (!configItem.ids.includes(inputElement.value)) {
+                        configItem.ids.push(inputElement.value);
+                        updateRelation(pdf, config);
+                        rectElement.dataset.relations = configItem.ids;
+                        dialog.element.querySelector(".b3-list").innerHTML = getRelationHTML(configItem.ids);
+                    }
+                    inputElement.value = "";
+                } else {
+                    showMessage("ID " + window.siyuan.languages.invalid);
+                }
+                event.preventDefault();
+                event.stopPropagation();
+                break;
+            } else if (type === "clear") {
+                configItem.ids.splice(configItem.ids.indexOf(target.parentElement.textContent.trim()), 1);
+                updateRelation(pdf, config);
+                rectElement.dataset.relations = configItem.ids;
+                dialog.element.querySelector(".b3-list").innerHTML = getRelationHTML(configItem.ids);
+            }
+            target = target.parentElement;
+        }
+    });
+}
+
+const updateRelation = (pdf: any, config: any) => {
+    fetchPost("/api/asset/setFileAnnotation", {
+        path: pdf.appConfig.file.replace(location.origin, "").substr(1) + ".sya",
+        data: JSON.stringify(config),
+    });
+}
+
 const hideToolbar = (element: HTMLElement) => {
     element.querySelector(".pdf__util").classList.add("fn__none");
 };
@@ -540,7 +624,8 @@ export const getHighlight = (element: HTMLElement) => {
                 color: item.color,
                 content: item.content,
                 type: item.type,
-                mode: item.mode || ""
+                mode: item.mode || "",
+                ids: item.ids
             }, pdfInstance, pdfInstance.annoId === key);
         }
     });
@@ -559,7 +644,7 @@ const showHighlight = (selected: IPdfAnno, pdf: any, hl?: boolean) => {
         textLayerElement.insertAdjacentHTML("beforeend", "<div></div>");
     }
     textLayerElement = textLayerElement.lastElementChild;
-    let html = `<div class="pdf__rect popover__block" data-node-id="${selected.id}" data-mode="${selected.mode}">`;
+    let html = `<div class="pdf__rect popover__block" data-node-id="${selected.id}" data-relations="${selected.ids}" data-mode="${selected.mode}">`;
     selected.coords.forEach((rect) => {
         const bounds = viewport.convertToViewportRectangle(rect);
         const width = Math.abs(bounds[0] - bounds[2]);
@@ -676,11 +761,10 @@ async function getRectImgData(pdfObj: any) {
 }
 
 const setConfig = (pdf: any, id: string, data: IPdfAnno) => {
-    const urlPath = pdf.appConfig.file.replace(location.origin, "").substr(1);
     const config = getConfig(pdf);
     config[id] = data;
     fetchPost("/api/asset/setFileAnnotation", {
-        path: urlPath + ".sya",
+        path: pdf.appConfig.file.replace(location.origin, "").substr(1) + ".sya",
         data: JSON.stringify(config),
     });
 };

app/src/asset/index.ts

@@ -436,7 +436,7 @@ export class Asset extends Model {
             <svg class="b3-menu__icon"><use xlink:href="#iconRef"></use></svg>
             <span class="b3-menu__label">${window.siyuan.languages.copyAnnotation}</span>
         </button>
-        <button class="b3-menu__item pdf__util__hide" data-type="ids">
+        <button class="b3-menu__item pdf__util__hide" data-type="relate">
             <svg class="b3-menu__icon"><use xlink:href="#iconParagraph"></use></svg>
             <span class="b3-menu__label">${window.siyuan.languages.relation}</span>
         </button>

app/src/block/popover.ts

@@ -278,15 +278,23 @@ export const showPopover = async (app: App, showRef = false) => {
             // 编辑器中的引用数
             targetId = popoverTargetElement.parentElement.parentElement.getAttribute("data-node-id");
         } else if (popoverTargetElement.classList.contains("pdf__rect")) {
-            targetId = popoverTargetElement.getAttribute("data-node-id");
-            url = "/api/block/getRefIDsByFileAnnotationID";
+            const relationIds = popoverTargetElement.getAttribute("data-relations")
+            if (relationIds) {
+                ids = relationIds.split(",");
+                url = "";
+            } else {
+                targetId = popoverTargetElement.getAttribute("data-node-id");
+                url = "/api/block/getRefIDsByFileAnnotationID";
+            }
         } else if (!targetId) {
             // 文件树中的引用数
             targetId = popoverTargetElement.parentElement.getAttribute("data-node-id");
         }
-        const postResponse = await fetchSyncPost(url, {id: targetId});
-        ids = postResponse.data.refIDs;
-        defIds = postResponse.data.defIDs;
+        if (url) {
+            const postResponse = await fetchSyncPost(url, {id: targetId});
+            ids = postResponse.data.refIDs;
+            defIds = postResponse.data.defIDs;
+        }
     }
 
     let hasPin = false;

app/src/types/index.d.ts

@@ -319,6 +319,7 @@ interface IPdfAnno {
     mode: string,
     id?: string,
     coords?: number[]
+    ids?: string[]
 }
 
 interface IBackStack {