markmap-view 0.14.2-alpha.0 → 0.14.2

package/dist/index.cjs.js

@@ -1,6 +1,7 @@
-/*! markmap-view v0.14.2-alpha.0+518591b | MIT License */
+/*! markmap-view v0.14.2 | MIT License */
 'use strict';
 
+var markmapCommon = require('markmap-common');
 var d3 = require('d3');
 
 function _interopNamespace(e) {
@@ -17,219 +18,6 @@ return Object.freeze(n);
 
 var d3__namespace = /*#__PURE__*/_interopNamespace(d3);
 
-/*! markmap-common v0.14.2-alpha.0+518591b | 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++) {
-      var source = arguments[i];
-
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-
-    return target;
-  };
-
-  return _extends$1.apply(this, arguments);
-}
-
-const uniqId = Math.random().toString(36).slice(2, 8);
-let globalIndex = 0;
-
-function getId() {
-  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
-  }));
-});
-
-async function loadJSItem(item, context) {
-  if (!item.loaded) {
-    if (item.type === 'script') {
-      item.loaded = new Promise((resolve, reject) => {
-        var _item$data;
-
-        document.head.append(createElement('script', _extends$1({}, item.data, {
-          onload: resolve,
-          onerror: reject
-        }))); // Run inline script synchronously
-
-        if (!((_item$data = item.data) != null && _item$data.src)) resolve(undefined);
-      }).then(() => {
-        item.loaded = true;
-      });
-    }
-
-    if (item.type === 'iife') {
-      const {
-        fn,
-        getParams
-      } = item.data;
-      fn(...((getParams == null ? void 0 : getParams(context)) || []));
-      item.loaded = true;
-    }
-  }
-
-  await item.loaded;
-}
-
-function loadCSSItem(item) {
-  if (item.loaded) return;
-  item.loaded = true;
-
-  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++) {
@@ -1240,7 +1028,7 @@ function linkWidth(nodeData) {
 }
 
 function adjustSpacing(tree, spacing) {
-  walkTree(tree, (d, next) => {
+  markmapCommon.walkTree(tree, (d, next) => {
     d.ySizeInner = d.ySize - spacing;
     d.y += spacing;
     next();
@@ -1258,7 +1046,7 @@ function stopPropagation(e) {
 
 function createViewHooks() {
   return {
-    transformHtml: new Hook()
+    transformHtml: new markmapCommon.Hook()
   };
 }
 /**
@@ -1266,7 +1054,7 @@ function createViewHooks() {
  */
 
 
-const refreshHook = new Hook();
+const refreshHook = new markmapCommon.Hook();
 const defaultColorFn = d3__namespace.scaleOrdinal(d3__namespace.schemeCategory10);
 const isMacintosh = typeof navigator !== 'undefined' && navigator.userAgent.includes('Macintosh');
 class Markmap {
@@ -1288,11 +1076,10 @@ class Markmap {
     }).on('zoom', this.handleZoom);
     this.setOptions(opts);
     this.state = {
-      id: this.options.id || this.svg.attr('id') || getId()
+      id: this.options.id || this.svg.attr('id') || markmapCommon.getId()
     };
     this.g = this.svg.append('g');
     this.updateStyle();
-    this.svg.call(this.zoom).on('wheel', this.handlePan);
     this.revokers.push(refreshHook.tap(() => {
       this.setData();
     }));
@@ -1310,7 +1097,7 @@ class Markmap {
   }
 
   updateStyle() {
-    this.svg.attr('class', addClass(this.svg.attr('class'), 'markmap', this.state.id));
+    this.svg.attr('class', markmapCommon.addClass(this.svg.attr('class'), 'markmap', this.state.id));
     const style = this.getStyleContent();
     this.styleNode.text(style);
   }
@@ -1361,8 +1148,8 @@ class Markmap {
     document.body.append(container, style);
     const groupStyle = maxWidth ? `max-width: ${maxWidth}px` : '';
     let foldRecursively = 0;
-    walkTree(node, (item, next) => {
-      var _item$children, _item$payload;
+    markmapCommon.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;
@@ -1380,6 +1167,7 @@ class Markmap {
         id: nodeId,
         el: group.firstChild
       });
+      item.state.path = [parent == null ? void 0 : (_parent$state = parent.state) == null ? void 0 : _parent$state.path, item.state.id].filter(Boolean).join('.');
       color(item); // preload colors
 
       const isFoldRecursively = ((_item$payload = item.payload) == null ? void 0 : _item$payload.fold) === 2;
@@ -1395,7 +1183,7 @@ class Markmap {
       next();
       if (isFoldRecursively) foldRecursively -= 1;
     });
-    const nodes = arrayFrom(container.childNodes).map(group => group.firstChild);
+    const nodes = markmapCommon.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
@@ -1404,13 +1192,12 @@ class Markmap {
     nodes.forEach(node => {
       node.parentNode.append(node.cloneNode(true));
     });
-    walkTree(node, (item, next, parent) => {
-      var _parent$state, _parent$state2;
+    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.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();
@@ -1421,6 +1208,14 @@ class Markmap {
 
   setOptions(opts) {
     this.options = _extends({}, Markmap.defaultOptions, 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);
   }
 
   setData(data, opts) {
@@ -1472,7 +1267,7 @@ class Markmap {
     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.state.key);
+    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 nodeExit = this.transition(node.exit());
     nodeExit.select('line').attr('x1', d => d.ySizeInner).attr('x2', d => d.ySizeInner);
@@ -1485,12 +1280,12 @@ 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(childSelector('line')).data(d => [d], d => d.data.state.key).join(enter => {
+    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);
     }, 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); // 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 => {
+    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));
     }, 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 => {
@@ -1498,7 +1293,7 @@ class Markmap {
 
       return (_d$data$payload2 = d.data.payload) != null && _d$data$payload2.fold && d.data.children ? color(d.data) : '#fff';
     });
-    const foreignObject = nodeMerge.selectAll(childSelector('foreignObject')).data(d => [d], d => d.data.state.key).join(enter => {
+    const foreignObject = nodeMerge.selectAll(markmapCommon.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);
@@ -1509,7 +1304,7 @@ class Markmap {
     }, update => update, exit => exit.remove()).attr('width', d => Math.max(0, d.ySizeInner - paddingX * 2)).attr('height', d => d.xSize);
     this.transition(foreignObject).style('opacity', 1); // Update the links
 
-    const path = this.g.selectAll(childSelector('path')).data(links, d => d.target.data.state.key).join(enter => {
+    const 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];
       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,
@@ -1566,7 +1361,7 @@ class Markmap {
     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(noop);
+    return this.transition(this.svg).call(this.zoom.transform, initialZoom).end().catch(markmapCommon.noop);
   }
   /**
    * Pan the content to make the provided node visible in the viewport.
@@ -1576,7 +1371,7 @@ class Markmap {
   async ensureView(node, padding) {
     let g;
     let itemData;
-    this.g.selectAll(childSelector('g')).each(function walk(d) {
+    this.g.selectAll(markmapCommon.childSelector('g')).each(function walk(d) {
       if (d.data === node) {
         g = this;
         itemData = d;
@@ -1603,7 +1398,7 @@ class Markmap {
 
     if (dx || dy) {
       const newTransform = transform.translate(dx, dy);
-      return this.transition(this.svg).call(this.zoom.transform, newTransform).end().catch(noop);
+      return this.transition(this.svg).call(this.zoom.transform, newTransform).end().catch(markmapCommon.noop);
     }
   }
   /**
@@ -1621,7 +1416,7 @@ class Markmap {
     const halfHeight = offsetHeight / 2;
     const transform = d3__namespace.zoomTransform(svgNode);
     const newTransform = transform.translate((halfWidth - transform.x) * (1 - scale) / transform.k, (halfHeight - transform.y) * (1 - scale) / transform.k).scale(scale);
-    return this.transition(this.svg).call(this.zoom.transform, newTransform).end().catch(noop);
+    return this.transition(this.svg).call(this.zoom.transform, newTransform).end().catch(markmapCommon.noop);
   }
 
   destroy() {
@@ -1646,7 +1441,7 @@ class Markmap {
 }
 Markmap.defaultOptions = {
   autoFit: false,
-  color: node => defaultColorFn(`${node.state.id}`),
+  color: node => defaultColorFn(`${node.state.path}`),
   duration: 500,
   embedGlobalCSS: true,
   fitRatio: 0.95,
@@ -1656,13 +1451,16 @@ Markmap.defaultOptions = {
   scrollForPan: isMacintosh,
   spacingHorizontal: 80,
   spacingVertical: 5,
-  initialExpandLevel: -1
+  initialExpandLevel: -1,
+  zoom: true,
+  pan: true
 };
 function deriveOptions(jsonOptions) {
   const opts = {};
   jsonOptions || (jsonOptions = {});
   const {
-    color
+    color,
+    colorFreezeLevel
   } = jsonOptions;
 
   if ((color == null ? void 0 : color.length) === 1) {
@@ -1672,7 +1470,20 @@ function deriveOptions(jsonOptions) {
   } else if (color != null && color.length) {
     const colorFn = d3__namespace.scaleOrdinal(color);
 
-    opts.color = node => colorFn(`${node.state.id}`);
+    opts.color = node => colorFn(`${node.state.path}`);
+  }
+
+  if (colorFreezeLevel) {
+    const color = opts.color || Markmap.defaultOptions.color;
+
+    opts.color = node => {
+      node = _extends({}, node, {
+        state: _extends({}, node.state, {
+          path: node.state.path.split('.').slice(0, colorFreezeLevel).join('.')
+        })
+      });
+      return color(node);
+    };
   }
 
   const numberKeys = ['duration', 'maxWidth', 'initialExpandLevel'];
@@ -1680,13 +1491,18 @@ function deriveOptions(jsonOptions) {
     const value = jsonOptions[key];
     if (typeof value === 'number') opts[key] = value;
   });
+  const booleanKeys = ['zoom', 'pan'];
+  booleanKeys.forEach(key => {
+    const value = jsonOptions[key];
+    if (value != null) opts[key] = !!value;
+  });
   return opts;
 }
 
+exports.loadCSS = markmapCommon.loadCSS;
+exports.loadJS = markmapCommon.loadJS;
 exports.Markmap = Markmap;
 exports.defaultColorFn = defaultColorFn;
 exports.deriveOptions = deriveOptions;
 exports.globalCSS = globalCSS;
-exports.loadCSS = loadCSS;
-exports.loadJS = loadJS;
 exports.refreshHook = refreshHook;