markmap-view 0.18.4-alpha.4 → 0.18.5-alpha.6

package/dist/browser/index.js

@@ -1,5 +1,330 @@
 (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 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 = {
@@ -76,6 +401,18 @@
     }
     return (hash >>> 0).toString(36);
   }
+  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 count(node) {
     var sum = 0, children = node.children, i = children && children.length;
     if (!i) sum = 1;
@@ -193,14 +530,14 @@
     return links;
   }
   function hierarchy(data, children) {
-    var root = new Node(data), valued = +data.value && (root.value = data.value), node, nodes = [root], child, childs, i, n;
+    var root = new Node$1(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(childs[i]));
+          nodes.push(child = node.children[i] = new Node$1(childs[i]));
           child.parent = node;
           child.depth = node.depth + 1;
         }
@@ -223,13 +560,13 @@
       node.height = height;
     while ((node = node.parent) && node.height < ++height);
   }
-  function Node(data) {
+  function Node$1(data) {
     this.data = data;
     this.depth = this.height = 0;
     this.parent = null;
   }
-  Node.prototype = hierarchy.prototype = {
-    constructor: Node,
+  Node$1.prototype = hierarchy.prototype = {
+    constructor: Node$1,
     count: node_count,
     each: node_each,
     eachAfter: node_eachAfter,
@@ -605,86 +942,6 @@
       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();
@@ -1179,11 +1436,14 @@
     }
   }
   exports.Markmap = Markmap;
+  exports.childSelector = childSelector;
   exports.defaultColorFn = defaultColorFn;
   exports.defaultOptions = defaultOptions;
   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,3 +1,4 @@
+export { loadJS, loadCSS } from 'markmap-common';
 export * from './types';
 export * from './constants';
 export * from './util';