Merge pull request #1 from spacefall/async

spacefall · web-flow · commit c0cb91b027c5 · 2024-11-12T20:28:27.000+01:00
Conversione ad async
diff --git a/index.html b/index.html
@@ -4,6 +4,10 @@
     <meta charset="UTF-8">
     <title>iwb2svg</title>
     <script src="svg.js"></script>
+    <script src="utils.js"></script>
+    <script src="iwb.js"></script>
+    <script src="typeHandle.js"></script>
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
     <link rel="stylesheet" type="text/css" href="styles.css" />
 </head>
 <body>
@@ -23,22 +27,22 @@
         <i>(Passare il mouse sopra le tick per ulteriori informazioni)</i>
         <label>
             Penna più precisa (beta, lento)
-            <input id="precisioneChk" type="checkbox" onclick="refreshPagina()" title="Quando si scrive in modalità stilografica, il tratto cambia spessore; questa impostazione segue lo stesso cambiamento di spessore.&#10;*L'implementazione corrente non funziona correttamente con le linee trasparenti ed è lenta: in media è il doppio più lenta di quella normale e in alcune pagine anche 5 volte più lenta.*&#10;Se disattivata il tratto seguirà uno spessore costante.">
+            <input id="precisioneChk" type="checkbox" onclick="rigeneraPagine()" title="Quando si scrive in modalità stilografica, il tratto cambia spessore; questa impostazione segue lo stesso cambiamento di spessore.&#10;*L'implementazione corrente non funziona correttamente con le linee trasparenti ed è lenta: in media è il doppio più lenta di quella normale e in alcune pagine anche 5 volte più lenta.*&#10;Se disattivata il tratto seguirà uno spessore costante.">
         </label>
         <label>
             Abilita tratti disegnati a mano
-            <input id="touchChk" type="checkbox" onclick="refreshPagina()" checked="checked" title="Questa opzione abilita/disabilita i tratti disegnati senza la penna.">
+            <input id="touchChk" type="checkbox" onclick="rigeneraPagine()" checked="checked" title="Questa opzione abilita/disabilita i tratti disegnati senza la penna.">
         </label>
         <label>
             Abilita tratti disegnati a penna
-            <input id="pennaChk" type="checkbox" onclick="refreshPagina()" checked="checked" title="Questa opzione abilita/disabilita i tratti disegnati con la penna.">
+            <input id="pennaChk" type="checkbox" onclick="rigeneraPagine()" checked="checked" title="Questa opzione abilita/disabilita i tratti disegnati con la penna.">
         </label>
         <label>
             Abilita tratti cancellati
-            <input id="cancellatiChk" type="checkbox" onclick="refreshPagina()" title="Questa opzione ripristina i tratti cancellati.">
+            <input id="cancellatiChk" type="checkbox" onclick="rigeneraPagine()" title="Questa opzione ripristina i tratti cancellati.">
         </label>
     </div>
-    <svg id="preview"></svg>
+    <!--<svg id="preview"></svg>-->
     <script src="main.js"></script>
 </body>
 </html>
