development/vscode
development/vscode
1
0
Fork 0
mirror of https://github.com/Microsoft/vscode synced 2024-10-02 17:32:41 +00:00
Code Issues Packages Projects Releases Wiki Activity

Don't scroll sync to elements inside collapsed details sections (#176541)

Browse source 
Fixes #176538

Turns out that `getClientBoundingRect` returns weird bounds for elements inside of a collapsed details section
This commit is contained in:
Matt Bierner 2023-03-08 12:06:26 -08:00 committed by GitHub
parent 9b12df8aaa
commit 924ee8b4d8
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 35 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

44
extensions/markdown-language-features/preview-src/scroll-sync.ts
View file

@ -8,10 +8,20 @@ import { SettingsManager } from './settings';
const codeLineClass = 'code-line';
export interface CodeLineElement {
element: HTMLElement;
line: number;
codeElement?: HTMLElement;
export class CodeLineElement {
private readonly _detailParentElements: readonly HTMLDetailsElement[];
constructor(
readonly element: HTMLElement,
readonly line: number,
readonly codeElement?: HTMLElement,
) {
this._detailParentElements = Array.from(getParentsWithTagName<HTMLDetailsElement>(element, 'DETAILS'));
}
get isVisible(): boolean {
return !this._detailParentElements.some(x => !x.open);
}
}
const getCodeLineElements = (() => {
@ -20,21 +30,26 @@ const getCodeLineElements = (() => {
return (documentVersion: number) => {
if (!cachedElements || documentVersion !== cachedVersion) {
cachedVersion = documentVersion;
cachedElements = [{ element: document.body, line: -1 }];
cachedElements = [new CodeLineElement(document.body, -1)];
for (const element of document.getElementsByClassName(codeLineClass)) {
if (!(element instanceof HTMLElement)) {
continue;
}
const line = +element.getAttribute('data-line')!;
if (isNaN(line)) {
continue;
}
if (element.tagName === 'CODE' && element.parentElement && element.parentElement.tagName === 'PRE') {
// Fenced code blocks are a special case since the `code-line` can only be marked on
// the `<code>` element and not the parent `<pre>` element.
cachedElements.push({ element: element.parentElement as HTMLElement, line: line, codeElement: element as HTMLElement });
cachedElements.push(new CodeLineElement(element.parentElement, line, element));
} else if (element.tagName === 'UL' || element.tagName === 'OL') {
// Skip adding list elements since the first child has the same code line (and should be preferred)
} else {
cachedElements.push({ element: element as HTMLElement, line });
cachedElements.push(new CodeLineElement(element, line));
}
}
}
@ -67,7 +82,7 @@ export function getElementsForSourceLine(targetLine: number, documentVersion: nu
* Find the html elements that are at a specific pixel offset on the page.
*/
export function getLineElementsAtPageOffset(offset: number, documentVersion: number): { previous: CodeLineElement; next?: CodeLineElement } {
const lines = getCodeLineElements(documentVersion);
const lines = getCodeLineElements(documentVersion).filter(x => x.isVisible);
const position = offset - window.scrollY;
let lo = -1;
let hi = lines.length - 1;
@ -145,9 +160,12 @@ export function scrollToRevealSourceLine(line: number, documentVersion: number,
window.scroll(window.scrollX, Math.max(1, window.scrollY + scrollTo));
}
export function getEditorLineNumberForPageOffset(offset: number, documentVersion: number) {
export function getEditorLineNumberForPageOffset(offset: number, documentVersion: number): number | null {
const { previous, next } = getLineElementsAtPageOffset(offset, documentVersion);
if (previous) {
if (previous.line < 0) {
return 0;
}
const previousBounds = getElementBounds(previous);
const offsetFromPrevious = (offset - window.scrollY - previousBounds.top);
if (next) {
@ -169,3 +187,11 @@ export function getLineElementForFragment(fragment: string, documentVersion: num
return element.element.id === fragment;
});
}
function* getParentsWithTagName<T extends HTMLElement>(element: HTMLElement, tagName: string): Iterable<T> {
for (let parent = element.parentElement; parent; parent = parent.parentElement) {
if (parent.tagName === tagName) {
yield parent as T;
}
}
}