markmap-view 0.15.8 → 0.15.9-alpha.5

package/dist/browser/index.js

@@ -35,13 +35,11 @@
       item,
       () => {
         var _a;
-        (_a = item.children) == null ? void 0 : _a.forEach((child) => {
-          walk(child, item);
-        });
+        return (_a = item.children) == null ? void 0 : _a.map((child) => walk(child, item));
       },
       parent
     );
-    walk(tree);
+    return walk(tree);
   }
   function addClass(className, ...rest) {
     const classList = (className || "").split(" ").filter(Boolean);
@@ -86,6 +84,28 @@
       return data.value;
     };
   }
+  function debounce(fn, time) {
+    const state = {
+      timer: 0
+    };
+    function reset() {
+      if (state.timer) {
+        window.clearTimeout(state.timer);
+        state.timer = 0;
+      }
+    }
+    function run() {
+      reset();
+      if (state.args)
+        state.result = fn(...state.args);
+    }
+    return function debounced(...args) {
+      reset();
+      state.args = args;
+      state.timer = window.setTimeout(run, time);
+      return state.result;
+    };
+  }
   /*! @gera2ld/jsx-dom v2.2.2 | ISC License */
   const VTYPE_ELEMENT$1 = 1;
   const VTYPE_FUNCTION$1 = 2;
@@ -332,6 +352,66 @@
   async function loadCSS(items) {
     await Promise.all(items.map((item) => loadCSSItem(item)));
   }
+  const isMacintosh = typeof navigator !== "undefined" && navigator.userAgent.includes("Macintosh");
+  const defaultColorFn = d32.scaleOrdinal(d32.schemeCategory10);
+  const defaultOptions = {
+    autoFit: false,
+    color: (node) => {
+      var _a;
+      return defaultColorFn(`${((_a = node.state) == null ? void 0 : _a.path) || ""}`);
+    },
+    duration: 500,
+    embedGlobalCSS: true,
+    fitRatio: 0.95,
+    maxWidth: 0,
+    nodeMinHeight: 16,
+    paddingX: 8,
+    scrollForPan: isMacintosh,
+    spacingHorizontal: 80,
+    spacingVertical: 5,
+    initialExpandLevel: -1,
+    zoom: true,
+    pan: true,
+    toggleRecursively: false
+  };
+  function deriveOptions(jsonOptions) {
+    const derivedOptions = {};
+    const options = { ...jsonOptions };
+    const { color, colorFreezeLevel } = options;
+    if ((color == null ? void 0 : color.length) === 1) {
+      const solidColor = color[0];
+      derivedOptions.color = () => solidColor;
+    } else if (color == null ? void 0 : color.length) {
+      const colorFn = d32.scaleOrdinal(color);
+      derivedOptions.color = (node) => colorFn(`${node.state.path}`);
+    }
+    if (colorFreezeLevel) {
+      const color2 = derivedOptions.color || defaultOptions.color;
+      derivedOptions.color = (node) => {
+        node = {
+          ...node,
+          state: {
+            ...node.state,
+            path: node.state.path.split(".").slice(0, colorFreezeLevel).join(".")
+          }
+        };
+        return color2(node);
+      };
+    }
+    const numberKeys = ["duration", "maxWidth", "initialExpandLevel"];
+    numberKeys.forEach((key) => {
+      const value = options[key];
+      if (typeof value === "number")
+        derivedOptions[key] = value;
+    });
+    const booleanKeys = ["zoom", "pan"];
+    booleanKeys.forEach((key) => {
+      const value = options[key];
+      if (value != null)
+        derivedOptions[key] = !!value;
+    });
+    return derivedOptions;
+  }
   /*! @gera2ld/jsx-dom v2.2.2 | ISC License */
   const VTYPE_ELEMENT = 1;
   const VTYPE_FUNCTION = 2;
@@ -1073,12 +1153,12 @@
       next: lastLows
     };
   };
