markmap-view 0.14.5-alpha.18 → 0.14.5-alpha.21

package/dist/browser/index.js

@@ -1,21 +1,8 @@
-/*! markmap-view v0.14.5-alpha.18+44c9639 | MIT License */
+/*! markmap-view v0.14.5-alpha.21+fb81f2c | MIT License */
 (function (exports, d3) {
 'use strict';
 
-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-common v0.14.5-alpha.18+44c9639 | MIT License */
+/*! markmap-common v0.14.5-alpha.21+fb81f2c | MIT License */
 class Hook {
   constructor() {
     this.listeners = [];
@@ -548,8 +535,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,
@@ -1065,7 +1131,7 @@ function mountDom(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}";
 
@@ -1075,7 +1141,7 @@ function linkWidth(nodeData) {
   return Math.max(4 - 2 * data.depth, 1.5);
 }
 function minBy(numbers, by) {
-  const index = d3__namespace.minIndex(numbers, by);
+  const index = d3.minIndex(numbers, by);
   return numbers[index];
 }
 function stopPropagation(e) {
@@ -1091,7 +1157,7 @@ function createViewHooks() {
  * A global hook to refresh all markmaps when called.
  */
 const refreshHook = new Hook();
-const defaultColorFn = d3__namespace.scaleOrdinal(d3__namespace.schemeCategory10);
+const defaultColorFn = d3.scaleOrdinal(d3.schemeCategory10);
 const isMacintosh = typeof navigator !== 'undefined' && navigator.userAgent.includes('Macintosh');
 class Markmap {
   constructor(svg, opts) {
@@ -1105,7 +1171,7 @@ class Markmap {
     };
     this.handlePan = e => {
       e.preventDefault();
-      const transform = d3__namespace.zoomTransform(this.svg.node());
+      const transform = d3.zoomTransform(this.svg.node());
       const newTransform = transform.translate(-e.deltaX / transform.k, -e.deltaY / transform.k);
       this.svg.call(this.zoom.transform, newTransform);
     };
@@ -1115,9 +1181,9 @@ class Markmap {
       this.toggleNode(d.data, recursive);
     };
     this.viewHooks = createViewHooks();
-    this.svg = svg.datum ? svg : d3__namespace.select(svg);
+    this.svg = svg.datum ? svg : d3.select(svg);
     this.styleNode = this.svg.append('style');
-    this.zoom = d3__namespace.zoom().filter(event => {
+    this.zoom = d3.zoom().filter(event => {
       if (this.options.scrollForPan) {
         // Pan with wheels, zoom with ctrl+wheels
         if (event.type === 'wheel') return event.ctrlKey && !event.button;
@@ -1291,11 +1357,11 @@ class Markmap {
     layout(tree);
     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.ySize - spacingHorizontal);
+    const linkShape = d3.linkHorizontal();
+    const minX = d3.min(descendants, d => d.x - d.xSize / 2);
+    const maxX = d3.max(descendants, d => d.x + d.xSize / 2);
+    const minY = d3.min(descendants, d => d.y);
+    const maxY = d3.max(descendants, d => d.y + d.ySize - spacingHorizontal);
     Object.assign(this.state, {
       minX,
       maxX,
@@ -1405,7 +1471,7 @@ 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);
+    const initialZoom = d3.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);
   }
 
@@ -1425,7 +1491,7 @@ class Markmap {
       spacingHorizontal
     } = this.options;
     const relRect = svgNode.getBoundingClientRect();
-    const transform = d3__namespace.zoomTransform(svgNode);
+    const transform = d3.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.
@@ -1456,7 +1522,7 @@ class Markmap {
     } = svgNode.getBoundingClientRect();
     const halfWidth = offsetWidth / 2;
     const halfHeight = offsetHeight / 2;
-    const transform = d3__namespace.zoomTransform(svgNode);
+    const transform = d3.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);
   }
@@ -1508,7 +1574,7 @@ function deriveOptions(jsonOptions) {
     const solidColor = color[0];
     derivedOptions.color = () => solidColor;
   } else if (color != null && color.length) {
-    const colorFn = d3__namespace.scaleOrdinal(color);
+    const colorFn = d3.scaleOrdinal(color);
     derivedOptions.color = node => colorFn(`${node.state.path}`);
   }
   if (colorFreezeLevel) {

package/dist/index.js

@@ -1,21 +1,7 @@
-/*! markmap-view v0.14.5-alpha.18+44c9639 | 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.14.5-alpha.21+fb81f2c | 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,
@@ -759,7 +824,7 @@ function mountDom(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}";
 
@@ -769,7 +834,7 @@ function linkWidth(nodeData) {
   return Math.max(4 - 2 * data.depth, 1.5);
 }
 function minBy(numbers, by) {
-  const index = d3__namespace.minIndex(numbers, by);
+  const index = minIndex(numbers, by);
   return numbers[index];
 }
 function stopPropagation(e) {
@@ -777,15 +842,15 @@ 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) {
@@ -799,7 +864,7 @@ class Markmap {
     };
     this.handlePan = e => {
       e.preventDefault();
-      const transform = d3__namespace.zoomTransform(this.svg.node());
+      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);
     };
@@ -809,9 +874,9 @@ class Markmap {
       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;
@@ -820,7 +885,7 @@ 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,
@@ -842,7 +907,7 @@ 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);
   }
@@ -851,7 +916,7 @@ class Markmap {
     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
         });
@@ -885,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;
@@ -927,7 +992,7 @@ class Markmap {
       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 state = item.state;
       const rect = state.el.getBoundingClientRect();
@@ -985,11 +1050,11 @@ class Markmap {
     layout(tree);
     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.ySize - spacingHorizontal);
+    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,
@@ -1002,7 +1067,7 @@ 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 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.ySize - spacingHorizontal).attr('x2', d => d.ySize - spacingHorizontal);
@@ -1015,13 +1080,13 @@ 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 => {
+    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.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 => {
+    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 => {
@@ -1031,7 +1096,7 @@ class Markmap {
       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);
@@ -1043,7 +1108,7 @@ class Markmap {
     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 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,
@@ -1099,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);
   }
 
   /**
@@ -1108,7 +1173,7 @@ 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;
       }
@@ -1119,7 +1184,7 @@ class Markmap {
       spacingHorizontal
     } = this.options;
     const relRect = svgNode.getBoundingClientRect();
-    const transform = d3__namespace.zoomTransform(svgNode);
+    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.
@@ -1135,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);
     }
   }
 
@@ -1150,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);
@@ -1202,7 +1267,7 @@ function deriveOptions(jsonOptions) {
     const solidColor = color[0];
     derivedOptions.color = () => solidColor;
   } else if (color != null && color.length) {
-    const colorFn = d3__namespace.scaleOrdinal(color);
+    const colorFn = scaleOrdinal(color);
     derivedOptions.color = node => colorFn(`${node.state.path}`);
   }
   if (colorFreezeLevel) {
@@ -1229,10 +1294,4 @@ function deriveOptions(jsonOptions) {
   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 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "markmap-view",
-  "version": "0.14.5-alpha.18+44c9639",
+  "version": "0.14.5-alpha.21+fb81f2c",
   "description": "View markmaps in browser",
   "author": "Gerald <gera2ld@live.com>",
   "license": "MIT",
@@ -19,16 +19,17 @@
     "url": "git+https://github.com/markmap/markmap.git"
   },
   "scripts": {
-    "dev": "rollup -wc rollup.conf.js",
+    "dev": "rollup -wc",
     "clean": "del-cli dist types",
-    "build:js": "rollup -c rollup.conf.js",
+    "build:js": "rollup -c",
     "build:types": "tsc"
   },
   "bugs": {
     "url": "https://github.com/markmap/markmap/issues"
   },
+  "type": "module",
   "main": "dist/index.js",
-  "module": "dist/index.mjs",
+  "module": "dist/index.js",
   "unpkg": "dist/browser/index.js",
   "jsdelivr": "dist/browser/index.js",
   "files": [
@@ -37,18 +38,18 @@
   ],
   "typings": "types/index.d.ts",
   "dependencies": {
-    "@babel/runtime": "^7.12.5",
-    "@types/d3": "^6.0.0",
-    "d3": "^6.2.0",
-    "d3-flextree": "^2.1.1"
+    "@babel/runtime": "^7.22.6",
+    "@gera2ld/jsx-dom": "^2.2.2",
+    "@types/d3": "^7.4.0",
+    "d3": "^7.8.5",
+    "d3-flextree": "^2.1.2"
   },
   "devDependencies": {
-    "@gera2ld/jsx-dom": "^2.2.2",
     "@types/d3-flextree": "^2.1.1",
-    "markmap-common": "0.14.5-alpha.18+44c9639"
+    "markmap-common": "0.14.5-alpha.21+fb81f2c"
   },
   "peerDependencies": {
     "markmap-common": "*"
   },
-  "gitHead": "44c96396827295d0b30c41404b95f688e3bff1e6"
+  "gitHead": "fb81f2cb688f400f17f911774539267219f639ce"
 }

package/types/view.d.ts

@@ -1,4 +1,4 @@
-import * as d3 from 'd3';
+import type * as d3 from 'd3';
 import { FlextreeNode } from 'd3-flextree';
 import { Hook, INode, IPureNode, IMarkmapOptions, IMarkmapJSONOptions } from 'markmap-common';
 import { IMarkmapState } from './types';