🐛 Keep database backlink locating within its own viewport #19174

Author: 88250

app/src/assets/scss/business/_av.scss

@@ -6,6 +6,13 @@
   margin-top: 4px !important;
   margin-bottom: 4px !important;
 
+  &--backlink {
+    max-height: min(400px, 60vh);
+    overflow: auto;
+    overscroll-behavior: contain;
+    align-items: flex-start;
+  }
+
   &:hover {
     .av__views .block__icon,
     .av__group-icon--hover {

app/src/protyle/render/av/backlink.ts

@@ -1,5 +1,8 @@
 import {setAVLocateRequest} from "./locate";
-import {getBacklinkScrollElement} from "./backlinkScroll";
+import {trimAVRows} from "./virtualScroll";
+import {stickyRow} from "./row";
+
+const initialized = new WeakSet<HTMLElement>();
 
 export interface IBacklinkAVTarget {
     blockID: string;
@@ -14,7 +17,7 @@ export interface IBacklinkAVTarget {
 }
 
 // 每个反链副本独立定位，避免同 ID 的正文或其他反链数据库接收到定位请求。
-export const prepareBacklinkAV = (element: HTMLElement, targets: IBacklinkAVTarget[], scrollState?: {pending: boolean}) => {
+export const prepareBacklinkAV = (element: HTMLElement, targets: IBacklinkAVTarget[]) => {
     const databases = element.matches(".av[data-node-id]") ? [element] :
         Array.from(element.querySelectorAll<HTMLElement>(".av[data-node-id]"));
     databases.forEach(database => {
@@ -23,20 +26,24 @@ export const prepareBacklinkAV = (element: HTMLElement, targets: IBacklinkAVTarg
             return;
         }
         const match = target.matches[0];
+        database.classList.add("av--backlink");
+        if (!initialized.has(database)) {
+            initialized.add(database);
+            database.addEventListener("scroll", () => {
+                stickyRow(database, database, "all");
+                trimAVRows(database, database.getBoundingClientRect());
+            }, {passive: true});
+        }
         database.querySelectorAll(".def--mark").forEach(item => item.classList.remove("def--mark"));
-        // 首次展开仅滚动到首个数据库命中，刷新和其他副本保留阅读位置。
+        // 每个数据库副本独立展示命中条目，不移动外层阅读位置。
         setAVLocateRequest(database, {
             itemID: match.itemID,
             keyID: match.keyID,
             defIDs: match.defIDs,
             select: false,
             highlight: true,
             persistView: false,
-            scroll: scrollState?.pending === true,
-            scrollElement: getBacklinkScrollElement(database),
+            scroll: true,
         });
-        if (scrollState) {
-            scrollState.pending = false;
-        }
     });
 };

app/src/protyle/render/av/backlinkScroll.test.ts

@@ -1,11 +1,21 @@
 import * as assert from "node:assert/strict";
 import {describe, it} from "node:test";
-import {getBacklinkScrollElement, revealBacklinkReference} from "./backlinkScroll";
+import {getBacklinkScrollElement, revealBacklinkReference, scrollBacklinkTarget} from "./backlinkScroll";
 
 const element = (classes: string[], parent?: HTMLElement): HTMLElement => {
     const node = {
         parentElement: parent,
         classList: {contains: (name: string) => classes.includes(name)},
+        contains(target: HTMLElement) {
+            let current = target;
+            while (current) {
+                if (current === this as unknown as HTMLElement) {
+                    return true;
+                }
+                current = current.parentElement;
+            }
+            return false;
+        },
         closest(selector: string) {
             let current = this as unknown as HTMLElement;
             while (current) {
@@ -21,26 +31,55 @@ const element = (classes: string[], parent?: HTMLElement): HTMLElement => {
 };
 
 describe("database backlink scrolling", () => {
-    it("scrolls the dock list instead of the expanded inner editor", () => {
+    it("uses the database viewport inside the dock without selecting the list", () => {
         const panel = element(["sy__backlink"]);
         const list = element(["backlinkList"], panel);
         const innerEditor = element(["protyle-content"], list);
-        assert.equal(getBacklinkScrollElement(element(["av"], innerEditor)), list);
+        const database = element(["av", "av--backlink"], innerEditor);
+        assert.equal(getBacklinkScrollElement(database), database);
+        assert.equal(getBacklinkScrollElement(element([], database)), database);
     });
 
-    it("scrolls the owning document for bottom backlinks", () => {
+    it("uses the database viewport in bottom backlinks without selecting the owning document", () => {
         const ownerEditor = element(["protyle-content"]);
         const panel = element(["sy__backlink", "sy__backlink--bottom"], ownerEditor);
         const list = element(["backlinkList"], panel);
         const innerEditor = element(["protyle-content"], list);
-        assert.equal(getBacklinkScrollElement(element(["av"], innerEditor)), ownerEditor);
+        const database = element(["av", "av--backlink"], innerEditor);
+        assert.equal(getBacklinkScrollElement(database), database);
     });
 
     it("keeps ordinary database locating on the existing editor scroll path", () => {
         const editor = element(["protyle-content"]);
         assert.equal(getBacklinkScrollElement(element(["av"], editor)), undefined);
     });
 
+    it("locates each database independently while preserving the outer reading position", () => {
+        const outer = element(["backlinkList"]);
+        outer.scrollTop = 240;
+        const first = element(["av", "av--backlink"], outer);
+        const second = element(["av", "av--backlink"], outer);
+        [first, second].forEach(database => {
+            Object.assign(database, {
+                scrollTop: 0, clientHeight: 400,
+                getBoundingClientRect: () => ({top: 100}),
+            });
+        });
+        const reference = element([], first);
+        reference.getBoundingClientRect = () => ({top: 1300}) as DOMRect;
+        assert.equal(scrollBacklinkTarget(first, reference), true);
+        assert.equal(first.scrollTop, 1000);
+        assert.equal(second.scrollTop, 0);
+        assert.equal(outer.scrollTop, 240);
+        assert.equal(scrollBacklinkTarget(second, reference), false);
+        assert.equal(second.scrollTop, 0);
+        const secondReference = element([], second);
+        secondReference.getBoundingClientRect = reference.getBoundingClientRect;
+        assert.equal(scrollBacklinkTarget(second, secondReference), true);
+        assert.equal(second.scrollTop, 1000);
+        assert.equal(outer.scrollTop, 240);
+    });
+
     it("reveals a clipped reference inside a long field without scrolling outside the cell", () => {
         const cell = element(["av__cell"]);
         Object.assign(cell, {

app/src/protyle/render/av/backlinkScroll.ts

@@ -1,16 +1,19 @@
-// 反链内嵌编辑器随内容撑开，定位需要滚动面板或所属正文。
+// 定位仅滚动当前数据库副本，不查找反链面板或正文的滚动容器。
 export const getBacklinkScrollElement = (element: HTMLElement): HTMLElement | undefined => {
-    const backlink = element.closest<HTMLElement>(".sy__backlink");
-    if (!backlink) {
-        return;
-    }
-    if (backlink.classList.contains("sy__backlink--bottom")) {
-        return backlink.closest<HTMLElement>(".protyle-content") || undefined;
+    return element.closest<HTMLElement>(".av--backlink") || undefined;
+};
+
+export const scrollBacklinkTarget = (database: HTMLElement, target: HTMLElement) => {
+    const scroller = getBacklinkScrollElement(database);
+    if (!scroller || !scroller.contains(target)) {
+        return false;
     }
-    return element.closest<HTMLElement>(".backlinkList, .backlinkMList") || undefined;
+    const rect = scroller.getBoundingClientRect();
+    scroller.scrollTop += target.getBoundingClientRect().top - rect.top - scroller.clientHeight / 2;
+    return true;
 };
 
-// 单行或限高字段会裁剪引用，先移动字段内部视口，再定位外层面板。
+// 单行或限高字段会裁剪引用，仅移动单元格内部视口。
 export const revealBacklinkReference = (reference: HTMLElement, cell: HTMLElement) => {
     let parent = reference.parentElement;
     while (parent && cell.contains(parent)) {

app/src/protyle/render/av/backlinkSticky.test.ts

@@ -0,0 +1,45 @@
+import * as assert from "node:assert/strict";
+import {readFileSync} from "node:fs";
+import {test} from "node:test";
+import {runInNewContext} from "node:vm";
+import {ModuleKind, ScriptTarget, transpileModule} from "typescript";
+
+const compiled = transpileModule(readFileSync("src/protyle/render/av/row.ts", "utf8"), {
+    compilerOptions: {module: ModuleKind.CommonJS, target: ScriptTarget.ES2021},
+}).outputText;
+
+test("backlink scrolling clears fixed rows and their spacers without calculating window positions", () => {
+    const exports: {stickyRow?: (block: unknown, scroll: unknown, status: string) => void} = {};
+    runInNewContext(compiled, {exports, require: () => ({})});
+    const makeRow = (fixedClass: string, placeholderClass: string) => {
+        const classes = new Set([fixedClass]);
+        const placeholder = {
+            removed: false,
+            classList: {contains: (name: string) => name === placeholderClass},
+            remove() { this.removed = true; },
+        };
+        return {
+            classList: {contains: (name: string) => classes.has(name), remove: (name: string) => classes.delete(name)},
+            style: {top: "120px", bottom: "10px", left: "30px", width: "400px", transform: "translateX(-100px)", clipPath: "inset(0 50px 0 0)"},
+            nextElementSibling: placeholder,
+        };
+    };
+    const views = makeRow("av__views--fixed", "av__views-placeholder");
+    const header = makeRow("av__row--header--fixed", "av__row--header-placeholder");
+    const footer = makeRow("av__row--footer--fixed", "av__row--footer--placeholder");
+    const block = {
+        classList: {contains: (name: string) => name === "av--backlink"},
+        querySelector: () => views,
+        querySelectorAll: (selector: string) => selector.includes("header") ? [header] : [footer],
+        getBoundingClientRect: () => { throw new Error("Backlink fixed layout must not read window coordinates"); },
+    };
+    const outer = {scrollTop: 250};
+    for (let i = 0; i < 4; i++) {
+        exports.stickyRow(block, outer, "all");
+    }
+    [views, header, footer].forEach(row => {
+        assert.equal(row.nextElementSibling.removed, true);
+        assert.deepEqual(Object.values(row.style), ["", "", "", "", "", ""]);
+    });
+    assert.equal(outer.scrollTop, 250);
+});

app/src/protyle/render/av/locate.ts

@@ -8,14 +8,13 @@ import {setAVCellAnchor, setAVItemAnchor} from "./rangeSelect";
 import {updateAVRowSelect} from "./virtualScroll";
 import {getAVLocateViewChange} from "./locateView";
 import {applyAVColorPalette, getAVCustomColors} from "./color";
-import {revealBacklinkReference} from "./backlinkScroll";
+import {getBacklinkScrollElement, revealBacklinkReference, scrollBacklinkTarget} from "./backlinkScroll";
 
 export interface IAVLocateRequest {
     itemID: string;
     keyID?: string;
     defIDs?: string[];
     scroll?: boolean;
-    scrollElement?: HTMLElement;
     groupID?: string;
     viewID?: string;
     select?: boolean;
@@ -402,18 +401,14 @@ export const finishAVLocate = (blockElement: HTMLElement, protyle: IProtyle, dat
             const refs = Array.from(cell.querySelectorAll<HTMLElement>('[data-type~="block-ref"][data-id]'))
                 .filter(ref => request.defIDs?.includes(ref.dataset.id));
             refs.forEach(ref => ref.classList.add("def--mark"));
-            if (refs[0] && request.scrollElement) {
+            if (refs[0] && getBacklinkScrollElement(blockElement)) {
                 revealBacklinkReference(refs[0], cell);
             }
             targetElement = refs[0] || cell;
         }
     }
-    if (request.scroll !== false) {
-        if (request.scrollElement) {
-            const scroller = request.scrollElement;
-            const rect = scroller.getBoundingClientRect();
-            scroller.scrollTop += targetElement.getBoundingClientRect().top - rect.top - scroller.clientHeight / 2;
-        } else if (!request.keyID && data.viewType === "table" && data.target.index === 0 && !data.target.groupID) {
+    if (request.scroll !== false && !scrollBacklinkTarget(blockElement, targetElement)) {
+        if (!request.keyID && data.viewType === "table" && data.target.index === 0 && !data.target.groupID) {
             const contentRect = protyle.contentElement.getBoundingClientRect();
             protyle.contentElement.scrollTop += blockElement.getBoundingClientRect().top - contentRect.top;
         } else {

app/src/protyle/render/av/row.ts

@@ -571,7 +571,8 @@ const syncFixedRowPos = (item: HTMLElement, bodyRect: DOMRect, scrollLeft: numbe
 };
 
 export const stickyRow = (blockElement: HTMLElement, scrollElement: HTMLElement, status: "top" | "bottom" | "all") => {
-    const skipFixed = hasTopClosestByAttribute(blockElement, "fold", "1");
+    // 内部滚动的反链数据库不使用相对窗口固定的表头，避免占位和固定坐标干扰内部布局。
+    const skipFixed = blockElement.classList.contains("av--backlink") || hasTopClosestByAttribute(blockElement, "fold", "1");
     if (skipFixed) {
         const viewsElement = blockElement.querySelector(".av__views") as HTMLElement;
         if (viewsElement) {
@@ -581,7 +582,7 @@ export const stickyRow = (blockElement: HTMLElement, scrollElement: HTMLElement,
             removeFixedRow(item, "av__row--header--fixed", "av__row--header-placeholder");
         });
         blockElement.querySelectorAll(".av__row--footer--fixed").forEach((item: HTMLElement) => {
-            removeFixedRow(item, "av__row--footer--fixed", "av__row--footer-placeholder");
+            removeFixedRow(item, "av__row--footer--fixed", "av__row--footer--placeholder");
         });
         return;
     }

app/src/protyle/render/av/virtualScroll.ts

@@ -3,6 +3,7 @@ import {getRowHTML} from "./row";
 import {IAVSelectedCell, reconcileAVSelectedItemIDs, restoreAVCellSelection} from "./selectionState";
 import {getGroupTableViewportWindow} from "./groupTableVirtual";
 import {renderAVRichTextElements} from "./richText";
+import {getBacklinkScrollElement} from "./backlinkScroll";
 
 const BUFFER_RATIO = 1;
 
@@ -31,6 +32,7 @@ const blockDataStore = new WeakMap<HTMLElement, IAV>();
 const bodyStates = new WeakMap<HTMLElement, IBodyState>();
 const trimPending = new WeakSet<HTMLElement>();
 let lastScrollTop: number;
+const localScrollTops = new WeakMap<HTMLElement, number>();
 
 // 测量 DOM 变更前后容器 scrollHeight 的差值，用于精确计算 gallery 多列网格中行移除/回填的实际高度（含 gap）
 const measureHeightDiff = (el: HTMLElement, mutate: () => void): number => {
@@ -69,6 +71,10 @@ const syncTableBottomSpacer = (bodyEl: HTMLElement, state: IBodyState, dataEnd:
 };
 
 const doTrim = (blockElement: HTMLElement, elementRect: DOMRect): void => {
+    const localScroller = getBacklinkScrollElement(blockElement);
+    if (localScroller) {
+        elementRect = localScroller.getBoundingClientRect();
+    }
     const viewportHeight = elementRect.bottom - elementRect.top;
     const buffer = viewportHeight * BUFFER_RATIO;
     const topLimit = elementRect.top - buffer;
@@ -82,8 +88,14 @@ const doTrim = (blockElement: HTMLElement, elementRect: DOMRect): void => {
         return;
     }
     const protyle = stored.protyle;
-    const isScrollingUp = lastScrollTop && lastScrollTop > protyle.contentElement.scrollTop;
-    lastScrollTop = protyle.contentElement.scrollTop;
+    const scrollTop = (localScroller || protyle.contentElement).scrollTop;
+    const previousScrollTop = localScroller ? localScrollTops.get(localScroller) : lastScrollTop;
+    const isScrollingUp = previousScrollTop !== undefined && previousScrollTop > scrollTop;
+    if (localScroller) {
+        localScrollTops.set(localScroller, scrollTop);
+    } else {
+        lastScrollTop = scrollTop;
+    }
 
     if ((blockRect.bottom < elementRect.top && !isScrollingUp) || (blockRect.top > elementRect.bottom && isScrollingUp)) {
         return;

app/src/protyle/wysiwyg/renderBacklink.ts

@@ -69,15 +69,15 @@ const createBacklinkDOMRecord = (item: IBacklinkData, index: number, id: string)
     };
 };
 
-const renderBacklinkDOMNodes = (protyle: IProtyle, nodes: Node[], record: IBacklinkDOMRecord, scrollState: {pending: boolean}) => {
+const renderBacklinkDOMNodes = (protyle: IProtyle, nodes: Node[], record: IBacklinkDOMRecord) => {
     return Promise.all(nodes.map(async item => {
         if (!(item instanceof HTMLElement)) {
             return;
         }
         improveBreadcrumbAppearance(item);
         processRender(item);
         highlightRender(item);
-        prepareBacklinkAV(item, record.targets, scrollState);
+        prepareBacklinkAV(item, record.targets);
         await avRender(item, protyle);
         blockRender(protyle, item);
     }));
@@ -87,7 +87,6 @@ export const renderBacklink = (protyle: IProtyle, backlinkData: IBacklinkData[])
     protyle.block.showAll = true;
     const element = protyle.wysiwyg.element;
     let records = backlinkDOMRecords.get(protyle);
-    const scrollState = {pending: !records || records.size === 0};
     if (!records) {
         records = new Map<string, IBacklinkDOMRecord>();
         backlinkDOMRecords.set(protyle, records);
@@ -146,7 +145,7 @@ export const renderBacklink = (protyle: IProtyle, backlinkData: IBacklinkData[])
     });
     const applyPromises: Promise<void>[] = [];
     changedNodes.forEach(({nodes, record}) => {
-        applyPromises.push(renderBacklinkDOMNodes(protyle, nodes, record, scrollState).then(async () => {
+        applyPromises.push(renderBacklinkDOMNodes(protyle, nodes, record).then(async () => {
             await Promise.all(nodes.map(node => {
                 if (node instanceof HTMLElement) {
                     return applyViewFoldStates(protyle, node);