markmap-view - npm Package Compare versions

Comparing version 0.18.8-alpha.2 to 0.18.8

dist/browser/index.js

@@ -330,3 +330,3 @@ (function(exports, d32) {
   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 = {
@@ -347,3 +347,3 @@ autoFit: false,
     },
-    linkWidth: linkWidthFactory(),
+    lineWidth: lineWidthFactory(),
     maxWidth: 0,
@@ -358,3 +358,3 @@ nodeMinHeight: 16,
     const options = { ...jsonOptions };
-    const { color, colorFreezeLevel, linkWidth } = options;
+    const { color, colorFreezeLevel, lineWidth } = options;
     if ((color == null ? void 0 : color.length) === 1) {
@@ -380,5 +380,5 @@ const solidColor = color[0];
     }
-    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
@@ -1101,3 +1101,3 @@ );
       });
-      const { spacingHorizontal, paddingX, spacingVertical } = this.options;
+      const { lineWidth, paddingX, spacingHorizontal, spacingVertical } = this.options;
       const layout = flextree({}).children((d) => {
@@ -1110,3 +1110,3 @@ var _a;
       }).spacing((a, b) => {
-        return a.parent === b.parent ? spacingVertical : spacingVertical * 2;
+        return (a.parent === b.parent ? spacingVertical : spacingVertical * 2) + lineWidth(a.data);
       });
@@ -1179,3 +1179,3 @@ const tree = layout.hierarchy(this.state.data);
     async renderData(originData) {
-      const { paddingX, autoFit, color, maxWidth, linkWidth } = this.options;
+      const { paddingX, autoFit, color, maxWidth, lineWidth } = this.options;
       const rootNode = this.state.data;
@@ -1313,4 +1313,4 @@ if (!rootNode) return;
       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(
@@ -1320,3 +1320,3 @@ 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");
@@ -1330,7 +1330,7 @@ this.transition(mmFoExit).style("opacity", 0);
           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;
@@ -1340,7 +1340,7 @@ const origTarget = d.target;
           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
         ];
@@ -1486,3 +1486,3 @@ return linkShape({ source, target });
   exports.isMacintosh = isMacintosh;
-  exports.linkWidthFactory = linkWidthFactory;
+  exports.lineWidthFactory = lineWidthFactory;
   exports.loadCSS = loadCSS;
@@ -1489,0 +1489,0 @@ exports.loadJS = loadJS;

dist/constants.d.ts

 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;

dist/index.js

 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,
@@ -19,3 +19,3 @@ duration: 500,
   },
-  linkWidth: q(),
+  lineWidth: q(),
   maxWidth: 0,
@@ -28,12 +28,12 @@ nodeMinHeight: 16,
 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 = {
@@ -45,8 +45,8 @@ ...h,
       }
-    }, 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
     );
@@ -64,8 +64,8 @@ }
     "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;
@@ -100,6 +100,6 @@ }
 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]);
@@ -116,4 +116,4 @@ while (n.length);
 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]);
@@ -136,3 +136,3 @@ for (; t = n.pop(); )
 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);
@@ -143,3 +143,3 @@ for (var s = n.length; e !== i; )
 }
