markmap-view 0.18.5-alpha.6 → 0.18.5-alpha.7

package/dist/browser/index.js

@@ -403,8 +403,8 @@
   }
   function childSelector(filter) {
     if (typeof filter === "string") {
-      const tagName = filter;
-      filter = (el) => el.tagName === tagName;
+      const selector = filter;
+      filter = (el) => el.matches(selector);
     }
     const filterFn = filter;
     return function selector() {
@@ -942,8 +942,11 @@
       next: lastLows
     };
   };
-  const css = ".markmap {\n  --markmap-max-width: 9999px;\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 > div {\n      width: var(--markmap-max-width);\n      text-align: left;\n    }\n\n  .markmap-foreign > div > div {\n        display: inline-block;\n      }\n\n.markmap-dark .markmap {\n  --markmap-code-bg: #1a1b26;\n  --markmap-code-color: #ddd;\n  --markmap-circle-open-bg: #444;\n  --markmap-text-color: #eee;\n}\n";
+  const css = ".markmap {\n  --markmap-max-width: 9999px;\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  --markmap-highlight-node-bg: #ff02;\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 > div {\n      width: var(--markmap-max-width);\n      text-align: left;\n    }\n\n  .markmap-foreign > div > div {\n        display: inline-block;\n      }\n\n  .markmap-highlight rect {\n    fill: var(--markmap-highlight-node-bg);\n  }\n\n.markmap-dark .markmap {\n  --markmap-code-bg: #1a1b26;\n  --markmap-code-color: #ddd;\n  --markmap-circle-open-bg: #444;\n  --markmap-text-color: #eee;\n}\n";
   const globalCSS = css;
