diff --git a/src/renderer/components/Preview.vue b/src/renderer/components/Preview.vue index dd54e53a..c3e5999d 100644 --- a/src/renderer/components/Preview.vue +++ b/src/renderer/components/Preview.vue @@ -231,13 +231,14 @@ export default defineComponent({ } } - function revealLine (startLine: number, endLine?: number) { + function revealLine (startLine: number) { if (startLine <= 1) { scrollTopTo(0) return } const nodes = refViewWrapper.value!.querySelectorAll(`.markdown-body [${DOM_ATTR_NAME.SOURCE_LINE_START}]`) + let prevEl: HTMLElement | undefined for (let i = 0; i < nodes.length; i++) { const el = nodes[i] @@ -250,10 +251,31 @@ export default defineComponent({ } const lineNumber = parseInt(el.dataset.sourceLine || '0') - if (lineNumber >= startLine && lineNumber <= (endLine || Number.MAX_SAFE_INTEGER)) { + + if (lineNumber < startLine) { + if (i === nodes.length - 1) { + refViewWrapper.value!.scrollTop = refViewWrapper.value!.scrollHeight - refViewWrapper.value!.clientHeight + break + } + + prevEl = el + continue + } + + if (lineNumber === startLine) { el.scrollIntoView() break } + + if (prevEl) { + const wrapperOffset = refViewWrapper.value!.scrollTop - refViewWrapper.value!.getBoundingClientRect().top + const prevOffset = wrapperOffset + prevEl.getBoundingClientRect().top + const elOffset = wrapperOffset + el.getBoundingClientRect().top + const prevLine = parseInt(prevEl.dataset.sourceLine || '0') + const top = Math.round((elOffset * (startLine - prevLine) + prevOffset * (lineNumber - startLine)) / (lineNumber - prevLine)) + refViewWrapper.value!.scrollTop = top + break + } } } diff --git a/src/renderer/plugins/sync-scroll.ts b/src/renderer/plugins/sync-scroll.ts index 3cdf0c0d..0b056b20 100644 --- a/src/renderer/plugins/sync-scroll.ts +++ b/src/renderer/plugins/sync-scroll.ts @@ -41,12 +41,11 @@ export default { const savePosition = debounce(saveScrollPosition, 500) editor.onDidScrollChange(() => { const visibleRange = editor.getVisibleRanges()[0] - const startLine = Math.max(1, visibleRange.startLineNumber - 2) - const endLine = Math.max(startLine, visibleRange.endLineNumber) + const startLine = Math.max(1, visibleRange.startLineNumber - 1) const top = editor.getScrollTop() if (ctx.view.getEnableSyncScroll()) { - ctx.view.revealLine(startLine, startLine + (endLine - startLine) / 2) + ctx.view.revealLine(startLine) } savePosition({ editor: top }) }) diff --git a/src/renderer/services/view.ts b/src/renderer/services/view.ts index 227f1fcc..7e8e97d1 100644 --- a/src/renderer/services/view.ts +++ b/src/renderer/services/view.ts @@ -57,10 +57,9 @@ export async function refresh () { /** * Reveal line. * @param startLine - * @param endLine */ -export function revealLine (startLine: number, endLine?: number) { - getActionHandler('view.reveal-line')(startLine, endLine) +export function revealLine (startLine: number) { + getActionHandler('view.reveal-line')(startLine) } /** diff --git a/src/renderer/types.ts b/src/renderer/types.ts index 12a29f20..c0b79e14 100644 --- a/src/renderer/types.ts +++ b/src/renderer/types.ts @@ -116,7 +116,7 @@ export type BuildInActions = { 'view.render-immediately': () => void, 'view.render': () => void, 'view.refresh': () => void, - 'view.reveal-line': (startLine: number, endLine?: number) => void, + 'view.reveal-line': (startLine: number) => void, 'view.scroll-top-to': (top: number) => void, 'view.get-content-html': () => string, 'view.get-view-dom': () => HTMLElement | null,