markmap-view 0.18.0 → 0.18.2

package/dist/browser/index.js

@@ -978,6 +978,7 @@
         if (isMacintosh ? e.metaKey : e.ctrlKey) recursive = !recursive;
         this.toggleNode(d, recursive);
       };
+      this.ensureView = this.ensureVisible;
       this.svg = svg.datum ? svg : d32.select(svg);
       this.styleNode = this.svg.append("style");
       this.zoom = d32.zoom().filter((event) => {
@@ -1099,7 +1100,7 @@
         const node = fnode.data;
         node.state.rect = {
           x: fnode.y,
-          y: fnode.x,
+          y: fnode.x - fnode.xSize / 2,
           width: fnode.ySize - spacingHorizontal,
           height: fnode.xSize
         };
@@ -1225,16 +1226,16 @@
       this._relayout();
       this.transition(mmGExit).attr("transform", (d) => {
         const targetX = originRect.x + originRect.width - d.state.rect.width;
-        const targetY = originRect.y + originRect.height / 2 - d.state.rect.height;
+        const targetY = originRect.y + originRect.height - d.state.rect.height;
         return `translate(${targetX},${targetY})`;
       }).remove();
       mmGEnter.attr(
         "transform",
-        (d) => `translate(${originRect.x + originRect.width - d.state.rect.width},${originRect.y + originRect.height / 2 - d.state.rect.height})`
+        (d) => `translate(${originRect.x + originRect.width - d.state.rect.width},${originRect.y + originRect.height - d.state.rect.height})`
       );
       this.transition(mmGMerge).attr(
         "transform",
-        (d) => `translate(${d.state.rect.x},${d.state.rect.y - d.state.rect.height / 2})`
+        (d) => `translate(${d.state.rect.x},${d.state.rect.y})`
       );
       this.transition(mmLineExit).attr("x1", (d) => d.state.rect.width).attr("x2", (d) => d.state.rect.width);
       mmLineEnter.attr("x1", (d) => d.state.rect.width).attr("x2", (d) => d.state.rect.width);
@@ -1253,7 +1254,7 @@
       this.transition(mmFoMerge).style("opacity", 1);
       const pathOrigin = [
         originRect.x + originRect.width,
-        originRect.y + originRect.height / 2
+        originRect.y + originRect.height
       ];
       this.transition(mmPathExit).attr("d", linkShape({ source: pathOrigin, target: pathOrigin })).remove();
       mmPathEnter.attr(
@@ -1265,11 +1266,11 @@
         const origTarget = d.target;
         const source = [
           origSource.state.rect.x + origSource.state.rect.width,
-          origSource.state.rect.y + origSource.state.rect.height / 2
+          origSource.state.rect.y + origSource.state.rect.height
         ];
         const target = [
           origTarget.state.rect.x,
-          origTarget.state.rect.y + origTarget.state.rect.height / 2
+          origTarget.state.rect.y + origTarget.state.rect.height
         ];
         return linkShape({ source, target });
       });
@@ -1315,7 +1316,7 @@
     /**
      * Pan the content to make the provided node visible in the viewport.
      */
-    async ensureView(node, padding) {
+    async ensureVisible(node, padding) {
       var _a;
       const itemData = (_a = this.findElement(node)) == null ? void 0 : _a.data;
       if (!itemData) return;
@@ -1327,8 +1328,8 @@
         itemData.state.rect.x + itemData.state.rect.width + 2
       ].map((x) => x * transform.k + transform.x);
       const [top, bottom] = [
-        itemData.state.rect.y - itemData.state.rect.height / 2,
-        itemData.state.rect.y + itemData.state.rect.height / 2
+        itemData.state.rect.y,
+        itemData.state.rect.y + itemData.state.rect.height
       ].map((y) => y * transform.k + transform.y);
       const pd = {
         left: 0,
@@ -1346,6 +1347,31 @@
         return this.transition(this.svg).call(this.zoom.transform, newTransform).end().catch(noop);
       }
     }
+    async centerNode(node, padding) {
+      var _a;
+      const itemData = (_a = this.findElement(node)) == null ? void 0 : _a.data;
+      if (!itemData) return;
+      const svgNode = this.svg.node();
+      const relRect = svgNode.getBoundingClientRect();
+      const transform = d32.zoomTransform(svgNode);
+      const x = (itemData.state.rect.x + itemData.state.rect.width / 2) * transform.k + transform.x;
+      const y = (itemData.state.rect.y + itemData.state.rect.height / 2) * transform.k + transform.y;
+      const pd = {
+        left: 0,
+        right: 0,
+        top: 0,
+        bottom: 0,
+        ...padding
+      };
+      const cx = (pd.left + relRect.width - pd.right) / 2;
+      const cy = (pd.top + relRect.height - pd.bottom) / 2;
+      const dx = (cx - x) / transform.k;
+      const dy = (cy - y) / transform.k;
+      if (dx || dy) {
+        const newTransform = transform.translate(dx, dy);
+        return this.transition(this.svg).call(this.zoom.transform, newTransform).end().catch(noop);
+      }
+    }
     /**
      * Scale content with it pinned at the center of the viewport.
      */

package/dist/index.js

@@ -1,7 +1,7 @@
-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 { Hook as et, getId as nt, debounce as rt, addClass as it, walkTree as j, childSelector as b, noop as E } 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 = {
+import { scaleOrdinal as L, schemeCategory10 as st, linkHorizontal as ot, zoomTransform as C, 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 = L(st), W = {
   autoFit: !1,
   color: (e) => {
     var t;
@@ -23,12 +23,12 @@ const P = typeof navigator < "u" && navigator.userAgent.includes("Macintosh"), d
   toggleRecursively: !1
 };
 function se(e) {
-  const t = {}, n = { ...e }, { color: r, colorFreezeLevel: s } = n;
-  if ((r == null ? void 0 : r.length) === 1) {
-    const i = r[0];
+  const t = {}, r = { ...e }, { color: n, colorFreezeLevel: s } = r;
+  if ((n == null ? void 0 : n.length) === 1) {
+    const i = n[0];
     t.color = () => i;
-  } else if (r != null && r.length) {
-    const i = N(r);
+  } else if (n != null && n.length) {
+    const i = L(n);
     t.color = (a) => i(`${a.state.path}`);
   }
   if (s) {
@@ -52,55 +52,55 @@ function se(e) {
     "spacingHorizontal",
     "spacingVertical"
   ].forEach((i) => {
-    const a = n[i];
+    const a = r[i];
     typeof a == "number" && (t[i] = a);
   }), ["zoom", "pan"].forEach((i) => {
-    const a = n[i];
+    const a = r[i];
     a != null && (t[i] = !!a);
   }), t;
 }
 function pt(e) {
   let t = 0;
-  for (let n = 0; n < e.length; n++)
-    t = (t << 5) - t + e.charCodeAt(n) | 0;
+  for (let r = 0; r < e.length; r++)
+    t = (t << 5) - t + e.charCodeAt(r) | 0;
   return (t >>> 0).toString(36);
 }
 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;
+  var t = 0, r = e.children, n = r && r.length;
+  if (!n) t = 1;
+  else for (; --n >= 0; ) t += r[n].value;
   e.value = t;
 }
 function mt() {
   return this.eachAfter(ut);
 }
 function gt(e) {
-  var t = this, n, r = [t], s, l, c;
+  var t = this, r, n = [t], s, l, c;
   do
-    for (n = r.reverse(), r = []; t = n.pop(); )
+    for (r = n.reverse(), n = []; t = r.pop(); )
       if (e(t), s = t.children, s) for (l = 0, c = s.length; l < c; ++l)
-        r.push(s[l]);
-  while (r.length);
+        n.push(s[l]);
+  while (n.length);
   return this;
 }
 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]);
+  for (var t = this, r = [t], n, s; t = r.pop(); )
+    if (e(t), n = t.children, n) for (s = n.length - 1; s >= 0; --s)
+      r.push(n[s]);
   return this;
 }
 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(); )
+  for (var t = this, r = [t], n = [], s, l, c; t = r.pop(); )
+    if (n.push(t), s = t.children, s) for (l = 0, c = s.length; l < c; ++l)
+      r.push(s[l]);
+  for (; t = n.pop(); )
     e(t);
   return this;
 }
 function yt(e) {
   return this.eachAfter(function(t) {
-    for (var n = +e(t.data) || 0, r = t.children, s = r && r.length; --s >= 0; ) n += r[s].value;
-    t.value = n;
+    for (var r = +e(t.data) || 0, n = t.children, s = n && n.length; --s >= 0; ) r += n[s].value;
+    t.value = r;
   });
 }
 function kt(e) {
@@ -109,17 +109,17 @@ function kt(e) {
   });
 }
 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;
