markmap-view 0.2.7 → 0.13.0-alpha.0

package/dist/index.js

@@ -1,4 +1,4 @@
-/*! markmap-view v0.2.7 | MIT License */
+/*! markmap-view v0.13.0-alpha.0 | MIT License */
 (function (exports, d3) {
 'use strict';
 
@@ -16,6 +16,34 @@ return Object.freeze(n);
 
 var d3__namespace = /*#__PURE__*/_interopNamespace(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++) {
@@ -34,6 +62,181 @@ function _extends$1() {
   return _extends$1.apply(this, arguments);
 }
 
+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);
+
+  walk(tree);
+}
+
+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 addClass(className, ...rest) {
+  const classList = (className || '').split(' ').filter(Boolean);
+  rest.forEach(item => {
+    if (item && classList.indexOf(item) < 0) classList.push(item);
+  });
+  return classList.join(' ');
+}
+
+function childSelector(filter) {
+  if (typeof filter === 'string') {
+    const tagName = filter;
+
+    filter = el => el.tagName === tagName;
+  }
+
+  const filterFn = filter;
+  return function selector() {
+    let nodes = 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];
+
+    if (!data) {
+      data = {
+        value: fn(...args)
+      };
+      cache[key] = data;
+    }
+
+    return data.value;
+  };
+}
+
+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,
@@ -208,7 +411,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],
@@ -225,7 +428,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;
       }
@@ -252,13 +455,13 @@ function computeHeight(node) {
 
   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,
@@ -784,212 +987,245 @@ const updateLows = (lowY, index, lastLows) => {
   };
 };
 
-/*! markmap-common v0.1.6 | 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 flattenWithoutNull(array) {
+  var result = [];
 
-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
-
-      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) {
@@ -1020,23 +1256,32 @@ function createViewHooks() {
 
 
 const refreshHook = new Hook();
+const defaultColorFn = d3__namespace.scaleOrdinal(d3__namespace.schemeCategory10);
+const isMacintosh = typeof navigator !== 'undefined' && navigator.userAgent.includes('Macintosh');
 class Markmap {
   constructor(svg, opts) {
     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__namespace.select(svg);
     this.styleNode = this.svg.append('style');
-    this.zoom = d3__namespace.zoom().on('zoom', this.handleZoom);
-    this.options = _extends$1({}, Markmap.defaultOptions, opts);
+    this.zoom = d3__namespace.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();
     }));
@@ -1044,34 +1289,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) {
@@ -1081,76 +1311,84 @@ ${extraStyle}
     this.g.attr('transform', transform);
   }
 
-  handleClick(e, d) {
-    var _data$p;
+  handlePan(e) {
+    e.preventDefault();
+    const transform = d3__namespace.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();
@@ -1158,7 +1396,7 @@ ${this.getStyleContent()}
   }
 
   setOptions(opts) {
-    Object.assign(this.options, opts);
+    this.options = _extends({}, Markmap.defaultOptions, opts);
   }
 
   setData(data, opts) {
@@ -1169,7 +1407,7 @@ ${this.getStyleContent()}
   }
 
   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 {
@@ -1179,15 +1417,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;
@@ -1210,33 +1445,35 @@ ${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 clone = d.data.p.el.cloneNode(true);
+        const clone = d.data.state.el.cloneNode(true);
         this.replaceWith(clone);
         return clone;
       }).attr('xmlns', 'http://www.w3.org/1999/xhtml');
@@ -1244,9 +1481,9 @@ ${this.getStyleContent()}
     }, 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
       }));
@@ -1266,8 +1503,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;
     });
   }
 
@@ -1324,7 +1561,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,
@@ -1360,7 +1597,8 @@ ${this.getStyleContent()}
   }
 
   destroy() {
-    this.svg.remove();
+    this.svg.on('.zoom', null);
+    this.svg.html(null);
     this.revokers.forEach(fn => {
       fn();
     });
@@ -1379,18 +1617,55 @@ ${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__namespace.scaleOrdinal(d3__namespace.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;
+}
 
 exports.Markmap = Markmap;
+exports.defaultColorFn = defaultColorFn;
+exports.deriveOptions = deriveOptions;
+exports.globalCSS = globalCSS;
 exports.loadCSS = loadCSS;
 exports.loadJS = loadJS;
 exports.refreshHook = refreshHook;