markmap-view 0.18.8-alpha.2 → 0.18.8

package/dist/browser/index.js

@@ -327,7 +327,7 @@
   }
   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 lineWidthFactory = (baseWidth = 1, deltaWidth = 3, k = 2) => (node) => baseWidth + deltaWidth / k ** node.state.depth;
   const defaultOptions = {
     autoFit: false,
     duration: 500,
@@ -343,7 +343,7 @@
       var _a;
       return defaultColorFn(`${((_a = node.state) == null ? void 0 : _a.path) || ""}`);
     },
-    linkWidth: linkWidthFactory(),
+    lineWidth: lineWidthFactory(),
     maxWidth: 0,
     nodeMinHeight: 16,
     paddingX: 8,
@@ -353,7 +353,7 @@
   function deriveOptions(jsonOptions) {
     const derivedOptions = {};
     const options = { ...jsonOptions };
-    const { color, colorFreezeLevel, linkWidth } = options;
+    const { color, colorFreezeLevel, lineWidth } = options;
     if ((color == null ? void 0 : color.length) === 1) {
       const solidColor = color[0];
       derivedOptions.color = () => solidColor;
@@ -374,9 +374,9 @@
         return color2(node);
       };
     }
-    if (linkWidth) {
-      const args = Array.isArray(linkWidth) ? linkWidth : [linkWidth];
-      derivedOptions.linkWidth = linkWidthFactory(
+    if (lineWidth) {
+      const args = Array.isArray(lineWidth) ? lineWidth : [lineWidth, 0, 1];
+      derivedOptions.lineWidth = lineWidthFactory(
         ...args
       );
     }
@@ -1094,7 +1094,7 @@
         const newSize = [el.scrollWidth, el.scrollHeight];
         d.state.size = newSize;
       });
-      const { spacingHorizontal, paddingX, spacingVertical } = this.options;
+      const { lineWidth, paddingX, spacingHorizontal, spacingVertical } = this.options;
       const layout = flextree({}).children((d) => {
         var _a;
         if (!((_a = d.payload) == null ? void 0 : _a.fold)) return d.children;
@@ -1102,7 +1102,7 @@
         const [width, height] = node.data.state.size;
         return [height, width + (width ? paddingX * 2 : 0) + spacingHorizontal];
       }).spacing((a, b) => {
-        return a.parent === b.parent ? spacingVertical : spacingVertical * 2;
+        return (a.parent === b.parent ? spacingVertical : spacingVertical * 2) + lineWidth(a.data);
       });
       const tree = layout.hierarchy(this.state.data);
       layout(tree);
@@ -1170,7 +1170,7 @@
       return rect;
     }
     async renderData(originData) {
-      const { paddingX, autoFit, color, maxWidth, linkWidth } = this.options;
+      const { paddingX, autoFit, color, maxWidth, lineWidth } = this.options;
       const rootNode = this.state.data;
       if (!rootNode) return;
       const nodeMap = {};
@@ -1303,13 +1303,13 @@
       );
       this.transition(mmLineExit).attr("x1", (d) => d.state.rect.width).attr("stroke-width", 0);
       mmLineEnter.attr("x1", (d) => d.state.rect.width).attr("x2", (d) => d.state.rect.width);
-      mmLineMerge.attr("y1", (d) => d.state.rect.height).attr("y2", (d) => d.state.rect.height);
-      this.transition(mmLineMerge).attr("x1", -1).attr("x2", (d) => d.state.rect.width + 2).attr("stroke", (d) => color(d)).attr("stroke-width", linkWidth);
+      mmLineMerge.attr("y1", (d) => d.state.rect.height + lineWidth(d) / 2).attr("y2", (d) => d.state.rect.height + lineWidth(d) / 2);
+      this.transition(mmLineMerge).attr("x1", -1).attr("x2", (d) => d.state.rect.width + 2).attr("stroke", (d) => color(d)).attr("stroke-width", lineWidth);
       const mmCircleExit = mmGExit.selectAll(
         childSelector("circle")
       );
       this.transition(mmCircleExit).attr("r", 0).attr("stroke-width", 0);