+  for (var t = this, r = bt(t, e), n = [t]; t !== r; )
+    t = t.parent, n.push(t);
+  for (var s = n.length; e !== r; )
+    n.splice(s, 0, e), e = e.parent;
+  return n;
 }
 function bt(e, t) {
   if (e === t) return e;
-  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();
+  var r = e.ancestors(), n = t.ancestors(), s = null;
+  for (e = r.pop(), t = n.pop(); e === t; )
+    s = e, e = r.pop(), t = n.pop();
   return s;
 }
 function zt() {
@@ -141,17 +141,17 @@ function Et() {
 }
 function Ct() {
   var e = this, t = [];
-  return e.each(function(n) {
-    n !== e && t.push({ source: n.parent, target: n });
+  return e.each(function(r) {
+    r !== e && t.push({ source: r.parent, target: r });
   }), t;
 }
 function O(e, t) {
-  var n = new E(e), r = +e.value && (n.value = e.value), s, l = [n], c, i, a, d;
+  var r = new w(e), n = +e.value && (r.value = e.value), s, l = [r], 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))
+    if (n && (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);
+        l.push(c = s.children[a] = new w(i[a])), c.parent = s, c.depth = s.depth + 1;
+  return r.eachBefore(jt);
 }
 function wt() {
   return O(this).eachBefore(Rt);
@@ -168,11 +168,11 @@ function jt(e) {
     e.height = t;
   while ((e = e.parent) && e.height < ++t);
 }
-function E(e) {
+function w(e) {
   this.data = e, this.depth = this.height = 0, this.parent = null;
 }
-E.prototype = O.prototype = {
-  constructor: E,
+w.prototype = O.prototype = {
+  constructor: w,
   count: mt,
   each: gt,
   eachAfter: xt,
@@ -186,20 +186,20 @@ E.prototype = O.prototype = {
   links: Ct,
   copy: wt
 };
-const Mt = "d3-flextree", Bt = "2.1.2", Ot = "build/d3-flextree.js", $t = "index", At = { name: "Chris Maloney", url: "http://chrismaloney.org" }, Ft = "Flexible tree layout algorithm that allows for variable node sizes.", Dt = ["d3", "d3-module", "layout", "tree", "hierarchy", "d3-hierarchy", "plugin", "d3-plugin", "infovis", "visualization", "2d"], Tt = "https://github.com/klortho/d3-flextree", _t = "WTFPL", Ht = { type: "git", url: "https://github.com/klortho/d3-flextree.git" }, Lt = { 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" }, Nt = { "d3-hierarchy": "^1.1.5" }, Pt = { "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" }, Wt = {
+const Mt = "d3-flextree", Bt = "2.1.2", Ot = "build/d3-flextree.js", $t = "index", At = { name: "Chris Maloney", url: "http://chrismaloney.org" }, Dt = "Flexible tree layout algorithm that allows for variable node sizes.", Ft = ["d3", "d3-module", "layout", "tree", "hierarchy", "d3-hierarchy", "plugin", "d3-plugin", "infovis", "visualization", "2d"], Tt = "https://github.com/klortho/d3-flextree", _t = "WTFPL", Ht = { type: "git", url: "https://github.com/klortho/d3-flextree.git" }, Nt = { 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" }, Lt = { "d3-hierarchy": "^1.1.5" }, Pt = { "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" }, Wt = {
   name: Mt,
   version: Bt,
   main: Ot,
   module: $t,
   "jsnext:main": "index",
   author: At,
-  description: Ft,
-  keywords: Dt,
+  description: Dt,
+  keywords: Ft,
   homepage: Tt,
   license: _t,
   repository: Ht,
-  scripts: Lt,
-  dependencies: Nt,
+  scripts: Nt,
+  dependencies: Lt,
   devDependencies: Pt
 }, { version: It } = Wt, Kt = Object.freeze({
   children: (e) => e.children,
@@ -208,16 +208,16 @@ const Mt = "d3-flextree", Bt = "2.1.2", Ot = "build/d3-flextree.js", $t = "index
 });
 function K(e) {
   const t = Object.assign({}, Kt, e);
-  function n(i) {
+  function r(i) {
     const a = t[i];
     return typeof a == "function" ? a : () => a;
   }
-  function r(i) {
+  function n(i) {
     const a = c(l(), i, (d) => d.children);
     return a.update(), a.data;
   }
   function s() {
-    const i = n("nodeSize"), a = n("spacing");
+    const i = r("nodeSize"), a = r("spacing");
     return class I extends O.prototype.constructor {
       constructor(h) {
         super(h);
@@ -297,7 +297,7 @@ function K(e) {
     };
   }
   function l() {
-    const i = s(), a = n("nodeSize"), d = n("spacing");
+    const i = s(), a = r("nodeSize"), d = r("spacing");
     return class extends i {
       constructor(h) {
         super(h), Object.assign(this, {
@@ -334,7 +334,7 @@ function K(e) {
         this.data.y = h;
       }
       update() {
-        return G(this), U(this), this;
+        return G(this), V(this), this;
       }
     };
   }
@@ -358,123 +358,123 @@ function K(e) {
     };
     return h(a, null);
   }
-  return Object.assign(r, {
+  return Object.assign(n, {
     nodeSize(i) {
-      return arguments.length ? (t.nodeSize = i, r) : t.nodeSize;
+      return arguments.length ? (t.nodeSize = i, n) : t.nodeSize;
     },
     spacing(i) {
-      return arguments.length ? (t.spacing = i, r) : t.spacing;
+      return arguments.length ? (t.spacing = i, n) : t.spacing;
     },
     children(i) {
-      return arguments.length ? (t.children = i, r) : t.children;
+      return arguments.length ? (t.children = i, n) : t.children;
     },
     hierarchy(i, a) {
       const d = typeof a > "u" ? t.children : a;
       return c(s(), i, d);
     },
     dump(i) {
-      const a = n("nodeSize"), d = (h) => (p) => {
+      const a = r("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 d(`
 `)(i);
     }
-  }), r;
+  }), n;
 }
 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 G = (e, t = 0) => (e.y = t, (e.children || []).reduce((r, n) => {
+  const [s, l] = r;
+  G(n, e.y + e.ySize);
+  const c = (s === 0 ? n.lExt : n.rExt).bottom;
+  s !== 0 && Vt(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 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;
+}, [0, null]), Gt(e), te(e), e), V = (e, t, r) => {
+  typeof t > "u" && (t = -e.relX - e.prelim, r = 0);
+  const n = t + e.relX;
+  return e.relX = n + e.prelim - r, e.prelim = 0, e.x = r + e.relX, (e.children || []).forEach((s) => V(s, n, e.x)), e;
 }, Gt = (e) => {
-  (e.children || []).reduce((t, n) => {
-    const [r, s] = t, l = r + n.shift, c = s + l + n.change;
-    return n.relX += c, [l, c];
+  (e.children || []).reduce((t, r) => {
+    const [n, s] = t, l = n + r.shift, c = s + l + r.change;
+    return r.relX += c, [l, c];
   }, [0, 0]);
-}, 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;
+}, Vt = (e, t, r) => {
+  const n = e.children[t - 1], s = e.children[t];
+  let l = n, c = n.relX, i = s, a = s.relX, d = !0;
   for (; l && i; ) {
-    l.bottom > n.lowY && (n = n.next);
+    l.bottom > r.lowY && (r = r.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;
+    (h > 0 || h < 0 && d) && (a += h, Ut(s, h), Yt(e, t, r.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));
   }
   !l && i ? Jt(e, t, i, a) : l && !i && Qt(e, t, l, c);
-}, Vt = (e, t) => {
+}, Ut = (e, t) => {
   e.relX += t, e.lExtRelX += t, e.rExtRelX += t;
-}, Yt = (e, t, n, r) => {
-  const s = e.children[t], l = t - n;
+}, Yt = (e, t, r, n) => {
+  const s = e.children[t], l = t - r;
   if (l > 1) {
-    const c = r / l;
-    e.children[n + 1].shift += c, s.shift -= c, s.change -= r - c;
+    const c = n / l;
+    e.children[r + 1].shift += c, s.shift -= c, s.change -= n - c;
   }
-}, Zt = (e) => e.hasChildren ? e.firstChild : e.lThr, qt = (e) => e.hasChildren ? e.lastChild : e.rThr, Jt = (e, t, n, r) => {
+}, Zt = (e) => e.hasChildren ? e.firstChild : e.lThr, qt = (e) => e.hasChildren ? e.lastChild : e.rThr, Jt = (e, t, r, n) => {
   const s = e.firstChild, l = s.lExt, c = e.children[t];
-  l.lThr = n;
-  const i = r - n.relX - s.lExtRelX;
+  l.lThr = r;
+  const i = n - r.relX - s.lExtRelX;
   l.relX += i, l.prelim -= i, s.lExt = c.lExt, s.lExtRelX = c.lExtRelX;
-}, Qt = (e, t, n, r) => {
+}, Qt = (e, t, r, n) => {
   const s = e.children[t], l = s.rExt, c = e.children[t - 1];
-  l.rThr = n;
-  const i = r - n.relX - s.rExtRelX;
+  l.rThr = r;
+  const i = n - r.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, r = (t.prelim + t.relX - t.xSize / 2 + n.relX + n.prelim + n.xSize / 2) / 2;
+    const t = e.firstChild, r = e.lastChild, n = (t.prelim + t.relX - t.xSize / 2 + r.relX + r.prelim + r.xSize / 2) / 2;
     Object.assign(e, {
-      prelim: r,
+      prelim: n,
       lExt: t.lExt,
       lExtRelX: t.lExtRelX,
-      rExt: n.rExt,
-      rExtRelX: n.rExtRelX
+      rExt: r.rExt,
+      rExtRelX: r.rExtRelX
     });
   }
-}, ee = (e, t, n) => {
-  for (; n !== null && e >= n.lowY; )
-    n = n.next;
+}, ee = (e, t, r) => {
+  for (; r !== null && e >= r.lowY; )
+    r = r.next;
   return {
     lowY: e,
     index: t,
-    next: n
+    next: r
   };
-}, 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);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}", oe = V, M = ot();
+}, U = ".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}", oe = U, M = ot();
 function H(e) {
   return Math.max(4 - 2 * e.state.depth, 1.5);
 }
-function L(e, t) {
-  const n = ht(e, t);
-  return e[n];
+function N(e, t) {
+  const r = ht(e, t);
+  return e[r];
 }
 function B(e) {
   e.stopPropagation();
 }
 const ne = new et();
 class Y {
-  constructor(t, n) {
-    this.options = W, this.revokers = [], this.handleZoom = (r) => {
-      const { transform: s } = r;
+  constructor(t, r) {
+    this.options = W, this.revokers = [], this.handleZoom = (n) => {
+      const { transform: s } = n;
       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.handlePan = (n) => {
+      n.preventDefault();
+      const s = C(this.svg.node()), l = s.translate(
+        -n.deltaX / s.k,
+        -n.deltaY / s.k
       );
       this.svg.call(this.zoom.transform, l);
-    }, this.handleClick = (r, s) => {
+    }, this.handleClick = (n, 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 = {
+      (P ? n.metaKey : n.ctrlKey) && (l = !l), this.toggleNode(s, l);
+    }, this.ensureView = this.ensureVisible, this.svg = t.datum ? t : at(t), this.styleNode = this.svg.append("style"), this.zoom = lt().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(r), 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(
@@ -488,8 +488,8 @@ class Y {
     );
   }
   getStyleContent() {
-    const { style: t } = this.options, { id: n } = this.state, r = typeof t == "function" ? t(n) : "";
-    return [this.options.embedGlobalCSS && V, r].filter(Boolean).join(`
+    const { style: t } = this.options, { id: r } = this.state, n = typeof t == "function" ? t(r) : "";
+    return [this.options.embedGlobalCSS && U, n].filter(Boolean).join(`
 `);
   }
   updateStyle() {
@@ -500,13 +500,13 @@ class Y {
     const t = this.getStyleContent();
     this.styleNode.text(t);
   }
-  async toggleNode(t, n = !1) {
+  async toggleNode(t, r = !1) {
     var s, l;
-    const r = (s = t.payload) != null && s.fold ? 0 : 1;
-    n ? X(t, (c, i) => {
+    const n = (s = t.payload) != null && s.fold ? 0 : 1;
+    r ? j(t, (c, i) => {
       c.payload = {
         ...c.payload,
-        fold: r
+        fold: n
       }, i();
     }) : t.payload = {
       ...t.payload,
@@ -514,15 +514,15 @@ class Y {
     }, await this.renderData(t);
   }
   _initializeData(t) {
-    let n = 0;
-    const { color: r, initialExpandLevel: s } = this.options;
+    let r = 0;
+    const { color: n, initialExpandLevel: s } = this.options;
     let l = 0, c = 0;
-    X(t, (i, a, d) => {
+    j(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 = {
+      c += 1, i.children = (p = i.children) == null ? void 0 : p.map((x) => ({ ...x })), r += 1, i.state = {
         ...i.state,
         depth: c,
-        id: n,
+        id: r,
         rect: {
           x: 0,
           y: 0,
@@ -530,7 +530,7 @@ class Y {
           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);
+      }, 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("."), n(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;
     });
@@ -544,20 +544,20 @@ class Y {
       const a = (h = this.firstChild) == null ? void 0 : h.firstChild, d = [a.scrollWidth, a.scrollHeight];
       i.state.size = d;
     });
-    const { spacingHorizontal: t, paddingX: n, spacingVertical: r } = this.options, s = K({}).children((i) => {
+    const { spacingHorizontal: t, paddingX: r, spacingVertical: n } = 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);
+      return [d, a + (a ? r * 2 : 0) + t];
+    }).spacing((i, a) => i.parent === a.parent ? n : n * 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,
+        y: i.x - i.xSize / 2,
         width: i.ySize - t,
         height: i.xSize
       };
@@ -580,14 +580,14 @@ class Y {
       ...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);
   }
-  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());
+  async setData(t, r) {
+    r && this.setOptions(r), t && (this.state.data = t), this.state.data && (this._initializeData(this.state.data), this.updateStyle(), await this.renderData());
   }
   async renderData(t) {
-    const { paddingX: n, autoFit: r, color: s, maxWidth: l } = this.options;
+    const { paddingX: r, autoFit: n, color: s, maxWidth: l } = this.options;
     if (!this.state.data) return;
     const c = [];
-    X(this.state.data, (o, m) => {
+    j(this.state.data, (o, m) => {
       var y;
       (y = o.payload) != null && y.fold || m(), c.push(o);
     });
@@ -617,8 +617,8 @@ class Y {
     ), 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() {
+    ), X = $.enter().append("foreignObject").attr("class", "markmap-foreign").attr("x", r).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;
       z.observe(o);
@@ -631,119 +631,135 @@ class Y {
       const o = (m = this.firstChild) == null ? void 0 : m.firstChild;
       z.unobserve(o);
     });
-    const F = C.merge($), Z = c.flatMap(
+    const D = X.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(), D = 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 = D.merge(w);
+    ), R = this.g.selectAll(b("path")).data(Z, (o) => o.target.state.key), q = R.exit(), F = 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), J = F.merge(R);
     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;
+      const m = a.x + a.width - o.state.rect.width, y = a.y + a.height - 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})`
+      (o) => `translate(${a.x + a.width - o.state.rect.width},${a.y + a.height - o.state.rect.height})`
     ), this.transition(u).attr(
       "transform",
-      (o) => `translate(${o.state.rect.x},${o.state.rect.y - o.state.rect.height / 2})`
+      (o) => `translate(${o.state.rect.x},${o.state.rect.y})`
     ), 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",
       (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), F.attr("width", (o) => Math.max(0, o.state.rect.width - n * 2)).attr("height", (o) => o.state.rect.height), this.transition(F).style("opacity", 1);
+    ), this.transition(k).attr("r", 6), this.transition(A).style("opacity", 0), D.attr("width", (o) => Math.max(0, o.state.rect.width - r * 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
+      a.y + a.height
     ];
-    this.transition(q).attr("d", M({ source: S, target: S })).remove(), D.attr(
+    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
+        m.state.rect.y + m.state.rect.height
       ], tt = [
         y.state.rect.x,
-        y.state.rect.y + y.state.rect.height / 2
+        y.state.rect.y + y.state.rect.height
       ];
       return M({ source: Q, target: tt });
-    }), r && this.fit();
+    }), n && this.fit();
   }
   transition(t) {
-    const { duration: n } = this.options;
-    return t.transition().duration(n);
+    const { duration: r } = this.options;
+    return t.transition().duration(r);
   }
   /**
    * Fit the content to the viewport.
    */
   async fit(t = this.options.maxInitialScale) {
-    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,
+    const r = this.svg.node(), { width: n, height: s } = r.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(
+      n / h * l,
       s / p * l,
       t
     ), g = ct.translate(
-      (r - h * u) / 2 - c * u,
+      (n - 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);
+    return this.transition(this.svg).call(this.zoom.transform, g).end().catch(E);
   }
   findElement(t) {
-    let n;
+    let r;
     return this.g.selectAll(b("g")).each(function(s) {
-      s === t && (n = {
+      s === t && (r = {
         data: s,
         g: this
       });
-    }), n;
+    }), r;
   }
   /**
    * Pan the content to make the provided node visible in the viewport.
    */
-  async ensureView(t, n) {
+  async ensureVisible(t, r) {
     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
+    const n = (v = this.findElement(t)) == null ? void 0 : v.data;
+    if (!n) return;
+    const s = this.svg.node(), l = s.getBoundingClientRect(), c = C(s), [i, a] = [
+      n.state.rect.x,
+      n.state.rect.x + n.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
+      n.state.rect.y,
+      n.state.rect.y + n.state.rect.height
     ].map((k) => k * c.k + c.y), p = {
       left: 0,
       right: 0,
       top: 0,
       bottom: 0,
-      ...n
-    }, 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;
+      ...r
+    }, u = [p.left - i, l.width - p.right - a], g = [p.top - d, l.height - p.bottom - h], f = u[0] * u[1] > 0 ? N(u, Math.abs) / c.k : 0, x = g[0] * g[1] > 0 ? N(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);
+      return this.transition(this.svg).call(this.zoom.transform, k).end().catch(E);
+    }
+  }
+  async centerNode(t, r) {
+    var f;
+    const n = (f = this.findElement(t)) == null ? void 0 : f.data;
+    if (!n) return;
+    const s = this.svg.node(), l = s.getBoundingClientRect(), c = C(s), i = (n.state.rect.x + n.state.rect.width / 2) * c.k + c.x, a = (n.state.rect.y + n.state.rect.height / 2) * c.k + c.y, d = {
+      left: 0,
+      right: 0,
+      top: 0,
+      bottom: 0,
+      ...r
+    }, h = (d.left + l.width - d.right) / 2, p = (d.top + l.height - d.bottom) / 2, u = (h - i) / c.k, g = (p - a) / c.k;
+    if (u || g) {
+      const x = c.translate(u, g);
+      return this.transition(this.svg).call(this.zoom.transform, x).end().catch(E);
     }
   }
   /**
    * Scale content with it pinned at the center of the viewport.
    */
   async rescale(t) {
-    const n = this.svg.node(), { width: r, height: s } = n.getBoundingClientRect(), l = r / 2, c = s / 2, i = j(n), a = i.translate(
+    const r = this.svg.node(), { width: n, height: s } = r.getBoundingClientRect(), l = n / 2, c = s / 2, i = C(r), 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, a).end().catch(R);
+    return this.transition(this.svg).call(this.zoom.transform, a).end().catch(E);
   }
   destroy() {
     this.svg.on(".zoom", null), this.svg.html(null), this.revokers.forEach((t) => {
       t();
     });
   }
-  static create(t, n, r = null) {
-    const s = new Y(t, n);
-    return r && s.setData(r).then(() => {
+  static create(t, r, n = null) {
+    const s = new Y(t, r);
+    return n && s.setData(n).then(() => {
       s.fit();
     }), s;
   }

package/dist/view.d.ts

@@ -39,7 +39,10 @@ export declare class Markmap {
     /**
      * Pan the content to make the provided node visible in the viewport.
      */
-    ensureView(node: INode, padding: Partial<IPadding> | undefined): Promise<void>;
+    ensureVisible(node: INode, padding?: Partial<IPadding>): Promise<void>;
+    /** @deprecated Use `ensureVisible` instead */
+    ensureView: (node: INode, padding?: Partial<IPadding>) => Promise<void>;
+    centerNode(node: INode, padding?: Partial<IPadding>): Promise<void>;
     /**
      * Scale content with it pinned at the center of the viewport.
      */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "markmap-view",
-  "version": "0.18.0",
+  "version": "0.18.2",
   "description": "View markmaps in browser",
   "author": "Gerald <gera2ld@live.com>",
   "license": "MIT",
@@ -51,5 +51,5 @@
   "peerDependencies": {
     "markmap-common": "*"
   },
-  "gitHead": "652d042cdd980487e5de70c8e1405ecf0721fa9c"
+  "gitHead": "75261f82190df5b126faf6f6dc82adeb1c3a2cc2"
 }