markmap-view 0.18.3 → 0.18.4-alpha.4

package/dist/browser/index.js

@@ -1,342 +1,5 @@
 (function(exports, d32) {
   "use strict";
-  class Hook {
-    constructor() {
-      this.listeners = [];
-    }
-    tap(fn) {
-      this.listeners.push(fn);
-      return () => this.revoke(fn);
-    }
-    revoke(fn) {
-      const i = this.listeners.indexOf(fn);
-      if (i >= 0) this.listeners.splice(i, 1);
-    }
-    revokeAll() {
-      this.listeners.splice(0);
-    }
-    call(...args) {
-      for (const fn of this.listeners) {
-        fn(...args);
-      }
-    }
-  }
-  const uniqId = Math.random().toString(36).slice(2, 8);
-  let globalIndex = 0;
-  function getId() {
-    globalIndex += 1;
-    return `mm-${uniqId}-${globalIndex}`;
-  }
-  function noop() {
-  }
-  function walkTree(tree, callback) {
-    const walk = (item, parent) => callback(
-      item,
-      () => {
-        var _a;
-        return (_a = item.children) == null ? void 0 : _a.map((child) => walk(child, item));
-      },
-      parent
-    );
-    return walk(tree);
-  }
-  function addClass(className, ...rest) {
-    const classList = (className || "").split(" ").filter(Boolean);
-    rest.forEach((item) => {
-      if (item && classList.indexOf(item) < 0) classList.push(item);
-    });
-    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) => {
-      obj.resolve = resolve;
-      obj.reject = reject;
-    });
-    return obj;
-  }
-  function memoize(fn) {
-    const cache = {};
-    return function memoized(...args) {
-      const key = `${args[0]}`;
-      let data = cache[key];
-      if (!data) {
-        data = {
-          value: fn(...args)
-        };
-        cache[key] = data;
-      }
-      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;
-  const VTYPE_FUNCTION = 2;
-  const SVG_NS = "http://www.w3.org/2000/svg";
-  const XLINK_NS = "http://www.w3.org/1999/xlink";
-  const NS_ATTRS = {
-    show: XLINK_NS,
-    actuate: XLINK_NS,
-    href: XLINK_NS
-  };
-  const isLeaf = (c) => typeof c === "string" || typeof c === "number";
-  const isElement = (c) => (c == null ? void 0 : c.vtype) === VTYPE_ELEMENT;
-  const isRenderFunction = (c) => (c == null ? void 0 : c.vtype) === VTYPE_FUNCTION;
-  function h(type, props, ...children) {
-    props = Object.assign({}, props, {
-      children: children.length === 1 ? children[0] : children
-    });
-    return jsx(type, props);
-  }
-  function jsx(type, props) {
-    let vtype;
-    if (typeof type === "string") vtype = VTYPE_ELEMENT;
-    else if (typeof type === "function") vtype = VTYPE_FUNCTION;
-    else throw new Error("Invalid VNode type");
-    return {
-      vtype,
-      type,
-      props
-    };
-  }
-  function Fragment(props) {
-    return props.children;
-  }
-  const DEFAULT_ENV = {
-    isSvg: false
-  };
-  function insertDom(parent, nodes) {
-    if (!Array.isArray(nodes)) nodes = [nodes];
-    nodes = nodes.filter(Boolean);
-    if (nodes.length) parent.append(...nodes);
-  }
-  function mountAttributes(domElement, props, env) {
-    for (const key in props) {
-      if (key === "key" || key === "children" || key === "ref") continue;
-      if (key === "dangerouslySetInnerHTML") {
-        domElement.innerHTML = props[key].__html;
-      } else if (key === "innerHTML" || key === "textContent" || key === "innerText" || key === "value" && ["textarea", "select"].includes(domElement.tagName)) {
-        const value = props[key];
-        if (value != null) domElement[key] = value;
-      } else if (key.startsWith("on")) {
-        domElement[key.toLowerCase()] = props[key];
-      } else {
-        setDOMAttribute(domElement, key, props[key], env.isSvg);
-      }
-    }
-  }
-  const attrMap = {
-    className: "class",
-    labelFor: "for"
-  };
-  function setDOMAttribute(el, attr, value, isSVG) {
-    attr = attrMap[attr] || attr;
-    if (value === true) {
-      el.setAttribute(attr, "");
-    } else if (value === false) {
-      el.removeAttribute(attr);
-    } else {
-      const namespace = isSVG ? NS_ATTRS[attr] : void 0;
-      if (namespace !== void 0) {
-        el.setAttributeNS(namespace, attr, value);
-      } else {
-        el.setAttribute(attr, value);
-      }
-    }
-  }
-  function flatten(arr) {
-    return arr.reduce((prev, item) => prev.concat(item), []);
-  }
-  function mountChildren(children, env) {
-    return Array.isArray(children) ? flatten(children.map((child) => mountChildren(child, env))) : mount(children, env);
-  }
-  function mount(vnode, env = DEFAULT_ENV) {
-    if (vnode == null || typeof vnode === "boolean") {
-      return null;
-    }
-    if (vnode instanceof Node) {
-      return vnode;
-    }
-    if (isRenderFunction(vnode)) {
-      const {
-        type,
-        props
-      } = vnode;
-      if (type === Fragment) {
-        const node = document.createDocumentFragment();
-        if (props.children) {
-          const children = mountChildren(props.children, env);
-          insertDom(node, children);
-        }
-        return node;
-      }
-      const childVNode = type(props);
-      return mount(childVNode, env);
-    }
-    if (isLeaf(vnode)) {
-      return document.createTextNode(`${vnode}`);
-    }
-    if (isElement(vnode)) {
-      let node;
-      const {
-        type,
-        props
-      } = vnode;
-      if (!env.isSvg && type === "svg") {
-        env = Object.assign({}, env, {
-          isSvg: true
-        });
-      }
-      if (!env.isSvg) {
-        node = document.createElement(type);
-      } else {
-        node = document.createElementNS(SVG_NS, type);
-      }
-      mountAttributes(node, props, env);
-      if (props.children) {
-        let childEnv = env;
-        if (env.isSvg && type === "foreignObject") {
-          childEnv = Object.assign({}, childEnv, {
-            isSvg: false
-          });
-        }
-        const children = mountChildren(props.children, childEnv);
-        if (children != null) insertDom(node, children);
-      }
-      const {
-        ref
-      } = props;
-      if (typeof ref === "function") ref(node);
-      return node;
-    }
-    throw new Error("mount: Invalid Vnode!");
-  }
-  function mountDom(vnode) {
-    return mount(vnode);
-  }
-  function hm(...args) {
-    return mountDom(h(...args));
-  }
-  const memoizedPreloadJS = memoize((url) => {
-    document.head.append(
-      hm("link", {
-        rel: "preload",
-        as: "script",
-        href: url
-      })
-    );
-  });
-  const jsCache = {};
-  const cssCache = {};
-  async function loadJSItem(item, context) {
-    var _a;
-    const src = item.type === "script" && ((_a = item.data) == null ? void 0 : _a.src) || "";
-    item.loaded || (item.loaded = jsCache[src]);
-    if (!item.loaded) {
-      const deferred = defer();
-      item.loaded = deferred.promise;
-      if (item.type === "script") {
-        document.head.append(
-          hm("script", {
-            ...item.data,
-            onLoad: () => deferred.resolve(),
-            onError: deferred.reject
-          })
-        );
-        if (!src) {
-          deferred.resolve();
-        } else {
-          jsCache[src] = item.loaded;
-        }
-      }
-      if (item.type === "iife") {
-        const { fn, getParams } = item.data;
-        fn(...(getParams == null ? void 0 : getParams(context)) || []);
-        deferred.resolve();
-      }
-    }
-    await item.loaded;
-  }
-  async function loadCSSItem(item) {
-    const url = item.type === "stylesheet" && item.data.href || "";
-    item.loaded || (item.loaded = cssCache[url]);
-    if (!item.loaded) {
-      const deferred = defer();
-      item.loaded = deferred.promise;
-      if (url) cssCache[url] = item.loaded;
-      if (item.type === "style") {
-        document.head.append(
-          hm("style", {
-            textContent: item.data
-          })
-        );
-        deferred.resolve();
-      } else if (url) {
-        document.head.append(
-          hm("link", {
-            rel: "stylesheet",
-            ...item.data
-          })
-        );
-        fetch(url).then((res) => {
-          if (res.ok) return res.text();
-          throw res;
-        }).then(() => deferred.resolve(), deferred.reject);
-      }
-    }
-    await item.loaded;
-  }
-  async function loadJS(items, context) {
-    items.forEach((item) => {
-      var _a;
-      if (item.type === "script" && ((_a = item.data) == null ? void 0 : _a.src)) {
-        memoizedPreloadJS(item.data.src);
-      }
-    });
-    context = {
-      getMarkmap: () => window.markmap,
-      ...context
-    };
-    for (const item of items) {
-      await loadJSItem(item, context);
-    }
-  }
-  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 = {
@@ -530,14 +193,14 @@
     return links;
   }
   function hierarchy(data, children) {
-    var root = new Node$1(data), valued = +data.value && (root.value = data.value), node, nodes = [root], child, childs, i, n;
+    var root = new Node(data), valued = +data.value && (root.value = data.value), node, nodes = [root], child, childs, i, n;
     if (children == null) children = defaultChildren;
     while (node = nodes.pop()) {
       if (valued) node.value = +node.data.value;
       if ((childs = children(node.data)) && (n = childs.length)) {
         node.children = new Array(n);
         for (i = n - 1; i >= 0; --i) {
-          nodes.push(child = node.children[i] = new Node$1(childs[i]));
+          nodes.push(child = node.children[i] = new Node(childs[i]));
           child.parent = node;
           child.depth = node.depth + 1;
         }
@@ -560,13 +223,13 @@
       node.height = height;
     while ((node = node.parent) && node.height < ++height);
   }
-  function Node$1(data) {
+  function Node(data) {
     this.data = data;
     this.depth = this.height = 0;
     this.parent = null;
   }
-  Node$1.prototype = hierarchy.prototype = {
-    constructor: Node$1,
+  Node.prototype = hierarchy.prototype = {
+    constructor: Node,
     count: node_count,
     each: node_each,
     eachAfter: node_eachAfter,
@@ -942,6 +605,86 @@
       next: lastLows
     };
   };
+  class Hook {
+    constructor() {
+      this.listeners = [];
+    }
+    tap(fn) {
+      this.listeners.push(fn);
+      return () => this.revoke(fn);
+    }
+    revoke(fn) {
+      const i = this.listeners.indexOf(fn);
+      if (i >= 0) this.listeners.splice(i, 1);
+    }
+    revokeAll() {
+      this.listeners.splice(0);
+    }
+    call(...args) {
+      for (const fn of this.listeners) {
+        fn(...args);
+      }
+    }
+  }
+  const uniqId = Math.random().toString(36).slice(2, 8);
+  let globalIndex = 0;
+  function getId() {
+    globalIndex += 1;
+    return `mm-${uniqId}-${globalIndex}`;
+  }
+  function noop() {
+  }
+  function walkTree(tree, callback) {
+    const walk = (item, parent) => callback(
+      item,
+      () => {
+        var _a;
+        return (_a = item.children) == null ? void 0 : _a.map((child) => walk(child, item));
+      },
+      parent
+    );
+    return walk(tree);
+  }
+  function addClass(className, ...rest) {
+    const classList = (className || "").split(" ").filter(Boolean);
+    rest.forEach((item) => {
+      if (item && classList.indexOf(item) < 0) classList.push(item);
+    });
+    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 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;
+    };
+  }
   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 globalCSS = css;
   const linkShape = d32.linkHorizontal();
@@ -1001,7 +744,8 @@
       this.revokers.push(
         refreshHook.tap(() => {
           this.setData();
-        })
+        }),
+        () => this.observer.disconnect()
       );
     }
     getStyleContent() {
@@ -1144,18 +888,43 @@
     }
     async renderData(originData) {
       const { paddingX, autoFit, color, maxWidth } = this.options;
-      if (!this.state.data) return;
+      const rootNode = this.state.data;
+      if (!rootNode) return;
+      const nodeMap = {};
+      const parentMap = {};
       const nodes = [];
-      walkTree(this.state.data, (item, next) => {
+      walkTree(rootNode, (item, next, parent) => {
         var _a;
         if (!((_a = item.payload) == null ? void 0 : _a.fold)) next();
+        nodeMap[item.state.id] = item;
+        if (parent) parentMap[item.state.id] = parent.state.id;
         nodes.push(item);
       });
-      const origin = originData || this.state.data;
-      const originRect = origin.state.rect;
-      const mmG = this.g.selectAll(childSelector("g")).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);
-      const mmGExit = mmG.exit();
+      const originMap = {};
+      const sourceRectMap = {};
+      const setOriginNode = (originNode) => {
+        if (!originNode || originMap[originNode.state.id]) return;
+        walkTree(originNode, (item, next) => {
+          originMap[item.state.id] = originNode.state.id;
+          next();
+        });
+      };
+      const getOriginSourceRect = (node) => {
+        const rect = sourceRectMap[originMap[node.state.id]];
+        return rect || rootNode.state.rect;
+      };
+      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) => {
+        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) => {
+        setOriginNode(nodeMap[parentMap[d.state.id]]);
+      });
+      const mmGExit = mmG.exit().each((d) => {
+        setOriginNode(nodeMap[parentMap[d.state.id]]);
+      });
       const mmGMerge = mmG.merge(mmGEnter).attr(
         "class",
         (d) => {
@@ -1213,11 +982,14 @@
       );
       const mmPath = this.g.selectAll(childSelector("path")).data(links, (d) => d.target.state.key);
       const mmPathExit = mmPath.exit();
-      const pathOrigin = [
-        originRect.x + originRect.width,
-        originRect.y + originRect.height
-      ];
-      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", linkShape({ source: pathOrigin, target: pathOrigin })).attr("stroke-width", 0);
+      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);
+        const pathOrigin = [
+          originRect.x + originRect.width,
+          originRect.y + originRect.height
+        ];
+        return linkShape({ source: pathOrigin, target: pathOrigin });
+      }).attr("stroke-width", 0);
       const mmPathMerge = mmPathEnter.merge(mmPath);
       this.svg.style(
         "--markmap-max-width",
@@ -1225,12 +997,12 @@
       );
       await new Promise(requestAnimationFrame);
       this._relayout();
