markmap-view 0.18.5 → 0.18.8

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 lineWidthFactory = (baseWidth = 1, deltaWidth = 3, k = 2) => (node) => baseWidth + deltaWidth / k ** node.state.depth;
   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) || ""}`);
+    },
+    lineWidth: lineWidthFactory(),
+    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, lineWidth } = options;
     if ((color == null ? void 0 : color.length) === 1) {
       const solidColor = color[0];
       derivedOptions.color = () => solidColor;
@@ -372,6 +374,12 @@
         return color2(node);
       };
     }
+    if (lineWidth) {
+      const args = Array.isArray(lineWidth) ? lineWidth : [lineWidth, 0, 1];
+      derivedOptions.lineWidth = lineWidthFactory(
+        ...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;
@@ -1089,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;
@@ -1097,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);
@@ -1165,7 +1170,7 @@
       return rect;
     }
     async renderData(originData) {
-      const { paddingX, autoFit, color, maxWidth } = this.options;
+      const { paddingX, autoFit, color, maxWidth, lineWidth } = this.options;
       const rootNode = this.state.data;
       if (!rootNode) return;
       const nodeMap = {};
@@ -1298,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);
@@ -1313,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 });
       });
@@ -1467,6 +1472,7 @@
   exports.deriveOptions = deriveOptions;
   exports.globalCSS = globalCSS;
   exports.isMacintosh = isMacintosh;
+  exports.lineWidthFactory = lineWidthFactory;
   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 lineWidthFactory: (baseWidth?: number, deltaWidth?: number, k?: number) => (node: INode) => number;
 export declare const defaultOptions: IMarkmapOptions;