fix: fix katex support and render issues

Author: gera2ld

mkdocs_markmap/static_files/mkdocs-markmap.js

@@ -1,36 +1,62 @@
 (function initializeMarkmap() {
-    function update_markmaps() {
-        const markmap_transformer = new markmap.Transformer();
+    const transformer = new markmap.Transformer();
+    const assets = transformer.getAssets();
+    const loading = Promise.all([
+        assets.styles && markmap.loadCSS(assets.styles),
+        assets.scripts && markmap.loadJS(assets.scripts),
+    ]);
+
+    function parseData(content) {
+        const { root, frontmatter } = transformer.transform(content);
+        let options = markmap.deriveOptions(frontmatter?.markmap);
+        options = Object.assign({
+            fitRatio: 0.85,
+        }, options);
+        return { root, options };
+    }
+
+    function resetMarkmap(m, el) {
+        const { minX, maxX, minY, maxY } = m.state;
+        const height = el.clientWidth * (maxX - minX) / (maxY - minY);
+        el.style.height = height + "px";
+        m.fit();
+    }
+
+    function renderMarkmap(el) {
+        let svg = el.querySelector('svg');
+        if (svg) return;
+        const content = el.textContent;
+        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);
+            resetMarkmap(m, el);
+        });
+    }
+
+    function updateMarkmaps() {
         const markmaps = document.getElementsByClassName('mkdocs-markmap');
-        var el, content, svg, root, m;
         for (var i = 0; i < markmaps.length; i++) {
-            el = markmaps[i];
-            svg = el.querySelector('svg');
-            if (svg) continue;
-            content = el.textContent;
-            el.innerHTML = '<svg>';
-            svg = el.firstChild;
-            root = markmap_transformer.transform(content).root;
-            m = markmap.Markmap.create(svg, null, root);
-
-            (function(obj, e, r) {
-                obj.rescale(1).then(function() {
-                    e.parentElement.style.height = (e.getBBox().height + 10) + "px";
-                    requestAnimationFrame(() => { obj.fit(); })
-                });
-            })(m, svg, root);
+            const el = markmaps[i];
+            renderMarkmap(el);
         }
     }
 
-    var MutationObserver = window.MutationObserver || window.WebKitMutationObserver;
-    var observer = new MutationObserver(function(mutations) {
-        update_markmaps();
-    });
+    loading.then(() => {
+        var MutationObserver = window.MutationObserver || window.WebKitMutationObserver;
+        var observer = new MutationObserver(function(mutations) {
+            updateMarkmaps();
+        });
 
-    var target = document.getElementById('mkdocs-decrypted-content');
-    if (undefined != target) {
-        observer.observe(target, { childList: true });
-    }
+        var target = document.getElementById('mkdocs-decrypted-content');
+        if (undefined != target) {
+            observer.observe(target, { childList: true });
+        }
 
-    update_markmaps();
+        updateMarkmaps();
+    });
 })();