feat: add support high resolution png

CHANGELOG.md

@@ -1,5 +1,9 @@
 # CHANGELOG
 
+## 0.1.6
+
+* feat: support exporting high resolution png.
+
 ## 0.1.5
 
 * fix: remove shortcut `m m` but keep `ctrl+m ctrl+m`.

README.md

@@ -119,6 +119,17 @@ Most of features come from `Markmap` project.
 * `mark-map-cut:: 30`, a block property, to limit mindmap node text length.
 * `mark-map-limit:: N`, to limit block next level block list items.
 
+## FAQs
+
+<details>
+<summary>1. How to export high resolution image.</summary>
+Once your markmap has huge blocks, the markmap will become so big and the default exported png become pixelated. And now it can export high resolution png but needs some special steps.
+
+1. Click `+` to zoom in your markmap to maximum but not overflow.
+2. Depend on your markmap's shape, if it looks like a landscape you need to move the markmap to left edge and if it looks like a portrait you need to move the markmap to top edge using arrow keys.
+3. Click export button, the exported one will be high resolution, and the markmap will fit the window again.
+</details>
+
 ## Contribution
 
 Issues and PRs are welcome!

src/main.ts

@@ -991,7 +991,12 @@ async function main() {
           let el = document.querySelector('#markmap-container') as HTMLElement;
           let rect = el.getBoundingClientRect();
           let oldHeight = el.style.height;
-          el.style.height = `${Math.ceil(g.height * rect.width / g.width)}px`;
+          let oldWidth = el.style.width;
+          if (g.height > g.width) {
+            el.style.height = `${Math.ceil(g.height * rect.width / g.width)}px`;
+          } else {
+            el.style.width = `${Math.ceil(g.width * rect.height / g.height)}px`;
+          }
           const page = await logseq.Editor.getCurrentPage();
           if (el) {
             html2canvas(el, {
@@ -1005,6 +1010,7 @@ async function main() {
 
               oA.click();
               el.style.height = oldHeight;
+              el.style.width = oldWidth;
               await mm.fit();
 
               oA.remove();