markmap-view 0.14.0 → 0.14.2-alpha.4

package/dist/index.esm.js

@@ -1,209 +1,8 @@
-/*! markmap-view v0.14.0 | MIT License */
+/*! markmap-view v0.14.2-alpha.4+569dd11 | MIT License */
+import { Hook, getId, addClass, walkTree, arrayFrom, childSelector, noop } from 'markmap-common';
+export { loadCSS, loadJS } from 'markmap-common';
 import * as d3 from 'd3';
 
-/*! markmap-common v0.14.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++) {
-      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
-  }));
-});
-
-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++) {
@@ -1266,7 +1065,6 @@ class Markmap {
     };
     this.g = this.svg.append('g');
     this.updateStyle();
-    this.svg.call(this.zoom).on('wheel', this.handlePan);
     this.revokers.push(refreshHook.tap(() => {
       this.setData();
     }));
@@ -1335,8 +1133,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;
+    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;
@@ -1352,7 +1150,8 @@ class Markmap {
       container.append(group);
       item.state = _extends({}, item.state, {
         id: nodeId,
-        el: group.firstChild
+        el: group.firstChild,
+        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
 
@@ -1379,12 +1178,11 @@ class Markmap {
       node.parentNode.append(node.cloneNode(true));
     });
     walkTree(node, (item, next, parent) => {
-      var _parent$state, _parent$state2;
+      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();
@@ -1395,6 +1193,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) {
@@ -1620,7 +1426,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,
@@ -1630,13 +1436,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) {
@@ -1646,7 +1455,20 @@ function deriveOptions(jsonOptions) {
   } else if (color != null && color.length) {
     const colorFn = d3.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 + 1).join('.')
+        })
+      });
+      return color(node);
+    };
   }
 
   const numberKeys = ['duration', 'maxWidth', 'initialExpandLevel'];
@@ -1654,7 +1476,12 @@ 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;
 }
 
-export { Markmap, defaultColorFn, deriveOptions, globalCSS, loadCSS, loadJS, refreshHook };
+export { Markmap, defaultColorFn, deriveOptions, globalCSS, refreshHook };