-      mmCircleMerge.attr("cx", (d) => d.state.rect.width).attr("cy", (d) => d.state.rect.height);
+      mmCircleMerge.attr("cx", (d) => d.state.rect.width).attr("cy", (d) => d.state.rect.height + lineWidth(d) / 2);
       this.transition(mmCircleMerge).attr("r", 6).attr("stroke-width", "1.5");
       this.transition(mmFoExit).style("opacity", 0);
       mmFoMerge.attr("width", (d) => Math.max(0, d.state.rect.width - paddingX * 2)).attr("height", (d) => d.state.rect.height);
@@ -1318,20 +1318,20 @@
         const targetRect = getOriginTargetRect(d.target);
         const pathTarget = [
           targetRect.x + targetRect.width,
-          targetRect.y + targetRect.height
+          targetRect.y + targetRect.height + lineWidth(d.target) / 2
         ];
         return linkShape({ source: pathTarget, target: pathTarget });
       }).attr("stroke-width", 0).remove();
-      this.transition(mmPathMerge).attr("stroke", (d) => color(d.target)).attr("stroke-width", (d) => linkWidth(d.target)).attr("d", (d) => {
+      this.transition(mmPathMerge).attr("stroke", (d) => color(d.target)).attr("stroke-width", (d) => lineWidth(d.target)).attr("d", (d) => {
         const origSource = d.source;
         const origTarget = d.target;
         const source = [
           origSource.state.rect.x + origSource.state.rect.width,
-          origSource.state.rect.y + origSource.state.rect.height
+          origSource.state.rect.y + origSource.state.rect.height + lineWidth(origSource) / 2
         ];
         const target = [
           origTarget.state.rect.x,
-          origTarget.state.rect.y + origTarget.state.rect.height
+          origTarget.state.rect.y + origTarget.state.rect.height + lineWidth(origTarget) / 2
         ];
         return linkShape({ source, target });
       });
@@ -1472,7 +1472,7 @@
   exports.deriveOptions = deriveOptions;
   exports.globalCSS = globalCSS;
   exports.isMacintosh = isMacintosh;
-  exports.linkWidthFactory = linkWidthFactory;
+  exports.lineWidthFactory = lineWidthFactory;
   exports.loadCSS = loadCSS;
   exports.loadJS = loadJS;
   exports.refreshHook = refreshHook;

package/dist/constants.d.ts

@@ -1,5 +1,5 @@
 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 lineWidthFactory: (baseWidth?: number, deltaWidth?: number, k?: number) => (node: INode) => number;
 export declare const defaultOptions: IMarkmapOptions;

package/dist/index.js

@@ -1,7 +1,7 @@
 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 = {
+const Z = typeof navigator < "u" && navigator.userAgent.includes("Macintosh"), bt = Y(mt), q = (e = 1, t = 3, i = 2) => (n) => e + t / i ** n.state.depth, J = {
   autoFit: !1,
   duration: 500,
   embedGlobalCSS: !0,
@@ -16,7 +16,7 @@ const Z = typeof navigator < "u" && navigator.userAgent.includes("Macintosh"), b
     var t;
     return bt(`${((t = e.state) == null ? void 0 : t.path) || ""}`);
   },
-  linkWidth: q(),
+  lineWidth: q(),
   maxWidth: 0,
   nodeMinHeight: 16,
   paddingX: 8,
@@ -24,28 +24,28 @@ const Z = typeof navigator < "u" && navigator.userAgent.includes("Macintosh"), b
   spacingVertical: 5
 };
 function ke(e) {
-  const t = {}, i = { ...e }, { color: n, colorFreezeLevel: s, linkWidth: a } = i;
+  const t = {}, i = { ...e }, { color: n, colorFreezeLevel: s, lineWidth: a } = i;
   if ((n == null ? void 0 : n.length) === 1) {
-    const c = n[0];
-    t.color = () => c;
+    const l = n[0];
+    t.color = () => l;
   } else if (n != null && n.length) {
-    const c = Y(n);
-    t.color = (h) => c(`${h.state.path}`);
+    const l = Y(n);
+    t.color = (h) => l(`${h.state.path}`);
   }
   if (s) {
-    const c = t.color || J.color;
+    const l = t.color || J.color;
     t.color = (h) => (h = {
       ...h,
       state: {
         ...h.state,
         path: h.state.path.split(".").slice(0, s).join(".")
       }
-    }, c(h));
+    }, l(h));
   }
   if (a) {
-    const c = Array.isArray(a) ? a : [a];
-    t.linkWidth = q(
-      ...c
+    const l = Array.isArray(a) ? a : [a, 0, 1];
+    t.lineWidth = q(
+      ...l
     );
   }
   return [
@@ -58,12 +58,12 @@ function ke(e) {
     "paddingX",
     "spacingHorizontal",
     "spacingVertical"
-  ].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);
+  ].forEach((l) => {
+    const h = i[l];
+    typeof h == "number" && (t[l] = h);
+  }), ["zoom", "pan"].forEach((l) => {
+    const h = i[l];
+    h != null && (t[l] = !!h);
   }), t;
 }
 function Et(e) {
@@ -93,10 +93,10 @@ function wt() {
   return this.eachAfter(zt);
 }
 function Ct(e) {
-  var t = this, i, n = [t], s, a, l;
+  var t = this, i, n = [t], s, a, c;
   do
     for (i = n.reverse(), n = []; t = i.pop(); )
-      if (e(t), s = t.children, s) for (a = 0, l = s.length; a < l; ++a)
+      if (e(t), s = t.children, s) for (a = 0, c = s.length; a < c; ++a)
         n.push(s[a]);
   while (n.length);
   return this;
@@ -108,8 +108,8 @@ function St(e) {
   return this;
 }
 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)
+  for (var t = this, i = [t], n = [], s, a, c; t = i.pop(); )
+    if (n.push(t), s = t.children, s) for (a = 0, c = s.length; a < c; ++a)
       i.push(s[a]);
   for (; t = n.pop(); )
     e(t);
@@ -127,20 +127,20 @@ function jt(e) {
   });
 }
 function _t(e) {
-  for (var t = this, i = Mt(t, e), n = [t]; t !== i; )
+  for (var t = this, i = Ot(t, e), n = [t]; t !== i; )
     t = t.parent, n.push(t);
   for (var s = n.length; e !== i; )
     n.splice(s, 0, e), e = e.parent;
   return n;
 }
