markmap-view - npm Package Compare versions

Comparing version 0.15.8 to 0.15.9-alpha.0

dist/browser/index.js

@@ -38,9 +38,7 @@ (function(exports, d32) {
         var _a;
-        (_a = item.children) == null ? void 0 : _a.forEach((child) => {
-          walk(child, item);
-        });
+        return (_a = item.children) == null ? void 0 : _a.map((child) => walk(child, item));
       },
       parent
     );
-    walk(tree);
+    return walk(tree);
   }
@@ -90,2 +88,24 @@ function addClass(className, ...rest) {
   }
+  function debounce(fn, time) {
+    const state = {
+      timer: 0
+    };
+    function reset() {
+      if (state.timer) {
+        window.clearTimeout(state.timer);
+        state.timer = 0;
+      }
+    }
+    function run() {
+      reset();
+      if (state.args)
+        state.result = fn(...state.args);
+    }
+    return function debounced(...args) {
+      reset();
+      state.args = args;
+      state.timer = window.setTimeout(run, time);
+      return state.result;
+    };
+  }
   /*! @gera2ld/jsx-dom v2.2.2 | ISC License */
@@ -337,2 +357,62 @@ const VTYPE_ELEMENT$1 = 1;
   }
+  const isMacintosh = typeof navigator !== "undefined" && navigator.userAgent.includes("Macintosh");
+  const defaultColorFn = d32.scaleOrdinal(d32.schemeCategory10);
+  const defaultOptions = {
+    autoFit: false,
+    color: (node) => {
+      var _a;
+      return defaultColorFn(`${((_a = node.state) == null ? void 0 : _a.path) || ""}`);
+    },
+    duration: 500,
+    embedGlobalCSS: true,
+    fitRatio: 0.95,
+    maxWidth: 0,
+    nodeMinHeight: 16,
+    paddingX: 8,
+    scrollForPan: isMacintosh,
+    spacingHorizontal: 80,
+    spacingVertical: 5,
+    initialExpandLevel: -1,
+    zoom: true,
+    pan: true,
+    toggleRecursively: false
+  };
+  function deriveOptions(jsonOptions) {
+    const derivedOptions = {};
+    const options = { ...jsonOptions };
+    const { color, colorFreezeLevel } = options;
+    if ((color == null ? void 0 : color.length) === 1) {
+      const solidColor = color[0];
+      derivedOptions.color = () => solidColor;
+    } else if (color == null ? void 0 : color.length) {
+      const colorFn = d32.scaleOrdinal(color);
+      derivedOptions.color = (node) => colorFn(`${node.state.path}`);
+    }
+    if (colorFreezeLevel) {
+      const color2 = derivedOptions.color || defaultOptions.color;
+      derivedOptions.color = (node) => {
+        node = {
+          ...node,
+          state: {
+            ...node.state,
+            path: node.state.path.split(".").slice(0, colorFreezeLevel).join(".")
+          }
+        };
+        return color2(node);
+      };
+    }
+    const numberKeys = ["duration", "maxWidth", "initialExpandLevel"];
+    numberKeys.forEach((key) => {
+      const value = options[key];
+      if (typeof value === "number")
+        derivedOptions[key] = value;
+    });
+    const booleanKeys = ["zoom", "pan"];
+    booleanKeys.forEach((key) => {
+      const value = options[key];
+      if (value != null)
+        derivedOptions[key] = !!value;
+    });
+    return derivedOptions;
+  }
   /*! @gera2ld/jsx-dom v2.2.2 | ISC License */
@@ -1079,8 +1159,8 @@ const VTYPE_ELEMENT = 1;
   };
-  const css = ".markmap {\n  font: 300 16px/20px sans-serif;\n}\n\n  .markmap-link {\n    fill: none;\n  }\n\n  .markmap-node > circle {\n      cursor: pointer;\n    }\n\n  .markmap-foreign {\n    display: inline-block;\n  }\n\n  .markmap-foreign a {\n      color: #0097e6;\n    }\n\n  .markmap-foreign a:hover {\n        color: #00a8ff;\n      }\n\n  .markmap-foreign code {\n      padding: 0.25em;\n      font-size: calc(1em - 2px);\n      color: #555;\n      background-color: #f0f0f0;\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: #ffeaa7;\n    }\n";
   const containerCSS = "/* used for pre-rendering to get the size of each node */\n.markmap-container {\n  position: absolute;\n  width: 0;\n  height: 0;\n  top: -100px;\n  left: -100px;\n  overflow: hidden;\n}\n.markmap-container > .markmap-foreign {\n    display: inline-block;\n  }\n/* first-child for line wrapping, last-child for max-width detection */\n.markmap-container > .markmap-foreign > div:last-child,\n        \n        .markmap-container > .markmap-foreign > div:last-child :not(pre) {\n          white-space: nowrap;\n        }\n.markmap-container > .markmap-foreign > div:last-child code {\n          white-space: inherit;\n        }\n";
+  const css = ".markmap {\n  --markmap-a-color: #0097e6;\n  --markmap-a-hover-color: #00a8ff;\n  --markmap-code-bg: #f0f0f0;\n  --markmap-code-color: #555;\n  --markmap-highlight-bg: #ffeaa7;\n  --markmap-table-border: 1px solid currentColor;\n  --markmap-font: 300 16px/20px sans-serif;\n\n  font: var(--markmap-font);\n}\n\n  .markmap-link {\n    fill: none;\n  }\n\n  .markmap-node > circle {\n      cursor: pointer;\n    }\n\n  .markmap-foreign {\n    display: inline-block;\n  }\n\n  .markmap-foreign a {\n      color: var(--markmap-a-color);\n    }\n\n  .markmap-foreign a:hover {\n        color: var(--markmap-a-hover-color);\n      }\n\n  .markmap-foreign code {\n      padding: 0.25em;\n      font-size: calc(1em - 2px);\n      color: var(--markmap-code-color);\n      background-color: var(--markmap-code-bg);\n      border-radius: 2px;\n    }\n\n  .markmap-foreign pre {\n      margin: 0;\n    }\n\n  .markmap-foreign pre > code {\n        display: block;\n      }\n\n  .markmap-foreign del {\n      text-decoration: line-through;\n    }\n\n  .markmap-foreign em {\n      font-style: italic;\n    }\n\n  .markmap-foreign strong {\n      font-weight: bold;\n    }\n\n  .markmap-foreign mark {\n      background: var(--markmap-highlight-bg);\n    }\n\n  .markmap-foreign table,\n    .markmap-foreign th,\n    .markmap-foreign td {\n      border-collapse: collapse;\n      border: var(--markmap-table-border);\n    }\n\n  .markmap-foreign img {\n      display: inline-block;\n    }\n\n  .markmap-foreign-testing-max img {\n      max-width: none;\n      max-height: none;\n    }\n";
   const globalCSS = css;
   function linkWidth(nodeData) {
     const data = nodeData.data;
-    return Math.max(4 - 2 * data.depth, 1.5);
+    return Math.max(4 - 2 * data.state.depth, 1.5);
   }
@@ -1094,14 +1174,8 @@ function minBy(numbers, by) {
   }
-  function createViewHooks() {
-    return {
-      transformHtml: new Hook()
-    };
-  }
   const refreshHook = new Hook();
