markmap-view 0.15.9-alpha.5 → 0.16.0

package/dist/browser/index.js

@@ -1549,18 +1549,26 @@
       ).scale(scale);
       return this.transition(this.svg).call(this.zoom.transform, initialZoom).end().catch(noop);
     }
-    /**
-     * Pan the content to make the provided node visible in the viewport.
-     */
-    async ensureView(node, padding) {
-      let itemData;
+    findElement(node) {
+      let result;
       this.g.selectAll(
         childSelector("g")
       ).each(function walk(d) {
         if (d.data === node) {
-          itemData = d;
+          result = {
+            data: d,
+            g: this
+          };
         }
       });
+      return result;
+    }
+    /**
+     * Pan the content to make the provided node visible in the viewport.
+     */
+    async ensureView(node, padding) {
+      var _a;
+      const itemData = (_a = this.findElement(node)) == null ? void 0 : _a.data;
       if (!itemData)
         return;
       const svgNode = this.svg.node();

package/dist/index.js

@@ -1,5 +1,5 @@
-import { Hook as st, getId as at, debounce as lt, addClass as ct, walkTree as T, childSelector as E, noop as M } from "markmap-common";
-import { loadCSS as Ee, loadJS as we } from "markmap-common";
+import { Hook as st, getId as at, debounce as lt, addClass as ct, walkTree as T, childSelector as C, noop as M } from "markmap-common";
+import { loadCSS as Ce, loadJS as we } from "markmap-common";
 import { scaleOrdinal as V, schemeCategory10 as ht, zoomTransform as A, select as dt, zoom as ut, linkHorizontal as pt, min as H, max as L, zoomIdentity as ft, minIndex as mt } from "d3";
 const K = typeof navigator < "u" && navigator.userAgent.includes("Macintosh"), gt = V(ht), P = {
   autoFit: !1,
@@ -77,7 +77,7 @@ const zt = {
 function I(e, t) {
   Array.isArray(t) || (t = [t]), t = t.filter(Boolean), t.length && e.append(...t);
 }
-function Ct(e, t, n) {
+function Et(e, t, n) {
   for (const i in t)
     if (!(i === "key" || i === "children" || i === "ref"))
       if (i === "dangerouslySetInnerHTML")
@@ -88,12 +88,12 @@ function Ct(e, t, n) {
       } else
         i.startsWith("on") ? e[i.toLowerCase()] = t[i] : wt(e, i, t[i], n.isSvg);
 }
-const Et = {
+const Ct = {
   className: "class",
   labelFor: "for"
 };
 function wt(e, t, n, i) {
-  if (t = Et[t] || t, n === !0)
+  if (t = Ct[t] || t, n === !0)
     e.setAttribute(t, "");
   else if (n === !1)
     e.removeAttribute(t);
@@ -139,7 +139,7 @@ function B(e, t = zt) {
     } = e;
     if (!t.isSvg && i === "svg" && (t = Object.assign({}, t, {
       isSvg: !0
-    })), t.isSvg ? n = document.createElementNS(xt, i) : n = document.createElement(i), Ct(n, o, t), o.children) {
+    })), t.isSvg ? n = document.createElementNS(xt, i) : n = document.createElement(i), Et(n, o, t), o.children) {
       let c = t;
       t.isSvg && i === "foreignObject" && (c = Object.assign({}, c, {
         isSvg: !1
@@ -488,21 +488,21 @@ function q(e) {
   }
   function c(s, l, p) {
     const h = (u, g) => {
-      const y = new s(u);
-      Object.assign(y, {
+      const x = new s(u);
+      Object.assign(x, {
         parent: g,
         depth: g === null ? 0 : g.depth + 1,
         height: 0,
         length: 1
       });
       const f = p(u) || [];
-      return y.children = f.length === 0 ? null : f.map((k) => h(k, y)), y.children && Object.assign(y, y.children.reduce(
-        (k, m) => ({
-          height: Math.max(k.height, m.height + 1),
-          length: k.length + m.length
+      return x.children = f.length === 0 ? null : f.map((y) => h(y, x)), x.children && Object.assign(x, x.children.reduce(
+        (y, m) => ({
+          height: Math.max(y.height, m.height + 1),
+          length: y.length + m.length
         }),
-        y
-      )), y;
+        x
+      )), x;
     };
     return h(l, null);
   }
@@ -522,8 +522,8 @@ function q(e) {
     },
     dump(s) {
       const l = n("nodeSize"), p = (h) => (u) => {
-        const g = h + "  ", y = h + "    ", { x: f, y: k } = u, m = l(u), x = u.children || [], v = x.length === 0 ? " " : `,${g}children: [${y}${x.map(p(y)).join(y)}${g}],${h}`;
-        return `{ size: [${m.join(", ")}],${g}x: ${f}, y: ${k}${v}},`;
+        const g = h + "  ", x = h + "    ", { x: f, y } = u, m = l(u), k = u.children || [], v = k.length === 0 ? " " : `,${g}children: [${x}${k.map(p(x)).join(x)}${g}],${h}`;
+        return `{ size: [${m.join(", ")}],${g}x: ${f}, y: ${y}${v}},`;
       };
       return p(`
 `)(s);
@@ -672,10 +672,10 @@ class et {
     document.body.append(l, p);
     const h = a ? `--markmap-max-width: ${a}px` : "";
     let u = 0, g = 0;
-    T(t, (f, k, m) => {
+    T(t, (f, y, m) => {
       var b, w, z;
-      g += 1, f.children = (b = f.children) == null ? void 0 : b.map((C) => ({ ...C })), n += 1;
-      const x = O(
+      g += 1, f.children = (b = f.children) == null ? void 0 : b.map((E) => ({ ...E })), n += 1;
+      const k = O(
         /* @__PURE__ */ j(
           "div",
           {
@@ -685,29 +685,29 @@ class et {
           }
         )
       );
-      l.append(x), f.state = {
+      l.append(k), f.state = {
         ...f.state,
         depth: g,
         id: n,
-        el: x.firstChild
+        el: k.firstChild
       }, f.state.path = [(w = m == null ? void 0 : m.state) == null ? void 0 : w.path, f.state.id].filter(Boolean).join("."), i(f);
       const v = ((z = f.payload) == null ? void 0 : z.fold) === 2;
-      v ? u += 1 : (u || c >= 0 && f.state.depth >= c) && (f.payload = { ...f.payload, fold: 1 }), k(), v && (u -= 1), g -= 1;
+      v ? u += 1 : (u || c >= 0 && f.state.depth >= c) && (f.payload = { ...f.payload, fold: 1 }), y(), v && (u -= 1), g -= 1;
     });
-    const y = Array.from(l.childNodes).map(
+    const x = Array.from(l.childNodes).map(
       (f) => f.firstChild
     );
-    this._checkImages(l), y.forEach((f) => {
-      var k;
-      (k = f.parentNode) == null || k.append(f.cloneNode(!0));
-    }), T(t, (f, k, m) => {
+    this._checkImages(l), x.forEach((f) => {
+      var y;
+      (y = f.parentNode) == null || y.append(f.cloneNode(!0));
+    }), T(t, (f, y, m) => {
       var b;
-      const x = f.state, v = x.el.getBoundingClientRect();
-      f.content = x.el.innerHTML, x.size = [
+      const k = f.state, v = k.el.getBoundingClientRect();
+      f.content = k.el.innerHTML, k.size = [
         Math.ceil(v.width) + 1,
         Math.max(Math.ceil(v.height), o)
-      ], x.key = [(b = m == null ? void 0 : m.state) == null ? void 0 : b.id, x.id].filter(Boolean).join(".") + // FIXME: find a way to check content hash
-      f.content, k();
+      ], k.key = [(b = m == null ? void 0 : m.state) == null ? void 0 : b.id, k.id].filter(Boolean).join(".") + // FIXME: find a way to check content hash
+      f.content, y();
     }), l.remove(), p.remove();
   }
   _checkImages(t) {
@@ -746,36 +746,36 @@ class et {
       return [S, d + (d ? i * 2 : 0) + n];
     }).spacing((r, d) => r.parent === d.parent ? o : o * 2), l = s.hierarchy(this.state.data);
     s(l);
-    const p = l.descendants().reverse(), h = l.links(), u = pt(), g = H(p, (r) => r.x - r.xSize / 2), y = L(p, (r) => r.x + r.xSize / 2), f = H(p, (r) => r.y), k = L(p, (r) => r.y + r.ySize - n);
+    const p = l.descendants().reverse(), h = l.links(), u = pt(), g = H(p, (r) => r.x - r.xSize / 2), x = L(p, (r) => r.x + r.xSize / 2), f = H(p, (r) => r.y), y = L(p, (r) => r.y + r.ySize - n);
     Object.assign(this.state, {
       minX: g,
-      maxX: y,
+      maxX: x,
       minY: f,
-      maxY: k
+      maxY: y
     }), a && this.fit();
-    const m = t && p.find((r) => r.data === t) || l, x = m.data.state.x0 ?? m.x, v = m.data.state.y0 ?? m.y, b = this.g.selectAll(
-      E("g")
+    const m = t && p.find((r) => r.data === t) || l, k = m.data.state.x0 ?? m.x, v = m.data.state.y0 ?? m.y, b = this.g.selectAll(
+      C("g")
     ).data(p, (r) => r.data.state.key), w = b.enter().append("g").attr("data-depth", (r) => r.data.state.depth).attr("data-path", (r) => r.data.state.path).attr(
       "transform",
-      (r) => `translate(${v + m.ySize - r.ySize},${x + m.xSize / 2 - r.xSize})`
+      (r) => `translate(${v + m.ySize - r.ySize},${k + m.xSize / 2 - r.xSize})`
     ), z = this.transition(b.exit());
     z.select("line").attr("x1", (r) => r.ySize - n).attr("x2", (r) => r.ySize - n), z.select("foreignObject").style("opacity", 0), z.attr(
       "transform",
       (r) => `translate(${m.y + m.ySize - r.ySize},${m.x + m.xSize / 2 - r.xSize})`
     ).remove();
-    const C = b.merge(w).attr(
+    const E = b.merge(w).attr(
       "class",
       (r) => {
         var d;
         return ["markmap-node", ((d = r.data.payload) == null ? void 0 : d.fold) && "markmap-fold"].filter(Boolean).join(" ");
       }
     );
-    this.transition(C).attr(
+    this.transition(E).attr(
       "transform",
       (r) => `translate(${r.y},${r.x - r.xSize / 2})`
     );
-    const nt = C.selectAll(
-      E("line")
+    const nt = E.selectAll(
+      C("line")
     ).data(
       (r) => [r],
       (r) => r.data.state.key
@@ -785,8 +785,8 @@ class et {
       (r) => r.remove()
     );
     this.transition(nt).attr("x1", -1).attr("x2", (r) => r.ySize - n + 2).attr("y1", (r) => r.xSize).attr("y2", (r) => r.xSize).attr("stroke", (r) => c(r.data)).attr("stroke-width", W);
-    const it = C.selectAll(
-      E("circle")
+    const it = E.selectAll(
+      C("circle")
     ).data(
       (r) => {
         var d;
@@ -805,8 +805,8 @@ class et {
         return (d = r.data.payload) != null && d.fold && r.data.children ? c(r.data) : "#fff";
       }
     );
-    const rt = C.selectAll(
-      E("foreignObject")
+    const rt = E.selectAll(
+      C("foreignObject")
     ).data(
       (r) => [r],
       (r) => r.data.state.key
@@ -826,12 +826,12 @@ class et {
     ).attr("height", (r) => r.xSize);
     this.transition(rt).style("opacity", 1);
     const ot = this.g.selectAll(
-      E("path")
+      C("path")
     ).data(h, (r) => r.target.data.state.key).join(
       (r) => {
         const d = [
           v + m.ySize - n,
-          x + m.xSize / 2
+          k + m.xSize / 2
         ];
         return r.insert("path", "g").attr("class", "markmap-link").attr("data-depth", (S) => S.target.data.state.depth).attr("data-path", (S) => S.target.data.state.path).attr("d", u({ source: d, target: d }));
       },
@@ -875,33 +875,41 @@ class et {
     ).scale(u);
     return this.transition(this.svg).call(this.zoom.transform, g).end().catch(M);
   }
+  findElement(t) {
+    let n;
+    return this.g.selectAll(
+      C("g")
+    ).each(function(o) {
+      o.data === t && (n = {
+        data: o,
+        g: this
+      });
+    }), n;
+  }
   /**
    * Pan the content to make the provided node visible in the viewport.
    */
   async ensureView(t, n) {
-    let i;
-    if (this.g.selectAll(
-      E("g")
-    ).each(function(v) {
-      v.data === t && (i = v);
-    }), !i)
+    var k;
+    const i = (k = this.findElement(t)) == null ? void 0 : k.data;
+    if (!i)
       return;
     const o = this.svg.node(), { spacingHorizontal: a } = this.options, c = o.getBoundingClientRect(), s = A(o), [l, p] = [
       i.y,
       i.y + i.ySize - a + 2
-    ].map((x) => x * s.k + s.x), [h, u] = [
+    ].map((v) => v * s.k + s.x), [h, u] = [
       i.x - i.xSize / 2,
       i.x + i.xSize / 2
-    ].map((x) => x * s.k + s.y), g = {
+    ].map((v) => v * s.k + s.y), g = {
       left: 0,
       right: 0,
       top: 0,
       bottom: 0,
       ...n
-    }, y = [g.left - l, c.width - g.right - p], f = [g.top - h, c.height - g.bottom - u], k = y[0] * y[1] > 0 ? Y(y, Math.abs) / s.k : 0, m = f[0] * f[1] > 0 ? Y(f, Math.abs) / s.k : 0;
-    if (k || m) {
-      const x = s.translate(k, m);
-      return this.transition(this.svg).call(this.zoom.transform, x).end().catch(M);
+    }, x = [g.left - l, c.width - g.right - p], f = [g.top - h, c.height - g.bottom - u], y = x[0] * x[1] > 0 ? Y(x, Math.abs) / s.k : 0, m = f[0] * f[1] > 0 ? Y(f, Math.abs) / s.k : 0;
+    if (y || m) {
+      const v = s.translate(y, m);
+      return this.transition(this.svg).call(this.zoom.transform, v).end().catch(M);
     }
   }
   /**
@@ -931,7 +939,7 @@ export {
   Se as deriveOptions,
   be as globalCSS,
   K as isMacintosh,
-  Ee as loadCSS,
+  Ce as loadCSS,
   we as loadJS,
   ye as refreshHook
 };

package/dist/types.d.ts

@@ -1,4 +1,5 @@
 import { INode } from 'markmap-common';
+import { FlextreeNode } from 'd3-flextree';
 export interface IMarkmapState {
     id: string;
     data?: INode;
@@ -18,3 +19,10 @@ export interface IMarkmapJSONOptions {
     zoom?: boolean;
     pan?: boolean;
 }
+export interface IPadding {
+    left: number;
+    right: number;
+    top: number;
+    bottom: number;
+}
+export type ID3SVGElement = d3.Selection<SVGElement, FlextreeNode<INode>, HTMLElement, FlextreeNode<INode>>;

package/dist/view.d.ts

@@ -1,15 +1,8 @@
 import type * as d3 from 'd3';
 import { FlextreeNode } from 'd3-flextree';
 import { Hook, IMarkmapOptions, INode, IPureNode } from 'markmap-common';
-import { IMarkmapState } from './types';
+import { IMarkmapState, IPadding, ID3SVGElement } from './types';
 export declare const globalCSS: string;
-interface IPadding {
-    left: number;
-    right: number;
-    top: number;
-    bottom: number;
-}
-type ID3SVGElement = d3.Selection<SVGElement, FlextreeNode<INode>, HTMLElement, FlextreeNode<INode>>;
 /**
  * A global hook to refresh all markmaps when called.
  */
@@ -42,6 +35,10 @@ export declare class Markmap {
      * Fit the content to the viewport.
      */
     fit(): Promise<void>;
+    findElement(node: INode): {
+        data: FlextreeNode<INode>;
+        g: SVGGElement;
+    } | undefined;
     /**
      * Pan the content to make the provided node visible in the viewport.
      */
@@ -53,4 +50,3 @@ export declare class Markmap {
     destroy(): void;
     static create(svg: string | SVGElement | ID3SVGElement, opts?: Partial<IMarkmapOptions>, data?: IPureNode | null): Markmap;
 }
-export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "markmap-view",
-  "version": "0.15.9-alpha.5+c64866f",
+  "version": "0.16.0",
   "description": "View markmaps in browser",
   "author": "Gerald <gera2ld@live.com>",
   "license": "MIT",
@@ -21,7 +21,8 @@
   "scripts": {
     "clean": "del-cli dist",
     "build:types": "tsc",
-    "build:js": "vite build && TARGET=es vite build --emptyOutDir=false"
+    "build:js": "vite build && TARGET=es vite build",
+    "build": "run-s clean build:*"
   },
   "bugs": {
     "url": "https://github.com/markmap/markmap/issues"
@@ -44,10 +45,10 @@
   },
   "devDependencies": {
     "@types/d3-flextree": "^2.1.1",
-    "markmap-common": "0.15.9-alpha.5+c64866f"
+    "markmap-common": "0.16.0"
   },
   "peerDependencies": {
     "markmap-common": "*"
   },
-  "gitHead": "c64866fb4873a99923be18ea70715aa49a6dabef"
+  "gitHead": "caf3f840ad39c240ba522bfea83c57de62c6cac4"
 }