-      const targetRect = origin.state.rect;
-      mmGEnter.attr(
-        "transform",
-        (d) => `translate(${originRect.x + originRect.width - d.state.rect.width},${originRect.y + originRect.height - d.state.rect.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})`;
+      });
       this.transition(mmGExit).attr("transform", (d) => {
+        const targetRect = getOriginTargetRect(d);
         const targetX = targetRect.x + targetRect.width - d.state.rect.width;
         const targetY = targetRect.y + targetRect.height - d.state.rect.height;
         return `translate(${targetX},${targetY})`;
@@ -1255,11 +1027,14 @@
       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);
       this.transition(mmFoMerge).style("opacity", 1);
-      const pathTarget = [
-        targetRect.x + targetRect.width,
-        targetRect.y + targetRect.height
-      ];
-      this.transition(mmPathExit).attr("d", linkShape({ source: pathTarget, target: pathTarget })).attr("stroke-width", 0).remove();
+      this.transition(mmPathExit).attr("d", (d) => {
+        const targetRect = getOriginTargetRect(d.target);
+        const pathTarget = [
+          targetRect.x + targetRect.width,
+          targetRect.y + targetRect.height
+        ];
+        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) => {
         const origSource = d.source;
         const origTarget = d.target;
@@ -1409,8 +1184,6 @@
   exports.deriveOptions = deriveOptions;
   exports.globalCSS = globalCSS;
   exports.isMacintosh = isMacintosh;
-  exports.loadCSS = loadCSS;
-  exports.loadJS = loadJS;
   exports.refreshHook = refreshHook;
   exports.simpleHash = simpleHash;
   Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });

package/dist/index.d.ts

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