diff --git a/iwb.js b/iwb.js
@@ -0,0 +1,70 @@
+// esegue la conversione da iwb (in formato lista) a svg
+async function parseIWBList(lines, deleted, penIn, touchIn, precision, padding) {
+    let svgObj = SVG();
+    let promises = lines.slice(1).map(line => parseIWB_gTag(line, svgObj, deleted, penIn, touchIn, precision));
+
+    const pTagJson = JSON.parse(lines[0].substring(lines[0].indexOf("{")));
+    svgObj.css("background-color", intToHexColor(pTagJson.bg.bc));
+    let results = await Promise.allSettled(promises);
+
+    results.forEach((r) => {
+        if (r.status === "rejected") {
+            console.error("Errore nella conversione: " + r.reason);
+        }
+    });
+
+    let box = svgObj.bbox();
+    svgObj.viewbox([box.x - (padding / 2), box.y - (padding / 2), box.width + padding, box.height + padding]);
+    return svgObj;
+    //return [svgObj, intToHexColor(pTagJson.bg.bc)];
+}
+
+// esegue il parse di un tag "g"
+async function parseIWB_gTag(tag, svgElem, deleted, penIn, touchIn, precision) {
+    const jsonData = JSON.parse(tag.substring(tag.indexOf("{")));
+    const strokeObj = {color: intToHexColor(jsonData.props.color), width: jsonData.ps};
+    if (!deleted && !jsonData.delete) return;
+    let svgObj;
+
+    if (jsonData.type === 1) {
+        if ((touchIn && jsonData.pt === 1) || (penIn && jsonData.pt === 2)) {
+            svgObj = writingHandler(jsonData, strokeObj, svgElem, precision);
+        } else return;
+    } else if (typeHandlers[jsonData.type]) {
+        svgObj = typeHandlers[jsonData.type](jsonData, strokeObj, svgElem);
+        svgObj.stroke(strokeObj);
+    } else {
+        console.log("Incontrato un tag 'g' sconosciuto di tipo " + jsonData.type + ":\n" + jsonData);
+        return;
+    }
+
+    //svgObj.stroke(strokeObj);
+    ("fill" in jsonData) && jsonData.props.fill ? svgObj.fill(strokeObj.color) : svgObj.fill("none");
+
+    if ("transform" in jsonData) {
+        let t = jsonData.transform;
+        svgObj.transform({a: t[0], b: t[1], c: t[2], d: t[3], e: t[4], f: t[5]});
+    }
+}
+
+// semplifica un iwb rimuovendo le cose (ritenute) inutili e dividendo le pagine in liste al posto di essere limitate da tag
+function iwbToList(iwb) {
+    let pages = [];
+    iwb.split("\n").forEach(line => {
+        if (line.startsWith("p{")) {
+            pages.push([line]);
+        } else if (line.startsWith("g:")) {
+            pages[pages.length - 1].push(line);
+        } else if (!["a:", "pm", "am", ""].includes(line.substring(0, 2))) {
+            console.log("Rimuovendo attributo sconosciuto: ", line);
+        }
+    });
+    return pages;
+}
+
+// praticamente un wrapper di parseIWB che fa il parse di tutte le pagine in modo asincrono
+async function batch_parseIWBList(pages, deleted, penIn, touchIn, precision, padding) {
+    const promises = pages.map(page => parseIWBList(page, deleted, penIn, touchIn, precision, padding));
+    const results = await Promise.allSettled(promises);
+    return results.map(r => r.value);
+}
diff --git a/main.js b/main.js
@@ -1,218 +1,66 @@
-const svg = SVG("#preview")
+let previewSvg = SVG();// = SVG("#preview", true)
 const iwbFile = document.getElementById('iwb-loader');
 const svgPadding = 250;
+
+// gestione pagine
 let currPage = 0;
 let pageList = [];
+let svgList = [];
 
+// checkbox
 const touchChk = document.getElementById("touchChk");
 const pennaChk = document.getElementById("pennaChk");
 const precisioneChk = document.getElementById("precisioneChk");
 const cancellatiChk = document.getElementById("cancellatiChk");
 
