diff --git a/app/src/assets/scss/_dialog.scss b/app/src/assets/scss/_dialog.scss index c7e2bd5db..068ca0cbf 100644 --- a/app/src/assets/scss/_dialog.scss +++ b/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); + } } diff --git a/app/src/constants.ts b/app/src/constants.ts index dec64ac2b..8bcdc4aa3 100644 --- a/app/src/constants.ts +++ b/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"; diff --git a/app/src/mobile/util/initFramework.ts b/app/src/mobile/util/initFramework.ts index f808107e6..4db52addd 100644 --- a/app/src/mobile/util/initFramework.ts +++ b/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) { diff --git a/app/src/protyle/export/util.ts b/app/src/protyle/export/util.ts index 39df0386c..6c8f5370e 100644 --- a/app/src/protyle/export/util.ts +++ b/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: `
+ ${window.siyuan.languages.exportAsImage} +
+ +
+`, content: `
-
-
-
+
${window.siyuan.languages.exportBySiYuan}
-
- -
`, +
+ + +
`, 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", `
`) + 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"); }); }; diff --git a/app/src/protyle/util/compatibility.ts b/app/src/protyle/util/compatibility.ts index 2ec5939db..bbe13fd5f 100644 --- a/app/src/protyle/util/compatibility.ts +++ b/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") {