From 14002a13cca161e4b04a614cb96ceec0de87f40b Mon Sep 17 00:00:00 2001 From: James Yu Date: Wed, 19 Jun 2024 23:34:28 +0100 Subject: [PATCH] Move trimming control to viewer menu --- package.json | 2 +- src/preview/viewer.ts | 2 +- types/latex-workshop-protocol-types/index.d.ts | 1 + viewer/components/htmleditor.ts | 11 ++++++++--- viewer/components/trimming.ts | 14 ++++++++++++-- viewer/latexworkshop.css | 5 +++++ viewer/latexworkshop.ts | 8 ++++---- 7 files changed, 32 insertions(+), 11 deletions(-) diff --git a/package.json b/package.json index f6f91f61c..9d466809e 100644 --- a/package.json +++ b/package.json @@ -1565,7 +1565,7 @@ "scope": "window", "type": "number", "default": 0, - "markdownDescription": "The trim percentage of the PDF viewer. This should be a number between 0 and 1, indicating the portion of PDF to be trimmed. For example, setting the value to `0.1` means that 10% of the height and width of PDF pages are trimmed off." + "markdownDescription": "The default trim percentage of the PDF viewer. This should be an integer between 0 and 99, indicating the portion of PDF to be trimmed. For example, setting the value to `10` means that 10% of the height and width of PDF pages are trimmed off." }, "latex-workshop.view.pdf.scrollMode": { "scope": "window", diff --git a/src/preview/viewer.ts b/src/preview/viewer.ts index ef699be90..7ebab2f91 100644 --- a/src/preview/viewer.ts +++ b/src/preview/viewer.ts @@ -33,7 +33,7 @@ lw.watcher.pdf.onChange(pdfPath => { refresh(pdfPath) } }) -lw.onConfigChange(['view.pdf.trim', 'view.pdf.invert', 'view.pdf.invertMode', 'view.pdf.color', 'view.pdf.internal'], () => { +lw.onConfigChange(['view.pdf.invert', 'view.pdf.invertMode', 'view.pdf.color', 'view.pdf.internal'], () => { reload() }) diff --git a/types/latex-workshop-protocol-types/index.d.ts b/types/latex-workshop-protocol-types/index.d.ts index 216272306..8d29e59d7 100644 --- a/types/latex-workshop-protocol-types/index.d.ts +++ b/types/latex-workshop-protocol-types/index.d.ts @@ -107,6 +107,7 @@ export type PdfViewerState = { scrollTop?: number, scrollLeft?: number, sidebarView?: number, + trim?: number, scrollMode?: number, spreadMode?: number, synctexEnabled?: boolean, diff --git a/viewer/components/htmleditor.ts b/viewer/components/htmleditor.ts index f5c382b6b..fa9722484 100644 --- a/viewer/components/htmleditor.ts +++ b/viewer/components/htmleditor.ts @@ -5,11 +5,16 @@ export function editHTML() { const template = document.createElement('template') template.innerHTML = -` + -
` let anchor: HTMLElement | Element | null | undefined = document.getElementById('documentProperties') diff --git a/viewer/components/trimming.ts b/viewer/components/trimming.ts index f19248d43..46113fcc1 100644 --- a/viewer/components/trimming.ts +++ b/viewer/components/trimming.ts @@ -5,12 +5,16 @@ declare const PDFViewerApplication: IPDFViewerApplication let viewerTrim = 0 ;(globalThis as any).viewerTrim = viewerTrim -export function changePDFViewerTrim(trim: number) { +export function changePDFViewerTrim(trim: number, eventBus: { dispatch: (eventName: string, payload: any) => void }) { viewerTrim = Math.min(1, Math.max(0, trim)) ;(globalThis as any).viewerTrim = viewerTrim + const select = document.getElementById('scaleSelect') as HTMLInputElement + eventBus.dispatch('scalechanged', { source: select, value: select.value }) + const trimPct = document.getElementById('trimPct') as HTMLInputElement + trimPct.value = (trim * 100).toString() } -export function registerPDFViewerTrim() { +export function registerPDFViewerTrim(eventBus: { dispatch: (eventName: string, payload: any) => void }) { document.getElementById('viewer')!.style.setProperty('--trim-factor', viewerTrim.toString()) const { pageHeight, pageWidth } = PDFViewerApplication.pdfViewer._pages[0].viewport.rawDims const css = document.styleSheets[document.styleSheets.length - 1] @@ -28,4 +32,10 @@ export function registerPDFViewerTrim() { margin-left: calc(var(--scale-factor) * ${pageWidth}px * var(--trim-factor) / -2) !important; margin-top: calc(var(--scale-factor) * ${pageHeight}px * var(--trim-factor) / -2) !important; }`, css.cssRules.length) + const trimPct = document.getElementById('trimPct') as HTMLInputElement + trimPct.onchange = _ => { + viewerTrim = Number.parseFloat(trimPct.value) / 100 + document.getElementById('viewer')!.style.setProperty('--trim-factor', viewerTrim.toString()) + changePDFViewerTrim(viewerTrim, eventBus) + } } diff --git a/viewer/latexworkshop.css b/viewer/latexworkshop.css index 0e3416c4f..6cba42f32 100644 --- a/viewer/latexworkshop.css +++ b/viewer/latexworkshop.css @@ -98,6 +98,11 @@ html[dir='rtl'] .findbar { mask-image: var(--findbarButton-next-icon); } +#TrimButton::before{ + -webkit-mask-image:var(--secondaryToolbarButton-spreadNone-icon); + mask-image:var(--secondaryToolbarButton-spreadNone-icon); +} + .pdfViewer.removePageBorders .page { border: none; overflow: hidden; diff --git a/viewer/latexworkshop.ts b/viewer/latexworkshop.ts index bb7e9fd63..7b6dc4e8e 100644 --- a/viewer/latexworkshop.ts +++ b/viewer/latexworkshop.ts @@ -206,7 +206,7 @@ class LateXWorkshopPdfViewer implements ILatexWorkshopPdfViewer { private async applyParamsOnStart() { const params = await this.fetchParams() - this.applyNonStatefulParams(params) + await this.applyNonStatefulParams(params) const restoredState = await this.restoredState if (restoredState) { await this.restorePdfViewerState(restoredState) @@ -435,7 +435,7 @@ class LateXWorkshopPdfViewer implements ILatexWorkshopPdfViewer { return window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches } - private applyNonStatefulParams(params: PdfViewerParams) { + private async applyNonStatefulParams(params: PdfViewerParams) { PDFViewerApplication.pdfCursorTools.switchTool(params.hand ? 1 : 0) if (params.invertMode.enabled) { const { brightness, grayscale, hueRotate, invert, sepia } = params.invertMode @@ -463,7 +463,7 @@ class LateXWorkshopPdfViewer implements ILatexWorkshopPdfViewer { this.synctex.registerListenerOnEachPage() } - changePDFViewerTrim(params.trim) + changePDFViewerTrim(params.trim / 100, await getPDFViewerEventBus()) } private async setupConnectionPort() { @@ -816,7 +816,7 @@ async function sleep(timeout: number) { const extension = new LateXWorkshopPdfViewer() await extension.waitSetupAppOptionsFinished() -onPDFViewerEvent('pagesloaded', registerPDFViewerTrim) +onPDFViewerEvent('pagesloaded', async () => registerPDFViewerTrim(await getPDFViewerEventBus())) // @ts-expect-error Must import viewer.mjs here, otherwise some config won't work. #4096 await import('../../viewer/viewer.mjs')