-  const css = ".markmap {\n  font: 300 16px/20px sans-serif;\n}\n\n  .markmap-link {\n    fill: none;\n  }\n\n  .markmap-node > circle {\n      cursor: pointer;\n    }\n\n  .markmap-foreign {\n    display: inline-block;\n  }\n\n  .markmap-foreign a {\n      color: #0097e6;\n    }\n\n  .markmap-foreign a:hover {\n        color: #00a8ff;\n      }\n\n  .markmap-foreign code {\n      padding: 0.25em;\n      font-size: calc(1em - 2px);\n      color: #555;\n      background-color: #f0f0f0;\n      border-radius: 2px;\n    }\n\n  .markmap-foreign pre {\n      margin: 0;\n    }\n\n  .markmap-foreign pre > code {\n        display: block;\n      }\n\n  .markmap-foreign del {\n      text-decoration: line-through;\n    }\n\n  .markmap-foreign em {\n      font-style: italic;\n    }\n\n  .markmap-foreign strong {\n      font-weight: bold;\n    }\n\n  .markmap-foreign mark {\n      background: #ffeaa7;\n    }\n";
   const containerCSS = "/* used for pre-rendering to get the size of each node */\n.markmap-container {\n  position: absolute;\n  width: 0;\n  height: 0;\n  top: -100px;\n  left: -100px;\n  overflow: hidden;\n}\n.markmap-container > .markmap-foreign {\n    display: inline-block;\n  }\n/* first-child for line wrapping, last-child for max-width detection */\n.markmap-container > .markmap-foreign > div:last-child,\n        \n        .markmap-container > .markmap-foreign > div:last-child :not(pre) {\n          white-space: nowrap;\n        }\n.markmap-container > .markmap-foreign > div:last-child code {\n          white-space: inherit;\n        }\n";