-  const defaultColorFn = d32.scaleOrdinal(d32.schemeCategory10);
-  const isMacintosh = typeof navigator !== "undefined" && navigator.userAgent.includes("Macintosh");
-  const _Markmap = class _Markmap {
+  class Markmap {
     constructor(svg, opts) {
-      this.options = _Markmap.defaultOptions;
+      this.options = defaultOptions;
       this.revokers = [];
+      this.imgCache = {};
       this.handleZoom = (e) => {
@@ -1126,3 +1200,2 @@ const { transform } = e;
       };
-      this.viewHooks = createViewHooks();
       this.svg = svg.datum ? svg : d32.select(svg);
@@ -1146,2 +1219,3 @@ this.styleNode = this.svg.append("style");
       this.g = this.svg.append("g");
+      this.debouncedRefresh = debounce(() => this.setData(), 200);
       this.revokers.push(
@@ -1199,8 +1273,17 @@ refreshHook.tap(() => {
       let foldRecursively = 0;
+      let depth = 0;
       walkTree(node, (item, next, parent) => {
         var _a, _b, _c;
+        depth += 1;
         item.children = (_a = item.children) == null ? void 0 : _a.map((child) => ({ ...child }));
         nodeId += 1;
         const group = mountDom(
-          /* @__PURE__ */ jsx("div", { className: "markmap-foreign", style: groupStyle, children: /* @__PURE__ */ jsx("div", { dangerouslySetInnerHTML: { __html: item.content } }) })
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "markmap-foreign markmap-foreign-testing-max",
+              style: groupStyle,
+              children: /* @__PURE__ */ jsx("div", { dangerouslySetInnerHTML: { __html: item.content } })
+            }
+          )
         );
@@ -1210,2 +1293,3 @@ container.append(group);
           ...item.state,
+          depth,
           id: nodeId,
@@ -1219,3 +1303,3 @@ el: group.firstChild
           foldRecursively += 1;
-        } else if (foldRecursively || initialExpandLevel >= 0 && item.depth >= initialExpandLevel) {
+        } else if (foldRecursively || initialExpandLevel >= 0 && item.state.depth >= initialExpandLevel) {
           item.payload = { ...item.payload, fold: 1 };
@@ -1226,2 +1310,3 @@ }
           foldRecursively -= 1;
+        depth -= 1;
       });
@@ -1231,3 +1316,3 @@ const nodes = Array.from(container.childNodes).map(
       );
-      this.viewHooks.transformHtml.call(this, nodes);
+      this._checkImages(container);
       nodes.forEach((node2) => {
@@ -1253,2 +1338,23 @@ var _a;
     }
+    _checkImages(container) {
+      container.querySelectorAll("img").forEach((img) => {
+        if (img.width)
+          return;
+        const size = this.imgCache[img.src];
+        if (size == null ? void 0 : size[0]) {
+          [img.width, img.height] = size;
+        } else if (!size) {
+          this._loadImage(img.src);
+        }
+      });
+    }
+    _loadImage(src) {
+      this.imgCache[src] = [0, 0];
+      const img = new Image();
+      img.src = src;
+      img.onload = () => {
+        this.imgCache[src] = [img.naturalWidth, img.naturalHeight];
+        this.debouncedRefresh();
+      };
+    }
     setOptions(opts) {
@@ -1318,3 +1424,3 @@ this.options = {
       ).data(descendants, (d) => d.data.state.key);
-      const nodeEnter = node.enter().append("g").attr("data-depth", (d) => d.data.depth).attr("data-path", (d) => d.data.state.path).attr(
+      const nodeEnter = node.enter().append("g").attr("data-depth", (d) => d.data.state.depth).attr("data-path", (d) => d.data.state.path).attr(
         "transform",
@@ -1406,3 +1512,3 @@ (d) => `translate(${y0 + origin.ySize - d.ySize},${x0 + origin.xSize / 2 - d.xSize})`
           ];
-          return enter.insert("path", "g").attr("class", "markmap-link").attr("data-depth", (d) => d.target.data.depth).attr("data-path", (d) => d.target.data.state.path).attr("d", linkShape({ source, target: source }));
+          return enter.insert("path", "g").attr("class", "markmap-link").attr("data-depth", (d) => d.target.data.state.depth).attr("data-path", (d) => d.target.data.state.path).attr("d", linkShape({ source, target: source }));
         },
@@ -1526,3 +1632,3 @@ (update) => update,
     static create(svg, opts, data = null) {
-      const mm = new _Markmap(svg, opts);
+      const mm = new Markmap(svg, opts);
       if (data) {
@@ -1534,66 +1640,9 @@ mm.setData(data);
     }
-  };
-  _Markmap.defaultOptions = {
-    autoFit: false,
-    color: (node) => {
-      var _a;
-      return defaultColorFn(`${((_a = node.state) == null ? void 0 : _a.path) || ""}`);
-    },
-    duration: 500,
-    embedGlobalCSS: true,
-    fitRatio: 0.95,
-    maxWidth: 0,
-    nodeMinHeight: 16,
-    paddingX: 8,
-    scrollForPan: isMacintosh,
-    spacingHorizontal: 80,
-    spacingVertical: 5,
-    initialExpandLevel: -1,
-    zoom: true,
-    pan: true,
-    toggleRecursively: false
-  };
-  let Markmap = _Markmap;
-  function deriveOptions(jsonOptions) {
-    const derivedOptions = {};
-    const options = { ...jsonOptions };
-    const { color, colorFreezeLevel } = options;
-    if ((color == null ? void 0 : color.length) === 1) {
-      const solidColor = color[0];
-      derivedOptions.color = () => solidColor;
-    } else if (color == null ? void 0 : color.length) {
-      const colorFn = d32.scaleOrdinal(color);
-      derivedOptions.color = (node) => colorFn(`${node.state.path}`);
-    }
-    if (colorFreezeLevel) {
-      const color2 = derivedOptions.color || Markmap.defaultOptions.color;
-      derivedOptions.color = (node) => {
-        node = {
-          ...node,
-          state: {
-            ...node.state,
-            path: node.state.path.split(".").slice(0, colorFreezeLevel).join(".")
-          }
-        };
-        return color2(node);
-      };
-    }
-    const numberKeys = ["duration", "maxWidth", "initialExpandLevel"];
-    numberKeys.forEach((key) => {
-      const value = options[key];
-      if (typeof value === "number")
-        derivedOptions[key] = value;
-    });
-    const booleanKeys = ["zoom", "pan"];
-    booleanKeys.forEach((key) => {
-      const value = options[key];
-      if (value != null)
-        derivedOptions[key] = !!value;
-    });
-    return derivedOptions;
   }
   exports.Markmap = Markmap;
   exports.defaultColorFn = defaultColorFn;
+  exports.defaultOptions = defaultOptions;
   exports.deriveOptions = deriveOptions;
   exports.globalCSS = globalCSS;
+  exports.isMacintosh = isMacintosh;
   exports.loadCSS = loadCSS;
@@ -1600,0 +1649,0 @@ exports.loadJS = loadJS;

dist/index.d.ts

 export { loadJS, loadCSS } from 'markmap-common';
 export * from './types';
+export * from './constants';
+export * from './util';
 export * from './view';

dist/index.js

@@ -1,16 +0,63 @@
-import { Hook as U, getId as at, addClass as lt, walkTree as M, childSelector as b, noop as A } from "markmap-common";
-import { loadCSS as Ce, loadJS as we } from "markmap-common";
-import { scaleOrdinal as G, schemeCategory10 as ct, zoomTransform as O, select as ht, zoom as dt, linkHorizontal as ut, min as I, max as W, zoomIdentity as pt, minIndex as ft } from "d3";
+import { Hook as st, getId as at, debounce as lt, addClass as ct, walkTree as T, childSelector as E, noop as M } from "markmap-common";
+import { loadCSS as Ee, loadJS as we } from "markmap-common";
+import { scaleOrdinal as V, schemeCategory10 as ht, zoomTransform as A, select as dt, zoom as ut, linkHorizontal as pt, min as H, max as L, zoomIdentity as ft, minIndex as mt } from "d3";
+const K = typeof navigator < "u" && navigator.userAgent.includes("Macintosh"), gt = V(ht), P = {
+  autoFit: !1,
+  color: (e) => {
+    var t;
+    return gt(`${((t = e.state) == null ? void 0 : t.path) || ""}`);
+  },
+  duration: 500,
+  embedGlobalCSS: !0,
+  fitRatio: 0.95,
+  maxWidth: 0,
+  nodeMinHeight: 16,
+  paddingX: 8,
+  scrollForPan: K,
+  spacingHorizontal: 80,
+  spacingVertical: 5,
+  initialExpandLevel: -1,
+  zoom: !0,
+  pan: !0,
+  toggleRecursively: !1
+};
+function Se(e) {
+  const t = {}, n = { ...e }, { color: i, colorFreezeLevel: o } = n;
+  if ((i == null ? void 0 : i.length) === 1) {
+    const s = i[0];
+    t.color = () => s;
+  } else if (i != null && i.length) {
+    const s = V(i);
+    t.color = (l) => s(`${l.state.path}`);
+  }
+  if (o) {
+    const s = t.color || P.color;
+    t.color = (l) => (l = {
+      ...l,
+      state: {
+        ...l.state,
+        path: l.state.path.split(".").slice(0, o).join(".")
+      }
+    }, s(l));
+  }
+  return ["duration", "maxWidth", "initialExpandLevel"].forEach((s) => {
+    const l = n[s];
+    typeof l == "number" && (t[s] = l);
+  }), ["zoom", "pan"].forEach((s) => {
+    const l = n[s];
+    l != null && (t[s] = !!l);
+  }), t;
+}
 /*! @gera2ld/jsx-dom v2.2.2 | ISC License */
-const Z = 1, J = 2, gt = "http://www.w3.org/2000/svg", H = "http://www.w3.org/1999/xlink", mt = {
-  show: H,
-  actuate: H,
-  href: H
-}, xt = (e) => typeof e == "string" || typeof e == "number", yt = (e) => (e == null ? void 0 : e.vtype) === Z, St = (e) => (e == null ? void 0 : e.vtype) === J;
-function N(e, t) {
+const U = 1, G = 2, xt = "http://www.w3.org/2000/svg", _ = "http://www.w3.org/1999/xlink", yt = {
+  show: _,
+  actuate: _,
+  href: _
+}, kt = (e) => typeof e == "string" || typeof e == "number", vt = (e) => (e == null ? void 0 : e.vtype) === U, St = (e) => (e == null ? void 0 : e.vtype) === G;
+function j(e, t) {
   let n;
   if (typeof e == "string")
-    n = Z;
+    n = U;
   else if (typeof e == "function")
-    n = J;
+    n = G;
   else
@@ -24,3 +71,3 @@ throw new Error("Invalid VNode type");
 }
-function vt(e) {
+function bt(e) {
   return e.children;
@@ -31,6 +78,6 @@ }
 };
-function V(e, t) {
+function I(e, t) {
   Array.isArray(t) || (t = [t]), t = t.filter(Boolean), t.length && e.append(...t);
 }
-function kt(e, t, n) {
+function Ct(e, t, n) {
   for (const i in t)
@@ -41,13 +88,13 @@ if (!(i === "key" || i === "children" || i === "ref"))
       else if (i === "innerHTML" || i === "textContent" || i === "innerText" || i === "value" && ["textarea", "select"].includes(e.tagName)) {
-        const r = t[i];
-        r != null && (e[i] = r);
+        const o = t[i];
+        o != null && (e[i] = o);
       } else
-        i.startsWith("on") ? e[i.toLowerCase()] = t[i] : Et(e, i, t[i], n.isSvg);
+        i.startsWith("on") ? e[i.toLowerCase()] = t[i] : wt(e, i, t[i], n.isSvg);
 }
-const bt = {
+const Et = {
   className: "class",
   labelFor: "for"
 };
-function Et(e, t, n, i) {
-  if (t = bt[t] || t, n === !0)
+function wt(e, t, n, i) {
+  if (t = Et[t] || t, n === !0)
     e.setAttribute(t, "");
@@ -57,13 +104,13 @@ else if (n === !1)
   else {
-    const r = i ? mt[t] : void 0;
-    r !== void 0 ? e.setAttributeNS(r, t, n) : e.setAttribute(t, n);
+    const o = i ? yt[t] : void 0;
+    o !== void 0 ? e.setAttributeNS(o, t, n) : e.setAttribute(t, n);
   }
 }
-function Ct(e) {
+function Xt(e) {
   return e.reduce((t, n) => t.concat(n), []);
 }
-function D(e, t) {
-  return Array.isArray(e) ? Ct(e.map((n) => D(n, t))) : _(e, t);
+function $(e, t) {
+  return Array.isArray(e) ? Xt(e.map((n) => $(n, t))) : B(e, t);
 }
-function _(e, t = zt) {
+function B(e, t = zt) {
   if (e == null || typeof e == "boolean")
@@ -78,24 +125,24 @@ return null;
     } = e;
-    if (n === vt) {
+    if (n === bt) {
       const a = document.createDocumentFragment();
       if (i.children) {
-        const c = D(i.children, t);
-        V(a, c);
+        const c = $(i.children, t);
+        I(a, c);
       }
       return a;
     }
-    const r = n(i);
-    return _(r, t);
+    const o = n(i);
+    return B(o, t);
   }
-  if (xt(e))
+  if (kt(e))
     return document.createTextNode(`${e}`);
-  if (yt(e)) {
+  if (vt(e)) {
     let n;
     const {
       type: i,
-      props: r
+      props: o
     } = e;
     if (!t.isSvg && i === "svg" && (t = Object.assign({}, t, {
       isSvg: !0
-    })), t.isSvg ? n = document.createElementNS(gt, i) : n = document.createElement(i), kt(n, r, t), r.children) {
+    })), t.isSvg ? n = document.createElementNS(xt, i) : n = document.createElement(i), Ct(n, o, t), o.children) {
       let c = t;
@@ -105,8 +152,8 @@ t.isSvg && i === "foreignObject" && (c = Object.assign({}, c, {
       }));
-      const s = D(r.children, c);
-      s != null && V(n, s);
+      const s = $(o.children, c);
+      s != null && I(n, s);
     }
     const {
       ref: a
-    } = r;
+    } = o;
     return typeof a == "function" && a(n), n;
@@ -116,6 +163,6 @@ }
 }
-function $(e) {
-  return _(e);
+function O(e) {
+  return B(e);
 }
-function wt(e) {
+function jt(e) {
   var t = 0, n = e.children, i = n && n.length;
@@ -129,27 +176,27 @@ if (!i)
 }
-function Xt() {
-  return this.eachAfter(wt);
+function Nt() {
+  return this.eachAfter(jt);
 }
-function jt(e) {
-  var t = this, n, i = [t], r, a, c;
+function Rt(e) {
+  var t = this, n, i = [t], o, a, c;
   do
     for (n = i.reverse(), i = []; t = n.pop(); )
-      if (e(t), r = t.children, r)
-        for (a = 0, c = r.length; a < c; ++a)
-          i.push(r[a]);
+      if (e(t), o = t.children, o)
+        for (a = 0, c = o.length; a < c; ++a)
+          i.push(o[a]);
   while (i.length);
   return this;
 }
-function Nt(e) {
-  for (var t = this, n = [t], i, r; t = n.pop(); )
+function Tt(e) {
+  for (var t = this, n = [t], i, o; t = n.pop(); )
     if (e(t), i = t.children, i)
-      for (r = i.length - 1; r >= 0; --r)
-        n.push(i[r]);
+      for (o = i.length - 1; o >= 0; --o)
+        n.push(i[o]);
   return this;
 }
-function Rt(e) {
-  for (var t = this, n = [t], i = [], r, a, c; t = n.pop(); )
-    if (i.push(t), r = t.children, r)
-      for (a = 0, c = r.length; a < c; ++a)
-        n.push(r[a]);
+function Mt(e) {
+  for (var t = this, n = [t], i = [], o, a, c; t = n.pop(); )
+    if (i.push(t), o = t.children, o)
+      for (a = 0, c = o.length; a < c; ++a)
+        n.push(o[a]);
   for (; t = i.pop(); )
@@ -159,10 +206,10 @@ e(t);
 }
-function Tt(e) {
+function At(e) {
   return this.eachAfter(function(t) {
-    for (var n = +e(t.data) || 0, i = t.children, r = i && i.length; --r >= 0; )
-      n += i[r].value;
+    for (var n = +e(t.data) || 0, i = t.children, o = i && i.length; --o >= 0; )
+      n += i[o].value;
     t.value = n;
   });
 }
-function Mt(e) {
+function _t(e) {
   return this.eachBefore(function(t) {
@@ -172,18 +219,18 @@ t.children && t.children.sort(e);
 }
-function At(e) {
-  for (var t = this, n = Ot(t, e), i = [t]; t !== n; )
+function Ot(e) {
+  for (var t = this, n = Dt(t, e), i = [t]; t !== n; )
     t = t.parent, i.push(t);
-  for (var r = i.length; e !== n; )
-    i.splice(r, 0, e), e = e.parent;
+  for (var o = i.length; e !== n; )
+    i.splice(o, 0, e), e = e.parent;
   return i;
 }
-function Ot(e, t) {
+function Dt(e, t) {
   if (e === t)
     return e;
-  var n = e.ancestors(), i = t.ancestors(), r = null;
+  var n = e.ancestors(), i = t.ancestors(), o = null;
   for (e = n.pop(), t = i.pop(); e === t; )
-    r = e, e = n.pop(), t = i.pop();
-  return r;
+    o = e, e = n.pop(), t = i.pop();
+  return o;
 }
-function Ht() {
+function $t() {
   for (var e = this, t = [e]; e = e.parent; )
@@ -193,3 +240,3 @@ t.push(e);
 }
-function $t() {
+function Bt() {
   var e = [];
@@ -200,3 +247,3 @@ return this.each(function(t) {
 }
-function Bt() {
+function Ft() {
   var e = [];
@@ -207,3 +254,3 @@ return this.eachBefore(function(t) {
 }
-function Dt() {
+function Ht() {
   var e = this, t = [];
@@ -214,20 +261,20 @@ return e.each(function(n) {
 }
-function L(e, t) {
-  var n = new R(e), i = +e.value && (n.value = e.value), r, a = [n], c, s, l, f;
-  for (t == null && (t = _t); r = a.pop(); )
-    if (i && (r.value = +r.data.value), (s = t(r.data)) && (f = s.length))
-      for (r.children = new Array(f), l = f - 1; l >= 0; --l)
-        a.push(c = r.children[l] = new R(s[l])), c.parent = r, c.depth = r.depth + 1;
-  return n.eachBefore(It);
+function F(e, t) {
+  var n = new N(e), i = +e.value && (n.value = e.value), o, a = [n], c, s, l, p;
+  for (t == null && (t = It); o = a.pop(); )
+    if (i && (o.value = +o.data.value), (s = t(o.data)) && (p = s.length))
+      for (o.children = new Array(p), l = p - 1; l >= 0; --l)
+        a.push(c = o.children[l] = new N(s[l])), c.parent = o, c.depth = o.depth + 1;
+  return n.eachBefore(Yt);
 }
-function Ft() {
-  return L(this).eachBefore(Lt);
+function Lt() {
+  return F(this).eachBefore(Wt);
 }
-function _t(e) {
+function It(e) {
   return e.children;
 }
-function Lt(e) {
+function Wt(e) {
   e.data = e.data.data;
 }
-function It(e) {
+function Yt(e) {
   var t = 0;
@@ -238,24 +285,24 @@ do
 }
-function R(e) {
+function N(e) {
   this.data = e, this.depth = this.height = 0, this.parent = null;
 }
-R.prototype = L.prototype = {
-  constructor: R,
-  count: Xt,
-  each: jt,
-  eachAfter: Rt,
-  eachBefore: Nt,
-  sum: Tt,
-  sort: Mt,
-  path: At,
-  ancestors: Ht,
-  descendants: $t,
-  leaves: Bt,
-  links: Dt,
-  copy: Ft
+N.prototype = F.prototype = {
+  constructor: N,
+  count: Nt,
+  each: Rt,
+  eachAfter: Mt,
+  eachBefore: Tt,
+  sum: At,
+  sort: _t,
+  path: Ot,
+  ancestors: $t,
+  descendants: Bt,
+  leaves: Ft,
+  links: Ht,
+  copy: Lt
 };
-const Wt = "d3-flextree", Vt = "2.1.2", Yt = "build/d3-flextree.js", Kt = "index", Pt = {
+const Vt = "d3-flextree", Kt = "2.1.2", Pt = "build/d3-flextree.js", Ut = "index", Gt = {
   name: "Chris Maloney",
   url: "http://chrismaloney.org"
-}, Ut = "Flexible tree layout algorithm that allows for variable node sizes.", Gt = [
+}, Zt = "Flexible tree layout algorithm that allows for variable node sizes.", qt = [
   "d3",
@@ -272,6 +319,6 @@ "d3-module",
   "2d"
-], Zt = "https://github.com/klortho/d3-flextree", Jt = "WTFPL", qt = {
+], Jt = "https://github.com/klortho/d3-flextree", Qt = "WTFPL", te = {
   type: "git",
   url: "https://github.com/klortho/d3-flextree.git"
-}, Qt = {
+}, ee = {
   clean: "rm -rf build demo test",
@@ -288,5 +335,5 @@ "build:demo": "rollup -c --environment BUILD:demo",
   prepare: "npm-run-all clean build lint test"
-}, te = {
+}, ne = {
   "d3-hierarchy": "^1.1.5"
-}, ee = {
+}, ie = {
   "babel-plugin-external-helpers": "^6.22.0",
@@ -307,18 +354,18 @@ "babel-preset-es2015-rollup": "^3.0.0",
   "uglify-es": "^3.3.9"
-}, ne = {
-  name: Wt,
-  version: Vt,
-  main: Yt,
-  module: Kt,
+}, re = {
+  name: Vt,
+  version: Kt,
+  main: Pt,
+  module: Ut,
   "jsnext:main": "index",
-  author: Pt,
-  description: Ut,
-  keywords: Gt,
-  homepage: Zt,
-  license: Jt,
-  repository: qt,
-  scripts: Qt,
-  dependencies: te,
-  devDependencies: ee
-}, { version: ie } = ne, oe = Object.freeze({
+  author: Gt,
+  description: Zt,
+  keywords: qt,
+  homepage: Jt,
+  license: Qt,
+  repository: te,
+  scripts: ee,
+  dependencies: ne,
+  devDependencies: ie
+}, { version: oe } = re, se = Object.freeze({
   children: (e) => e.children,
@@ -328,4 +375,4 @@ nodeSize: (e) => e.data.size,
 });
-function Q(e) {
-  const t = Object.assign({}, oe, e);
+function q(e) {
+  const t = Object.assign({}, se, e);
   function n(s) {
@@ -336,8 +383,8 @@ const l = t[s];
   function i(s) {
-    const l = c(a(), s, (f) => f.children);
+    const l = c(a(), s, (p) => p.children);
     return l.update(), l.data;
   }
-  function r() {
+  function o() {
     const s = n("nodeSize"), l = n("spacing");
-    return class q extends L.prototype.constructor {
+    return class Z extends F.prototype.constructor {
       constructor(h) {
@@ -347,4 +394,4 @@ super(h);
       copy() {
-        const h = c(this.constructor, this, (p) => p.children);
-        return h.each((p) => p.data = p.data.data), h;
+        const h = c(this.constructor, this, (u) => u.children);
+        return h.each((u) => u.data = u.data.data), h;
       }
@@ -399,3 +446,3 @@ get size() {
         return (this.children || []).reduce(
-          (h, p) => q.maxExtents(h, p.extents),
+          (h, u) => Z.maxExtents(h, u.extents),
           this.nodeExtents
@@ -412,8 +459,8 @@ );
       }
-      static maxExtents(h, p) {
+      static maxExtents(h, u) {
         return {
-          top: Math.min(h.top, p.top),
-          bottom: Math.max(h.bottom, p.bottom),
-          left: Math.min(h.left, p.left),
-          right: Math.max(h.right, p.right)
+          top: Math.min(h.top, u.top),
+          bottom: Math.max(h.bottom, u.bottom),
+          left: Math.min(h.left, u.left),
+          right: Math.max(h.right, u.right)
         };
@@ -424,3 +471,3 @@ }
   function a() {
-    const s = r(), l = n("nodeSize"), f = n("spacing");
+    const s = o(), l = n("nodeSize"), p = n("spacing");
     return class extends s {
@@ -447,3 +494,3 @@ constructor(h) {
       spacing(h) {
-        return f(this.data, h.data);
+        return p(this.data, h.data);
       }
@@ -463,23 +510,23 @@ get x() {
       update() {
-        return tt(this), et(this), this;
+        return J(this), Q(this), this;
       }
     };
   }
-  function c(s, l, f) {
-    const h = (p, m) => {
-      const d = new s(p);
-      Object.assign(d, {
-        parent: m,
-        depth: m === null ? 0 : m.depth + 1,
+  function c(s, l, p) {
+    const h = (u, g) => {
+      const y = new s(u);
+      Object.assign(y, {
+        parent: g,
+        depth: g === null ? 0 : g.depth + 1,
         height: 0,
         length: 1
       });
-      const S = f(p) || [];
-      return d.children = S.length === 0 ? null : S.map((x) => h(x, d)), d.children && Object.assign(d, d.children.reduce(
-        (x, g) => ({
-          height: Math.max(x.height, g.height + 1),
-          length: x.length + g.length
+      const f = p(u) || [];
+      return y.children = f.length === 0 ? null : f.map((k) => h(k, y)), y.children && Object.assign(y, y.children.reduce(
+        (k, m) => ({
+          height: Math.max(k.height, m.height + 1),
+          length: k.length + m.length
         }),
-        d
-      )), d;
+        y
+      )), y;
     };
@@ -499,11 +546,11 @@ return h(l, null);
     hierarchy(s, l) {
-      const f = typeof l > "u" ? t.children : l;
-      return c(r(), s, f);
+      const p = typeof l > "u" ? t.children : l;
+      return c(o(), s, p);
     },
     dump(s) {
-      const l = n("nodeSize"), f = (h) => (p) => {
-        const m = h + "  ", d = h + "    ", { x: S, y: x } = p, g = l(p), y = p.children || [], v = y.length === 0 ? " " : `,${m}children: [${d}${y.map(f(d)).join(d)}${m}],${h}`;
-        return `{ size: [${g.join(", ")}],${m}x: ${S}, y: ${x}${v}},`;
+      const l = n("nodeSize"), p = (h) => (u) => {
+        const g = h + "  ", y = h + "    ", { x: f, y: k } = u, m = l(u), x = u.children || [], v = x.length === 0 ? " " : `,${g}children: [${y}${x.map(p(y)).join(y)}${g}],${h}`;
+        return `{ size: [${m.join(", ")}],${g}x: ${f}, y: ${k}${v}},`;
       };
-      return f(`
+      return p(`
 `)(s);
@@ -513,49 +560,49 @@ }
 }
-Q.version = ie;
-const tt = (e, t = 0) => (e.y = t, (e.children || []).reduce((n, i) => {
-  const [r, a] = n;
-  tt(i, e.y + e.ySize);
-  const c = (r === 0 ? i.lExt : i.rExt).bottom;
-  r !== 0 && se(e, r, a);
-  const s = fe(c, r, a);
-  return [r + 1, s];
-}, [0, null]), re(e), pe(e), e), et = (e, t, n) => {
+q.version = oe;
+const J = (e, t = 0) => (e.y = t, (e.children || []).reduce((n, i) => {
+  const [o, a] = n;
+  J(i, e.y + e.ySize);
+  const c = (o === 0 ? i.lExt : i.rExt).bottom;
+  o !== 0 && le(e, o, a);
+  const s = ge(c, o, a);
+  return [o + 1, s];
+}, [0, null]), ae(e), me(e), e), Q = (e, t, n) => {
   typeof t > "u" && (t = -e.relX - e.prelim, n = 0);
   const i = t + e.relX;
-  return e.relX = i + e.prelim - n, e.prelim = 0, e.x = n + e.relX, (e.children || []).forEach((r) => et(r, i, e.x)), e;
-}, re = (e) => {
+  return e.relX = i + e.prelim - n, e.prelim = 0, e.x = n + e.relX, (e.children || []).forEach((o) => Q(o, i, e.x)), e;
+}, ae = (e) => {
   (e.children || []).reduce((t, n) => {
-    const [i, r] = t, a = i + n.shift, c = r + a + n.change;
+    const [i, o] = t, a = i + n.shift, c = o + a + n.change;
     return n.relX += c, [a, c];
   }, [0, 0]);
-}, se = (e, t, n) => {
-  const i = e.children[t - 1], r = e.children[t];
-  let a = i, c = i.relX, s = r, l = r.relX, f = !0;
+}, le = (e, t, n) => {
+  const i = e.children[t - 1], o = e.children[t];
+  let a = i, c = i.relX, s = o, l = o.relX, p = !0;
   for (; a && s; ) {
     a.bottom > n.lowY && (n = n.next);
     const h = c + a.prelim - (l + s.prelim) + a.xSize / 2 + s.xSize / 2 + a.spacing(s);
-    (h > 0 || h < 0 && f) && (l += h, ae(r, h), le(e, t, n.index, h)), f = !1;
-    const p = a.bottom, m = s.bottom;
-    p <= m && (a = he(a), a && (c += a.relX)), p >= m && (s = ce(s), s && (l += s.relX));
+    (h > 0 || h < 0 && p) && (l += h, ce(o, h), he(e, t, n.index, h)), p = !1;
+    const u = a.bottom, g = s.bottom;
+    u <= g && (a = ue(a), a && (c += a.relX)), u >= g && (s = de(s), s && (l += s.relX));
   }
-  !a && s ? de(e, t, s, l) : a && !s && ue(e, t, a, c);
-}, ae = (e, t) => {
+  !a && s ? pe(e, t, s, l) : a && !s && fe(e, t, a, c);
+}, ce = (e, t) => {
   e.relX += t, e.lExtRelX += t, e.rExtRelX += t;
-}, le = (e, t, n, i) => {
-  const r = e.children[t], a = t - n;
+}, he = (e, t, n, i) => {
+  const o = e.children[t], a = t - n;
   if (a > 1) {
     const c = i / a;
-    e.children[n + 1].shift += c, r.shift -= c, r.change -= i - c;
+    e.children[n + 1].shift += c, o.shift -= c, o.change -= i - c;
   }
-}, ce = (e) => e.hasChildren ? e.firstChild : e.lThr, he = (e) => e.hasChildren ? e.lastChild : e.rThr, de = (e, t, n, i) => {
-  const r = e.firstChild, a = r.lExt, c = e.children[t];
+}, de = (e) => e.hasChildren ? e.firstChild : e.lThr, ue = (e) => e.hasChildren ? e.lastChild : e.rThr, pe = (e, t, n, i) => {
+  const o = e.firstChild, a = o.lExt, c = e.children[t];
   a.lThr = n;
-  const s = i - n.relX - r.lExtRelX;
-  a.relX += s, a.prelim -= s, r.lExt = c.lExt, r.lExtRelX = c.lExtRelX;
-}, ue = (e, t, n, i) => {
-  const r = e.children[t], a = r.rExt, c = e.children[t - 1];
+  const s = i - n.relX - o.lExtRelX;
+  a.relX += s, a.prelim -= s, o.lExt = c.lExt, o.lExtRelX = c.lExtRelX;
+}, fe = (e, t, n, i) => {
+  const o = e.children[t], a = o.rExt, c = e.children[t - 1];
   a.rThr = n;
-  const s = i - n.relX - r.rExtRelX;
-  a.relX += s, a.prelim -= s, r.rExt = c.rExt, r.rExtRelX = c.rExtRelX;
-}, pe = (e) => {
+  const s = i - n.relX - o.rExtRelX;
+  a.relX += s, a.prelim -= s, o.rExt = c.rExt, o.rExtRelX = c.rExtRelX;
+}, me = (e) => {
   if (e.hasChildren) {
@@ -571,3 +618,3 @@ const t = e.firstChild, n = e.lastChild, i = (t.prelim + t.relX - t.xSize / 2 + n.relX + n.prelim + n.xSize / 2) / 2;
   }
-}, fe = (e, t, n) => {
+}, ge = (e, t, n) => {
   for (; n !== null && e >= n.lowY; )
@@ -580,35 +627,31 @@ n = n.next;
   };
-}, nt = ".markmap{font:300 16px/20px sans-serif}.markmap-link{fill:none}.markmap-node>circle{cursor:pointer}.markmap-foreign{display:inline-block}.markmap-foreign a{color:#0097e6}.markmap-foreign a:hover{color:#00a8ff}.markmap-foreign code{padding:.25em;font-size:calc(1em - 2px);color:#555;background-color:#f0f0f0;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:#ffeaa7}", ge = ".markmap-container{position:absolute;width:0;height:0;top:-100px;left:-100px;overflow:hidden}.markmap-container>.markmap-foreign{display:inline-block}.markmap-container>.markmap-foreign>div:last-child,.markmap-container>.markmap-foreign>div:last-child :not(pre){white-space:nowrap}.markmap-container>.markmap-foreign>div:last-child code{white-space:inherit}", ze = nt;
-function Y(e) {
+}, xe = ".markmap-container{position:absolute;width:0;height:0;top:-100px;left:-100px;overflow:hidden}.markmap-container>.markmap-foreign{display:inline-block}.markmap-container>.markmap-foreign>div:last-child,.markmap-container>.markmap-foreign>div:last-child :not(pre){white-space:nowrap}.markmap-container>.markmap-foreign>div:last-child code{white-space:inherit}", tt = ".markmap{--markmap-a-color: #0097e6;--markmap-a-hover-color: #00a8ff;--markmap-code-bg: #f0f0f0;--markmap-code-color: #555;--markmap-highlight-bg: #ffeaa7;--markmap-table-border: 1px solid currentColor;--markmap-font: 300 16px/20px sans-serif;font:var(--markmap-font)}.markmap-link{fill:none}.markmap-node>circle{cursor:pointer}.markmap-foreign{display:inline-block}.markmap-foreign a{color:var(--markmap-a-color)}.markmap-foreign a:hover{color:var(--markmap-a-hover-color)}.markmap-foreign code{padding:.25em;font-size:calc(1em - 2px);color:var(--markmap-code-color);background-color:var(--markmap-code-bg);border-radius:2px}.markmap-foreign pre{margin:0}.markmap-foreign pre>code{display:block}.markmap-foreign del{text-decoration:line-through}.markmap-foreign em{font-style:italic}.markmap-foreign strong{font-weight:700}.markmap-foreign mark{background:var(--markmap-highlight-bg)}.markmap-foreign table,.markmap-foreign th,.markmap-foreign td{border-collapse:collapse;border:var(--markmap-table-border)}.markmap-foreign img{display:inline-block}.markmap-foreign-testing-max img{max-width:none;max-height:none}", be = tt;
+function W(e) {
   const t = e.data;
-  return Math.max(4 - 2 * t.depth, 1.5);
+  return Math.max(4 - 2 * t.state.depth, 1.5);
 }
-function K(e, t) {
-  const n = ft(e, t);
+function Y(e, t) {
+  const n = mt(e, t);
   return e[n];
 }
-function B(e) {
+function D(e) {
   e.stopPropagation();
 }
-function me() {
-  return {
-    transformHtml: new U()
-  };
-}
-const xe = new U(), ye = G(ct), P = typeof navigator < "u" && navigator.userAgent.includes("Macintosh"), C = class C {
+const ye = new st();
+class et {
   constructor(t, n) {
-    this.options = C.defaultOptions, this.revokers = [], this.handleZoom = (i) => {
-      const { transform: r } = i;
-      this.g.attr("transform", r);
+    this.options = P, this.revokers = [], this.imgCache = {}, this.handleZoom = (i) => {
+      const { transform: o } = i;
+      this.g.attr("transform", o);
     }, this.handlePan = (i) => {
       i.preventDefault();
-      const r = O(this.svg.node()), a = r.translate(
-        -i.deltaX / r.k,
-        -i.deltaY / r.k
+      const o = A(this.svg.node()), a = o.translate(
+        -i.deltaX / o.k,
+        -i.deltaY / o.k
       );
       this.svg.call(this.zoom.transform, a);
-    }, this.handleClick = (i, r) => {
+    }, this.handleClick = (i, o) => {
       let a = this.options.toggleRecursively;
-      (P ? i.metaKey : i.ctrlKey) && (a = !a), this.toggleNode(r.data, a);
-    }, this.viewHooks = me(), this.svg = t.datum ? t : ht(t), this.styleNode = this.svg.append("style"), this.zoom = dt().filter((i) => this.options.scrollForPan && i.type === "wheel" ? i.ctrlKey && !i.button : (!i.ctrlKey || i.type === "wheel") && !i.button).on("zoom", this.handleZoom), this.setOptions(n), this.state = {
+      (K ? i.metaKey : i.ctrlKey) && (a = !a), this.toggleNode(o.data, a);
+    }, this.svg = t.datum ? t : dt(t), this.styleNode = this.svg.append("style"), this.zoom = ut().filter((i) => this.options.scrollForPan && i.type === "wheel" ? i.ctrlKey && !i.button : (!i.ctrlKey || i.type === "wheel") && !i.button).on("zoom", this.handleZoom), this.setOptions(n), this.state = {
       id: this.options.id || this.svg.attr("id") || at(),
@@ -619,4 +662,4 @@ minX: 0,
       maxY: 0
-    }, this.g = this.svg.append("g"), this.revokers.push(
-      xe.tap(() => {
+    }, this.g = this.svg.append("g"), this.debouncedRefresh = lt(() => this.setData(), 200), this.revokers.push(
+      ye.tap(() => {
         this.setData();
@@ -628,3 +671,3 @@ })
     const { style: t } = this.options, { id: n } = this.state, i = typeof t == "function" ? t(n) : "";
-    return [this.options.embedGlobalCSS && nt, i].filter(Boolean).join(`
+    return [this.options.embedGlobalCSS && tt, i].filter(Boolean).join(`
 `);
@@ -635,3 +678,3 @@ }
       "class",
-      lt(this.svg.attr("class"), "markmap", this.state.id)
+      ct(this.svg.attr("class"), "markmap", this.state.id)
     );
@@ -642,5 +685,5 @@ const t = this.getStyleContent();
   toggleNode(t, n = !1) {
-    var r, a;
-    const i = (r = t.payload) != null && r.fold ? 0 : 1;
-    n ? M(t, (c, s) => {
+    var o, a;
+    const i = (o = t.payload) != null && o.fold ? 0 : 1;
+    n ? T(t, (c, s) => {
       c.payload = {
@@ -657,41 +700,64 @@ ...c.payload,
     let n = 0;
-    const { color: i, nodeMinHeight: r, maxWidth: a, initialExpandLevel: c } = this.options, { id: s } = this.state, l = $(
-      /* @__PURE__ */ N("div", { className: `markmap-container markmap ${s}-g` })
-    ), f = $(
-      /* @__PURE__ */ N("style", { children: [this.getStyleContent(), ge].join(`
+    const { color: i, nodeMinHeight: o, maxWidth: a, initialExpandLevel: c } = this.options, { id: s } = this.state, l = O(
+      /* @__PURE__ */ j("div", { className: `markmap-container markmap ${s}-g` })
+    ), p = O(
+      /* @__PURE__ */ j("style", { children: [this.getStyleContent(), xe].join(`
 `) })
     );
-    document.body.append(l, f);
+    document.body.append(l, p);
     const h = a ? `max-width: ${a}px` : "";
-    let p = 0;
-    M(t, (d, S, x) => {
-      var v, k, w;
-      d.children = (v = d.children) == null ? void 0 : v.map((E) => ({ ...E })), n += 1;
-      const g = $(
-        /* @__PURE__ */ N("div", { className: "markmap-foreign", style: h, children: /* @__PURE__ */ N("div", { dangerouslySetInnerHTML: { __html: d.content } }) })
+    let u = 0, g = 0;
+    T(t, (f, k, m) => {
+      var b, w, z;
+      g += 1, f.children = (b = f.children) == null ? void 0 : b.map((C) => ({ ...C })), n += 1;
+      const x = O(
+        /* @__PURE__ */ j(
+          "div",
+          {
+            className: "markmap-foreign markmap-foreign-testing-max",
+            style: h,
+            children: /* @__PURE__ */ j("div", { dangerouslySetInnerHTML: { __html: f.content } })
+          }
+        )
       );
-      l.append(g), d.state = {
-        ...d.state,
+      l.append(x), f.state = {
+        ...f.state,
+        depth: g,
         id: n,
-        el: g.firstChild
-      }, d.state.path = [(k = x == null ? void 0 : x.state) == null ? void 0 : k.path, d.state.id].filter(Boolean).join("."), i(d);
-      const y = ((w = d.payload) == null ? void 0 : w.fold) === 2;
-      y ? p += 1 : (p || c >= 0 && d.depth >= c) && (d.payload = { ...d.payload, fold: 1 }), S(), y && (p -= 1);
+        el: x.firstChild
+      }, f.state.path = [(w = m == null ? void 0 : m.state) == null ? void 0 : w.path, f.state.id].filter(Boolean).join("."), i(f);
+      const v = ((z = f.payload) == null ? void 0 : z.fold) === 2;
+      v ? u += 1 : (u || c >= 0 && f.state.depth >= c) && (f.payload = { ...f.payload, fold: 1 }), k(), v && (u -= 1), g -= 1;
     });
-    const m = Array.from(l.childNodes).map(
-      (d) => d.firstChild
+    const y = Array.from(l.childNodes).map(
+      (f) => f.firstChild
     );
-    this.viewHooks.transformHtml.call(this, m), m.forEach((d) => {
-      var S;
-      (S = d.parentNode) == null || S.append(d.cloneNode(!0));
-    }), M(t, (d, S, x) => {
-      var v;
-      const g = d.state, y = g.el.getBoundingClientRect();
-      d.content = g.el.innerHTML, g.size = [
-        Math.ceil(y.width) + 1,
-        Math.max(Math.ceil(y.height), r)
-      ], g.key = [(v = x == null ? void 0 : x.state) == null ? void 0 : v.id, g.id].filter(Boolean).join(".") + // FIXME: find a way to check content hash
-      d.content, S();
-    }), l.remove(), f.remove();
+    this._checkImages(l), y.forEach((f) => {
+      var k;
+      (k = f.parentNode) == null || k.append(f.cloneNode(!0));
+    }), T(t, (f, k, m) => {
+      var b;
+      const x = f.state, v = x.el.getBoundingClientRect();
+      f.content = x.el.innerHTML, x.size = [
+        Math.ceil(v.width) + 1,
+        Math.max(Math.ceil(v.height), o)
+      ], x.key = [(b = m == null ? void 0 : m.state) == null ? void 0 : b.id, x.id].filter(Boolean).join(".") + // FIXME: find a way to check content hash
+      f.content, k();
+    }), l.remove(), p.remove();
   }
+  _checkImages(t) {
+    t.querySelectorAll("img").forEach((n) => {
+      if (n.width)
+        return;
+      const i = this.imgCache[n.src];
+      i != null && i[0] ? [n.width, n.height] = i : i || this._loadImage(n.src);
+    });
+  }
+  _loadImage(t) {
+    this.imgCache[t] = [0, 0];
+    const n = new Image();
+    n.src = t, n.onload = () => {
+      this.imgCache[t] = [n.naturalWidth, n.naturalHeight], this.debouncedRefresh();
+    };
+  }
   setOptions(t) {
@@ -709,120 +775,120 @@ this.options = {
       return;
-    const { spacingHorizontal: n, paddingX: i, spacingVertical: r, autoFit: a, color: c } = this.options, s = Q({}).children((o) => {
-      var u;
-      if (!((u = o.payload) != null && u.fold))
-        return o.children;
-    }).nodeSize((o) => {
-      const [u, z] = o.data.state.size;
-      return [z, u + (u ? i * 2 : 0) + n];
-    }).spacing((o, u) => o.parent === u.parent ? r : r * 2), l = s.hierarchy(this.state.data);
+    const { spacingHorizontal: n, paddingX: i, spacingVertical: o, autoFit: a, color: c } = this.options, s = q({}).children((r) => {
+      var d;
+      if (!((d = r.payload) != null && d.fold))
+        return r.children;
+    }).nodeSize((r) => {
+      const [d, S] = r.data.state.size;
+      return [S, d + (d ? i * 2 : 0) + n];
+    }).spacing((r, d) => r.parent === d.parent ? o : o * 2), l = s.hierarchy(this.state.data);
     s(l);
-    const f = l.descendants().reverse(), h = l.links(), p = ut(), m = I(f, (o) => o.x - o.xSize / 2), d = W(f, (o) => o.x + o.xSize / 2), S = I(f, (o) => o.y), x = W(f, (o) => o.y + o.ySize - n);
+    const p = l.descendants().reverse(), h = l.links(), u = pt(), g = H(p, (r) => r.x - r.xSize / 2), y = L(p, (r) => r.x + r.xSize / 2), f = H(p, (r) => r.y), k = L(p, (r) => r.y + r.ySize - n);
     Object.assign(this.state, {
-      minX: m,
-      maxX: d,
-      minY: S,
-      maxY: x
+      minX: g,
+      maxX: y,
+      minY: f,
+      maxY: k
     }), a && this.fit();
-    const g = t && f.find((o) => o.data === t) || l, y = g.data.state.x0 ?? g.x, v = g.data.state.y0 ?? g.y, k = this.g.selectAll(
-      b("g")
-    ).data(f, (o) => o.data.state.key), w = k.enter().append("g").attr("data-depth", (o) => o.data.depth).attr("data-path", (o) => o.data.state.path).attr(
+    const m = t && p.find((r) => r.data === t) || l, x = m.data.state.x0 ?? m.x, v = m.data.state.y0 ?? m.y, b = this.g.selectAll(
+      E("g")
+    ).data(p, (r) => r.data.state.key), w = b.enter().append("g").attr("data-depth", (r) => r.data.state.depth).attr("data-path", (r) => r.data.state.path).attr(
       "transform",
-      (o) => `translate(${v + g.ySize - o.ySize},${y + g.xSize / 2 - o.xSize})`
-    ), E = this.transition(k.exit());
-    E.select("line").attr("x1", (o) => o.ySize - n).attr("x2", (o) => o.ySize - n), E.select("foreignObject").style("opacity", 0), E.attr(
+      (r) => `translate(${v + m.ySize - r.ySize},${x + m.xSize / 2 - r.xSize})`
+    ), z = this.transition(b.exit());
+    z.select("line").attr("x1", (r) => r.ySize - n).attr("x2", (r) => r.ySize - n), z.select("foreignObject").style("opacity", 0), z.attr(
       "transform",
-      (o) => `translate(${g.y + g.ySize - o.ySize},${g.x + g.xSize / 2 - o.xSize})`
+      (r) => `translate(${m.y + m.ySize - r.ySize},${m.x + m.xSize / 2 - r.xSize})`
     ).remove();
-    const X = k.merge(w).attr(
+    const C = b.merge(w).attr(
       "class",
-      (o) => {
-        var u;
-        return ["markmap-node", ((u = o.data.payload) == null ? void 0 : u.fold) && "markmap-fold"].filter(Boolean).join(" ");
+      (r) => {
+        var d;
+        return ["markmap-node", ((d = r.data.payload) == null ? void 0 : d.fold) && "markmap-fold"].filter(Boolean).join(" ");
       }
     );
-    this.transition(X).attr(
+    this.transition(C).attr(
       "transform",
-      (o) => `translate(${o.y},${o.x - o.xSize / 2})`
+      (r) => `translate(${r.y},${r.x - r.xSize / 2})`
     );
-    const it = X.selectAll(
-      b("line")
+    const nt = C.selectAll(
+      E("line")
     ).data(
-      (o) => [o],
-      (o) => o.data.state.key
+      (r) => [r],
+      (r) => r.data.state.key
     ).join(
-      (o) => o.append("line").attr("x1", (u) => u.ySize - n).attr("x2", (u) => u.ySize - n),
-      (o) => o,
-      (o) => o.remove()
+      (r) => r.append("line").attr("x1", (d) => d.ySize - n).attr("x2", (d) => d.ySize - n),
+      (r) => r,
+      (r) => r.remove()
     );
-    this.transition(it).attr("x1", -1).attr("x2", (o) => o.ySize - n + 2).attr("y1", (o) => o.xSize).attr("y2", (o) => o.xSize).attr("stroke", (o) => c(o.data)).attr("stroke-width", Y);
-    const ot = X.selectAll(
-      b("circle")
+    this.transition(nt).attr("x1", -1).attr("x2", (r) => r.ySize - n + 2).attr("y1", (r) => r.xSize).attr("y2", (r) => r.xSize).attr("stroke", (r) => c(r.data)).attr("stroke-width", W);
+    const it = C.selectAll(
+      E("circle")
     ).data(
-      (o) => {
-        var u;
-        return (u = o.data.children) != null && u.length ? [o] : [];
+      (r) => {
+        var d;
+        return (d = r.data.children) != null && d.length ? [r] : [];
       },
-      (o) => o.data.state.key
+      (r) => r.data.state.key
     ).join(
-      (o) => o.append("circle").attr("stroke-width", "1.5").attr("cx", (u) => u.ySize - n).attr("cy", (u) => u.xSize).attr("r", 0).on("click", (u, z) => this.handleClick(u, z)).on("mousedown", B),
-      (o) => o,
-      (o) => o.remove()
+      (r) => r.append("circle").attr("stroke-width", "1.5").attr("cx", (d) => d.ySize - n).attr("cy", (d) => d.xSize).attr("r", 0).on("click", (d, S) => this.handleClick(d, S)).on("mousedown", D),
+      (r) => r,
+      (r) => r.remove()
     );
-    this.transition(ot).attr("r", 6).attr("cx", (o) => o.ySize - n).attr("cy", (o) => o.xSize).attr("stroke", (o) => c(o.data)).attr(
+    this.transition(it).attr("r", 6).attr("cx", (r) => r.ySize - n).attr("cy", (r) => r.xSize).attr("stroke", (r) => c(r.data)).attr(
       "fill",
-      (o) => {
-        var u;
-        return (u = o.data.payload) != null && u.fold && o.data.children ? c(o.data) : "#fff";
+      (r) => {
+        var d;
+        return (d = r.data.payload) != null && d.fold && r.data.children ? c(r.data) : "#fff";
       }
     );
-    const rt = X.selectAll(
-      b("foreignObject")
+    const rt = C.selectAll(
+      E("foreignObject")
     ).data(
-      (o) => [o],
-      (o) => o.data.state.key
+      (r) => [r],
+      (r) => r.data.state.key
     ).join(
-      (o) => {
-        const u = o.append("foreignObject").attr("class", "markmap-foreign").attr("x", i).attr("y", 0).style("opacity", 0).on("mousedown", B).on("dblclick", B);
-        return u.append("xhtml:div").select(function(T) {
-          const j = T.data.state.el.cloneNode(!0);
-          return this.replaceWith(j), j;
-        }).attr("xmlns", "http://www.w3.org/1999/xhtml"), u;
+      (r) => {
+        const d = r.append("foreignObject").attr("class", "markmap-foreign").attr("x", i).attr("y", 0).style("opacity", 0).on("mousedown", D).on("dblclick", D);
+        return d.append("xhtml:div").select(function(R) {
+          const X = R.data.state.el.cloneNode(!0);
+          return this.replaceWith(X), X;
+        }).attr("xmlns", "http://www.w3.org/1999/xhtml"), d;
       },
-      (o) => o,
-      (o) => o.remove()
+      (r) => r,
+      (r) => r.remove()
     ).attr(
       "width",
-      (o) => Math.max(0, o.ySize - n - i * 2)
-    ).attr("height", (o) => o.xSize);
+      (r) => Math.max(0, r.ySize - n - i * 2)
+    ).attr("height", (r) => r.xSize);
     this.transition(rt).style("opacity", 1);
-    const st = this.g.selectAll(
-      b("path")
-    ).data(h, (o) => o.target.data.state.key).join(
-      (o) => {
-        const u = [
-          v + g.ySize - n,
-          y + g.xSize / 2
+    const ot = this.g.selectAll(
+      E("path")
+    ).data(h, (r) => r.target.data.state.key).join(
+      (r) => {
+        const d = [
+          v + m.ySize - n,
+          x + m.xSize / 2
         ];
-        return o.insert("path", "g").attr("class", "markmap-link").attr("data-depth", (z) => z.target.data.depth).attr("data-path", (z) => z.target.data.state.path).attr("d", p({ source: u, target: u }));
+        return r.insert("path", "g").attr("class", "markmap-link").attr("data-depth", (S) => S.target.data.state.depth).attr("data-path", (S) => S.target.data.state.path).attr("d", u({ source: d, target: d }));
       },
-      (o) => o,
-      (o) => {
-        const u = [
-          g.y + g.ySize - n,
-          g.x + g.xSize / 2
+      (r) => r,
+      (r) => {
+        const d = [
+          m.y + m.ySize - n,
+          m.x + m.xSize / 2
         ];
-        return this.transition(o).attr("d", p({ source: u, target: u })).remove();
+        return this.transition(r).attr("d", u({ source: d, target: d })).remove();
       }
     );
-    this.transition(st).attr("stroke", (o) => c(o.target.data)).attr("stroke-width", (o) => Y(o.target)).attr("d", (o) => {
-      const u = o.source, z = o.target, T = [
-        u.y + u.ySize - n,
-        u.x + u.xSize / 2
-      ], j = [
-        z.y,
-        z.x + z.xSize / 2
+    this.transition(ot).attr("stroke", (r) => c(r.target.data)).attr("stroke-width", (r) => W(r.target)).attr("d", (r) => {
+      const d = r.source, S = r.target, R = [
+        d.y + d.ySize - n,
+        d.x + d.xSize / 2
+      ], X = [
+        S.y,
+        S.x + S.xSize / 2
       ];
-      return p({ source: T, target: j });
-    }), f.forEach((o) => {
-      o.data.state.x0 = o.x, o.data.state.y0 = o.y;
+      return u({ source: R, target: X });
+    }), p.forEach((r) => {
+      r.data.state.x0 = r.x, r.data.state.y0 = r.y;
     });
@@ -838,11 +904,11 @@ }
   async fit() {
-    const t = this.svg.node(), { width: n, height: i } = t.getBoundingClientRect(), { fitRatio: r } = this.options, { minX: a, maxX: c, minY: s, maxY: l } = this.state, f = l - s, h = c - a, p = Math.min(
-      n / f * r,
-      i / h * r,
+    const t = this.svg.node(), { width: n, height: i } = t.getBoundingClientRect(), { fitRatio: o } = this.options, { minX: a, maxX: c, minY: s, maxY: l } = this.state, p = l - s, h = c - a, u = Math.min(
+      n / p * o,
+      i / h * o,
       2
-    ), m = pt.translate(
-      (n - f * p) / 2 - s * p,
-      (i - h * p) / 2 - a * p
-    ).scale(p);
-    return this.transition(this.svg).call(this.zoom.transform, m).end().catch(A);
+    ), g = ft.translate(
+      (n - p * u) / 2 - s * u,
+      (i - h * u) / 2 - a * u
+    ).scale(u);
+    return this.transition(this.svg).call(this.zoom.transform, g).end().catch(M);
   }
@@ -855,3 +921,3 @@ /**
     if (this.g.selectAll(
-      b("g")
+      E("g")
     ).each(function(v) {
@@ -861,9 +927,9 @@ v.data === t && (i = v);
       return;
-    const r = this.svg.node(), { spacingHorizontal: a } = this.options, c = r.getBoundingClientRect(), s = O(r), [l, f] = [
+    const o = this.svg.node(), { spacingHorizontal: a } = this.options, c = o.getBoundingClientRect(), s = A(o), [l, p] = [
       i.y,
       i.y + i.ySize - a + 2
-    ].map((y) => y * s.k + s.x), [h, p] = [
+    ].map((x) => x * s.k + s.x), [h, u] = [
       i.x - i.xSize / 2,
       i.x + i.xSize / 2
-    ].map((y) => y * s.k + s.y), m = {
+    ].map((x) => x * s.k + s.y), g = {
       left: 0,
@@ -874,6 +940,6 @@ right: 0,
       ...n
-    }, d = [m.left - l, c.width - m.right - f], S = [m.top - h, c.height - m.bottom - p], x = d[0] * d[1] > 0 ? K(d, Math.abs) / s.k : 0, g = S[0] * S[1] > 0 ? K(S, Math.abs) / s.k : 0;
-    if (x || g) {
-      const y = s.translate(x, g);
-      return this.transition(this.svg).call(this.zoom.transform, y).end().catch(A);
+    }, y = [g.left - l, c.width - g.right - p], f = [g.top - h, c.height - g.bottom - u], k = y[0] * y[1] > 0 ? Y(y, Math.abs) / s.k : 0, m = f[0] * f[1] > 0 ? Y(f, Math.abs) / s.k : 0;
+    if (k || m) {
+      const x = s.translate(k, m);
+      return this.transition(this.svg).call(this.zoom.transform, x).end().catch(M);
     }
@@ -885,7 +951,7 @@ }
   async rescale(t) {
-    const n = this.svg.node(), { width: i, height: r } = n.getBoundingClientRect(), a = i / 2, c = r / 2, s = O(n), l = s.translate(
+    const n = this.svg.node(), { width: i, height: o } = n.getBoundingClientRect(), a = i / 2, c = o / 2, s = A(n), l = s.translate(
       (a - s.x) * (1 - t) / s.k,
       (c - s.y) * (1 - t) / s.k
     ).scale(t);
-    return this.transition(this.svg).call(this.zoom.transform, l).end().catch(A);
+    return this.transition(this.svg).call(this.zoom.transform, l).end().catch(M);
   }
@@ -898,62 +964,16 @@ destroy() {
   static create(t, n, i = null) {
-    const r = new C(t, n);
-    return i && (r.setData(i), r.fit()), r;
+    const o = new et(t, n);
+    return i && (o.setData(i), o.fit()), o;
   }
-};
-C.defaultOptions = {
-  autoFit: !1,
-  color: (t) => {
-    var n;
-    return ye(`${((n = t.state) == null ? void 0 : n.path) || ""}`);
-  },
-  duration: 500,
-  embedGlobalCSS: !0,
-  fitRatio: 0.95,
-  maxWidth: 0,
-  nodeMinHeight: 16,
-  paddingX: 8,
-  scrollForPan: P,
-  spacingHorizontal: 80,
-  spacingVertical: 5,
-  initialExpandLevel: -1,
-  zoom: !0,
-  pan: !0,
-  toggleRecursively: !1
-};
-let F = C;
-function ke(e) {
-  const t = {}, n = { ...e }, { color: i, colorFreezeLevel: r } = n;
-  if ((i == null ? void 0 : i.length) === 1) {
-    const s = i[0];
-    t.color = () => s;
-  } else if (i != null && i.length) {
-    const s = G(i);
-    t.color = (l) => s(`${l.state.path}`);
-  }
-  if (r) {
-    const s = t.color || F.defaultOptions.color;
-    t.color = (l) => (l = {
-      ...l,
-      state: {
-        ...l.state,
-        path: l.state.path.split(".").slice(0, r).join(".")
-      }
-    }, s(l));
-  }
-  return ["duration", "maxWidth", "initialExpandLevel"].forEach((s) => {
-    const l = n[s];
-    typeof l == "number" && (t[s] = l);
-  }), ["zoom", "pan"].forEach((s) => {
-    const l = n[s];
-    l != null && (t[s] = !!l);
-  }), t;
 }
 export {
-  F as Markmap,
-  ye as defaultColorFn,
-  ke as deriveOptions,
-  ze as globalCSS,
-  Ce as loadCSS,
+  et as Markmap,
+  gt as defaultColorFn,
+  P as defaultOptions,
+  Se as deriveOptions,
+  be as globalCSS,
+  K as isMacintosh,
+  Ee as loadCSS,
   we as loadJS,
-  xe as refreshHook
+  ye as refreshHook
 };

dist/types.d.ts

@@ -10,1 +10,12 @@ import { INode } from 'markmap-common';
 }
+export interface IMarkmapJSONOptions {
+    color?: string[];
+    colorFreezeLevel?: number;
+    duration?: number;
+    maxWidth?: number;
+    initialExpandLevel?: number;
+    extraJs?: string[];
+    extraCss?: string[];
+    zoom?: boolean;
+    pan?: boolean;
+}

dist/view.d.ts

 import type * as d3 from 'd3';
 import { FlextreeNode } from 'd3-flextree';
-import { Hook, INode, IPureNode, IMarkmapOptions, IMarkmapJSONOptions } from 'markmap-common';
+import { Hook, IMarkmapOptions, INode, IPureNode } from 'markmap-common';
 import { IMarkmapState } from './types';
@@ -13,5 +13,2 @@ export declare const globalCSS: string;
 type ID3SVGElement = d3.Selection<SVGElement, FlextreeNode<INode>, HTMLElement, FlextreeNode<INode>>;
-declare function createViewHooks(): {
-    transformHtml: Hook<[mm: Markmap, nodes: HTMLElement[]]>;
-};
 /**
@@ -21,5 +18,3 @@ * A global hook to refresh all markmaps when called.
 export declare const refreshHook: Hook<[]>;
-export declare const defaultColorFn: d3.ScaleOrdinal<string, string, never>;
 export declare class Markmap {
-    static defaultOptions: IMarkmapOptions;
     options: IMarkmapOptions;
@@ -31,4 +26,5 @@ state: IMarkmapState;
     zoom: d3.ZoomBehavior<SVGElement, FlextreeNode<INode>>;
-    viewHooks: ReturnType<typeof createViewHooks>;
     revokers: (() => void)[];
+    private imgCache;
+    private debouncedRefresh;
     constructor(svg: string | SVGElement | ID3SVGElement, opts?: Partial<IMarkmapOptions>);
@@ -42,2 +38,4 @@ getStyleContent(): string;
     initializeData(node: INode): void;
+    private _checkImages;
+    private _loadImage;
     setOptions(opts?: Partial<IMarkmapOptions>): void;
@@ -62,3 +60,2 @@ setData(data?: IPureNode | null, opts?: Partial<IMarkmapOptions>): void;
 }
-export declare function deriveOptions(jsonOptions?: IMarkmapJSONOptions): Partial<IMarkmapOptions>;
 export {};

package.json

 {
   "name": "markmap-view",
-  "version": "0.15.8",
+  "version": "0.15.9-alpha.0+9cb40e7",
   "description": "View markmaps in browser",
@@ -47,3 +47,3 @@ "author": "Gerald <[e-mail]>",
     "@types/d3-flextree": "^2.1.1",
-    "markmap-common": "0.15.6"
+    "markmap-common": "0.15.9-alpha.0+9cb40e7"
   },
@@ -53,3 +53,3 @@ "peerDependencies": {
   },
-  "gitHead": "d5a29ab4064a5496f879de04d730d7192461d3c5"
+  "gitHead": "9cb40e7e9ec0aa1f25a2de6a74912cd0c21f52ed"
 }

New alerts

Manifest confusion

Supply chain risk

This package has inconsistent metadata. This could be malicious or caused by an error when publishing the package.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

87843

increased by4.21%

Number of package files

10

increased by25%

Lines of code

2672

increased by3.49%

Worsened metrics

Number of low supply chain risk alerts

1

increased byInfinity%

Number of medium supply chain risk alerts

2

increased by100%

No dependency changes