markmap-view 0.16.0 → 0.16.3-web.2

package/dist/browser/index.js

@@ -1154,7 +1154,7 @@
     };
   };
   const containerCSS = "/* used for pre-rendering to get the size of each node */\n.markmap-container {\n  position: absolute;\n  width: 0;\n  height: 0;\n  top: -100px;\n  left: -100px;\n  overflow: hidden;\n}\n.markmap-container > .markmap-foreign {\n    display: inline-block;\n  }\n/* first-child for line wrapping, last-child for max-width detection */\n.markmap-container > .markmap-foreign > div:last-child,\n        \n        .markmap-container > .markmap-foreign > div:last-child :not(pre) {\n          white-space: nowrap;\n        }\n.markmap-container > .markmap-foreign > div:last-child code {\n          white-space: inherit;\n        }\n";
-  const css = ".markmap {\n  --markmap-max-width: none;\n  --markmap-a-color: #0097e6;\n  --markmap-a-hover-color: #00a8ff;\n  --markmap-code-bg: #f0f0f0;\n  --markmap-code-color: #555;\n  --markmap-highlight-bg: #ffeaa7;\n  --markmap-table-border: 1px solid currentColor;\n  --markmap-font: 300 16px/20px sans-serif;\n\n  font: var(--markmap-font);\n}\n\n  .markmap-link {\n    fill: none;\n  }\n\n  .markmap-node > circle {\n      cursor: pointer;\n    }\n\n  .markmap-foreign {\n    display: inline-block;\n  }\n\n  .markmap-foreign a {\n      color: var(--markmap-a-color);\n    }\n\n  .markmap-foreign a:hover {\n        color: var(--markmap-a-hover-color);\n      }\n\n  .markmap-foreign code {\n      padding: 0.25em;\n      font-size: calc(1em - 2px);\n      color: var(--markmap-code-color);\n      background-color: var(--markmap-code-bg);\n      border-radius: 2px;\n    }\n\n  .markmap-foreign pre {\n      margin: 0;\n    }\n\n  .markmap-foreign pre > code {\n        display: block;\n      }\n\n  .markmap-foreign del {\n      text-decoration: line-through;\n    }\n\n  .markmap-foreign em {\n      font-style: italic;\n    }\n\n  .markmap-foreign strong {\n      font-weight: bold;\n    }\n\n  .markmap-foreign mark {\n      background: var(--markmap-highlight-bg);\n    }\n\n  .markmap-foreign table,\n    .markmap-foreign th,\n    .markmap-foreign td {\n      border-collapse: collapse;\n      border: var(--markmap-table-border);\n    }\n\n  .markmap-foreign img {\n      display: inline-block;\n    }\n\n  .markmap-foreign-testing-max {\n    max-width: var(--markmap-max-width);\n  }\n\n  .markmap-foreign-testing-max img {\n      max-width: var(--markmap-max-width);\n      max-height: none;\n    }\n";
+  const css = ".markmap {\n  --markmap-max-width: none;\n  --markmap-a-color: #0097e6;\n  --markmap-a-hover-color: #00a8ff;\n  --markmap-code-bg: #f0f0f0;\n  --markmap-code-color: #555;\n  --markmap-highlight-bg: #ffeaa7;\n  --markmap-table-border: 1px solid currentColor;\n  --markmap-font: 300 16px/20px sans-serif;\n  --markmap-circle-open-bg: #fff;\n  --markmap-text-color: #333;\n\n  font: var(--markmap-font);\n  color: var(--markmap-text-color);\n}\n\n  .markmap-link {\n    fill: none;\n  }\n\n  .markmap-node > circle {\n      cursor: pointer;\n    }\n\n  .markmap-foreign {\n    display: inline-block;\n  }\n\n  .markmap-foreign p {\n      margin: 0;\n    }\n\n  .markmap-foreign a {\n      color: var(--markmap-a-color);\n    }\n\n  .markmap-foreign a:hover {\n        color: var(--markmap-a-hover-color);\n      }\n\n  .markmap-foreign code {\n      padding: 0.25em;\n      font-size: calc(1em - 2px);\n      color: var(--markmap-code-color);\n      background-color: var(--markmap-code-bg);\n      border-radius: 2px;\n    }\n\n  .markmap-foreign pre {\n      margin: 0;\n    }\n\n  .markmap-foreign pre > code {\n        display: block;\n      }\n\n  .markmap-foreign del {\n      text-decoration: line-through;\n    }\n\n  .markmap-foreign em {\n      font-style: italic;\n    }\n\n  .markmap-foreign strong {\n      font-weight: bold;\n    }\n\n  .markmap-foreign mark {\n      background: var(--markmap-highlight-bg);\n    }\n\n  .markmap-foreign table,\n    .markmap-foreign th,\n    .markmap-foreign td {\n      border-collapse: collapse;\n      border: var(--markmap-table-border);\n    }\n\n  .markmap-foreign img {\n      display: inline-block;\n    }\n\n  .markmap-foreign svg {\n      fill: currentColor;\n    }\n\n  .markmap-foreign-testing-max {\n    max-width: var(--markmap-max-width);\n  }\n\n  .markmap-foreign-testing-max img {\n      max-width: var(--markmap-max-width);\n      max-height: none;\n    }\n\n.markmap-dark .markmap {\n  --markmap-circle-open-bg: #444;\n  --markmap-text-color: #eee;\n}\n";
   const globalCSS = css;
   function linkWidth(nodeData) {
     const data = nodeData.data;
@@ -1462,7 +1462,7 @@
         "fill",
         (d) => {
           var _a;
-          return ((_a = d.data.payload) == null ? void 0 : _a.fold) && d.data.children ? color(d.data) : "#fff";
+          return ((_a = d.data.payload) == null ? void 0 : _a.fold) && d.data.children ? color(d.data) : "var(--markmap-circle-open-bg)";
         }
       );
       const foreignObject = nodeMerge.selectAll(

package/dist/index.js

@@ -1,6 +1,6 @@
 import { Hook as st, getId as at, debounce as lt, addClass as ct, walkTree as T, childSelector as C, noop as M } from "markmap-common";
 import { loadCSS as Ce, loadJS as we } from "markmap-common";
-import { scaleOrdinal as V, schemeCategory10 as ht, zoomTransform as A, select as dt, zoom as ut, linkHorizontal as pt, min as H, max as L, zoomIdentity as ft, minIndex as mt } from "d3";
+import { scaleOrdinal as V, schemeCategory10 as ht, zoomTransform as A, select as dt, zoom as ut, linkHorizontal as pt, min as H, max as L, zoomIdentity as mt, minIndex as ft } from "d3";
 const K = typeof navigator < "u" && navigator.userAgent.includes("Macintosh"), gt = V(ht), P = {
   autoFit: !1,
   color: (e) => {
@@ -22,12 +22,12 @@ const K = typeof navigator < "u" && navigator.userAgent.includes("Macintosh"), g
   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];
+  const t = {}, n = { ...e }, { color: r, colorFreezeLevel: o } = n;
+  if ((r == null ? void 0 : r.length) === 1) {
+    const s = r[0];
     t.color = () => s;
-  } else if (i != null && i.length) {
-    const s = V(i);
+  } else if (r != null && r.length) {
+    const s = V(r);
     t.color = (l) => s(`${l.state.path}`);
   }
   if (o) {
@@ -78,27 +78,27 @@ function I(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);
+  for (const r in t)
+    if (!(r === "key" || r === "children" || r === "ref"))
+      if (r === "dangerouslySetInnerHTML")
+        e.innerHTML = t[r].__html;
+      else if (r === "innerHTML" || r === "textContent" || r === "innerText" || r === "value" && ["textarea", "select"].includes(e.tagName)) {
+        const o = t[r];
+        o != null && (e[r] = o);
       } else
-        i.startsWith("on") ? e[i.toLowerCase()] = t[i] : wt(e, i, t[i], n.isSvg);
+        r.startsWith("on") ? e[r.toLowerCase()] = t[r] : wt(e, r, t[r], n.isSvg);
 }
 const Ct = {
   className: "class",
   labelFor: "for"
 };
-function wt(e, t, n, i) {
+function wt(e, t, n, r) {
   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;
+    const o = r ? yt[t] : void 0;
     o !== void 0 ? e.setAttributeNS(o, t, n) : e.setAttribute(t, n);
   }
 }
@@ -116,17 +116,17 @@ function B(e, t = zt) {
   if (St(e)) {
     const {
       type: n,
-      props: i
+      props: r
     } = e;
     if (n === bt) {
       const a = document.createDocumentFragment();
-      if (i.children) {
-        const c = $(i.children, t);
+      if (r.children) {
+        const c = $(r.children, t);
         I(a, c);
       }
       return a;
     }
-    const o = n(i);
+    const o = n(r);
     return B(o, t);
   }
   if (kt(e))
@@ -134,14 +134,14 @@ function B(e, t = zt) {
   if (vt(e)) {
     let n;
     const {
-      type: i,
+      type: r,
       props: o
     } = e;
-    if (!t.isSvg && i === "svg" && (t = Object.assign({}, t, {
+    if (!t.isSvg && r === "svg" && (t = Object.assign({}, t, {
       isSvg: !0
-    })), t.isSvg ? n = document.createElementNS(xt, i) : n = document.createElement(i), Et(n, o, t), o.children) {
+    })), t.isSvg ? n = document.createElementNS(xt, r) : n = document.createElement(r), Et(n, o, t), o.children) {
       let c = t;
-      t.isSvg && i === "foreignObject" && (c = Object.assign({}, c, {
+      t.isSvg && r === "foreignObject" && (c = Object.assign({}, c, {
         isSvg: !1
       }));
       const s = $(o.children, c);
@@ -158,47 +158,47 @@ function O(e) {
   return B(e);
 }
 function jt(e) {
-  var t = 0, n = e.children, i = n && n.length;
-  if (!i)
+  var t = 0, n = e.children, r = n && n.length;
+  if (!r)
     t = 1;
   else
-    for (; --i >= 0; )
-      t += n[i].value;
+    for (; --r >= 0; )
+      t += n[r].value;
   e.value = t;
 }
 function Nt() {
   return this.eachAfter(jt);
 }
 function Rt(e) {
-  var t = this, n, i = [t], o, a, c;
+  var t = this, n, r = [t], o, a, c;
   do
-    for (n = i.reverse(), i = []; t = n.pop(); )
+    for (n = r.reverse(), r = []; 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);
+          r.push(o[a]);
+  while (r.length);
   return this;
 }
 function Tt(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]);
+  for (var t = this, n = [t], r, o; t = n.pop(); )
+    if (e(t), r = t.children, r)
+      for (o = r.length - 1; o >= 0; --o)
+        n.push(r[o]);
   return this;
 }
 function Mt(e) {
-  for (var t = this, n = [t], i = [], o, a, c; t = n.pop(); )
-    if (i.push(t), o = t.children, o)
+  for (var t = this, n = [t], r = [], o, a, c; t = n.pop(); )
+    if (r.push(t), o = t.children, o)
       for (a = 0, c = o.length; a < c; ++a)
         n.push(o[a]);
-  for (; t = i.pop(); )
+  for (; t = r.pop(); )
     e(t);
   return this;
 }
 function At(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, o = r && r.length; --o >= 0; )
+      n += r[o].value;
     t.value = n;
   });
 }
@@ -208,18 +208,18 @@ function _t(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;
+  for (var t = this, n = Dt(t, e), r = [t]; t !== n; )
+    t = t.parent, r.push(t);
+  for (var o = r.length; e !== n; )
+    r.splice(o, 0, e), e = e.parent;
+  return r;
 }
 function Dt(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();
+  var n = e.ancestors(), r = t.ancestors(), o = null;
+  for (e = n.pop(), t = r.pop(); e === t; )
+    o = e, e = n.pop(), t = r.pop();
   return o;
 }
 function $t() {
@@ -246,9 +246,9 @@ function Ht() {
   }), t;
 }
 function F(e, t) {
-  var n = new N(e), i = +e.value && (n.value = e.value), o, a = [n], c, s, l, p;
+  var n = new N(e), r = +e.value && (n.value = e.value), o, a = [n], c, s, l, p;
   for (t == null && (t = It); o = a.pop(); )
-    if (i && (o.value = +o.data.value), (s = t(o.data)) && (p = s.length))
+    if (r && (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(Yt);
@@ -318,7 +318,7 @@ const Vt = "d3-flextree", Kt = "2.1.2", Pt = "build/d3-flextree.js", Ut = "index
   prepare: "npm-run-all clean build lint test"
 }, ne = {
   "d3-hierarchy": "^1.1.5"
-}, ie = {
+}, re = {
   "babel-plugin-external-helpers": "^6.22.0",
   "babel-preset-es2015-rollup": "^3.0.0",
   d3: "^4.13.0",
@@ -334,7 +334,7 @@ const Vt = "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 = {
+}, ie = {
   name: Vt,
   version: Kt,
   main: Pt,
@@ -348,8 +348,8 @@ const Vt = "d3-flextree", Kt = "2.1.2", Pt = "build/d3-flextree.js", Ut = "index
   repository: te,
   scripts: ee,
   dependencies: ne,
-  devDependencies: ie
-}, { version: oe } = re, se = Object.freeze({
+  devDependencies: re
+}, { version: oe } = ie, se = Object.freeze({
   children: (e) => e.children,
   nodeSize: (e) => e.data.size,
   spacing: 0
@@ -360,7 +360,7 @@ function q(e) {
     const l = t[s];
     return typeof l == "function" ? l : () => l;
   }
-  function i(s) {
+  function r(s) {
     const l = c(a(), s, (p) => p.children);
     return l.update(), l.data;
   }
@@ -495,26 +495,26 @@ function q(e) {
         height: 0,
         length: 1
       });
-      const f = p(u) || [];
-      return x.children = f.length === 0 ? null : f.map((y) => h(y, x)), x.children && Object.assign(x, x.children.reduce(
-        (y, m) => ({
-          height: Math.max(y.height, m.height + 1),
-          length: y.length + m.length
+      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
         }),
         x
       )), x;
     };
     return h(l, null);
   }
-  return Object.assign(i, {
+  return Object.assign(r, {
     nodeSize(s) {
-      return arguments.length ? (t.nodeSize = s, i) : t.nodeSize;
+      return arguments.length ? (t.nodeSize = s, r) : t.nodeSize;
     },
     spacing(s) {
-      return arguments.length ? (t.spacing = s, i) : t.spacing;
+      return arguments.length ? (t.spacing = s, r) : t.spacing;
     },
     children(s) {
-      return arguments.length ? (t.children = s, i) : t.children;
+      return arguments.length ? (t.children = s, r) : t.children;
     },
     hierarchy(s, l) {
       const p = typeof l > "u" ? t.children : l;
@@ -522,34 +522,34 @@ function q(e) {
     },
     dump(s) {
       const l = n("nodeSize"), p = (h) => (u) => {
-        const g = h + "  ", x = h + "    ", { x: f, y } = u, m = l(u), k = u.children || [], v = k.length === 0 ? " " : `,${g}children: [${x}${k.map(p(x)).join(x)}${g}],${h}`;
-        return `{ size: [${m.join(", ")}],${g}x: ${f}, y: ${y}${v}},`;
+        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}},`;
       };
       return p(`
 `)(s);
     }
-  }), i;
+  }), r;
 }
 q.version = oe;
-const J = (e, t = 0) => (e.y = t, (e.children || []).reduce((n, i) => {
+const J = (e, t = 0) => (e.y = t, (e.children || []).reduce((n, r) => {
   const [o, a] = n;
-  J(i, e.y + e.ySize);
-  const c = (o === 0 ? i.lExt : i.rExt).bottom;
+  J(r, e.y + e.ySize);
+  const c = (o === 0 ? r.lExt : r.rExt).bottom;
   o !== 0 && le(e, o, a);
   const s = ge(c, o, a);
   return [o + 1, s];
-}, [0, null]), ae(e), me(e), e), Q = (e, t, n) => {
+}, [0, null]), ae(e), fe(e), e), Q = (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;
+  const r = t + e.relX;
+  return e.relX = r + e.prelim - n, e.prelim = 0, e.x = n + e.relX, (e.children || []).forEach((o) => Q(o, r, e.x)), e;
 }, ae = (e) => {
   (e.children || []).reduce((t, n) => {
-    const [i, o] = t, a = i + n.shift, c = o + a + n.change;
+    const [r, o] = t, a = r + n.shift, c = o + a + n.change;
     return n.relX += c, [a, 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;
+  const r = e.children[t - 1], o = e.children[t];
+  let a = r, c = r.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);
@@ -557,30 +557,30 @@ const J = (e, t = 0) => (e.y = t, (e.children || []).reduce((n, i) => {
     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));
   }
-  !a && s ? pe(e, t, s, l) : a && !s && fe(e, t, a, c);
+  !a && s ? pe(e, t, s, l) : a && !s && me(e, t, a, c);
 }, ce = (e, t) => {
   e.relX += t, e.lExtRelX += t, e.rExtRelX += t;
-}, he = (e, t, n, i) => {
+}, he = (e, t, n, r) => {
   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;
+    const c = r / a;
+    e.children[n + 1].shift += c, o.shift -= c, o.change -= r - c;
   }
-}, de = (e) => e.hasChildren ? e.firstChild : e.lThr, ue = (e) => e.hasChildren ? e.lastChild : e.rThr, pe = (e, t, n, i) => {
+}, de = (e) => e.hasChildren ? e.firstChild : e.lThr, ue = (e) => e.hasChildren ? e.lastChild : e.rThr, pe = (e, t, n, r) => {
   const o = e.firstChild, a = o.lExt, c = e.children[t];
   a.lThr = n;
-  const s = i - n.relX - o.lExtRelX;
+  const s = r - n.relX - o.lExtRelX;
   a.relX += s, a.prelim -= s, o.lExt = c.lExt, o.lExtRelX = c.lExtRelX;
-}, fe = (e, t, n, i) => {
+}, me = (e, t, n, r) => {
   const o = e.children[t], a = o.rExt, c = e.children[t - 1];
   a.rThr = n;
-  const s = i - n.relX - o.rExtRelX;
+  const s = r - n.relX - o.rExtRelX;
   a.relX += s, a.prelim -= s, o.rExt = c.rExt, o.rExtRelX = c.rExtRelX;
-}, me = (e) => {
+}, fe = (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,
@@ -595,13 +595,13 @@ 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;font:var(--markmap-font)}.markmap-link{fill:none}.markmap-node>circle{cursor:pointer}.markmap-foreign{display:inline-block}.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-testing-max{max-width:var(--markmap-max-width)}.markmap-foreign-testing-max img{max-width:var(--markmap-max-width);max-height:none}", be = tt;
+}, 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}.markmap-dark .markmap{--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);
 }
 function Y(e, t) {
-  const n = mt(e, t);
+  const n = ft(e, t);
   return e[n];
 }
 function D(e) {
@@ -610,20 +610,20 @@ function D(e) {
 const ye = new st();
 class et {
   constructor(t, n) {
-    this.options = P, this.revokers = [], this.imgCache = {}, this.handleZoom = (i) => {
-      const { transform: o } = i;
+    this.options = P, this.revokers = [], this.imgCache = {}, this.handleZoom = (r) => {
+      const { transform: o } = r;
       this.g.attr("transform", o);
-    }, this.handlePan = (i) => {
-      i.preventDefault();
+    }, this.handlePan = (r) => {
+      r.preventDefault();
       const o = A(this.svg.node()), a = o.translate(
-        -i.deltaX / o.k,
-        -i.deltaY / o.k
+        -r.deltaX / o.k,
+        -r.deltaY / o.k
       );
       this.svg.call(this.zoom.transform, a);
-    }, this.handleClick = (i, o) => {
+    }, this.handleClick = (r, 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 = {
+      (K ? r.metaKey : r.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((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") || at(),
       minX: 0,
       maxX: 0,
@@ -636,8 +636,8 @@ class et {
     );
   }
   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 && tt, r].filter(Boolean).join(`
 `);
   }
   updateStyle() {
@@ -650,11 +650,11 @@ class et {
   }
   toggleNode(t, n = !1) {
     var o, a;
-    const i = (o = t.payload) != null && o.fold ? 0 : 1;
+    const r = (o = t.payload) != null && o.fold ? 0 : 1;
     n ? T(t, (c, s) => {
       c.payload = {
         ...c.payload,
-        fold: i
+        fold: r
       }, s();
     }) : t.payload = {
       ...t.payload,
@@ -663,7 +663,7 @@ class et {
   }
   initializeData(t) {
     let n = 0;
-    const { color: i, nodeMinHeight: o, maxWidth: a, initialExpandLevel: c } = this.options, { id: s } = this.state, l = O(
+    const { color: r, 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(`
@@ -672,50 +672,50 @@ class et {
     document.body.append(l, p);
     const h = a ? `--markmap-max-width: ${a}px` : "";
     let u = 0, g = 0;
-    T(t, (f, y, m) => {
+    T(t, (m, y, f) => {
       var b, w, z;
-      g += 1, f.children = (b = f.children) == null ? void 0 : b.map((E) => ({ ...E })), n += 1;
+      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: f.content } })
+            children: /* @__PURE__ */ j("div", { dangerouslySetInnerHTML: { __html: m.content } })
           }
         )
       );
-      l.append(k), f.state = {
-        ...f.state,
+      l.append(k), m.state = {
+        ...m.state,
         depth: g,
         id: n,
         el: k.firstChild
-      }, f.state.path = [(w = m == null ? void 0 : m.state) == null ? void 0 : w.path, f.state.id].filter(Boolean).join("."), i(f);
-      const v = ((z = f.payload) == null ? void 0 : z.fold) === 2;
-      v ? u += 1 : (u || c >= 0 && f.state.depth >= c) && (f.payload = { ...f.payload, fold: 1 }), y(), v && (u -= 1), g -= 1;
+      }, m.state.path = [(w = f == null ? void 0 : f.state) == null ? void 0 : w.path, m.state.id].filter(Boolean).join("."), r(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;
     });
     const x = Array.from(l.childNodes).map(
-      (f) => f.firstChild
+      (m) => m.firstChild
     );
-    this._checkImages(l), x.forEach((f) => {
+    this._checkImages(l), x.forEach((m) => {
       var y;
-      (y = f.parentNode) == null || y.append(f.cloneNode(!0));
-    }), T(t, (f, y, m) => {
+      (y = m.parentNode) == null || y.append(m.cloneNode(!0));
+    }), T(t, (m, y, f) => {
       var b;
-      const k = f.state, v = k.el.getBoundingClientRect();
-      f.content = k.el.innerHTML, k.size = [
+      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 = m == null ? void 0 : m.state) == null ? void 0 : b.id, k.id].filter(Boolean).join(".") + // FIXME: find a way to check content hash
-      f.content, y();
+      ], 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);
+      const r = this.imgCache[n.src];
+      r != null && r[0] ? [n.width, n.height] = r : r || this._loadImage(n.src);
     });
   }
   _loadImage(t) {
@@ -737,115 +737,115 @@ class et {
   renderData(t) {
     if (!this.state.data)
       return;
-    const { spacingHorizontal: n, paddingX: i, spacingVertical: o, autoFit: a, color: c } = this.options, s = q({}).children((r) => {
+    const { spacingHorizontal: n, paddingX: r, spacingVertical: o, autoFit: a, color: c } = this.options, s = q({}).children((i) => {
       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);
+      if (!((d = i.payload) != null && d.fold))
+        return i.children;
+    }).nodeSize((i) => {
+      const [d, S] = i.data.state.size;
+      return [S, d + (d ? r * 2 : 0) + n];
+    }).spacing((i, d) => i.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 = L(p, (r) => r.x + r.xSize / 2), f = H(p, (r) => r.y), y = L(p, (r) => r.y + r.ySize - n);
+    const p = l.descendants().reverse(), h = l.links(), u = pt(), g = H(p, (i) => i.x - i.xSize / 2), x = L(p, (i) => i.x + i.xSize / 2), m = H(p, (i) => i.y), y = L(p, (i) => i.y + i.ySize - n);
     Object.assign(this.state, {
       minX: g,
       maxX: x,
-      minY: f,
+      minY: m,
       maxY: y
     }), a && this.fit();
-    const m = t && p.find((r) => r.data === t) || l, k = m.data.state.x0 ?? m.x, v = m.data.state.y0 ?? m.y, b = this.g.selectAll(
+    const f = t && p.find((i) => i.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(
+    ).data(p, (i) => i.data.state.key), w = b.enter().append("g").attr("data-depth", (i) => i.data.state.depth).attr("data-path", (i) => i.data.state.path).attr(
       "transform",
-      (r) => `translate(${v + m.ySize - r.ySize},${k + m.xSize / 2 - r.xSize})`
+      (i) => `translate(${v + f.ySize - i.ySize},${k + f.xSize / 2 - i.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(
+    z.select("line").attr("x1", (i) => i.ySize - n).attr("x2", (i) => i.ySize - n), z.select("foreignObject").style("opacity", 0), z.attr(
       "transform",
-      (r) => `translate(${m.y + m.ySize - r.ySize},${m.x + m.xSize / 2 - r.xSize})`
+      (i) => `translate(${f.y + f.ySize - i.ySize},${f.x + f.xSize / 2 - i.xSize})`
     ).remove();
     const E = b.merge(w).attr(
       "class",
-      (r) => {
+      (i) => {
         var d;
-        return ["markmap-node", ((d = r.data.payload) == null ? void 0 : d.fold) && "markmap-fold"].filter(Boolean).join(" ");
+        return ["markmap-node", ((d = i.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})`
+      (i) => `translate(${i.y},${i.x - i.xSize / 2})`
     );
     const nt = E.selectAll(
       C("line")
     ).data(
-      (r) => [r],
-      (r) => r.data.state.key
+      (i) => [i],
+      (i) => i.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()
+      (i) => i.append("line").attr("x1", (d) => d.ySize - n).attr("x2", (d) => d.ySize - n),
+      (i) => i,
+      (i) => i.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(
+    this.transition(nt).attr("x1", -1).attr("x2", (i) => i.ySize - n + 2).attr("y1", (i) => i.xSize).attr("y2", (i) => i.xSize).attr("stroke", (i) => c(i.data)).attr("stroke-width", W);
+    const rt = E.selectAll(
       C("circle")
     ).data(
-      (r) => {
+      (i) => {
         var d;
-        return (d = r.data.children) != null && d.length ? [r] : [];
+        return (d = i.data.children) != null && d.length ? [i] : [];
       },
-      (r) => r.data.state.key
+      (i) => i.data.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()
+      (i) => i.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),
+      (i) => i,
+      (i) => i.remove()
     );
-    this.transition(it).attr("r", 6).attr("cx", (r) => r.ySize - n).attr("cy", (r) => r.xSize).attr("stroke", (r) => c(r.data)).attr(
+    this.transition(rt).attr("r", 6).attr("cx", (i) => i.ySize - n).attr("cy", (i) => i.xSize).attr("stroke", (i) => c(i.data)).attr(
       "fill",
-      (r) => {
+      (i) => {
         var d;
-        return (d = r.data.payload) != null && d.fold && r.data.children ? c(r.data) : "#fff";
+        return (d = i.data.payload) != null && d.fold && i.data.children ? c(i.data) : "var(--markmap-circle-open-bg)";
       }
     );
-    const rt = E.selectAll(
+    const it = E.selectAll(
       C("foreignObject")
     ).data(
-      (r) => [r],
-      (r) => r.data.state.key
+      (i) => [i],
+      (i) => i.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);
+      (i) => {
+        const d = i.append("foreignObject").attr("class", "markmap-foreign").attr("x", r).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()
+      (i) => i,
+      (i) => i.remove()
     ).attr(
       "width",
-      (r) => Math.max(0, r.ySize - n - i * 2)
-    ).attr("height", (r) => r.xSize);
-    this.transition(rt).style("opacity", 1);
+      (i) => Math.max(0, i.ySize - n - r * 2)
+    ).attr("height", (i) => i.xSize);
+    this.transition(it).style("opacity", 1);
     const ot = this.g.selectAll(
       C("path")
-    ).data(h, (r) => r.target.data.state.key).join(
-      (r) => {
+    ).data(h, (i) => i.target.data.state.key).join(
+      (i) => {
         const d = [
-          v + m.ySize - n,
-          k + m.xSize / 2
+          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 }));
+        return i.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) => {
+      (i) => i,
+      (i) => {
         const d = [
-          m.y + m.ySize - n,
-          m.x + m.xSize / 2
+          f.y + f.ySize - n,
+          f.x + f.xSize / 2
         ];
-        return this.transition(r).attr("d", u({ source: d, target: d })).remove();
+        return this.transition(i).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 = [
+    this.transition(ot).attr("stroke", (i) => c(i.target.data)).attr("stroke-width", (i) => W(i.target)).attr("d", (i) => {
+      const d = i.source, S = i.target, R = [
         d.y + d.ySize - n,
         d.x + d.xSize / 2
       ], X = [
@@ -853,8 +853,8 @@ class et {
         S.x + S.xSize / 2
       ];
       return u({ source: R, target: X });
-    }), p.forEach((r) => {
-      r.data.state.x0 = r.x, r.data.state.y0 = r.y;
+    }), p.forEach((i) => {
+      i.data.state.x0 = i.x, i.data.state.y0 = i.y;
     });
   }
   transition(t) {
@@ -865,13 +865,13 @@ class et {
    * Fit the content to the viewport.
    */
   async fit() {
-    const t = this.svg.node(), { width: n, height: i } = t.getBoundingClientRect(), { fitRatio: o } = this.options, { minX: a, maxX: c, minY: s, maxY: l } = this.state, p = l - s, h = c - a, u = Math.min(
+    const t = this.svg.node(), { width: n, height: r } = t.getBoundingClientRect(), { fitRatio: o } = this.options, { minX: a, maxX: c, minY: s, maxY: l } = this.state, p = l - s, h = c - a, u = Math.min(
       n / p * o,
-      i / h * o,
+      r / h * o,
       2
-    ), g = ft.translate(
+    ), g = mt.translate(
       (n - p * u) / 2 - s * u,
-      (i - h * u) / 2 - a * u
+      (r - h * u) / 2 - a * u
     ).scale(u);
     return this.transition(this.svg).call(this.zoom.transform, g).end().catch(M);
   }
@@ -891,24 +891,24 @@ class et {
    */
   async ensureView(t, n) {
     var k;
-    const i = (k = this.findElement(t)) == null ? void 0 : k.data;
-    if (!i)
+    const r = (k = this.findElement(t)) == null ? void 0 : k.data;
+    if (!r)
       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
+      r.y,
+      r.y + r.ySize - a + 2
     ].map((v) => v * s.k + s.x), [h, u] = [
-      i.x - i.xSize / 2,
-      i.x + i.xSize / 2
+      r.x - r.xSize / 2,
+      r.x + r.xSize / 2
     ].map((v) => v * s.k + s.y), g = {
       left: 0,
       right: 0,
       top: 0,
       bottom: 0,
       ...n
-    }, x = [g.left - l, c.width - g.right - p], f = [g.top - h, c.height - g.bottom - u], y = x[0] * x[1] > 0 ? Y(x, Math.abs) / s.k : 0, m = f[0] * f[1] > 0 ? Y(f, Math.abs) / s.k : 0;
-    if (y || m) {
-      const v = s.translate(y, m);
+    }, x = [g.left - l, c.width - g.right - p], m = [g.top - h, c.height - g.bottom - u], y = x[0] * x[1] > 0 ? Y(x, Math.abs) / s.k : 0, f = m[0] * m[1] > 0 ? Y(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(M);
     }
   }
@@ -916,7 +916,7 @@ class et {
    * 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(
+    const n = this.svg.node(), { width: r, height: o } = n.getBoundingClientRect(), a = r / 2, c = o / 2, s = A(n), l = s.translate(
       (a - s.x) * (1 - t) / s.k,
       (c - s.y) * (1 - t) / s.k
     ).scale(t);
@@ -927,9 +927,9 @@ class et {
       t();
     });
   }
-  static create(t, n, i = null) {
+  static create(t, n, r = null) {
     const o = new et(t, n);
-    return i && (o.setData(i), o.fit()), o;
+    return r && (o.setData(r), o.fit()), o;
   }
 }
 export {

package/dist/view.d.ts

@@ -1,7 +1,7 @@
 import type * as d3 from 'd3';
 import { FlextreeNode } from 'd3-flextree';
 import { Hook, IMarkmapOptions, INode, IPureNode } from 'markmap-common';
-import { IMarkmapState, IPadding, ID3SVGElement } from './types';
+import { ID3SVGElement, IMarkmapState, IPadding } from './types';
 export declare const globalCSS: string;
 /**
  * A global hook to refresh all markmaps when called.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "markmap-view",
-  "version": "0.16.0",
+  "version": "0.16.3-web.2+0f4c3f8",
   "description": "View markmaps in browser",
   "author": "Gerald <gera2ld@live.com>",
   "license": "MIT",
@@ -45,10 +45,10 @@
   },
   "devDependencies": {
     "@types/d3-flextree": "^2.1.1",
-    "markmap-common": "0.16.0"
+    "markmap-common": "0.16.3-web.2+0f4c3f8"
   },
   "peerDependencies": {
     "markmap-common": "*"
   },
-  "gitHead": "caf3f840ad39c240ba522bfea83c57de62c6cac4"
+  "gitHead": "0f4c3f84ff21f0957ec3dbf338ed7a453f050638"
 }