+  const css = ".markmap {\n  --markmap-max-width: none;\n  --markmap-a-color: #0097e6;\n  --markmap-a-hover-color: #00a8ff;\n  --markmap-code-bg: #f0f0f0;\n  --markmap-code-color: #555;\n  --markmap-highlight-bg: #ffeaa7;\n  --markmap-table-border: 1px solid currentColor;\n  --markmap-font: 300 16px/20px sans-serif;\n\n  font: var(--markmap-font);\n}\n\n  .markmap-link {\n    fill: none;\n  }\n\n  .markmap-node > circle {\n      cursor: pointer;\n    }\n\n  .markmap-foreign {\n    display: inline-block;\n  }\n\n  .markmap-foreign a {\n      color: var(--markmap-a-color);\n    }\n\n  .markmap-foreign a:hover {\n        color: var(--markmap-a-hover-color);\n      }\n\n  .markmap-foreign code {\n      padding: 0.25em;\n      font-size: calc(1em - 2px);\n      color: var(--markmap-code-color);\n      background-color: var(--markmap-code-bg);\n      border-radius: 2px;\n    }\n\n  .markmap-foreign pre {\n      margin: 0;\n    }\n\n  .markmap-foreign pre > code {\n        display: block;\n      }\n\n  .markmap-foreign del {\n      text-decoration: line-through;\n    }\n\n  .markmap-foreign em {\n      font-style: italic;\n    }\n\n  .markmap-foreign strong {\n      font-weight: bold;\n    }\n\n  .markmap-foreign mark {\n      background: var(--markmap-highlight-bg);\n    }\n\n  .markmap-foreign table,\n    .markmap-foreign th,\n    .markmap-foreign td {\n      border-collapse: collapse;\n      border: var(--markmap-table-border);\n    }\n\n  .markmap-foreign img {\n      display: inline-block;\n    }\n\n  .markmap-foreign-testing-max {\n    max-width: var(--markmap-max-width);\n  }\n\n  .markmap-foreign-testing-max img {\n      max-width: var(--markmap-max-width);\n      max-height: none;\n    }\n";
   const globalCSS = css;
   function linkWidth(nodeData) {
     const data = nodeData.data;
-    return Math.max(4 - 2 * data.depth, 1.5);
+    return Math.max(4 - 2 * data.state.depth, 1.5);
   }
   function minBy(numbers, by) {
     const index = d32.minIndex(numbers, by);
@@ -1087,18 +1167,12 @@
   function stopPropagation(e) {
     e.stopPropagation();
   }
-  function createViewHooks() {
-    return {
-      transformHtml: new Hook()
-    };
-  }
   const refreshHook = new Hook();
-  const defaultColorFn = d32.scaleOrdinal(d32.schemeCategory10);
-  const isMacintosh = typeof navigator !== "undefined" && navigator.userAgent.includes("Macintosh");
-  const _Markmap = class _Markmap {
+  class Markmap {
     constructor(svg, opts) {
-      this.options = _Markmap.defaultOptions;
+      this.options = defaultOptions;
       this.revokers = [];
+      this.imgCache = {};
       this.handleZoom = (e) => {
         const { transform } = e;
         this.g.attr("transform", transform);
@@ -1118,7 +1192,6 @@
           recursive = !recursive;
         this.toggleNode(d.data, recursive);
       };
-      this.viewHooks = createViewHooks();
       this.svg = svg.datum ? svg : d32.select(svg);
       this.styleNode = this.svg.append("style");
       this.zoom = d32.zoom().filter((event) => {
@@ -1137,6 +1210,7 @@
         maxY: 0
       };
       this.g = this.svg.append("g");
+      this.debouncedRefresh = debounce(() => this.setData(), 200);
       this.revokers.push(
         refreshHook.tap(() => {
           this.setData();
@@ -1187,18 +1261,28 @@
         /* @__PURE__ */ jsx("style", { children: [this.getStyleContent(), containerCSS].join("\n") })
       );
       document.body.append(container, style);
-      const groupStyle = maxWidth ? `max-width: ${maxWidth}px` : "";
+      const groupStyle = maxWidth ? `--markmap-max-width: ${maxWidth}px` : "";
       let foldRecursively = 0;
+      let depth = 0;
       walkTree(node, (item, next, parent) => {
         var _a, _b, _c;
+        depth += 1;
         item.children = (_a = item.children) == null ? void 0 : _a.map((child) => ({ ...child }));
         nodeId += 1;
         const group = mountDom(
-          /* @__PURE__ */ jsx("div", { className: "markmap-foreign", style: groupStyle, children: /* @__PURE__ */ jsx("div", { dangerouslySetInnerHTML: { __html: item.content } }) })
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "markmap-foreign markmap-foreign-testing-max",
+              style: groupStyle,
+              children: /* @__PURE__ */ jsx("div", { dangerouslySetInnerHTML: { __html: item.content } })
+            }
+          )
         );
         container.append(group);
         item.state = {
           ...item.state,
+          depth,
           id: nodeId,
           el: group.firstChild
         };
@@ -1207,17 +1291,18 @@
         const isFoldRecursively = ((_c = item.payload) == null ? void 0 : _c.fold) === 2;
         if (isFoldRecursively) {
           foldRecursively += 1;
-        } else if (foldRecursively || initialExpandLevel >= 0 && item.depth >= initialExpandLevel) {
+        } else if (foldRecursively || initialExpandLevel >= 0 && item.state.depth >= initialExpandLevel) {
           item.payload = { ...item.payload, fold: 1 };
         }
         next();
         if (isFoldRecursively)
           foldRecursively -= 1;
+        depth -= 1;
       });
       const nodes = Array.from(container.childNodes).map(
         (group) => group.firstChild
       );
-      this.viewHooks.transformHtml.call(this, nodes);
+      this._checkImages(container);
       nodes.forEach((node2) => {
         var _a;
         (_a = node2.parentNode) == null ? void 0 : _a.append(node2.cloneNode(true));
@@ -1238,6 +1323,27 @@
       container.remove();
       style.remove();
     }
+    _checkImages(container) {
+      container.querySelectorAll("img").forEach((img) => {
+        if (img.width)
+          return;
+        const size = this.imgCache[img.src];
+        if (size == null ? void 0 : size[0]) {
+          [img.width, img.height] = size;
+        } else if (!size) {
+          this._loadImage(img.src);
+        }
+      });
+    }
+    _loadImage(src) {
+      this.imgCache[src] = [0, 0];
+      const img = new Image();
+      img.src = src;
+      img.onload = () => {
+        this.imgCache[src] = [img.naturalWidth, img.naturalHeight];
+        this.debouncedRefresh();
+      };
+    }
     setOptions(opts) {
       this.options = {
         ...this.options,
@@ -1302,7 +1408,7 @@
       const node = this.g.selectAll(
         childSelector("g")
       ).data(descendants, (d) => d.data.state.key);
-      const nodeEnter = node.enter().append("g").attr("data-depth", (d) => d.data.depth).attr("data-path", (d) => d.data.state.path).attr(
+      const nodeEnter = node.enter().append("g").attr("data-depth", (d) => d.data.state.depth).attr("data-path", (d) => d.data.state.path).attr(
         "transform",
         (d) => `translate(${y0 + origin.ySize - d.ySize},${x0 + origin.xSize / 2 - d.xSize})`
       );
@@ -1389,7 +1495,7 @@
             y0 + origin.ySize - spacingHorizontal,
             x0 + origin.xSize / 2
           ];
-          return enter.insert("path", "g").attr("class", "markmap-link").attr("data-depth", (d) => d.target.data.depth).attr("data-path", (d) => d.target.data.state.path).attr("d", linkShape({ source, target: source }));
+          return enter.insert("path", "g").attr("class", "markmap-link").attr("data-depth", (d) => d.target.data.state.depth).attr("data-path", (d) => d.target.data.state.path).attr("d", linkShape({ source, target: source }));
         },
         (update) => update,
         (exit) => {
@@ -1508,77 +1614,20 @@
       });
     }
     static create(svg, opts, data = null) {
-      const mm = new _Markmap(svg, opts);
+      const mm = new Markmap(svg, opts);
       if (data) {
         mm.setData(data);
         mm.fit();
       }
       return mm;
     }
-  };
-  _Markmap.defaultOptions = {
-    autoFit: false,
-    color: (node) => {
-      var _a;
-      return defaultColorFn(`${((_a = node.state) == null ? void 0 : _a.path) || ""}`);
-    },
-    duration: 500,
-    embedGlobalCSS: true,
-    fitRatio: 0.95,
-    maxWidth: 0,
-    nodeMinHeight: 16,
-    paddingX: 8,
-    scrollForPan: isMacintosh,
-    spacingHorizontal: 80,
-    spacingVertical: 5,
-    initialExpandLevel: -1,
-    zoom: true,
-    pan: true,
-    toggleRecursively: false
-  };
-  let Markmap = _Markmap;
-  function deriveOptions(jsonOptions) {
-    const derivedOptions = {};
-    const options = { ...jsonOptions };
-    const { color, colorFreezeLevel } = options;
-    if ((color == null ? void 0 : color.length) === 1) {
-      const solidColor = color[0];
-      derivedOptions.color = () => solidColor;
-    } else if (color == null ? void 0 : color.length) {
-      const colorFn = d32.scaleOrdinal(color);
-      derivedOptions.color = (node) => colorFn(`${node.state.path}`);
-    }
-    if (colorFreezeLevel) {
-      const color2 = derivedOptions.color || Markmap.defaultOptions.color;
-      derivedOptions.color = (node) => {
-        node = {
-          ...node,
-          state: {
-            ...node.state,
-            path: node.state.path.split(".").slice(0, colorFreezeLevel).join(".")
-          }
-        };
-        return color2(node);
-      };
-    }
-    const numberKeys = ["duration", "maxWidth", "initialExpandLevel"];
-    numberKeys.forEach((key) => {
-      const value = options[key];
-      if (typeof value === "number")
-        derivedOptions[key] = value;
-    });
-    const booleanKeys = ["zoom", "pan"];
-    booleanKeys.forEach((key) => {
-      const value = options[key];
-      if (value != null)
-        derivedOptions[key] = !!value;
-    });
-    return derivedOptions;
   }
   exports.Markmap = Markmap;
   exports.defaultColorFn = defaultColorFn;
+  exports.defaultOptions = defaultOptions;
   exports.deriveOptions = deriveOptions;
   exports.globalCSS = globalCSS;
+  exports.isMacintosh = isMacintosh;
   exports.loadCSS = loadCSS;
   exports.loadJS = loadJS;
   exports.refreshHook = refreshHook;

package/dist/constants.d.ts

@@ -0,0 +1,4 @@
+import { IMarkmapOptions } from 'markmap-common';
+export declare const isMacintosh: boolean;
+export declare const defaultColorFn: import("d3-scale").ScaleOrdinal<string, string, never>;
+export declare const defaultOptions: IMarkmapOptions;

package/dist/index.d.ts

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