fix: update to markmap v0.18

Author: gera2ld

README.md

@@ -73,8 +73,8 @@ plugins:
       encoding: utf-8
       file_extension: .mm.md
       d3_version: 7
-      lib_version: 0.15.3
-      view_version: 0.15.3
+      lib_version: 0.18
+      view_version: 0.18
 ```
 
 In addition, feel free to define your favourite source urls like this:
@@ -89,8 +89,8 @@ plugins:
 
 extra_javascript:
   - https://unpkg.com/d3@7/dist/d3.min.js
-  - https://unpkg.com/markmap-lib@0.15.3/dist/browser/index.js
-  - https://unpkg.com/markmap-view@0.15.3/dist/browser/index.js
+  - https://unpkg.com/markmap-lib@0.18/dist/browser/index.iife.js
+  - https://unpkg.com/markmap-view@0.18/dist/browser/index.js
 ```
 
 ## Troubleshooting

mkdocs_markmap/defaults.py

@@ -14,12 +14,12 @@ class JsModuleConfig(object):
 )
 
 MARKMAP_LIB: JsModuleConfig = JsModuleConfig(
-    version="0.15.4",
+    version="0.18",
     uri="https://unpkg.com/markmap-lib@{}",
 )
 
 MARKMAP_VIEW: JsModuleConfig = JsModuleConfig(
-    version="0.15.4",
+    version="0.18",
     uri="https://unpkg.com/markmap-view@{}",
 )
 

mkdocs_markmap/static_files/mkdocs-markmap.js

@@ -1,9 +1,10 @@
 (function initializeMarkmap() {
     const transformer = new markmap.Transformer();
+    const preloadAssets = transformer.getPreloadScripts();
     const assets = transformer.getAssets();
     const loading = Promise.all([
         assets.styles && markmap.loadCSS(assets.styles),
-        assets.scripts && markmap.loadJS(assets.scripts),
+        markmap.loadJS([...preloadAssets.scripts, ...assets.scripts]),
     ]);
 
     function parseData(content) {
@@ -19,8 +20,9 @@
     }
 
     function resetMarkmap(m, el) {
-        const { minX, maxX, minY, maxY } = m.state;
-        const height = (el.clientWidth * (maxX - minX)) / (maxY - minY);
+        if (!m.state.rect) return;
+        const { x1, y1, x2, y2 } = m.state.rect;
+        const height = (el.offsetWidth / (x2 - x1)) * (y2 - y1);
         el.style.height = height + "px";
         m.fit();
     }
@@ -44,11 +46,9 @@
         el.innerHTML = "<svg>";
         svg = el.firstChild;
         const { root, options } = parseData(content);
-        const m = markmap.Markmap.create(svg, options, root);
-        resetMarkmap(m, el);
-        transformer.hooks.retransform.tap(() => {
-            const { root, options } = parseData(content);
-            m.setData(root, options);
+        const m = markmap.Markmap.create(svg, options);
+        m.setData(root);
+        requestAnimationFrame(() => {
             resetMarkmap(m, el);
         });
     }