markmap-view 0.18.3 → 0.18.4-alpha.3

package/dist/browser/index.js

@@ -1001,7 +1001,8 @@
       this.revokers.push(
         refreshHook.tap(() => {
           this.setData();
-        })
+        }),
+        () => this.observer.disconnect()
       );
     }
     getStyleContent() {
@@ -1144,18 +1145,43 @@
     }
     async renderData(originData) {
       const { paddingX, autoFit, color, maxWidth } = this.options;
-      if (!this.state.data) return;
+      const rootNode = this.state.data;
+      if (!rootNode) return;
+      const nodeMap = {};
+      const parentMap = {};
       const nodes = [];
-      walkTree(this.state.data, (item, next) => {
+      walkTree(rootNode, (item, next, parent) => {
         var _a;
         if (!((_a = item.payload) == null ? void 0 : _a.fold)) next();
+        nodeMap[item.state.id] = item;
+        if (parent) parentMap[item.state.id] = parent.state.id;
         nodes.push(item);
       });
-      const origin = originData || this.state.data;
-      const originRect = origin.state.rect;
-      const mmG = this.g.selectAll(childSelector("g")).data(nodes, (d) => d.state.key);
-      const mmGEnter = mmG.enter().append("g").attr("data-depth", (d) => d.state.depth).attr("data-path", (d) => d.state.path);
-      const mmGExit = mmG.exit();
+      const originMap = {};
+      const sourceRectMap = {};
+      const setOriginNode = (originNode) => {
+        if (!originNode || originMap[originNode.state.id]) return;
+        walkTree(originNode, (item, next) => {
+          originMap[item.state.id] = originNode.state.id;
+          next();
+        });
+      };
+      const getOriginSourceRect = (node) => {
+        const rect = sourceRectMap[originMap[node.state.id]];
+        return rect || rootNode.state.rect;
+      };
+      const getOriginTargetRect = (node) => (nodeMap[originMap[node.state.id]] || rootNode).state.rect;
+      sourceRectMap[rootNode.state.id] = rootNode.state.rect;
+      if (originData) setOriginNode(originData);
+      const mmG = this.g.selectAll(childSelector("g")).each((d) => {
+        sourceRectMap[d.state.id] = d.state.rect;
+      }).data(nodes, (d) => d.state.key);
+      const mmGEnter = mmG.enter().append("g").attr("data-depth", (d) => d.state.depth).attr("data-path", (d) => d.state.path).each((d) => {
+        setOriginNode(nodeMap[parentMap[d.state.id]]);
+      });
+      const mmGExit = mmG.exit().each((d) => {
+        setOriginNode(nodeMap[parentMap[d.state.id]]);
+      });
       const mmGMerge = mmG.merge(mmGEnter).attr(
         "class",
         (d) => {
@@ -1213,11 +1239,14 @@
       );
       const mmPath = this.g.selectAll(childSelector("path")).data(links, (d) => d.target.state.key);
       const mmPathExit = mmPath.exit();
-      const pathOrigin = [
-        originRect.x + originRect.width,
-        originRect.y + originRect.height
-      ];
-      const mmPathEnter = mmPath.enter().insert("path", "g").attr("class", "markmap-link").attr("data-depth", (d) => d.target.state.depth).attr("data-path", (d) => d.target.state.path).attr("d", linkShape({ source: pathOrigin, target: pathOrigin })).attr("stroke-width", 0);
+      const mmPathEnter = mmPath.enter().insert("path", "g").attr("class", "markmap-link").attr("data-depth", (d) => d.target.state.depth).attr("data-path", (d) => d.target.state.path).attr("d", (d) => {
+        const originRect = getOriginSourceRect(d.target);
+        const pathOrigin = [
+          originRect.x + originRect.width,
+          originRect.y + originRect.height
+        ];
+        return linkShape({ source: pathOrigin, target: pathOrigin });
+      }).attr("stroke-width", 0);
       const mmPathMerge = mmPathEnter.merge(mmPath);
       this.svg.style(
         "--markmap-max-width",
@@ -1225,12 +1254,12 @@
       );
       await new Promise(requestAnimationFrame);
       this._relayout();
-      const targetRect = origin.state.rect;
-      mmGEnter.attr(
-        "transform",
-        (d) => `translate(${originRect.x + originRect.width - d.state.rect.width},${originRect.y + originRect.height - d.state.rect.height})`
-      );
+      mmGEnter.attr("transform", (d) => {
+        const originRect = getOriginSourceRect(d);
+        return `translate(${originRect.x + originRect.width - d.state.rect.width},${originRect.y + originRect.height - d.state.rect.height})`;
+      });
       this.transition(mmGExit).attr("transform", (d) => {
+        const targetRect = getOriginTargetRect(d);
         const targetX = targetRect.x + targetRect.width - d.state.rect.width;
         const targetY = targetRect.y + targetRect.height - d.state.rect.height;
         return `translate(${targetX},${targetY})`;
@@ -1255,11 +1284,14 @@
       this.transition(mmFoExit).style("opacity", 0);
       mmFoMerge.attr("width", (d) => Math.max(0, d.state.rect.width - paddingX * 2)).attr("height", (d) => d.state.rect.height);
       this.transition(mmFoMerge).style("opacity", 1);
-      const pathTarget = [
-        targetRect.x + targetRect.width,
-        targetRect.y + targetRect.height
-      ];
-      this.transition(mmPathExit).attr("d", linkShape({ source: pathTarget, target: pathTarget })).attr("stroke-width", 0).remove();
+      this.transition(mmPathExit).attr("d", (d) => {
+        const targetRect = getOriginTargetRect(d.target);
+        const pathTarget = [
+          targetRect.x + targetRect.width,
+          targetRect.y + targetRect.height
+        ];
+        return linkShape({ source: pathTarget, target: pathTarget });
+      }).attr("stroke-width", 0).remove();
       this.transition(mmPathMerge).attr("stroke", (d) => color(d.target)).attr("stroke-width", (d) => linkWidth(d.target)).attr("d", (d) => {
         const origSource = d.source;
         const origTarget = d.target;

package/dist/index.js

@@ -1,11 +1,11 @@
-import { Hook as it, getId as ot, debounce as at, addClass as lt, walkTree as j, childSelector as y, noop as C } from "markmap-common";
-import { loadCSS as me, loadJS as ge } from "markmap-common";
-import { scaleOrdinal as W, schemeCategory10 as ct, linkHorizontal as ht, zoomTransform as w, select as dt, zoom as pt, min as H, max as N, zoomIdentity as ut, minIndex as mt } from "d3";
-const I = typeof navigator < "u" && navigator.userAgent.includes("Macintosh"), gt = W(ct), K = {
+import { Hook as at, getId as lt, debounce as ct, addClass as ht, walkTree as C, childSelector as v, noop as w } from "markmap-common";
+import { loadCSS as xe, loadJS as ye } from "markmap-common";
+import { scaleOrdinal as G, schemeCategory10 as dt, linkHorizontal as pt, zoomTransform as S, select as ut, zoom as mt, min as P, max as W, zoomIdentity as gt, minIndex as ft } from "d3";
+const V = typeof navigator < "u" && navigator.userAgent.includes("Macintosh"), xt = G(dt), U = {
   autoFit: !1,
   color: (e) => {
     var t;
-    return gt(`${((t = e.state) == null ? void 0 : t.path) || ""}`);
+    return xt(`${((t = e.state) == null ? void 0 : t.path) || ""}`);
   },
   duration: 500,
   embedGlobalCSS: !0,
@@ -14,7 +14,7 @@ const I = typeof navigator < "u" && navigator.userAgent.includes("Macintosh"), g
   maxWidth: 0,
   nodeMinHeight: 16,
   paddingX: 8,
-  scrollForPan: I,
+  scrollForPan: V,
   spacingHorizontal: 80,
   spacingVertical: 5,
   initialExpandLevel: -1,
@@ -22,24 +22,24 @@ const I = typeof navigator < "u" && navigator.userAgent.includes("Macintosh"), g
   pan: !0,
   toggleRecursively: !1
 };
-function he(e) {
-  const t = {}, s = { ...e }, { color: n, colorFreezeLevel: i } = s;
+function ue(e) {
+  const t = {}, s = { ...e }, { color: n, colorFreezeLevel: o } = s;
   if ((n == null ? void 0 : n.length) === 1) {
     const r = n[0];
     t.color = () => r;
   } else if (n != null && n.length) {
-    const r = W(n);
-    t.color = (l) => r(`${l.state.path}`);
+    const r = G(n);
+    t.color = (c) => r(`${c.state.path}`);
   }
-  if (i) {
-    const r = t.color || K.color;
-    t.color = (l) => (l = {
-      ...l,
+  if (o) {
+    const r = t.color || U.color;
+    t.color = (c) => (c = {
+      ...c,
       state: {
-        ...l.state,
-        path: l.state.path.split(".").slice(0, i).join(".")
+        ...c.state,
+        path: c.state.path.split(".").slice(0, o).join(".")
       }
-    }, r(l));
+    }, r(c));
   }
   return [
     "duration",
@@ -52,185 +52,185 @@ function he(e) {
     "spacingHorizontal",
     "spacingVertical"
   ].forEach((r) => {
-    const l = s[r];
-    typeof l == "number" && (t[r] = l);
+    const c = s[r];
+    typeof c == "number" && (t[r] = c);
   }), ["zoom", "pan"].forEach((r) => {
-    const l = s[r];
-    l != null && (t[r] = !!l);
+    const c = s[r];
+    c != null && (t[r] = !!c);
   }), t;
 }
-function ft(e) {
+function yt(e) {
   let t = 0;
   for (let s = 0; s < e.length; s++)
     t = (t << 5) - t + e.charCodeAt(s) | 0;
   return (t >>> 0).toString(36);
 }
-function xt(e) {
+function kt(e) {
   var t = 0, s = e.children, n = s && s.length;
   if (!n) t = 1;
   else for (; --n >= 0; ) t += s[n].value;
   e.value = t;
 }
-function yt() {
-  return this.eachAfter(xt);
+function vt() {
+  return this.eachAfter(kt);
 }
-function kt(e) {
-  var t = this, s, n = [t], i, a, c;
+function bt(e) {
+  var t = this, s, n = [t], o, a, l;
   do
     for (s = n.reverse(), n = []; t = s.pop(); )
-      if (e(t), i = t.children, i) for (a = 0, c = i.length; a < c; ++a)
-        n.push(i[a]);
+      if (e(t), o = t.children, o) for (a = 0, l = o.length; a < l; ++a)
+        n.push(o[a]);
   while (n.length);
   return this;
 }
-function vt(e) {
-  for (var t = this, s = [t], n, i; t = s.pop(); )
-    if (e(t), n = t.children, n) for (i = n.length - 1; i >= 0; --i)
-      s.push(n[i]);
+function zt(e) {
+  for (var t = this, s = [t], n, o; t = s.pop(); )
+    if (e(t), n = t.children, n) for (o = n.length - 1; o >= 0; --o)
+      s.push(n[o]);
   return this;
 }
-function bt(e) {
-  for (var t = this, s = [t], n = [], i, a, c; t = s.pop(); )
-    if (n.push(t), i = t.children, i) for (a = 0, c = i.length; a < c; ++a)
-      s.push(i[a]);
+function Et(e) {
+  for (var t = this, s = [t], n = [], o, a, l; t = s.pop(); )
+    if (n.push(t), o = t.children, o) for (a = 0, l = o.length; a < l; ++a)
+      s.push(o[a]);
   for (; t = n.pop(); )
     e(t);
   return this;
 }
-function zt(e) {
+function Ct(e) {
   return this.eachAfter(function(t) {
-    for (var s = +e(t.data) || 0, n = t.children, i = n && n.length; --i >= 0; ) s += n[i].value;
+    for (var s = +e(t.data) || 0, n = t.children, o = n && n.length; --o >= 0; ) s += n[o].value;
     t.value = s;
   });
 }
-function Et(e) {
+function wt(e) {
   return this.eachBefore(function(t) {
     t.children && t.children.sort(e);
   });
 }
-function Ct(e) {
-  for (var t = this, s = wt(t, e), n = [t]; t !== s; )
+function St(e) {
+  for (var t = this, s = Rt(t, e), n = [t]; t !== s; )
     t = t.parent, n.push(t);
-  for (var i = n.length; e !== s; )
-    n.splice(i, 0, e), e = e.parent;
+  for (var o = n.length; e !== s; )
+    n.splice(o, 0, e), e = e.parent;
   return n;
 }
-function wt(e, t) {
+function Rt(e, t) {
   if (e === t) return e;
-  var s = e.ancestors(), n = t.ancestors(), i = null;
+  var s = e.ancestors(), n = t.ancestors(), o = null;
   for (e = s.pop(), t = n.pop(); e === t; )
-    i = e, e = s.pop(), t = n.pop();
-  return i;
+    o = e, e = s.pop(), t = n.pop();
+  return o;
 }
-function St() {
+function Xt() {
   for (var e = this, t = [e]; e = e.parent; )
     t.push(e);
   return t;
 }
-function Xt() {
+function Mt() {
   var e = [];
   return this.each(function(t) {
     e.push(t);
   }), e;
 }
-function Rt() {
+function jt() {
   var e = [];
   return this.eachBefore(function(t) {
     t.children || e.push(t);
   }), e;
 }
-function jt() {
+function Ot() {
   var e = this, t = [];
   return e.each(function(s) {
     s !== e && t.push({ source: s.parent, target: s });
   }), t;
 }
-function A(e, t) {
-  var s = new S(e), n = +e.value && (s.value = e.value), i, a = [s], c, r, l, d;
-  for (t == null && (t = Bt); i = a.pop(); )
-    if (n && (i.value = +i.data.value), (r = t(i.data)) && (d = r.length))
-      for (i.children = new Array(d), l = d - 1; l >= 0; --l)
-        a.push(c = i.children[l] = new S(r[l])), c.parent = i, c.depth = i.depth + 1;
-  return s.eachBefore(Ot);
+function B(e, t) {
+  var s = new R(e), n = +e.value && (s.value = e.value), o, a = [s], l, r, c, p;
+  for (t == null && (t = At); o = a.pop(); )
+    if (n && (o.value = +o.data.value), (r = t(o.data)) && (p = r.length))
+      for (o.children = new Array(p), c = p - 1; c >= 0; --c)
+        a.push(l = o.children[c] = new R(r[c])), l.parent = o, l.depth = o.depth + 1;
+  return s.eachBefore(Ft);
 }
-function Mt() {
-  return A(this).eachBefore(At);
+function Bt() {
+  return B(this).eachBefore($t);
 }
-function Bt(e) {
+function At(e) {
   return e.children;
 }
-function At(e) {
+function $t(e) {
   e.data = e.data.data;
 }
-function Ot(e) {
+function Ft(e) {
   var t = 0;
   do
     e.height = t;
   while ((e = e.parent) && e.height < ++t);
 }
-function S(e) {
+function R(e) {
   this.data = e, this.depth = this.height = 0, this.parent = null;
 }
-S.prototype = A.prototype = {
-  constructor: S,
-  count: yt,
-  each: kt,
-  eachAfter: bt,
-  eachBefore: vt,
-  sum: zt,
-  sort: Et,
-  path: Ct,
-  ancestors: St,
-  descendants: Xt,
-  leaves: Rt,
-  links: jt,
-  copy: Mt
+R.prototype = B.prototype = {
+  constructor: R,
+  count: vt,
+  each: bt,
+  eachAfter: Et,
+  eachBefore: zt,
+  sum: Ct,
+  sort: wt,
+  path: St,
+  ancestors: Xt,
+  descendants: Mt,
+  leaves: jt,
+  links: Ot,
+  copy: Bt
 };
-const $t = "d3-flextree", Dt = "2.1.2", Ft = "build/d3-flextree.js", Tt = "index", _t = { name: "Chris Maloney", url: "http://chrismaloney.org" }, Ht = "Flexible tree layout algorithm that allows for variable node sizes.", Nt = ["d3", "d3-module", "layout", "tree", "hierarchy", "d3-hierarchy", "plugin", "d3-plugin", "infovis", "visualization", "2d"], Lt = "https://github.com/klortho/d3-flextree", Pt = "WTFPL", Wt = { type: "git", url: "https://github.com/klortho/d3-flextree.git" }, It = { clean: "rm -rf build demo test", "build:demo": "rollup -c --environment BUILD:demo", "build:dev": "rollup -c --environment BUILD:dev", "build:prod": "rollup -c --environment BUILD:prod", "build:test": "rollup -c --environment BUILD:test", build: "rollup -c", lint: "eslint index.js src", "test:main": "node test/bundle.js", "test:browser": "node test/browser-tests.js", test: "npm-run-all test:*", prepare: "npm-run-all clean build lint test" }, Kt = { "d3-hierarchy": "^1.1.5" }, Gt = { "babel-plugin-external-helpers": "^6.22.0", "babel-preset-es2015-rollup": "^3.0.0", d3: "^4.13.0", "d3-selection-multi": "^1.0.1", eslint: "^4.19.1", jsdom: "^11.6.2", "npm-run-all": "^4.1.2", rollup: "^0.55.3", "rollup-plugin-babel": "^2.7.1", "rollup-plugin-commonjs": "^8.0.2", "rollup-plugin-copy": "^0.2.3", "rollup-plugin-json": "^2.3.0", "rollup-plugin-node-resolve": "^3.0.2", "rollup-plugin-uglify": "^3.0.0", "uglify-es": "^3.3.9" }, Vt = {
-  name: $t,
+const Tt = "d3-flextree", Dt = "2.1.2", _t = "build/d3-flextree.js", Ht = "index", Nt = { name: "Chris Maloney", url: "http://chrismaloney.org" }, Lt = "Flexible tree layout algorithm that allows for variable node sizes.", Pt = ["d3", "d3-module", "layout", "tree", "hierarchy", "d3-hierarchy", "plugin", "d3-plugin", "infovis", "visualization", "2d"], Wt = "https://github.com/klortho/d3-flextree", It = "WTFPL", Kt = { type: "git", url: "https://github.com/klortho/d3-flextree.git" }, Gt = { clean: "rm -rf build demo test", "build:demo": "rollup -c --environment BUILD:demo", "build:dev": "rollup -c --environment BUILD:dev", "build:prod": "rollup -c --environment BUILD:prod", "build:test": "rollup -c --environment BUILD:test", build: "rollup -c", lint: "eslint index.js src", "test:main": "node test/bundle.js", "test:browser": "node test/browser-tests.js", test: "npm-run-all test:*", prepare: "npm-run-all clean build lint test" }, Vt = { "d3-hierarchy": "^1.1.5" }, Ut = { "babel-plugin-external-helpers": "^6.22.0", "babel-preset-es2015-rollup": "^3.0.0", d3: "^4.13.0", "d3-selection-multi": "^1.0.1", eslint: "^4.19.1", jsdom: "^11.6.2", "npm-run-all": "^4.1.2", rollup: "^0.55.3", "rollup-plugin-babel": "^2.7.1", "rollup-plugin-commonjs": "^8.0.2", "rollup-plugin-copy": "^0.2.3", "rollup-plugin-json": "^2.3.0", "rollup-plugin-node-resolve": "^3.0.2", "rollup-plugin-uglify": "^3.0.0", "uglify-es": "^3.3.9" }, Yt = {
+  name: Tt,
   version: Dt,
-  main: Ft,
-  module: Tt,
+  main: _t,
+  module: Ht,
   "jsnext:main": "index",
-  author: _t,
-  description: Ht,
-  keywords: Nt,
-  homepage: Lt,
-  license: Pt,
-  repository: Wt,
-  scripts: It,
-  dependencies: Kt,
-  devDependencies: Gt
-}, { version: Ut } = Vt, Yt = Object.freeze({
+  author: Nt,
+  description: Lt,
+  keywords: Pt,
+  homepage: Wt,
+  license: It,
+  repository: Kt,
+  scripts: Gt,
+  dependencies: Vt,
+  devDependencies: Ut
+}, { version: Zt } = Yt, qt = Object.freeze({
   children: (e) => e.children,
   nodeSize: (e) => e.data.size,
   spacing: 0
 });
-function V(e) {
-  const t = Object.assign({}, Yt, e);
+function Z(e) {
+  const t = Object.assign({}, qt, e);
   function s(r) {
-    const l = t[r];
-    return typeof l == "function" ? l : () => l;
+    const c = t[r];
+    return typeof c == "function" ? c : () => c;
   }
   function n(r) {
-    const l = c(a(), r, (d) => d.children);
-    return l.update(), l.data;
+    const c = l(a(), r, (p) => p.children);
+    return c.update(), c.data;
   }
-  function i() {
-    const r = s("nodeSize"), l = s("spacing");
-    return class G extends A.prototype.constructor {
+  function o() {
+    const r = s("nodeSize"), c = s("spacing");
+    return class Y extends B.prototype.constructor {
       constructor(h) {
         super(h);
       }
       copy() {
-        const h = c(this.constructor, this, (p) => p.children);
-        return h.each((p) => p.data = p.data.data), h;
+        const h = l(this.constructor, this, (u) => u.children);
+        return h.each((u) => u.data = u.data.data), h;
       }
       get size() {
         return r(this);
       }
       spacing(h) {
-        return l(this, h);
+        return c(this, h);
       }
       get nodes() {
         return this.descendants();
@@ -274,7 +274,7 @@ function V(e) {
       }
       get extents() {
         return (this.children || []).reduce(
-          (h, p) => G.maxExtents(h, p.extents),
+          (h, u) => Y.maxExtents(h, u.extents),
           this.nodeExtents
         );
       }
@@ -286,18 +286,18 @@ function V(e) {
           right: this.right
         };
       }
-      static maxExtents(h, p) {
+      static maxExtents(h, u) {
         return {
-          top: Math.min(h.top, p.top),
-          bottom: Math.max(h.bottom, p.bottom),
-          left: Math.min(h.left, p.left),
-          right: Math.max(h.right, p.right)
+          top: Math.min(h.top, u.top),
+          bottom: Math.max(h.bottom, u.bottom),
+          left: Math.min(h.left, u.left),
+          right: Math.max(h.right, u.right)
         };
       }
     };
   }
   function a() {
-    const r = i(), l = s("nodeSize"), d = s("spacing");
+    const r = o(), c = s("nodeSize"), p = s("spacing");
     return class extends r {
       constructor(h) {
         super(h), Object.assign(this, {
@@ -316,10 +316,10 @@ function V(e) {
         });
       }
       get size() {
-        return l(this.data);
+        return c(this.data);
       }
       spacing(h) {
-        return d(this.data, h.data);
+        return p(this.data, h.data);
       }
       get x() {
         return this.data.x;
@@ -334,29 +334,29 @@ function V(e) {
         this.data.y = h;
       }
       update() {
-        return U(this), Y(this), this;
+        return q(this), J(this), this;
       }
     };
   }
-  function c(r, l, d) {
-    const h = (p, u) => {
-      const g = new r(p);
+  function l(r, c, p) {
+    const h = (u, m) => {
+      const g = new r(u);
       Object.assign(g, {
-        parent: u,
-        depth: u === null ? 0 : u.depth + 1,
+        parent: m,
+        depth: m === null ? 0 : m.depth + 1,
         height: 0,
         length: 1
       });
-      const f = d(p) || [];
-      return g.children = f.length === 0 ? null : f.map((x) => h(x, g)), g.children && Object.assign(g, g.children.reduce(
-        (x, k) => ({
-          height: Math.max(x.height, k.height + 1),
-          length: x.length + k.length
+      const y = p(u) || [];
+      return g.children = y.length === 0 ? null : y.map((x) => h(x, g)), g.children && Object.assign(g, g.children.reduce(
+        (x, b) => ({
+          height: Math.max(x.height, b.height + 1),
+          length: x.length + b.length
         }),
         g
       )), g;
     };
-    return h(l, null);
+    return h(c, null);
   }
   return Object.assign(n, {
     nodeSize(r) {
@@ -368,67 +368,67 @@ function V(e) {
     children(r) {
       return arguments.length ? (t.children = r, n) : t.children;
     },
-    hierarchy(r, l) {
-      const d = typeof l > "u" ? t.children : l;
-      return c(i(), r, d);
+    hierarchy(r, c) {
+      const p = typeof c > "u" ? t.children : c;
+      return l(o(), r, p);
     },
     dump(r) {
-      const l = s("nodeSize"), d = (h) => (p) => {
-        const u = h + "  ", g = h + "    ", { x: f, y: x } = p, k = l(p), b = p.children || [], E = b.length === 0 ? " " : `,${u}children: [${g}${b.map(d(g)).join(g)}${u}],${h}`;
-        return `{ size: [${k.join(", ")}],${u}x: ${f}, y: ${x}${E}},`;
+      const c = s("nodeSize"), p = (h) => (u) => {
+        const m = h + "  ", g = h + "    ", { x: y, y: x } = u, b = c(u), k = u.children || [], z = k.length === 0 ? " " : `,${m}children: [${g}${k.map(p(g)).join(g)}${m}],${h}`;
+        return `{ size: [${b.join(", ")}],${m}x: ${y}, y: ${x}${z}},`;
       };
-      return d(`
+      return p(`
 `)(r);
     }
   }), n;
 }
-V.version = Ut;
-const U = (e, t = 0) => (e.y = t, (e.children || []).reduce((s, n) => {
-  const [i, a] = s;
-  U(n, e.y + e.ySize);
-  const c = (i === 0 ? n.lExt : n.rExt).bottom;
-  i !== 0 && qt(e, i, a);
-  const r = ie(c, i, a);
-  return [i + 1, r];
-}, [0, null]), Zt(e), se(e), e), Y = (e, t, s) => {
+Z.version = Zt;
+const q = (e, t = 0) => (e.y = t, (e.children || []).reduce((s, n) => {
+  const [o, a] = s;
+  q(n, e.y + e.ySize);
+  const l = (o === 0 ? n.lExt : n.rExt).bottom;
+  o !== 0 && Qt(e, o, a);
+  const r = ae(l, o, a);
+  return [o + 1, r];
+}, [0, null]), Jt(e), oe(e), e), J = (e, t, s) => {
   typeof t > "u" && (t = -e.relX - e.prelim, s = 0);
   const n = t + e.relX;
-  return e.relX = n + e.prelim - s, e.prelim = 0, e.x = s + e.relX, (e.children || []).forEach((i) => Y(i, n, e.x)), e;
-}, Zt = (e) => {
+  return e.relX = n + e.prelim - s, e.prelim = 0, e.x = s + e.relX, (e.children || []).forEach((o) => J(o, n, e.x)), e;
+}, Jt = (e) => {
   (e.children || []).reduce((t, s) => {
-    const [n, i] = t, a = n + s.shift, c = i + a + s.change;
-    return s.relX += c, [a, c];
+    const [n, o] = t, a = n + s.shift, l = o + a + s.change;
+    return s.relX += l, [a, l];
   }, [0, 0]);
-}, qt = (e, t, s) => {
-  const n = e.children[t - 1], i = e.children[t];
-  let a = n, c = n.relX, r = i, l = i.relX, d = !0;
+}, Qt = (e, t, s) => {
+  const n = e.children[t - 1], o = e.children[t];
+  let a = n, l = n.relX, r = o, c = o.relX, p = !0;
   for (; a && r; ) {
     a.bottom > s.lowY && (s = s.next);
-    const h = c + a.prelim - (l + r.prelim) + a.xSize / 2 + r.xSize / 2 + a.spacing(r);
-    (h > 0 || h < 0 && d) && (l += h, Jt(i, h), Qt(e, t, s.index, h)), d = !1;
-    const p = a.bottom, u = r.bottom;
-    p <= u && (a = ee(a), a && (c += a.relX)), p >= u && (r = te(r), r && (l += r.relX));
+    const h = l + a.prelim - (c + r.prelim) + a.xSize / 2 + r.xSize / 2 + a.spacing(r);
+    (h > 0 || h < 0 && p) && (c += h, te(o, h), ee(e, t, s.index, h)), p = !1;
+    const u = a.bottom, m = r.bottom;
+    u <= m && (a = ne(a), a && (l += a.relX)), u >= m && (r = re(r), r && (c += r.relX));
   }
-  !a && r ? ne(e, t, r, l) : a && !r && re(e, t, a, c);
-}, Jt = (e, t) => {
+  !a && r ? se(e, t, r, c) : a && !r && ie(e, t, a, l);
+}, te = (e, t) => {
   e.relX += t, e.lExtRelX += t, e.rExtRelX += t;
-}, Qt = (e, t, s, n) => {
-  const i = e.children[t], a = t - s;
+}, ee = (e, t, s, n) => {
+  const o = e.children[t], a = t - s;
   if (a > 1) {
-    const c = n / a;
-    e.children[s + 1].shift += c, i.shift -= c, i.change -= n - c;
+    const l = n / a;
+    e.children[s + 1].shift += l, o.shift -= l, o.change -= n - l;
   }
-}, te = (e) => e.hasChildren ? e.firstChild : e.lThr, ee = (e) => e.hasChildren ? e.lastChild : e.rThr, ne = (e, t, s, n) => {
-  const i = e.firstChild, a = i.lExt, c = e.children[t];
+}, re = (e) => e.hasChildren ? e.firstChild : e.lThr, ne = (e) => e.hasChildren ? e.lastChild : e.rThr, se = (e, t, s, n) => {
+  const o = e.firstChild, a = o.lExt, l = e.children[t];
   a.lThr = s;
-  const r = n - s.relX - i.lExtRelX;
-  a.relX += r, a.prelim -= r, i.lExt = c.lExt, i.lExtRelX = c.lExtRelX;
-}, re = (e, t, s, n) => {
-  const i = e.children[t], a = i.rExt, c = e.children[t - 1];
+  const r = n - s.relX - o.lExtRelX;
+  a.relX += r, a.prelim -= r, o.lExt = l.lExt, o.lExtRelX = l.lExtRelX;
+}, ie = (e, t, s, n) => {
+  const o = e.children[t], a = o.rExt, l = e.children[t - 1];
   a.rThr = s;
-  const r = n - s.relX - i.rExtRelX;
-  a.relX += r, a.prelim -= r, i.rExt = c.rExt, i.rExtRelX = c.rExtRelX;
-}, se = (e) => {
+  const r = n - s.relX - o.rExtRelX;
+  a.relX += r, a.prelim -= r, o.rExt = l.rExt, o.rExtRelX = l.rExtRelX;
+}, oe = (e) => {
   if (e.hasChildren) {
     const t = e.firstChild, s = e.lastChild, n = (t.prelim + t.relX - t.xSize / 2 + s.relX + s.prelim + s.xSize / 2) / 2;
     Object.assign(e, {
@@ -439,7 +439,7 @@ const U = (e, t = 0) => (e.y = t, (e.children || []).reduce((s, n) => {
       rExtRelX: s.rExtRelX
     });
   }
-}, ie = (e, t, s) => {
+}, ae = (e, t, s) => {
   for (; s !== null && e >= s.lowY; )
     s = s.next;
   return {
@@ -447,65 +447,66 @@ const U = (e, t = 0) => (e.y = t, (e.children || []).reduce((s, n) => {
     index: t,
     next: s
   };
-}, Z = ".markmap{--markmap-max-width: 9999px;--markmap-a-color: #0097e6;--markmap-a-hover-color: #00a8ff;--markmap-code-bg: #f0f0f0;--markmap-code-color: #555;--markmap-highlight-bg: #ffeaa7;--markmap-table-border: 1px solid currentColor;--markmap-font: 300 16px/20px sans-serif;--markmap-circle-open-bg: #fff;--markmap-text-color: #333;font:var(--markmap-font);color:var(--markmap-text-color)}.markmap-link{fill:none}.markmap-node>circle{cursor:pointer}.markmap-foreign{display:inline-block}.markmap-foreign p{margin:0}.markmap-foreign a{color:var(--markmap-a-color)}.markmap-foreign a:hover{color:var(--markmap-a-hover-color)}.markmap-foreign code{padding:.25em;font-size:calc(1em - 2px);color:var(--markmap-code-color);background-color:var(--markmap-code-bg);border-radius:2px}.markmap-foreign pre{margin:0}.markmap-foreign pre>code{display:block}.markmap-foreign del{text-decoration:line-through}.markmap-foreign em{font-style:italic}.markmap-foreign strong{font-weight:700}.markmap-foreign mark{background:var(--markmap-highlight-bg)}.markmap-foreign table,.markmap-foreign th,.markmap-foreign td{border-collapse:collapse;border:var(--markmap-table-border)}.markmap-foreign img{display:inline-block}.markmap-foreign svg{fill:currentColor}.markmap-foreign>div{width:var(--markmap-max-width);text-align:left}.markmap-foreign>div>div{display:inline-block}.markmap-dark .markmap{--markmap-code-bg: #1a1b26;--markmap-code-color: #ddd;--markmap-circle-open-bg: #444;--markmap-text-color: #eee}", de = Z, M = ht();
-function L(e) {
+}, Q = ".markmap{--markmap-max-width: 9999px;--markmap-a-color: #0097e6;--markmap-a-hover-color: #00a8ff;--markmap-code-bg: #f0f0f0;--markmap-code-color: #555;--markmap-highlight-bg: #ffeaa7;--markmap-table-border: 1px solid currentColor;--markmap-font: 300 16px/20px sans-serif;--markmap-circle-open-bg: #fff;--markmap-text-color: #333;font:var(--markmap-font);color:var(--markmap-text-color)}.markmap-link{fill:none}.markmap-node>circle{cursor:pointer}.markmap-foreign{display:inline-block}.markmap-foreign p{margin:0}.markmap-foreign a{color:var(--markmap-a-color)}.markmap-foreign a:hover{color:var(--markmap-a-hover-color)}.markmap-foreign code{padding:.25em;font-size:calc(1em - 2px);color:var(--markmap-code-color);background-color:var(--markmap-code-bg);border-radius:2px}.markmap-foreign pre{margin:0}.markmap-foreign pre>code{display:block}.markmap-foreign del{text-decoration:line-through}.markmap-foreign em{font-style:italic}.markmap-foreign strong{font-weight:700}.markmap-foreign mark{background:var(--markmap-highlight-bg)}.markmap-foreign table,.markmap-foreign th,.markmap-foreign td{border-collapse:collapse;border:var(--markmap-table-border)}.markmap-foreign img{display:inline-block}.markmap-foreign svg{fill:currentColor}.markmap-foreign>div{width:var(--markmap-max-width);text-align:left}.markmap-foreign>div>div{display:inline-block}.markmap-dark .markmap{--markmap-code-bg: #1a1b26;--markmap-code-color: #ddd;--markmap-circle-open-bg: #444;--markmap-text-color: #eee}", me = Q, j = pt();
+function I(e) {
   return Math.max(4 - 2 * e.state.depth, 1.5);
 }
-function P(e, t) {
-  const s = mt(e, t);
+function K(e, t) {
+  const s = ft(e, t);
   return e[s];
 }
-function B(e) {
+function O(e) {
   e.stopPropagation();
 }
-const oe = new it();
-class q {
+const le = new at();
+class tt {
   constructor(t, s) {
-    this.options = K, this.revokers = [], this.handleZoom = (n) => {
-      const { transform: i } = n;
-      this.g.attr("transform", i);
+    this.options = U, this.revokers = [], this.handleZoom = (n) => {
+      const { transform: o } = n;
+      this.g.attr("transform", o);
     }, this.handlePan = (n) => {
       n.preventDefault();
-      const i = w(this.svg.node()), a = i.translate(
-        -n.deltaX / i.k,
-        -n.deltaY / i.k
+      const o = S(this.svg.node()), a = o.translate(
+        -n.deltaX / o.k,
+        -n.deltaY / o.k
       );
       this.svg.call(this.zoom.transform, a);
-    }, this.handleClick = (n, i) => {
+    }, this.handleClick = (n, o) => {
       let a = this.options.toggleRecursively;
-      (I ? n.metaKey : n.ctrlKey) && (a = !a), this.toggleNode(i, a);
-    }, this.ensureView = this.ensureVisible, this.svg = t.datum ? t : dt(t), this.styleNode = this.svg.append("style"), this.zoom = pt().filter((n) => this.options.scrollForPan && n.type === "wheel" ? n.ctrlKey && !n.button : (!n.ctrlKey || n.type === "wheel") && !n.button).on("zoom", this.handleZoom), this.setOptions(s), this.state = {
-      id: this.options.id || this.svg.attr("id") || ot(),
+      (V ? n.metaKey : n.ctrlKey) && (a = !a), this.toggleNode(o, a);
+    }, this.ensureView = this.ensureVisible, this.svg = t.datum ? t : ut(t), this.styleNode = this.svg.append("style"), this.zoom = mt().filter((n) => this.options.scrollForPan && n.type === "wheel" ? n.ctrlKey && !n.button : (!n.ctrlKey || n.type === "wheel") && !n.button).on("zoom", this.handleZoom), this.setOptions(s), this.state = {
+      id: this.options.id || this.svg.attr("id") || lt(),
       rect: { x1: 0, y1: 0, x2: 0, y2: 0 }
     }, this.g = this.svg.append("g"), this.observer = new ResizeObserver(
-      at(() => {
+      ct(() => {
         this.renderData();
       }, 100)
     ), this.revokers.push(
-      oe.tap(() => {
+      le.tap(() => {
         this.setData();
-      })
+      }),
+      () => this.observer.disconnect()
     );
   }
   getStyleContent() {
     const { style: t } = this.options, { id: s } = this.state, n = typeof t == "function" ? t(s) : "";
-    return [this.options.embedGlobalCSS && Z, n].filter(Boolean).join(`
+    return [this.options.embedGlobalCSS && Q, n].filter(Boolean).join(`
 `);
   }
   updateStyle() {
     this.svg.attr(
       "class",
-      lt(this.svg.attr("class"), "markmap", this.state.id)
+      ht(this.svg.attr("class"), "markmap", this.state.id)
     );
     const t = this.getStyleContent();
     this.styleNode.text(t);
   }
   async toggleNode(t, s = !1) {
-    var i, a;
-    const n = (i = t.payload) != null && i.fold ? 0 : 1;
-    s ? j(t, (c, r) => {
-      c.payload = {
-        ...c.payload,
+    var o, a;
+    const n = (o = t.payload) != null && o.fold ? 0 : 1;
+    s ? C(t, (l, r) => {
+      l.payload = {
+        ...l.payload,
         fold: n
       }, r();
     }) : t.payload = {
@@ -515,13 +516,13 @@ class q {
   }
   _initializeData(t) {
     let s = 0;
-    const { color: n, initialExpandLevel: i } = this.options;
-    let a = 0, c = 0;
-    j(t, (r, l, d) => {
-      var p, u, g, f;
-      c += 1, r.children = (p = r.children) == null ? void 0 : p.map((x) => ({ ...x })), s += 1, r.state = {
+    const { color: n, initialExpandLevel: o } = this.options;
+    let a = 0, l = 0;
+    C(t, (r, c, p) => {
+      var u, m, g, y;
+      l += 1, r.children = (u = r.children) == null ? void 0 : u.map((x) => ({ ...x })), s += 1, r.state = {
         ...r.state,
-        depth: c,
+        depth: l,
         id: s,
         rect: {
           x: 0,
@@ -530,46 +531,46 @@ class q {
           height: 0
         },
         size: [0, 0]
-      }, r.state.key = [(u = d == null ? void 0 : d.state) == null ? void 0 : u.id, r.state.id].filter(Boolean).join(".") + ft(r.content), r.state.path = [(g = d == null ? void 0 : d.state) == null ? void 0 : g.path, r.state.id].filter(Boolean).join("."), n(r);
-      const h = ((f = r.payload) == null ? void 0 : f.fold) === 2;
-      h ? a += 1 : (a || i >= 0 && r.state.depth >= i) && (r.payload = { ...r.payload, fold: 1 }), l(), h && (a -= 1), c -= 1;
+      }, r.state.key = [(m = p == null ? void 0 : p.state) == null ? void 0 : m.id, r.state.id].filter(Boolean).join(".") + yt(r.content), r.state.path = [(g = p == null ? void 0 : p.state) == null ? void 0 : g.path, r.state.id].filter(Boolean).join("."), n(r);
+      const h = ((y = r.payload) == null ? void 0 : y.fold) === 2;
+      h ? a += 1 : (a || o >= 0 && r.state.depth >= o) && (r.payload = { ...r.payload, fold: 1 }), c(), h && (a -= 1), l -= 1;
     });
   }
   _relayout() {
     if (!this.state.data) return;
-    this.g.selectAll(y("g")).selectAll(
-      y("foreignObject")
+    this.g.selectAll(v("g")).selectAll(
+      v("foreignObject")
     ).each(function(r) {
       var h;
-      const l = (h = this.firstChild) == null ? void 0 : h.firstChild, d = [l.scrollWidth, l.scrollHeight];
-      r.state.size = d;
+      const c = (h = this.firstChild) == null ? void 0 : h.firstChild, p = [c.scrollWidth, c.scrollHeight];
+      r.state.size = p;
     });
-    const { spacingHorizontal: t, paddingX: s, spacingVertical: n } = this.options, i = V({}).children((r) => {
-      var l;
-      if (!((l = r.payload) != null && l.fold)) return r.children;
+    const { spacingHorizontal: t, paddingX: s, spacingVertical: n } = this.options, o = Z({}).children((r) => {
+      var c;
+      if (!((c = r.payload) != null && c.fold)) return r.children;
     }).nodeSize((r) => {
-      const [l, d] = r.data.state.size;
-      return [d, l + (l ? s * 2 : 0) + t];
-    }).spacing((r, l) => r.parent === l.parent ? n : n * 2), a = i.hierarchy(this.state.data);
-    i(a);
-    const c = a.descendants();
-    c.forEach((r) => {
-      const l = r.data;
-      l.state.rect = {
+      const [c, p] = r.data.state.size;
+      return [p, c + (c ? s * 2 : 0) + t];
+    }).spacing((r, c) => r.parent === c.parent ? n : n * 2), a = o.hierarchy(this.state.data);
+    o(a);
+    const l = a.descendants();
+    l.forEach((r) => {
+      const c = r.data;
+      c.state.rect = {
         x: r.y,
         y: r.x - r.xSize / 2,
         width: r.ySize - t,
         height: r.xSize
       };
     }), this.state.rect = {
-      x1: H(c, (r) => r.data.state.rect.x) || 0,
-      y1: H(c, (r) => r.data.state.rect.y) || 0,
-      x2: N(
-        c,
+      x1: P(l, (r) => r.data.state.rect.x) || 0,
+      y1: P(l, (r) => r.data.state.rect.y) || 0,
+      x2: W(
+        l,
         (r) => r.data.state.rect.x + r.data.state.rect.width
       ) || 0,
-      y2: N(
-        c,
+      y2: W(
+        l,
         (r) => r.data.state.rect.y + r.data.state.rect.height
       ) || 0
     };
@@ -584,96 +585,110 @@ class q {
     s && this.setOptions(s), t && (this.state.data = t), this.state.data && (this._initializeData(this.state.data), this.updateStyle(), await this.renderData());
   }
   async renderData(t) {
-    const { paddingX: s, autoFit: n, color: i, maxWidth: a } = this.options;
-    if (!this.state.data) return;
-    const c = [];
-    j(this.state.data, (o, m) => {
-      var v;
-      (v = o.payload) != null && v.fold || m(), c.push(o);
+    const { paddingX: s, autoFit: n, color: o, maxWidth: a } = this.options, l = this.state.data;
+    if (!l) return;
+    const r = {}, c = {}, p = [];
+    C(l, (i, d, f) => {
+      var E;
+      (E = i.payload) != null && E.fold || d(), r[i.state.id] = i, f && (c[i.state.id] = f.state.id), p.push(i);
     });
-    const r = t || this.state.data, l = r.state.rect, d = this.g.selectAll(y("g")).data(c, (o) => o.state.key), h = d.enter().append("g").attr("data-depth", (o) => o.state.depth).attr("data-path", (o) => o.state.path), p = d.exit(), u = d.merge(h).attr(
+    const h = {}, u = {}, m = (i) => {
+      !i || h[i.state.id] || C(i, (d, f) => {
+        h[d.state.id] = i.state.id, f();
+      });
+    }, g = (i) => u[h[i.state.id]] || l.state.rect, y = (i) => (r[h[i.state.id]] || l).state.rect;
+    u[l.state.id] = l.state.rect, t && m(t);
+    const x = this.g.selectAll(v("g")).each((i) => {
+      u[i.state.id] = i.state.rect;
+    }).data(p, (i) => i.state.key), b = x.enter().append("g").attr("data-depth", (i) => i.state.depth).attr("data-path", (i) => i.state.path).each((i) => {
+      m(r[c[i.state.id]]);
+    }), k = x.exit().each((i) => {
+      m(r[c[i.state.id]]);
+    }), z = x.merge(b).attr(
       "class",
-      (o) => {
-        var m;
-        return ["markmap-node", ((m = o.payload) == null ? void 0 : m.fold) && "markmap-fold"].filter(Boolean).join(" ");
-      }
-    ), g = u.selectAll(y("line")).data(
-      (o) => [o],
-      (o) => o.state.key
-    ), f = g.enter().append("line").attr("stroke", (o) => i(o)).attr("stroke-width", 0), x = g.merge(f), k = u.selectAll(y("circle")).data(
-      (o) => {
-        var m;
-        return (m = o.children) != null && m.length ? [o] : [];
+      (i) => {
+        var d;
+        return ["markmap-node", ((d = i.payload) == null ? void 0 : d.fold) && "markmap-fold"].filter(Boolean).join(" ");
+      }
+    ), A = z.selectAll(v("line")).data(
+      (i) => [i],
+      (i) => i.state.key
+    ), $ = A.enter().append("line").attr("stroke", (i) => o(i)).attr("stroke-width", 0), F = A.merge($), T = z.selectAll(v("circle")).data(
+      (i) => {
+        var d;
+        return (d = i.children) != null && d.length ? [i] : [];
       },
-      (o) => o.state.key
-    ), E = k.enter().append("circle").attr("stroke-width", 0).attr("r", 0).on("click", (o, m) => this.handleClick(o, m)).on("mousedown", B).merge(k).attr("stroke", (o) => i(o)).attr(
+      (i) => i.state.key
+    ), D = T.enter().append("circle").attr("stroke-width", 0).attr("r", 0).on("click", (i, d) => this.handleClick(i, d)).on("mousedown", O).merge(T).attr("stroke", (i) => o(i)).attr(
       "fill",
-      (o) => {
-        var m;
-        return (m = o.payload) != null && m.fold && o.children ? i(o) : "var(--markmap-circle-open-bg)";
-      }
-    ), O = this.observer, $ = u.selectAll(y("foreignObject")).data(
-      (o) => [o],
-      (o) => o.state.key
-    ), X = $.enter().append("foreignObject").attr("class", "markmap-foreign").attr("x", s).attr("y", 0).style("opacity", 0).on("mousedown", B).on("dblclick", B);
-    X.append("xhtml:div").append("xhtml:div").html((o) => o.content).attr("xmlns", "http://www.w3.org/1999/xhtml"), X.each(function() {
-      var m;
-      const o = (m = this.firstChild) == null ? void 0 : m.firstChild;
-      O.observe(o);
+      (i) => {
+        var d;
+        return (d = i.payload) != null && d.fold && i.children ? o(i) : "var(--markmap-circle-open-bg)";
+      }
+    ), _ = this.observer, H = z.selectAll(v("foreignObject")).data(
+      (i) => [i],
+      (i) => i.state.key
+    ), X = H.enter().append("foreignObject").attr("class", "markmap-foreign").attr("x", s).attr("y", 0).style("opacity", 0).on("mousedown", O).on("dblclick", O);
+    X.append("xhtml:div").append("xhtml:div").html((i) => i.content).attr("xmlns", "http://www.w3.org/1999/xhtml"), X.each(function() {
+      var d;
+      const i = (d = this.firstChild) == null ? void 0 : d.firstChild;
+      _.observe(i);
     });
-    const D = p.selectAll(
-      y("foreignObject")
+    const N = k.selectAll(
+      v("foreignObject")
     );
-    D.each(function() {
-      var m;
-      const o = (m = this.firstChild) == null ? void 0 : m.firstChild;
-      O.unobserve(o);
+    N.each(function() {
+      var d;
+      const i = (d = this.firstChild) == null ? void 0 : d.firstChild;
+      _.unobserve(i);
     });
-    const F = X.merge($), J = c.flatMap(
-      (o) => {
-        var m;
-        return (m = o.payload) != null && m.fold ? [] : o.children.map((v) => ({ source: o, target: v }));
-      }
-    ), R = this.g.selectAll(y("path")).data(J, (o) => o.target.state.key), Q = R.exit(), T = [
-      l.x + l.width,
-      l.y + l.height
-    ], tt = R.enter().insert("path", "g").attr("class", "markmap-link").attr("data-depth", (o) => o.target.state.depth).attr("data-path", (o) => o.target.state.path).attr("d", M({ source: T, target: T })).attr("stroke-width", 0).merge(R);
+    const L = X.merge(H), et = p.flatMap(
+      (i) => {
+        var d;
+        return (d = i.payload) != null && d.fold ? [] : i.children.map((f) => ({ source: i, target: f }));
+      }
+    ), M = this.g.selectAll(v("path")).data(et, (i) => i.target.state.key), rt = M.exit(), nt = M.enter().insert("path", "g").attr("class", "markmap-link").attr("data-depth", (i) => i.target.state.depth).attr("data-path", (i) => i.target.state.path).attr("d", (i) => {
+      const d = g(i.target), f = [
+        d.x + d.width,
+        d.y + d.height
+      ];
+      return j({ source: f, target: f });
+    }).attr("stroke-width", 0).merge(M);
     this.svg.style(
       "--markmap-max-width",
       a ? `${a}px` : null
-    ), await new Promise(requestAnimationFrame), this._relayout();
-    const z = r.state.rect;
-    h.attr(
+    ), await new Promise(requestAnimationFrame), this._relayout(), b.attr("transform", (i) => {
+      const d = g(i);
+      return `translate(${d.x + d.width - i.state.rect.width},${d.y + d.height - i.state.rect.height})`;
+    }), this.transition(k).attr("transform", (i) => {
+      const d = y(i), f = d.x + d.width - i.state.rect.width, E = d.y + d.height - i.state.rect.height;
+      return `translate(${f},${E})`;
+    }).remove(), this.transition(z).attr(
       "transform",
-      (o) => `translate(${l.x + l.width - o.state.rect.width},${l.y + l.height - o.state.rect.height})`
-    ), this.transition(p).attr("transform", (o) => {
-      const m = z.x + z.width - o.state.rect.width, v = z.y + z.height - o.state.rect.height;
-      return `translate(${m},${v})`;
-    }).remove(), this.transition(u).attr(
-      "transform",
-      (o) => `translate(${o.state.rect.x},${o.state.rect.y})`
+      (i) => `translate(${i.state.rect.x},${i.state.rect.y})`
     );
-    const et = p.selectAll(
-      y("line")
+    const st = k.selectAll(
+      v("line")
     );
-    this.transition(et).attr("x1", (o) => o.state.rect.width).attr("stroke-width", 0), f.attr("x1", (o) => o.state.rect.width).attr("x2", (o) => o.state.rect.width), x.attr("y1", (o) => o.state.rect.height).attr("y2", (o) => o.state.rect.height), this.transition(x).attr("x1", -1).attr("x2", (o) => o.state.rect.width + 2).attr("stroke", (o) => i(o)).attr("stroke-width", L);
-    const nt = p.selectAll(
-      y("circle")
+    this.transition(st).attr("x1", (i) => i.state.rect.width).attr("stroke-width", 0), $.attr("x1", (i) => i.state.rect.width).attr("x2", (i) => i.state.rect.width), F.attr("y1", (i) => i.state.rect.height).attr("y2", (i) => i.state.rect.height), this.transition(F).attr("x1", -1).attr("x2", (i) => i.state.rect.width + 2).attr("stroke", (i) => o(i)).attr("stroke-width", I);
+    const it = k.selectAll(
+      v("circle")
     );
-    this.transition(nt).attr("r", 0).attr("stroke-width", 0), E.attr("cx", (o) => o.state.rect.width).attr("cy", (o) => o.state.rect.height), this.transition(E).attr("r", 6).attr("stroke-width", "1.5"), this.transition(D).style("opacity", 0), F.attr("width", (o) => Math.max(0, o.state.rect.width - s * 2)).attr("height", (o) => o.state.rect.height), this.transition(F).style("opacity", 1);
-    const _ = [
-      z.x + z.width,
-      z.y + z.height
-    ];
-    this.transition(Q).attr("d", M({ source: _, target: _ })).attr("stroke-width", 0).remove(), this.transition(tt).attr("stroke", (o) => i(o.target)).attr("stroke-width", (o) => L(o.target)).attr("d", (o) => {
-      const m = o.source, v = o.target, rt = [
-        m.state.rect.x + m.state.rect.width,
-        m.state.rect.y + m.state.rect.height
-      ], st = [
-        v.state.rect.x,
-        v.state.rect.y + v.state.rect.height
+    this.transition(it).attr("r", 0).attr("stroke-width", 0), D.attr("cx", (i) => i.state.rect.width).attr("cy", (i) => i.state.rect.height), this.transition(D).attr("r", 6).attr("stroke-width", "1.5"), this.transition(N).style("opacity", 0), L.attr("width", (i) => Math.max(0, i.state.rect.width - s * 2)).attr("height", (i) => i.state.rect.height), this.transition(L).style("opacity", 1), this.transition(rt).attr("d", (i) => {
+      const d = y(i.target), f = [
+        d.x + d.width,
+        d.y + d.height
+      ];
+      return j({ source: f, target: f });
+    }).attr("stroke-width", 0).remove(), this.transition(nt).attr("stroke", (i) => o(i.target)).attr("stroke-width", (i) => I(i.target)).attr("d", (i) => {
+      const d = i.source, f = i.target, E = [
+        d.state.rect.x + d.state.rect.width,
+        d.state.rect.y + d.state.rect.height
+      ], ot = [
+        f.state.rect.x,
+        f.state.rect.y + f.state.rect.height
       ];
-      return M({ source: rt, target: st });
+      return j({ source: E, target: ot });
     }), n && this.fit();
   }
   transition(t) {
@@ -684,21 +699,21 @@ class q {
    * Fit the content to the viewport.
    */
   async fit(t = this.options.maxInitialScale) {
-    const s = this.svg.node(), { width: n, height: i } = s.getBoundingClientRect(), { fitRatio: a } = this.options, { x1: c, y1: r, x2: l, y2: d } = this.state.rect, h = l - c, p = d - r, u = Math.min(
+    const s = this.svg.node(), { width: n, height: o } = s.getBoundingClientRect(), { fitRatio: a } = this.options, { x1: l, y1: r, x2: c, y2: p } = this.state.rect, h = c - l, u = p - r, m = Math.min(
       n / h * a,
-      i / p * a,
+      o / u * a,
       t
-    ), g = ut.translate(
-      (n - h * u) / 2 - c * u,
-      (i - p * u) / 2 - r * u
-    ).scale(u);
-    return this.transition(this.svg).call(this.zoom.transform, g).end().catch(C);
+    ), g = gt.translate(
+      (n - h * m) / 2 - l * m,
+      (o - u * m) / 2 - r * m
+    ).scale(m);
+    return this.transition(this.svg).call(this.zoom.transform, g).end().catch(w);
   }
   findElement(t) {
     let s;
-    return this.g.selectAll(y("g")).each(function(i) {
-      i === t && (s = {
-        data: i,
+    return this.g.selectAll(v("g")).each(function(o) {
+      o === t && (s = {
+        data: o,
         g: this
       });
     }), s;
@@ -707,52 +722,52 @@ class q {
    * Pan the content to make the provided node visible in the viewport.
    */
   async ensureVisible(t, s) {
-    var k;
-    const n = (k = this.findElement(t)) == null ? void 0 : k.data;
+    var b;
+    const n = (b = this.findElement(t)) == null ? void 0 : b.data;
     if (!n) return;
-    const i = this.svg.node(), a = i.getBoundingClientRect(), c = w(i), [r, l] = [
+    const o = this.svg.node(), a = o.getBoundingClientRect(), l = S(o), [r, c] = [
       n.state.rect.x,
       n.state.rect.x + n.state.rect.width + 2
-    ].map((b) => b * c.k + c.x), [d, h] = [
+    ].map((k) => k * l.k + l.x), [p, h] = [
       n.state.rect.y,
       n.state.rect.y + n.state.rect.height
-    ].map((b) => b * c.k + c.y), p = {
+    ].map((k) => k * l.k + l.y), u = {
       left: 0,
       right: 0,
       top: 0,
       bottom: 0,
       ...s
-    }, u = [p.left - r, a.width - p.right - l], g = [p.top - d, a.height - p.bottom - h], f = u[0] * u[1] > 0 ? P(u, Math.abs) / c.k : 0, x = g[0] * g[1] > 0 ? P(g, Math.abs) / c.k : 0;
-    if (f || x) {
-      const b = c.translate(f, x);
-      return this.transition(this.svg).call(this.zoom.transform, b).end().catch(C);
+    }, m = [u.left - r, a.width - u.right - c], g = [u.top - p, a.height - u.bottom - h], y = m[0] * m[1] > 0 ? K(m, Math.abs) / l.k : 0, x = g[0] * g[1] > 0 ? K(g, Math.abs) / l.k : 0;
+    if (y || x) {
+      const k = l.translate(y, x);
+      return this.transition(this.svg).call(this.zoom.transform, k).end().catch(w);
     }
   }
   async centerNode(t, s) {
-    var f;
-    const n = (f = this.findElement(t)) == null ? void 0 : f.data;
+    var y;
+    const n = (y = this.findElement(t)) == null ? void 0 : y.data;
     if (!n) return;
-    const i = this.svg.node(), a = i.getBoundingClientRect(), c = w(i), r = (n.state.rect.x + n.state.rect.width / 2) * c.k + c.x, l = (n.state.rect.y + n.state.rect.height / 2) * c.k + c.y, d = {
+    const o = this.svg.node(), a = o.getBoundingClientRect(), l = S(o), r = (n.state.rect.x + n.state.rect.width / 2) * l.k + l.x, c = (n.state.rect.y + n.state.rect.height / 2) * l.k + l.y, p = {
       left: 0,
       right: 0,
       top: 0,
       bottom: 0,
       ...s
-    }, h = (d.left + a.width - d.right) / 2, p = (d.top + a.height - d.bottom) / 2, u = (h - r) / c.k, g = (p - l) / c.k;
-    if (u || g) {
-      const x = c.translate(u, g);
-      return this.transition(this.svg).call(this.zoom.transform, x).end().catch(C);
+    }, h = (p.left + a.width - p.right) / 2, u = (p.top + a.height - p.bottom) / 2, m = (h - r) / l.k, g = (u - c) / l.k;
+    if (m || g) {
+      const x = l.translate(m, g);
+      return this.transition(this.svg).call(this.zoom.transform, x).end().catch(w);
     }
   }
   /**
    * Scale content with it pinned at the center of the viewport.
    */
   async rescale(t) {
-    const s = this.svg.node(), { width: n, height: i } = s.getBoundingClientRect(), a = n / 2, c = i / 2, r = w(s), l = r.translate(
+    const s = this.svg.node(), { width: n, height: o } = s.getBoundingClientRect(), a = n / 2, l = o / 2, r = S(s), c = r.translate(
       (a - r.x) * (1 - t) / r.k,
-      (c - r.y) * (1 - t) / r.k
+      (l - r.y) * (1 - t) / r.k
     ).scale(t);
-    return this.transition(this.svg).call(this.zoom.transform, l).end().catch(C);
+    return this.transition(this.svg).call(this.zoom.transform, c).end().catch(w);
   }
   destroy() {
     this.svg.on(".zoom", null), this.svg.html(null), this.revokers.forEach((t) => {
@@ -760,21 +775,21 @@ class q {
     });
   }
   static create(t, s, n = null) {
-    const i = new q(t, s);
-    return n && i.setData(n).then(() => {
-      i.fit();
-    }), i;
+    const o = new tt(t, s);
+    return n && o.setData(n).then(() => {
+      o.fit();
+    }), o;
   }
 }
 export {
-  q as Markmap,
-  gt as defaultColorFn,
-  K as defaultOptions,
-  he as deriveOptions,
-  de as globalCSS,
-  I as isMacintosh,
-  me as loadCSS,
-  ge as loadJS,
-  oe as refreshHook,
-  ft as simpleHash
+  tt as Markmap,
+  xt as defaultColorFn,
+  U as defaultOptions,
+  ue as deriveOptions,
+  me as globalCSS,
+  V as isMacintosh,
+  xe as loadCSS,
+  ye as loadJS,
+  le as refreshHook,
+  yt as simpleHash
 };

package/dist/types.d.ts

@@ -9,7 +9,7 @@ export interface IMarkmapState {
         y2: number;
     };
 }
-export type IMarkmapJSONOptions = Partial<{
+export interface IMarkmapJSONOptions {
     color: string[];
     colorFreezeLevel: number;
     duration: number;
@@ -25,8 +25,7 @@ export type IMarkmapJSONOptions = Partial<{
     spacingHorizontal: number;
     spacingVertical: number;
     zoom: boolean;
-    htmlParser: any;
-}>;
+}
 export interface IPadding {
     left: number;
     right: number;

package/dist/util.d.ts

@@ -1,6 +1,6 @@
 import { IMarkmapOptions } from 'markmap-common';
 import { IMarkmapJSONOptions } from './types';
-export declare function deriveOptions(jsonOptions?: IMarkmapJSONOptions): Partial<IMarkmapOptions>;
+export declare function deriveOptions(jsonOptions?: Partial<IMarkmapJSONOptions>): Partial<IMarkmapOptions>;
 /**
  * Credit: https://gist.github.com/jlevy/c246006675becc446360a798e2b2d781?permalink_comment_id=4738050#gistcomment-4738050
  */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "markmap-view",
-  "version": "0.18.3",
+  "version": "0.18.4-alpha.3+be73b69",
   "description": "View markmaps in browser",
   "author": "Gerald <gera2ld@live.com>",
   "license": "MIT",
@@ -51,5 +51,5 @@
   "peerDependencies": {
     "markmap-common": "*"
   },
-  "gitHead": "8d690760aa134baeb4fa5c6247c61c6c56544a29"
+  "gitHead": "be73b698cdf408b0a16aea2fe860fe92d8c458bc"
 }