muwasm: Restore text selection and search
authorOlivier FAURE <[email protected]>
Fri, 16 Sep 2022 12:56:38 +0000 (14:56 +0200)
committerOlivier FAURE <[email protected]>
Fri, 16 Sep 2022 20:17:33 +0000 (22:17 +0200)
platform/wasm/mupdf-view.html

index 6f1c4a538bdf31a644fcf2ba09004f0b249067f1..f6ca936f81fce4ca6f245412bd4334e25acfc34a 100644 (file)
@@ -657,12 +657,80 @@ async function updateView() {
                                img.onmouseup = (event) => mouseUp(pageNumber, img, event);
                        }
 
+                       let txt = document.createElement("div");
+                       txt.classList.add("text");
+                       div.getElementsByClassName("text")[0]?.remove();
+                       div.appendChild(txt);
+
+                       let map = document.createElement("div");
+                       map.classList.add("links");
+                       div.getElementsByClassName("links")[0]?.remove();
+                       div.appendChild(map);
+
+                       let hit = pageHIT[i] = document.createElement("div");
+                       hit.classList.add("searchHitList");
+                       div.getElementsByClassName("searchHitList")[0]?.remove();
+                       div.appendChild(hit);
+
                        pageImgs[pageNumber] = img;
                        pageDivs[pageNumber] = div;
 
                        mupdfView.drawPageAsPNG(pageNumber, dpi * devicePixelRatio)
                                .then(cookiePointer => jobCookies[pageNumber] = cookiePointer)
                                .catch(error => showPageError("drawPageAsPNG", div, error));
+
+                       mupdfView.getPageLinks(pageNumber, dpi * devicePixelRatio)
+                               .then(links => {
+                                       for (let link of links) {
+                                               let a = document.createElement("a");
+                                               a.href = link.href;
+                                               a.style.left = link.x + 'px';
+                                               a.style.top = link.y + 'px';
+                                               a.style.width = link.w + 'px';
+                                               a.style.height = link.h + 'px';
+                                               map.appendChild(a);
+                                       }
+                               })
+                               .catch(error => {
+                                       logError("pageLinks", error);
+                               });
+
+                       mupdfView.getPageText(pageNumber, dpi * devicePixelRatio)
+                               .then(jsonData => {
+                                       console.log("PAGE TEXT:", jsonData);
+                                       let nodes = [];
+                                       let pdf_w = [];
+                                       let html_w = [];
+                                       let text_len = [];
+                                       for (let block of jsonData.blocks) {
+                                               if (block.type === 'text') {
+                                                       for (let line of block.lines) {
+                                                               let text = document.createElement("span");
+                                                               text.style.left = line.bbox.x + 'px';
+                                                               text.style.top = (line.y - line.font.size * 0.8) + 'px';
+                                                               text.style.height = line.bbox.h + 'px';
+                                                               text.style.fontSize = line.font.size + 'px';
+                                                               text.style.fontFamily = line.font.family;
+                                                               text.style.fontWeight = line.font.weight;
+                                                               text.style.fontStyle = line.font.style;
+                                                               text.textContent = line.text;
+                                                               txt.appendChild(text);
+                                                               nodes.push(text);
+                                                               pdf_w.push(line.bbox.w);
+                                                               text_len.push(line.text.length-1);
+                                                       }
+                                               }
+                                       }
+                                       for (let i = 0; i < nodes.length; ++i)
+                                               if (text_len[i] > 0)
+                                                       html_w[i] = nodes[i].clientWidth;
+                                       for (let i = 0; i < nodes.length; ++i)
+                                               if (text_len[i] > 0)
+                                                       nodes[i].style.letterSpacing = ((pdf_w[i] - html_w[i]) / text_len[i]) + 'px';
+                               })
+                               .catch(error => {
+                                       logError("getPageText", error);
+                               });
                }
 
                if (searchNeedle && searchNeedle.length > 0) {
@@ -685,8 +753,8 @@ mupdfView.onRender = function (pageNumber, pngData, cookiePointer) {
        const img = pageImgs[pageNumber];
        const div = pageDivs[pageNumber];
        img.src = URL.createObjectURL(new Blob([pngData], {type:"image/png"}))
-       emptyNode(div);
-       div.appendChild(img);
+       div.getElementsByTagName("img")[0]?.remove();
+       div.insertBefore(img, div.firstChild);
 
        // TODO - delete on error too
        delete jobCookies[pageNumber];