From 482f7c0976b80202870b009666f8d4c9062e596a Mon Sep 17 00:00:00 2001
From: Vanessa <lly219@gmail.com>
Date: Wed, 29 Mar 2023 16:06:30 +0800
Subject: [PATCH] :art: fix https://github.com/siyuan-note/siyuan/issues/7478

---
 app/src/assets/scss/export.scss |   1 +
 app/src/protyle/export/index.ts | 103 ++++++++++++++++++++++----------
 app/src/util/onGetConfig.ts     |   6 +-
 3 files changed, 78 insertions(+), 32 deletions(-)

diff --git a/app/src/assets/scss/export.scss b/app/src/assets/scss/export.scss
index 741ae490c..628e28291 100644
--- a/app/src/assets/scss/export.scss
+++ b/app/src/assets/scss/export.scss
@@ -9,6 +9,7 @@
 @import "component/select";
 @import "component/switch";
 @import "component/slider";
+@import "component/text-field";
 
 .protyle-wysiwyg {
   font-family: var(--b3-font-family);
diff --git a/app/src/protyle/export/index.ts b/app/src/protyle/export/index.ts
index 6e7653176..6dc7b3310 100644
--- a/app/src/protyle/export/index.ts
+++ b/app/src/protyle/export/index.ts
@@ -169,10 +169,25 @@ const renderPDF = (id: string) => {
         </div>
         <span class="fn__hr"></span>
         <select class="b3-select" id="marginsType">
-            <option ${localData.marginType === "0" ? "selected" : ""} value="0">Default</option>
-            <option ${localData.marginType === "1" ? "selected" : ""} value="1">None</option>
-            <option ${localData.marginType === "2" ? "selected" : ""} value="2">Minimal</option>
+            <option ${localData.marginType === "default" ? "selected" : ""} value="default">Default</option>
+            <option ${localData.marginType === "none" ? "selected" : ""} value="none">None</option>
+            <option ${localData.marginType === "printableArea" ? "selected" : ""} value="printableArea">Minimal</option>
+            <option ${localData.marginType === "custom" ? "selected" : ""} value="custom">${window.siyuan.languages.custom}</option>
         </select>
+        <div class="${localData.marginType === "custom" ? "" : "fn__none"}">
+            <span class="fn__hr"></span>
+            <div>Top</div>
+            <input id="marginsTop" class="b3-text-field fn__block" value="${localData.marginTop || 0}" type="number" min="0" step="0.01">
+            <span class="fn__hr"></span>
+            <div>Right</div>
+            <input id="marginsRight" class="b3-text-field fn__block" value="${localData.marginRight || 0}" type="number" min="0" step="0.01">
+            <span class="fn__hr"></span>
+            <div>Bottom</div>
+            <input id="marginsBottom" class="b3-text-field fn__block" value="${localData.marginBottom || 0}" type="number" min="0" step="0.01">
+            <span class="fn__hr"></span>
+            <div>Left</div>
+        <input id="marginsLeft" class="b3-text-field fn__block" value="${localData.marginLeft || 0}" type="number" min="0" step="0.01">
+    </div>
     </label>
     <label class="b3-label">
         <div>
@@ -224,8 +239,6 @@ const renderPDF = (id: string) => {
 <script src="${servePath}/stage/build/export/protyle-method.js?${Constants.SIYUAN_VERSION}"></script>
 <script src="${servePath}/stage/protyle/js/lute/lute.min.js?${Constants.SIYUAN_VERSION}"></script>    
 <script>
-    let pdfLeft = 0;
-    let pdfTop = 0;
     const previewElement = document.getElementById('preview');
     const fixBlockWidth = () => {
         const isLandscape = document.querySelector("#landscape").checked;
@@ -276,36 +289,48 @@ const renderPDF = (id: string) => {
     }
     const setPadding = () => {
         const isLandscape = document.querySelector("#landscape").checked;
-        switch (document.querySelector("#marginsType").value) { // none
-            case "0":
+        const topElement = document.querySelector("#marginsTop")
+        const rightElement = document.querySelector("#marginsRight")
+        const bottomElement = document.querySelector("#marginsBottom")
+        const leftElement = document.querySelector("#marginsLeft")
+        switch (document.querySelector("#marginsType").value) {
+            case "default":
                 if (isLandscape) {
-                    pdfLeft = 0.42;
-                    pdfTop = 0.42;
+                    topElement.value = "0.42";
+                    rightElement.value = "0.42";
+                    bottomElement.value = "0.42";
+                    leftElement.value = "0.42";
                 } else {
-                    pdfLeft = 0.54;
-                    pdfTop = 1;
+                    topElement.value = "1";
+                    rightElement.value = "0.54";
+                    bottomElement.value = "1";
+                    leftElement.value = "0.54";
                 }
                 break;
-            case "2": // minimal
-                if (isLandscape) {
-                    pdfLeft = 0.07;
-                    pdfTop = 0.07;
-                } else {
-                    pdfLeft = 0.1;
-                    pdfTop = 0.58;
-                }
+            case "none": // none
+                topElement.value = "0";
+                rightElement.value = "0";
+                bottomElement.value = "0";
+                leftElement.value = "0";
                 break;
-            case "1": // none
+            case "printableArea": // minimal
                 if (isLandscape) {
-                    pdfLeft = 0;
-                    pdfTop = 0;
+                    topElement.value = ".07";
+                    rightElement.value = ".07";
+                    bottomElement.value = ".07";
+                    leftElement.value = ".07";
                 } else {
-                    pdfLeft = 0;
-                    pdfTop = 0;
+                    topElement.value = "0.58";
+                    rightElement.value = "0.1";
+                    bottomElement.value = "0.58";
+                    leftElement.value = "0.1";
                 }
                 break;
         }
-        document.getElementById('preview').style.padding = pdfTop + "in " + pdfLeft + "in";
+        document.getElementById('preview').style.padding = topElement.value + "in " 
+                             + rightElement.value + "in "
+                             + bottomElement.value + "in "
+                             + leftElement.value + "in";
         setTimeout(() => {
             fixBlockWidth();
         }, 300);
@@ -406,7 +431,24 @@ const renderPDF = (id: string) => {
         actionElement.querySelector("#pageSize").addEventListener('change', () => {
             fixBlockWidth();
         });
-        actionElement.querySelector("#marginsType").addEventListener('change', () => {
+        actionElement.querySelector("#marginsType").addEventListener('change', (event) => {
+            setPadding();
+            if (event.target.value === "custom") {
+                event.target.nextElementSibling.classList.remove("fn__none");
+            } else {
+                event.target.nextElementSibling.classList.add("fn__none");
+            }
+        });
+        actionElement.querySelector("#marginsTop").addEventListener('change', () => {
+            setPadding();
+        });
+        actionElement.querySelector("#marginsRight").addEventListener('change', () => {
+            setPadding();
+        });
+        actionElement.querySelector("#marginsBottom").addEventListener('change', () => {
+            setPadding();
+        });
+        actionElement.querySelector("#marginsLeft").addEventListener('change', () => {
             setPadding();
         });
         actionElement.querySelector("#landscape").addEventListener('change', () => {
@@ -426,15 +468,14 @@ const renderPDF = (id: string) => {
                 landscape: actionElement.querySelector("#landscape").checked,
                 marginType: actionElement.querySelector("#marginsType").value,
                 margins: {
-                  top: pdfTop * 0.6,
-                  bottom: pdfTop * 0.6,
-                  left: 0,
-                  right: 0,
+                  top: parseFloat(document.querySelector("#marginsTop").value),
+                  bottom: parseFloat(document.querySelector("#marginsBottom").value),
+                  left: parseFloat(document.querySelector("#marginsLeft").value),
+                  right: parseFloat(document.querySelector("#marginsRight").value),
                 },
                 scale:  parseFloat(actionElement.querySelector("#scale").value),
                 pageSize: actionElement.querySelector("#pageSize").value,
               },
-              left: previewElement.style.paddingLeft,
               keepFold: keepFoldElement.checked,
               mergeSubdocs: mergeSubdocsElement.checked,
               removeAssets: actionElement.querySelector("#removeAssets").checked,
diff --git a/app/src/util/onGetConfig.ts b/app/src/util/onGetConfig.ts
index c74032fbf..7caa39b8e 100644
--- a/app/src/util/onGetConfig.ts
+++ b/app/src/util/onGetConfig.ts
@@ -268,13 +268,17 @@ export const initWindow = () => {
                 marginType: ipcData.pdfOptions.marginType,
                 pageSize: ipcData.pdfOptions.pageSize,
                 scale: ipcData.pdfOptions.scale,
+                marginTop: ipcData.pdfOptions.margins.top,
+                marginRight: ipcData.pdfOptions.margins.right,
+                marginBottom: ipcData.pdfOptions.margins.bottom,
+                marginLeft: ipcData.pdfOptions.margins.left,
             };
             setStorageVal(Constants.LOCAL_EXPORTPDF, window.siyuan.storage[Constants.LOCAL_EXPORTPDF]);
             try {
                 if (window.siyuan.config.export.addFooter) {
                     ipcData.pdfOptions.displayHeaderFooter = true;
                     ipcData.pdfOptions.headerTemplate = "<span></span>";
-                    ipcData.pdfOptions.footerTemplate = `<div style="width:100%;margin:0 ${ipcData.left};display: flex;line-height:12px;">
+                    ipcData.pdfOptions.footerTemplate = `<div style="width:100%;margin-right:${ipcData.pdfOptions.margins.right}in;display: flex;line-height:12px;">
     <div style="flex: 1"></div>
     <svg viewBox="0 0 32 32" style="height: 10px;width: 10px;">
       <path fill="#d23e31" d="M8.667 2.812c-0.221 0.219-0.396 0.417-0.39 0.438s-0.004 0.030-0.022 0.020c-0.047-0.029-0.397 0.337-0.362 0.376 0.016 0.018 0.011 0.022-0.013 0.008-0.045-0.025-0.244 0.173-0.244 0.243 0 0.023-0.013 0.033-0.029 0.023-0.037-0.023-0.127 0.074-0.096 0.104 0.013 0.013 0.002 0.023-0.023 0.023-0.060 0-0.234 0.174-0.234 0.234 0 0.025-0.010 0.036-0.023 0.024-0.024-0.024-0.336 0.264-0.753 0.692-0.7 0.72-1.286 1.291-1.304 1.274-0.012-0.012-0.021 0.009-0.021 0.046s-0.017 0.055-0.038 0.042c-0.035-0.021-0.055 0.029-0.042 0.105 0.002 0.016-0.017 0.024-0.043 0.019s-0.043 0.013-0.037 0.041c0.006 0.028-0.006 0.041-0.025 0.029s-0.128 0.075-0.24 0.193c-0.316 0.333-0.72 0.734-1.024 1.017-0.152 0.142-0.265 0.258-0.251 0.258s-0.030 0.047-0.1 0.105c-0.249 0.205-0.689 0.678-0.729 0.783-0.014 0.037-0.052 0.067-0.084 0.067s-0.059 0.027-0.059 0.059-0.014 0.051-0.030 0.041c-0.039-0.024-0.738 0.647-0.706 0.678 0.013 0.013 0.002 0.024-0.024 0.024s-0.134 0.090-0.239 0.2c-0.502 0.524-0.802 0.831-0.814 0.831-0.007 0-0.16 0.147-0.341 0.326l-0.328 0.326-0 9.032c-0 6.176 0.012 9.055 0.039 9.106 0.058 0.108 0.118 0.089 0.247-0.076 0.063-0.081 0.128-0.139 0.143-0.129s0.029-0.013 0.029-0.049 0.009-0.057 0.021-0.045c0.020 0.020 2.899-2.819 4.934-4.866 0.173-0.174 0.796-0.796 1.384-1.381s1.058-1.082 1.044-1.104c-0.013-0.022-0.008-0.029 0.012-0.017 0.052 0.032 0.25-0.159 0.218-0.21-0.015-0.024-0.008-0.031 0.016-0.016 0.043 0.027 0.199-0.114 0.199-0.181 0-0.020 0.009-0.028 0.021-0.017 0.071 0.072 0.863-0.833 0.842-0.963-0.012-0.074-0.022-4.185-0.022-9.136s-0.013-9.001-0.029-8.999-0.209 0.183-0.429 0.402zM22.214 2.895c-0.268 0.268-0.487 0.51-0.487 0.54s-0.011 0.042-0.023 0.029c-0.018-0.019-1.229 1.165-2.765 2.703-0.084 0.084-0.771 0.774-1.527 1.532l-1.374 1.379v9.15c0 5.033 0.009 9.15 0.021 9.15 0.042 0 0.203-0.183 0.181-0.206-0.013-0.013 0.001-0.023 0.031-0.024s0.166-0.124 0.302-0.275c0.136-0.15 0.358-0.377 0.492-0.505s0.487-0.478 0.783-0.78c0.296-0.302 0.647-0.654 0.78-0.783 0.679-0.66 1.153-1.132 1.139-1.132-0.009 0 0.141-0.16 0.333-0.356s0.362-0.35 0.378-0.341 0.029-0.015 0.029-0.051 0.011-0.055 0.023-0.042c0.029 0.029 0.129-0.067 0.129-0.125 0-0.023 0.013-0.036 0.029-0.027 0.027 0.016 0.23-0.17 0.21-0.192-0.005-0.006 0.003-0.014 0.019-0.018 0.053-0.014 0.116-0.088 0.099-0.117-0.010-0.016 0.011-0.029 0.045-0.029s0.051-0.017 0.038-0.038c-0.013-0.021-0.008-0.038 0.011-0.038s0.407-0.369 0.862-0.819l0.827-0.819v-9.068c0-4.988-0.011-9.095-0.023-9.128-0.036-0.094-0.041-0.089-0.559 0.428z"></path>