markmap-view 0.15.0-alpha.0 → 0.15.0

package/dist/index.js

@@ -1,21 +1,7 @@
-/*! markmap-view v0.15.0-alpha.0 | MIT License */
-'use strict';
-
-var markmapCommon = require('markmap-common');
-var d3 = require('d3');
-
-function _interopNamespaceDefault(e) {
-var n = Object.create(null);
-if (e) {
-for (var k in e) {
-n[k] = e[k];
-}
-}
-n.default = e;
-return Object.freeze(n);
-}
-
-var d3__namespace = /*#__PURE__*/_interopNamespaceDefault(d3);
+/*! markmap-view v0.15.0 | MIT License */
+import { Hook, getId, addClass, walkTree, childSelector, noop } from 'markmap-common';
+export { loadCSS, loadJS } from 'markmap-common';
+import { scaleOrdinal, schemeCategory10, zoomTransform, select, zoom, linkHorizontal, min, max, zoomIdentity, minIndex } from 'd3';
 
 function _extends() {
   _extends = Object.assign ? Object.assign.bind() : function (target) {
@@ -242,8 +228,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,
@@ -617,60 +682,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 {
@@ -678,7 +730,7 @@ function mountAttributes(domElement, props, env) {
     }
   }
 }
-var attrMap = {
+const attrMap = {
   className: 'class',
   labelFor: 'for'
 };
@@ -689,7 +741,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 {
@@ -697,116 +749,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}";
 
@@ -815,15 +833,8 @@ function linkWidth(nodeData) {
   const data = nodeData.data;
   return Math.max(4 - 2 * data.depth, 1.5);
 }
-function adjustSpacing(tree, spacing) {
-  markmapCommon.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 = minIndex(numbers, by);
   return numbers[index];
 }
 function stopPropagation(e) {
@@ -831,26 +842,41 @@ function stopPropagation(e) {
 }
 function createViewHooks() {
   return {
-    transformHtml: new markmapCommon.Hook()
+    transformHtml: new Hook()
   };
 }
 
 /**
  * A global hook to refresh all markmaps when called.
  */
-const refreshHook = new markmapCommon.Hook();
-const defaultColorFn = d3__namespace.scaleOrdinal(d3__namespace.schemeCategory10);
+const refreshHook = new Hook();
+const defaultColorFn = scaleOrdinal(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 = 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 (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 : select(svg);
     this.styleNode = this.svg.append('style');
-    this.zoom = d3__namespace.zoom().filter(event => {
+    this.zoom = zoom().filter(event => {
       if (this.options.scrollForPan) {
         // Pan with wheels, zoom with ctrl+wheels
         if (event.type === 'wheel') return event.ctrlKey && !event.button;
@@ -859,7 +885,11 @@ class Markmap {
     }).on('zoom', this.handleZoom);
     this.setOptions(opts);
     this.state = {
-      id: this.options.id || this.svg.attr('id') || markmapCommon.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(() => {
@@ -877,28 +907,16 @@ class Markmap {
     return [this.options.embedGlobalCSS && css_248z$1, styleText].filter(Boolean).join('\n');
   }
   updateStyle() {
-    this.svg.attr('class', markmapCommon.addClass(this.svg.attr('class'), 'markmap', this.state.id));
+    this.svg.attr('class', addClass(this.svg.attr('class'), 'markmap', this.state.id));
     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;
     if (recursive) {
       // recursively
-      markmapCommon.walkTree(data, (item, next) => {
+      walkTree(data, (item, next) => {
         item.payload = _extends({}, item.payload, {
           fold
         });
@@ -912,9 +930,6 @@ class Markmap {
     }
     this.renderData(data);
   }
-  handleClick(e, d) {
-    this.toggleNode(d.data, e.ctrlKey);
-  }
   initializeData(node) {
     let nodeId = 0;
     const {
@@ -935,7 +950,7 @@ class Markmap {
     document.body.append(container, style);
     const groupStyle = maxWidth ? `max-width: ${maxWidth}px` : '';
     let foldRecursively = 0;
-    markmapCommon.walkTree(node, (item, next, parent) => {
+    walkTree(node, (item, next, parent) => {
       var _item$children, _parent$state, _item$payload;
       item.children = (_item$children = item.children) == null ? void 0 : _item$children.map(child => _extends({}, child));
       nodeId += 1;
@@ -974,14 +989,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));
     });
-    markmapCommon.walkTree(node, (item, next, parent) => {
+    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();
@@ -990,17 +1007,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();
@@ -1015,25 +1037,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 = linkHorizontal();
+    const minX = min(descendants, d => d.x - d.xSize / 2);
+    const maxX = max(descendants, d => d.x + d.xSize / 2);
+    const minY = min(descendants, d => d.y);
+    const maxY = max(descendants, d => d.y + d.ySize - spacingHorizontal);
     Object.assign(this.state, {
       minX,
       maxX,
@@ -1046,12 +1067,12 @@ class Markmap {
     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(markmapCommon.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 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.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(' ');
@@ -1059,20 +1080,23 @@ class Markmap {
     this.transition(nodeMerge).attr('transform', d => `translate(${d.y},${d.x - d.xSize / 2})`);
 
     // Update lines under the content
-    const line = nodeMerge.selectAll(markmapCommon.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);
+    const line = nodeMerge.selectAll(childSelector('line')).data(d => [d], d => d.data.state.key).join(enter => {
+      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(markmapCommon.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';
     });
-    const foreignObject = nodeMerge.selectAll(markmapCommon.childSelector('foreignObject')).data(d => [d], d => d.data.state.key).join(enter => {
+    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).on('mousedown', stopPropagation).on('dblclick', stopPropagation);
       fo.append('xhtml:div').select(function select(d) {
         const clone = d.data.state.el.cloneNode(true);
@@ -1080,26 +1104,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(markmapCommon.childSelector('path')).data(links, d => d.target.data.state.key).join(enter => {
-      const source = [y0 + origin.ySizeInner, x0 + origin.xSize / 2];
+    const path = this.g.selectAll(childSelector('path')).data(links, d => d.target.data.state.key).join(enter => {
+      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
@@ -1138,8 +1164,8 @@ 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);
-    return this.transition(this.svg).call(this.zoom.transform, initialZoom).end().catch(markmapCommon.noop);
+    const initialZoom = 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);
   }
 
   /**
@@ -1147,16 +1173,19 @@ class Markmap {
    */
   async ensureView(node, padding) {
     let itemData;
-    this.g.selectAll(markmapCommon.childSelector('g')).each(function walk(d) {
+    this.g.selectAll(childSelector('g')).each(function walk(d) {
       if (d.data === node) {
         itemData = d;
       }
     });
     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 = 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({
@@ -1171,7 +1200,7 @@ class Markmap {
     const dy = dys[0] * dys[1] > 0 ? minBy(dys, Math.abs) / transform.k : 0;
     if (dx || dy) {
       const newTransform = transform.translate(dx, dy);
-      return this.transition(this.svg).call(this.zoom.transform, newTransform).end().catch(markmapCommon.noop);
+      return this.transition(this.svg).call(this.zoom.transform, newTransform).end().catch(noop);
     }
   }
 
@@ -1186,9 +1215,9 @@ class Markmap {
     } = svgNode.getBoundingClientRect();
     const halfWidth = offsetWidth / 2;
     const halfHeight = offsetHeight / 2;
-    const transform = d3__namespace.zoomTransform(svgNode);
+    const transform = 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(markmapCommon.noop);
+    return this.transition(this.svg).call(this.zoom.transform, newTransform).end().catch(noop);
   }
   destroy() {
     this.svg.on('.zoom', null);
@@ -1197,7 +1226,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);
@@ -1209,7 +1238,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,
@@ -1221,25 +1253,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 = 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('.')
@@ -1250,21 +1283,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.loadCSS = markmapCommon.loadCSS;
-exports.loadJS = markmapCommon.loadJS;
-exports.Markmap = Markmap;
-exports.defaultColorFn = defaultColorFn;
-exports.deriveOptions = deriveOptions;
-exports.globalCSS = globalCSS;
-exports.refreshHook = refreshHook;
+export { Markmap, defaultColorFn, deriveOptions, globalCSS, refreshHook };