markmap-view 0.18.4 → 0.18.5-alpha.7

package/dist/browser/index.js

@@ -47,18 +47,6 @@
     });
     return classList.join(" ");
   }
-  function childSelector(filter) {
-    if (typeof filter === "string") {
-      const tagName = filter;
-      filter = (el) => el.tagName === tagName;
-    }
-    const filterFn = filter;
-    return function selector() {
-      let nodes = Array.from(this.childNodes);
-      if (filterFn) nodes = nodes.filter((node) => filterFn(node));
-      return nodes;
-    };
-  }
   function defer() {
     const obj = {};
     obj.promise = new Promise((resolve, reject) => {
@@ -413,6 +401,18 @@
     }
     return (hash >>> 0).toString(36);
   }
+  function childSelector(filter) {
+    if (typeof filter === "string") {
+      const selector = filter;
+      filter = (el) => el.matches(selector);
+    }
+    const filterFn = filter;
+    return function selector() {
+      let nodes = Array.from(this.childNodes);
+      if (filterFn) nodes = nodes.filter((node) => filterFn(node));
+      return nodes;
+    };
+  }
   function count(node) {
     var sum = 0, children = node.children, i = children && children.length;
     if (!i) sum = 1;
@@ -942,8 +942,11 @@
       next: lastLows
     };
   };
-  const css = ".markmap {\n  --markmap-max-width: 9999px;\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  --markmap-circle-open-bg: #fff;\n  --markmap-text-color: #333;\n\n  font: var(--markmap-font);\n  color: var(--markmap-text-color);\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 p {\n      margin: 0;\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 svg {\n      fill: currentColor;\n    }\n\n  .markmap-foreign > div {\n      width: var(--markmap-max-width);\n      text-align: left;\n    }\n\n  .markmap-foreign > div > div {\n        display: inline-block;\n      }\n\n.markmap-dark .markmap {\n  --markmap-code-bg: #1a1b26;\n  --markmap-code-color: #ddd;\n  --markmap-circle-open-bg: #444;\n  --markmap-text-color: #eee;\n}\n";
+  const css = ".markmap {\n  --markmap-max-width: 9999px;\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  --markmap-circle-open-bg: #fff;\n  --markmap-text-color: #333;\n  --markmap-highlight-node-bg: #ff02;\n\n  font: var(--markmap-font);\n  color: var(--markmap-text-color);\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 p {\n      margin: 0;\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 svg {\n      fill: currentColor;\n    }\n\n  .markmap-foreign > div {\n      width: var(--markmap-max-width);\n      text-align: left;\n    }\n\n  .markmap-foreign > div > div {\n        display: inline-block;\n      }\n\n  .markmap-highlight rect {\n    fill: var(--markmap-highlight-node-bg);\n  }\n\n.markmap-dark .markmap {\n  --markmap-code-bg: #1a1b26;\n  --markmap-code-color: #ddd;\n  --markmap-circle-open-bg: #444;\n  --markmap-text-color: #eee;\n}\n";
   const globalCSS = css;
