markmap-view 0.14.5-alpha.13 → 0.14.5-alpha.16

package/dist/index.js

@@ -1,4 +1,4 @@
-/*! markmap-view v0.14.5-alpha.13+50ca560 | MIT License */
+/*! markmap-view v0.14.5-alpha.16+33e8294 | MIT License */
 'use strict';
 
 var markmapCommon = require('markmap-common');
@@ -617,60 +617,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 +665,7 @@ function mountAttributes(domElement, props, env) {
     }
   }
 }
-var attrMap = {
+const attrMap = {
   className: 'class',
   labelFor: 'for'
 };
@@ -689,7 +676,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,113 +684,79 @@ 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}";
@@ -815,13 +768,6 @@ 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);
   return numbers[index];
@@ -843,10 +789,25 @@ const defaultColorFn = d3__namespace.scaleOrdinal(d3__namespace.schemeCategory10
 const isMacintosh = typeof navigator !== 'undefined' && navigator.userAgent.includes('Macintosh');
 class Markmap {
   constructor(svg, opts) {
+    this.options = Markmap.defaultOptions;
     this.revokers = [];
-    ['handleZoom', 'handleClick', 'handlePan'].forEach(key => {
-      this[key] = this[key].bind(this);
-    });
+    this.handleZoom = e => {
+      const {
+        transform
+      } = e;
+      this.g.attr('transform', transform);
+    };
+    this.handlePan = e => {
+      e.preventDefault();
+      const transform = d3__namespace.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.styleNode = this.svg.append('style');
@@ -859,7 +820,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') || markmapCommon.getId(),
+      minX: 0,
+      maxX: 0,
+      minY: 0,
+      maxY: 0
     };
     this.g = this.svg.append('g');
     this.revokers.push(refreshHook.tap(() => {
@@ -881,18 +846,6 @@ class Markmap {
     const style = this.getStyleContent();
     this.styleNode.text(style);
   }
-  handleZoom(e) {
-    const {
-      transform
-    } = e;
-    this.g.attr('transform', transform);
-  }
-  handlePan(e) {
-    e.preventDefault();
-    const transform = d3__namespace.zoomTransform(this.svg.node());
-    const newTransform = transform.translate(-e.deltaX / transform.k, -e.deltaY / transform.k);
-    this.svg.call(this.zoom.transform, newTransform);
-  }
   toggleNode(data, recursive = false) {
     var _data$payload;
     const fold = (_data$payload = data.payload) != null && _data$payload.fold ? 0 : 1;
@@ -912,11 +865,6 @@ class Markmap {
     }
     this.renderData(data);
   }
-  handleClick(e, d) {
-    let recursive = this.options.toggleRecursively;
-    if (e.ctrlKey) recursive = !recursive;
-    this.toggleNode(d.data, recursive);
-  }
   initializeData(node) {
     let nodeId = 0;
     const {
@@ -976,14 +924,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) => {
       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();
@@ -998,11 +948,16 @@ class Markmap {
     } 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();
@@ -1017,25 +972,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 maxY = d3__namespace.max(descendants, d => d.y + d.ySize - spacingHorizontal);
     Object.assign(this.state, {
       minX,
       maxX,
@@ -1049,11 +1003,11 @@ class Markmap {
 
     // 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 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(' ');
@@ -1062,15 +1016,18 @@ class Markmap {
 
     // 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);
+      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(markmapCommon.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';
     });
@@ -1082,26 +1039,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 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
@@ -1156,9 +1115,12 @@ class Markmap {
     });
     if (!itemData) return;
     const svgNode = this.svg.node();
+    const {
+      spacingHorizontal
+    } = this.options;
     const relRect = svgNode.getBoundingClientRect();
     const transform = d3__namespace.zoomTransform(svgNode);
-    const [left, right] = [itemData.y, itemData.y + itemData.ySizeInner + 2].map(x => x * transform.k + transform.x);
+    const [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({
@@ -1199,7 +1161,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);
@@ -1211,7 +1173,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,
@@ -1227,22 +1192,22 @@ Markmap.defaultOptions = {
   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}`);
+    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('.')
@@ -1253,15 +1218,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;