-// Trasforma la lista di punti in stringhe per uso con polyline, saltando i cambiamenti di spessore per velocità
-function pointsConvQuick(points) {
-    let pointStr = points.map(ptArray => ptArray.slice(0, 2).join(",")).join(' ');
-    return [[1, pointStr]];
-}
-
-// Trasforma la lista di punti in stringhe per uso con polyline, separando anche i punti per spessore
-// in modo da avere una conversione più precisa
-function pointsConvPrecision(points) {
-    const ptList = [];
-    let thList = [1, ""];
-    let lastPoint = "";
-    points.forEach((ptArray) => {
-        let thickness = parseFloat(ptArray[2]);
-        let curPt = ptArray.slice(0, 2).join(",");
-        if (thList[0] === thickness) {
-            thList[1] += " " + curPt;
-        } else {
-            ptList.push(thList);
-            thList = [thickness, lastPoint + curPt];
-        }
-        lastPoint = curPt + " ";
-    })
-    ptList.push(thList);
-    return ptList;
-}
-
-// Questa funzione converte l'int del colore in hex, inoltre siccome la lavagna salva il colore in ARGB, lo converte in RGBA
-function signedInt2Hex(n) {
-    let hexNum = (n >>> 0).toString(16);
-    return "#" + hexNum.substring(2) + hexNum.substring(0, 2);
-}
-
-// cancella i tag non riconosciuti (che al momento sono inutili) per velocizzare la conversione e divide tutto in pagine
-function parseInput(iwb) {
-    let pages = [];
-    let lines = iwb.split("\n");
-    lines.forEach(curLine => {
-        switch (curLine.substring(0, 2)) {
-            case "p{":
-                pages.push([]);
-                pages[pages.length - 1].push(curLine);
-                break;
-
-            case "g:":
-                pages[pages.length - 1].push(curLine);
-                break;
-
-            case "a:":
-            case "pm":
-            case "am":
-            case "":
-                break;
-
-            default:
-                console.log("Rimuovendo attributo sconosciuto: ", curLine);
-                break;
-        }
-    })
-    return pages;
-}
-
-function parseIWB(lines, deleted = false, input_penna = true, input_dita = true) {
-    console.time("parsing");
-    //console.log(lines)
-    for (let i = 0; i < lines.length; i++) {
-        let lineJson = lines[i].substring(lines[i].indexOf("{"));
-        let jsonData = JSON.parse(lineJson);
-        let skipTransform = false;
-        let err = false;
-
-        switch (lines[i].charAt(0)) {
-            case "g":
-                let obj;
-                let strokeObj = {color: signedInt2Hex(jsonData.props.color), width: jsonData.ps};
-
-                if (!deleted && !jsonData.delete) continue;
-                switch (jsonData.type) {
-                    case 1: // scrittura
-                        strokeObj.linecap = "round";
-                        strokeObj.linejoin = "round";
-                        if (precisioneChk.checked) {
-                            const pointList = pointsConvPrecision(jsonData.points);
-                            skipTransform = true;
-                            pointList.map((pt) => {
-                                if ((input_dita && jsonData.pt === 1) || (input_penna && jsonData.pt === 2)) {
-                                    const strokeUpd = {...strokeObj};
-                                    strokeUpd.width = strokeUpd.width * pt[0];
-
-                                    obj = svg.polyline(pt[1]).fill("none").stroke(strokeUpd);
-                                    if ("transform" in jsonData) {
-                                        let t = jsonData.transform;
-                                        obj.transform({a: t[0], b: t[1], c: t[2], d: t[3], e: t[4], f: t[5]});
-                                    }
-                                }
-                            });
-                        } else {
-                            const pointList = pointsConvQuick(jsonData.points);
-                            pointList.map((pt) => {
-                                if ((input_dita && jsonData.pt === 1) || (input_penna && jsonData.pt === 2)) {
-                                    obj = svg.polyline(pt[1]).fill("none").stroke(strokeObj);
-                                }
-                            });
-                        }
-                        break;
-
-                    case 9: // linea retta
-                    case 11: // linea tratteggiata
-                    case 13: // freccia
-                        obj = svg.line(jsonData.pps[0], jsonData.pps[1], jsonData.ppe[0], jsonData.ppe[1]);
-
-                        if (jsonData.type === 11) {
-                            strokeObj.dasharray = "10,10";
-                        } else {
-                            strokeObj.linecap = "round";
-                            strokeObj.linejoin = "round";
-                        }
-
-                        if (jsonData.type === 13) {
-                            obj.marker('end', 8, 5, function (add) {
-                                add.polygon("0 0, 8 2.5, 0 5").fill(strokeObj.color)
-                            })
-                        }
-
-                        obj.stroke(strokeObj);
-                        break;
-
-                    case 10: // ellisse
-                        const w = jsonData.rect[2] - jsonData.rect[0];
-                        const h = jsonData.rect[3] - jsonData.rect[1];
-                        if (jsonData.rect.toString() === jsonData.props.toString()) {
-                            console.log("Trovato ellisse malformato, sarà trattato come un ellisse non riempito e senza trasparenza")
-                            strokeObj.color = jsonData.pc;
-                        }
-                        obj = svg.ellipse(w, h).x(jsonData.rect[0]).y(jsonData.rect[1]).stroke(strokeObj);
-                        break;
-
-                    case 12: // cerchio
-                        obj = svg.circle()
-                            .radius(jsonData.cr)
-                            .x(jsonData.cx - jsonData.cr)
-                            .y(jsonData.cy - jsonData.cr)
-                            .stroke(strokeObj);
-                        break;
-
-                    case 14: // triangolo
-                    case 15: // esagono
-                    case 16: // quadrilateri: trapezio, parallelepipedo, quadrato, rettangolo
-                        let points = jsonData.rect || jsonData.pp;
-                        let ptStr = points.join(" ");
-                        obj = svg.polygon(ptStr).stroke(strokeObj);
-                        break;
-
-                    default:
-                        console.log("Tag sconosciuto: ", jsonData.type, jsonData);
-                        err = true;
-                        break;
-                }
-                if (!err) {
-                    ("fill" in jsonData) && jsonData.props.fill ? obj.fill(strokeObj.color) : obj.fill("none");
-
-                    if ("transform" in jsonData && !skipTransform && !err) {
-                        let t = jsonData.transform;
-                        obj.transform({a: t[0], b: t[1], c: t[2], d: t[3], e: t[4], f: t[5]});
-                    }
-                }
-                break;
-
-            case "p":
-                svg.css("background-color", signedInt2Hex(jsonData.bg.bc));
-                break;
-            default:
-                break;
-        }
-    }
-    let box = svg.bbox();
-    svg.viewbox([box.x - (svgPadding / 2), box.y - (svgPadding / 2), box.width + svgPadding, box.height + svgPadding])
-    console.timeEnd("parsing");
-}
-
+// cambia la pagina assicurandosi che non vada sotto 0 e sopra le pagine disponibili, poi carica la pagina corretta
 function cambioPagina(prec) {
-    const oldPage = currPage
-    if (prec) currPage--; else currPage++;
-    if (currPage >= pageList.length) currPage = pageList.length - 1;
-    if (currPage < 0) currPage = 0;
-    if (currPage !== oldPage) refreshPagina();
+    if (prec) {
+        if (currPage-1 < 0) return;
+        currPage--;
+    } else {
+        if (currPage+1 >= pageList.length) return;
+        currPage++;
+    }
+    refreshPagina();
 }
 