+  const SELECTOR_NODE = "g.markmap-node";
+  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);
@@ -959,7 +962,7 @@
   class Markmap {
     constructor(svg, opts) {
       this.options = defaultOptions;
-      this.revokers = [];
+      this._disposeList = [];
       this.handleZoom = (e) => {
         const { transform } = e;
         this.g.attr("transform", transform);
@@ -993,16 +996,17 @@
         rect: { x1: 0, y1: 0, x2: 0, y2: 0 }
       };
       this.g = this.svg.append("g");
-      this.observer = new ResizeObserver(
+      this.g.append("g").attr("class", "markmap-highlight");
+      this._observer = new ResizeObserver(
         debounce(() => {
           this.renderData();
         }, 100)
       );
-      this.revokers.push(
+      this._disposeList.push(
         refreshHook.tap(() => {
           this.setData();
         }),
-        () => this.observer.disconnect()
+        () => this._observer.disconnect()
       );
     }
     getStyleContent() {
@@ -1073,10 +1077,11 @@
         if (isFoldRecursively) foldRecursively -= 1;
         depth -= 1;
       });
+      return node;
     }
     _relayout() {
       if (!this.state.data) return;
-      this.g.selectAll(childSelector("g")).selectAll(
+      this.g.selectAll(childSelector(SELECTOR_NODE)).selectAll(
         childSelector("foreignObject")
       ).each(function(d) {
         var _a;
@@ -1137,12 +1142,28 @@
     }
     async setData(data, opts) {
       if (opts) this.setOptions(opts);
-      if (data) this.state.data = data;
+      if (data) this.state.data = this._initializeData(data);
       if (!this.state.data) return;
-      this._initializeData(this.state.data);
       this.updateStyle();
       await this.renderData();
     }
+    async setHighlight(node) {
+      this.state.highlight = node || void 0;
+      await this.renderData();
+    }
+    _getHighlightRect(highlight) {
+      const svgNode = this.svg.node();
+      const transform = d32.zoomTransform(svgNode);
+      const padding = 4 / transform.k;
+      const rect = {
+        ...highlight.state.rect
+      };
+      rect.x -= padding;
+      rect.y -= padding;
+      rect.width += 2 * padding;
+      rect.height += 2 * padding;
+      return rect;
+    }
     async renderData(originData) {
       const { paddingX, autoFit, color, maxWidth } = this.options;
       const rootNode = this.state.data;
@@ -1173,7 +1194,9 @@
       const getOriginTargetRect = (node) => (nodeMap[originMap[node.state.id]] || rootNode).state.rect;
       sourceRectMap[rootNode.state.id] = rootNode.state.rect;
       if (originData) setOriginNode(originData);
-      const mmG = this.g.selectAll(childSelector("g")).each((d) => {
+      const { highlight } = this.state;
+      let highlightNodes = this.g.selectAll(childSelector(SELECTOR_HIGHLIGHT)).selectAll(childSelector("rect")).data(highlight ? [this._getHighlightRect(highlight)] : []).join("rect").attr("x", (d) => d.x).attr("y", (d) => d.y).attr("width", (d) => d.width).attr("height", (d) => d.height);
+      const mmG = this.g.selectAll(childSelector(SELECTOR_NODE)).each((d) => {
         sourceRectMap[d.state.id] = d.state.rect;
       }).data(nodes, (d) => d.state.key);
       const mmGEnter = mmG.enter().append("g").attr("data-depth", (d) => d.state.depth).attr("data-path", (d) => d.state.path).each((d) => {
@@ -1210,7 +1233,7 @@
           return ((_a = d.payload) == null ? void 0 : _a.fold) && d.children ? color(d) : "var(--markmap-circle-open-bg)";
         }
       );
-      const observer = this.observer;
+      const observer = this._observer;
       const mmFo = mmGMerge.selectAll(childSelector("foreignObject")).data(
         (d) => [d],
         (d) => d.state.key
@@ -1237,7 +1260,7 @@
           return ((_a = node.payload) == null ? void 0 : _a.fold) ? [] : node.children.map((child) => ({ source: node, target: child }));
         }
       );
-      const mmPath = this.g.selectAll(childSelector("path")).data(links, (d) => d.target.state.key);
+      const mmPath = this.g.selectAll(childSelector(SELECTOR_LINK)).data(links, (d) => d.target.state.key);
       const mmPathExit = mmPath.exit();
       const mmPathEnter = mmPath.enter().insert("path", "g").attr("class", "markmap-link").attr("data-depth", (d) => d.target.state.depth).attr("data-path", (d) => d.target.state.path).attr("d", (d) => {
         const originRect = getOriginSourceRect(d.target);
@@ -1254,6 +1277,8 @@
       );
       await new Promise(requestAnimationFrame);
       this._relayout();
+      highlightNodes = highlightNodes.data(highlight ? [this._getHighlightRect(highlight)] : []).join("rect");
+      this.transition(highlightNodes).attr("x", (d) => d.x).attr("y", (d) => d.y).attr("width", (d) => d.width).attr("height", (d) => d.height);
       mmGEnter.attr("transform", (d) => {
         const originRect = getOriginSourceRect(d);
         return `translate(${originRect.x + originRect.width - d.state.rect.width},${originRect.y + originRect.height - d.state.rect.height})`;
@@ -1334,7 +1359,7 @@
     }
     findElement(node) {
       let result;
-      this.g.selectAll(childSelector("g")).each(function walk(d) {
+      this.g.selectAll(childSelector(SELECTOR_NODE)).each(function walk(d) {
         if (d === node) {
           result = {
             data: d,
@@ -1421,7 +1446,7 @@
     destroy() {
       this.svg.on(".zoom", null);
       this.svg.html(null);
-      this.revokers.forEach((fn) => {
+      this._disposeList.forEach((fn) => {
         fn();
       });
     }
@@ -1436,6 +1461,7 @@
     }
   }
   exports.Markmap = Markmap;
+  exports.childSelector = childSelector;
   exports.defaultColorFn = defaultColorFn;
   exports.defaultOptions = defaultOptions;
   exports.deriveOptions = deriveOptions;