SyncTEX also highlights PDF

[SupernovaTitanium]

I saw someone asking for this feature in the issues.
Is it possible for SyncTEX to highlight a specific location in the PDF?

[iamhyc]

For anyone interested, it is possible since the overleaf server will return the location of a rectangle for highlight.

The only thing need to do is to draw the rectangle at the correct position on the pdf viewer.

https://github.com/iamhyc/Overleaf-Workshop/blob/4f9be70fd272d0724f1973fe5807870b2435cf0b/src/api/base.ts#L42-L50

[SupernovaTitanium]

Thank you very much for your response.
I appreciate the clarification regarding the bounding boxes being provided by the Overleaf server. However, I would be grateful if you could elaborate a bit more. I'm still unsure how to use this API in conjunction with the PDF viewer. Any additional guidance or examples would be greatly appreciated.

[SupernovaTitanium]

One can change the function syncCode(pdf) in pdf-viewer/index.js to the following:

 function syncCode(boxes) {
        if (!boxes || boxes.length === 0) {
            return;
        }

        // 1) Pick the “middle” box as the scroll target
        const midIdx   = Math.floor(boxes.length / 2);
        const target   = boxes[midIdx];
        const pageNum  = target.page;
        const pageElem = document.getElementsByClassName('page')[pageNum - 1];
        if (!pageElem) { return; }

        // 2) Do your existing scrolling (unchanged)
        const { viewport } = PDFViewerApplication.pdfViewer.getPageView(pageNum - 1);
        let [leftPdf, topPdf] = viewport.convertToPdfPoint(target.h, target.v);
        const container      = document.getElementById('viewerContainer');
        const scrollY        = pageElem.offsetTop + pageElem.offsetHeight - topPdf;
        if (PDFViewerApplication.pdfViewer.scrollMode === 1) {
            // horizontal
            container.scrollLeft = pageElem.offsetLeft;
        } else {
            // vertical
            container.scrollTop = scrollY - document.body.offsetHeight * 0.4;
        }
        backupPdfViewerState();

        // 3) Clear any old highlights
        document.querySelectorAll('.synctex-highlight').forEach(el => el.remove());

        // 4) Draw one <div> per bounding-box
        boxes.forEach(box => {
            

            const pv   = PDFViewerApplication.pdfViewer.getPageView(box.page - 1);
            const vp   = pv.viewport;
            const pageHeight = vp.viewBox[3]-vp.viewBox[1];
            // PDF coords → viewport-pixels for both corners
            const [x1, y1] = vp.convertToViewportPoint(box.h,box.v);
            const [x2, y2] = vp.convertToViewportPoint(box.h + box.width, box.v + box.height);

            const left   = Math.min(x1, x2);
            const top    = Math.min(y1, y2);
            const width  = Math.abs(x2 - x1);
            const height = Math.abs(y2 - y1);

            const hl = document.createElement('div');
            hl.className = 'synctex-highlight';
            Object.assign(hl.style, {
                position:      'absolute',
                left:          `${left}px`,
                top:           `${pageHeight-top}px`,
                width:         `${width}px`,
                height:        `${height}px`,
                background:    'transparent',
                border:        '1px solid orange',
                pointerEvents: 'none',
                zIndex:        1000,
                boxSizing:     'border-box'
            });
            pv.div.appendChild(hl);
        });
    }

It seems to work but not perfect.

[SupernovaTitanium]

It only works when the PDF is 75%. Maybe you need to adjust it based on the zooming size.

[SupernovaTitanium]

Please modify the box session. It can now work with the rescaling.

boxes.forEach(box => {
            
            const scale = PDFViewerApplication.pdfViewer.currentScale;
            const pv   = PDFViewerApplication.pdfViewer.getPageView(box.page - 1);
            const vp   = pv.viewport;
            const pageHeight = vp.viewBox[3]-vp.viewBox[1];
            // PDF coords → viewport-pixels for both corners
            const [x1, y1] = vp.convertToViewportPoint(box.h,box.v);
            const [x2, y2] = vp.convertToViewportPoint(box.h + box.width, box.v + box.height);

            const left   = Math.min(x1, x2);
            const top    = Math.min(y1, y2);
            const width  = Math.abs(x2 - x1);
            const height = Math.abs(y2 - y1);

            const hl = document.createElement('div');
            hl.className = 'synctex-highlight';
            Object.assign(hl.style, {
                position:      'absolute',
                left:          `${left}px`,
                top:           `${(pageHeight*scale/0.75-top)}px`,
                width:         `${width}px`,
                height:        `${height}px`,
                background:    'transparent',
                border:        '1px solid orange',
                pointerEvents: 'none',
                zIndex:        1000,
                boxSizing:     'border-box'
            });
            pv.div.appendChild(hl);
        });