markmap-view 0.18.5 → 0.18.8-alpha.2

package/dist/browser/index.js

@@ -327,31 +327,33 @@
   }
   const isMacintosh = typeof navigator !== "undefined" && navigator.userAgent.includes("Macintosh");
   const defaultColorFn = d32.scaleOrdinal(d32.schemeCategory10);
+  const linkWidthFactory = (baseWidth = 4, k = -2, minWidth = 1.5) => (node) => Math.max(baseWidth + k * node.state.depth, minWidth);
   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,
     maxInitialScale: 2,
-    maxWidth: 0,
-    nodeMinHeight: 16,
-    paddingX: 8,
     scrollForPan: isMacintosh,
-    spacingHorizontal: 80,
-    spacingVertical: 5,
     initialExpandLevel: -1,
     zoom: true,
     pan: true,
-    toggleRecursively: false
+    toggleRecursively: false,
+    color: (node) => {
+      var _a;
+      return defaultColorFn(`${((_a = node.state) == null ? void 0 : _a.path) || ""}`);
+    },
+    linkWidth: linkWidthFactory(),
+    maxWidth: 0,
+    nodeMinHeight: 16,
+    paddingX: 8,
+    spacingHorizontal: 80,
+    spacingVertical: 5
   };
   function deriveOptions(jsonOptions) {
     const derivedOptions = {};
     const options = { ...jsonOptions };
-    const { color, colorFreezeLevel } = options;
+    const { color, colorFreezeLevel, linkWidth } = options;
     if ((color == null ? void 0 : color.length) === 1) {
       const solidColor = color[0];
       derivedOptions.color = () => solidColor;
@@ -372,6 +374,12 @@
         return color2(node);
       };
     }
+    if (linkWidth) {
+      const args = Array.isArray(linkWidth) ? linkWidth : [linkWidth];
+      derivedOptions.linkWidth = linkWidthFactory(
+        ...args
+      );
+    }
     const numberKeys = [
       "duration",
       "fitRatio",
@@ -948,9 +956,6 @@
   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);