-function Mt(e, t) {
+function Ot(e, t) {
   if (e === t) return e;
@@ -151,3 +151,3 @@ var i = e.ancestors(), n = t.ancestors(), s = null;
 }
-function Ot() {
+function Mt() {
   for (var e = this, t = [e]; e = e.parent; )
@@ -176,7 +176,7 @@ t.push(e);
 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);
@@ -211,3 +211,3 @@ }
   path: _t,
-  ancestors: Ot,
+  ancestors: Mt,
   descendants: At,
@@ -241,11 +241,11 @@ leaves: Tt,
   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 {
@@ -256,3 +256,3 @@ constructor(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;
@@ -264,3 +264,3 @@ }
       spacing(d) {
-        return c(this, d);
+        return l(this, d);
       }
@@ -332,3 +332,3 @@ get nodes() {
   function a() {
-    const o = s(), c = i("nodeSize"), h = i("spacing");
+    const o = s(), l = i("nodeSize"), h = i("spacing");
     return class extends o {
@@ -352,3 +352,3 @@ constructor(d) {
       get size() {
-        return c(this.data);
+        return l(this.data);
       }
@@ -375,3 +375,3 @@ spacing(d) {
   }
-  function l(o, c, h) {
+  function c(o, l, h) {
     const d = (g, u) => {
@@ -394,3 +394,3 @@ const m = new o(g);
     };
-    return d(c, null);
+    return d(l, null);
   }
@@ -407,9 +407,9 @@ return Object.assign(n, {
     },
-    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}},`;
@@ -426,5 +426,5 @@ };
   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];
@@ -437,16 +437,16 @@ }, [0, null]), re(e), he(e), e), rt = (e, t, i) => {
   (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) => {
@@ -457,15 +457,15 @@ e.relX += t, e.lExtRelX += t, e.rExtRelX += t;
   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) => {
@@ -490,3 +490,3 @@ if (e.hasChildren) {
   };
-}, 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) {
@@ -545,5 +545,5 @@ const i = vt(e, t);
     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
@@ -559,8 +559,8 @@ }, o();
     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,
@@ -576,3 +576,3 @@ rect: {
       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;
@@ -582,36 +582,36 @@ }
     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
@@ -639,8 +639,8 @@ };
   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);
     });
@@ -651,12 +651,12 @@ const g = {}, u = {}, m = (r) => {
       });
-    }, 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(
@@ -705,3 +705,3 @@ "class",
       }
-    ), 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 = [
@@ -712,3 +712,3 @@ p.x + p.width,
       return A({ source: f, target: f });
-    }).attr("stroke-width", 0).merge(M);
+    }).attr("stroke-width", 0).merge(O);
     this.svg.style(
@@ -730,19 +730,19 @@ "--markmap-max-width",
     );
-    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
       ];
@@ -760,3 +760,3 @@ return A({ source: E, target: ht });
   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,
@@ -766,3 +766,3 @@ s / g * a,
     ), m = kt.translate(
-      (n - d * u) / 2 - l * u,
+      (n - d * u) / 2 - c * u,
       (s - g * u) / 2 - o * u
@@ -774,3 +774,3 @@ ).scale(u);
     let i;
-    return this.g.selectAll(k(O)).each(function(s) {
+    return this.g.selectAll(k(M)).each(function(s) {
       s === t && (i = {
@@ -789,9 +789,9 @@ data: s,
     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,
@@ -802,5 +802,5 @@ right: 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);
@@ -813,3 +813,3 @@ }
     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,
@@ -820,5 +820,5 @@ right: 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);
@@ -831,7 +831,7 @@ }
   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);
   }
@@ -858,3 +858,3 @@ destroy() {
   Z as isMacintosh,
-  q as linkWidthFactory,
+  q as lineWidthFactory,
   ze as loadCSS,
@@ -861,0 +861,0 @@ we as loadJS,

dist/types.d.ts

@@ -29,3 +29,3 @@ import { INode } from 'markmap-common';
     zoom: boolean;
-    linkWidth: number | number[];
+    lineWidth: number | number[];
 }
@@ -32,0 +32,0 @@ export interface IPadding {

dist/view.d.ts

@@ -24,3 +24,3 @@ import type * as d3 from 'd3';
         color: (node: INode) => string;
-        linkWidth: (node: INode) => number;
+        lineWidth: (node: INode) => number;
         maxWidth: number;
@@ -27,0 +27,0 @@ nodeMinHeight: number;

package.json

 {
   "name": "markmap-view",
-  "version": "0.18.8-alpha.2+55f0247",
+  "version": "0.18.8",
   "description": "View markmaps in browser",
@@ -49,3 +49,3 @@ "author": "Gerald <[e-mail]>",
     "d3-flextree": "^2.1.2",
-    "markmap-common": "0.18.8-alpha.2+55f0247"
+    "markmap-common": "0.18.8"
   },
@@ -55,3 +55,3 @@ "peerDependencies": {
   },
-  "gitHead": "55f02470e5d5edc3e4ed75c5436b58a771910308"
+  "gitHead": "476d2e8abb528af6f6f0c468c6c63791b7c1911a"
 }

Fixed 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

Improved metrics

Total package byte prevSize

89157

increased by0.27%

Number of medium supply chain risk alerts

1

decreased by-50%

No dependency changes