markmap-view 0.2.5 → 0.13.0-alpha.0

package/dist/index.esm.js

@@ -1,6 +1,34 @@
-/*! markmap-view v0.2.5 | MIT License */
+/*! markmap-view v0.13.0-alpha.0 | MIT License */
 import * as d3 from 'd3';
 
+/*! markmap-common v0.13.0-alpha.0 | MIT License */
+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);
+    }
+  }
+
+}
+
 function _extends$1() {
   _extends$1 = Object.assign || function (target) {
     for (var i = 1; i < arguments.length; i++) {
@@ -19,52 +47,186 @@ function _extends$1() {
   return _extends$1.apply(this, arguments);
 }
 
-function _assertThisInitialized(self) {
-  if (self === void 0) {
-    throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
-  }
+const uniqId = Math.random().toString(36).slice(2, 8);
+let globalIndex = 0;
+
+function getId() {
+  globalIndex += 1;
+  return `mm-${uniqId}-${globalIndex}`;
+}
+
+function noop() {// noop
+}
+
+function walkTree(tree, callback, key = 'children') {
+  const walk = (item, parent) => callback(item, () => {
+    var _item$key;
+
+    (_item$key = item[key]) == null ? void 0 : _item$key.forEach(child => {
+      walk(child, item);
+    });
+  }, parent);
 
-  return self;
+  walk(tree);
 }
 
-function _defineProperties(target, props) {
-  for (var i = 0; i < props.length; i++) {
-    var descriptor = props[i];
-    descriptor.enumerable = descriptor.enumerable || false;
-    descriptor.configurable = true;
-    if ("value" in descriptor) descriptor.writable = true;
-    Object.defineProperty(target, descriptor.key, descriptor);
+function arrayFrom(arrayLike) {
+  if (Array.from) return Array.from(arrayLike);
+  const array = [];
+
+  for (let i = 0; i < arrayLike.length; i += 1) {
+    array.push(arrayLike[i]);
   }
+
+  return array;
 }
 
-function _createClass(Constructor, protoProps, staticProps) {
-  if (protoProps) _defineProperties(Constructor.prototype, protoProps);
-  if (staticProps) _defineProperties(Constructor, staticProps);
-  return Constructor;
+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 _setPrototypeOf(o, p) {
-  _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {
-    o.__proto__ = p;
-    return o;
+function childSelector(filter) {
+  if (typeof filter === 'string') {
+    const tagName = filter;
+
+    filter = el => el.tagName === tagName;
+  }
+
+  const filterFn = filter;
+  return function selector() {
+    let nodes = arrayFrom(this.childNodes);
+    if (filterFn) nodes = nodes.filter(node => filterFn(node));
+    return nodes;
   };
+}
+
+function memoize(fn) {
+  const cache = {};
+  return function memoized(...args) {
+    const key = `${args[0]}`;
+    let data = cache[key];
 
-  return _setPrototypeOf(o, p);
+    if (!data) {
+      data = {
+        value: fn(...args)
+      };
+      cache[key] = data;
+    }
+
+    return data.value;
+  };
 }
 
-function _inheritsLoose(subClass, superClass) {
-  subClass.prototype = Object.create(superClass.prototype);
-  subClass.prototype.constructor = subClass;
-  _setPrototypeOf(subClass, superClass);
+function createElement(tagName, props, attrs) {
+  const el = document.createElement(tagName);
+
+  if (props) {
+    Object.entries(props).forEach(([key, value]) => {
+      el[key] = value;
+    });
+  }
+
+  if (attrs) {
+    Object.entries(attrs).forEach(([key, value]) => {
+      el.setAttribute(key, value);
+    });
+  }
+
+  return el;
+}
+
+const memoizedPreloadJS = memoize(url => {
+  document.head.append(createElement('link', {
+    rel: 'preload',
+    as: 'script',
+    href: url
+  }));
+});
+
+function loadJSItem(item, context) {
+  if (item.type === 'script') {
+    return new Promise((resolve, reject) => {
+      var _item$data;
+
+      document.head.append(createElement('script', _extends$1({}, item.data, {
+        onload: resolve,
+        onerror: reject
+      }))); // Run inline script synchronously
+
+      if (!((_item$data = item.data) != null && _item$data.src)) resolve();
+    });
+  }
+
+  if (item.type === 'iife') {
+    const {
+      fn,
+      getParams
+    } = item.data;
+    fn(...((getParams == null ? void 0 : getParams(context)) || []));
+  }
+}
+
+function loadCSSItem(item) {
+  if (item.type === 'style') {
+    document.head.append(createElement('style', {
+      textContent: item.data
+    }));
+  } else if (item.type === 'stylesheet') {
+    document.head.append(createElement('link', _extends$1({
+      rel: 'stylesheet'
+    }, item.data)));
+  }
+}
+
+async function loadJS(items, context) {
+  const needPreload = items.filter(item => {
+    var _item$data2;
+
+    return item.type === 'script' && ((_item$data2 = item.data) == null ? void 0 : _item$data2.src);
+  });
+  if (needPreload.length > 1) needPreload.forEach(item => memoizedPreloadJS(item.data.src));
+  context = _extends$1({
+    getMarkmap: () => window.markmap
+  }, context);
+
+  for (const item of items) {
+    await loadJSItem(item, context);
+  }
+}
+
+function loadCSS(items) {
+  for (const item of items) {
+    loadCSSItem(item);
+  }
+}
+
+function _extends() {
+  _extends = Object.assign || 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.apply(this, arguments);
 }
 
 function count(node) {
   var sum = 0,
       children = node.children,
       i = children && children.length;
-  if (!i) sum = 1;else while (--i >= 0) {
-    sum += children[i].value;
-  }
+  if (!i) sum = 1;else while (--i >= 0) sum += children[i].value;
   node.value = sum;
 }
 
@@ -138,9 +300,7 @@ function node_sum (value) {
         children = node.children,
         i = children && children.length;
 
-    while (--i >= 0) {
-      sum += children[i].value;
-    }
+    while (--i >= 0) sum += children[i].value;
 
     node.value = sum;
   });
@@ -236,7 +396,7 @@ function node_links () {
 }
 
 function hierarchy(data, children) {
-  var root = new Node(data),
+  var root = new Node$1(data),
       valued = +data.value && (root.value = data.value),
       node,
       nodes = [root],
@@ -253,7 +413,7 @@ function hierarchy(data, children) {
       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;
       }
@@ -278,17 +438,15 @@ function copyData(node) {
 function computeHeight(node) {
   var height = 0;
 
-  do {
-    node.height = height;
-  } while ((node = node.parent) && node.height < ++height);
+  do 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,
@@ -303,15 +461,90 @@ Node.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
+};
 
-var defaults = Object.freeze({
-  children: function children(data) {
-    return data.children;
-  },
-  nodeSize: function nodeSize(node) {
-    return node.data.size;
-  },
+const {
+  version
+} = packageInfo;
+const defaults = Object.freeze({
+  children: data => data.children,
+  nodeSize: node => node.data.size,
   spacing: 0
 }); // Create a layout function with customizable options. Per D3-style, the
 // options can be set at any time using setter methods. The layout function
@@ -319,244 +552,192 @@ var defaults = Object.freeze({
 // time it is called.
 
 function flextree(options) {
-  var opts = Object.assign({}, defaults, options);
+  const opts = Object.assign({}, defaults, options);
 
   function accessor(name) {
-    var opt = opts[name];
-    return typeof opt === 'function' ? opt : function () {
-      return opt;
-    };
+    const opt = opts[name];
+    return typeof opt === 'function' ? opt : () => opt;
   }
 
   function layout(tree) {
-    var wtree = wrap(getWrapper(), tree, function (node) {
-      return node.children;
-    });
+    const wtree = wrap(getWrapper(), tree, node => node.children);
     wtree.update();
     return wtree.data;
   }
 
   function getFlexNode() {
-    var nodeSize = accessor('nodeSize');
+    const nodeSize = accessor('nodeSize');
+    const spacing = accessor('spacing');
+    return class FlexNode extends hierarchy.prototype.constructor {
+      constructor(data) {
+        super(data);
+      }
 
-    var _spacing = accessor('spacing');
+      copy() {
+        const c = wrap(this.constructor, this, node => node.children);
+        c.each(node => node.data = node.data.data);
+        return c;
+      }
 
-    return /*#__PURE__*/function (_hierarchy$prototype$) {
-      _inheritsLoose(FlexNode, _hierarchy$prototype$);
+      get size() {
+        return nodeSize(this);
+      }
 
-      function FlexNode(data) {
-        return _hierarchy$prototype$.call(this, data) || this;
+      spacing(oNode) {
+        return spacing(this, oNode);
       }
 
-      var _proto = FlexNode.prototype;
+      get nodes() {
+        return this.descendants();
+      }
 
-      _proto.copy = function copy() {
-        var c = wrap(this.constructor, this, function (node) {
-          return node.children;
-        });
-        c.each(function (node) {
-          return node.data = node.data.data;
-        });
-        return c;
-      };
+      get xSize() {
+        return this.size[0];
+      }
 
-      _proto.spacing = function spacing(oNode) {
-        return _spacing(this, oNode);
-      };
+      get ySize() {
+        return this.size[1];
+      }
+
+      get top() {
+        return this.y;
+      }
+
+      get bottom() {
+        return this.y + this.ySize;
+      }
+
+      get left() {
+        return this.x - this.xSize / 2;
+      }
+
+      get right() {
+        return this.x + this.xSize / 2;
+      }
+
+      get root() {
+        const ancs = this.ancestors();
+        return ancs[ancs.length - 1];
+      }
+
+      get numChildren() {
+        return this.hasChildren ? this.children.length : 0;
+      }
+
+      get hasChildren() {
+        return !this.noChildren;
+      }
+
+      get noChildren() {
+        return this.children === null;
+      }
 
-      FlexNode.maxExtents = function maxExtents(e0, e1) {
+      get firstChild() {
+        return this.hasChildren ? this.children[0] : null;
+      }
+
+      get lastChild() {
+        return this.hasChildren ? this.children[this.numChildren - 1] : null;
+      }
+
+      get extents() {
+        return (this.children || []).reduce((acc, kid) => FlexNode.maxExtents(acc, kid.extents), this.nodeExtents);
+      }
+
+      get nodeExtents() {
+        return {
+          top: this.top,
+          bottom: this.bottom,
+          left: this.left,
+          right: this.right
+        };
+      }
+
+      static maxExtents(e0, e1) {
         return {
           top: Math.min(e0.top, e1.top),
           bottom: Math.max(e0.bottom, e1.bottom),
           left: Math.min(e0.left, e1.left),
           right: Math.max(e0.right, e1.right)
         };
-      };
-
-      _createClass(FlexNode, [{
-        key: "size",
-        get: function get() {
-          return nodeSize(this);
-        }
-      }, {
-        key: "nodes",
-        get: function get() {
-          return this.descendants();
-        }
-      }, {
-        key: "xSize",
-        get: function get() {
-          return this.size[0];
-        }
-      }, {
-        key: "ySize",
-        get: function get() {
-          return this.size[1];
-        }
-      }, {
-        key: "top",
-        get: function get() {
-          return this.y;
-        }
-      }, {
-        key: "bottom",
-        get: function get() {
-          return this.y + this.ySize;
-        }
-      }, {
-        key: "left",
-        get: function get() {
-          return this.x - this.xSize / 2;
-        }
-      }, {
-        key: "right",
-        get: function get() {
-          return this.x + this.xSize / 2;
-        }
-      }, {
-        key: "root",
-        get: function get() {
-          var ancs = this.ancestors();
-          return ancs[ancs.length - 1];
-        }
-      }, {
-        key: "numChildren",
-        get: function get() {
-          return this.hasChildren ? this.children.length : 0;
-        }
-      }, {
-        key: "hasChildren",
-        get: function get() {
-          return !this.noChildren;
-        }
-      }, {
-        key: "noChildren",
-        get: function get() {
-          return this.children === null;
-        }
-      }, {
-        key: "firstChild",
-        get: function get() {
-          return this.hasChildren ? this.children[0] : null;
-        }
-      }, {
-        key: "lastChild",
-        get: function get() {
-          return this.hasChildren ? this.children[this.numChildren - 1] : null;
-        }
-      }, {
-        key: "extents",
-        get: function get() {
-          return (this.children || []).reduce(function (acc, kid) {
-            return FlexNode.maxExtents(acc, kid.extents);
-          }, this.nodeExtents);
-        }
-      }, {
-        key: "nodeExtents",
-        get: function get() {
-          return {
-            top: this.top,
-            bottom: this.bottom,
-            left: this.left,
-            right: this.right
-          };
-        }
-      }]);
+      }
 
-      return FlexNode;
-    }(hierarchy.prototype.constructor);
+    };
   }
 
   function getWrapper() {
-    var FlexNode = getFlexNode();
-    var nodeSize = accessor('nodeSize');
-
-    var _spacing2 = accessor('spacing');
-
-    return /*#__PURE__*/function (_FlexNode) {
-      _inheritsLoose(_class, _FlexNode);
-
-      function _class(data) {
-        var _this;
-
-        _this = _FlexNode.call(this, data) || this;
-        Object.assign(_assertThisInitialized(_this), {
+    const FlexNode = getFlexNode();
+    const nodeSize = accessor('nodeSize');
+    const spacing = accessor('spacing');
+    return class extends FlexNode {
+      constructor(data) {
+        super(data);
+        Object.assign(this, {
           x: 0,
           y: 0,
           relX: 0,
           prelim: 0,
           shift: 0,
           change: 0,
-          lExt: _assertThisInitialized(_this),
+          lExt: this,
           lExtRelX: 0,
           lThr: null,
-          rExt: _assertThisInitialized(_this),
+          rExt: this,
           rExtRelX: 0,
           rThr: null
         });
-        return _this;
       }
 
-      var _proto2 = _class.prototype;
+      get size() {
+        return nodeSize(this.data);
+      }
+
+      spacing(oNode) {
+        return spacing(this.data, oNode.data);
+      }
 
-      _proto2.spacing = function spacing(oNode) {
-        return _spacing2(this.data, oNode.data);
-      };
+      get x() {
+        return this.data.x;
+      }
 
-      _proto2.update = function update() {
+      set x(v) {
+        this.data.x = v;
+      }
+
+      get y() {
+        return this.data.y;
+      }
+
+      set y(v) {
+        this.data.y = v;
+      }
+
+      update() {
         layoutChildren(this);
         resolveX(this);
         return this;
-      };
-
-      _createClass(_class, [{
-        key: "size",
-        get: function get() {
-          return nodeSize(this.data);
-        }
-      }, {
-        key: "x",
-        get: function get() {
-          return this.data.x;
-        },
-        set: function set(v) {
-          this.data.x = v;
-        }
-      }, {
-        key: "y",
-        get: function get() {
-          return this.data.y;
-        },
-        set: function set(v) {
-          this.data.y = v;
-        }
-      }]);
+      }
 
-      return _class;
-    }(FlexNode);
+    };
   }
 
   function wrap(FlexClass, treeData, children) {
-    var _wrap = function _wrap(data, parent) {
-      var node = new FlexClass(data);
+    const _wrap = (data, parent) => {
+      const node = new FlexClass(data);
       Object.assign(node, {
-        parent: parent,
+        parent,
         depth: parent === null ? 0 : parent.depth + 1,
         height: 0,
         length: 1
       });
-      var kidsData = children(data) || [];
-      node.children = kidsData.length === 0 ? null : kidsData.map(function (kd) {
-        return _wrap(kd, node);
-      });
+      const kidsData = children(data) || [];
+      node.children = kidsData.length === 0 ? null : kidsData.map(kd => _wrap(kd, node));
 
       if (node.children) {
-        Object.assign(node, node.children.reduce(function (hl, kid) {
-          return {
-            height: Math.max(hl.height, kid.height + 1),
-            length: hl.length + kid.length
-          };
-        }, node));
+        Object.assign(node, node.children.reduce((hl, kid) => ({
+          height: Math.max(hl.height, kid.height + 1),
+          length: hl.length + kid.length
+        }), node));
       }
 
       return node;
@@ -566,57 +747,57 @@ function flextree(options) {
   }
 
   Object.assign(layout, {
-    nodeSize: function nodeSize(arg) {
+    nodeSize(arg) {
       return arguments.length ? (opts.nodeSize = arg, layout) : opts.nodeSize;
     },
-    spacing: function spacing(arg) {
+
+    spacing(arg) {
       return arguments.length ? (opts.spacing = arg, layout) : opts.spacing;
     },
-    children: function children(arg) {
+
+    children(arg) {
       return arguments.length ? (opts.children = arg, layout) : opts.children;
     },
-    hierarchy: function hierarchy(treeData, children) {
-      var kids = typeof children === 'undefined' ? opts.children : children;
+
+    hierarchy(treeData, children) {
+      const kids = typeof children === 'undefined' ? opts.children : children;
       return wrap(getFlexNode(), treeData, kids);
     },
-    dump: function dump(tree) {
-      var nodeSize = accessor('nodeSize');
-
-      var _dump = function _dump(i0) {
-        return function (node) {
-          var i1 = i0 + '  ';
-          var i2 = i0 + '    ';
-          var x = node.x,
-              y = node.y;
-          var size = nodeSize(node);
-          var kids = node.children || [];
-          var kdumps = kids.length === 0 ? ' ' : "," + i1 + "children: [" + i2 + kids.map(_dump(i2)).join(i2) + i1 + "]," + i0;
-          return "{ size: [" + size.join(', ') + "]," + i1 + "x: " + x + ", y: " + y + kdumps + "},";
-        };
+
+    dump(tree) {
+      const nodeSize = accessor('nodeSize');
+
+      const _dump = i0 => node => {
+        const i1 = i0 + '  ';
+        const i2 = i0 + '    ';
+        const {
+          x,
+          y
+        } = node;
+        const size = nodeSize(node);
+        const kids = node.children || [];
+        const kdumps = kids.length === 0 ? ' ' : `,${i1}children: [${i2}${kids.map(_dump(i2)).join(i2)}${i1}],${i0}`;
+        return `{ size: [${size.join(', ')}],${i1}x: ${x}, y: ${y}${kdumps}},`;
       };
 
       return _dump('\n')(tree);
     }
+
   });
   return layout;
 }
 flextree.version = version;
 
-var layoutChildren = function layoutChildren(w, y) {
-  if (y === void 0) {
-    y = 0;
-  }
-
+const layoutChildren = (w, y = 0) => {
   w.y = y;
-  (w.children || []).reduce(function (acc, kid) {
-    var i = acc[0],
-        lastLows = acc[1];
+  (w.children || []).reduce((acc, kid) => {
+    const [i, lastLows] = acc;
     layoutChildren(kid, w.y + w.ySize); // The lowest vertical coordinate while extreme nodes still point
     // in current subtree.
 
-    var lowY = (i === 0 ? kid.lExt : kid.rExt).bottom;
+    const lowY = (i === 0 ? kid.lExt : kid.rExt).bottom;
     if (i !== 0) separate(w, i, lastLows);
-    var lows = updateLows(lowY, i, lastLows);
+    const lows = updateLows(lowY, i, lastLows);
     return [i + 1, lows];
   }, [0, null]);
   shiftChange(w);
@@ -628,7 +809,7 @@ var layoutChildren = function layoutChildren(w, y) {
 // to its parent.
 
 
-var resolveX = function resolveX(w, prevSum, parentX) {
+const resolveX = (w, prevSum, parentX) => {
   // A call to resolveX without arguments is assumed to be for the root of
   // the tree. This will set the root's x-coord to zero.
   if (typeof prevSum === 'undefined') {
@@ -636,24 +817,21 @@ var resolveX = function resolveX(w, prevSum, parentX) {
     parentX = 0;
   }
 
-  var sum = prevSum + w.relX;
+  const sum = prevSum + w.relX;
   w.relX = sum + w.prelim - parentX;
   w.prelim = 0;
   w.x = parentX + w.relX;
-  (w.children || []).forEach(function (k) {
-    return resolveX(k, sum, w.x);
-  });
+  (w.children || []).forEach(k => resolveX(k, sum, w.x));
   return w;
 }; // Process shift and change for all children, to add intermediate spacing to
 // each child's modifier.
 
 
-var shiftChange = function shiftChange(w) {
-  (w.children || []).reduce(function (acc, child) {
-    var lastShiftSum = acc[0],
-        lastChangeSum = acc[1];
-    var shiftSum = lastShiftSum + child.shift;
-    var changeSum = lastChangeSum + shiftSum + child.change;
+const shiftChange = w => {
+  (w.children || []).reduce((acc, child) => {
+    const [lastShiftSum, lastChangeSum] = acc;
+    const shiftSum = lastShiftSum + child.shift;
+    const changeSum = lastChangeSum + shiftSum + child.change;
     child.relX += changeSum;
     return [shiftSum, changeSum];
   }, [0, 0]);
@@ -662,21 +840,21 @@ var shiftChange = function shiftChange(w) {
 /* eslint-disable complexity */
 
 
-var separate = function separate(w, i, lows) {
-  var lSib = w.children[i - 1];
-  var curSubtree = w.children[i];
-  var rContour = lSib;
-  var rSumMods = lSib.relX;
-  var lContour = curSubtree;
-  var lSumMods = curSubtree.relX;
-  var isFirst = true;
+const separate = (w, i, lows) => {
+  const lSib = w.children[i - 1];
+  const curSubtree = w.children[i];
+  let rContour = lSib;
+  let rSumMods = lSib.relX;
+  let lContour = curSubtree;
+  let lSumMods = curSubtree.relX;
+  let isFirst = true;
 
   while (rContour && lContour) {
     if (rContour.bottom > lows.lowY) lows = lows.next; // How far to the left of the right side of rContour is the left side
     // of lContour? First compute the center-to-center distance, then add
     // the "spacing"
 
-    var dist = rSumMods + rContour.prelim - (lSumMods + lContour.prelim) + rContour.xSize / 2 + lContour.xSize / 2 + rContour.spacing(lContour);
+    const dist = rSumMods + rContour.prelim - (lSumMods + lContour.prelim) + rContour.xSize / 2 + lContour.xSize / 2 + rContour.spacing(lContour);
 
     if (dist > 0 || dist < 0 && isFirst) {
       lSumMods += dist; // Move subtree by changing relX.
@@ -687,8 +865,8 @@ var separate = function separate(w, i, lows) {
 
     isFirst = false; // Advance highest node(s) and sum(s) of modifiers
 
-    var rightBottom = rContour.bottom;
-    var leftBottom = lContour.bottom;
+    const rightBottom = rContour.bottom;
+    const leftBottom = lContour.bottom;
 
     if (rightBottom <= leftBottom) {
       rContour = nextRContour(rContour);
@@ -710,39 +888,39 @@ var separate = function separate(w, i, lows) {
 // Move subtree by changing relX.
 
 
-var moveSubtree = function moveSubtree(subtree, distance) {
+const moveSubtree = (subtree, distance) => {
   subtree.relX += distance;
   subtree.lExtRelX += distance;
   subtree.rExtRelX += distance;
 };
 
-var distributeExtra = function distributeExtra(w, curSubtreeI, leftSibI, dist) {
-  var curSubtree = w.children[curSubtreeI];
-  var n = curSubtreeI - leftSibI; // Are there intermediate children?
+const distributeExtra = (w, curSubtreeI, leftSibI, dist) => {
+  const curSubtree = w.children[curSubtreeI];
+  const n = curSubtreeI - leftSibI; // Are there intermediate children?
 
   if (n > 1) {
-    var delta = dist / n;
+    const delta = dist / n;
     w.children[leftSibI + 1].shift += delta;
     curSubtree.shift -= delta;
     curSubtree.change -= dist - delta;
   }
 };
 
-var nextLContour = function nextLContour(w) {
+const nextLContour = w => {
   return w.hasChildren ? w.firstChild : w.lThr;
 };
 
-var nextRContour = function nextRContour(w) {
+const nextRContour = w => {
   return w.hasChildren ? w.lastChild : w.rThr;
 };
 
-var setLThr = function setLThr(w, i, lContour, lSumMods) {
-  var firstChild = w.firstChild;
-  var lExt = firstChild.lExt;
-  var curSubtree = w.children[i];
+const setLThr = (w, i, lContour, lSumMods) => {
+  const firstChild = w.firstChild;
+  const lExt = firstChild.lExt;
+  const curSubtree = w.children[i];
   lExt.lThr = lContour; // Change relX so that the sum of modifier after following thread is correct.
 
-  var diff = lSumMods - lContour.relX - firstChild.lExtRelX;
+  const diff = lSumMods - lContour.relX - firstChild.lExtRelX;
   lExt.relX += diff; // Change preliminary x coordinate so that the node does not move.
 
   lExt.prelim -= diff; // Update extreme node and its sum of modifiers.
@@ -752,12 +930,12 @@ var setLThr = function setLThr(w, i, lContour, lSumMods) {
 }; // Mirror image of setLThr.
 
 
-var setRThr = function setRThr(w, i, rContour, rSumMods) {
-  var curSubtree = w.children[i];
-  var rExt = curSubtree.rExt;
-  var lSib = w.children[i - 1];
+const setRThr = (w, i, rContour, rSumMods) => {
+  const curSubtree = w.children[i];
+  const rExt = curSubtree.rExt;
+  const lSib = w.children[i - 1];
   rExt.rThr = rContour;
-  var diff = rSumMods - rContour.relX - curSubtree.rExtRelX;
+  const diff = rSumMods - rContour.relX - curSubtree.rExtRelX;
   rExt.relX += diff;
   rExt.prelim -= diff;
   curSubtree.rExt = lSib.rExt;
@@ -765,13 +943,13 @@ var setRThr = function setRThr(w, i, rContour, rSumMods) {
 }; // Position root between children, taking into account their modifiers
 
 
-var positionRoot = function positionRoot(w) {
+const positionRoot = w => {
   if (w.hasChildren) {
-    var k0 = w.firstChild;
-    var kf = w.lastChild;
-    var prelim = (k0.prelim + k0.relX - k0.xSize / 2 + kf.relX + kf.prelim + kf.xSize / 2) / 2;
+    const k0 = w.firstChild;
+    const kf = w.lastChild;
+    const prelim = (k0.prelim + k0.relX - k0.xSize / 2 + kf.relX + kf.prelim + kf.xSize / 2) / 2;
     Object.assign(w, {
-      prelim: prelim,
+      prelim,
       lExt: k0.lExt,
       lExtRelX: k0.lExtRelX,
       rExt: kf.rExt,
@@ -782,226 +960,257 @@ var positionRoot = function positionRoot(w) {
 // lowest vertical coordinate.
 
 
-var updateLows = function updateLows(lowY, index, lastLows) {
+const updateLows = (lowY, index, lastLows) => {
   // Remove siblings that are hidden by the new subtree.
-  while (lastLows !== null && lowY >= lastLows.lowY) {
-    lastLows = lastLows.next;
-  } // Prepend the new subtree.
+  while (lastLows !== null && lowY >= lastLows.lowY) lastLows = lastLows.next; // Prepend the new subtree.
 
 
   return {
-    lowY: lowY,
-    index: index,
+    lowY,
+    index,
     next: lastLows
   };
 };
 
-/*! markmap-common v0.1.5 | MIT License */
-class Hook {
-  constructor() {
-    this.listeners = [];
-  }
+/*! @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 = {
+  show: XLINK_NS,
+  actuate: XLINK_NS,
+  href: XLINK_NS
+};
 
-  tap(fn) {
-    this.listeners.push(fn);
-    return () => this.revoke(fn);
-  }
+var isLeaf = function isLeaf(c) {
+  return typeof c === 'string' || typeof c === 'number';
+};
 
-  revoke(fn) {
-    const i = this.listeners.indexOf(fn);
-    if (i >= 0) this.listeners.splice(i, 1);
-  }
+var isElement = function isElement(c) {
+  return (c == null ? void 0 : c.vtype) === VTYPE_ELEMENT;
+};
 
-  revokeAll() {
-    this.listeners.splice(0);
+var isRenderFunction = function isRenderFunction(c) {
+  return (c == null ? void 0 : c.vtype) === VTYPE_FUNCTION;
+};
+
+function jsx(type, props) {
+  var 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
+  };
+}
+
+function Fragment(props) {
+  return props.children;
+}
+
+var 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));
   }
+}
 
-  call(...args) {
-    for (const fn of this.listeners) {
-      fn(...args);
+function mountAttributes(domElement, props, env) {
+  for (var 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.startsWith('on')) {
+      domElement[key.toLowerCase()] = props[key];
+    } else {
+      setDOMAttribute(domElement, key, props[key], env.isSvg);
     }
   }
-
 }
 
-function _extends() {
-  _extends = Object.assign || function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
+var attrMap = {
+  className: 'class',
+  labelFor: 'for'
+};
 
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
+function setDOMAttribute(el, attr, value, isSVG) {
+  attr = attrMap[attr] || attr;
 
-    return target;
-  };
+  if (value === true) {
+    el.setAttribute(attr, '');
+  } else if (value === false) {
+    el.removeAttribute(attr);
+  } else {
+    var namespace = isSVG ? NS_ATTRS[attr] : undefined;
 
-  return _extends.apply(this, arguments);
+    if (namespace !== undefined) {
+      el.setAttributeNS(namespace, attr, value);
+    } else {
+      el.setAttribute(attr, value);
+    }
+  }
 }
 
-const uniqId = Math.random().toString(36).slice(2, 8);
-let globalIndex = 0;
+function mount(vnode, env) {
+  if (env === void 0) {
+    env = DEFAULT_ENV;
+  }
 
-function getId() {
-  globalIndex += 1;
-  return `mm-${uniqId}-${globalIndex}`;
-}
+  if (vnode == null || typeof vnode === 'boolean') {
+    return {
+      type: MOUNT_SINGLE,
+      node: null
+    };
+  }
 
-function noop() {// noop
-}
+  if (vnode instanceof Node) {
+    return {
+      type: MOUNT_SINGLE,
+      node: vnode
+    };
+  }
 
-function walkTree(tree, callback, key = 'c') {
-  const walk = (item, parent) => callback(item, () => {
-    var _item$key;
+  if (isRenderFunction(vnode)) {
+    var _ref = vnode,
+        type = _ref.type,
+        props = _ref.props;
 
-    (_item$key = item[key]) == null ? void 0 : _item$key.forEach(child => {
-      walk(child, item);
-    });
-  }, parent);
+    if (type === Fragment) {
+      var node = document.createDocumentFragment();
 
-  walk(tree);
-}
+      if (props.children) {
+        var childrenRef = mount(props.children, env);
+        insertDom(node, childrenRef);
+      }
 
-function arrayFrom(arrayLike) {
-  if (Array.from) return Array.from(arrayLike);
-  const array = [];
+      return {
+        type: MOUNT_SINGLE,
+        node: node
+      };
+    }
 
-  for (let i = 0; i < arrayLike.length; i += 1) {
-    array.push(arrayLike[i]);
+    var childVNode = type(props);
+    return mount(childVNode, env);
   }
 
-  return array;
-}
+  if (isLeaf(vnode)) {
+    return {
+      type: MOUNT_SINGLE,
+      node: document.createTextNode("" + vnode)
+    };
+  }
 
-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(' ');
-}
+  if (isElement(vnode)) {
+    var _node;
 
-function childSelector(filter) {
-  if (typeof filter === 'string') {
-    const tagName = filter;
+    var _ref2 = vnode,
+        _type = _ref2.type,
+        _props = _ref2.props;
 
-    filter = el => el.tagName === tagName;
-  }
+    if (!env.isSvg && _type === 'svg') {
+      env = Object.assign({}, env, {
+        isSvg: true
+      });
+    }
 
-  const filterFn = filter;
-  return function selector() {
-    let nodes = arrayFrom(this.childNodes);
-    if (filterFn) nodes = nodes.filter(node => filterFn(node));
-    return nodes;
-  };
-}
+    if (!env.isSvg) {
+      _node = document.createElement(_type);
+    } else {
+      _node = document.createElementNS(SVG_NS, _type);
+    }
 
-function memoize(fn) {
-  const cache = {};
-  return function memoized(...args) {
-    const key = `${args[0]}`;
-    let data = cache[key];
+    mountAttributes(_node, _props, env);
 
-    if (!data) {
-      data = {
-        value: fn(...args)
-      };
-      cache[key] = data;
-    }
+    var _childrenRef;
 
-    return data.value;
-  };
-}
+    if (_props.children) {
+      var childEnv = env;
 
-function createElement(tagName, props, attrs) {
-  const el = document.createElement(tagName);
+      if (env.isSvg && _type === 'foreignObject') {
+        childEnv = Object.assign({}, childEnv, {
+          isSvg: false
+        });
+      }
 
-  if (props) {
-    Object.entries(props).forEach(([key, value]) => {
-      el[key] = value;
-    });
+      _childrenRef = mount(_props.children, childEnv);
+    }
+
+    if (_childrenRef != null) insertDom(_node, _childrenRef);
+    var ref = _props.ref;
+    if (typeof ref === 'function') ref(_node);
+    return {
+      type: MOUNT_SINGLE,
+      node: _node
+    };
   }
 
-  if (attrs) {
-    Object.entries(attrs).forEach(([key, value]) => {
-      el.setAttribute(key, value);
-    });
+  if (Array.isArray(vnode)) {
+    return {
+      type: MOUNT_ARRAY,
+      children: vnode.map(function (child) {
+        return mount(child, env);
+      })
+    };
   }
 
-  return el;
+  throw new Error('mount: Invalid Vnode!');
 }
 
-const memoizedPreloadJS = memoize(url => {
-  document.head.append(createElement('link', {
-    rel: 'preload',
-    as: 'script',
-    href: url
-  }));
-});
-
-function loadJSItem(item, context) {
-  if (item.type === 'script') {
-    return new Promise((resolve, reject) => {
-      var _item$data;
-
-      document.head.append(createElement('script', _extends({}, item.data, {
-        onload: resolve,
-        onerror: reject
-      }))); // Run inline script synchronously
+function flattenWithoutNull(array) {
+  var result = [];
 
-      if (!((_item$data = item.data) != null && _item$data.src)) resolve();
-    });
+  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);
   }
 
-  if (item.type === 'iife') {
-    const {
-      fn,
-      getParams
-    } = item.data;
-    fn(...((getParams == null ? void 0 : getParams(context)) || []));
-  }
+  return result;
 }
 
-function loadCSSItem(item) {
-  if (item.type === 'style') {
-    document.head.append(createElement('style', {
-      textContent: item.data
-    }));
-  } else if (item.type === 'stylesheet') {
-    document.head.append(createElement('link', _extends({
-      rel: 'stylesheet'
-    }, item.data)));
+function asDom(result) {
+  if (result.type === MOUNT_SINGLE) {
+    return result.node;
   }
-}
 
-async function loadJS(items, context) {
-  const needPreload = items.filter(item => {
-    var _item$data2;
+  return result.children.map(asDom);
+}
+/**
+ * Mount vdom as real DOM nodes.
+ */
 
-    return item.type === 'script' && ((_item$data2 = item.data) == null ? void 0 : _item$data2.src);
-  });
-  if (needPreload.length > 1) needPreload.forEach(item => memoizedPreloadJS(item.data.src));
-  context = _extends({
-    getMarkmap: () => window.markmap
-  }, context);
 
-  for (const item of items) {
-    await loadJSItem(item, context);
+function mountDom(vnode) {
+  if (Array.isArray(vnode)) {
+    return flattenWithoutNull(vnode.map(mountDom));
   }
-}
 
-function loadCSS(items) {
-  for (const item of items) {
-    loadCSSItem(item);
-  }
+  return asDom(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:bolder}.markmap-foreign mark{background:#ffeaa7}.markmap-foreign pre,.markmap-foreign pre[class*=language-]{margin:0;padding:.2em .4em}";
+
+var css_248z = ".markmap-container{height:0;left:-100px;overflow:hidden;position:absolute;top:-100px;width:0}.markmap-container>*{display:inline-block}.markmap-container>*>.markmap-foreign:last-child{white-space:nowrap}";
+
+const globalCSS = css_248z$1;
+
 function linkWidth(nodeData) {
   const data = nodeData.data;
-  return Math.max(6 - 2 * data.d, 1.5);
+  return Math.max(6 - 2 * data.depth, 1.5);
 }
 
 function adjustSpacing(tree, spacing) {
@@ -1032,30 +1241,32 @@ function createViewHooks() {
 
 
 const refreshHook = new Hook();
+const defaultColorFn = d3.scaleOrdinal(d3.schemeCategory10);
+const isMacintosh = typeof navigator !== 'undefined' && navigator.userAgent.includes('Macintosh');
 class Markmap {
   constructor(svg, opts) {
-    this.options = void 0;
-    this.state = void 0;
-    this.svg = void 0;
-    this.styleNode = void 0;
-    this.g = void 0;
-    this.zoom = void 0;
-    this.viewHooks = void 0;
     this.revokers = [];
-    ['handleZoom', 'handleClick'].forEach(key => {
+    ['handleZoom', 'handleClick', 'handlePan'].forEach(key => {
       this[key] = this[key].bind(this);
     });
     this.viewHooks = createViewHooks();
     this.svg = svg.datum ? svg : d3.select(svg);
     this.styleNode = this.svg.append('style');
-    this.zoom = d3.zoom().on('zoom', this.handleZoom);
-    this.options = _extends$1({}, Markmap.defaultOptions, opts);
+    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;
+      }
+
+      return (!event.ctrlKey || event.type === 'wheel') && !event.button;
+    }).on('zoom', this.handleZoom);
+    this.setOptions(opts);
     this.state = {
-      id: this.options.id || getId()
+      id: this.options.id || this.svg.attr('id') || getId()
     };
-    this.g = this.svg.append('g').attr('class', `${this.state.id}-g`);
+    this.g = this.svg.append('g');
     this.updateStyle();
-    this.svg.call(this.zoom);
+    this.svg.call(this.zoom).on('wheel', this.handlePan);
     this.revokers.push(refreshHook.tap(() => {
       this.setData();
     }));
@@ -1063,34 +1274,19 @@ class Markmap {
 
   getStyleContent() {
     const {
-      style,
-      nodeFont
+      style
     } = this.options;
     const {
       id
     } = this.state;
-    const extraStyle = typeof style === 'function' ? style(id) : '';
-    const styleText = `\
-.${id} { line-height: 1; }
-.${id} a { color: #0097e6; }
-.${id} a:hover { color: #00a8ff; }
-.${id}-g > path { fill: none; }
-.${id}-g > g > circle { cursor: pointer; }
-.${id}-fo > div { display: inline-block; font: ${nodeFont}; white-space: nowrap; }
-.${id}-fo code { font-size: calc(1em - 2px); color: #555; background-color: #f0f0f0; border-radius: 2px; }
-.${id}-fo :not(pre) > code { padding: .2em .4em; }
-.${id}-fo del { text-decoration: line-through; }
-.${id}-fo em { font-style: italic; }
-.${id}-fo strong { font-weight: bolder; }
-.${id}-fo pre { margin: 0; padding: .2em .4em; }
-${extraStyle}
-`;
-    return styleText;
+    const styleText = typeof style === 'function' ? style(id) : '';
+    return [this.options.embedGlobalCSS && css_248z$1, styleText].filter(Boolean).join('\n');
   }
 
   updateStyle() {
-    this.svg.attr('class', addClass(this.svg.attr('class'), this.state.id));
-    this.styleNode.text(this.getStyleContent());
+    this.svg.attr('class', addClass(this.svg.attr('class'), 'markmap', this.state.id));
+    const style = this.getStyleContent();
+    this.styleNode.text(style);
   }
 
   handleZoom(e) {
@@ -1100,76 +1296,84 @@ ${extraStyle}
     this.g.attr('transform', transform);
   }
 
-  handleClick(e, d) {
-    var _data$p;
+  handlePan(e) {
+    e.preventDefault();
+    const transform = d3.zoomTransform(this.svg.node());
+    const newTransform = transform.translate(-e.deltaX, -e.deltaY);
+    this.svg.call(this.zoom.transform, newTransform);
+  }
+
+  handleClick(_, d) {
+    var _data$payload;
 
     const {
       data
     } = d;
-    data.p = _extends$1({}, data.p, {
-      f: !((_data$p = data.p) != null && _data$p.f)
+    data.payload = _extends({}, data.payload, {
+      fold: !((_data$payload = data.payload) != null && _data$payload.fold)
     });
     this.renderData(d.data);
   }
 
   initializeData(node) {
-    let i = 0;
+    let nodeId = 0;
     const {
-      nodeFont,
       color,
-      nodeMinHeight
+      nodeMinHeight,
+      maxWidth
     } = this.options;
     const {
       id
     } = this.state;
-    const container = document.createElement('div');
-    const containerClass = `${id}-container`;
-    container.className = addClass(container.className, `${id}-fo`, containerClass);
-    const style = document.createElement('style');
-    style.textContent = `
-${this.getStyleContent()}
-.${containerClass} {
-  position: absolute;
-  width: 0;
-  height: 0;
-  top: -100px;
-  left: -100px;
-  overflow: hidden;
-  font: ${nodeFont};
-}
-.${containerClass} > div {
-  display: inline-block;
-}
-`;
-    document.body.append(style, container);
+    const container = mountDom(jsx("div", {
+      className: `markmap-container markmap ${id}-g`
+    }));
+    const style = mountDom(jsx("style", {
+      children: [this.getStyleContent(), css_248z].join('\n')
+    }));
+    document.body.append(container, style);
+    const groupStyle = maxWidth ? `max-width: ${maxWidth}px` : null;
     walkTree(node, (item, next) => {
-      var _item$c;
-
-      item.c = (_item$c = item.c) == null ? void 0 : _item$c.map(child => _extends$1({}, child));
-      i += 1;
-      const el = document.createElement('div');
-      el.innerHTML = item.v;
-      container.append(el);
-      item.p = _extends$1({}, item.p, {
-        // unique ID
-        i,
-        el
+      var _item$children;
+
+      item.children = (_item$children = item.children) == null ? void 0 : _item$children.map(child => _extends({}, child));
+      nodeId += 1;
+      const group = mountDom(jsx("div", {
+        style: groupStyle,
+        children: jsx("div", {
+          className: "markmap-foreign",
+          dangerouslySetInnerHTML: {
+            __html: item.content
+          }
+        })
+      }));
+      container.append(group);
+      item.state = _extends({}, item.state, {
+        id: nodeId,
+        el: group.firstChild
       });
       color(item); // preload colors
 
       next();
     });
-    const nodes = arrayFrom(container.childNodes);
-    this.viewHooks.transformHtml.call(this, nodes);
+    const nodes = arrayFrom(container.childNodes).map(group => group.firstChild);
+    this.viewHooks.transformHtml.call(this, nodes); // Clone the rendered HTML and set `white-space: nowrap` to it to detect its max-width.
+    // The parent node will have a width of the max-width and the original content without
+    // `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));
+    });
     walkTree(node, (item, next, parent) => {
-      var _parent$p;
-
-      const rect = item.p.el.getBoundingClientRect();
-      item.v = item.p.el.innerHTML;
-      item.p.s = [Math.ceil(rect.width), Math.max(Math.ceil(rect.height), nodeMinHeight)]; // TODO keep keys for unchanged objects
-      // unique key, should be based on content
-
-      item.p.k = `${(parent == null ? void 0 : (_parent$p = parent.p) == null ? void 0 : _parent$p.i) || ''}.${item.p.i}:${item.v}`;
+      var _parent$state, _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.path = [parent == null ? void 0 : (_parent$state = parent.state) == null ? void 0 : _parent$state.path, item.state.id].filter(Boolean).join('.');
+      item.state.key = [parent == null ? void 0 : (_parent$state2 = parent.state) == null ? void 0 : _parent$state2.id, item.state.id].filter(Boolean).join('.') + // FIXME: find a way to check content hash
+      item.content;
       next();
     });
     container.remove();
@@ -1177,19 +1381,18 @@ ${this.getStyleContent()}
   }
 
   setOptions(opts) {
-    Object.assign(this.options, opts);
+    this.options = _extends({}, Markmap.defaultOptions, opts);
   }
 
   setData(data, opts) {
-    if (!data) data = _extends$1({}, this.state.data);
-    this.state.data = data;
-    this.initializeData(data);
+    if (data) this.state.data = data;
+    this.initializeData(this.state.data);
     if (opts) this.setOptions(opts);
     this.renderData();
   }
 
   renderData(originData) {
-    var _origin$data$p$x, _origin$data$p$y;
+    var _origin$data$state$x, _origin$data$state$y;
 
     if (!this.state.data) return;
     const {
@@ -1199,15 +1402,12 @@ ${this.getStyleContent()}
       autoFit,
       color
     } = this.options;
-    const {
-      id
-    } = this.state;
     const layout = flextree().children(d => {
-      var _d$p;
+      var _d$payload;
 
-      return !((_d$p = d.p) != null && _d$p.f) && d.c;
+      return !((_d$payload = d.payload) != null && _d$payload.fold) && d.children;
     }).nodeSize(d => {
-      const [width, height] = d.data.p.s;
+      const [width, height] = d.data.state.size;
       return [height, width + (width ? paddingX * 2 : 0) + spacingHorizontal];
     }).spacing((a, b) => {
       return a.parent === b.parent ? spacingVertical : spacingVertical * 2;
@@ -1230,43 +1430,45 @@ ${this.getStyleContent()}
     });
     if (autoFit) this.fit();
     const origin = originData && descendants.find(item => item.data === originData) || tree;
-    const x0 = (_origin$data$p$x = origin.data.p.x0) != null ? _origin$data$p$x : origin.x;
-    const y0 = (_origin$data$p$y = origin.data.p.y0) != null ? _origin$data$p$y : origin.y; // Update the nodes
+    const x0 = (_origin$data$state$x = origin.data.state.x0) != null ? _origin$data$state$x : origin.x;
+    const y0 = (_origin$data$state$y = origin.data.state.y0) != null ? _origin$data$state$y : origin.y; // Update the nodes
 
-    const node = this.g.selectAll(childSelector('g')).data(descendants, d => d.data.p.k);
-    const nodeEnter = node.enter().append('g').attr('transform', d => `translate(${y0 + origin.ySizeInner - d.ySizeInner},${x0 + origin.xSize / 2 - d.xSize})`);
+    const node = this.g.selectAll(childSelector('g')).data(descendants, d => d.data.state.key);
+    const nodeEnter = node.enter().append('g').attr('class', 'markmap-node').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 nodeExit = this.transition(node.exit());
-    nodeExit.select('rect').attr('width', 0).attr('x', d => d.ySizeInner);
+    nodeExit.select('line').attr('x1', d => d.ySizeInner).attr('x2', d => d.ySizeInner);
     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();
     const nodeMerge = node.merge(nodeEnter);
-    this.transition(nodeMerge).attr('transform', d => `translate(${d.y},${d.x - d.xSize / 2})`);
-    const rect = nodeMerge.selectAll(childSelector('rect')).data(d => [d], d => d.data.p.k).join(enter => {
-      return enter.append('rect').attr('x', d => d.ySizeInner).attr('y', d => d.xSize - linkWidth(d) / 2).attr('width', 0).attr('height', linkWidth);
+    this.transition(nodeMerge).attr('transform', d => `translate(${d.y},${d.x - d.xSize / 2})`); // 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('y1', d => d.xSize).attr('x2', d => d.ySizeInner).attr('y2', d => d.xSize);
     }, update => update, exit => exit.remove());
-    this.transition(rect).attr('x', -1).attr('width', d => d.ySizeInner + 2).attr('fill', d => color(d.data));
-    const circle = nodeMerge.selectAll(childSelector('circle')).data(d => d.data.c ? [d] : [], d => d.data.p.k).join(enter => {
+    this.transition(line).attr('x1', -1).attr('x2', d => d.ySizeInner + 2).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', this.handleClick);
     }, update => update, exit => exit.remove());
     this.transition(circle).attr('r', 6).attr('stroke', d => color(d.data)).attr('fill', d => {
-      var _d$data$p;
+      var _d$data$payload;
 
-      return (_d$data$p = d.data.p) != null && _d$data$p.f && d.data.c ? color(d.data) : '#fff';
+      return (_d$data$payload = d.data.payload) != null && _d$data$payload.fold && d.data.children ? color(d.data) : '#fff';
     });
-    const foreignObject = nodeMerge.selectAll(childSelector('foreignObject')).data(d => [d], d => d.data.p.k).join(enter => {
-      const fo = enter.append('foreignObject').attr('class', `${id}-fo`).attr('x', paddingX).attr('y', 0).style('opacity', 0).attr('height', d => d.xSize).on('mousedown', stopPropagation).on('dblclick', stopPropagation);
+    const foreignObject = nodeMerge.selectAll(childSelector('foreignObject')).data(d => [d], d => d.data.state.key).join(enter => {
+      const fo = enter.append('foreignObject').attr('class', 'markmap-foreign').attr('x', paddingX).attr('y', 0).style('opacity', 0).attr('height', d => d.xSize).on('mousedown', stopPropagation).on('dblclick', stopPropagation);
       fo.append('xhtml:div').select(function select(d) {
-        const node = d.data.p.el.cloneNode(true);
-        this.replaceWith(node);
-        return node;
+        const clone = d.data.state.el.cloneNode(true);
+        this.replaceWith(clone);
+        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));
     this.transition(foreignObject).style('opacity', 1); // Update the links
 
-    const path = this.g.selectAll(childSelector('path')).data(links, d => d.target.data.p.k).join(enter => {
+    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];
-      return enter.insert('path', 'g').attr('d', linkShape({
+      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
       }));
@@ -1286,8 +1488,8 @@ ${this.getStyleContent()}
       });
     });
     descendants.forEach(d => {
-      d.data.p.x0 = d.x;
-      d.data.p.y0 = d.y;
+      d.data.state.x0 = d.x;
+      d.data.state.y0 = d.y;
     });
   }
 
@@ -1344,7 +1546,7 @@ ${this.getStyleContent()}
     const [left, right] = [itemData.y, itemData.y + itemData.ySizeInner + 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$1({
+    const pd = _extends({
       left: 0,
       right: 0,
       top: 0,
@@ -1380,7 +1582,8 @@ ${this.getStyleContent()}
   }
 
   destroy() {
-    this.svg.remove();
+    this.svg.on('.zoom', null);
+    this.svg.html(null);
     this.revokers.forEach(fn => {
       fn();
     });
@@ -1399,15 +1602,49 @@ ${this.getStyleContent()}
 
 }
 Markmap.defaultOptions = {
+  autoFit: false,
+  color: node => defaultColorFn(`${node.state.id}`),
   duration: 500,
-  nodeFont: '300 16px/20px sans-serif',
+  embedGlobalCSS: true,
+  fitRatio: 0.95,
+  maxWidth: 0,
   nodeMinHeight: 16,
-  spacingVertical: 5,
+  paddingX: 8,
+  scrollForPan: isMacintosh,
   spacingHorizontal: 80,
-  autoFit: false,
-  fitRatio: 0.95,
-  color: (colorFn => node => colorFn(node.p.i))(d3.scaleOrdinal(d3.schemeCategory10)),
-  paddingX: 8
+  spacingVertical: 5
 };
+function deriveOptions(jsonOptions) {
+  const {
+    color,
+    duration,
+    maxWidth
+  } = jsonOptions || {};
+  let opts;
+
+  if (typeof color === 'string') {
+    opts = _extends({}, opts, {
+      color: () => color
+    });
+  } else if (color != null && color.length) {
+    opts = _extends({}, opts, {
+      color: node => color[node.state.id % color.length]
+    });
+  }
+
+  if (typeof duration === 'number') {
+    opts = _extends({}, opts, {
+      duration
+    });
+  }
+
+  if (typeof maxWidth === 'number') {
+    opts = _extends({}, opts, {
+      maxWidth
+    });
+  }
+
+  return opts;
+}
 
-export { Markmap, loadCSS, loadJS, refreshHook };
+export { Markmap, defaultColorFn, deriveOptions, globalCSS, loadCSS, loadJS, refreshHook };