markmap-view 0.15.0-alpha.0 → 0.15.3-alpha.1

package/dist/browser/index.js

@@ -1,21 +1,70 @@
-/*! markmap-view v0.15.0-alpha.0 | MIT License */
+/*! markmap-view v0.15.3-alpha.1+fb5e189 | MIT License */
 (function (exports, d3) {
 'use strict';
 
-function _interopNamespaceDefault(e) {
-var n = Object.create(null);
-if (e) {
-for (var k in e) {
-n[k] = e[k];
-}
+/*! markmap-common v0.15.3-alpha.1+fb5e189 | MIT License */
+function _extends$1() {
+  _extends$1 = Object.assign ? Object.assign.bind() : function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+    return target;
+  };
+  return _extends$1.apply(this, arguments);
 }
-n.default = e;
-return Object.freeze(n);
+const testPath = "npm2url/dist/index.cjs";
+const defaultProviders = {
+  jsdelivr: path => `https://cdn.jsdelivr.net/npm/${path}`,
+  unpkg: path => `https://unpkg.com/${path}`
+};
+class UrlBuilder {
+  constructor() {
+    this.providers = _extends$1({}, defaultProviders);
+    this.provider = "jsdelivr";
+  }
+  getFastestProvider(timeout = 5e3, path = testPath) {
+    return new Promise((resolve, reject) => {
+      Promise.all(Object.entries(this.providers).map(async ([name, factory]) => {
+        try {
+          const res = await fetch(factory(path));
+          if (!res.ok) {
+            throw res;
+          }
+          await res.text();
+          resolve(name);
+        } catch (_unused) {}
+      })).then(() => reject(new Error("All providers failed")));
+      setTimeout(reject, timeout, new Error("Timed out"));
+    });
+  }
+  async findFastestProvider(timeout) {
+    this.provider = await this.getFastestProvider(timeout);
+    return this.provider;
+  }
+  setProvider(name, factory) {
+    if (factory) {
+      this.providers[name] = factory;
+    } else {
+      delete this.providers[name];
+    }
+  }
+  getFullUrl(path, provider = this.provider) {
+    if (path.includes("://")) {
+      return path;
+    }
+    const factory = this.providers[provider];
+    if (!factory) {
+      throw new Error(`Provider ${provider} not found`);
+    }
+    return factory(path);
+  }
 }
-
-var d3__namespace = /*#__PURE__*/_interopNamespaceDefault(d3);
-
-/*! markmap-common v0.15.0-alpha.0 | MIT License */
+new UrlBuilder();
 class Hook {
   constructor() {
     this.listeners = [];
@@ -37,20 +86,6 @@ class Hook {
     }
   }
 }
-function _extends$1() {
-  _extends$1 = Object.assign ? Object.assign.bind() : function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-    return target;
-  };
-  return _extends$1.apply(this, arguments);
-}
 const uniqId = Math.random().toString(36).slice(2, 8);
 let globalIndex = 0;
 function getId() {
@@ -60,10 +95,10 @@ function getId() {
 function noop() {
   // noop
 }
-function walkTree(tree, callback, key = 'children') {
+function walkTree(tree, callback) {
   const walk = (item, parent) => callback(item, () => {
-    var _item$key;
-    (_item$key = item[key]) == null ? void 0 : _item$key.forEach(child => {
+    var _item$children;
+    (_item$children = item.children) == null ? void 0 : _item$children.forEach(child => {
       walk(child, item);
     });
   }, parent);
@@ -102,41 +137,189 @@ function memoize(fn) {
     return data.value;
   };
 }
-function createElement(tagName, props, attrs) {
-  const el = document.createElement(tagName);
-  if (props) {
-    Object.entries(props).forEach(([key, value]) => {
-      el[key] = value;
-    });
+
+/*! @gera2ld/jsx-dom v2.2.2 | ISC License */
+const VTYPE_ELEMENT$1 = 1;
+const VTYPE_FUNCTION$1 = 2;
+const SVG_NS$1 = 'http://www.w3.org/2000/svg';
+const XLINK_NS$1 = 'http://www.w3.org/1999/xlink';
+const NS_ATTRS$1 = {
+  show: XLINK_NS$1,
+  actuate: XLINK_NS$1,
+  href: XLINK_NS$1
+};
+const isLeaf$1 = c => typeof c === 'string' || typeof c === 'number';
+const isElement$1 = c => (c == null ? void 0 : c.vtype) === VTYPE_ELEMENT$1;
+const isRenderFunction$1 = c => (c == null ? void 0 : c.vtype) === VTYPE_FUNCTION$1;
+function h(type, props, ...children) {
+  props = Object.assign({}, props, {
+    children: children.length === 1 ? children[0] : children
+  });
+  return jsx$1(type, props);
+}
+function jsx$1(type, props) {
+  let vtype;
+  if (typeof type === 'string') vtype = VTYPE_ELEMENT$1;else if (typeof type === 'function') vtype = VTYPE_FUNCTION$1;else throw new Error('Invalid VNode type');
+  return {
+    vtype,
+    type,
+    props
+  };
+}
+function Fragment$1(props) {
+  return props.children;
+}
+const DEFAULT_ENV$1 = {
+  isSvg: false
+};
+function insertDom$1(parent, nodes) {
+  if (!Array.isArray(nodes)) nodes = [nodes];
+  nodes = nodes.filter(Boolean);
+  if (nodes.length) parent.append(...nodes);
+}
+function mountAttributes$1(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$1(domElement, key, props[key], env.isSvg);
+    }
   }
-  if (attrs) {
-    Object.entries(attrs).forEach(([key, value]) => {
-      el.setAttribute(key, value);
-    });
+}
+const attrMap$1 = {
+  className: 'class',
+  labelFor: 'for'
+};
+function setDOMAttribute$1(el, attr, value, isSVG) {
+  attr = attrMap$1[attr] || attr;
+  if (value === true) {
+    el.setAttribute(attr, '');
+  } else if (value === false) {
+    el.removeAttribute(attr);
+  } else {
+    const namespace = isSVG ? NS_ATTRS$1[attr] : undefined;
+    if (namespace !== undefined) {
+      el.setAttributeNS(namespace, attr, value);
+    } else {
+      el.setAttribute(attr, value);
+    }
   }
-  return el;
+}
+function flatten$1(arr) {
+  return arr.reduce((prev, item) => prev.concat(item), []);
+}
+function mountChildren$1(children, env) {
+  return Array.isArray(children) ? flatten$1(children.map(child => mountChildren$1(child, env))) : mount$1(children, env);
+}
+function mount$1(vnode, env = DEFAULT_ENV$1) {
+  if (vnode == null || typeof vnode === 'boolean') {
+    return null;
+  }
+  if (vnode instanceof Node) {
+    return vnode;
+  }
+  if (isRenderFunction$1(vnode)) {
+    const {
+      type,
+      props
+    } = vnode;
+    if (type === Fragment$1) {
+      const node = document.createDocumentFragment();
+      if (props.children) {
+        const children = mountChildren$1(props.children, env);
+        insertDom$1(node, children);
+      }
+      return node;
+    }
+    const childVNode = type(props);
+    return mount$1(childVNode, env);
+  }
+  if (isLeaf$1(vnode)) {
+    return document.createTextNode(`${vnode}`);
+  }
+  if (isElement$1(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$1, type);
+    }
+    mountAttributes$1(node, props, env);
+    if (props.children) {
+      let childEnv = env;
+      if (env.isSvg && type === 'foreignObject') {
+        childEnv = Object.assign({}, childEnv, {
+          isSvg: false
+        });
+      }
+      const children = mountChildren$1(props.children, childEnv);
+      if (children != null) insertDom$1(node, children);
+    }
+    const {
+      ref
+    } = props;
+    if (typeof ref === 'function') ref(node);
+    return node;
+  }
+  throw new Error('mount: Invalid Vnode!');
+}
+
+/**
+ * Mount vdom as real DOM nodes.
+ */
+function mountDom$1(vnode) {
+  return mount$1(vnode);
+}
+
+/**
+ * Render and mount without returning VirtualDOM, useful when you don't need SVG support.
+ */
+function hm(...args) {
+  return mountDom$1(h(...args));
 }
 const memoizedPreloadJS = memoize(url => {
-  document.head.append(createElement('link', {
+  document.head.append(hm('link', {
     rel: 'preload',
     as: 'script',
     href: url
   }));
 });
+const jsCache = {};
+const cssCache = {};
 async function loadJSItem(item, context) {
+  var _item$data;
+  const src = item.type === 'script' && ((_item$data = item.data) == null ? void 0 : _item$data.src) || '';
+  item.loaded || (item.loaded = jsCache[src]);
   if (!item.loaded) {
     if (item.type === 'script') {
       item.loaded = new Promise((resolve, reject) => {
-        var _item$data;
-        document.head.append(createElement('script', _extends$1({}, item.data, {
-          onload: resolve,
-          onerror: reject
+        document.head.append(hm('script', _extends$1({}, item.data, {
+          onLoad: resolve,
+          onError: reject
         })));
-        // Run inline script synchronously
-        if (!((_item$data = item.data) != null && _item$data.src)) resolve(undefined);
+        if (!src) {
+          // Run inline script synchronously
+          resolve(undefined);
+        }
       }).then(() => {
         item.loaded = true;
       });
+      if (src) jsCache[src] = item.loaded;
     }
     if (item.type === 'iife') {
       const {
@@ -150,24 +333,28 @@ async function loadJSItem(item, context) {
   await item.loaded;
 }
 function loadCSSItem(item) {
+  const url = item.type === 'stylesheet' && item.data.href || '';
+  item.loaded || (item.loaded = cssCache[url]);
   if (item.loaded) return;
   item.loaded = true;
+  if (url) cssCache[url] = true;
   if (item.type === 'style') {
-    document.head.append(createElement('style', {
+    document.head.append(hm('style', {
       textContent: item.data
     }));
   } else if (item.type === 'stylesheet') {
-    document.head.append(createElement('link', _extends$1({
+    document.head.append(hm('link', _extends$1({
       rel: 'stylesheet'
     }, item.data)));
   }
 }
 async function loadJS(items, context) {
-  const needPreload = items.filter(item => {
+  items.forEach(item => {
     var _item$data2;
-    return item.type === 'script' && ((_item$data2 = item.data) == null ? void 0 : _item$data2.src);
+    if (item.type === 'script' && (_item$data2 = item.data) != null && _item$data2.src) {
+      memoizedPreloadJS(item.data.src);
+    }
   });
-  if (needPreload.length > 1) needPreload.forEach(item => memoizedPreloadJS(item.data.src));
   context = _extends$1({
     getMarkmap: () => window.markmap
   }, context);
@@ -406,8 +593,87 @@ Node$1.prototype = hierarchy.prototype = {
   copy: node_copy
 };
 
-var version = "2.1.1";
+var name = "d3-flextree";
+var version$1 = "2.1.2";
+var main = "build/d3-flextree.js";
+var module = "index";
+var author = {
+	name: "Chris Maloney",
+	url: "http://chrismaloney.org"
+};
+var description = "Flexible tree layout algorithm that allows for variable node sizes.";
+var keywords = [
+	"d3",
+	"d3-module",
+	"layout",
+	"tree",
+	"hierarchy",
+	"d3-hierarchy",
+	"plugin",
+	"d3-plugin",
+	"infovis",
+	"visualization",
+	"2d"
+];
+var homepage = "https://github.com/klortho/d3-flextree";
+var license = "WTFPL";
+var repository = {
+	type: "git",
+	url: "https://github.com/klortho/d3-flextree.git"
+};
+var scripts = {
+	clean: "rm -rf build demo test",
+	"build:demo": "rollup -c --environment BUILD:demo",
+	"build:dev": "rollup -c --environment BUILD:dev",
+	"build:prod": "rollup -c --environment BUILD:prod",
+	"build:test": "rollup -c --environment BUILD:test",
+	build: "rollup -c",
+	lint: "eslint index.js src",
+	"test:main": "node test/bundle.js",
+	"test:browser": "node test/browser-tests.js",
+	test: "npm-run-all test:*",
+	prepare: "npm-run-all clean build lint test"
+};
+var dependencies = {
+	"d3-hierarchy": "^1.1.5"
+};
+var devDependencies = {
+	"babel-plugin-external-helpers": "^6.22.0",
+	"babel-preset-es2015-rollup": "^3.0.0",
+	d3: "^4.13.0",
+	"d3-selection-multi": "^1.0.1",
+	eslint: "^4.19.1",
+	jsdom: "^11.6.2",
+	"npm-run-all": "^4.1.2",
+	rollup: "^0.55.3",
+	"rollup-plugin-babel": "^2.7.1",
+	"rollup-plugin-commonjs": "^8.0.2",
+	"rollup-plugin-copy": "^0.2.3",
+	"rollup-plugin-json": "^2.3.0",
+	"rollup-plugin-node-resolve": "^3.0.2",
+	"rollup-plugin-uglify": "^3.0.0",
+	"uglify-es": "^3.3.9"
+};
+var packageInfo = {
+	name: name,
+	version: version$1,
+	main: main,
+	module: module,
+	"jsnext:main": "index",
+	author: author,
+	description: description,
+	keywords: keywords,
+	homepage: homepage,
+	license: license,
+	repository: repository,
+	scripts: scripts,
+	dependencies: dependencies,
+	devDependencies: devDependencies
+};
 
+const {
+  version
+} = packageInfo;
 const defaults = Object.freeze({
   children: data => data.children,
   nodeSize: node => node.data.size,
@@ -781,60 +1047,47 @@ const updateLows = (lowY, index, lastLows) => {
   };
 };
 
-/*! @gera2ld/jsx-dom v2.1.1 | ISC License */
-var VTYPE_ELEMENT = 1;
-var VTYPE_FUNCTION = 2;
-var MOUNT_SINGLE = 1;
-var MOUNT_ARRAY = 4;
-var SVG_NS = 'http://www.w3.org/2000/svg';
-var XLINK_NS = 'http://www.w3.org/1999/xlink';
-var NS_ATTRS = {
+/*! @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
 };
-var isLeaf = function isLeaf(c) {
-  return typeof c === 'string' || typeof c === 'number';
-};
-var isElement = function isElement(c) {
-  return (c == null ? void 0 : c.vtype) === VTYPE_ELEMENT;
-};
-var isRenderFunction = function isRenderFunction(c) {
-  return (c == null ? void 0 : c.vtype) === VTYPE_FUNCTION;
-};
+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 jsx(type, props) {
-  var vtype;
+  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: vtype,
-    type: type,
-    props: props
+    vtype,
+    type,
+    props
   };
 }
 function Fragment(props) {
   return props.children;
 }
-var DEFAULT_ENV = {
+const DEFAULT_ENV = {
   isSvg: false
 };
-function insertDom(parent, ref) {
-  if (ref.type === MOUNT_SINGLE) {
-    if (ref.node != null) parent.append(ref.node);
-  } else if (ref.type === MOUNT_ARRAY) {
-    ref.children.forEach(function (ch) {
-      insertDom(parent, ch);
-    });
-  } else {
-    throw new Error("Unkown ref type " + JSON.stringify(ref));
-  }
+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 (var key in props) {
+  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') {
-      domElement[key] = props[key];
+    } 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 {
@@ -842,7 +1095,7 @@ function mountAttributes(domElement, props, env) {
     }
   }
 }
-var attrMap = {
+const attrMap = {
   className: 'class',
   labelFor: 'for'
 };
@@ -853,7 +1106,7 @@ function setDOMAttribute(el, attr, value, isSVG) {
   } else if (value === false) {
     el.removeAttribute(attr);
   } else {
-    var namespace = isSVG ? NS_ATTRS[attr] : undefined;
+    const namespace = isSVG ? NS_ATTRS[attr] : undefined;
     if (namespace !== undefined) {
       el.setAttributeNS(namespace, attr, value);
     } else {
@@ -861,116 +1114,82 @@ function setDOMAttribute(el, attr, value, isSVG) {
     }
   }
 }
-function mount(vnode, env) {
-  if (env === void 0) {
-    env = DEFAULT_ENV;
-  }
+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 {
-      type: MOUNT_SINGLE,
-      node: null
-    };
+    return null;
   }
   if (vnode instanceof Node) {
-    return {
-      type: MOUNT_SINGLE,
-      node: vnode
-    };
+    return vnode;
   }
   if (isRenderFunction(vnode)) {
-    var _ref = vnode,
-      type = _ref.type,
-      props = _ref.props;
+    const {
+      type,
+      props
+    } = vnode;
     if (type === Fragment) {
-      var node = document.createDocumentFragment();
+      const node = document.createDocumentFragment();
       if (props.children) {
-        var childrenRef = mount(props.children, env);
-        insertDom(node, childrenRef);
+        const children = mountChildren(props.children, env);
+        insertDom(node, children);
       }
-      return {
-        type: MOUNT_SINGLE,
-        node: node
-      };
+      return node;
     }
-    var childVNode = type(props);
+    const childVNode = type(props);
     return mount(childVNode, env);
   }
   if (isLeaf(vnode)) {
-    return {
-      type: MOUNT_SINGLE,
-      node: document.createTextNode("" + vnode)
-    };
+    return document.createTextNode(`${vnode}`);
   }
   if (isElement(vnode)) {
-    var _node;
-    var _ref2 = vnode,
-      _type = _ref2.type,
-      _props = _ref2.props;
-    if (!env.isSvg && _type === 'svg') {
+    let node;
+    const {
+      type,
+      props
+    } = vnode;
+    if (!env.isSvg && type === 'svg') {
       env = Object.assign({}, env, {
         isSvg: true
       });
     }
     if (!env.isSvg) {
-      _node = document.createElement(_type);
+      node = document.createElement(type);
     } else {
-      _node = document.createElementNS(SVG_NS, _type);
+      node = document.createElementNS(SVG_NS, type);
     }
-    mountAttributes(_node, _props, env);
-    var _childrenRef;
-    if (_props.children) {
-      var childEnv = env;
-      if (env.isSvg && _type === 'foreignObject') {
+    mountAttributes(node, props, env);
+    if (props.children) {
+      let childEnv = env;
+      if (env.isSvg && type === 'foreignObject') {
         childEnv = Object.assign({}, childEnv, {
           isSvg: false
         });
       }
-      _childrenRef = mount(_props.children, childEnv);
+      const children = mountChildren(props.children, childEnv);
+      if (children != null) insertDom(node, children);
     }
-    if (_childrenRef != null) insertDom(_node, _childrenRef);
-    var ref = _props.ref;
-    if (typeof ref === 'function') ref(_node);
-    return {
-      type: MOUNT_SINGLE,
-      node: _node
-    };
-  }
-  if (Array.isArray(vnode)) {
-    return {
-      type: MOUNT_ARRAY,
-      children: vnode.map(function (child) {
-        return mount(child, env);
-      })
-    };
+    const {
+      ref
+    } = props;
+    if (typeof ref === 'function') ref(node);
+    return node;
   }
   throw new Error('mount: Invalid Vnode!');
 }
-function flattenWithoutNull(array) {
-  var result = [];
-  for (var i = 0; i < array.length; i += 1) {
-    var item = array[i];
-    if (Array.isArray(item)) result = result.concat(flattenWithoutNull(item));else if (item != null) result.push(item);
-  }
-  return result;
-}
-function asDom(result) {
-  if (result.type === MOUNT_SINGLE) {
-    return result.node;
-  }
-  return result.children.map(asDom);
-}
+
 /**
  * Mount vdom as real DOM nodes.
  */
-
 function mountDom(vnode) {
-  if (Array.isArray(vnode)) {
-    return flattenWithoutNull(vnode.map(mountDom));
-  }
-  return asDom(mount(vnode));
+  return mount(vnode);
 }
 
-var css_248z$1 = ".markmap{font:300 16px/20px sans-serif}.markmap-link{fill:none}.markmap-node>circle{cursor:pointer}.markmap-foreign{display:inline-block}.markmap-foreign a{color:#0097e6}.markmap-foreign a:hover{color:#00a8ff}.markmap-foreign code{background-color:#f0f0f0;border-radius:2px;color:#555;font-size:calc(1em - 2px)}.markmap-foreign :not(pre)>code{padding:.2em .4em}.markmap-foreign del{text-decoration:line-through}.markmap-foreign em{font-style:italic}.markmap-foreign strong{font-weight:700}.markmap-foreign mark{background:#ffeaa7}.markmap-foreign pre,.markmap-foreign pre[class*=language-]{margin:0;padding:.2em .4em}";
+var css_248z$1 = ".markmap{font:300 16px/20px sans-serif}.markmap-link{fill:none}.markmap-node>circle{cursor:pointer}.markmap-foreign{display:inline-block}.markmap-foreign a{color:#0097e6}.markmap-foreign a:hover{color:#00a8ff}.markmap-foreign code{background-color:#f0f0f0;border-radius:2px;color:#555;font-size:calc(1em - 2px);padding:.25em}.markmap-foreign pre{margin:0}.markmap-foreign pre>code{display:block}.markmap-foreign del{text-decoration:line-through}.markmap-foreign em{font-style:italic}.markmap-foreign strong{font-weight:700}.markmap-foreign mark{background:#ffeaa7}";
 
 var css_248z = ".markmap-container{height:0;left:-100px;overflow:hidden;position:absolute;top:-100px;width:0}.markmap-container>.markmap-foreign{display:inline-block}.markmap-container>.markmap-foreign>div:last-child{white-space:nowrap}";
 
@@ -979,15 +1198,8 @@ function linkWidth(nodeData) {
   const data = nodeData.data;
   return Math.max(4 - 2 * data.depth, 1.5);
 }
-function adjustSpacing(tree, spacing) {
-  walkTree(tree, (d, next) => {
-    d.ySizeInner = d.ySize - spacing;
-    d.y += spacing;
-    next();
-  }, 'children');
-}
 function minBy(numbers, by) {
-  const index = d3__namespace.minIndex(numbers, by);
+  const index = d3.minIndex(numbers, by);
   return numbers[index];
 }
 function stopPropagation(e) {
@@ -1003,18 +1215,33 @@ function createViewHooks() {
  * A global hook to refresh all markmaps when called.
  */
 const refreshHook = new Hook();
-const defaultColorFn = d3__namespace.scaleOrdinal(d3__namespace.schemeCategory10);
+const defaultColorFn = d3.scaleOrdinal(d3.schemeCategory10);
 const isMacintosh = typeof navigator !== 'undefined' && navigator.userAgent.includes('Macintosh');
 class Markmap {
   constructor(svg, opts) {
+    this.options = Markmap.defaultOptions;
     this.revokers = [];
-    ['handleZoom', 'handleClick', 'handlePan'].forEach(key => {
-      this[key] = this[key].bind(this);
-    });
+    this.handleZoom = e => {
+      const {
+        transform
+      } = e;
+      this.g.attr('transform', transform);
+    };
+    this.handlePan = e => {
+      e.preventDefault();
+      const transform = d3.zoomTransform(this.svg.node());
+      const newTransform = transform.translate(-e.deltaX / transform.k, -e.deltaY / transform.k);
+      this.svg.call(this.zoom.transform, newTransform);
+    };
+    this.handleClick = (e, d) => {
+      let recursive = this.options.toggleRecursively;
+      if (isMacintosh ? e.metaKey : e.ctrlKey) recursive = !recursive;
+      this.toggleNode(d.data, recursive);
+    };
     this.viewHooks = createViewHooks();
-    this.svg = svg.datum ? svg : d3__namespace.select(svg);
+    this.svg = svg.datum ? svg : d3.select(svg);
     this.styleNode = this.svg.append('style');
-    this.zoom = d3__namespace.zoom().filter(event => {
+    this.zoom = d3.zoom().filter(event => {
       if (this.options.scrollForPan) {
         // Pan with wheels, zoom with ctrl+wheels
         if (event.type === 'wheel') return event.ctrlKey && !event.button;
@@ -1023,7 +1250,11 @@ class Markmap {
     }).on('zoom', this.handleZoom);
     this.setOptions(opts);
     this.state = {
-      id: this.options.id || this.svg.attr('id') || getId()
+      id: this.options.id || this.svg.attr('id') || getId(),
+      minX: 0,
+      maxX: 0,
+      minY: 0,
+      maxY: 0
     };
     this.g = this.svg.append('g');
     this.revokers.push(refreshHook.tap(() => {
@@ -1045,18 +1276,6 @@ class Markmap {
     const style = this.getStyleContent();
     this.styleNode.text(style);
   }
-  handleZoom(e) {
-    const {
-      transform
-    } = e;
-    this.g.attr('transform', transform);
-  }
-  handlePan(e) {
-    e.preventDefault();
-    const transform = d3__namespace.zoomTransform(this.svg.node());
-    const newTransform = transform.translate(-e.deltaX / transform.k, -e.deltaY / transform.k);
-    this.svg.call(this.zoom.transform, newTransform);
-  }
   toggleNode(data, recursive = false) {
     var _data$payload;
     const fold = (_data$payload = data.payload) != null && _data$payload.fold ? 0 : 1;
@@ -1076,9 +1295,6 @@ class Markmap {
     }
     this.renderData(data);
   }
-  handleClick(e, d) {
-    this.toggleNode(d.data, e.ctrlKey);
-  }
   initializeData(node) {
     let nodeId = 0;
     const {
@@ -1138,14 +1354,16 @@ class Markmap {
     // `white-space: nowrap` gets re-layouted, then we will get the expected layout, with
     // content in one line as much as possible, and subjecting to the given max-width.
     nodes.forEach(node => {
-      node.parentNode.append(node.cloneNode(true));
+      var _node$parentNode;
+      (_node$parentNode = node.parentNode) == null ? void 0 : _node$parentNode.append(node.cloneNode(true));
     });
     walkTree(node, (item, next, parent) => {
       var _parent$state2;
-      const rect = item.state.el.getBoundingClientRect();
-      item.content = item.state.el.innerHTML;
-      item.state.size = [Math.ceil(rect.width) + 1, Math.max(Math.ceil(rect.height), nodeMinHeight)];
-      item.state.key = [parent == null || (_parent$state2 = parent.state) == null ? void 0 : _parent$state2.id, item.state.id].filter(Boolean).join('.') +
+      const state = item.state;
+      const rect = state.el.getBoundingClientRect();
+      item.content = state.el.innerHTML;
+      state.size = [Math.ceil(rect.width) + 1, Math.max(Math.ceil(rect.height), nodeMinHeight)];
+      state.key = [parent == null || (_parent$state2 = parent.state) == null ? void 0 : _parent$state2.id, state.id].filter(Boolean).join('.') +
       // FIXME: find a way to check content hash
       item.content;
       next();
@@ -1154,17 +1372,22 @@ class Markmap {
     style.remove();
   }
   setOptions(opts) {
-    this.options = _extends({}, Markmap.defaultOptions, opts);
+    this.options = _extends({}, this.options, opts);
     if (this.options.zoom) {
       this.svg.call(this.zoom);
     } else {
       this.svg.on('.zoom', null);
     }
-    this.svg.on('wheel', this.options.pan ? this.handlePan : null);
+    if (this.options.pan) {
+      this.svg.on('wheel', this.handlePan);
+    } else {
+      this.svg.on('wheel', null);
+    }
   }
   setData(data, opts) {
-    if (data) this.state.data = data;
     if (opts) this.setOptions(opts);
+    if (data) this.state.data = data;
+    if (!this.state.data) return;
     this.initializeData(this.state.data);
     this.updateStyle();
     this.renderData();
@@ -1179,25 +1402,24 @@ class Markmap {
       autoFit,
       color
     } = this.options;
-    const layout = flextree().children(d => {
+    const layout = flextree({}).children(d => {
       var _d$payload;
-      return !((_d$payload = d.payload) != null && _d$payload.fold) && d.children;
-    }).nodeSize(d => {
-      const [width, height] = d.data.state.size;
+      if (!((_d$payload = d.payload) != null && _d$payload.fold)) return d.children;
+    }).nodeSize(node => {
+      const [width, height] = node.data.state.size;
       return [height, width + (width ? paddingX * 2 : 0) + spacingHorizontal];
     }).spacing((a, b) => {
       return a.parent === b.parent ? spacingVertical : spacingVertical * 2;
     });
     const tree = layout.hierarchy(this.state.data);
     layout(tree);
-    adjustSpacing(tree, spacingHorizontal);
     const descendants = tree.descendants().reverse();
     const links = tree.links();
-    const linkShape = d3__namespace.linkHorizontal();
-    const minX = d3__namespace.min(descendants, d => d.x - d.xSize / 2);
-    const maxX = d3__namespace.max(descendants, d => d.x + d.xSize / 2);
-    const minY = d3__namespace.min(descendants, d => d.y);
-    const maxY = d3__namespace.max(descendants, d => d.y + d.ySizeInner);
+    const linkShape = d3.linkHorizontal();
+    const minX = d3.min(descendants, d => d.x - d.xSize / 2);
+    const maxX = d3.max(descendants, d => d.x + d.xSize / 2);
+    const minY = d3.min(descendants, d => d.y);
+    const maxY = d3.max(descendants, d => d.y + d.ySize - spacingHorizontal);
     Object.assign(this.state, {
       minX,
       maxX,
@@ -1211,11 +1433,11 @@ class Markmap {
 
     // Update the nodes
     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('transform', d => `translate(${y0 + origin.ySizeInner - d.ySizeInner},${x0 + origin.xSize / 2 - d.xSize})`);
+    const nodeEnter = node.enter().append('g').attr('data-depth', d => d.data.depth).attr('data-path', d => d.data.state.path).attr('transform', d => `translate(${y0 + origin.ySize - d.ySize},${x0 + origin.xSize / 2 - d.xSize})`);
     const nodeExit = this.transition(node.exit());
-    nodeExit.select('line').attr('x1', d => d.ySizeInner).attr('x2', d => d.ySizeInner);
+    nodeExit.select('line').attr('x1', d => d.ySize - spacingHorizontal).attr('x2', d => d.ySize - spacingHorizontal);
     nodeExit.select('foreignObject').style('opacity', 0);
-    nodeExit.attr('transform', d => `translate(${origin.y + origin.ySizeInner - d.ySizeInner},${origin.x + origin.xSize / 2 - d.xSize})`).remove();
+    nodeExit.attr('transform', d => `translate(${origin.y + origin.ySize - d.ySize},${origin.x + origin.xSize / 2 - d.xSize})`).remove();
     const nodeMerge = node.merge(nodeEnter).attr('class', d => {
       var _d$data$payload;
       return ['markmap-node', ((_d$data$payload = d.data.payload) == null ? void 0 : _d$data$payload.fold) && 'markmap-fold'].filter(Boolean).join(' ');
@@ -1224,15 +1446,18 @@ class Markmap {
 
     // Update lines under the content
     const line = nodeMerge.selectAll(childSelector('line')).data(d => [d], d => d.data.state.key).join(enter => {
-      return enter.append('line').attr('x1', d => d.ySizeInner).attr('x2', d => d.ySizeInner);
+      return enter.append('line').attr('x1', d => d.ySize - spacingHorizontal).attr('x2', d => d.ySize - spacingHorizontal);
     }, update => update, exit => exit.remove());
-    this.transition(line).attr('x1', -1).attr('x2', d => d.ySizeInner + 2).attr('y1', d => d.xSize).attr('y2', d => d.xSize).attr('stroke', d => color(d.data)).attr('stroke-width', linkWidth);
+    this.transition(line).attr('x1', -1).attr('x2', d => d.ySize - spacingHorizontal + 2).attr('y1', d => d.xSize).attr('y2', d => d.xSize).attr('stroke', d => color(d.data)).attr('stroke-width', linkWidth);
 
     // Circle to link to children of the node
-    const circle = nodeMerge.selectAll(childSelector('circle')).data(d => d.data.children ? [d] : [], d => d.data.state.key).join(enter => {
-      return enter.append('circle').attr('stroke-width', '1.5').attr('cx', d => d.ySizeInner).attr('cy', d => d.xSize).attr('r', 0).on('click', (e, d) => this.handleClick(e, d)).on('mousedown', stopPropagation);
+    const circle = nodeMerge.selectAll(childSelector('circle')).data(d => {
+      var _d$data$children;
+      return (_d$data$children = d.data.children) != null && _d$data$children.length ? [d] : [];
+    }, d => d.data.state.key).join(enter => {
+      return enter.append('circle').attr('stroke-width', '1.5').attr('cx', d => d.ySize - spacingHorizontal).attr('cy', d => d.xSize).attr('r', 0).on('click', (e, d) => this.handleClick(e, d)).on('mousedown', stopPropagation);
     }, update => update, exit => exit.remove());
-    this.transition(circle).attr('r', 6).attr('cx', d => d.ySizeInner).attr('cy', d => d.xSize).attr('stroke', d => color(d.data)).attr('fill', d => {
+    this.transition(circle).attr('r', 6).attr('cx', d => d.ySize - spacingHorizontal).attr('cy', d => d.xSize).attr('stroke', d => color(d.data)).attr('fill', d => {
       var _d$data$payload2;
       return (_d$data$payload2 = d.data.payload) != null && _d$data$payload2.fold && d.data.children ? color(d.data) : '#fff';
     });
@@ -1244,26 +1469,28 @@ class Markmap {
         return clone;
       }).attr('xmlns', 'http://www.w3.org/1999/xhtml');
       return fo;
-    }, update => update, exit => exit.remove()).attr('width', d => Math.max(0, d.ySizeInner - paddingX * 2)).attr('height', d => d.xSize);
+    }, update => update, exit => exit.remove()).attr('width', d => Math.max(0, d.ySize - spacingHorizontal - paddingX * 2)).attr('height', d => d.xSize);
     this.transition(foreignObject).style('opacity', 1);
 
     // Update the links
     const path = this.g.selectAll(childSelector('path')).data(links, d => d.target.data.state.key).join(enter => {
-      const source = [y0 + origin.ySizeInner, x0 + origin.xSize / 2];
+      const source = [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
       }));
     }, update => update, exit => {
-      const source = [origin.y + origin.ySizeInner, origin.x + origin.xSize / 2];
+      const source = [origin.y + origin.ySize - spacingHorizontal, origin.x + origin.xSize / 2];
       return this.transition(exit).attr('d', linkShape({
         source,
         target: source
       })).remove();
     });
     this.transition(path).attr('stroke', d => color(d.target.data)).attr('stroke-width', d => linkWidth(d.target)).attr('d', d => {
-      const source = [d.source.y + d.source.ySizeInner, d.source.x + d.source.xSize / 2];
-      const target = [d.target.y, d.target.x + d.target.xSize / 2];
+      const origSource = d.source;
+      const origTarget = d.target;
+      const source = [origSource.y + origSource.ySize - spacingHorizontal, origSource.x + origSource.xSize / 2];
+      const target = [origTarget.y, origTarget.x + origTarget.xSize / 2];
       return linkShape({
         source,
         target
@@ -1302,7 +1529,7 @@ class Markmap {
     const naturalWidth = maxY - minY;
     const naturalHeight = maxX - minX;
     const scale = Math.min(offsetWidth / naturalWidth * fitRatio, offsetHeight / naturalHeight * fitRatio, 2);
-    const initialZoom = d3__namespace.zoomIdentity.translate((offsetWidth - naturalWidth * scale) / 2 - minY * scale, (offsetHeight - naturalHeight * scale) / 2 - minX * scale).scale(scale);
+    const initialZoom = d3.zoomIdentity.translate((offsetWidth - naturalWidth * scale) / 2 - minY * scale, (offsetHeight - naturalHeight * scale) / 2 - minX * scale).scale(scale);
     return this.transition(this.svg).call(this.zoom.transform, initialZoom).end().catch(noop);
   }
 
@@ -1318,9 +1545,12 @@ class Markmap {
     });
     if (!itemData) return;
     const svgNode = this.svg.node();
+    const {
+      spacingHorizontal
+    } = this.options;
     const relRect = svgNode.getBoundingClientRect();
-    const transform = d3__namespace.zoomTransform(svgNode);
-    const [left, right] = [itemData.y, itemData.y + itemData.ySizeInner + 2].map(x => x * transform.k + transform.x);
+    const transform = d3.zoomTransform(svgNode);
+    const [left, right] = [itemData.y, itemData.y + itemData.ySize - spacingHorizontal + 2].map(x => x * transform.k + transform.x);
     const [top, bottom] = [itemData.x - itemData.xSize / 2, itemData.x + itemData.xSize / 2].map(y => y * transform.k + transform.y);
     // Skip if the node includes or is included in the container.
     const pd = _extends({
@@ -1350,7 +1580,7 @@ class Markmap {
     } = svgNode.getBoundingClientRect();
     const halfWidth = offsetWidth / 2;
     const halfHeight = offsetHeight / 2;
-    const transform = d3__namespace.zoomTransform(svgNode);
+    const transform = d3.zoomTransform(svgNode);
     const newTransform = transform.translate((halfWidth - transform.x) * (1 - scale) / transform.k, (halfHeight - transform.y) * (1 - scale) / transform.k).scale(scale);
     return this.transition(this.svg).call(this.zoom.transform, newTransform).end().catch(noop);
   }
@@ -1361,7 +1591,7 @@ class Markmap {
       fn();
     });
   }
-  static create(svg, opts, data) {
+  static create(svg, opts, data = null) {
     const mm = new Markmap(svg, opts);
     if (data) {
       mm.setData(data);
@@ -1373,7 +1603,10 @@ class Markmap {
 }
 Markmap.defaultOptions = {
   autoFit: false,
-  color: node => defaultColorFn(`${node.state.path}`),
+  color: node => {
+    var _node$state;
+    return defaultColorFn(`${((_node$state = node.state) == null ? void 0 : _node$state.path) || ''}`);
+  },
   duration: 500,
   embedGlobalCSS: true,
   fitRatio: 0.95,
@@ -1385,25 +1618,26 @@ Markmap.defaultOptions = {
   spacingVertical: 5,
   initialExpandLevel: -1,
   zoom: true,
-  pan: true
+  pan: true,
+  toggleRecursively: false
 };
 function deriveOptions(jsonOptions) {
-  const opts = {};
-  jsonOptions || (jsonOptions = {});
+  const derivedOptions = {};
+  const options = _extends({}, jsonOptions);
   const {
     color,
     colorFreezeLevel
-  } = jsonOptions;
+  } = options;
   if ((color == null ? void 0 : color.length) === 1) {
     const solidColor = color[0];
-    opts.color = () => solidColor;
+    derivedOptions.color = () => solidColor;
   } else if (color != null && color.length) {
-    const colorFn = d3__namespace.scaleOrdinal(color);
-    opts.color = node => colorFn(`${node.state.path}`);
+    const colorFn = d3.scaleOrdinal(color);
+    derivedOptions.color = node => colorFn(`${node.state.path}`);
   }
   if (colorFreezeLevel) {
-    const color = opts.color || Markmap.defaultOptions.color;
-    opts.color = node => {
+    const color = derivedOptions.color || Markmap.defaultOptions.color;
+    derivedOptions.color = node => {
       node = _extends({}, node, {
         state: _extends({}, node.state, {
           path: node.state.path.split('.').slice(0, colorFreezeLevel).join('.')
@@ -1414,15 +1648,15 @@ function deriveOptions(jsonOptions) {
   }
   const numberKeys = ['duration', 'maxWidth', 'initialExpandLevel'];
   numberKeys.forEach(key => {
-    const value = jsonOptions[key];
-    if (typeof value === 'number') opts[key] = value;
+    const value = options[key];
+    if (typeof value === 'number') derivedOptions[key] = value;
   });
   const booleanKeys = ['zoom', 'pan'];
   booleanKeys.forEach(key => {
-    const value = jsonOptions[key];
-    if (value != null) opts[key] = !!value;
+    const value = options[key];
+    if (value != null) derivedOptions[key] = !!value;
   });
-  return opts;
+  return derivedOptions;
 }
 
 exports.Markmap = Markmap;