+// pulisce il svg, aggiorna l'indicatore della pagina e carica l'svg della pagina corretta
 function refreshPagina() {
     if (pageList.length === 0) return;
-    svg.clear();
+    previewSvg.clear();
     document.getElementById("pagina").innerText = currPage + 1;
-    parseIWB(pageList[currPage], cancellatiChk.checked, pennaChk.checked, touchChk.checked);
+    previewSvg.remove();
+    previewSvg = svgList[currPage].clone().addTo("body");
+    //previewSvg.viewbox(svgList[currPage][0].viewbox())
+    //previewSvg.css("background-color", svgList[currPage][1]);
+    //parseIWB(pageList[currPage], cancellatiChk.checked, pennaChk.checked, touchChk.checked);
 }
 
+// forza un regen delle pagine già caricate
+function rigeneraPagine() {
+    batch_parseIWBList(pageList, cancellatiChk.checked, pennaChk.checked, touchChk.checked, precisioneChk.checked, svgPadding).then((value) => {
+        svgList = value;
+        refreshPagina();
+    })
+}
+
+// carica il file e avvia l'elaborazione
 iwbFile.addEventListener('change', (event) => {
     const fileList = event.target.files;
+    if (fileList.length === 0) return;
     const reader = new FileReader();
 
     reader.addEventListener("loadend", () => {
         let data = reader.result;
-        pageList = parseInput(data);
+        pageList = iwbToList(data);
         currPage = 0;
-        refreshPagina();
+        rigeneraPagine();
     });
     reader.readAsText(fileList[0]);
 });
+
+// idk easteregg?
+function funfun() {
+    return "fünfhundertfünfundfünfzigtausendfünfhundertfünfundfünfzig";
+}
diff --git a/styles.css b/styles.css
@@ -11,7 +11,7 @@ label {
     display: block;
 }
 
-svg {
+/*svg {
     width: 90%;
-    height: 90%;
-}
+    height: 90vh;
+}*/
diff --git a/typeHandle.js b/typeHandle.js
diff --git a/utils.js b/utils.js
