Move trimming control to viewer menu

James-Yu · Jun 19, 2024 · 14002a1 · 14002a1
1 parent 4815664
commit 14002a1
Show file tree

Hide file tree

Showing 7 changed files with 32 additions and 11 deletions.
diff --git 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
@@ -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
@@ -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
@@ -5,11 +5,16 @@ export function editHTML() {
 
     const template = document.createElement('template')
     template.innerHTML =
-`<button id="synctexOffButton" class="secondaryToolbarButton" title="Disable forward SyncTeX" tabindex="70">
+`<button id="TrimButton" class="secondaryToolbarButton" title="Trim margin" tabindex="70">
+    <label for="trimPct">Trim margin by </label>
+    <input type="number" id="trimPct" name="trimPct" min="0" max="99" value="0">
+    <label for="trimPct">%</label>
+</button>
+<button id="synctexOffButton" class="secondaryToolbarButton" title="Disable forward SyncTeX" tabindex="71">
     <input id="synctexOff" type="checkbox"><span>Stop SyncTeX</span>
 </button>
-<button id="autoReloadOffButton" class="secondaryToolbarButton" title="Disable auto reload" tabindex="71">
-    <input id="autoReloadOff" type="checkbox"><span>Auto Reload</span>
+<button id="autoReloadOffButton" class="secondaryToolbarButton" title="Disable auto reload" tabindex="72">
+    <input id="autoReloadOff" type="checkbox"><span>Disable auto-reload</span>
 </button>
 <div class="horizontalToolbarSeparator"></div>`
     let anchor: HTMLElement | Element | null | undefined = document.getElementById('documentProperties')

diff --git 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
@@ -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
@@ -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')