+  const SELECTOR_NODE = "g.markmap-node";
+  const SELECTOR_LINK = "path.markmap-link";
+  const SELECTOR_HIGHLIGHT = "g.markmap-highlight";
   const linkShape = d32.linkHorizontal();
   function linkWidth(data) {
     return Math.max(4 - 2 * data.state.depth, 1.5);
@@ -959,7 +962,7 @@
   class Markmap {
     constructor(svg, opts) {
       this.options = defaultOptions;
-      this.revokers = [];
+      this._disposeList = [];
       this.handleZoom = (e) => {
         const { transform } = e;
         this.g.attr("transform", transform);
@@ -993,16 +996,17 @@
         rect: { x1: 0, y1: 0, x2: 0, y2: 0 }
       };
       this.g = this.svg.append("g");
-      this.observer = new ResizeObserver(
+      this.g.append("g").attr("class", "markmap-highlight");
+      this._observer = new ResizeObserver(
         debounce(() => {
           this.renderData();
         }, 100)
       );
-      this.revokers.push(
+      this._disposeList.push(
         refreshHook.tap(() => {
           this.setData();
         }),
-        () => this.observer.disconnect()
+        () => this._observer.disconnect()
       );
     }
     getStyleContent() {
@@ -1073,10 +1077,11 @@
         if (isFoldRecursively) foldRecursively -= 1;
         depth -= 1;
       });
+      return node;
     }
     _relayout() {
       if (!this.state.data) return;
-      this.g.selectAll(childSelector("g")).selectAll(
+      this.g.selectAll(childSelector(SELECTOR_NODE)).selectAll(
         childSelector("foreignObject")
       ).each(function(d) {
         var _a;
@@ -1137,12 +1142,28 @@
     }
     async setData(data, opts) {
       if (opts) this.setOptions(opts);
-      if (data) this.state.data = data;
+      if (data) this.state.data = this._initializeData(data);
       if (!this.state.data) return;
-      this._initializeData(this.state.data);
       this.updateStyle();
       await this.renderData();
     }
+    async setHighlight(node) {
+      this.state.highlight = node || void 0;
+      await this.renderData();
+    }
+    _getHighlightRect(highlight) {
+      const svgNode = this.svg.node();
+      const transform = d32.zoomTransform(svgNode);
+      const padding = 4 / transform.k;
+      const rect = {
+        ...highlight.state.rect
+      };
+      rect.x -= padding;
+      rect.y -= padding;
+      rect.width += 2 * padding;
+      rect.height += 2 * padding;
+      return rect;
+    }
     async renderData(originData) {
       const { paddingX, autoFit, color, maxWidth } = this.options;
       const rootNode = this.state.data;
@@ -1173,7 +1194,9 @@
       const getOriginTargetRect = (node) => (nodeMap[originMap[node.state.id]] || rootNode).state.rect;
       sourceRectMap[rootNode.state.id] = rootNode.state.rect;
       if (originData) setOriginNode(originData);
-      const mmG = this.g.selectAll(childSelector("g")).each((d) => {
+      const { highlight } = this.state;
+      let highlightNodes = this.g.selectAll(childSelector(SELECTOR_HIGHLIGHT)).selectAll(childSelector("rect")).data(highlight ? [this._getHighlightRect(highlight)] : []).join("rect").attr("x", (d) => d.x).attr("y", (d) => d.y).attr("width", (d) => d.width).attr("height", (d) => d.height);
+      const mmG = this.g.selectAll(childSelector(SELECTOR_NODE)).each((d) => {
         sourceRectMap[d.state.id] = d.state.rect;
       }).data(nodes, (d) => d.state.key);
       const mmGEnter = mmG.enter().append("g").attr("data-depth", (d) => d.state.depth).attr("data-path", (d) => d.state.path).each((d) => {
@@ -1210,7 +1233,7 @@
           return ((_a = d.payload) == null ? void 0 : _a.fold) && d.children ? color(d) : "var(--markmap-circle-open-bg)";
         }
       );
-      const observer = this.observer;
+      const observer = this._observer;
       const mmFo = mmGMerge.selectAll(childSelector("foreignObject")).data(
         (d) => [d],
         (d) => d.state.key
@@ -1237,7 +1260,7 @@
           return ((_a = node.payload) == null ? void 0 : _a.fold) ? [] : node.children.map((child) => ({ source: node, target: child }));
         }
       );
-      const mmPath = this.g.selectAll(childSelector("path")).data(links, (d) => d.target.state.key);
+      const mmPath = this.g.selectAll(childSelector(SELECTOR_LINK)).data(links, (d) => d.target.state.key);
       const mmPathExit = mmPath.exit();
       const mmPathEnter = mmPath.enter().insert("path", "g").attr("class", "markmap-link").attr("data-depth", (d) => d.target.state.depth).attr("data-path", (d) => d.target.state.path).attr("d", (d) => {
         const originRect = getOriginSourceRect(d.target);
@@ -1254,6 +1277,8 @@
       );
       await new Promise(requestAnimationFrame);
       this._relayout();
+      highlightNodes = highlightNodes.data(highlight ? [this._getHighlightRect(highlight)] : []).join("rect");
+      this.transition(highlightNodes).attr("x", (d) => d.x).attr("y", (d) => d.y).attr("width", (d) => d.width).attr("height", (d) => d.height);
       mmGEnter.attr("transform", (d) => {
         const originRect = getOriginSourceRect(d);
         return `translate(${originRect.x + originRect.width - d.state.rect.width},${originRect.y + originRect.height - d.state.rect.height})`;
@@ -1334,7 +1359,7 @@
     }
     findElement(node) {
       let result;
-      this.g.selectAll(childSelector("g")).each(function walk(d) {
+      this.g.selectAll(childSelector(SELECTOR_NODE)).each(function walk(d) {
         if (d === node) {
           result = {
             data: d,
@@ -1421,7 +1446,7 @@
     destroy() {
       this.svg.on(".zoom", null);
       this.svg.html(null);
-      this.revokers.forEach((fn) => {
+      this._disposeList.forEach((fn) => {
         fn();
       });
     }

package/dist/index.js

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

package/dist/types.d.ts

@@ -2,6 +2,7 @@ import { INode } from 'markmap-common';
 export interface IMarkmapState {
     id: string;
     data?: INode;
+    highlight?: INode;
     rect: {
         x1: number;
         x2: number;

package/dist/view.d.ts

@@ -12,9 +12,9 @@ export declare class Markmap {
     svg: ID3SVGElement;
     styleNode: d3.Selection<HTMLStyleElement, INode, HTMLElement, INode>;
     g: d3.Selection<SVGGElement, INode, HTMLElement, INode>;
-    observer: ResizeObserver;
     zoom: d3.ZoomBehavior<SVGElement, INode>;
-    revokers: (() => void)[];
+    private _observer;
+    private _disposeList;
     constructor(svg: string | SVGElement | ID3SVGElement, opts?: Partial<IMarkmapOptions>);
     getStyleContent(): string;
     updateStyle(): void;
@@ -26,6 +26,8 @@ export declare class Markmap {
     private _relayout;
     setOptions(opts?: Partial<IMarkmapOptions>): void;
     setData(data?: IPureNode | null, opts?: Partial<IMarkmapOptions>): Promise<void>;
+    setHighlight(node?: INode | null): Promise<void>;
+    private _getHighlightRect;
     renderData(originData?: INode): Promise<void>;
     transition<T extends d3.BaseType, U, P extends d3.BaseType, Q>(sel: d3.Selection<T, U, P, Q>): d3.Transition<T, U, P, Q>;
     /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "markmap-view",
-  "version": "0.18.5-alpha.6+cea75c9",
+  "version": "0.18.5-alpha.7+41488b9",
   "description": "View markmaps in browser",
   "author": "Gerald <gera2ld@live.com>",
   "license": "MIT",
@@ -46,10 +46,10 @@
   },
   "devDependencies": {
     "@types/d3-flextree": "^2.1.1",
-    "markmap-common": "0.18.5-alpha.6+cea75c9"
+    "markmap-common": "0.18.5-alpha.7+41488b9"
   },
   "peerDependencies": {
     "markmap-common": "*"
   },
-  "gitHead": "cea75c9906a30ddf515f94bd6ad61d6c9ca4035a"
+  "gitHead": "41488b9988a1f49f7dadc029ef6be18fed981cac"
 }