Browse Source

:art: fix https://github.com/siyuan-note/siyuan/issues/7093

Vanessa 2 years ago
parent
commit
bfcdf3c352

+ 5 - 0
app/src/assets/scss/_dialog.scss

@@ -146,4 +146,9 @@
       }
     }
   }
+
+  &__exportimg.protyle-wysiwyg [data-node-id].li[fold="1"] > .protyle-action:after {
+    background-color: transparent;
+    border: 1px solid var(--b3-list-hover);
+  }
 }

+ 1 - 0
app/src/constants.ts

@@ -71,6 +71,7 @@ export abstract class Constants {
     public static readonly LOCAL_FONTSTYLES = "local-fontstyles";
     public static readonly LOCAL_EXPORTPDF = "local-exportpdf";
     public static readonly LOCAL_EXPORTWORD = "local-exportword";
+    public static readonly LOCAL_EXPORTIMG = "local-exportimg";
     public static readonly LOCAL_BAZAAR = "local-bazaar";
     public static readonly LOCAL_PDFTHEME = "local-pdftheme";
 

+ 7 - 5
app/src/mobile/util/initFramework.ts

@@ -137,11 +137,13 @@ export const initFramework = () => {
         syncGuide();
     });
     if (getOpenNotebookCount() > 0) {
-        const openURL = window.JSAndroid.getBlockURL();
-        if (openURL && !/^siyuan:\/\/blocks\/\d{14}-\w{7}/.test(openURL)) {
-            openMobileFileById(openURL.substr(16, 22),
-                getSearch("focus", openURL) === "1" ? [Constants.CB_GET_ALL, Constants.CB_GET_FOCUS] : [Constants.CB_GET_FOCUS, Constants.CB_GET_CONTEXT]);
-            return;
+        if (window.JSAndroid) {
+            const openURL = window.JSAndroid.getBlockURL();
+            if (openURL && !/^siyuan:\/\/blocks\/\d{14}-\w{7}/.test(openURL)) {
+                openMobileFileById(openURL.substr(16, 22),
+                    getSearch("focus", openURL) === "1" ? [Constants.CB_GET_ALL, Constants.CB_GET_FOCUS] : [Constants.CB_GET_FOCUS, Constants.CB_GET_CONTEXT]);
+                return;
+            }
         }
         const openId = getSearch("id");
         if (openId) {

+ 68 - 38
app/src/protyle/export/util.ts

@@ -11,7 +11,7 @@ import {isMobile} from "../../util/functions";
 import {Constants} from "../../constants";
 import {highlightRender} from "../markdown/highlightRender";
 import {processRender} from "../util/processCode";
-import {openByMobile} from "../util/compatibility";
+import {openByMobile, setStorageVal} from "../util/compatibility";
 
 export const afterExport = (exportPath: string, msgId: string) => {
     /// #if !BROWSER
@@ -27,27 +27,70 @@ export const afterExport = (exportPath: string, msgId: string) => {
 
 export const exportImage = (id: string) => {
     const exportDialog = new Dialog({
-        title: window.siyuan.languages.exportAsImage,
+        title: `<div class="fn__flex">
+    ${window.siyuan.languages.exportAsImage}
+    <div class="fn__flex-1"></div>
+    <label class="fn__flex">
+        ${window.siyuan.languages.exportPDF5}
+        <span class="fn__space"></span>
+        <input id="keepFold" class="b3-switch fn__flex-center" type="checkbox" ${window.siyuan.storage[Constants.LOCAL_EXPORTIMG].keepFold ? "checked" : ""}>
+    </label>
+</div>
+`,
         content: `<div class="b3-dialog__content" style="max-height: 70vh;overflow: auto;${isMobile() ? "padding:8px;" : ""};background-color: var(--b3-theme-background)">
-    <div style="${isMobile() ? "padding: 16px;margin: 16px 0" : "padding: 48px;margin: 8px 0 24px"};border: 1px solid var(--b3-border-color);border-radius: 10px;" class="protyle-wysiwyg${window.siyuan.config.editor.displayBookmarkIcon ? " protyle-wysiwyg--attr" : ""}" id="preview">
-        <div class="fn__loading" style="left:0"><img height="128px" width="128px" src="stage/loading-pure.svg"></div>
-    </div>
+    <div style="${isMobile() ? "padding: 16px;margin: 16px 0" : "padding: 48px;margin: 8px 0 24px"};border: 1px solid var(--b3-border-color);border-radius: 10px;" class="b3-dialog__exportimg protyle-wysiwyg${window.siyuan.config.editor.displayBookmarkIcon ? " protyle-wysiwyg--attr" : ""}" id="preview"></div>
     <div class="ft__smaller ft__on-surface fn__flex"><img style="height: 18px;margin: 0 8px" src="stage/icon.png">${window.siyuan.languages.exportBySiYuan}</div>
     <div class="fn__hr--b"></div>
     <div class="fn__hr--b"></div>
 </div>
 <div class="b3-dialog__action">
-    <button class="b3-button b3-button--cancel">${window.siyuan.languages.cancel}</button><div class="fn__space"></div>
-    <button class="b3-button b3-button--text">${window.siyuan.languages.confirm}</button>
-</div>`,
+    <button disabled class="b3-button b3-button--cancel">${window.siyuan.languages.cancel}</button><div class="fn__space"></div>
+    <button disabled class="b3-button b3-button--text">${window.siyuan.languages.confirm}</button>
+</div>
+ <div class="fn__loading"><img height="128px" width="128px" src="stage/loading-pure.svg"></div>`,
         width: isMobile() ? "90vw" : "990px",
     });
-    fetchPost("/api/export/exportPreviewHTML", {
-        id,
-        keepFold: false,
-        image: true,
-    }, (response) => {
-        const previewElement = exportDialog.element.querySelector("#preview");
+    const btnsElement = exportDialog.element.querySelectorAll(".b3-button");
+    btnsElement[0].addEventListener("click", () => {
+        exportDialog.destroy();
+    });
+    btnsElement[1].addEventListener("click", () => {
+        const msgId = showMessage(window.siyuan.languages.exporting, 0);
+        previewElement.parentElement.style.maxHeight = "none";
+        setStorageVal(Constants.LOCAL_EXPORTIMG, window.siyuan.storage[Constants.LOCAL_EXPORTIMG]);
+        setTimeout(() => {
+            addScript("stage/protyle/js/html2canvas.min.js?v=1.4.1", "protyleHtml2canvas").then(() => {
+                window.html2canvas(previewElement.parentElement).then((canvas) => {
+                    canvas.toBlob((blob: Blob) => {
+                        const formData = new FormData();
+                        formData.append("file", blob, btnsElement[1].getAttribute("data-title"));
+                        formData.append("type", "image/png");
+                        fetchPost("/api/export/exportAsFile", formData, (response) => {
+                            openByMobile(response.data.file);
+                        });
+                        hideMessage(msgId);
+                        exportDialog.destroy();
+                    });
+                });
+            });
+        }, Constants.TIMEOUT_TRANSITION);
+    });
+    const previewElement = exportDialog.element.querySelector("#preview") as HTMLElement;
+    const foldElement = (exportDialog.element.querySelector("#keepFold") as HTMLInputElement)
+    foldElement.addEventListener("change", () => {
+        btnsElement[0].setAttribute("disabled", "disabled");
+        btnsElement[1].setAttribute("disabled", "disabled");
+        btnsElement[1].parentElement.insertAdjacentHTML("afterend", `<div class="fn__loading"><img height="128px" width="128px" src="stage/loading-pure.svg"></div>`)
+        window.siyuan.storage[Constants.LOCAL_EXPORTIMG].keepFold = foldElement.checked;
+        fetchPost("/api/export/exportPreviewHTML", {
+            id,
+            keepFold: foldElement.checked,
+            image: true,
+        }, (response) => {
+            refreshPreview(response);
+        })
+    });
+    const refreshPreview = (response: IWebSocketData) => {
         previewElement.innerHTML = response.data.content;
         processRender(previewElement);
         highlightRender(previewElement);
@@ -67,29 +110,16 @@ export const exportImage = (id: string) => {
             item.setAttribute("viewBox", viewBox);
             item.innerHTML = symbolElements[symbolElements.length - 1].innerHTML;
         });
-        const btnsElement = exportDialog.element.querySelectorAll(".b3-button");
-        btnsElement[0].addEventListener("click", () => {
-            exportDialog.destroy();
-        });
-        btnsElement[1].addEventListener("click", () => {
-            const msgId = showMessage(window.siyuan.languages.exporting, 0);
-            previewElement.parentElement.style.maxHeight = "none";
-            setTimeout(() => {
-                addScript("stage/protyle/js/html2canvas.min.js?v=1.4.1", "protyleHtml2canvas").then(() => {
-                    window.html2canvas(previewElement.parentElement).then((canvas) => {
-                        canvas.toBlob((blob: Blob) => {
-                            const formData = new FormData();
-                            formData.append("file", blob, response.data.name + ".png");
-                            formData.append("type", "image/png");
-                            fetchPost("/api/export/exportAsFile", formData, (response) => {
-                                openByMobile(response.data.file);
-                            });
-                            hideMessage(msgId);
-                            exportDialog.destroy();
-                        });
-                    });
-                });
-            }, Constants.TIMEOUT_TRANSITION);
-        });
+        btnsElement[0].removeAttribute("disabled");
+        btnsElement[1].removeAttribute("disabled");
+        exportDialog.element.querySelector(".fn__loading").remove();
+    };
+    fetchPost("/api/export/exportPreviewHTML", {
+        id,
+        keepFold: foldElement.checked,
+        image: true,
+    }, (response) => {
+        refreshPreview(response);
+        btnsElement[1].setAttribute("data-title", response.data.name + ".png");
     });
 };

+ 4 - 1
app/src/protyle/util/compatibility.ts

@@ -171,6 +171,9 @@ export const getLocalStorage = (cb:()=>void) => {
             keepFold: false,
             mergeSubdocs: false,
         };
+        defaultStorage[Constants.LOCAL_EXPORTIMG] = {
+            keepFold: false,
+        };
         defaultStorage[Constants.LOCAL_DOCINFO] = {
             id: "",
             action: []
@@ -202,7 +205,7 @@ export const getLocalStorage = (cb:()=>void) => {
         };
         defaultStorage[Constants.LOCAL_ZOOM] = 1;
 
-        [Constants.LOCAL_SEARCHEKEYS, Constants.LOCAL_PDFTHEME, Constants.LOCAL_BAZAAR, Constants.LOCAL_EXPORTWORD,
+        [Constants.LOCAL_EXPORTIMG, Constants.LOCAL_SEARCHEKEYS, Constants.LOCAL_PDFTHEME, Constants.LOCAL_BAZAAR, Constants.LOCAL_EXPORTWORD,
             Constants.LOCAL_EXPORTPDF, Constants.LOCAL_DOCINFO, Constants.LOCAL_FONTSTYLES, Constants.LOCAL_SEARCHEDATA,
             Constants.LOCAL_ZOOM,].forEach((key) => {
             if (typeof response.data[key] === "string") {