-  }
   function minBy(numbers, by) {
     const index = d32.minIndex(numbers, by);
     return numbers[index];
@@ -961,7 +966,7 @@
   const refreshHook = new Hook();
   class Markmap {
     constructor(svg, opts) {
-      this.options = defaultOptions;
+      this.options = { ...defaultOptions };
       this._disposeList = [];
       this.handleZoom = (e) => {
         const { transform } = e;
@@ -1165,7 +1170,7 @@
       return rect;
     }
     async renderData(originData) {
-      const { paddingX, autoFit, color, maxWidth } = this.options;
+      const { paddingX, autoFit, color, maxWidth, linkWidth } = this.options;
       const rootNode = this.state.data;
       if (!rootNode) return;
       const nodeMap = {};
@@ -1467,6 +1472,7 @@
   exports.deriveOptions = deriveOptions;
   exports.globalCSS = globalCSS;
   exports.isMacintosh = isMacintosh;
+  exports.linkWidthFactory = linkWidthFactory;
   exports.loadCSS = loadCSS;
   exports.loadJS = loadJS;
   exports.refreshHook = refreshHook;

package/dist/constants.d.ts

@@ -1,4 +1,5 @@
-import { IMarkmapOptions } from 'markmap-common';
+import { IMarkmapOptions, INode } from 'markmap-common';
 export declare const isMacintosh: boolean;
 export declare const defaultColorFn: import("d3").ScaleOrdinal<string, string, never>;
+export declare const linkWidthFactory: (baseWidth?: number, k?: number, minWidth?: number) => (node: INode) => number;
 export declare const defaultOptions: IMarkmapOptions;

package/dist/index.js

@@ -1,45 +1,52 @@
-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 = {
+import { Hook as dt, getId as pt, debounce as gt, addClass as ut, walkTree as R, noop as X } from "markmap-common";
+import { loadCSS as ze, loadJS as we } from "markmap-common";
+import { scaleOrdinal as Y, schemeCategory10 as mt, linkHorizontal as ft, zoomTransform as w, select as xt, zoom as yt, min as G, max as V, zoomIdentity as kt, minIndex as vt } from "d3";
+const Z = typeof navigator < "u" && navigator.userAgent.includes("Macintosh"), bt = Y(mt), q = (e = 4, t = -2, i = 1.5) => (n) => Math.max(e + t * n.state.depth, i), J = {
   autoFit: !1,
-  color: (e) => {
-    var t;
-    return vt(`${((t = e.state) == null ? void 0 : t.path) || ""}`);
-  },
   duration: 500,
   embedGlobalCSS: !0,
   fitRatio: 0.95,
   maxInitialScale: 2,
-  maxWidth: 0,
-  nodeMinHeight: 16,
-  paddingX: 8,
   scrollForPan: Z,
-  spacingHorizontal: 80,
-  spacingVertical: 5,
   initialExpandLevel: -1,
   zoom: !0,
   pan: !0,
-  toggleRecursively: !1
+  toggleRecursively: !1,
+  color: (e) => {
+    var t;
+    return bt(`${((t = e.state) == null ? void 0 : t.path) || ""}`);
+  },
+  linkWidth: q(),
+  maxWidth: 0,
+  nodeMinHeight: 16,
+  paddingX: 8,
+  spacingHorizontal: 80,
+  spacingVertical: 5
 };
-function ye(e) {
-  const t = {}, i = { ...e }, { color: n, colorFreezeLevel: o } = i;
+function ke(e) {
+  const t = {}, i = { ...e }, { color: n, colorFreezeLevel: s, linkWidth: a } = i;
   if ((n == null ? void 0 : n.length) === 1) {
-    const s = n[0];
-    t.color = () => s;
+    const c = n[0];
+    t.color = () => c;
   } else if (n != null && n.length) {
-    const s = Y(n);
-    t.color = (c) => s(`${c.state.path}`);
+    const c = Y(n);
+    t.color = (h) => c(`${h.state.path}`);
   }
-  if (o) {
-    const s = t.color || q.color;
-    t.color = (c) => (c = {
-      ...c,
+  if (s) {
+    const c = t.color || J.color;
+    t.color = (h) => (h = {
+      ...h,
       state: {
-        ...c.state,
-        path: c.state.path.split(".").slice(0, o).join(".")
+        ...h.state,
+        path: h.state.path.split(".").slice(0, s).join(".")
       }
-    }, s(c));
+    }, c(h));
+  }
+  if (a) {
+    const c = Array.isArray(a) ? a : [a];
+    t.linkWidth = q(
+      ...c
+    );
   }
   return [
     "duration",
@@ -51,15 +58,15 @@ function ye(e) {
     "paddingX",
     "spacingHorizontal",
     "spacingVertical"
-  ].forEach((s) => {
-    const c = i[s];
-    typeof c == "number" && (t[s] = c);
-  }), ["zoom", "pan"].forEach((s) => {
-    const c = i[s];
-    c != null && (t[s] = !!c);
+  ].forEach((c) => {
+    const h = i[c];
+    typeof h == "number" && (t[c] = h);
+  }), ["zoom", "pan"].forEach((c) => {
+    const h = i[c];
+    h != null && (t[c] = !!h);
   }), t;
 }
-function bt(e) {
+function Et(e) {
   let t = 0;
   for (let i = 0; i < e.length; i++)
     t = (t << 5) - t + e.charCodeAt(i) | 0;
@@ -73,101 +80,101 @@ function k(e) {
   const t = e;
   return function() {
     let n = Array.from(this.childNodes);
-    return t && (n = n.filter((o) => t(o))), n;
+    return t && (n = n.filter((s) => t(s))), n;
   };
 }
-function Et(e) {
+function zt(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 zt() {
-  return this.eachAfter(Et);
+function wt() {
+  return this.eachAfter(zt);
 }
-function wt(e) {
-  var t = this, i, n = [t], o, a, l;
+function Ct(e) {
+  var t = this, i, n = [t], s, a, l;
   do
     for (i = n.reverse(), n = []; t = i.pop(); )
-      if (e(t), o = t.children, o) for (a = 0, l = o.length; a < l; ++a)
-        n.push(o[a]);
+      if (e(t), s = t.children, s) for (a = 0, l = s.length; a < l; ++a)
+        n.push(s[a]);
   while (n.length);
   return this;
 }
-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]);
+function St(e) {
+  for (var t = this, i = [t], n, s; t = i.pop(); )
+    if (e(t), n = t.children, n) for (s = n.length - 1; s >= 0; --s)
+      i.push(n[s]);
   return this;
 }
-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]);
+function Rt(e) {
+  for (var t = this, i = [t], n = [], s, a, l; t = i.pop(); )
+    if (n.push(t), s = t.children, s) for (a = 0, l = s.length; a < l; ++a)
+      i.push(s[a]);
   for (; t = n.pop(); )
     e(t);
   return this;
 }
-function Rt(e) {
+function Xt(e) {
   return this.eachAfter(function(t) {
-    for (var i = +e(t.data) || 0, n = t.children, o = n && n.length; --o >= 0; ) i += n[o].value;
+    for (var i = +e(t.data) || 0, n = t.children, s = n && n.length; --s >= 0; ) i += n[s].value;
     t.value = i;
   });
 }
-function Xt(e) {
+function jt(e) {
   return this.eachBefore(function(t) {
     t.children && t.children.sort(e);
   });
 }
-function jt(e) {
-  for (var t = this, i = _t(t, e), n = [t]; t !== i; )
+function _t(e) {
+  for (var t = this, i = Mt(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;
+  for (var s = n.length; e !== i; )
+    n.splice(s, 0, e), e = e.parent;
   return n;
 }
-function _t(e, t) {
+function Mt(e, t) {
   if (e === t) return e;
-  var i = e.ancestors(), n = t.ancestors(), o = null;
+  var i = e.ancestors(), n = t.ancestors(), s = null;
   for (e = i.pop(), t = n.pop(); e === t; )
-    o = e, e = i.pop(), t = n.pop();
-  return o;
+    s = e, e = i.pop(), t = n.pop();
+  return s;
 }
-function Mt() {
+function Ot() {
   for (var e = this, t = [e]; e = e.parent; )
     t.push(e);
   return t;
 }
-function Ot() {
+function At() {
   var e = [];
   return this.each(function(t) {
     e.push(t);
   }), e;
 }
-function At() {
+function Tt() {
   var e = [];
   return this.eachBefore(function(t) {
     t.children || e.push(t);
   }), e;
 }
-function Tt() {
+function Ht() {
   var e = this, t = [];
   return e.each(function(i) {
     i !== e && t.push({ source: i.parent, target: i });
   }), t;
 }
 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 (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 j(s[c])), l.parent = o, l.depth = o.depth + 1;
+  var i = new j(e), n = +e.value && (i.value = e.value), s, a = [i], l, o, c, h;
+  for (t == null && (t = Ft); s = a.pop(); )
+    if (n && (s.value = +s.data.value), (o = t(s.data)) && (h = o.length))
+      for (s.children = new Array(h), c = h - 1; c >= 0; --c)
+        a.push(l = s.children[c] = new j(o[c])), l.parent = s, l.depth = s.depth + 1;
   return i.eachBefore(Dt);
 }
-function Ht() {
+function Bt() {
   return H(this).eachBefore(Lt);
 }
-function Bt(e) {
+function Ft(e) {
   return e.children;
 }
 function Lt(e) {
@@ -184,64 +191,64 @@ function j(e) {
 }
 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
+  count: wt,
+  each: Ct,
+  eachAfter: Rt,
+  eachBefore: St,
+  sum: Xt,
+  sort: jt,
+  path: _t,
+  ancestors: Ot,
+  descendants: At,
+  leaves: Tt,
+  links: Ht,
+  copy: Bt
 };
-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,
+const $t = "d3-flextree", Nt = "2.1.2", Wt = "build/d3-flextree.js", It = "index", Pt = { name: "Chris Maloney", url: "http://chrismaloney.org" }, Kt = "Flexible tree layout algorithm that allows for variable node sizes.", Gt = ["d3", "d3-module", "layout", "tree", "hierarchy", "d3-hierarchy", "plugin", "d3-plugin", "infovis", "visualization", "2d"], Vt = "https://github.com/klortho/d3-flextree", Ut = "WTFPL", Yt = { type: "git", url: "https://github.com/klortho/d3-flextree.git" }, Zt = { 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" }, qt = { "d3-hierarchy": "^1.1.5" }, Jt = { "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" }, Qt = {
+  name: $t,
+  version: Nt,
+  main: Wt,
   module: It,
   "jsnext:main": "index",
   author: Pt,
-  description: Wt,
-  keywords: Kt,
-  homepage: Gt,
-  license: Vt,
-  repository: Ut,
-  scripts: Yt,
-  dependencies: Zt,
-  devDependencies: qt
-}, { version: Qt } = Jt, te = Object.freeze({
+  description: Kt,
+  keywords: Gt,
+  homepage: Vt,
+  license: Ut,
+  repository: Yt,
+  scripts: Zt,
+  dependencies: qt,
+  devDependencies: Jt
+}, { version: te } = Qt, ee = Object.freeze({
   children: (e) => e.children,
   nodeSize: (e) => e.data.size,
   spacing: 0
 });
-function Q(e) {
-  const t = Object.assign({}, te, e);
-  function i(s) {
-    const c = t[s];
+function tt(e) {
+  const t = Object.assign({}, ee, e);
+  function i(o) {
+    const c = t[o];
     return typeof c == "function" ? c : () => c;
   }
-  function n(s) {
-    const c = l(a(), s, (p) => p.children);
+  function n(o) {
+    const c = l(a(), o, (h) => h.children);
     return c.update(), c.data;
   }
-  function o() {
-    const s = i("nodeSize"), c = i("spacing");
-    return class J extends H.prototype.constructor {
-      constructor(h) {
-        super(h);
+  function s() {
+    const o = i("nodeSize"), c = i("spacing");
+    return class Q extends H.prototype.constructor {
+      constructor(d) {
+        super(d);
       }
       copy() {
-        const h = l(this.constructor, this, (u) => u.children);
-        return h.each((u) => u.data = u.data.data), h;
+        const d = l(this.constructor, this, (g) => g.children);
+        return d.each((g) => g.data = g.data.data), d;
       }
       get size() {
-        return s(this);
+        return o(this);
       }
-      spacing(h) {
-        return c(this, h);
+      spacing(d) {
+        return c(this, d);
       }
       get nodes() {
         return this.descendants();
@@ -265,8 +272,8 @@ function Q(e) {
         return this.x + this.xSize / 2;
       }
       get root() {
-        const h = this.ancestors();
-        return h[h.length - 1];
+        const d = this.ancestors();
+        return d[d.length - 1];
       }
       get numChildren() {
         return this.hasChildren ? this.children.length : 0;
@@ -285,7 +292,7 @@ function Q(e) {
       }
       get extents() {
         return (this.children || []).reduce(
-          (h, u) => J.maxExtents(h, u.extents),
+          (d, g) => Q.maxExtents(d, g.extents),
           this.nodeExtents
         );
       }
@@ -297,21 +304,21 @@ function Q(e) {
           right: this.right
         };
       }
-      static maxExtents(h, u) {
+      static maxExtents(d, g) {
         return {
-          top: Math.min(h.top, u.top),
-          bottom: Math.max(h.bottom, u.bottom),
-          left: Math.min(h.left, u.left),
-          right: Math.max(h.right, u.right)
+          top: Math.min(d.top, g.top),
+          bottom: Math.max(d.bottom, g.bottom),
+          left: Math.min(d.left, g.left),
+          right: Math.max(d.right, g.right)
         };
       }
     };
   }
   function a() {
-    const s = o(), c = i("nodeSize"), p = i("spacing");
-    return class extends s {
-      constructor(h) {
-        super(h), Object.assign(this, {
+    const o = s(), c = i("nodeSize"), h = i("spacing");
+    return class extends o {
+      constructor(d) {
+        super(d), Object.assign(this, {
           x: 0,
           y: 0,
           relX: 0,
@@ -329,117 +336,117 @@ function Q(e) {
       get size() {
         return c(this.data);
       }
-      spacing(h) {
-        return p(this.data, h.data);
+      spacing(d) {
+        return h(this.data, d.data);
       }
       get x() {
         return this.data.x;
       }
-      set x(h) {
-        this.data.x = h;
+      set x(d) {
+        this.data.x = d;
       }
       get y() {
         return this.data.y;
       }
-      set y(h) {
-        this.data.y = h;
+      set y(d) {
+        this.data.y = d;
       }
       update() {
-        return tt(this), et(this), this;
+        return et(this), rt(this), this;
       }
     };
   }
-  function l(s, c, p) {
-    const h = (u, g) => {
-      const m = new s(u);
+  function l(o, c, h) {
+    const d = (g, u) => {
+      const m = new o(g);
       Object.assign(m, {
-        parent: g,
-        depth: g === null ? 0 : g.depth + 1,
+        parent: u,
+        depth: u === null ? 0 : u.depth + 1,
         height: 0,
         length: 1
       });
-      const y = p(u) || [];
-      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
+      const x = h(g) || [];
+      return m.children = x.length === 0 ? null : x.map((y) => d(y, m)), m.children && Object.assign(m, m.children.reduce(
+        (y, v) => ({
+          height: Math.max(y.height, v.height + 1),
+          length: y.length + v.length
         }),
         m
       )), m;
     };
-    return h(c, null);
+    return d(c, null);
   }
   return Object.assign(n, {
-    nodeSize(s) {
-      return arguments.length ? (t.nodeSize = s, n) : t.nodeSize;
+    nodeSize(o) {
+      return arguments.length ? (t.nodeSize = o, n) : t.nodeSize;
     },
-    spacing(s) {
-      return arguments.length ? (t.spacing = s, n) : t.spacing;
+    spacing(o) {
+      return arguments.length ? (t.spacing = o, n) : t.spacing;
     },
-    children(s) {
-      return arguments.length ? (t.children = s, n) : t.children;
+    children(o) {
+      return arguments.length ? (t.children = o, n) : t.children;
     },
-    hierarchy(s, c) {
-      const p = typeof c > "u" ? t.children : c;
-      return l(o(), s, p);
+    hierarchy(o, c) {
+      const h = typeof c > "u" ? t.children : c;
+      return l(s(), o, h);
     },
-    dump(s) {
-      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}},`;
+    dump(o) {
+      const c = i("nodeSize"), h = (d) => (g) => {
+        const u = d + "  ", m = d + "    ", { x, y } = g, v = c(g), b = g.children || [], z = b.length === 0 ? " " : `,${u}children: [${m}${b.map(h(m)).join(m)}${u}],${d}`;
+        return `{ size: [${v.join(", ")}],${u}x: ${x}, y: ${y}${z}},`;
       };
-      return p(`
-`)(s);
+      return h(`
+`)(o);
     }
   }), n;
 }
-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]), ee(e), ce(e), e), et = (e, t, i) => {
+tt.version = te;
+const et = (e, t = 0) => (e.y = t, (e.children || []).reduce((i, n) => {
+  const [s, a] = i;
+  et(n, e.y + e.ySize);
+  const l = (s === 0 ? n.lExt : n.rExt).bottom;
+  s !== 0 && ne(e, s, a);
+  const o = de(l, s, a);
+  return [s + 1, o];
+}, [0, null]), re(e), he(e), e), rt = (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) => {
+  return e.relX = n + e.prelim - i, e.prelim = 0, e.x = i + e.relX, (e.children || []).forEach((s) => rt(s, n, e.x)), e;
+}, re = (e) => {
   (e.children || []).reduce((t, i) => {
-    const [n, o] = t, a = n + i.shift, l = o + a + i.change;
+    const [n, s] = t, a = n + i.shift, l = s + a + i.change;
     return i.relX += l, [a, l];
   }, [0, 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; ) {
+}, ne = (e, t, i) => {
+  const n = e.children[t - 1], s = e.children[t];
+  let a = n, l = n.relX, o = s, c = s.relX, h = !0;
+  for (; a && o; ) {
     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, 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));
+    const d = l + a.prelim - (c + o.prelim) + a.xSize / 2 + o.xSize / 2 + a.spacing(o);
+    (d > 0 || d < 0 && h) && (c += d, ie(s, d), se(e, t, i.index, d)), h = !1;
+    const g = a.bottom, u = o.bottom;
+    g <= u && (a = ae(a), a && (l += a.relX)), g >= u && (o = oe(o), o && (c += o.relX));
   }
-  !a && s ? ae(e, t, s, c) : a && !s && le(e, t, a, l);
-}, ne = (e, t) => {
+  !a && o ? le(e, t, o, c) : a && !o && ce(e, t, a, l);
+}, ie = (e, t) => {
   e.relX += t, e.lExtRelX += t, e.rExtRelX += t;
-}, ie = (e, t, i, n) => {
-  const o = e.children[t], a = t - i;
+}, se = (e, t, i, n) => {
+  const s = e.children[t], a = t - i;
   if (a > 1) {
     const l = n / a;
-    e.children[i + 1].shift += l, o.shift -= l, o.change -= n - l;
+    e.children[i + 1].shift += l, s.shift -= l, s.change -= n - l;
   }
-}, 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];
+}, oe = (e) => e.hasChildren ? e.firstChild : e.lThr, ae = (e) => e.hasChildren ? e.lastChild : e.rThr, le = (e, t, i, n) => {
+  const s = e.firstChild, a = s.lExt, l = e.children[t];
   a.lThr = i;
-  const s = n - i.relX - o.lExtRelX;
-  a.relX += s, a.prelim -= s, o.lExt = l.lExt, o.lExtRelX = l.lExtRelX;
-}, le = (e, t, i, n) => {
-  const o = e.children[t], a = o.rExt, l = e.children[t - 1];
+  const o = n - i.relX - s.lExtRelX;
+  a.relX += o, a.prelim -= o, s.lExt = l.lExt, s.lExtRelX = l.lExtRelX;
+}, ce = (e, t, i, n) => {
+  const s = e.children[t], a = s.rExt, l = e.children[t - 1];
   a.rThr = i;
-  const s = n - i.relX - o.rExtRelX;
-  a.relX += s, a.prelim -= s, o.rExt = l.rExt, o.rExtRelX = l.rExtRelX;
-}, ce = (e) => {
+  const o = n - i.relX - s.rExtRelX;
+  a.relX += o, a.prelim -= o, s.rExt = l.rExt, s.rExtRelX = l.rExtRelX;
+}, he = (e) => {
   if (e.hasChildren) {
     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, {
@@ -450,7 +457,7 @@ const tt = (e, t = 0) => (e.y = t, (e.children || []).reduce((i, n) => {
       rExtRelX: i.rExtRelX
     });
   }
-}, he = (e, t, i) => {
+}, de = (e, t, i) => {
   for (; i !== null && e >= i.lowY; )
     i = i.next;
   return {
@@ -458,38 +465,35 @@ const tt = (e, t = 0) => (e.y = t, (e.children || []).reduce((i, n) => {
     index: t,
     next: i
   };
-}, 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);
-}
+}, nt = ".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}", ve = nt, O = "g.markmap-node", pe = "path.markmap-link", ge = "g.markmap-highlight", A = ft();
 function U(e, t) {
-  const i = kt(e, t);
+  const i = vt(e, t);
   return e[i];
 }
 function T(e) {
   e.stopPropagation();
 }
-const ue = new ht();
-class nt {
+const ue = new dt();
+class it {
   constructor(t, i) {
-    this.options = q, this._disposeList = [], this.handleZoom = (n) => {
-      const { transform: o } = n;
-      this.g.attr("transform", o);
+    this.options = { ...J }, this._disposeList = [], this.handleZoom = (n) => {
+      const { transform: s } = n;
+      this.g.attr("transform", s);
     }, this.handlePan = (n) => {
       n.preventDefault();
-      const o = z(this.svg.node()), a = o.translate(
-        -n.deltaX / o.k,
-        -n.deltaY / o.k
+      const s = w(this.svg.node()), a = s.translate(
+        -n.deltaX / s.k,
+        -n.deltaY / s.k
       );
       this.svg.call(this.zoom.transform, a);
-    }, this.handleClick = (n, o) => {
+    }, this.handleClick = (n, s) => {
       let a = this.options.toggleRecursively;
-      (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(),
+      (Z ? n.metaKey : n.ctrlKey) && (a = !a), this.toggleNode(s, a);
+    }, this.ensureView = this.ensureVisible, this.svg = t.datum ? t : xt(t), this.styleNode = this.svg.append("style"), this.zoom = yt().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") || pt(),
       rect: { x1: 0, y1: 0, x2: 0, y2: 0 }
     }, this.g = this.svg.append("g"), this.g.append("g").attr("class", "markmap-highlight"), this._observer = new ResizeObserver(
-      pt(() => {
+      gt(() => {
         this.renderData();
       }, 100)
     ), this._disposeList.push(
@@ -501,7 +505,7 @@ class nt {
   }
   getStyleContent() {
     const { style: t } = this.options, { id: i } = this.state, n = typeof t == "function" ? t(i) : "";
-    return [this.options.embedGlobalCSS && rt, n].filter(Boolean).join(`
+    return [this.options.embedGlobalCSS && nt, n].filter(Boolean).join(`
 `);
   }
   updateStyle() {
@@ -513,13 +517,13 @@ class nt {
     this.styleNode.text(t);
   }
   async toggleNode(t, i = !1) {
-    var o, a;
-    const n = (o = t.payload) != null && o.fold ? 0 : 1;
-    i ? R(t, (l, s) => {
+    var s, a;
+    const n = (s = t.payload) != null && s.fold ? 0 : 1;
+    i ? R(t, (l, o) => {
       l.payload = {
         ...l.payload,
         fold: n
-      }, s();
+      }, o();
     }) : t.payload = {
       ...t.payload,
       fold: (a = t.payload) != null && a.fold ? 0 : 1
@@ -527,12 +531,12 @@ class nt {
   }
   _initializeData(t) {
     let i = 0;
-    const { color: n, initialExpandLevel: o } = this.options;
+    const { color: n, initialExpandLevel: s } = this.options;
     let a = 0, l = 0;
-    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,
+    return R(t, (o, c, h) => {
+      var g, u, m, x;
+      l += 1, o.children = (g = o.children) == null ? void 0 : g.map((y) => ({ ...y })), i += 1, o.state = {
+        ...o.state,
         depth: l,
         id: i,
         rect: {
@@ -542,47 +546,47 @@ class nt {
           height: 0
         },
         size: [0, 0]
-      }, 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;
+      }, o.state.key = [(u = h == null ? void 0 : h.state) == null ? void 0 : u.id, o.state.id].filter(Boolean).join(".") + Et(o.content), o.state.path = [(m = h == null ? void 0 : h.state) == null ? void 0 : m.path, o.state.id].filter(Boolean).join("."), n(o);
+      const d = ((x = o.payload) == null ? void 0 : x.fold) === 2;
+      d ? a += 1 : (a || s >= 0 && o.state.depth >= s) && (o.payload = { ...o.payload, fold: 1 }), c(), d && (a -= 1), l -= 1;
     }), t;
   }
   _relayout() {
     if (!this.state.data) return;
     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;
+    ).each(function(o) {
+      var d;
+      const c = (d = this.firstChild) == null ? void 0 : d.firstChild, h = [c.scrollWidth, c.scrollHeight];
+      o.state.size = h;
     });
-    const { spacingHorizontal: t, paddingX: i, spacingVertical: n } = this.options, o = Q({}).children((s) => {
+    const { spacingHorizontal: t, paddingX: i, spacingVertical: n } = this.options, s = tt({}).children((o) => {
       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 ? i * 2 : 0) + t];
-    }).spacing((s, c) => s.parent === c.parent ? n : n * 2), a = o.hierarchy(this.state.data);
-    o(a);
+      if (!((c = o.payload) != null && c.fold)) return o.children;
+    }).nodeSize((o) => {
+      const [c, h] = o.data.state.size;
+      return [h, c + (c ? i * 2 : 0) + t];
+    }).spacing((o, c) => o.parent === c.parent ? n : n * 2), a = s.hierarchy(this.state.data);
+    s(a);
     const l = a.descendants();
-    l.forEach((s) => {
-      const c = s.data;
+    l.forEach((o) => {
+      const c = o.data;
       c.state.rect = {
-        x: s.y,
-        y: s.x - s.xSize / 2,
-        width: s.ySize - t,
-        height: s.xSize
+        x: o.y,
+        y: o.x - o.xSize / 2,
+        width: o.ySize - t,
+        height: o.xSize
       };
     }), this.state.rect = {
-      x1: K(l, (s) => s.data.state.rect.x) || 0,
-      y1: K(l, (s) => s.data.state.rect.y) || 0,
-      x2: G(
+      x1: G(l, (o) => o.data.state.rect.x) || 0,
+      y1: G(l, (o) => o.data.state.rect.y) || 0,
+      x2: V(
         l,
-        (s) => s.data.state.rect.x + s.data.state.rect.width
+        (o) => o.data.state.rect.x + o.data.state.rect.width
       ) || 0,
-      y2: G(
+      y2: V(
         l,
-        (s) => s.data.state.rect.y + s.data.state.rect.height
+        (o) => o.data.state.rect.y + o.data.state.rect.height
       ) || 0
     };
   }
@@ -599,118 +603,118 @@ class nt {
     this.state.highlight = t || void 0, await this.renderData();
   }
   _getHighlightRect(t) {
-    const i = this.svg.node(), o = 4 / z(i).k, a = {
+    const i = this.svg.node(), s = 4 / w(i).k, a = {
       ...t.state.rect
     };
-    return a.x -= o, a.y -= o, a.width += 2 * o, a.height += 2 * o, a;
+    return a.x -= s, a.y -= s, a.width += 2 * s, a.height += 2 * s, a;
   }
   async renderData(t) {
-    const { paddingX: i, autoFit: n, color: o, maxWidth: a } = this.options, l = this.state.data;
-    if (!l) return;
-    const s = {}, c = {}, p = [];
-    R(l, (r, d, x) => {
+    const { paddingX: i, autoFit: n, color: s, maxWidth: a, linkWidth: l } = this.options, o = this.state.data;
+    if (!o) return;
+    const c = {}, h = {}, d = [];
+    R(o, (r, p, f) => {
       var E;
-      (E = r.payload) != null && E.fold || d(), s[r.state.id] = r, x && (c[r.state.id] = x.state.id), p.push(r);
+      (E = r.payload) != null && E.fold || p(), c[r.state.id] = r, f && (h[r.state.id] = f.state.id), d.push(r);
     });
-    const h = {}, u = {}, g = (r) => {
-      !r || h[r.state.id] || R(r, (d, x) => {
-        h[d.state.id] = r.state.id, x();
+    const g = {}, u = {}, m = (r) => {
+      !r || g[r.state.id] || R(r, (p, f) => {
+        g[p.state.id] = r.state.id, f();
       });
-    }, 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) => {
+    }, x = (r) => u[g[r.state.id]] || o.state.rect, y = (r) => (c[g[r.state.id]] || o).state.rect;
+    u[o.state.id] = o.state.rect, t && m(t);
+    const { highlight: v } = this.state;
+    let b = this.g.selectAll(k(ge)).selectAll(k("rect")).data(v ? [this._getHighlightRect(v)] : []).join("rect").attr("x", (r) => r.x).attr("y", (r) => r.y).attr("width", (r) => r.width).attr("height", (r) => r.height);
+    const z = 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(
+    }).data(d, (r) => r.state.key), B = z.enter().append("g").attr("data-depth", (r) => r.state.depth).attr("data-path", (r) => r.state.path).each((r) => {
+      m(c[h[r.state.id]]);
+    }), C = z.exit().each((r) => {
+      m(c[h[r.state.id]]);
+    }), S = z.merge(B).attr(
       "class",
       (r) => {
-        var d;
-        return ["markmap-node", ((d = r.payload) == null ? void 0 : d.fold) && "markmap-fold"].filter(Boolean).join(" ");
+        var p;
+        return ["markmap-node", ((p = r.payload) == null ? void 0 : p.fold) && "markmap-fold"].filter(Boolean).join(" ");
       }
-    ), B = S.selectAll(k("line")).data(
+    ), F = 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(
+    ), L = F.enter().append("line").attr("stroke", (r) => s(r)).attr("stroke-width", 0), D = F.merge(L), $ = S.selectAll(k("circle")).data(
       (r) => {
-        var d;
-        return (d = r.children) != null && d.length ? [r] : [];
+        var p;
+        return (p = r.children) != null && p.length ? [r] : [];
       },
       (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(
+    ), N = $.enter().append("circle").attr("stroke-width", 0).attr("r", 0).on("click", (r, p) => this.handleClick(r, p)).on("mousedown", T).merge($).attr("stroke", (r) => s(r)).attr(
       "fill",
       (r) => {
-        var d;
-        return (d = r.payload) != null && d.fold && r.children ? o(r) : "var(--markmap-circle-open-bg)";
+        var p;
+        return (p = r.payload) != null && p.fold && r.children ? s(r) : "var(--markmap-circle-open-bg)";
       }
-    ), N = this._observer, I = S.selectAll(k("foreignObject")).data(
+    ), W = 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 r = (d = this.firstChild) == null ? void 0 : d.firstChild;
-      N.observe(r);
+      var p;
+      const r = (p = this.firstChild) == null ? void 0 : p.firstChild;
+      W.observe(r);
     });
     const P = C.selectAll(
       k("foreignObject")
     );
     P.each(function() {
-      var d;
-      const r = (d = this.firstChild) == null ? void 0 : d.firstChild;
-      N.unobserve(r);
+      var p;
+      const r = (p = this.firstChild) == null ? void 0 : p.firstChild;
+      W.unobserve(r);
     });
-    const W = _.merge(I), it = p.flatMap(
+    const K = _.merge(I), st = d.flatMap(
       (r) => {
-        var d;
-        return (d = r.payload) != null && d.fold ? [] : r.children.map((x) => ({ source: r, target: x }));
+        var p;
+        return (p = r.payload) != null && p.fold ? [] : r.children.map((f) => ({ source: r, 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
+    ), M = this.g.selectAll(k(pe)).data(st, (r) => r.target.state.key), ot = M.exit(), at = 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 p = x(r.target), f = [
+        p.x + p.width,
+        p.y + p.height
       ];
-      return A({ source: x, target: x });
+      return A({ source: f, target: f });
     }).attr("stroke-width", 0).merge(M);
     this.svg.style(
       "--markmap-max-width",
       a ? `${a}px` : null
-    ), 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})`;
+    ), await new Promise(requestAnimationFrame), this._relayout(), b = b.data(v ? [this._getHighlightRect(v)] : []).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), B.attr("transform", (r) => {
+      const p = x(r);
+      return `translate(${p.x + p.width - r.state.rect.width},${p.y + p.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})`;
+      const p = y(r), f = p.x + p.width - r.state.rect.width, E = p.y + p.height - r.state.rect.height;
+      return `translate(${f},${E})`;
     }).remove(), this.transition(S).attr(
       "transform",
       (r) => `translate(${r.state.rect.x},${r.state.rect.y})`
     );
-    const at = C.selectAll(
+    const lt = C.selectAll(
       k("line")
     );
-    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(
+    this.transition(lt).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) => s(r)).attr("stroke-width", l);
+    const ct = C.selectAll(
       k("circle")
     );
-    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
+    this.transition(ct).attr("r", 0).attr("stroke-width", 0), N.attr("cx", (r) => r.state.rect.width).attr("cy", (r) => r.state.rect.height), this.transition(N).attr("r", 6).attr("stroke-width", "1.5"), this.transition(P).style("opacity", 0), K.attr("width", (r) => Math.max(0, r.state.rect.width - i * 2)).attr("height", (r) => r.state.rect.height), this.transition(K).style("opacity", 1), this.transition(ot).attr("d", (r) => {
+      const p = y(r.target), f = [
+        p.x + p.width,
+        p.y + p.height
       ];
-      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
-      ], ct = [
-        x.state.rect.x,
-        x.state.rect.y + x.state.rect.height
+      return A({ source: f, target: f });
+    }).attr("stroke-width", 0).remove(), this.transition(at).attr("stroke", (r) => s(r.target)).attr("stroke-width", (r) => l(r.target)).attr("d", (r) => {
+      const p = r.source, f = r.target, E = [
+        p.state.rect.x + p.state.rect.width,
+        p.state.rect.y + p.state.rect.height
+      ], ht = [
+        f.state.rect.x,
+        f.state.rect.y + f.state.rect.height
       ];
-      return A({ source: E, target: ct });
+      return A({ source: E, target: ht });
     }), n && this.fit();
   }
   transition(t) {
@@ -721,21 +725,21 @@ class nt {
    * Fit the content to the viewport.
    */
   async fit(t = this.options.maxInitialScale) {
-    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,
+    const i = this.svg.node(), { width: n, height: s } = i.getBoundingClientRect(), { fitRatio: a } = this.options, { x1: l, y1: o, x2: c, y2: h } = this.state.rect, d = c - l, g = h - o, u = Math.min(
+      n / d * a,
+      s / g * a,
       t
-    ), m = yt.translate(
-      (n - h * g) / 2 - l * g,
-      (o - u * g) / 2 - s * g
-    ).scale(g);
+    ), m = kt.translate(
+      (n - d * u) / 2 - l * u,
+      (s - g * u) / 2 - o * u
+    ).scale(u);
     return this.transition(this.svg).call(this.zoom.transform, m).end().catch(X);
   }
   findElement(t) {
     let i;
-    return this.g.selectAll(k(O)).each(function(o) {
-      o === t && (i = {
-        data: o,
+    return this.g.selectAll(k(O)).each(function(s) {
+      s === t && (i = {
+        data: s,
         g: this
       });
     }), i;
@@ -744,50 +748,50 @@ class nt {
    * Pan the content to make the provided node visible in the viewport.
    */
   async ensureVisible(t, i) {
-    var b;
-    const n = (b = this.findElement(t)) == null ? void 0 : b.data;
+    var v;
+    const n = (v = this.findElement(t)) == null ? void 0 : v.data;
     if (!n) return;
-    const o = this.svg.node(), a = o.getBoundingClientRect(), l = z(o), [s, c] = [
+    const s = this.svg.node(), a = s.getBoundingClientRect(), l = w(s), [o, c] = [
       n.state.rect.x,
       n.state.rect.x + n.state.rect.width + 2
-    ].map((v) => v * l.k + l.x), [p, h] = [
+    ].map((b) => b * l.k + l.x), [h, d] = [
       n.state.rect.y,
       n.state.rect.y + n.state.rect.height
-    ].map((v) => v * l.k + l.y), u = {
+    ].map((b) => b * l.k + l.y), g = {
       left: 0,
       right: 0,
       top: 0,
       bottom: 0,
       ...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);
+    }, u = [g.left - o, a.width - g.right - c], m = [g.top - h, a.height - g.bottom - d], x = u[0] * u[1] > 0 ? U(u, Math.abs) / l.k : 0, y = m[0] * m[1] > 0 ? U(m, Math.abs) / l.k : 0;
+    if (x || y) {
+      const b = l.translate(x, y);
+      return this.transition(this.svg).call(this.zoom.transform, b).end().catch(X);
     }
   }
   async centerNode(t, i) {
-    var y;
-    const n = (y = this.findElement(t)) == null ? void 0 : y.data;
+    var x;
+    const n = (x = this.findElement(t)) == null ? void 0 : x.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 = {
+    const s = this.svg.node(), a = s.getBoundingClientRect(), l = w(s), o = (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, h = {
       left: 0,
       right: 0,
       top: 0,
       bottom: 0,
       ...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);
+    }, d = (h.left + a.width - h.right) / 2, g = (h.top + a.height - h.bottom) / 2, u = (d - o) / l.k, m = (g - c) / l.k;
+    if (u || m) {
+      const y = l.translate(u, m);
+      return this.transition(this.svg).call(this.zoom.transform, y).end().catch(X);
     }
   }
   /**
    * Scale content with it pinned at the center of the viewport.
    */
   async rescale(t) {
-    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
+    const i = this.svg.node(), { width: n, height: s } = i.getBoundingClientRect(), a = n / 2, l = s / 2, o = w(i), c = o.translate(
+      (a - o.x) * (1 - t) / o.k,
+      (l - o.y) * (1 - t) / o.k
     ).scale(t);
     return this.transition(this.svg).call(this.zoom.transform, c).end().catch(X);
   }
@@ -797,22 +801,23 @@ class nt {
     });
   }
   static create(t, i, n = null) {
-    const o = new nt(t, i);
-    return n && o.setData(n).then(() => {
-      o.fit();
-    }), o;
+    const s = new it(t, i);
+    return n && s.setData(n).then(() => {
+      s.fit();
+    }), s;
   }
 }
 export {
-  nt as Markmap,
+  it as Markmap,
   k as childSelector,
-  vt as defaultColorFn,
-  q as defaultOptions,
-  ye as deriveOptions,
-  ke as globalCSS,
+  bt as defaultColorFn,
+  J as defaultOptions,
+  ke as deriveOptions,
+  ve as globalCSS,
   Z as isMacintosh,
-  Ee as loadCSS,
-  ze as loadJS,
+  q as linkWidthFactory,
+  ze as loadCSS,
+  we as loadJS,
   ue as refreshHook,
-  bt as simpleHash
+  Et as simpleHash
 };

package/dist/types.d.ts

@@ -26,6 +26,7 @@ export interface IMarkmapJSONOptions {
     spacingHorizontal: number;
     spacingVertical: number;
     zoom: boolean;
+    linkWidth: number | number[];
 }
 export interface IPadding {
     left: number;

package/dist/view.d.ts

@@ -7,7 +7,27 @@ export declare const globalCSS: string;
  */
 export declare const refreshHook: Hook<[]>;
 export declare class Markmap {
-    options: IMarkmapOptions;
+    options: {
+        autoFit: boolean;
+        duration: number;
+        embedGlobalCSS: boolean;
+        fitRatio: number;
+        id?: string;
+        initialExpandLevel: number;
+        maxInitialScale: number;
+        pan: boolean;
+        scrollForPan: boolean;
+        style?: (id: string) => string;
+        toggleRecursively: boolean;
+        zoom: boolean;
+        color: (node: INode) => string;
+        linkWidth: (node: INode) => number;
+        maxWidth: number;
+        nodeMinHeight: number;
+        paddingX: number;
+        spacingHorizontal: number;
+        spacingVertical: number;
+    };
     state: IMarkmapState;
     svg: ID3SVGElement;
     styleNode: d3.Selection<HTMLStyleElement, INode, HTMLElement, INode>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "markmap-view",
-  "version": "0.18.5",
+  "version": "0.18.8-alpha.2+55f0247",
   "description": "View markmaps in browser",
   "author": "Gerald <gera2ld@live.com>",
   "license": "MIT",
@@ -19,7 +19,7 @@
     "url": "git+https://github.com/markmap/markmap.git"
   },
   "scripts": {
-    "clean": "del-cli dist",
+    "clean": "del-cli dist tsconfig.tsbuildinfo",
     "build:types": "tsc",
     "build:js": "vite build && TARGET=es vite build",
     "build": "pnpm clean && pnpm /^build:/",
@@ -39,17 +39,17 @@
   "typings": "dist/index.d.ts",
   "dependencies": {
     "@babel/runtime": "^7.22.6",
-    "@gera2ld/jsx-dom": "^2.2.2",
-    "@types/d3": "^7.4.0",
-    "d3": "^7.8.5",
-    "d3-flextree": "^2.1.2"
+    "d3": "^7.8.5"
   },
   "devDependencies": {
+    "@gera2ld/jsx-dom": "^2.2.2",
+    "@types/d3": "^7.4.0",
     "@types/d3-flextree": "^2.1.1",
-    "markmap-common": "0.18.5"
+    "d3-flextree": "^2.1.2",
+    "markmap-common": "0.18.8-alpha.2+55f0247"
   },
   "peerDependencies": {
     "markmap-common": "*"
   },
-  "gitHead": "600776ac5b28110ab6f298d252263c740738660e"
+  "gitHead": "55f02470e5d5edc3e4ed75c5436b58a771910308"
 }