markmap-view 0.17.3-alpha.3 → 0.17.3-beta.3

package/dist/index.js

@@ -1,11 +1,11 @@
-import { Hook as st, getId as at, debounce as lt, addClass as ct, walkTree as M, childSelector as C, noop as T } from "markmap-common";
-import { loadCSS as Ce, loadJS as we } from "markmap-common";
-import { scaleOrdinal as Y, schemeCategory10 as ht, zoomTransform as A, select as dt, zoom as ut, linkHorizontal as pt, min as H, max as I, zoomIdentity as mt, minIndex as ft } from "d3";
-const K = typeof navigator < "u" && navigator.userAgent.includes("Macintosh"), gt = Y(ht), P = {
+import { Hook as et, getId as nt, debounce as rt, addClass as it, walkTree as X, childSelector as b, noop as R } from "markmap-common";
+import { loadCSS as ce, loadJS as he } from "markmap-common";
+import { scaleOrdinal as N, schemeCategory10 as st, linkHorizontal as ot, zoomTransform as j, select as at, zoom as lt, min as T, max as _, zoomIdentity as ct, minIndex as ht } from "d3";
+const P = typeof navigator < "u" && navigator.userAgent.includes("Macintosh"), dt = N(st), W = {
   autoFit: !1,
   color: (e) => {
     var t;
-    return gt(`${((t = e.state) == null ? void 0 : t.path) || ""}`);
+    return dt(`${((t = e.state) == null ? void 0 : t.path) || ""}`);
   },
   duration: 500,
   embedGlobalCSS: !0,
@@ -14,7 +14,7 @@ const K = typeof navigator < "u" && navigator.userAgent.includes("Macintosh"), g
   maxWidth: 0,
   nodeMinHeight: 16,
   paddingX: 8,
-  scrollForPan: K,
+  scrollForPan: P,
   spacingHorizontal: 80,
   spacingVertical: 5,
   initialExpandLevel: -1,
@@ -22,24 +22,24 @@ const K = typeof navigator < "u" && navigator.userAgent.includes("Macintosh"), g
   pan: !0,
   toggleRecursively: !1
 };
-function Se(e) {
-  const t = {}, n = { ...e }, { color: i, colorFreezeLevel: o } = n;
-  if ((i == null ? void 0 : i.length) === 1) {
-    const s = i[0];
-    t.color = () => s;
-  } else if (i != null && i.length) {
-    const s = Y(i);
-    t.color = (l) => s(`${l.state.path}`);
+function se(e) {
+  const t = {}, n = { ...e }, { color: r, colorFreezeLevel: s } = n;
+  if ((r == null ? void 0 : r.length) === 1) {
+    const i = r[0];
+    t.color = () => i;
+  } else if (r != null && r.length) {
+    const i = N(r);
+    t.color = (a) => i(`${a.state.path}`);
   }
-  if (o) {
-    const s = t.color || P.color;
-    t.color = (l) => (l = {
-      ...l,
+  if (s) {
+    const i = t.color || W.color;
+    t.color = (a) => (a = {
+      ...a,
       state: {
-        ...l.state,
-        path: l.state.path.split(".").slice(0, o).join(".")
+        ...a.state,
+        path: a.state.path.split(".").slice(0, s).join(".")
       }
-    }, s(l));
+    }, i(a));
   }
   return [
     "duration",
@@ -51,244 +51,145 @@ function Se(e) {
     "paddingX",
     "spacingHorizontal",
     "spacingVertical"
-  ].forEach((s) => {
-    const l = n[s];
-    typeof l == "number" && (t[s] = l);
-  }), ["zoom", "pan"].forEach((s) => {
-    const l = n[s];
-    l != null && (t[s] = !!l);
+  ].forEach((i) => {
+    const a = n[i];
+    typeof a == "number" && (t[i] = a);
+  }), ["zoom", "pan"].forEach((i) => {
+    const a = n[i];
+    a != null && (t[i] = !!a);
   }), t;
 }
-/*! @gera2ld/jsx-dom v2.2.2 | ISC License */
-const U = 1, G = 2, xt = "http://www.w3.org/2000/svg", _ = "http://www.w3.org/1999/xlink", yt = {
-  show: _,
-  actuate: _,
-  href: _
-}, kt = (e) => typeof e == "string" || typeof e == "number", vt = (e) => (e == null ? void 0 : e.vtype) === U, St = (e) => (e == null ? void 0 : e.vtype) === G;
-function j(e, t) {
-  let n;
-  if (typeof e == "string") n = U;
-  else if (typeof e == "function") n = G;
-  else throw new Error("Invalid VNode type");
-  return {
-    vtype: n,
-    type: e,
-    props: t
-  };
-}
-function bt(e) {
-  return e.children;
-}
-const zt = {
-  isSvg: !1
-};
-function L(e, t) {
-  Array.isArray(t) || (t = [t]), t = t.filter(Boolean), t.length && e.append(...t);
-}
-function Et(e, t, n) {
-  for (const i in t)
-    if (!(i === "key" || i === "children" || i === "ref"))
-      if (i === "dangerouslySetInnerHTML")
-        e.innerHTML = t[i].__html;
-      else if (i === "innerHTML" || i === "textContent" || i === "innerText" || i === "value" && ["textarea", "select"].includes(e.tagName)) {
-        const o = t[i];
-        o != null && (e[i] = o);
-      } else i.startsWith("on") ? e[i.toLowerCase()] = t[i] : wt(e, i, t[i], n.isSvg);
-}
-const Ct = {
-  className: "class",
-  labelFor: "for"
-};
-function wt(e, t, n, i) {
-  if (t = Ct[t] || t, n === !0)
-    e.setAttribute(t, "");
-  else if (n === !1)
-    e.removeAttribute(t);
-  else {
-    const o = i ? yt[t] : void 0;
-    o !== void 0 ? e.setAttributeNS(o, t, n) : e.setAttribute(t, n);
-  }
-}
-function Xt(e) {
-  return e.reduce((t, n) => t.concat(n), []);
-}
-function $(e, t) {
-  return Array.isArray(e) ? Xt(e.map((n) => $(n, t))) : B(e, t);
-}
-function B(e, t = zt) {
-  if (e == null || typeof e == "boolean")
-    return null;
-  if (e instanceof Node)
-    return e;
-  if (St(e)) {
-    const {
-      type: n,
-      props: i
-    } = e;
-    if (n === bt) {
-      const a = document.createDocumentFragment();
-      if (i.children) {
-        const c = $(i.children, t);
-        L(a, c);
-      }
-      return a;
-    }
-    const o = n(i);
-    return B(o, t);
-  }
-  if (kt(e))
-    return document.createTextNode(`${e}`);
-  if (vt(e)) {
-    let n;
-    const {
-      type: i,
-      props: o
-    } = e;
-    if (!t.isSvg && i === "svg" && (t = Object.assign({}, t, {
-      isSvg: !0
-    })), t.isSvg ? n = document.createElementNS(xt, i) : n = document.createElement(i), Et(n, o, t), o.children) {
-      let c = t;
-      t.isSvg && i === "foreignObject" && (c = Object.assign({}, c, {
-        isSvg: !1
-      }));
-      const s = $(o.children, c);
-      s != null && L(n, s);
-    }
-    const {
-      ref: a
-    } = o;
-    return typeof a == "function" && a(n), n;
-  }
-  throw new Error("mount: Invalid Vnode!");
+function pt(e) {
+  let t = 0;
+  for (let n = 0; n < e.length; n++)
+    t = (t << 5) - t + e.charCodeAt(n) | 0;
+  return (t >>> 0).toString(36);
 }
-function O(e) {
-  return B(e);
-}
-function jt(e) {
-  var t = 0, n = e.children, i = n && n.length;
-  if (!i) t = 1;
-  else for (; --i >= 0; ) t += n[i].value;
+function ut(e) {
+  var t = 0, n = e.children, r = n && n.length;
+  if (!r) t = 1;
+  else for (; --r >= 0; ) t += n[r].value;
   e.value = t;
 }
-function Nt() {
-  return this.eachAfter(jt);
+function mt() {
+  return this.eachAfter(ut);
 }
-function Rt(e) {
-  var t = this, n, i = [t], o, a, c;
+function gt(e) {
+  var t = this, n, r = [t], s, l, c;
   do
-    for (n = i.reverse(), i = []; t = n.pop(); )
-      if (e(t), o = t.children, o) for (a = 0, c = o.length; a < c; ++a)
-        i.push(o[a]);
-  while (i.length);
+    for (n = r.reverse(), r = []; t = n.pop(); )
+      if (e(t), s = t.children, s) for (l = 0, c = s.length; l < c; ++l)
+        r.push(s[l]);
+  while (r.length);
   return this;
 }
-function Mt(e) {
-  for (var t = this, n = [t], i, o; t = n.pop(); )
-    if (e(t), i = t.children, i) for (o = i.length - 1; o >= 0; --o)
-      n.push(i[o]);
+function ft(e) {
+  for (var t = this, n = [t], r, s; t = n.pop(); )
+    if (e(t), r = t.children, r) for (s = r.length - 1; s >= 0; --s)
+      n.push(r[s]);
   return this;
 }
-function Tt(e) {
-  for (var t = this, n = [t], i = [], o, a, c; t = n.pop(); )
-    if (i.push(t), o = t.children, o) for (a = 0, c = o.length; a < c; ++a)
-      n.push(o[a]);
-  for (; t = i.pop(); )
+function xt(e) {
+  for (var t = this, n = [t], r = [], s, l, c; t = n.pop(); )
+    if (r.push(t), s = t.children, s) for (l = 0, c = s.length; l < c; ++l)
+      n.push(s[l]);
+  for (; t = r.pop(); )
     e(t);
   return this;
 }
-function At(e) {
+function yt(e) {
   return this.eachAfter(function(t) {
-    for (var n = +e(t.data) || 0, i = t.children, o = i && i.length; --o >= 0; ) n += i[o].value;
+    for (var n = +e(t.data) || 0, r = t.children, s = r && r.length; --s >= 0; ) n += r[s].value;
     t.value = n;
   });
 }
-function _t(e) {
+function kt(e) {
   return this.eachBefore(function(t) {
     t.children && t.children.sort(e);
   });
 }
-function Ot(e) {
-  for (var t = this, n = Dt(t, e), i = [t]; t !== n; )
-    t = t.parent, i.push(t);
-  for (var o = i.length; e !== n; )
-    i.splice(o, 0, e), e = e.parent;
-  return i;
+function vt(e) {
+  for (var t = this, n = bt(t, e), r = [t]; t !== n; )
+    t = t.parent, r.push(t);
+  for (var s = r.length; e !== n; )
+    r.splice(s, 0, e), e = e.parent;
+  return r;
 }
-function Dt(e, t) {
+function bt(e, t) {
   if (e === t) return e;
-  var n = e.ancestors(), i = t.ancestors(), o = null;
-  for (e = n.pop(), t = i.pop(); e === t; )
-    o = e, e = n.pop(), t = i.pop();
-  return o;
+  var n = e.ancestors(), r = t.ancestors(), s = null;
+  for (e = n.pop(), t = r.pop(); e === t; )
+    s = e, e = n.pop(), t = r.pop();
+  return s;
 }
-function $t() {
+function zt() {
   for (var e = this, t = [e]; e = e.parent; )
     t.push(e);
   return t;
 }
-function Bt() {
+function St() {
   var e = [];
   return this.each(function(t) {
     e.push(t);
   }), e;
 }
-function Ft() {
+function Et() {
   var e = [];
   return this.eachBefore(function(t) {
     t.children || e.push(t);
   }), e;
 }
-function Ht() {
+function Ct() {
   var e = this, t = [];
   return e.each(function(n) {
     n !== e && t.push({ source: n.parent, target: n });
   }), t;
 }
-function F(e, t) {
-  var n = new N(e), i = +e.value && (n.value = e.value), o, a = [n], c, s, l, p;
-  for (t == null && (t = Lt); o = a.pop(); )
-    if (i && (o.value = +o.data.value), (s = t(o.data)) && (p = s.length))
-      for (o.children = new Array(p), l = p - 1; l >= 0; --l)
-        a.push(c = o.children[l] = new N(s[l])), c.parent = o, c.depth = o.depth + 1;
-  return n.eachBefore(Vt);
+function O(e, t) {
+  var n = new E(e), r = +e.value && (n.value = e.value), s, l = [n], c, i, a, d;
+  for (t == null && (t = Xt); s = l.pop(); )
+    if (r && (s.value = +s.data.value), (i = t(s.data)) && (d = i.length))
+      for (s.children = new Array(d), a = d - 1; a >= 0; --a)
+        l.push(c = s.children[a] = new E(i[a])), c.parent = s, c.depth = s.depth + 1;
+  return n.eachBefore(jt);
 }
-function It() {
-  return F(this).eachBefore(Wt);
+function wt() {
+  return O(this).eachBefore(Rt);
 }
-function Lt(e) {
+function Xt(e) {
   return e.children;
 }
-function Wt(e) {
+function Rt(e) {
   e.data = e.data.data;
 }
-function Vt(e) {
+function jt(e) {
   var t = 0;
   do
     e.height = t;
   while ((e = e.parent) && e.height < ++t);
 }
-function N(e) {
+function E(e) {
   this.data = e, this.depth = this.height = 0, this.parent = null;
 }
-N.prototype = F.prototype = {
-  constructor: N,
-  count: Nt,
-  each: Rt,
-  eachAfter: Tt,
-  eachBefore: Mt,
-  sum: At,
-  sort: _t,
-  path: Ot,
-  ancestors: $t,
-  descendants: Bt,
-  leaves: Ft,
-  links: Ht,
-  copy: It
+E.prototype = O.prototype = {
+  constructor: E,
+  count: mt,
+  each: gt,
+  eachAfter: xt,
+  eachBefore: ft,
+  sum: yt,
+  sort: kt,
+  path: vt,
+  ancestors: zt,
+  descendants: St,
+  leaves: Et,
+  links: Ct,
+  copy: wt
 };
-const Yt = "d3-flextree", Kt = "2.1.2", Pt = "build/d3-flextree.js", Ut = "index", Gt = {
+const Mt = "d3-flextree", Bt = "2.1.2", Ot = "build/d3-flextree.js", $t = "index", At = {
   name: "Chris Maloney",
   url: "http://chrismaloney.org"
-}, Zt = "Flexible tree layout algorithm that allows for variable node sizes.", qt = [
+}, Dt = "Flexible tree layout algorithm that allows for variable node sizes.", Ft = [
   "d3",
   "d3-module",
   "layout",
@@ -300,10 +201,10 @@ const Yt = "d3-flextree", Kt = "2.1.2", Pt = "build/d3-flextree.js", Ut = "index
   "infovis",
   "visualization",
   "2d"
-], Jt = "https://github.com/klortho/d3-flextree", Qt = "WTFPL", te = {
+], Tt = "https://github.com/klortho/d3-flextree", _t = "WTFPL", Ht = {
   type: "git",
   url: "https://github.com/klortho/d3-flextree.git"
-}, ee = {
+}, Lt = {
   clean: "rm -rf build demo test",
   "build:demo": "rollup -c --environment BUILD:demo",
   "build:dev": "rollup -c --environment BUILD:dev",
@@ -315,9 +216,9 @@ const Yt = "d3-flextree", Kt = "2.1.2", Pt = "build/d3-flextree.js", Ut = "index
   "test:browser": "node test/browser-tests.js",
   test: "npm-run-all test:*",
   prepare: "npm-run-all clean build lint test"
-}, ne = {
+}, Nt = {
   "d3-hierarchy": "^1.1.5"
-}, ie = {
+}, Pt = {
   "babel-plugin-external-helpers": "^6.22.0",
   "babel-preset-es2015-rollup": "^3.0.0",
   d3: "^4.13.0",
@@ -333,51 +234,51 @@ const Yt = "d3-flextree", Kt = "2.1.2", Pt = "build/d3-flextree.js", Ut = "index
   "rollup-plugin-node-resolve": "^3.0.2",
   "rollup-plugin-uglify": "^3.0.0",
   "uglify-es": "^3.3.9"
-}, re = {
-  name: Yt,
-  version: Kt,
-  main: Pt,
-  module: Ut,
+}, Wt = {
+  name: Mt,
+  version: Bt,
+  main: Ot,
+  module: $t,
   "jsnext:main": "index",
-  author: Gt,
-  description: Zt,
-  keywords: qt,
-  homepage: Jt,
-  license: Qt,
-  repository: te,
-  scripts: ee,
-  dependencies: ne,
-  devDependencies: ie
-}, { version: oe } = re, se = Object.freeze({
+  author: At,
+  description: Dt,
+  keywords: Ft,
+  homepage: Tt,
+  license: _t,
+  repository: Ht,
+  scripts: Lt,
+  dependencies: Nt,
+  devDependencies: Pt
+}, { version: It } = Wt, Kt = Object.freeze({
   children: (e) => e.children,
   nodeSize: (e) => e.data.size,
   spacing: 0
 });
-function q(e) {
-  const t = Object.assign({}, se, e);
-  function n(s) {
-    const l = t[s];
-    return typeof l == "function" ? l : () => l;
+function K(e) {
+  const t = Object.assign({}, Kt, e);
+  function n(i) {
+    const a = t[i];
+    return typeof a == "function" ? a : () => a;
   }
-  function i(s) {
-    const l = c(a(), s, (p) => p.children);
-    return l.update(), l.data;
+  function r(i) {
+    const a = c(l(), i, (d) => d.children);
+    return a.update(), a.data;
   }
-  function o() {
-    const s = n("nodeSize"), l = n("spacing");
-    return class Z extends F.prototype.constructor {
+  function s() {
+    const i = n("nodeSize"), a = n("spacing");
+    return class I extends O.prototype.constructor {
       constructor(h) {
         super(h);
       }
       copy() {
-        const h = c(this.constructor, this, (u) => u.children);
-        return h.each((u) => u.data = u.data.data), h;
+        const h = c(this.constructor, this, (p) => p.children);
+        return h.each((p) => p.data = p.data.data), h;
       }
       get size() {
-        return s(this);
+        return i(this);
       }
       spacing(h) {
-        return l(this, h);
+        return a(this, h);
       }
       get nodes() {
         return this.descendants();
@@ -421,7 +322,7 @@ function q(e) {
       }
       get extents() {
         return (this.children || []).reduce(
-          (h, u) => Z.maxExtents(h, u.extents),
+          (h, p) => I.maxExtents(h, p.extents),
           this.nodeExtents
         );
       }
@@ -433,19 +334,19 @@ function q(e) {
           right: this.right
         };
       }
-      static maxExtents(h, u) {
+      static maxExtents(h, p) {
         return {
-          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)
+          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)
         };
       }
     };
   }
-  function a() {
-    const s = o(), l = n("nodeSize"), p = n("spacing");
-    return class extends s {
+  function l() {
+    const i = s(), a = n("nodeSize"), d = n("spacing");
+    return class extends i {
       constructor(h) {
         super(h), Object.assign(this, {
           x: 0,
@@ -463,10 +364,10 @@ function q(e) {
         });
       }
       get size() {
-        return l(this.data);
+        return a(this.data);
       }
       spacing(h) {
-        return p(this.data, h.data);
+        return d(this.data, h.data);
       }
       get x() {
         return this.data.x;
@@ -481,112 +382,112 @@ function q(e) {
         this.data.y = h;
       }
       update() {
-        return J(this), Q(this), this;
+        return G(this), U(this), this;
       }
     };
   }
-  function c(s, l, p) {
-    const h = (u, g) => {
-      const x = new s(u);
-      Object.assign(x, {
-        parent: g,
-        depth: g === null ? 0 : g.depth + 1,
+  function c(i, a, d) {
+    const h = (p, u) => {
+      const g = new i(p);
+      Object.assign(g, {
+        parent: u,
+        depth: u === null ? 0 : u.depth + 1,
         height: 0,
         length: 1
       });
-      const m = p(u) || [];
-      return x.children = m.length === 0 ? null : m.map((y) => h(y, x)), x.children && Object.assign(x, x.children.reduce(
-        (y, f) => ({
-          height: Math.max(y.height, f.height + 1),
-          length: y.length + f.length
+      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, v) => ({
+          height: Math.max(x.height, v.height + 1),
+          length: x.length + v.length
         }),
-        x
-      )), x;
+        g
+      )), g;
     };
-    return h(l, null);
+    return h(a, null);
   }
-  return Object.assign(i, {
-    nodeSize(s) {
-      return arguments.length ? (t.nodeSize = s, i) : t.nodeSize;
+  return Object.assign(r, {
+    nodeSize(i) {
+      return arguments.length ? (t.nodeSize = i, r) : t.nodeSize;
     },
-    spacing(s) {
-      return arguments.length ? (t.spacing = s, i) : t.spacing;
+    spacing(i) {
+      return arguments.length ? (t.spacing = i, r) : t.spacing;
     },
-    children(s) {
-      return arguments.length ? (t.children = s, i) : t.children;
+    children(i) {
+      return arguments.length ? (t.children = i, r) : t.children;
     },
-    hierarchy(s, l) {
-      const p = typeof l > "u" ? t.children : l;
-      return c(o(), s, p);
+    hierarchy(i, a) {
+      const d = typeof a > "u" ? t.children : a;
+      return c(s(), i, d);
     },
-    dump(s) {
-      const l = n("nodeSize"), p = (h) => (u) => {
-        const g = h + "  ", x = h + "    ", { x: m, y } = u, f = l(u), k = u.children || [], v = k.length === 0 ? " " : `,${g}children: [${x}${k.map(p(x)).join(x)}${g}],${h}`;
-        return `{ size: [${f.join(", ")}],${g}x: ${m}, y: ${y}${v}},`;
+    dump(i) {
+      const a = n("nodeSize"), d = (h) => (p) => {
+        const u = h + "  ", g = h + "    ", { x: f, y: x } = p, v = a(p), k = p.children || [], z = k.length === 0 ? " " : `,${u}children: [${g}${k.map(d(g)).join(g)}${u}],${h}`;
+        return `{ size: [${v.join(", ")}],${u}x: ${f}, y: ${x}${z}},`;
       };
-      return p(`
-`)(s);
+      return d(`
+`)(i);
     }
-  }), i;
-}
-q.version = oe;
-const J = (e, t = 0) => (e.y = t, (e.children || []).reduce((n, i) => {
-  const [o, a] = n;
-  J(i, e.y + e.ySize);
-  const c = (o === 0 ? i.lExt : i.rExt).bottom;
-  o !== 0 && le(e, o, a);
-  const s = ge(c, o, a);
-  return [o + 1, s];
-}, [0, null]), ae(e), fe(e), e), Q = (e, t, n) => {
+  }), r;
+}
+K.version = It;
+const G = (e, t = 0) => (e.y = t, (e.children || []).reduce((n, r) => {
+  const [s, l] = n;
+  G(r, e.y + e.ySize);
+  const c = (s === 0 ? r.lExt : r.rExt).bottom;
+  s !== 0 && Ut(e, s, l);
+  const i = ee(c, s, l);
+  return [s + 1, i];
+}, [0, null]), Gt(e), te(e), e), U = (e, t, n) => {
   typeof t > "u" && (t = -e.relX - e.prelim, n = 0);
-  const i = t + e.relX;
-  return e.relX = i + e.prelim - n, e.prelim = 0, e.x = n + e.relX, (e.children || []).forEach((o) => Q(o, i, e.x)), e;
-}, ae = (e) => {
+  const r = t + e.relX;
+  return e.relX = r + e.prelim - n, e.prelim = 0, e.x = n + e.relX, (e.children || []).forEach((s) => U(s, r, e.x)), e;
+}, Gt = (e) => {
   (e.children || []).reduce((t, n) => {
-    const [i, o] = t, a = i + n.shift, c = o + a + n.change;
-    return n.relX += c, [a, c];
+    const [r, s] = t, l = r + n.shift, c = s + l + n.change;
+    return n.relX += c, [l, c];
   }, [0, 0]);
-}, le = (e, t, n) => {
-  const i = e.children[t - 1], o = e.children[t];
-  let a = i, c = i.relX, s = o, l = o.relX, p = !0;
-  for (; a && s; ) {
-    a.bottom > n.lowY && (n = n.next);
-    const h = c + a.prelim - (l + s.prelim) + a.xSize / 2 + s.xSize / 2 + a.spacing(s);
-    (h > 0 || h < 0 && p) && (l += h, ce(o, h), he(e, t, n.index, h)), p = !1;
-    const u = a.bottom, g = s.bottom;
-    u <= g && (a = ue(a), a && (c += a.relX)), u >= g && (s = de(s), s && (l += s.relX));
+}, Ut = (e, t, n) => {
+  const r = e.children[t - 1], s = e.children[t];
+  let l = r, c = r.relX, i = s, a = s.relX, d = !0;
+  for (; l && i; ) {
+    l.bottom > n.lowY && (n = n.next);
+    const h = c + l.prelim - (a + i.prelim) + l.xSize / 2 + i.xSize / 2 + l.spacing(i);
+    (h > 0 || h < 0 && d) && (a += h, Vt(s, h), Yt(e, t, n.index, h)), d = !1;
+    const p = l.bottom, u = i.bottom;
+    p <= u && (l = qt(l), l && (c += l.relX)), p >= u && (i = Zt(i), i && (a += i.relX));
   }
-  !a && s ? pe(e, t, s, l) : a && !s && me(e, t, a, c);
-}, ce = (e, t) => {
+  !l && i ? Jt(e, t, i, a) : l && !i && Qt(e, t, l, c);
+}, Vt = (e, t) => {
   e.relX += t, e.lExtRelX += t, e.rExtRelX += t;
-}, he = (e, t, n, i) => {
-  const o = e.children[t], a = t - n;
-  if (a > 1) {
-    const c = i / a;
-    e.children[n + 1].shift += c, o.shift -= c, o.change -= i - c;
+}, Yt = (e, t, n, r) => {
+  const s = e.children[t], l = t - n;
+  if (l > 1) {
+    const c = r / l;
+    e.children[n + 1].shift += c, s.shift -= c, s.change -= r - c;
   }
-}, de = (e) => e.hasChildren ? e.firstChild : e.lThr, ue = (e) => e.hasChildren ? e.lastChild : e.rThr, pe = (e, t, n, i) => {
-  const o = e.firstChild, a = o.lExt, c = e.children[t];
-  a.lThr = n;
-  const s = i - n.relX - o.lExtRelX;
-  a.relX += s, a.prelim -= s, o.lExt = c.lExt, o.lExtRelX = c.lExtRelX;
-}, me = (e, t, n, i) => {
-  const o = e.children[t], a = o.rExt, c = e.children[t - 1];
-  a.rThr = n;
-  const s = i - n.relX - o.rExtRelX;
-  a.relX += s, a.prelim -= s, o.rExt = c.rExt, o.rExtRelX = c.rExtRelX;
-}, fe = (e) => {
+}, Zt = (e) => e.hasChildren ? e.firstChild : e.lThr, qt = (e) => e.hasChildren ? e.lastChild : e.rThr, Jt = (e, t, n, r) => {
+  const s = e.firstChild, l = s.lExt, c = e.children[t];
+  l.lThr = n;
+  const i = r - n.relX - s.lExtRelX;
+  l.relX += i, l.prelim -= i, s.lExt = c.lExt, s.lExtRelX = c.lExtRelX;
+}, Qt = (e, t, n, r) => {
+  const s = e.children[t], l = s.rExt, c = e.children[t - 1];
+  l.rThr = n;
+  const i = r - n.relX - s.rExtRelX;
+  l.relX += i, l.prelim -= i, s.rExt = c.rExt, s.rExtRelX = c.rExtRelX;
+}, te = (e) => {
   if (e.hasChildren) {
-    const t = e.firstChild, n = e.lastChild, i = (t.prelim + t.relX - t.xSize / 2 + n.relX + n.prelim + n.xSize / 2) / 2;
+    const t = e.firstChild, n = e.lastChild, r = (t.prelim + t.relX - t.xSize / 2 + n.relX + n.prelim + n.xSize / 2) / 2;
     Object.assign(e, {
-      prelim: i,
+      prelim: r,
       lExt: t.lExt,
       lExtRelX: t.lExtRelX,
       rExt: n.rExt,
       rExtRelX: n.rExtRelX
     });
   }
-}, ge = (e, t, n) => {
+}, ee = (e, t, n) => {
   for (; n !== null && e >= n.lowY; )
     n = n.next;
   return {
@@ -594,133 +495,131 @@ const J = (e, t = 0) => (e.y = t, (e.children || []).reduce((n, i) => {
     index: t,
     next: n
   };
-}, xe = ".markmap-container{position:absolute;width:0;height:0;top:-100px;left:-100px;overflow:hidden}.markmap-container>.markmap-foreign{display:inline-block}.markmap-container>.markmap-foreign>div:last-child,.markmap-container>.markmap-foreign>div:last-child :not(pre){white-space:nowrap}.markmap-container>.markmap-foreign>div:last-child code{white-space:inherit}", tt = ".markmap{--markmap-max-width: none;--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-testing-max{max-width:var(--markmap-max-width)}.markmap-foreign-testing-max img{max-width:var(--markmap-max-width);max-height:none}@media (prefers-color-scheme: dark){.markmap{--markmap-code-bg: #1a1b26;--markmap-code-color: #ddd;--markmap-circle-open-bg: #444;--markmap-text-color: #eee}}", be = tt;
-function W(e) {
-  const t = e.data;
-  return Math.max(4 - 2 * t.state.depth, 1.5);
+}, V = ".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)}.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}", oe = V, M = ot();
+function H(e) {
+  return Math.max(4 - 2 * e.state.depth, 1.5);
 }
-function V(e, t) {
-  const n = ft(e, t);
+function L(e, t) {
+  const n = ht(e, t);
   return e[n];
 }
-function D(e) {
+function B(e) {
   e.stopPropagation();
 }
-const ye = new st();
-class et {
+const ne = new et();
+class Y {
   constructor(t, n) {
-    this.options = P, this.revokers = [], this.imgCache = {}, this.handleZoom = (i) => {
-      const { transform: o } = i;
-      this.g.attr("transform", o);
-    }, this.handlePan = (i) => {
-      i.preventDefault();
-      const o = A(this.svg.node()), a = o.translate(
-        -i.deltaX / o.k,
-        -i.deltaY / o.k
+    this.options = W, this.revokers = [], this.handleZoom = (r) => {
+      const { transform: s } = r;
+      this.g.attr("transform", s);
+    }, this.handlePan = (r) => {
+      r.preventDefault();
+      const s = j(this.svg.node()), l = s.translate(
+        -r.deltaX / s.k,
+        -r.deltaY / s.k
       );
-      this.svg.call(this.zoom.transform, a);
-    }, this.handleClick = (i, o) => {
-      let a = this.options.toggleRecursively;
-      (K ? i.metaKey : i.ctrlKey) && (a = !a), this.toggleNode(o.data, a);
-    }, this.svg = t.datum ? t : dt(t), this.styleNode = this.svg.append("style"), this.zoom = ut().filter((i) => this.options.scrollForPan && i.type === "wheel" ? i.ctrlKey && !i.button : (!i.ctrlKey || i.type === "wheel") && !i.button).on("zoom", this.handleZoom), this.setOptions(n), this.state = {
-      id: this.options.id || this.svg.attr("id") || at(),
-      minX: 0,
-      maxX: 0,
-      minY: 0,
-      maxY: 0
-    }, this.g = this.svg.append("g"), this.debouncedRefresh = lt(() => this.setData(), 200), this.revokers.push(
-      ye.tap(() => {
+      this.svg.call(this.zoom.transform, l);
+    }, this.handleClick = (r, s) => {
+      let l = this.options.toggleRecursively;
+      (P ? r.metaKey : r.ctrlKey) && (l = !l), this.toggleNode(s, l);
+    }, this.svg = t.datum ? t : at(t), this.styleNode = this.svg.append("style"), this.zoom = lt().filter((r) => this.options.scrollForPan && r.type === "wheel" ? r.ctrlKey && !r.button : (!r.ctrlKey || r.type === "wheel") && !r.button).on("zoom", this.handleZoom), this.setOptions(n), this.state = {
+      id: this.options.id || this.svg.attr("id") || nt(),
+      rect: { x1: 0, y1: 0, x2: 0, y2: 0 }
+    }, this.g = this.svg.append("g"), this.observer = new ResizeObserver(
+      rt(() => {
+        this.renderData();
+      }, 100)
+    ), this.revokers.push(
+      ne.tap(() => {
         this.setData();
       })
     );
   }
   getStyleContent() {
-    const { style: t } = this.options, { id: n } = this.state, i = typeof t == "function" ? t(n) : "";
-    return [this.options.embedGlobalCSS && tt, i].filter(Boolean).join(`
+    const { style: t } = this.options, { id: n } = this.state, r = typeof t == "function" ? t(n) : "";
+    return [this.options.embedGlobalCSS && V, r].filter(Boolean).join(`
 `);
   }
   updateStyle() {
     this.svg.attr(
       "class",
-      ct(this.svg.attr("class"), "markmap", this.state.id)
+      it(this.svg.attr("class"), "markmap", this.state.id)
     );
     const t = this.getStyleContent();
     this.styleNode.text(t);
   }
-  toggleNode(t, n = !1) {
-    var o, a;
-    const i = (o = t.payload) != null && o.fold ? 0 : 1;
-    n ? M(t, (c, s) => {
+  async toggleNode(t, n = !1) {
+    var s, l;
+    const r = (s = t.payload) != null && s.fold ? 0 : 1;
+    n ? X(t, (c, i) => {
       c.payload = {
         ...c.payload,
-        fold: i
-      }, s();
+        fold: r
+      }, i();
     }) : t.payload = {
       ...t.payload,
-      fold: (a = t.payload) != null && a.fold ? 0 : 1
-    }, this.renderData(t);
+      fold: (l = t.payload) != null && l.fold ? 0 : 1
+    }, await this.renderData(t);
   }
-  initializeData(t) {
+  _initializeData(t) {
     let n = 0;
-    const { color: i, nodeMinHeight: o, maxWidth: a, initialExpandLevel: c } = this.options, { id: s } = this.state, l = O(
-      /* @__PURE__ */ j("div", { className: `markmap-container markmap ${s}-g` })
-    ), p = O(
-      /* @__PURE__ */ j("style", { children: [this.getStyleContent(), xe].join(`
-`) })
-    );
-    document.body.append(l, p);
-    const h = a ? `--markmap-max-width: ${a}px` : "";
-    let u = 0, g = 0;
-    M(t, (m, y, f) => {
-      var b, w, z;
-      g += 1, m.children = (b = m.children) == null ? void 0 : b.map((E) => ({ ...E })), n += 1;
-      const k = O(
-        /* @__PURE__ */ j(
-          "div",
-          {
-            className: "markmap-foreign markmap-foreign-testing-max",
-            style: h,
-            children: /* @__PURE__ */ j("div", { dangerouslySetInnerHTML: { __html: m.content } })
-          }
-        )
-      );
-      l.append(k), m.state = {
-        ...m.state,
-        depth: g,
+    const { color: r, initialExpandLevel: s } = this.options;
+    let l = 0, c = 0;
+    X(t, (i, a, d) => {
+      var p, u, g, f;
+      c += 1, i.children = (p = i.children) == null ? void 0 : p.map((x) => ({ ...x })), n += 1, i.state = {
+        ...i.state,
+        depth: c,
         id: n,
-        el: k.firstChild
-      }, m.state.path = [(w = f == null ? void 0 : f.state) == null ? void 0 : w.path, m.state.id].filter(Boolean).join("."), i(m);
-      const v = ((z = m.payload) == null ? void 0 : z.fold) === 2;
-      v ? u += 1 : (u || c >= 0 && m.state.depth >= c) && (m.payload = { ...m.payload, fold: 1 }), y(), v && (u -= 1), g -= 1;
+        rect: {
+          x: 0,
+          y: 0,
+          width: 0,
+          height: 0
+        },
+        size: [0, 0]
+      }, i.state.key = [(u = d == null ? void 0 : d.state) == null ? void 0 : u.id, i.state.id].filter(Boolean).join(".") + pt(i.content), i.state.path = [(g = d == null ? void 0 : d.state) == null ? void 0 : g.path, i.state.id].filter(Boolean).join("."), r(i);
+      const h = ((f = i.payload) == null ? void 0 : f.fold) === 2;
+      h ? l += 1 : (l || s >= 0 && i.state.depth >= s) && (i.payload = { ...i.payload, fold: 1 }), a(), h && (l -= 1), c -= 1;
     });
-    const x = Array.from(l.childNodes).map(
-      (m) => m.firstChild
-    );
-    this._checkImages(l), x.forEach((m) => {
-      var y;
-      (y = m.parentNode) == null || y.append(m.cloneNode(!0));
-    }), M(t, (m, y, f) => {
-      var b;
-      const k = m.state, v = k.el.getBoundingClientRect();
-      m.content = k.el.innerHTML, k.size = [
-        Math.ceil(v.width) + 1,
-        Math.max(Math.ceil(v.height), o)
-      ], k.key = [(b = f == null ? void 0 : f.state) == null ? void 0 : b.id, k.id].filter(Boolean).join(".") + // FIXME: find a way to check content hash
-      m.content, y();
-    }), l.remove(), p.remove();
   }
-  _checkImages(t) {
-    t.querySelectorAll("img").forEach((n) => {
-      if (n.width) return;
-      const i = this.imgCache[n.src];
-      i != null && i[0] ? [n.width, n.height] = i : i || this._loadImage(n.src);
+  _relayout() {
+    if (!this.state.data) return;
+    this.g.selectAll(b("g")).selectAll(
+      b("foreignObject")
+    ).each(function(i) {
+      var h;
+      const a = (h = this.firstChild) == null ? void 0 : h.firstChild, d = [a.scrollWidth, a.scrollHeight];
+      i.state.size = d;
     });
-  }
-  _loadImage(t) {
-    this.imgCache[t] = [0, 0];
-    const n = new Image();
-    n.src = t, n.onload = () => {
-      this.imgCache[t] = [n.naturalWidth, n.naturalHeight], this.debouncedRefresh();
+    const { spacingHorizontal: t, paddingX: n, spacingVertical: r } = this.options, s = K({}).children((i) => {
+      var a;
+      if (!((a = i.payload) != null && a.fold)) return i.children;
+    }).nodeSize((i) => {
+      const [a, d] = i.data.state.size;
+      return [d, a + (a ? n * 2 : 0) + t];
+    }).spacing((i, a) => i.parent === a.parent ? r : r * 2), l = s.hierarchy(this.state.data);
+    s(l);
+    const c = l.descendants();
+    c.forEach((i) => {
+      const a = i.data;
+      a.state.rect = {
+        x: i.y,
+        y: i.x,
+        width: i.ySize - t,
+        height: i.xSize
+      };
+    }), this.state.rect = {
+      x1: T(c, (i) => i.data.state.rect.x) || 0,
+      y1: T(c, (i) => i.data.state.rect.y) || 0,
+      x2: _(
+        c,
+        (i) => i.data.state.rect.x + i.data.state.rect.width
+      ) || 0,
+      y2: _(
+        c,
+        (i) => i.data.state.rect.y + i.data.state.rect.height
+      ) || 0
     };
   }
   setOptions(t) {
@@ -729,127 +628,99 @@ class et {
       ...t
     }, this.options.zoom ? this.svg.call(this.zoom) : this.svg.on(".zoom", null), this.options.pan ? this.svg.on("wheel", this.handlePan) : this.svg.on("wheel", null);
   }
-  setData(t, n) {
-    n && this.setOptions(n), t && (this.state.data = t), this.state.data && (this.initializeData(this.state.data), this.updateStyle(), this.renderData());
+  async setData(t, n) {
+    n && this.setOptions(n), t && (this.state.data = t), this.state.data && (this._initializeData(this.state.data), this.updateStyle(), await this.renderData());
   }
-  renderData(t) {
+  async renderData(t) {
+    const { paddingX: n, autoFit: r, color: s, maxWidth: l } = this.options;
     if (!this.state.data) return;
-    const { spacingHorizontal: n, paddingX: i, spacingVertical: o, autoFit: a, color: c } = this.options, s = q({}).children((r) => {
-      var d;
-      if (!((d = r.payload) != null && d.fold)) return r.children;
-    }).nodeSize((r) => {
-      const [d, S] = r.data.state.size;
-      return [S, d + (d ? i * 2 : 0) + n];
-    }).spacing((r, d) => r.parent === d.parent ? o : o * 2), l = s.hierarchy(this.state.data);
-    s(l);
-    const p = l.descendants().reverse(), h = l.links(), u = pt(), g = H(p, (r) => r.x - r.xSize / 2), x = I(p, (r) => r.x + r.xSize / 2), m = H(p, (r) => r.y), y = I(p, (r) => r.y + r.ySize - n);
-    Object.assign(this.state, {
-      minX: g,
-      maxX: x,
-      minY: m,
-      maxY: y
-    }), a && this.fit();
-    const f = t && p.find((r) => r.data === t) || l, k = f.data.state.x0 ?? f.x, v = f.data.state.y0 ?? f.y, b = this.g.selectAll(C("g")).data(p, (r) => r.data.state.key), w = b.enter().append("g").attr("data-depth", (r) => r.data.state.depth).attr("data-path", (r) => r.data.state.path).attr(
-      "transform",
-      (r) => `translate(${v + f.ySize - r.ySize},${k + f.xSize / 2 - r.xSize})`
-    ), z = this.transition(b.exit());
-    z.select("line").attr("x1", (r) => r.ySize - n).attr("x2", (r) => r.ySize - n), z.select("foreignObject").style("opacity", 0), z.attr(
-      "transform",
-      (r) => `translate(${f.y + f.ySize - r.ySize},${f.x + f.xSize / 2 - r.xSize})`
-    ).remove();
-    const E = b.merge(w).attr(
+    const c = [];
+    X(this.state.data, (o, m) => {
+      var y;
+      (y = o.payload) != null && y.fold || m(), c.push(o);
+    });
+    const a = (t || this.state.data).state.rect, d = this.g.selectAll(b("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(
       "class",
-      (r) => {
-        var d;
-        return ["markmap-node", ((d = r.data.payload) == null ? void 0 : d.fold) && "markmap-fold"].filter(Boolean).join(" ");
-      }
-    );
-    this.transition(E).attr(
-      "transform",
-      (r) => `translate(${r.y},${r.x - r.xSize / 2})`
-    );
-    const nt = E.selectAll(
-      C("line")
+      (o) => {
+        var m;
+        return ["markmap-node", ((m = o.payload) == null ? void 0 : m.fold) && "markmap-fold"].filter(Boolean).join(" ");
+      }
+    ), g = u.selectAll(b("line")).data(
+      (o) => [o],
+      (o) => o.state.key
+    ), f = g.enter().append("line"), x = p.selectAll(
+      b("line")
+    ), v = g.merge(f), k = u.selectAll(
+      b("circle")
     ).data(
-      (r) => [r],
-      (r) => r.data.state.key
-    ).join(
-      (r) => r.append("line").attr("x1", (d) => d.ySize - n).attr("x2", (d) => d.ySize - n),
-      (r) => r,
-      (r) => r.remove()
-    );
-    this.transition(nt).attr("x1", -1).attr("x2", (r) => r.ySize - n + 2).attr("y1", (r) => r.xSize).attr("y2", (r) => r.xSize).attr("stroke", (r) => c(r.data)).attr("stroke-width", W);
-    const it = E.selectAll(
-      C("circle")
-    ).data(
-      (r) => {
-        var d;
-        return (d = r.data.children) != null && d.length ? [r] : [];
+      (o) => {
+        var m;
+        return (m = o.children) != null && m.length ? [o] : [];
       },
-      (r) => r.data.state.key
+      (o) => o.state.key
     ).join(
-      (r) => r.append("circle").attr("stroke-width", "1.5").attr("cx", (d) => d.ySize - n).attr("cy", (d) => d.xSize).attr("r", 0).on("click", (d, S) => this.handleClick(d, S)).on("mousedown", D),
-      (r) => r,
-      (r) => r.remove()
+      (o) => o.append("circle").attr("stroke-width", "1.5").attr("r", 0).on("click", (m, y) => this.handleClick(m, y)).on("mousedown", B),
+      (o) => o,
+      (o) => o.remove()
+    ), z = this.observer, $ = u.selectAll(b("foreignObject")).data(
+      (o) => [o],
+      (o) => o.state.key
+    ), C = $.enter().append("foreignObject").attr("class", "markmap-foreign").attr("x", n).attr("y", 0).style("opacity", 0).on("mousedown", B).on("dblclick", B);
+    C.append("xhtml:div").append("xhtml:div").html((o) => o.content).attr("xmlns", "http://www.w3.org/1999/xhtml"), C.each(function() {
+      var m;
+      const o = (m = this.firstChild) == null ? void 0 : m.firstChild;
+      z.observe(o);
+    });
+    const A = p.selectAll(
+      b("foreignObject")
     );
-    this.transition(it).attr("r", 6).attr("cx", (r) => r.ySize - n).attr("cy", (r) => r.xSize).attr("stroke", (r) => c(r.data)).attr(
+    A.each(function() {
+      var m;
+      const o = (m = this.firstChild) == null ? void 0 : m.firstChild;
+      z.unobserve(o);
+    });
+    const D = C.merge($), Z = c.flatMap(
+      (o) => {
+        var m;
+        return (m = o.payload) != null && m.fold ? [] : o.children.map((y) => ({ source: o, target: y }));
+      }
+    ), w = this.g.selectAll(b("path")).data(Z, (o) => o.target.state.key), q = w.exit(), F = w.enter().insert("path", "g").attr("class", "markmap-link").attr("data-depth", (o) => o.target.state.depth).attr("data-path", (o) => o.target.state.path), J = F.merge(w);
+    this.svg.style(
+      "--markmap-max-width",
+      l ? `${l}px` : null
+    ), await new Promise(requestAnimationFrame), this._relayout(), this.transition(p).attr("transform", (o) => {
+      const m = a.x + a.width - o.state.rect.width, y = a.y + a.height / 2 - o.state.rect.height;
+      return `translate(${m},${y})`;
+    }).remove(), h.attr(
+      "transform",
+      (o) => `translate(${a.x + a.width - o.state.rect.width},${a.y + a.height / 2 - o.state.rect.height})`
+    ), this.transition(u).attr(
+      "transform",
+      (o) => `translate(${o.state.rect.x},${o.state.rect.y - o.state.rect.height / 2})`
+    ), this.transition(x).attr("x1", (o) => o.state.rect.width).attr("x2", (o) => o.state.rect.width), f.attr("x1", (o) => o.state.rect.width).attr("x2", (o) => o.state.rect.width), v.attr("y1", (o) => o.state.rect.height).attr("y2", (o) => o.state.rect.height).attr("stroke", (o) => s(o)), this.transition(v).attr("x1", -1).attr("x2", (o) => o.state.rect.width + 2).attr("stroke-width", H), k.attr("cx", (o) => o.state.rect.width).attr("cy", (o) => o.state.rect.height).attr("stroke", (o) => s(o)).attr(
       "fill",
-      (r) => {
-        var d;
-        return (d = r.data.payload) != null && d.fold && r.data.children ? c(r.data) : "var(--markmap-circle-open-bg)";
-      }
-    );
-    const rt = E.selectAll(
-      C("foreignObject")
-    ).data(
-      (r) => [r],
-      (r) => r.data.state.key
-    ).join(
-      (r) => {
-        const d = r.append("foreignObject").attr("class", "markmap-foreign").attr("x", i).attr("y", 0).style("opacity", 0).on("mousedown", D).on("dblclick", D);
-        return d.append("xhtml:div").select(function(R) {
-          const X = R.data.state.el.cloneNode(!0);
-          return this.replaceWith(X), X;
-        }).attr("xmlns", "http://www.w3.org/1999/xhtml"), d;
-      },
-      (r) => r,
-      (r) => r.remove()
-    ).attr(
-      "width",
-      (r) => Math.max(0, r.ySize - n - i * 2)
-    ).attr("height", (r) => r.xSize);
-    this.transition(rt).style("opacity", 1);
-    const ot = this.g.selectAll(
-      C("path")
-    ).data(h, (r) => r.target.data.state.key).join(
-      (r) => {
-        const d = [
-          v + f.ySize - n,
-          k + f.xSize / 2
-        ];
-        return r.insert("path", "g").attr("class", "markmap-link").attr("data-depth", (S) => S.target.data.state.depth).attr("data-path", (S) => S.target.data.state.path).attr("d", u({ source: d, target: d }));
-      },
-      (r) => r,
-      (r) => {
-        const d = [
-          f.y + f.ySize - n,
-          f.x + f.xSize / 2
-        ];
-        return this.transition(r).attr("d", u({ source: d, target: d })).remove();
-      }
-    );
-    this.transition(ot).attr("stroke", (r) => c(r.target.data)).attr("stroke-width", (r) => W(r.target)).attr("d", (r) => {
-      const d = r.source, S = r.target, R = [
-        d.y + d.ySize - n,
-        d.x + d.xSize / 2
-      ], X = [
-        S.y,
-        S.x + S.xSize / 2
+      (o) => {
+        var m;
+        return (m = o.payload) != null && m.fold && o.children ? s(o) : "var(--markmap-circle-open-bg)";
+      }
+    ), this.transition(k).attr("r", 6), this.transition(A).style("opacity", 0), D.attr("width", (o) => Math.max(0, o.state.rect.width - n * 2)).attr("height", (o) => o.state.rect.height), this.transition(D).style("opacity", 1);
+    const S = [
+      a.x + a.width,
+      a.y + a.height / 2
+    ];
+    this.transition(q).attr("d", M({ source: S, target: S })).remove(), F.attr(
+      "d",
+      M({ source: S, target: S })
+    ), this.transition(J).attr("stroke", (o) => s(o.target)).attr("stroke-width", (o) => H(o.target)).attr("d", (o) => {
+      const m = o.source, y = o.target, Q = [
+        m.state.rect.x + m.state.rect.width,
+        m.state.rect.y + m.state.rect.height / 2
+      ], tt = [
+        y.state.rect.x,
+        y.state.rect.y + y.state.rect.height / 2
       ];
-      return u({ source: R, target: X });
-    }), p.forEach((r) => {
-      r.data.state.x0 = r.x, r.data.state.y0 = r.y;
-    });
+      return M({ source: Q, target: tt });
+    }), r && this.fit();
   }
   transition(t) {
     const { duration: n } = this.options;
@@ -859,21 +730,21 @@ class et {
    * Fit the content to the viewport.
    */
   async fit(t = this.options.maxInitialScale) {
-    const n = this.svg.node(), { width: i, height: o } = n.getBoundingClientRect(), { fitRatio: a } = this.options, { minX: c, maxX: s, minY: l, maxY: p } = this.state, h = p - l, u = s - c, g = Math.min(
-      i / h * a,
-      o / u * a,
+    const n = this.svg.node(), { width: r, height: s } = n.getBoundingClientRect(), { fitRatio: l } = this.options, { x1: c, y1: i, x2: a, y2: d } = this.state.rect, h = a - c, p = d - i, u = Math.min(
+      r / h * l,
+      s / p * l,
       t
-    ), x = mt.translate(
-      (i - h * g) / 2 - l * g,
-      (o - u * g) / 2 - c * g
-    ).scale(g);
-    return this.transition(this.svg).call(this.zoom.transform, x).end().catch(T);
+    ), g = ct.translate(
+      (r - h * u) / 2 - c * u,
+      (s - p * u) / 2 - i * u
+    ).scale(u);
+    return this.transition(this.svg).call(this.zoom.transform, g).end().catch(R);
   }
   findElement(t) {
     let n;
-    return this.g.selectAll(C("g")).each(function(o) {
-      o.data === t && (n = {
-        data: o,
+    return this.g.selectAll(b("g")).each(function(s) {
+      s === t && (n = {
+        data: s,
         g: this
       });
     }), n;
@@ -882,57 +753,58 @@ class et {
    * Pan the content to make the provided node visible in the viewport.
    */
   async ensureView(t, n) {
-    var k;
-    const i = (k = this.findElement(t)) == null ? void 0 : k.data;
-    if (!i) return;
-    const o = this.svg.node(), { spacingHorizontal: a } = this.options, c = o.getBoundingClientRect(), s = A(o), [l, p] = [
-      i.y,
-      i.y + i.ySize - a + 2
-    ].map((v) => v * s.k + s.x), [h, u] = [
-      i.x - i.xSize / 2,
-      i.x + i.xSize / 2
-    ].map((v) => v * s.k + s.y), g = {
+    var v;
+    const r = (v = this.findElement(t)) == null ? void 0 : v.data;
+    if (!r) return;
+    const s = this.svg.node(), l = s.getBoundingClientRect(), c = j(s), [i, a] = [
+      r.state.rect.x,
+      r.state.rect.x + r.state.rect.width + 2
+    ].map((k) => k * c.k + c.x), [d, h] = [
+      r.state.rect.y - r.state.rect.height / 2,
+      r.state.rect.y + r.state.rect.height / 2
+    ].map((k) => k * c.k + c.y), p = {
       left: 0,
       right: 0,
       top: 0,
       bottom: 0,
       ...n
-    }, x = [g.left - l, c.width - g.right - p], m = [g.top - h, c.height - g.bottom - u], y = x[0] * x[1] > 0 ? V(x, Math.abs) / s.k : 0, f = m[0] * m[1] > 0 ? V(m, Math.abs) / s.k : 0;
-    if (y || f) {
-      const v = s.translate(y, f);
-      return this.transition(this.svg).call(this.zoom.transform, v).end().catch(T);
+    }, u = [p.left - i, l.width - p.right - a], g = [p.top - d, l.height - p.bottom - h], f = u[0] * u[1] > 0 ? L(u, Math.abs) / c.k : 0, x = g[0] * g[1] > 0 ? L(g, Math.abs) / c.k : 0;
+    if (f || x) {
+      const k = c.translate(f, x);
+      return this.transition(this.svg).call(this.zoom.transform, k).end().catch(R);
     }
   }
   /**
    * Scale content with it pinned at the center of the viewport.
    */
   async rescale(t) {
-    const n = this.svg.node(), { width: i, height: o } = n.getBoundingClientRect(), a = i / 2, c = o / 2, s = A(n), l = s.translate(
-      (a - s.x) * (1 - t) / s.k,
-      (c - s.y) * (1 - t) / s.k
+    const n = this.svg.node(), { width: r, height: s } = n.getBoundingClientRect(), l = r / 2, c = s / 2, i = j(n), a = i.translate(
+      (l - i.x) * (1 - t) / i.k,
+      (c - i.y) * (1 - t) / i.k
     ).scale(t);
-    return this.transition(this.svg).call(this.zoom.transform, l).end().catch(T);
+    return this.transition(this.svg).call(this.zoom.transform, a).end().catch(R);
   }
   destroy() {
     this.svg.on(".zoom", null), this.svg.html(null), this.revokers.forEach((t) => {
       t();
     });
   }
-  static create(t, n, i = null) {
-    const o = new et(t, n);
-    return i && (o.setData(i), requestAnimationFrame(() => {
-      o.fit();
-    })), o;
+  static create(t, n, r = null) {
+    const s = new Y(t, n);
+    return r && s.setData(r).then(() => {
+      s.fit();
+    }), s;
   }
 }
 export {
-  et as Markmap,
-  gt as defaultColorFn,
-  P as defaultOptions,
-  Se as deriveOptions,
-  be as globalCSS,
-  K as isMacintosh,
-  Ce as loadCSS,
-  we as loadJS,
-  ye as refreshHook
+  Y as Markmap,
+  dt as defaultColorFn,
+  W as defaultOptions,
+  se as deriveOptions,
+  oe as globalCSS,
+  P as isMacintosh,
+  ce as loadCSS,
+  he as loadJS,
+  ne as refreshHook,
+  pt as simpleHash
 };