-function Mt(e, t) {
+function Ot(e, t) {
   if (e === t) return e;
   var i = e.ancestors(), n = t.ancestors(), s = null;
   for (e = i.pop(), t = n.pop(); e === t; )
     s = e, e = i.pop(), t = n.pop();
   return s;
 }
-function Ot() {
+function Mt() {
   for (var e = this, t = [e]; e = e.parent; )
     t.push(e);
   return t;
@@ -164,11 +164,11 @@ function Ht() {
   }), t;
 }
 function H(e, t) {
-  var i = new j(e), n = +e.value && (i.value = e.value), s, a = [i], l, o, c, h;
+  var i = new j(e), n = +e.value && (i.value = e.value), s, a = [i], c, o, l, 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;
+      for (s.children = new Array(h), l = h - 1; l >= 0; --l)
+        a.push(c = s.children[l] = new j(o[l])), c.parent = s, c.depth = s.depth + 1;
   return i.eachBefore(Dt);
 }
 function Bt() {
@@ -198,7 +198,7 @@ j.prototype = H.prototype = {
   sum: Xt,
   sort: jt,
   path: _t,
-  ancestors: Ot,
+  ancestors: Mt,
   descendants: At,
   leaves: Tt,
   links: Ht,
@@ -227,28 +227,28 @@ const $t = "d3-flextree", Nt = "2.1.2", Wt = "build/d3-flextree.js", It = "index
 function tt(e) {
   const t = Object.assign({}, ee, e);
   function i(o) {
-    const c = t[o];
-    return typeof c == "function" ? c : () => c;
+    const l = t[o];
+    return typeof l == "function" ? l : () => l;
   }
   function n(o) {
-    const c = l(a(), o, (h) => h.children);
-    return c.update(), c.data;
+    const l = c(a(), o, (h) => h.children);
+    return l.update(), l.data;
   }
   function s() {
-    const o = i("nodeSize"), c = i("spacing");
+    const o = i("nodeSize"), l = i("spacing");
     return class Q extends H.prototype.constructor {
       constructor(d) {
         super(d);
       }
       copy() {
-        const d = l(this.constructor, this, (g) => g.children);
+        const d = c(this.constructor, this, (g) => g.children);
         return d.each((g) => g.data = g.data.data), d;
       }
       get size() {
         return o(this);
       }
       spacing(d) {
-        return c(this, d);
+        return l(this, d);
       }
       get nodes() {
         return this.descendants();
@@ -315,7 +315,7 @@ function tt(e) {
     };
   }
   function a() {
-    const o = s(), c = i("nodeSize"), h = i("spacing");
+    const o = s(), l = i("nodeSize"), h = i("spacing");
     return class extends o {
       constructor(d) {
         super(d), Object.assign(this, {
@@ -334,7 +334,7 @@ function tt(e) {
         });
       }
       get size() {
-        return c(this.data);
+        return l(this.data);
       }
       spacing(d) {
         return h(this.data, d.data);
@@ -356,7 +356,7 @@ function tt(e) {
       }
     };
   }
-  function l(o, c, h) {
+  function c(o, l, h) {
     const d = (g, u) => {
       const m = new o(g);
       Object.assign(m, {
@@ -374,7 +374,7 @@ function tt(e) {
         m
       )), m;
     };
-    return d(c, null);
+    return d(l, null);
   }
   return Object.assign(n, {
     nodeSize(o) {
@@ -386,13 +386,13 @@ function tt(e) {
     children(o) {
       return arguments.length ? (t.children = o, n) : t.children;
     },
-    hierarchy(o, c) {
-      const h = typeof c > "u" ? t.children : c;
-      return l(s(), o, h);
+    hierarchy(o, l) {
+      const h = typeof l > "u" ? t.children : l;
+      return c(s(), o, h);
     },
     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}`;
+      const l = i("nodeSize"), h = (d) => (g) => {
+        const u = d + "  ", m = d + "    ", { x, y } = g, v = l(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 h(`
@@ -404,9 +404,9 @@ 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;
+  const c = (s === 0 ? n.lExt : n.rExt).bottom;
   s !== 0 && ne(e, s, a);
-  const o = de(l, s, a);
+  const o = de(c, 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);
@@ -414,38 +414,38 @@ const et = (e, t = 0) => (e.y = t, (e.children || []).reduce((i, n) => {
   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, s] = t, a = n + i.shift, l = s + a + i.change;
-    return i.relX += l, [a, l];
+    const [n, s] = t, a = n + i.shift, c = s + a + i.change;
+    return i.relX += c, [a, c];
   }, [0, 0]);
 }, 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;
+  let a = n, c = n.relX, o = s, l = s.relX, h = !0;
   for (; a && o; ) {
     a.bottom > i.lowY && (i = i.next);
-    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 d = c + a.prelim - (l + o.prelim) + a.xSize / 2 + o.xSize / 2 + a.spacing(o);
+    (d > 0 || d < 0 && h) && (l += 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));
+    g <= u && (a = ae(a), a && (c += a.relX)), g >= u && (o = oe(o), o && (l += o.relX));
   }
-  !a && o ? le(e, t, o, c) : a && !o && ce(e, t, a, l);
+  !a && o ? le(e, t, o, l) : a && !o && ce(e, t, a, c);
 }, ie = (e, t) => {
   e.relX += t, e.lExtRelX += t, e.rExtRelX += t;
 }, 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, s.shift -= l, s.change -= n - l;
+    const c = n / a;
+    e.children[i + 1].shift += c, s.shift -= c, s.change -= n - c;
   }
 }, 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];
+  const s = e.firstChild, a = s.lExt, c = e.children[t];
   a.lThr = i;
   const o = n - i.relX - s.lExtRelX;
-  a.relX += o, a.prelim -= o, s.lExt = l.lExt, s.lExtRelX = l.lExtRelX;
+  a.relX += o, a.prelim -= o, s.lExt = c.lExt, s.lExtRelX = c.lExtRelX;
 }, ce = (e, t, i, n) => {
-  const s = e.children[t], a = s.rExt, l = e.children[t - 1];
+  const s = e.children[t], a = s.rExt, c = e.children[t - 1];
   a.rThr = i;
   const o = n - i.relX - s.rExtRelX;
-  a.relX += o, a.prelim -= o, s.rExt = l.rExt, s.rExtRelX = l.rExtRelX;
+  a.relX += o, a.prelim -= o, s.rExt = c.rExt, s.rExtRelX = c.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;
@@ -465,7 +465,7 @@ const et = (e, t = 0) => (e.y = t, (e.children || []).reduce((i, n) => {
     index: t,
     next: i
   };
-}, 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();
+}, 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, M = "g.markmap-node", pe = "path.markmap-link", ge = "g.markmap-highlight", A = ft();
 function U(e, t) {
   const i = vt(e, t);
   return e[i];
@@ -519,9 +519,9 @@ class it {
   async toggleNode(t, i = !1) {
     var s, a;
     const n = (s = t.payload) != null && s.fold ? 0 : 1;
-    i ? R(t, (l, o) => {
-      l.payload = {
-        ...l.payload,
+    i ? R(t, (c, o) => {
+      c.payload = {
+        ...c.payload,
         fold: n
       }, o();
     }) : t.payload = {
@@ -532,12 +532,12 @@ class it {
   _initializeData(t) {
     let i = 0;
     const { color: n, initialExpandLevel: s } = this.options;
-    let a = 0, l = 0;
-    return R(t, (o, c, h) => {
+    let a = 0, c = 0;
+    return R(t, (o, l, h) => {
       var g, u, m, x;
-      l += 1, o.children = (g = o.children) == null ? void 0 : g.map((y) => ({ ...y })), i += 1, o.state = {
+      c += 1, o.children = (g = o.children) == null ? void 0 : g.map((y) => ({ ...y })), i += 1, o.state = {
         ...o.state,
-        depth: l,
+        depth: c,
         id: i,
         rect: {
           x: 0,
@@ -548,45 +548,45 @@ class it {
         size: [0, 0]
       }, 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;
+      d ? a += 1 : (a || s >= 0 && o.state.depth >= s) && (o.payload = { ...o.payload, fold: 1 }), l(), d && (a -= 1), c -= 1;
     }), t;
   }
   _relayout() {
     if (!this.state.data) return;
-    this.g.selectAll(k(O)).selectAll(
+    this.g.selectAll(k(M)).selectAll(
       k("foreignObject")
-    ).each(function(o) {
-      var d;
-      const c = (d = this.firstChild) == null ? void 0 : d.firstChild, h = [c.scrollWidth, c.scrollHeight];
-      o.state.size = h;
+    ).each(function(l) {
+      var g;
+      const h = (g = this.firstChild) == null ? void 0 : g.firstChild, d = [h.scrollWidth, h.scrollHeight];
+      l.state.size = d;
     });
-    const { spacingHorizontal: t, paddingX: i, spacingVertical: n } = this.options, s = tt({}).children((o) => {
-      var c;
-      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((o) => {
-      const c = o.data;
-      c.state.rect = {
-        x: o.y,
-        y: o.x - o.xSize / 2,
-        width: o.ySize - t,
-        height: o.xSize
+    const { lineWidth: t, paddingX: i, spacingHorizontal: n, spacingVertical: s } = this.options, a = tt({}).children((l) => {
+      var h;
+      if (!((h = l.payload) != null && h.fold)) return l.children;
+    }).nodeSize((l) => {
+      const [h, d] = l.data.state.size;
+      return [d, h + (h ? i * 2 : 0) + n];
+    }).spacing((l, h) => (l.parent === h.parent ? s : s * 2) + t(l.data)), c = a.hierarchy(this.state.data);
+    a(c);
+    const o = c.descendants();
+    o.forEach((l) => {
+      const h = l.data;
+      h.state.rect = {
+        x: l.y,
+        y: l.x - l.xSize / 2,
+        width: l.ySize - n,
+        height: l.xSize
       };
     }), this.state.rect = {
-      x1: G(l, (o) => o.data.state.rect.x) || 0,
-      y1: G(l, (o) => o.data.state.rect.y) || 0,
+      x1: G(o, (l) => l.data.state.rect.x) || 0,
+      y1: G(o, (l) => l.data.state.rect.y) || 0,
       x2: V(
-        l,
-        (o) => o.data.state.rect.x + o.data.state.rect.width
+        o,
+        (l) => l.data.state.rect.x + l.data.state.rect.width
       ) || 0,
       y2: V(
-        l,
-        (o) => o.data.state.rect.y + o.data.state.rect.height
+        o,
+        (l) => l.data.state.rect.y + l.data.state.rect.height
       ) || 0
     };
   }
@@ -609,27 +609,27 @@ class it {
     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: s, maxWidth: a, linkWidth: l } = this.options, o = this.state.data;
+    const { paddingX: i, autoFit: n, color: s, maxWidth: a, lineWidth: c } = this.options, o = this.state.data;
     if (!o) return;
-    const c = {}, h = {}, d = [];
+    const l = {}, h = {}, d = [];
     R(o, (r, p, f) => {
       var E;
-      (E = r.payload) != null && E.fold || p(), c[r.state.id] = r, f && (h[r.state.id] = f.state.id), d.push(r);
+      (E = r.payload) != null && E.fold || p(), l[r.state.id] = r, f && (h[r.state.id] = f.state.id), d.push(r);
     });
     const g = {}, u = {}, m = (r) => {
       !r || g[r.state.id] || R(r, (p, f) => {
         g[p.state.id] = r.state.id, f();
       });
-    }, x = (r) => u[g[r.state.id]] || o.state.rect, y = (r) => (c[g[r.state.id]] || o).state.rect;
+    }, x = (r) => u[g[r.state.id]] || o.state.rect, y = (r) => (l[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) => {
+    const z = this.g.selectAll(k(M)).each((r) => {
       u[r.state.id] = r.state.rect;
     }).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]]);
+      m(l[h[r.state.id]]);
     }), C = z.exit().each((r) => {
-      m(c[h[r.state.id]]);
+      m(l[h[r.state.id]]);
     }), S = z.merge(B).attr(
       "class",
       (r) => {
@@ -673,13 +673,13 @@ class it {
         var p;
         return (p = r.payload) != null && p.fold ? [] : r.children.map((f) => ({ source: r, target: f }));
       }
-    ), 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) => {
+    ), O = this.g.selectAll(k(pe)).data(st, (r) => r.target.state.key), ot = O.exit(), at = O.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: f, target: f });
-    }).attr("stroke-width", 0).merge(M);
+    }).attr("stroke-width", 0).merge(O);
     this.svg.style(
       "--markmap-max-width",
       a ? `${a}px` : null
@@ -696,23 +696,23 @@ class it {
     const lt = C.selectAll(
       k("line")
     );
-    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);
+    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 + c(r) / 2).attr("y2", (r) => r.state.rect.height + c(r) / 2), this.transition(D).attr("x1", -1).attr("x2", (r) => r.state.rect.width + 2).attr("stroke", (r) => s(r)).attr("stroke-width", c);
     const ct = C.selectAll(
       k("circle")
     );
-    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) => {
+    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 + c(r) / 2), 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
+        p.y + p.height + c(r.target) / 2
       ];
       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) => {
+    }).attr("stroke-width", 0).remove(), this.transition(at).attr("stroke", (r) => s(r.target)).attr("stroke-width", (r) => c(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
+        p.state.rect.y + p.state.rect.height + c(p) / 2
       ], ht = [
         f.state.rect.x,
-        f.state.rect.y + f.state.rect.height
+        f.state.rect.y + f.state.rect.height + c(f) / 2
       ];
       return A({ source: E, target: ht });
     }), n && this.fit();
@@ -725,19 +725,19 @@ class it {
    * Fit the content to the viewport.
    */
   async fit(t = this.options.maxInitialScale) {
-    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(
+    const i = this.svg.node(), { width: n, height: s } = i.getBoundingClientRect(), { fitRatio: a } = this.options, { x1: c, y1: o, x2: l, y2: h } = this.state.rect, d = l - c, g = h - o, u = Math.min(
       n / d * a,
       s / g * a,
       t
     ), m = kt.translate(
-      (n - d * u) / 2 - l * u,
+      (n - d * u) / 2 - c * 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(s) {
+    return this.g.selectAll(k(M)).each(function(s) {
       s === t && (i = {
         data: s,
         g: this
@@ -751,21 +751,21 @@ class it {
     var v;
     const n = (v = this.findElement(t)) == null ? void 0 : v.data;
     if (!n) return;
-    const s = this.svg.node(), a = s.getBoundingClientRect(), l = w(s), [o, c] = [
+    const s = this.svg.node(), a = s.getBoundingClientRect(), c = w(s), [o, l] = [
       n.state.rect.x,
       n.state.rect.x + n.state.rect.width + 2
-    ].map((b) => b * l.k + l.x), [h, d] = [
+    ].map((b) => b * c.k + c.x), [h, d] = [
       n.state.rect.y,
       n.state.rect.y + n.state.rect.height
-    ].map((b) => b * l.k + l.y), g = {
+    ].map((b) => b * c.k + c.y), g = {
       left: 0,
       right: 0,
       top: 0,
       bottom: 0,
       ...i
-    }, 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;
+    }, u = [g.left - o, a.width - g.right - l], m = [g.top - h, a.height - g.bottom - d], x = u[0] * u[1] > 0 ? U(u, Math.abs) / c.k : 0, y = m[0] * m[1] > 0 ? U(m, Math.abs) / c.k : 0;
     if (x || y) {
-      const b = l.translate(x, y);
+      const b = c.translate(x, y);
       return this.transition(this.svg).call(this.zoom.transform, b).end().catch(X);
     }
   }
@@ -773,15 +773,15 @@ class it {
     var x;
     const n = (x = this.findElement(t)) == null ? void 0 : x.data;
     if (!n) return;
-    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 = {
+    const s = this.svg.node(), a = s.getBoundingClientRect(), c = w(s), o = (n.state.rect.x + n.state.rect.width / 2) * c.k + c.x, l = (n.state.rect.y + n.state.rect.height / 2) * c.k + c.y, h = {
       left: 0,
       right: 0,
       top: 0,
       bottom: 0,
       ...i
-    }, 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;
+    }, d = (h.left + a.width - h.right) / 2, g = (h.top + a.height - h.bottom) / 2, u = (d - o) / c.k, m = (g - l) / c.k;
     if (u || m) {
-      const y = l.translate(u, m);
+      const y = c.translate(u, m);
       return this.transition(this.svg).call(this.zoom.transform, y).end().catch(X);
     }
   }
@@ -789,11 +789,11 @@ class it {
    * Scale content with it pinned at the center of the viewport.
    */
   async rescale(t) {
-    const i = this.svg.node(), { width: n, height: s } = i.getBoundingClientRect(), a = n / 2, l = s / 2, o = w(i), c = o.translate(
+    const i = this.svg.node(), { width: n, height: s } = i.getBoundingClientRect(), a = n / 2, c = s / 2, o = w(i), l = o.translate(
       (a - o.x) * (1 - t) / o.k,
-      (l - o.y) * (1 - t) / o.k
+      (c - o.y) * (1 - t) / o.k
     ).scale(t);
-    return this.transition(this.svg).call(this.zoom.transform, c).end().catch(X);
+    return this.transition(this.svg).call(this.zoom.transform, l).end().catch(X);
   }
   destroy() {
     this.svg.on(".zoom", null), this.svg.html(null), this._disposeList.forEach((t) => {
@@ -815,7 +815,7 @@ export {
   ke as deriveOptions,
   ve as globalCSS,
   Z as isMacintosh,
-  q as linkWidthFactory,
+  q as lineWidthFactory,
   ze as loadCSS,
   we as loadJS,
   ue as refreshHook,

package/dist/types.d.ts

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

package/dist/view.d.ts

@@ -21,7 +21,7 @@ export declare class Markmap {
         toggleRecursively: boolean;
         zoom: boolean;
         color: (node: INode) => string;
-        linkWidth: (node: INode) => number;
+        lineWidth: (node: INode) => number;
         maxWidth: number;
         nodeMinHeight: number;
         paddingX: number;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "markmap-view",
-  "version": "0.18.8-alpha.2+55f0247",
+  "version": "0.18.8",
   "description": "View markmaps in browser",
   "author": "Gerald <gera2ld@live.com>",
   "license": "MIT",
@@ -46,10 +46,10 @@
     "@types/d3": "^7.4.0",
     "@types/d3-flextree": "^2.1.1",
     "d3-flextree": "^2.1.2",
-    "markmap-common": "0.18.8-alpha.2+55f0247"
+    "markmap-common": "0.18.8"
   },
   "peerDependencies": {
     "markmap-common": "*"
   },
-  "gitHead": "55f02470e5d5edc3e4ed75c5436b58a771910308"
+  "gitHead": "476d2e8abb528af6f6f0c468c6c63791b7c1911a"
 }