Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
markmap-view
Advanced tools
markmap-view - npm Package Compare versions
Comparing version 0.2.7 to 0.13.0-alpha.0
@@ -1,2 +0,2 @@ | ||
| /*! markmap-view v0.2.7 | MIT License */ | ||
| /*! markmap-view v0.13.0-alpha.0 | MIT License */ | ||
| 'use strict'; | ||
@@ -20,2 +20,30 @@ | ||
| /*! markmap-common v0.13.0-alpha.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() { | ||
@@ -39,2 +67,177 @@ _extends$1 = Object.assign || function (target) { | ||
| 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++) { | ||
| var source = arguments[i]; | ||
| for (var key in source) { | ||
| if (Object.prototype.hasOwnProperty.call(source, key)) { | ||
| target[key] = source[key]; | ||
| } | ||
| } | ||
| } | ||
| return target; | ||
| }; | ||
| return _extends.apply(this, arguments); | ||
| } | ||
| function count(node) { | ||
@@ -214,3 +417,3 @@ var sum = 0, | ||
| function hierarchy(data, children) { | ||
| var root = new Node(data), | ||
| var root = new Node$1(data), | ||
| valued = +data.value && (root.value = data.value), | ||
@@ -232,3 +435,3 @@ node, | ||
| for (i = n - 1; i >= 0; --i) { | ||
| nodes.push(child = node.children[i] = new Node(childs[i])); | ||
| nodes.push(child = node.children[i] = new Node$1(childs[i])); | ||
| child.parent = node; | ||
@@ -260,3 +463,3 @@ child.depth = node.depth + 1; | ||
| } | ||
| function Node(data) { | ||
| function Node$1(data) { | ||
| this.data = data; | ||
@@ -266,4 +469,4 @@ this.depth = this.height = 0; | ||
| } | ||
| Node.prototype = hierarchy.prototype = { | ||
| constructor: Node, | ||
| Node$1.prototype = hierarchy.prototype = { | ||
| constructor: Node$1, | ||
| count: node_count, | ||
@@ -794,208 +997,241 @@ each: node_each, | ||
| /*! markmap-common v0.1.6 | MIT License */ | ||
| class Hook { | ||
| constructor() { | ||
| this.listeners = []; | ||
| } | ||
| /*! @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 = { | ||
| show: XLINK_NS, | ||
| actuate: XLINK_NS, | ||
| href: XLINK_NS | ||
| }; | ||
| tap(fn) { | ||
| this.listeners.push(fn); | ||
| return () => this.revoke(fn); | ||
| } | ||
| var isLeaf = function isLeaf(c) { | ||
| return typeof c === 'string' || typeof c === 'number'; | ||
| }; | ||
| revoke(fn) { | ||
| const i = this.listeners.indexOf(fn); | ||
| if (i >= 0) this.listeners.splice(i, 1); | ||
| } | ||
| var isElement = function isElement(c) { | ||
| return (c == null ? void 0 : c.vtype) === VTYPE_ELEMENT; | ||
| }; | ||
| revokeAll() { | ||
| this.listeners.splice(0); | ||
| } | ||
| var isRenderFunction = function isRenderFunction(c) { | ||
| return (c == null ? void 0 : c.vtype) === VTYPE_FUNCTION; | ||
| }; | ||
| call(...args) { | ||
| for (const fn of this.listeners) { | ||
| fn(...args); | ||
| } | ||
| } | ||
| function jsx(type, props) { | ||
| var 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 | ||
| }; | ||
| } | ||
| function Fragment(props) { | ||
| return props.children; | ||
| } | ||
| function _extends() { | ||
| _extends = Object.assign || function (target) { | ||
| for (var i = 1; i < arguments.length; i++) { | ||
| var source = arguments[i]; | ||
| var DEFAULT_ENV = { | ||
| isSvg: false | ||
| }; | ||
| for (var key in source) { | ||
| if (Object.prototype.hasOwnProperty.call(source, key)) { | ||
| target[key] = source[key]; | ||
| } | ||
| } | ||
| } | ||
| return target; | ||
| }; | ||
| return _extends.apply(this, arguments); | ||
| 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)); | ||
| } | ||
| } | ||
| const uniqId = Math.random().toString(36).slice(2, 8); | ||
| let globalIndex = 0; | ||
| function mountAttributes(domElement, props, env) { | ||
| for (var key in props) { | ||
| if (key === 'key' || key === 'children' || key === 'ref') continue; | ||
| function getId() { | ||
| globalIndex += 1; | ||
| return `mm-${uniqId}-${globalIndex}`; | ||
| if (key === 'dangerouslySetInnerHTML') { | ||
| domElement.innerHTML = props[key].__html; | ||
| } else if (key === 'innerHTML' || key === 'textContent' || key === 'innerText') { | ||
| domElement[key] = props[key]; | ||
| } else if (key.startsWith('on')) { | ||
| domElement[key.toLowerCase()] = props[key]; | ||
| } else { | ||
| setDOMAttribute(domElement, key, props[key], env.isSvg); | ||
| } | ||
| } | ||
| } | ||
| function noop() {// noop | ||
| } | ||
| var attrMap = { | ||
| className: 'class', | ||
| labelFor: 'for' | ||
| }; | ||
| function walkTree(tree, callback, key = 'c') { | ||
| const walk = (item, parent) => callback(item, () => { | ||
| var _item$key; | ||
| function setDOMAttribute(el, attr, value, isSVG) { | ||
| attr = attrMap[attr] || attr; | ||
| (_item$key = item[key]) == null ? void 0 : _item$key.forEach(child => { | ||
| walk(child, item); | ||
| }); | ||
| }, parent); | ||
| if (value === true) { | ||
| el.setAttribute(attr, ''); | ||
| } else if (value === false) { | ||
| el.removeAttribute(attr); | ||
| } else { | ||
| var namespace = isSVG ? NS_ATTRS[attr] : undefined; | ||
| walk(tree); | ||
| if (namespace !== undefined) { | ||
| el.setAttributeNS(namespace, attr, value); | ||
| } else { | ||
| el.setAttribute(attr, value); | ||
| } | ||
| } | ||
| } | ||
| function arrayFrom(arrayLike) { | ||
| if (Array.from) return Array.from(arrayLike); | ||
| const array = []; | ||
| function mount(vnode, env) { | ||
| if (env === void 0) { | ||
| env = DEFAULT_ENV; | ||
| } | ||
| for (let i = 0; i < arrayLike.length; i += 1) { | ||
| array.push(arrayLike[i]); | ||
| if (vnode == null || typeof vnode === 'boolean') { | ||
| return { | ||
| type: MOUNT_SINGLE, | ||
| node: null | ||
| }; | ||
| } | ||
| return array; | ||
| } | ||
| if (vnode instanceof Node) { | ||
| return { | ||
| type: MOUNT_SINGLE, | ||
| node: vnode | ||
| }; | ||
| } | ||
| 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(' '); | ||
| } | ||
| if (isRenderFunction(vnode)) { | ||
| var _ref = vnode, | ||
| type = _ref.type, | ||
| props = _ref.props; | ||
| function childSelector(filter) { | ||
| if (typeof filter === 'string') { | ||
| const tagName = filter; | ||
| if (type === Fragment) { | ||
| var node = document.createDocumentFragment(); | ||
| filter = el => el.tagName === tagName; | ||
| if (props.children) { | ||
| var childrenRef = mount(props.children, env); | ||
| insertDom(node, childrenRef); | ||
| } | ||
| return { | ||
| type: MOUNT_SINGLE, | ||
| node: node | ||
| }; | ||
| } | ||
| var childVNode = type(props); | ||
| return mount(childVNode, env); | ||
| } | ||
| const filterFn = filter; | ||
| return function selector() { | ||
| let nodes = arrayFrom(this.childNodes); | ||
| if (filterFn) nodes = nodes.filter(node => filterFn(node)); | ||
| return nodes; | ||
| }; | ||
| } | ||
| if (isLeaf(vnode)) { | ||
| return { | ||
| type: MOUNT_SINGLE, | ||
| node: document.createTextNode("" + vnode) | ||
| }; | ||
| } | ||
| function memoize(fn) { | ||
| const cache = {}; | ||
| return function memoized(...args) { | ||
| const key = `${args[0]}`; | ||
| let data = cache[key]; | ||
| if (isElement(vnode)) { | ||
| var _node; | ||
| if (!data) { | ||
| data = { | ||
| value: fn(...args) | ||
| }; | ||
| cache[key] = data; | ||
| var _ref2 = vnode, | ||
| _type = _ref2.type, | ||
| _props = _ref2.props; | ||
| if (!env.isSvg && _type === 'svg') { | ||
| env = Object.assign({}, env, { | ||
| isSvg: true | ||
| }); | ||
| } | ||
| return data.value; | ||
| }; | ||
| } | ||
| if (!env.isSvg) { | ||
| _node = document.createElement(_type); | ||
| } else { | ||
| _node = document.createElementNS(SVG_NS, _type); | ||
| } | ||
| function createElement(tagName, props, attrs) { | ||
| const el = document.createElement(tagName); | ||
| mountAttributes(_node, _props, env); | ||
| if (props) { | ||
| Object.entries(props).forEach(([key, value]) => { | ||
| el[key] = value; | ||
| }); | ||
| var _childrenRef; | ||
| if (_props.children) { | ||
| var childEnv = env; | ||
| if (env.isSvg && _type === 'foreignObject') { | ||
| childEnv = Object.assign({}, childEnv, { | ||
| isSvg: false | ||
| }); | ||
| } | ||
| _childrenRef = mount(_props.children, childEnv); | ||
| } | ||
| if (_childrenRef != null) insertDom(_node, _childrenRef); | ||
| var ref = _props.ref; | ||
| if (typeof ref === 'function') ref(_node); | ||
| return { | ||
| type: MOUNT_SINGLE, | ||
| node: _node | ||
| }; | ||
| } | ||
| if (attrs) { | ||
| Object.entries(attrs).forEach(([key, value]) => { | ||
| el.setAttribute(key, value); | ||
| }); | ||
| if (Array.isArray(vnode)) { | ||
| return { | ||
| type: MOUNT_ARRAY, | ||
| children: vnode.map(function (child) { | ||
| return mount(child, env); | ||
| }) | ||
| }; | ||
| } | ||
| return el; | ||
| throw new Error('mount: Invalid Vnode!'); | ||
| } | ||
| const memoizedPreloadJS = memoize(url => { | ||
| document.head.append(createElement('link', { | ||
| rel: 'preload', | ||
| as: 'script', | ||
| href: url | ||
| })); | ||
| }); | ||
| function flattenWithoutNull(array) { | ||
| var result = []; | ||
| function loadJSItem(item, context) { | ||
| if (item.type === 'script') { | ||
| return new Promise((resolve, reject) => { | ||
| var _item$data; | ||
| 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); | ||
| } | ||
| document.head.append(createElement('script', _extends({}, item.data, { | ||
| onload: resolve, | ||
| onerror: reject | ||
| }))); // Run inline script synchronously | ||
| return result; | ||
| } | ||
| if (!((_item$data = item.data) != null && _item$data.src)) resolve(); | ||
| }); | ||
| function asDom(result) { | ||
| if (result.type === MOUNT_SINGLE) { | ||
| return result.node; | ||
| } | ||
| if (item.type === 'iife') { | ||
| const { | ||
| fn, | ||
| getParams | ||
| } = item.data; | ||
| fn(...((getParams == null ? void 0 : getParams(context)) || [])); | ||
| } | ||
| return result.children.map(asDom); | ||
| } | ||
| /** | ||
| * Mount vdom as real DOM nodes. | ||
| */ | ||
| 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({ | ||
| rel: 'stylesheet' | ||
| }, item.data))); | ||
| function mountDom(vnode) { | ||
| if (Array.isArray(vnode)) { | ||
| return flattenWithoutNull(vnode.map(mountDom)); | ||
| } | ||
| return asDom(mount(vnode)); | ||
| } | ||
| async function loadJS(items, context) { | ||
| const needPreload = items.filter(item => { | ||
| var _item$data2; | ||
| 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:bolder}.markmap-foreign mark{background:#ffeaa7}.markmap-foreign pre,.markmap-foreign pre[class*=language-]{margin:0;padding:.2em .4em}"; | ||
| 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({ | ||
| getMarkmap: () => window.markmap | ||
| }, context); | ||
| var css_248z = ".markmap-container{height:0;left:-100px;overflow:hidden;position:absolute;top:-100px;width:0}.markmap-container>*{display:inline-block}.markmap-container>*>.markmap-foreign:last-child{white-space:nowrap}"; | ||
| for (const item of items) { | ||
| await loadJSItem(item, context); | ||
| } | ||
| } | ||
| const globalCSS = css_248z$1; | ||
| function loadCSS(items) { | ||
| for (const item of items) { | ||
| loadCSSItem(item); | ||
| } | ||
| } | ||
| function linkWidth(nodeData) { | ||
| const data = nodeData.data; | ||
| return Math.max(6 - 2 * data.d, 1.5); | ||
| return Math.max(6 - 2 * data.depth, 1.5); | ||
| } | ||
@@ -1031,6 +1267,8 @@ | ||
| const refreshHook = new Hook(); | ||
| const defaultColorFn = d3__namespace.scaleOrdinal(d3__namespace.schemeCategory10); | ||
| const isMacintosh = typeof navigator !== 'undefined' && navigator.userAgent.includes('Macintosh'); | ||
| class Markmap { | ||
| constructor(svg, opts) { | ||
| this.revokers = []; | ||
| ['handleZoom', 'handleClick'].forEach(key => { | ||
| ['handleZoom', 'handleClick', 'handlePan'].forEach(key => { | ||
| this[key] = this[key].bind(this); | ||
@@ -1041,10 +1279,17 @@ }); | ||
| this.styleNode = this.svg.append('style'); | ||
| this.zoom = d3__namespace.zoom().on('zoom', this.handleZoom); | ||
| this.options = _extends$1({}, Markmap.defaultOptions, opts); | ||
| this.zoom = d3__namespace.zoom().filter(event => { | ||
| if (this.options.scrollForPan) { | ||
| // Pan with wheels, zoom with ctrl+wheels | ||
| if (event.type === 'wheel') return event.ctrlKey && !event.button; | ||
| } | ||
| return (!event.ctrlKey || event.type === 'wheel') && !event.button; | ||
| }).on('zoom', this.handleZoom); | ||
| this.setOptions(opts); | ||
| this.state = { | ||
| id: this.options.id || getId() | ||
| id: this.options.id || this.svg.attr('id') || getId() | ||
| }; | ||
| this.g = this.svg.append('g').attr('class', `${this.state.id}-g`); | ||
| this.g = this.svg.append('g'); | ||
| this.updateStyle(); | ||
| this.svg.call(this.zoom); | ||
| this.svg.call(this.zoom).on('wheel', this.handlePan); | ||
| this.revokers.push(refreshHook.tap(() => { | ||
@@ -1057,4 +1302,3 @@ this.setData(); | ||
| const { | ||
| style, | ||
| nodeFont | ||
| style | ||
| } = this.options; | ||
@@ -1064,24 +1308,10 @@ const { | ||
| } = this.state; | ||
| const extraStyle = typeof style === 'function' ? style(id) : ''; | ||
| const styleText = `\ | ||
| .${id} { line-height: 1; } | ||
| .${id} a { color: #0097e6; } | ||
| .${id} a:hover { color: #00a8ff; } | ||
| .${id}-g > path { fill: none; } | ||
| .${id}-g > g > circle { cursor: pointer; } | ||
| .${id}-fo > div { display: inline-block; font: ${nodeFont}; white-space: nowrap; } | ||
| .${id}-fo code { font-size: calc(1em - 2px); color: #555; background-color: #f0f0f0; border-radius: 2px; } | ||
| .${id}-fo :not(pre) > code { padding: .2em .4em; } | ||
| .${id}-fo del { text-decoration: line-through; } | ||
| .${id}-fo em { font-style: italic; } | ||
| .${id}-fo strong { font-weight: bolder; } | ||
| .${id}-fo pre { margin: 0; padding: .2em .4em; } | ||
| ${extraStyle} | ||
| `; | ||
| return styleText; | ||
| const styleText = typeof style === 'function' ? style(id) : ''; | ||
| return [this.options.embedGlobalCSS && css_248z$1, styleText].filter(Boolean).join('\n'); | ||
| } | ||
| updateStyle() { | ||
| this.svg.attr('class', addClass(this.svg.attr('class'), this.state.id)); | ||
| this.styleNode.text(this.getStyleContent()); | ||
| this.svg.attr('class', addClass(this.svg.attr('class'), 'markmap', this.state.id)); | ||
| const style = this.getStyleContent(); | ||
| this.styleNode.text(style); | ||
| } | ||
@@ -1096,10 +1326,17 @@ | ||
| handleClick(e, d) { | ||
| var _data$p; | ||
| handlePan(e) { | ||
| e.preventDefault(); | ||
| const transform = d3__namespace.zoomTransform(this.svg.node()); | ||
| const newTransform = transform.translate(-e.deltaX, -e.deltaY); | ||
| this.svg.call(this.zoom.transform, newTransform); | ||
| } | ||
| handleClick(_, d) { | ||
| var _data$payload; | ||
| const { | ||
| data | ||
| } = d; | ||
| data.p = _extends$1({}, data.p, { | ||
| f: !((_data$p = data.p) != null && _data$p.f) | ||
| data.payload = _extends({}, data.payload, { | ||
| fold: !((_data$payload = data.payload) != null && _data$payload.fold) | ||
| }); | ||
@@ -1110,7 +1347,7 @@ this.renderData(d.data); | ||
| initializeData(node) { | ||
| let i = 0; | ||
| let nodeId = 0; | ||
| const { | ||
| nodeFont, | ||
| color, | ||
| nodeMinHeight | ||
| nodeMinHeight, | ||
| maxWidth | ||
| } = this.options; | ||
@@ -1120,34 +1357,28 @@ const { | ||
| } = this.state; | ||
| const container = document.createElement('div'); | ||
| const containerClass = `${id}-container`; | ||
| container.className = addClass(container.className, `${id}-fo`, containerClass); | ||
| const style = document.createElement('style'); | ||
| style.textContent = ` | ||
| ${this.getStyleContent()} | ||
| .${containerClass} { | ||
| position: absolute; | ||
| width: 0; | ||
| height: 0; | ||
| top: -100px; | ||
| left: -100px; | ||
| overflow: hidden; | ||
| font: ${nodeFont}; | ||
| } | ||
| .${containerClass} > div { | ||
| display: inline-block; | ||
| } | ||
| `; | ||
| document.body.append(style, container); | ||
| const container = mountDom(jsx("div", { | ||
| className: `markmap-container markmap ${id}-g` | ||
| })); | ||
| const style = mountDom(jsx("style", { | ||
| children: [this.getStyleContent(), css_248z].join('\n') | ||
| })); | ||
| document.body.append(container, style); | ||
| const groupStyle = maxWidth ? `max-width: ${maxWidth}px` : null; | ||
| walkTree(node, (item, next) => { | ||
| var _item$c; | ||
| var _item$children; | ||
| item.c = (_item$c = item.c) == null ? void 0 : _item$c.map(child => _extends$1({}, child)); | ||
| i += 1; | ||
| const el = document.createElement('div'); | ||
| el.innerHTML = item.v; | ||
| container.append(el); | ||
| item.p = _extends$1({}, item.p, { | ||
| // unique ID | ||
| i, | ||
| el | ||
| item.children = (_item$children = item.children) == null ? void 0 : _item$children.map(child => _extends({}, child)); | ||
| nodeId += 1; | ||
| const group = mountDom(jsx("div", { | ||
| style: groupStyle, | ||
| children: jsx("div", { | ||
| className: "markmap-foreign", | ||
| dangerouslySetInnerHTML: { | ||
| __html: item.content | ||
| } | ||
| }) | ||
| })); | ||
| container.append(group); | ||
| item.state = _extends({}, item.state, { | ||
| id: nodeId, | ||
| el: group.firstChild | ||
| }); | ||
@@ -1158,13 +1389,20 @@ color(item); // preload colors | ||
| }); | ||
| const nodes = arrayFrom(container.childNodes); | ||
| this.viewHooks.transformHtml.call(this, nodes); | ||
| const nodes = 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 | ||
| // content in one line as much as possible, and subjecting to the given max-width. | ||
| nodes.forEach(node => { | ||
| node.parentNode.append(node.cloneNode(true)); | ||
| }); | ||
| walkTree(node, (item, next, parent) => { | ||
| var _parent$p; | ||
| var _parent$state, _parent$state2; | ||
| const rect = item.p.el.getBoundingClientRect(); | ||
| item.v = item.p.el.innerHTML; | ||
| item.p.s = [Math.ceil(rect.width), Math.max(Math.ceil(rect.height), nodeMinHeight)]; // TODO keep keys for unchanged objects | ||
| // unique key, should be based on content | ||
| item.p.k = `${(parent == null ? void 0 : (_parent$p = parent.p) == null ? void 0 : _parent$p.i) || ''}.${item.p.i}:${item.v}`; | ||
| 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(); | ||
@@ -1177,3 +1415,3 @@ }); | ||
| setOptions(opts) { | ||
| Object.assign(this.options, opts); | ||
| this.options = _extends({}, Markmap.defaultOptions, opts); | ||
| } | ||
@@ -1189,3 +1427,3 @@ | ||
| renderData(originData) { | ||
| var _origin$data$p$x, _origin$data$p$y; | ||
| var _origin$data$state$x, _origin$data$state$y; | ||
@@ -1200,11 +1438,8 @@ if (!this.state.data) return; | ||
| } = this.options; | ||
| const { | ||
| id | ||
| } = this.state; | ||
| const layout = flextree().children(d => { | ||
| var _d$p; | ||
| var _d$payload; | ||
| return !((_d$p = d.p) != null && _d$p.f) && d.c; | ||
| return !((_d$payload = d.payload) != null && _d$payload.fold) && d.children; | ||
| }).nodeSize(d => { | ||
| const [width, height] = d.data.p.s; | ||
| const [width, height] = d.data.state.size; | ||
| return [height, width + (width ? paddingX * 2 : 0) + spacingHorizontal]; | ||
@@ -1232,29 +1467,31 @@ }).spacing((a, b) => { | ||
| const origin = originData && descendants.find(item => item.data === originData) || tree; | ||
| const x0 = (_origin$data$p$x = origin.data.p.x0) != null ? _origin$data$p$x : origin.x; | ||
| const y0 = (_origin$data$p$y = origin.data.p.y0) != null ? _origin$data$p$y : origin.y; // Update the nodes | ||
| 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.p.k); | ||
| const nodeEnter = node.enter().append('g').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('class', 'markmap-node').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('rect').attr('width', 0).attr('x', d => d.ySizeInner); | ||
| nodeExit.select('line').attr('x1', d => d.ySizeInner).attr('x2', d => d.ySizeInner); | ||
| 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(); | ||
| const nodeMerge = node.merge(nodeEnter); | ||
| this.transition(nodeMerge).attr('transform', d => `translate(${d.y},${d.x - d.xSize / 2})`); | ||
| const rect = nodeMerge.selectAll(childSelector('rect')).data(d => [d], d => d.data.p.k).join(enter => { | ||
| return enter.append('rect').attr('x', d => d.ySizeInner).attr('y', d => d.xSize - linkWidth(d) / 2).attr('width', 0).attr('height', linkWidth); | ||
| 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 => { | ||
| return enter.append('line').attr('x1', d => d.ySizeInner).attr('y1', d => d.xSize).attr('x2', d => d.ySizeInner).attr('y2', d => d.xSize); | ||
| }, update => update, exit => exit.remove()); | ||
| this.transition(rect).attr('x', -1).attr('width', d => d.ySizeInner + 2).attr('fill', d => color(d.data)); | ||
| const circle = nodeMerge.selectAll(childSelector('circle')).data(d => d.data.c ? [d] : [], d => d.data.p.k).join(enter => { | ||
| this.transition(line).attr('x1', -1).attr('x2', d => d.ySizeInner + 2).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 => { | ||
| return enter.append('circle').attr('stroke-width', '1.5').attr('cx', d => d.ySizeInner).attr('cy', d => d.xSize).attr('r', 0).on('click', this.handleClick); | ||
| }, update => update, exit => exit.remove()); | ||
| this.transition(circle).attr('r', 6).attr('stroke', d => color(d.data)).attr('fill', d => { | ||
| var _d$data$p; | ||
| var _d$data$payload; | ||
| return (_d$data$p = d.data.p) != null && _d$data$p.f && d.data.c ? color(d.data) : '#fff'; | ||
| return (_d$data$payload = d.data.payload) != null && _d$data$payload.fold && d.data.children ? color(d.data) : '#fff'; | ||
| }); | ||
| const foreignObject = nodeMerge.selectAll(childSelector('foreignObject')).data(d => [d], d => d.data.p.k).join(enter => { | ||
| const fo = enter.append('foreignObject').attr('class', `${id}-fo`).attr('x', paddingX).attr('y', 0).style('opacity', 0).attr('height', d => d.xSize).on('mousedown', stopPropagation).on('dblclick', stopPropagation); | ||
| 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).attr('height', d => d.xSize).on('mousedown', stopPropagation).on('dblclick', stopPropagation); | ||
| fo.append('xhtml:div').select(function select(d) { | ||
| const clone = d.data.p.el.cloneNode(true); | ||
| const clone = d.data.state.el.cloneNode(true); | ||
| this.replaceWith(clone); | ||
@@ -1267,5 +1504,5 @@ return clone; | ||
| const path = this.g.selectAll(childSelector('path')).data(links, d => d.target.data.p.k).join(enter => { | ||
| const path = this.g.selectAll(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('d', linkShape({ | ||
| 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, | ||
@@ -1290,4 +1527,4 @@ target: source | ||
| descendants.forEach(d => { | ||
| d.data.p.x0 = d.x; | ||
| d.data.p.y0 = d.y; | ||
| d.data.state.x0 = d.x; | ||
| d.data.state.y0 = d.y; | ||
| }); | ||
@@ -1349,3 +1586,3 @@ } | ||
| const pd = _extends$1({ | ||
| const pd = _extends({ | ||
| left: 0, | ||
@@ -1386,3 +1623,4 @@ right: 0, | ||
| destroy() { | ||
| this.svg.remove(); | ||
| this.svg.on('.zoom', null); | ||
| this.svg.html(null); | ||
| this.revokers.forEach(fn => { | ||
@@ -1406,16 +1644,53 @@ fn(); | ||
| Markmap.defaultOptions = { | ||
| autoFit: false, | ||
| color: node => defaultColorFn(`${node.state.id}`), | ||
| duration: 500, | ||
| nodeFont: '300 16px/20px sans-serif', | ||
| embedGlobalCSS: true, | ||
| fitRatio: 0.95, | ||
| maxWidth: 0, | ||
| nodeMinHeight: 16, | ||
| spacingVertical: 5, | ||
| paddingX: 8, | ||
| scrollForPan: isMacintosh, | ||
| spacingHorizontal: 80, | ||
| autoFit: false, | ||
| fitRatio: 0.95, | ||
| color: (colorFn => node => colorFn(node.p.i))(d3__namespace.scaleOrdinal(d3__namespace.schemeCategory10)), | ||
| paddingX: 8 | ||
| spacingVertical: 5 | ||
| }; | ||
| function deriveOptions(jsonOptions) { | ||
| const { | ||
| color, | ||
| duration, | ||
| maxWidth | ||
| } = jsonOptions || {}; | ||
| let opts; | ||
| if (typeof color === 'string') { | ||
| opts = _extends({}, opts, { | ||
| color: () => color | ||
| }); | ||
| } else if (color != null && color.length) { | ||
| opts = _extends({}, opts, { | ||
| color: node => color[node.state.id % color.length] | ||
| }); | ||
| } | ||
| if (typeof duration === 'number') { | ||
| opts = _extends({}, opts, { | ||
| duration | ||
| }); | ||
| } | ||
| if (typeof maxWidth === 'number') { | ||
| opts = _extends({}, opts, { | ||
| maxWidth | ||
| }); | ||
| } | ||
| return opts; | ||
| } | ||
| exports.Markmap = Markmap; | ||
| exports.defaultColorFn = defaultColorFn; | ||
| exports.deriveOptions = deriveOptions; | ||
| exports.globalCSS = globalCSS; | ||
| exports.loadCSS = loadCSS; | ||
| exports.loadJS = loadJS; | ||
| exports.refreshHook = refreshHook; |
@@ -1,4 +0,32 @@ | ||
| /*! markmap-view v0.2.7 | MIT License */ | ||
| /*! markmap-view v0.13.0-alpha.0 | MIT License */ | ||
| import * as d3 from 'd3'; | ||
| /*! markmap-common v0.13.0-alpha.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() { | ||
@@ -22,2 +50,177 @@ _extends$1 = Object.assign || function (target) { | ||
| 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++) { | ||
| var source = arguments[i]; | ||
| for (var key in source) { | ||
| if (Object.prototype.hasOwnProperty.call(source, key)) { | ||
| target[key] = source[key]; | ||
| } | ||
| } | ||
| } | ||
| return target; | ||
| }; | ||
| return _extends.apply(this, arguments); | ||
| } | ||
| function count(node) { | ||
@@ -197,3 +400,3 @@ var sum = 0, | ||
| function hierarchy(data, children) { | ||
| var root = new Node(data), | ||
| var root = new Node$1(data), | ||
| valued = +data.value && (root.value = data.value), | ||
@@ -215,3 +418,3 @@ node, | ||
| for (i = n - 1; i >= 0; --i) { | ||
| nodes.push(child = node.children[i] = new Node(childs[i])); | ||
| nodes.push(child = node.children[i] = new Node$1(childs[i])); | ||
| child.parent = node; | ||
@@ -243,3 +446,3 @@ child.depth = node.depth + 1; | ||
| } | ||
| function Node(data) { | ||
| function Node$1(data) { | ||
| this.data = data; | ||
@@ -249,4 +452,4 @@ this.depth = this.height = 0; | ||
| } | ||
| Node.prototype = hierarchy.prototype = { | ||
| constructor: Node, | ||
| Node$1.prototype = hierarchy.prototype = { | ||
| constructor: Node$1, | ||
| count: node_count, | ||
@@ -777,208 +980,241 @@ each: node_each, | ||
| /*! markmap-common v0.1.6 | MIT License */ | ||
| class Hook { | ||
| constructor() { | ||
| this.listeners = []; | ||
| } | ||
| /*! @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 = { | ||
| show: XLINK_NS, | ||
| actuate: XLINK_NS, | ||
| href: XLINK_NS | ||
| }; | ||
| tap(fn) { | ||
| this.listeners.push(fn); | ||
| return () => this.revoke(fn); | ||
| } | ||
| var isLeaf = function isLeaf(c) { | ||
| return typeof c === 'string' || typeof c === 'number'; | ||
| }; | ||
| revoke(fn) { | ||
| const i = this.listeners.indexOf(fn); | ||
| if (i >= 0) this.listeners.splice(i, 1); | ||
| } | ||
| var isElement = function isElement(c) { | ||
| return (c == null ? void 0 : c.vtype) === VTYPE_ELEMENT; | ||
| }; | ||
| revokeAll() { | ||
| this.listeners.splice(0); | ||
| } | ||
| var isRenderFunction = function isRenderFunction(c) { | ||
| return (c == null ? void 0 : c.vtype) === VTYPE_FUNCTION; | ||
| }; | ||
| call(...args) { | ||
| for (const fn of this.listeners) { | ||
| fn(...args); | ||
| } | ||
| } | ||
| function jsx(type, props) { | ||
| var 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 | ||
| }; | ||
| } | ||
| function Fragment(props) { | ||
| return props.children; | ||
| } | ||
| function _extends() { | ||
| _extends = Object.assign || function (target) { | ||
| for (var i = 1; i < arguments.length; i++) { | ||
| var source = arguments[i]; | ||
| var DEFAULT_ENV = { | ||
| isSvg: false | ||
| }; | ||
| for (var key in source) { | ||
| if (Object.prototype.hasOwnProperty.call(source, key)) { | ||
| target[key] = source[key]; | ||
| } | ||
| } | ||
| } | ||
| return target; | ||
| }; | ||
| return _extends.apply(this, arguments); | ||
| 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)); | ||
| } | ||
| } | ||
| const uniqId = Math.random().toString(36).slice(2, 8); | ||
| let globalIndex = 0; | ||
| function mountAttributes(domElement, props, env) { | ||
| for (var key in props) { | ||
| if (key === 'key' || key === 'children' || key === 'ref') continue; | ||
| function getId() { | ||
| globalIndex += 1; | ||
| return `mm-${uniqId}-${globalIndex}`; | ||
| if (key === 'dangerouslySetInnerHTML') { | ||
| domElement.innerHTML = props[key].__html; | ||
| } else if (key === 'innerHTML' || key === 'textContent' || key === 'innerText') { | ||
| domElement[key] = props[key]; | ||
| } else if (key.startsWith('on')) { | ||
| domElement[key.toLowerCase()] = props[key]; | ||
| } else { | ||
| setDOMAttribute(domElement, key, props[key], env.isSvg); | ||
| } | ||
| } | ||
| } | ||
| function noop() {// noop | ||
| } | ||
| var attrMap = { | ||
| className: 'class', | ||
| labelFor: 'for' | ||
| }; | ||
| function walkTree(tree, callback, key = 'c') { | ||
| const walk = (item, parent) => callback(item, () => { | ||
| var _item$key; | ||
| function setDOMAttribute(el, attr, value, isSVG) { | ||
| attr = attrMap[attr] || attr; | ||
| (_item$key = item[key]) == null ? void 0 : _item$key.forEach(child => { | ||
| walk(child, item); | ||
| }); | ||
| }, parent); | ||
| if (value === true) { | ||
| el.setAttribute(attr, ''); | ||
| } else if (value === false) { | ||
| el.removeAttribute(attr); | ||
| } else { | ||
| var namespace = isSVG ? NS_ATTRS[attr] : undefined; | ||
| walk(tree); | ||
| if (namespace !== undefined) { | ||
| el.setAttributeNS(namespace, attr, value); | ||
| } else { | ||
| el.setAttribute(attr, value); | ||
| } | ||
| } | ||
| } | ||
| function arrayFrom(arrayLike) { | ||
| if (Array.from) return Array.from(arrayLike); | ||
| const array = []; | ||
| function mount(vnode, env) { | ||
| if (env === void 0) { | ||
| env = DEFAULT_ENV; | ||
| } | ||
| for (let i = 0; i < arrayLike.length; i += 1) { | ||
| array.push(arrayLike[i]); | ||
| if (vnode == null || typeof vnode === 'boolean') { | ||
| return { | ||
| type: MOUNT_SINGLE, | ||
| node: null | ||
| }; | ||
| } | ||
| return array; | ||
| } | ||
| if (vnode instanceof Node) { | ||
| return { | ||
| type: MOUNT_SINGLE, | ||
| node: vnode | ||
| }; | ||
| } | ||
| 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(' '); | ||
| } | ||
| if (isRenderFunction(vnode)) { | ||
| var _ref = vnode, | ||
| type = _ref.type, | ||
| props = _ref.props; | ||
| function childSelector(filter) { | ||
| if (typeof filter === 'string') { | ||
| const tagName = filter; | ||
| if (type === Fragment) { | ||
| var node = document.createDocumentFragment(); | ||
| filter = el => el.tagName === tagName; | ||
| if (props.children) { | ||
| var childrenRef = mount(props.children, env); | ||
| insertDom(node, childrenRef); | ||
| } | ||
| return { | ||
| type: MOUNT_SINGLE, | ||
| node: node | ||
| }; | ||
| } | ||
| var childVNode = type(props); | ||
| return mount(childVNode, env); | ||
| } | ||
| const filterFn = filter; | ||
| return function selector() { | ||
| let nodes = arrayFrom(this.childNodes); | ||
| if (filterFn) nodes = nodes.filter(node => filterFn(node)); | ||
| return nodes; | ||
| }; | ||
| } | ||
| if (isLeaf(vnode)) { | ||
| return { | ||
| type: MOUNT_SINGLE, | ||
| node: document.createTextNode("" + vnode) | ||
| }; | ||
| } | ||
| function memoize(fn) { | ||
| const cache = {}; | ||
| return function memoized(...args) { | ||
| const key = `${args[0]}`; | ||
| let data = cache[key]; | ||
| if (isElement(vnode)) { | ||
| var _node; | ||
| if (!data) { | ||
| data = { | ||
| value: fn(...args) | ||
| }; | ||
| cache[key] = data; | ||
| var _ref2 = vnode, | ||
| _type = _ref2.type, | ||
| _props = _ref2.props; | ||
| if (!env.isSvg && _type === 'svg') { | ||
| env = Object.assign({}, env, { | ||
| isSvg: true | ||
| }); | ||
| } | ||
| return data.value; | ||
| }; | ||
| } | ||
| if (!env.isSvg) { | ||
| _node = document.createElement(_type); | ||
| } else { | ||
| _node = document.createElementNS(SVG_NS, _type); | ||
| } | ||
| function createElement(tagName, props, attrs) { | ||
| const el = document.createElement(tagName); | ||
| mountAttributes(_node, _props, env); | ||
| if (props) { | ||
| Object.entries(props).forEach(([key, value]) => { | ||
| el[key] = value; | ||
| }); | ||
| var _childrenRef; | ||
| if (_props.children) { | ||
| var childEnv = env; | ||
| if (env.isSvg && _type === 'foreignObject') { | ||
| childEnv = Object.assign({}, childEnv, { | ||
| isSvg: false | ||
| }); | ||
| } | ||
| _childrenRef = mount(_props.children, childEnv); | ||
| } | ||
| if (_childrenRef != null) insertDom(_node, _childrenRef); | ||
| var ref = _props.ref; | ||
| if (typeof ref === 'function') ref(_node); | ||
| return { | ||
| type: MOUNT_SINGLE, | ||
| node: _node | ||
| }; | ||
| } | ||
| if (attrs) { | ||
| Object.entries(attrs).forEach(([key, value]) => { | ||
| el.setAttribute(key, value); | ||
| }); | ||
| if (Array.isArray(vnode)) { | ||
| return { | ||
| type: MOUNT_ARRAY, | ||
| children: vnode.map(function (child) { | ||
| return mount(child, env); | ||
| }) | ||
| }; | ||
| } | ||
| return el; | ||
| throw new Error('mount: Invalid Vnode!'); | ||
| } | ||
| const memoizedPreloadJS = memoize(url => { | ||
| document.head.append(createElement('link', { | ||
| rel: 'preload', | ||
| as: 'script', | ||
| href: url | ||
| })); | ||
| }); | ||
| function flattenWithoutNull(array) { | ||
| var result = []; | ||
| function loadJSItem(item, context) { | ||
| if (item.type === 'script') { | ||
| return new Promise((resolve, reject) => { | ||
| var _item$data; | ||
| 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); | ||
| } | ||
| document.head.append(createElement('script', _extends({}, item.data, { | ||
| onload: resolve, | ||
| onerror: reject | ||
| }))); // Run inline script synchronously | ||
| return result; | ||
| } | ||
| if (!((_item$data = item.data) != null && _item$data.src)) resolve(); | ||
| }); | ||
| function asDom(result) { | ||
| if (result.type === MOUNT_SINGLE) { | ||
| return result.node; | ||
| } | ||
| if (item.type === 'iife') { | ||
| const { | ||
| fn, | ||
| getParams | ||
| } = item.data; | ||
| fn(...((getParams == null ? void 0 : getParams(context)) || [])); | ||
| } | ||
| return result.children.map(asDom); | ||
| } | ||
| /** | ||
| * Mount vdom as real DOM nodes. | ||
| */ | ||
| 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({ | ||
| rel: 'stylesheet' | ||
| }, item.data))); | ||
| function mountDom(vnode) { | ||
| if (Array.isArray(vnode)) { | ||
| return flattenWithoutNull(vnode.map(mountDom)); | ||
| } | ||
| return asDom(mount(vnode)); | ||
| } | ||
| async function loadJS(items, context) { | ||
| const needPreload = items.filter(item => { | ||
| var _item$data2; | ||
| 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:bolder}.markmap-foreign mark{background:#ffeaa7}.markmap-foreign pre,.markmap-foreign pre[class*=language-]{margin:0;padding:.2em .4em}"; | ||
| 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({ | ||
| getMarkmap: () => window.markmap | ||
| }, context); | ||
| var css_248z = ".markmap-container{height:0;left:-100px;overflow:hidden;position:absolute;top:-100px;width:0}.markmap-container>*{display:inline-block}.markmap-container>*>.markmap-foreign:last-child{white-space:nowrap}"; | ||
| for (const item of items) { | ||
| await loadJSItem(item, context); | ||
| } | ||
| } | ||
| const globalCSS = css_248z$1; | ||
| function loadCSS(items) { | ||
| for (const item of items) { | ||
| loadCSSItem(item); | ||
| } | ||
| } | ||
| function linkWidth(nodeData) { | ||
| const data = nodeData.data; | ||
| return Math.max(6 - 2 * data.d, 1.5); | ||
| return Math.max(6 - 2 * data.depth, 1.5); | ||
| } | ||
@@ -1014,6 +1250,8 @@ | ||
| const refreshHook = new Hook(); | ||
| const defaultColorFn = d3.scaleOrdinal(d3.schemeCategory10); | ||
| const isMacintosh = typeof navigator !== 'undefined' && navigator.userAgent.includes('Macintosh'); | ||
| class Markmap { | ||
| constructor(svg, opts) { | ||
| this.revokers = []; | ||
| ['handleZoom', 'handleClick'].forEach(key => { | ||
| ['handleZoom', 'handleClick', 'handlePan'].forEach(key => { | ||
| this[key] = this[key].bind(this); | ||
@@ -1024,10 +1262,17 @@ }); | ||
| this.styleNode = this.svg.append('style'); | ||
| this.zoom = d3.zoom().on('zoom', this.handleZoom); | ||
| this.options = _extends$1({}, Markmap.defaultOptions, opts); | ||
| 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; | ||
| } | ||
| return (!event.ctrlKey || event.type === 'wheel') && !event.button; | ||
| }).on('zoom', this.handleZoom); | ||
| this.setOptions(opts); | ||
| this.state = { | ||
| id: this.options.id || getId() | ||
| id: this.options.id || this.svg.attr('id') || getId() | ||
| }; | ||
| this.g = this.svg.append('g').attr('class', `${this.state.id}-g`); | ||
| this.g = this.svg.append('g'); | ||
| this.updateStyle(); | ||
| this.svg.call(this.zoom); | ||
| this.svg.call(this.zoom).on('wheel', this.handlePan); | ||
| this.revokers.push(refreshHook.tap(() => { | ||
@@ -1040,4 +1285,3 @@ this.setData(); | ||
| const { | ||
| style, | ||
| nodeFont | ||
| style | ||
| } = this.options; | ||
@@ -1047,24 +1291,10 @@ const { | ||
| } = this.state; | ||
| const extraStyle = typeof style === 'function' ? style(id) : ''; | ||
| const styleText = `\ | ||
| .${id} { line-height: 1; } | ||
| .${id} a { color: #0097e6; } | ||
| .${id} a:hover { color: #00a8ff; } | ||
| .${id}-g > path { fill: none; } | ||
| .${id}-g > g > circle { cursor: pointer; } | ||
| .${id}-fo > div { display: inline-block; font: ${nodeFont}; white-space: nowrap; } | ||
| .${id}-fo code { font-size: calc(1em - 2px); color: #555; background-color: #f0f0f0; border-radius: 2px; } | ||
| .${id}-fo :not(pre) > code { padding: .2em .4em; } | ||
| .${id}-fo del { text-decoration: line-through; } | ||
| .${id}-fo em { font-style: italic; } | ||
| .${id}-fo strong { font-weight: bolder; } | ||
| .${id}-fo pre { margin: 0; padding: .2em .4em; } | ||
| ${extraStyle} | ||
| `; | ||
| return styleText; | ||
| const styleText = typeof style === 'function' ? style(id) : ''; | ||
| return [this.options.embedGlobalCSS && css_248z$1, styleText].filter(Boolean).join('\n'); | ||
| } | ||
| updateStyle() { | ||
| this.svg.attr('class', addClass(this.svg.attr('class'), this.state.id)); | ||
| this.styleNode.text(this.getStyleContent()); | ||
| this.svg.attr('class', addClass(this.svg.attr('class'), 'markmap', this.state.id)); | ||
| const style = this.getStyleContent(); | ||
| this.styleNode.text(style); | ||
| } | ||
@@ -1079,10 +1309,17 @@ | ||
| handleClick(e, d) { | ||
| var _data$p; | ||
| handlePan(e) { | ||
| e.preventDefault(); | ||
| const transform = d3.zoomTransform(this.svg.node()); | ||
| const newTransform = transform.translate(-e.deltaX, -e.deltaY); | ||
| this.svg.call(this.zoom.transform, newTransform); | ||
| } | ||
| handleClick(_, d) { | ||
| var _data$payload; | ||
| const { | ||
| data | ||
| } = d; | ||
| data.p = _extends$1({}, data.p, { | ||
| f: !((_data$p = data.p) != null && _data$p.f) | ||
| data.payload = _extends({}, data.payload, { | ||
| fold: !((_data$payload = data.payload) != null && _data$payload.fold) | ||
| }); | ||
@@ -1093,7 +1330,7 @@ this.renderData(d.data); | ||
| initializeData(node) { | ||
| let i = 0; | ||
| let nodeId = 0; | ||
| const { | ||
| nodeFont, | ||
| color, | ||
| nodeMinHeight | ||
| nodeMinHeight, | ||
| maxWidth | ||
| } = this.options; | ||
@@ -1103,34 +1340,28 @@ const { | ||
| } = this.state; | ||
| const container = document.createElement('div'); | ||
| const containerClass = `${id}-container`; | ||
| container.className = addClass(container.className, `${id}-fo`, containerClass); | ||
| const style = document.createElement('style'); | ||
| style.textContent = ` | ||
| ${this.getStyleContent()} | ||
| .${containerClass} { | ||
| position: absolute; | ||
| width: 0; | ||
| height: 0; | ||
| top: -100px; | ||
| left: -100px; | ||
| overflow: hidden; | ||
| font: ${nodeFont}; | ||
| } | ||
| .${containerClass} > div { | ||
| display: inline-block; | ||
| } | ||
| `; | ||
| document.body.append(style, container); | ||
| const container = mountDom(jsx("div", { | ||
| className: `markmap-container markmap ${id}-g` | ||
| })); | ||
| const style = mountDom(jsx("style", { | ||
| children: [this.getStyleContent(), css_248z].join('\n') | ||
| })); | ||
| document.body.append(container, style); | ||
| const groupStyle = maxWidth ? `max-width: ${maxWidth}px` : null; | ||
| walkTree(node, (item, next) => { | ||
| var _item$c; | ||
| var _item$children; | ||
| item.c = (_item$c = item.c) == null ? void 0 : _item$c.map(child => _extends$1({}, child)); | ||
| i += 1; | ||
| const el = document.createElement('div'); | ||
| el.innerHTML = item.v; | ||
| container.append(el); | ||
| item.p = _extends$1({}, item.p, { | ||
| // unique ID | ||
| i, | ||
| el | ||
| item.children = (_item$children = item.children) == null ? void 0 : _item$children.map(child => _extends({}, child)); | ||
| nodeId += 1; | ||
| const group = mountDom(jsx("div", { | ||
| style: groupStyle, | ||
| children: jsx("div", { | ||
| className: "markmap-foreign", | ||
| dangerouslySetInnerHTML: { | ||
| __html: item.content | ||
| } | ||
| }) | ||
| })); | ||
| container.append(group); | ||
| item.state = _extends({}, item.state, { | ||
| id: nodeId, | ||
| el: group.firstChild | ||
| }); | ||
@@ -1141,13 +1372,20 @@ color(item); // preload colors | ||
| }); | ||
| const nodes = arrayFrom(container.childNodes); | ||
| this.viewHooks.transformHtml.call(this, nodes); | ||
| const nodes = 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 | ||
| // content in one line as much as possible, and subjecting to the given max-width. | ||
| nodes.forEach(node => { | ||
| node.parentNode.append(node.cloneNode(true)); | ||
| }); | ||
| walkTree(node, (item, next, parent) => { | ||
| var _parent$p; | ||
| var _parent$state, _parent$state2; | ||
| const rect = item.p.el.getBoundingClientRect(); | ||
| item.v = item.p.el.innerHTML; | ||
| item.p.s = [Math.ceil(rect.width), Math.max(Math.ceil(rect.height), nodeMinHeight)]; // TODO keep keys for unchanged objects | ||
| // unique key, should be based on content | ||
| item.p.k = `${(parent == null ? void 0 : (_parent$p = parent.p) == null ? void 0 : _parent$p.i) || ''}.${item.p.i}:${item.v}`; | ||
| 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(); | ||
@@ -1160,3 +1398,3 @@ }); | ||
| setOptions(opts) { | ||
| Object.assign(this.options, opts); | ||
| this.options = _extends({}, Markmap.defaultOptions, opts); | ||
| } | ||
@@ -1172,3 +1410,3 @@ | ||
| renderData(originData) { | ||
| var _origin$data$p$x, _origin$data$p$y; | ||
| var _origin$data$state$x, _origin$data$state$y; | ||
@@ -1183,11 +1421,8 @@ if (!this.state.data) return; | ||
| } = this.options; | ||
| const { | ||
| id | ||
| } = this.state; | ||
| const layout = flextree().children(d => { | ||
| var _d$p; | ||
| var _d$payload; | ||
| return !((_d$p = d.p) != null && _d$p.f) && d.c; | ||
| return !((_d$payload = d.payload) != null && _d$payload.fold) && d.children; | ||
| }).nodeSize(d => { | ||
| const [width, height] = d.data.p.s; | ||
| const [width, height] = d.data.state.size; | ||
| return [height, width + (width ? paddingX * 2 : 0) + spacingHorizontal]; | ||
@@ -1215,29 +1450,31 @@ }).spacing((a, b) => { | ||
| const origin = originData && descendants.find(item => item.data === originData) || tree; | ||
| const x0 = (_origin$data$p$x = origin.data.p.x0) != null ? _origin$data$p$x : origin.x; | ||
| const y0 = (_origin$data$p$y = origin.data.p.y0) != null ? _origin$data$p$y : origin.y; // Update the nodes | ||
| 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.p.k); | ||
| const nodeEnter = node.enter().append('g').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('class', 'markmap-node').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('rect').attr('width', 0).attr('x', d => d.ySizeInner); | ||
| nodeExit.select('line').attr('x1', d => d.ySizeInner).attr('x2', d => d.ySizeInner); | ||
| 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(); | ||
| const nodeMerge = node.merge(nodeEnter); | ||
| this.transition(nodeMerge).attr('transform', d => `translate(${d.y},${d.x - d.xSize / 2})`); | ||
| const rect = nodeMerge.selectAll(childSelector('rect')).data(d => [d], d => d.data.p.k).join(enter => { | ||
| return enter.append('rect').attr('x', d => d.ySizeInner).attr('y', d => d.xSize - linkWidth(d) / 2).attr('width', 0).attr('height', linkWidth); | ||
| 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 => { | ||
| return enter.append('line').attr('x1', d => d.ySizeInner).attr('y1', d => d.xSize).attr('x2', d => d.ySizeInner).attr('y2', d => d.xSize); | ||
| }, update => update, exit => exit.remove()); | ||
| this.transition(rect).attr('x', -1).attr('width', d => d.ySizeInner + 2).attr('fill', d => color(d.data)); | ||
| const circle = nodeMerge.selectAll(childSelector('circle')).data(d => d.data.c ? [d] : [], d => d.data.p.k).join(enter => { | ||
| this.transition(line).attr('x1', -1).attr('x2', d => d.ySizeInner + 2).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 => { | ||
| return enter.append('circle').attr('stroke-width', '1.5').attr('cx', d => d.ySizeInner).attr('cy', d => d.xSize).attr('r', 0).on('click', this.handleClick); | ||
| }, update => update, exit => exit.remove()); | ||
| this.transition(circle).attr('r', 6).attr('stroke', d => color(d.data)).attr('fill', d => { | ||
| var _d$data$p; | ||
| var _d$data$payload; | ||
| return (_d$data$p = d.data.p) != null && _d$data$p.f && d.data.c ? color(d.data) : '#fff'; | ||
| return (_d$data$payload = d.data.payload) != null && _d$data$payload.fold && d.data.children ? color(d.data) : '#fff'; | ||
| }); | ||
| const foreignObject = nodeMerge.selectAll(childSelector('foreignObject')).data(d => [d], d => d.data.p.k).join(enter => { | ||
| const fo = enter.append('foreignObject').attr('class', `${id}-fo`).attr('x', paddingX).attr('y', 0).style('opacity', 0).attr('height', d => d.xSize).on('mousedown', stopPropagation).on('dblclick', stopPropagation); | ||
| 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).attr('height', d => d.xSize).on('mousedown', stopPropagation).on('dblclick', stopPropagation); | ||
| fo.append('xhtml:div').select(function select(d) { | ||
| const clone = d.data.p.el.cloneNode(true); | ||
| const clone = d.data.state.el.cloneNode(true); | ||
| this.replaceWith(clone); | ||
@@ -1250,5 +1487,5 @@ return clone; | ||
| const path = this.g.selectAll(childSelector('path')).data(links, d => d.target.data.p.k).join(enter => { | ||
| const path = this.g.selectAll(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('d', linkShape({ | ||
| 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, | ||
@@ -1273,4 +1510,4 @@ target: source | ||
| descendants.forEach(d => { | ||
| d.data.p.x0 = d.x; | ||
| d.data.p.y0 = d.y; | ||
| d.data.state.x0 = d.x; | ||
| d.data.state.y0 = d.y; | ||
| }); | ||
@@ -1332,3 +1569,3 @@ } | ||
| const pd = _extends$1({ | ||
| const pd = _extends({ | ||
| left: 0, | ||
@@ -1369,3 +1606,4 @@ right: 0, | ||
| destroy() { | ||
| this.svg.remove(); | ||
| this.svg.on('.zoom', null); | ||
| this.svg.html(null); | ||
| this.revokers.forEach(fn => { | ||
@@ -1389,13 +1627,47 @@ fn(); | ||
| Markmap.defaultOptions = { | ||
| autoFit: false, | ||
| color: node => defaultColorFn(`${node.state.id}`), | ||
| duration: 500, | ||
| nodeFont: '300 16px/20px sans-serif', | ||
| embedGlobalCSS: true, | ||
| fitRatio: 0.95, | ||
| maxWidth: 0, | ||
| nodeMinHeight: 16, | ||
| spacingVertical: 5, | ||
| paddingX: 8, | ||
| scrollForPan: isMacintosh, | ||
| spacingHorizontal: 80, | ||
| autoFit: false, | ||
| fitRatio: 0.95, | ||
| color: (colorFn => node => colorFn(node.p.i))(d3.scaleOrdinal(d3.schemeCategory10)), | ||
| paddingX: 8 | ||
| spacingVertical: 5 | ||
| }; | ||
| function deriveOptions(jsonOptions) { | ||
| const { | ||
| color, | ||
| duration, | ||
| maxWidth | ||
| } = jsonOptions || {}; | ||
| let opts; | ||
| export { Markmap, loadCSS, loadJS, refreshHook }; | ||
| if (typeof color === 'string') { | ||
| opts = _extends({}, opts, { | ||
| color: () => color | ||
| }); | ||
| } else if (color != null && color.length) { | ||
| opts = _extends({}, opts, { | ||
| color: node => color[node.state.id % color.length] | ||
| }); | ||
| } | ||
| if (typeof duration === 'number') { | ||
| opts = _extends({}, opts, { | ||
| duration | ||
| }); | ||
| } | ||
| if (typeof maxWidth === 'number') { | ||
| opts = _extends({}, opts, { | ||
| maxWidth | ||
| }); | ||
| } | ||
| return opts; | ||
| } | ||
| export { Markmap, defaultColorFn, deriveOptions, globalCSS, loadCSS, loadJS, refreshHook }; |
@@ -1,2 +0,2 @@ | ||
| /*! markmap-view v0.2.7 | MIT License */ | ||
| /*! markmap-view v0.13.0-alpha.0 | MIT License */ | ||
| (function (exports, d3) { | ||
@@ -19,2 +19,30 @@ 'use strict'; | ||
| /*! markmap-common v0.13.0-alpha.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() { | ||
@@ -38,2 +66,177 @@ _extends$1 = Object.assign || function (target) { | ||
| 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++) { | ||
| var source = arguments[i]; | ||
| for (var key in source) { | ||
| if (Object.prototype.hasOwnProperty.call(source, key)) { | ||
| target[key] = source[key]; | ||
| } | ||
| } | ||
| } | ||
| return target; | ||
| }; | ||
| return _extends.apply(this, arguments); | ||
| } | ||
| function count(node) { | ||
@@ -213,3 +416,3 @@ var sum = 0, | ||
| function hierarchy(data, children) { | ||
| var root = new Node(data), | ||
| var root = new Node$1(data), | ||
| valued = +data.value && (root.value = data.value), | ||
@@ -231,3 +434,3 @@ node, | ||
| for (i = n - 1; i >= 0; --i) { | ||
| nodes.push(child = node.children[i] = new Node(childs[i])); | ||
| nodes.push(child = node.children[i] = new Node$1(childs[i])); | ||
| child.parent = node; | ||
@@ -259,3 +462,3 @@ child.depth = node.depth + 1; | ||
| } | ||
| function Node(data) { | ||
| function Node$1(data) { | ||
| this.data = data; | ||
@@ -265,4 +468,4 @@ this.depth = this.height = 0; | ||
| } | ||
| Node.prototype = hierarchy.prototype = { | ||
| constructor: Node, | ||
| Node$1.prototype = hierarchy.prototype = { | ||
| constructor: Node$1, | ||
| count: node_count, | ||
@@ -793,208 +996,241 @@ each: node_each, | ||
| /*! markmap-common v0.1.6 | MIT License */ | ||
| class Hook { | ||
| constructor() { | ||
| this.listeners = []; | ||
| } | ||
| /*! @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 = { | ||
| show: XLINK_NS, | ||
| actuate: XLINK_NS, | ||
| href: XLINK_NS | ||
| }; | ||
| tap(fn) { | ||
| this.listeners.push(fn); | ||
| return () => this.revoke(fn); | ||
| } | ||
| var isLeaf = function isLeaf(c) { | ||
| return typeof c === 'string' || typeof c === 'number'; | ||
| }; | ||
| revoke(fn) { | ||
| const i = this.listeners.indexOf(fn); | ||
| if (i >= 0) this.listeners.splice(i, 1); | ||
| } | ||
| var isElement = function isElement(c) { | ||
| return (c == null ? void 0 : c.vtype) === VTYPE_ELEMENT; | ||
| }; | ||
| revokeAll() { | ||
| this.listeners.splice(0); | ||
| } | ||
| var isRenderFunction = function isRenderFunction(c) { | ||
| return (c == null ? void 0 : c.vtype) === VTYPE_FUNCTION; | ||
| }; | ||
| call(...args) { | ||
| for (const fn of this.listeners) { | ||
| fn(...args); | ||
| } | ||
| } | ||
| function jsx(type, props) { | ||
| var 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 | ||
| }; | ||
| } | ||
| function Fragment(props) { | ||
| return props.children; | ||
| } | ||
| function _extends() { | ||
| _extends = Object.assign || function (target) { | ||
| for (var i = 1; i < arguments.length; i++) { | ||
| var source = arguments[i]; | ||
| var DEFAULT_ENV = { | ||
| isSvg: false | ||
| }; | ||
| for (var key in source) { | ||
| if (Object.prototype.hasOwnProperty.call(source, key)) { | ||
| target[key] = source[key]; | ||
| } | ||
| } | ||
| } | ||
| return target; | ||
| }; | ||
| return _extends.apply(this, arguments); | ||
| 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)); | ||
| } | ||
| } | ||
| const uniqId = Math.random().toString(36).slice(2, 8); | ||
| let globalIndex = 0; | ||
| function mountAttributes(domElement, props, env) { | ||
| for (var key in props) { | ||
| if (key === 'key' || key === 'children' || key === 'ref') continue; | ||
| function getId() { | ||
| globalIndex += 1; | ||
| return `mm-${uniqId}-${globalIndex}`; | ||
| if (key === 'dangerouslySetInnerHTML') { | ||
| domElement.innerHTML = props[key].__html; | ||
| } else if (key === 'innerHTML' || key === 'textContent' || key === 'innerText') { | ||
| domElement[key] = props[key]; | ||
| } else if (key.startsWith('on')) { | ||
| domElement[key.toLowerCase()] = props[key]; | ||
| } else { | ||
| setDOMAttribute(domElement, key, props[key], env.isSvg); | ||
| } | ||
| } | ||
| } | ||
| function noop() {// noop | ||
| } | ||
| var attrMap = { | ||
| className: 'class', | ||
| labelFor: 'for' | ||
| }; | ||
| function walkTree(tree, callback, key = 'c') { | ||
| const walk = (item, parent) => callback(item, () => { | ||
| var _item$key; | ||
| function setDOMAttribute(el, attr, value, isSVG) { | ||
| attr = attrMap[attr] || attr; | ||
| (_item$key = item[key]) == null ? void 0 : _item$key.forEach(child => { | ||
| walk(child, item); | ||
| }); | ||
| }, parent); | ||
| if (value === true) { | ||
| el.setAttribute(attr, ''); | ||
| } else if (value === false) { | ||
| el.removeAttribute(attr); | ||
| } else { | ||
| var namespace = isSVG ? NS_ATTRS[attr] : undefined; | ||
| walk(tree); | ||
| if (namespace !== undefined) { | ||
| el.setAttributeNS(namespace, attr, value); | ||
| } else { | ||
| el.setAttribute(attr, value); | ||
| } | ||
| } | ||
| } | ||
| function arrayFrom(arrayLike) { | ||
| if (Array.from) return Array.from(arrayLike); | ||
| const array = []; | ||
| function mount(vnode, env) { | ||
| if (env === void 0) { | ||
| env = DEFAULT_ENV; | ||
| } | ||
| for (let i = 0; i < arrayLike.length; i += 1) { | ||
| array.push(arrayLike[i]); | ||
| if (vnode == null || typeof vnode === 'boolean') { | ||
| return { | ||
| type: MOUNT_SINGLE, | ||
| node: null | ||
| }; | ||
| } | ||
| return array; | ||
| } | ||
| if (vnode instanceof Node) { | ||
| return { | ||
| type: MOUNT_SINGLE, | ||
| node: vnode | ||
| }; | ||
| } | ||
| 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(' '); | ||
| } | ||
| if (isRenderFunction(vnode)) { | ||
| var _ref = vnode, | ||
| type = _ref.type, | ||
| props = _ref.props; | ||
| function childSelector(filter) { | ||
| if (typeof filter === 'string') { | ||
| const tagName = filter; | ||
| if (type === Fragment) { | ||
| var node = document.createDocumentFragment(); | ||
| filter = el => el.tagName === tagName; | ||
| if (props.children) { | ||
| var childrenRef = mount(props.children, env); | ||
| insertDom(node, childrenRef); | ||
| } | ||
| return { | ||
| type: MOUNT_SINGLE, | ||
| node: node | ||
| }; | ||
| } | ||
| var childVNode = type(props); | ||
| return mount(childVNode, env); | ||
| } | ||
| const filterFn = filter; | ||
| return function selector() { | ||
| let nodes = arrayFrom(this.childNodes); | ||
| if (filterFn) nodes = nodes.filter(node => filterFn(node)); | ||
| return nodes; | ||
| }; | ||
| } | ||
| if (isLeaf(vnode)) { | ||
| return { | ||
| type: MOUNT_SINGLE, | ||
| node: document.createTextNode("" + vnode) | ||
| }; | ||
| } | ||
| function memoize(fn) { | ||
| const cache = {}; | ||
| return function memoized(...args) { | ||
| const key = `${args[0]}`; | ||
| let data = cache[key]; | ||
| if (isElement(vnode)) { | ||
| var _node; | ||
| if (!data) { | ||
| data = { | ||
| value: fn(...args) | ||
| }; | ||
| cache[key] = data; | ||
| var _ref2 = vnode, | ||
| _type = _ref2.type, | ||
| _props = _ref2.props; | ||
| if (!env.isSvg && _type === 'svg') { | ||
| env = Object.assign({}, env, { | ||
| isSvg: true | ||
| }); | ||
| } | ||
| return data.value; | ||
| }; | ||
| } | ||
| if (!env.isSvg) { | ||
| _node = document.createElement(_type); | ||
| } else { | ||
| _node = document.createElementNS(SVG_NS, _type); | ||
| } | ||
| function createElement(tagName, props, attrs) { | ||
| const el = document.createElement(tagName); | ||
| mountAttributes(_node, _props, env); | ||
| if (props) { | ||
| Object.entries(props).forEach(([key, value]) => { | ||
| el[key] = value; | ||
| }); | ||
| var _childrenRef; | ||
| if (_props.children) { | ||
| var childEnv = env; | ||
| if (env.isSvg && _type === 'foreignObject') { | ||
| childEnv = Object.assign({}, childEnv, { | ||
| isSvg: false | ||
| }); | ||
| } | ||
| _childrenRef = mount(_props.children, childEnv); | ||
| } | ||
| if (_childrenRef != null) insertDom(_node, _childrenRef); | ||
| var ref = _props.ref; | ||
| if (typeof ref === 'function') ref(_node); | ||
| return { | ||
| type: MOUNT_SINGLE, | ||
| node: _node | ||
| }; | ||
| } | ||
| if (attrs) { | ||
| Object.entries(attrs).forEach(([key, value]) => { | ||
| el.setAttribute(key, value); | ||
| }); | ||
| if (Array.isArray(vnode)) { | ||
| return { | ||
| type: MOUNT_ARRAY, | ||
| children: vnode.map(function (child) { | ||
| return mount(child, env); | ||
| }) | ||
| }; | ||
| } | ||
| return el; | ||
| throw new Error('mount: Invalid Vnode!'); | ||
| } | ||
| const memoizedPreloadJS = memoize(url => { | ||
| document.head.append(createElement('link', { | ||
| rel: 'preload', | ||
| as: 'script', | ||
| href: url | ||
| })); | ||
| }); | ||
| function flattenWithoutNull(array) { | ||
| var result = []; | ||
| function loadJSItem(item, context) { | ||
| if (item.type === 'script') { | ||
| return new Promise((resolve, reject) => { | ||
| var _item$data; | ||
| 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); | ||
| } | ||
| document.head.append(createElement('script', _extends({}, item.data, { | ||
| onload: resolve, | ||
| onerror: reject | ||
| }))); // Run inline script synchronously | ||
| return result; | ||
| } | ||
| if (!((_item$data = item.data) != null && _item$data.src)) resolve(); | ||
| }); | ||
| function asDom(result) { | ||
| if (result.type === MOUNT_SINGLE) { | ||
| return result.node; | ||
| } | ||
| if (item.type === 'iife') { | ||
| const { | ||
| fn, | ||
| getParams | ||
| } = item.data; | ||
| fn(...((getParams == null ? void 0 : getParams(context)) || [])); | ||
| } | ||
| return result.children.map(asDom); | ||
| } | ||
| /** | ||
| * Mount vdom as real DOM nodes. | ||
| */ | ||
| 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({ | ||
| rel: 'stylesheet' | ||
| }, item.data))); | ||
| function mountDom(vnode) { | ||
| if (Array.isArray(vnode)) { | ||
| return flattenWithoutNull(vnode.map(mountDom)); | ||
| } | ||
| return asDom(mount(vnode)); | ||
| } | ||
| async function loadJS(items, context) { | ||
| const needPreload = items.filter(item => { | ||
| var _item$data2; | ||
| 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:bolder}.markmap-foreign mark{background:#ffeaa7}.markmap-foreign pre,.markmap-foreign pre[class*=language-]{margin:0;padding:.2em .4em}"; | ||
| 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({ | ||
| getMarkmap: () => window.markmap | ||
| }, context); | ||
| var css_248z = ".markmap-container{height:0;left:-100px;overflow:hidden;position:absolute;top:-100px;width:0}.markmap-container>*{display:inline-block}.markmap-container>*>.markmap-foreign:last-child{white-space:nowrap}"; | ||
| for (const item of items) { | ||
| await loadJSItem(item, context); | ||
| } | ||
| } | ||
| const globalCSS = css_248z$1; | ||
| function loadCSS(items) { | ||
| for (const item of items) { | ||
| loadCSSItem(item); | ||
| } | ||
| } | ||
| function linkWidth(nodeData) { | ||
| const data = nodeData.data; | ||
| return Math.max(6 - 2 * data.d, 1.5); | ||
| return Math.max(6 - 2 * data.depth, 1.5); | ||
| } | ||
@@ -1030,6 +1266,8 @@ | ||
| const refreshHook = new Hook(); | ||
| const defaultColorFn = d3__namespace.scaleOrdinal(d3__namespace.schemeCategory10); | ||
| const isMacintosh = typeof navigator !== 'undefined' && navigator.userAgent.includes('Macintosh'); | ||
| class Markmap { | ||
| constructor(svg, opts) { | ||
| this.revokers = []; | ||
| ['handleZoom', 'handleClick'].forEach(key => { | ||
| ['handleZoom', 'handleClick', 'handlePan'].forEach(key => { | ||
| this[key] = this[key].bind(this); | ||
@@ -1040,10 +1278,17 @@ }); | ||
| this.styleNode = this.svg.append('style'); | ||
| this.zoom = d3__namespace.zoom().on('zoom', this.handleZoom); | ||
| this.options = _extends$1({}, Markmap.defaultOptions, opts); | ||
| this.zoom = d3__namespace.zoom().filter(event => { | ||
| if (this.options.scrollForPan) { | ||
| // Pan with wheels, zoom with ctrl+wheels | ||
| if (event.type === 'wheel') return event.ctrlKey && !event.button; | ||
| } | ||
| return (!event.ctrlKey || event.type === 'wheel') && !event.button; | ||
| }).on('zoom', this.handleZoom); | ||
| this.setOptions(opts); | ||
| this.state = { | ||
| id: this.options.id || getId() | ||
| id: this.options.id || this.svg.attr('id') || getId() | ||
| }; | ||
| this.g = this.svg.append('g').attr('class', `${this.state.id}-g`); | ||
| this.g = this.svg.append('g'); | ||
| this.updateStyle(); | ||
| this.svg.call(this.zoom); | ||
| this.svg.call(this.zoom).on('wheel', this.handlePan); | ||
| this.revokers.push(refreshHook.tap(() => { | ||
@@ -1056,4 +1301,3 @@ this.setData(); | ||
| const { | ||
| style, | ||
| nodeFont | ||
| style | ||
| } = this.options; | ||
@@ -1063,24 +1307,10 @@ const { | ||
| } = this.state; | ||
| const extraStyle = typeof style === 'function' ? style(id) : ''; | ||
| const styleText = `\ | ||
| .${id} { line-height: 1; } | ||
| .${id} a { color: #0097e6; } | ||
| .${id} a:hover { color: #00a8ff; } | ||
| .${id}-g > path { fill: none; } | ||
| .${id}-g > g > circle { cursor: pointer; } | ||
| .${id}-fo > div { display: inline-block; font: ${nodeFont}; white-space: nowrap; } | ||
| .${id}-fo code { font-size: calc(1em - 2px); color: #555; background-color: #f0f0f0; border-radius: 2px; } | ||
| .${id}-fo :not(pre) > code { padding: .2em .4em; } | ||
| .${id}-fo del { text-decoration: line-through; } | ||
| .${id}-fo em { font-style: italic; } | ||
| .${id}-fo strong { font-weight: bolder; } | ||
| .${id}-fo pre { margin: 0; padding: .2em .4em; } | ||
| ${extraStyle} | ||
| `; | ||
| return styleText; | ||
| const styleText = typeof style === 'function' ? style(id) : ''; | ||
| return [this.options.embedGlobalCSS && css_248z$1, styleText].filter(Boolean).join('\n'); | ||
| } | ||
| updateStyle() { | ||
| this.svg.attr('class', addClass(this.svg.attr('class'), this.state.id)); | ||
| this.styleNode.text(this.getStyleContent()); | ||
| this.svg.attr('class', addClass(this.svg.attr('class'), 'markmap', this.state.id)); | ||
| const style = this.getStyleContent(); | ||
| this.styleNode.text(style); | ||
| } | ||
@@ -1095,10 +1325,17 @@ | ||
| handleClick(e, d) { | ||
| var _data$p; | ||
| handlePan(e) { | ||
| e.preventDefault(); | ||
| const transform = d3__namespace.zoomTransform(this.svg.node()); | ||
| const newTransform = transform.translate(-e.deltaX, -e.deltaY); | ||
| this.svg.call(this.zoom.transform, newTransform); | ||
| } | ||
| handleClick(_, d) { | ||
| var _data$payload; | ||
| const { | ||
| data | ||
| } = d; | ||
| data.p = _extends$1({}, data.p, { | ||
| f: !((_data$p = data.p) != null && _data$p.f) | ||
| data.payload = _extends({}, data.payload, { | ||
| fold: !((_data$payload = data.payload) != null && _data$payload.fold) | ||
| }); | ||
@@ -1109,7 +1346,7 @@ this.renderData(d.data); | ||
| initializeData(node) { | ||
| let i = 0; | ||
| let nodeId = 0; | ||
| const { | ||
| nodeFont, | ||
| color, | ||
| nodeMinHeight | ||
| nodeMinHeight, | ||
| maxWidth | ||
| } = this.options; | ||
@@ -1119,34 +1356,28 @@ const { | ||
| } = this.state; | ||
| const container = document.createElement('div'); | ||
| const containerClass = `${id}-container`; | ||
| container.className = addClass(container.className, `${id}-fo`, containerClass); | ||
| const style = document.createElement('style'); | ||
| style.textContent = ` | ||
| ${this.getStyleContent()} | ||
| .${containerClass} { | ||
| position: absolute; | ||
| width: 0; | ||
| height: 0; | ||
| top: -100px; | ||
| left: -100px; | ||
| overflow: hidden; | ||
| font: ${nodeFont}; | ||
| } | ||
| .${containerClass} > div { | ||
| display: inline-block; | ||
| } | ||
| `; | ||
| document.body.append(style, container); | ||
| const container = mountDom(jsx("div", { | ||
| className: `markmap-container markmap ${id}-g` | ||
| })); | ||
| const style = mountDom(jsx("style", { | ||
| children: [this.getStyleContent(), css_248z].join('\n') | ||
| })); | ||
| document.body.append(container, style); | ||
| const groupStyle = maxWidth ? `max-width: ${maxWidth}px` : null; | ||
| walkTree(node, (item, next) => { | ||
| var _item$c; | ||
| var _item$children; | ||
| item.c = (_item$c = item.c) == null ? void 0 : _item$c.map(child => _extends$1({}, child)); | ||
| i += 1; | ||
| const el = document.createElement('div'); | ||
| el.innerHTML = item.v; | ||
| container.append(el); | ||
| item.p = _extends$1({}, item.p, { | ||
| // unique ID | ||
| i, | ||
| el | ||
| item.children = (_item$children = item.children) == null ? void 0 : _item$children.map(child => _extends({}, child)); | ||
| nodeId += 1; | ||
| const group = mountDom(jsx("div", { | ||
| style: groupStyle, | ||
| children: jsx("div", { | ||
| className: "markmap-foreign", | ||
| dangerouslySetInnerHTML: { | ||
| __html: item.content | ||
| } | ||
| }) | ||
| })); | ||
| container.append(group); | ||
| item.state = _extends({}, item.state, { | ||
| id: nodeId, | ||
| el: group.firstChild | ||
| }); | ||
@@ -1157,13 +1388,20 @@ color(item); // preload colors | ||
| }); | ||
| const nodes = arrayFrom(container.childNodes); | ||
| this.viewHooks.transformHtml.call(this, nodes); | ||
| const nodes = 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 | ||
| // content in one line as much as possible, and subjecting to the given max-width. | ||
| nodes.forEach(node => { | ||
| node.parentNode.append(node.cloneNode(true)); | ||
| }); | ||
| walkTree(node, (item, next, parent) => { | ||
| var _parent$p; | ||
| var _parent$state, _parent$state2; | ||
| const rect = item.p.el.getBoundingClientRect(); | ||
| item.v = item.p.el.innerHTML; | ||
| item.p.s = [Math.ceil(rect.width), Math.max(Math.ceil(rect.height), nodeMinHeight)]; // TODO keep keys for unchanged objects | ||
| // unique key, should be based on content | ||
| item.p.k = `${(parent == null ? void 0 : (_parent$p = parent.p) == null ? void 0 : _parent$p.i) || ''}.${item.p.i}:${item.v}`; | ||
| 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(); | ||
@@ -1176,3 +1414,3 @@ }); | ||
| setOptions(opts) { | ||
| Object.assign(this.options, opts); | ||
| this.options = _extends({}, Markmap.defaultOptions, opts); | ||
| } | ||
@@ -1188,3 +1426,3 @@ | ||
| renderData(originData) { | ||
| var _origin$data$p$x, _origin$data$p$y; | ||
| var _origin$data$state$x, _origin$data$state$y; | ||
@@ -1199,11 +1437,8 @@ if (!this.state.data) return; | ||
| } = this.options; | ||
| const { | ||
| id | ||
| } = this.state; | ||
| const layout = flextree().children(d => { | ||
| var _d$p; | ||
| var _d$payload; | ||
| return !((_d$p = d.p) != null && _d$p.f) && d.c; | ||
| return !((_d$payload = d.payload) != null && _d$payload.fold) && d.children; | ||
| }).nodeSize(d => { | ||
| const [width, height] = d.data.p.s; | ||
| const [width, height] = d.data.state.size; | ||
| return [height, width + (width ? paddingX * 2 : 0) + spacingHorizontal]; | ||
@@ -1231,29 +1466,31 @@ }).spacing((a, b) => { | ||
| const origin = originData && descendants.find(item => item.data === originData) || tree; | ||
| const x0 = (_origin$data$p$x = origin.data.p.x0) != null ? _origin$data$p$x : origin.x; | ||
| const y0 = (_origin$data$p$y = origin.data.p.y0) != null ? _origin$data$p$y : origin.y; // Update the nodes | ||
| 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.p.k); | ||
| const nodeEnter = node.enter().append('g').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('class', 'markmap-node').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('rect').attr('width', 0).attr('x', d => d.ySizeInner); | ||
| nodeExit.select('line').attr('x1', d => d.ySizeInner).attr('x2', d => d.ySizeInner); | ||
| 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(); | ||
| const nodeMerge = node.merge(nodeEnter); | ||
| this.transition(nodeMerge).attr('transform', d => `translate(${d.y},${d.x - d.xSize / 2})`); | ||
| const rect = nodeMerge.selectAll(childSelector('rect')).data(d => [d], d => d.data.p.k).join(enter => { | ||
| return enter.append('rect').attr('x', d => d.ySizeInner).attr('y', d => d.xSize - linkWidth(d) / 2).attr('width', 0).attr('height', linkWidth); | ||
| 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 => { | ||
| return enter.append('line').attr('x1', d => d.ySizeInner).attr('y1', d => d.xSize).attr('x2', d => d.ySizeInner).attr('y2', d => d.xSize); | ||
| }, update => update, exit => exit.remove()); | ||
| this.transition(rect).attr('x', -1).attr('width', d => d.ySizeInner + 2).attr('fill', d => color(d.data)); | ||
| const circle = nodeMerge.selectAll(childSelector('circle')).data(d => d.data.c ? [d] : [], d => d.data.p.k).join(enter => { | ||
| this.transition(line).attr('x1', -1).attr('x2', d => d.ySizeInner + 2).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 => { | ||
| return enter.append('circle').attr('stroke-width', '1.5').attr('cx', d => d.ySizeInner).attr('cy', d => d.xSize).attr('r', 0).on('click', this.handleClick); | ||
| }, update => update, exit => exit.remove()); | ||
| this.transition(circle).attr('r', 6).attr('stroke', d => color(d.data)).attr('fill', d => { | ||
| var _d$data$p; | ||
| var _d$data$payload; | ||
| return (_d$data$p = d.data.p) != null && _d$data$p.f && d.data.c ? color(d.data) : '#fff'; | ||
| return (_d$data$payload = d.data.payload) != null && _d$data$payload.fold && d.data.children ? color(d.data) : '#fff'; | ||
| }); | ||
| const foreignObject = nodeMerge.selectAll(childSelector('foreignObject')).data(d => [d], d => d.data.p.k).join(enter => { | ||
| const fo = enter.append('foreignObject').attr('class', `${id}-fo`).attr('x', paddingX).attr('y', 0).style('opacity', 0).attr('height', d => d.xSize).on('mousedown', stopPropagation).on('dblclick', stopPropagation); | ||
| 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).attr('height', d => d.xSize).on('mousedown', stopPropagation).on('dblclick', stopPropagation); | ||
| fo.append('xhtml:div').select(function select(d) { | ||
| const clone = d.data.p.el.cloneNode(true); | ||
| const clone = d.data.state.el.cloneNode(true); | ||
| this.replaceWith(clone); | ||
@@ -1266,5 +1503,5 @@ return clone; | ||
| const path = this.g.selectAll(childSelector('path')).data(links, d => d.target.data.p.k).join(enter => { | ||
| const path = this.g.selectAll(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('d', linkShape({ | ||
| 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, | ||
@@ -1289,4 +1526,4 @@ target: source | ||
| descendants.forEach(d => { | ||
| d.data.p.x0 = d.x; | ||
| d.data.p.y0 = d.y; | ||
| d.data.state.x0 = d.x; | ||
| d.data.state.y0 = d.y; | ||
| }); | ||
@@ -1348,3 +1585,3 @@ } | ||
| const pd = _extends$1({ | ||
| const pd = _extends({ | ||
| left: 0, | ||
@@ -1385,3 +1622,4 @@ right: 0, | ||
| destroy() { | ||
| this.svg.remove(); | ||
| this.svg.on('.zoom', null); | ||
| this.svg.html(null); | ||
| this.revokers.forEach(fn => { | ||
@@ -1405,14 +1643,51 @@ fn(); | ||
| Markmap.defaultOptions = { | ||
| autoFit: false, | ||
| color: node => defaultColorFn(`${node.state.id}`), | ||
| duration: 500, | ||
| nodeFont: '300 16px/20px sans-serif', | ||
| embedGlobalCSS: true, | ||
| fitRatio: 0.95, | ||
| maxWidth: 0, | ||
| nodeMinHeight: 16, | ||
| spacingVertical: 5, | ||
| paddingX: 8, | ||
| scrollForPan: isMacintosh, | ||
| spacingHorizontal: 80, | ||
| autoFit: false, | ||
| fitRatio: 0.95, | ||
| color: (colorFn => node => colorFn(node.p.i))(d3__namespace.scaleOrdinal(d3__namespace.schemeCategory10)), | ||
| paddingX: 8 | ||
| spacingVertical: 5 | ||
| }; | ||
| function deriveOptions(jsonOptions) { | ||
| const { | ||
| color, | ||
| duration, | ||
| maxWidth | ||
| } = jsonOptions || {}; | ||
| let opts; | ||
| if (typeof color === 'string') { | ||
| opts = _extends({}, opts, { | ||
| color: () => color | ||
| }); | ||
| } else if (color != null && color.length) { | ||
| opts = _extends({}, opts, { | ||
| color: node => color[node.state.id % color.length] | ||
| }); | ||
| } | ||
| if (typeof duration === 'number') { | ||
| opts = _extends({}, opts, { | ||
| duration | ||
| }); | ||
| } | ||
| if (typeof maxWidth === 'number') { | ||
| opts = _extends({}, opts, { | ||
| maxWidth | ||
| }); | ||
| } | ||
| return opts; | ||
| } | ||
| exports.Markmap = Markmap; | ||
| exports.defaultColorFn = defaultColorFn; | ||
| exports.deriveOptions = deriveOptions; | ||
| exports.globalCSS = globalCSS; | ||
| exports.loadCSS = loadCSS; | ||
@@ -1419,0 +1694,0 @@ exports.loadJS = loadJS; |
@@ -1,4 +0,5 @@ | ||
| /*! markmap-view v0.2.7 | MIT License */ | ||
| !function(t,e){"use strict";function n(t){if(t&&t.__esModule)return t;var e=Object.create(null);if(t)for(var n in t)e[n]=t[n];return e.default=t,Object.freeze(e)}var r=n(e);function i(){return i=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n=arguments[e];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(t[r]=n[r])}return t},i.apply(this,arguments)}function s(t){var e=0,n=t.children,r=n&&n.length;if(r)for(;--r>=0;)e+=n[r].value;else e=1;t.value=e}function o(t,e){var n,r,i,s,o,l=new h(t),d=+t.value&&(l.value=t.value),u=[l];for(null==e&&(e=a);n=u.pop();)if(d&&(n.value=+n.data.value),(i=e(n.data))&&(o=i.length))for(n.children=new Array(o),s=o-1;s>=0;--s)u.push(r=n.children[s]=new h(i[s])),r.parent=n,r.depth=n.depth+1;return l.eachBefore(c)}function a(t){return t.children}function l(t){t.data=t.data.data}function c(t){var e=0;do{t.height=e}while((t=t.parent)&&t.height<++e)}function h(t){this.data=t,this.depth=this.height=0,this.parent=null}h.prototype=o.prototype={constructor:h,count:function(){return this.eachAfter(s)},each:function(t){var e,n,r,i,s=this,o=[s];do{for(e=o.reverse(),o=[];s=e.pop();)if(t(s),n=s.children)for(r=0,i=n.length;r<i;++r)o.push(n[r])}while(o.length);return this},eachAfter:function(t){for(var e,n,r,i=this,s=[i],o=[];i=s.pop();)if(o.push(i),e=i.children)for(n=0,r=e.length;n<r;++n)s.push(e[n]);for(;i=o.pop();)t(i);return this},eachBefore:function(t){for(var e,n,r=this,i=[r];r=i.pop();)if(t(r),e=r.children)for(n=e.length-1;n>=0;--n)i.push(e[n]);return this},sum:function(t){return this.eachAfter((function(e){for(var n=+t(e.data)||0,r=e.children,i=r&&r.length;--i>=0;)n+=r[i].value;e.value=n}))},sort:function(t){return this.eachBefore((function(e){e.children&&e.children.sort(t)}))},path:function(t){for(var e=this,n=function(t,e){if(t===e)return t;var n=t.ancestors(),r=e.ancestors(),i=null;t=n.pop(),e=r.pop();for(;t===e;)i=t,t=n.pop(),e=r.pop();return i}(e,t),r=[e];e!==n;)e=e.parent,r.push(e);for(var i=r.length;t!==n;)r.splice(i,0,t),t=t.parent;return r},ancestors:function(){for(var t=this,e=[t];t=t.parent;)e.push(t);return e},descendants:function(){var t=[];return this.each((function(e){t.push(e)})),t},leaves:function(){var t=[];return this.eachBefore((function(e){e.children||t.push(e)})),t},links:function(){var t=this,e=[];return t.each((function(n){n!==t&&e.push({source:n.parent,target:n})})),e},copy:function(){return o(this).eachBefore(l)}};var d={name:"d3-flextree",version:"2.1.2",main:"build/d3-flextree.js",module:"index","jsnext:main":"index",author:{name:"Chris Maloney",url:"http://chrismaloney.org"},description:"Flexible tree layout algorithm that allows for variable node sizes.",keywords:["d3","d3-module","layout","tree","hierarchy","d3-hierarchy","plugin","d3-plugin","infovis","visualization","2d"],homepage:"https://github.com/klortho/d3-flextree",license:"WTFPL",repository:{type:"git",url:"https://github.com/klortho/d3-flextree.git"},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"},dependencies:{"d3-hierarchy":"^1.1.5"},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"}};const{version:u}=d,p=Object.freeze({children:t=>t.children,nodeSize:t=>t.data.size,spacing:0});function f(t){const e=Object.assign({},p,t);function n(t){const n=e[t];return"function"==typeof n?n:()=>n}function r(t){const e=s(function(){const t=i(),e=n("nodeSize"),r=n("spacing");return class extends t{constructor(t){super(t),Object.assign(this,{x:0,y:0,relX:0,prelim:0,shift:0,change:0,lExt:this,lExtRelX:0,lThr:null,rExt:this,rExtRelX:0,rThr:null})}get size(){return e(this.data)}spacing(t){return r(this.data,t.data)}get x(){return this.data.x}set x(t){this.data.x=t}get y(){return this.data.y}set y(t){this.data.y=t}update(){return g(this),m(this),this}}}(),t,(t=>t.children));return e.update(),e.data}function i(){const t=n("nodeSize"),e=n("spacing");return class n extends o.prototype.constructor{constructor(t){super(t)}copy(){const t=s(this.constructor,this,(t=>t.children));return t.each((t=>t.data=t.data.data)),t}get size(){return t(this)}spacing(t){return e(this,t)}get nodes(){return this.descendants()}get xSize(){return this.size[0]}get ySize(){return this.size[1]}get top(){return this.y}get bottom(){return this.y+this.ySize}get left(){return this.x-this.xSize/2}get right(){return this.x+this.xSize/2}get root(){const t=this.ancestors();return t[t.length-1]}get numChildren(){return this.hasChildren?this.children.length:0}get hasChildren(){return!this.noChildren}get noChildren(){return null===this.children}get firstChild(){return this.hasChildren?this.children[0]:null}get lastChild(){return this.hasChildren?this.children[this.numChildren-1]:null}get extents(){return(this.children||[]).reduce(((t,e)=>n.maxExtents(t,e.extents)),this.nodeExtents)}get nodeExtents(){return{top:this.top,bottom:this.bottom,left:this.left,right:this.right}}static maxExtents(t,e){return{top:Math.min(t.top,e.top),bottom:Math.max(t.bottom,e.bottom),left:Math.min(t.left,e.left),right:Math.max(t.right,e.right)}}}}function s(t,e,n){const r=(e,i)=>{const s=new t(e);Object.assign(s,{parent:i,depth:null===i?0:i.depth+1,height:0,length:1});const o=n(e)||[];return s.children=0===o.length?null:o.map((t=>r(t,s))),s.children&&Object.assign(s,s.children.reduce(((t,e)=>({height:Math.max(t.height,e.height+1),length:t.length+e.length})),s)),s};return r(e,null)}return Object.assign(r,{nodeSize(t){return arguments.length?(e.nodeSize=t,r):e.nodeSize},spacing(t){return arguments.length?(e.spacing=t,r):e.spacing},children(t){return arguments.length?(e.children=t,r):e.children},hierarchy(t,n){const r=void 0===n?e.children:n;return s(i(),t,r)},dump(t){const e=n("nodeSize"),r=t=>n=>{const i=t+" ",s=t+" ",{x:o,y:a}=n,l=e(n),c=n.children||[],h=0===c.length?" ":`,${i}children: [${s}${c.map(r(s)).join(s)}${i}],${t}`;return`{ size: [${l.join(", ")}],${i}x: ${o}, y: ${a}${h}},`};return r("\n")(t)}}),r}f.version=u;const g=(t,e=0)=>(t.y=e,(t.children||[]).reduce(((e,n)=>{const[r,i]=e;g(n,t.y+t.ySize);const s=(0===r?n.lExt:n.rExt).bottom;0!==r&&y(t,r,i);return[r+1,$(s,r,i)]}),[0,null]),x(t),E(t),t),m=(t,e,n)=>{void 0===e&&(e=-t.relX-t.prelim,n=0);const r=e+t.relX;return t.relX=r+t.prelim-n,t.prelim=0,t.x=n+t.relX,(t.children||[]).forEach((e=>m(e,r,t.x))),t},x=t=>{(t.children||[]).reduce(((t,e)=>{const[n,r]=t,i=n+e.shift,s=r+i+e.change;return e.relX+=s,[i,s]}),[0,0])},y=(t,e,n)=>{const r=t.children[e-1],i=t.children[e];let s=r,o=r.relX,a=i,l=i.relX,c=!0;for(;s&&a;){s.bottom>n.lowY&&(n=n.next);const r=o+s.prelim-(l+a.prelim)+s.xSize/2+a.xSize/2+s.spacing(a);(r>0||r<0&&c)&&(l+=r,v(i,r),z(t,e,n.index,r)),c=!1;const h=s.bottom,d=a.bottom;h<=d&&(s=S(s),s&&(o+=s.relX)),h>=d&&(a=b(a),a&&(l+=a.relX))}!s&&a?k(t,e,a,l):s&&!a&&w(t,e,s,o)},v=(t,e)=>{t.relX+=e,t.lExtRelX+=e,t.rExtRelX+=e},z=(t,e,n,r)=>{const i=t.children[e],s=e-n;if(s>1){const e=r/s;t.children[n+1].shift+=e,i.shift-=e,i.change-=r-e}},b=t=>t.hasChildren?t.firstChild:t.lThr,S=t=>t.hasChildren?t.lastChild:t.rThr,k=(t,e,n,r)=>{const i=t.firstChild,s=i.lExt,o=t.children[e];s.lThr=n;const a=r-n.relX-i.lExtRelX;s.relX+=a,s.prelim-=a,i.lExt=o.lExt,i.lExtRelX=o.lExtRelX},w=(t,e,n,r)=>{const i=t.children[e],s=i.rExt,o=t.children[e-1];s.rThr=n;const a=r-n.relX-i.rExtRelX;s.relX+=a,s.prelim-=a,i.rExt=o.rExt,i.rExtRelX=o.rExtRelX},E=t=>{if(t.hasChildren){const e=t.firstChild,n=t.lastChild,r=(e.prelim+e.relX-e.xSize/2+n.relX+n.prelim+n.xSize/2)/2;Object.assign(t,{prelim:r,lExt:e.lExt,lExtRelX:e.lExtRelX,rExt:n.rExt,rExtRelX:n.rExtRelX})}},$=(t,e,n)=>{for(;null!==n&&t>=n.lowY;)n=n.next;return{lowY:t,index:e,next:n}}; | ||
| /*! markmap-common v0.1.6 | MIT License */ | ||
| class X{constructor(){this.listeners=[]}tap(t){return this.listeners.push(t),()=>this.revoke(t)}revoke(t){const e=this.listeners.indexOf(t);e>=0&&this.listeners.splice(e,1)}revokeAll(){this.listeners.splice(0)}call(...t){for(const e of this.listeners)e(...t)}}function j(){return j=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n=arguments[e];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(t[r]=n[r])}return t},j.apply(this,arguments)}const C=Math.random().toString(36).slice(2,8);let O=0;function M(){}function I(t,e,n="c"){const r=(t,i)=>e(t,(()=>{var e;null==(e=t[n])||e.forEach((e=>{r(e,t)}))}),i);r(t)}function R(t){if(Array.from)return Array.from(t);const e=[];for(let n=0;n<t.length;n+=1)e.push(t[n]);return e}function A(t,...e){const n=(t||"").split(" ").filter(Boolean);return e.forEach((t=>{t&&n.indexOf(t)<0&&n.push(t)})),n.join(" ")}function B(t){if("string"==typeof t){const e=t;t=t=>t.tagName===e}const e=t;return function(){let t=R(this.childNodes);return e&&(t=t.filter((t=>e(t)))),t}}function D(t,e,n){const r=document.createElement(t);return e&&Object.entries(e).forEach((([t,e])=>{r[t]=e})),n&&Object.entries(n).forEach((([t,e])=>{r.setAttribute(t,e)})),r}const H=function(t){const e={};return function(...n){const r=`${n[0]}`;let i=e[r];return i||(i={value:t(...n)},e[r]=i),i.value}}((t=>{document.head.append(D("link",{rel:"preload",as:"script",href:t}))}));function T(t,e){if("script"===t.type)return new Promise(((e,n)=>{var r;document.head.append(D("script",j({},t.data,{onload:e,onerror:n}))),null!=(r=t.data)&&r.src||e()}));if("iife"===t.type){const{fn:n,getParams:r}=t.data;n(...(null==r?void 0:r(e))||[])}}function N(t){"style"===t.type?document.head.append(D("style",{textContent:t.data})):"stylesheet"===t.type&&document.head.append(D("link",j({rel:"stylesheet"},t.data)))}function F(t){const e=t.data;return Math.max(6-2*e.d,1.5)}function L(t,e){return t[r.minIndex(t,e)]}function Y(t){t.stopPropagation()}const P=new X;class U{constructor(t,e){this.revokers=[],["handleZoom","handleClick"].forEach((t=>{this[t]=this[t].bind(this)})),this.viewHooks={transformHtml:new X},this.svg=t.datum?t:r.select(t),this.styleNode=this.svg.append("style"),this.zoom=r.zoom().on("zoom",this.handleZoom),this.options=i({},U.defaultOptions,e),this.state={id:this.options.id||(O+=1,`mm-${C}-${O}`)},this.g=this.svg.append("g").attr("class",`${this.state.id}-g`),this.updateStyle(),this.svg.call(this.zoom),this.revokers.push(P.tap((()=>{this.setData()})))}getStyleContent(){const{style:t,nodeFont:e}=this.options,{id:n}=this.state;return`.${n} { line-height: 1; }\n.${n} a { color: #0097e6; }\n.${n} a:hover { color: #00a8ff; }\n.${n}-g > path { fill: none; }\n.${n}-g > g > circle { cursor: pointer; }\n.${n}-fo > div { display: inline-block; font: ${e}; white-space: nowrap; }\n.${n}-fo code { font-size: calc(1em - 2px); color: #555; background-color: #f0f0f0; border-radius: 2px; }\n.${n}-fo :not(pre) > code { padding: .2em .4em; }\n.${n}-fo del { text-decoration: line-through; }\n.${n}-fo em { font-style: italic; }\n.${n}-fo strong { font-weight: bolder; }\n.${n}-fo pre { margin: 0; padding: .2em .4em; }\n${"function"==typeof t?t(n):""}\n`}updateStyle(){this.svg.attr("class",A(this.svg.attr("class"),this.state.id)),this.styleNode.text(this.getStyleContent())}handleZoom(t){const{transform:e}=t;this.g.attr("transform",e)}handleClick(t,e){var n;const{data:r}=e;r.p=i({},r.p,{f:!(null!=(n=r.p)&&n.f)}),this.renderData(e.data)}initializeData(t){let e=0;const{nodeFont:n,color:r,nodeMinHeight:s}=this.options,{id:o}=this.state,a=document.createElement("div"),l=`${o}-container`;a.className=A(a.className,`${o}-fo`,l);const c=document.createElement("style");c.textContent=`\n${this.getStyleContent()}\n.${l} {\n position: absolute;\n width: 0;\n height: 0;\n top: -100px;\n left: -100px;\n overflow: hidden;\n font: ${n};\n}\n.${l} > div {\n display: inline-block;\n}\n`,document.body.append(c,a),I(t,((t,n)=>{var s;t.c=null==(s=t.c)?void 0:s.map((t=>i({},t))),e+=1;const o=document.createElement("div");o.innerHTML=t.v,a.append(o),t.p=i({},t.p,{i:e,el:o}),r(t),n()}));const h=R(a.childNodes);this.viewHooks.transformHtml.call(this,h),I(t,((t,e,n)=>{var r;const i=t.p.el.getBoundingClientRect();t.v=t.p.el.innerHTML,t.p.s=[Math.ceil(i.width),Math.max(Math.ceil(i.height),s)],t.p.k=`${(null==n||null==(r=n.p)?void 0:r.i)||""}.${t.p.i}:${t.v}`,e()})),a.remove(),c.remove()}setOptions(t){Object.assign(this.options,t)}setData(t,e){t&&(this.state.data=t),this.initializeData(this.state.data),e&&this.setOptions(e),this.renderData()}renderData(t){var e,n;if(!this.state.data)return;const{spacingHorizontal:i,paddingX:s,spacingVertical:o,autoFit:a,color:l}=this.options,{id:c}=this.state,h=f().children((t=>{var e;return!(null!=(e=t.p)&&e.f)&&t.c})).nodeSize((t=>{const[e,n]=t.data.p.s;return[n,e+(e?2*s:0)+i]})).spacing(((t,e)=>t.parent===e.parent?o:2*o)),d=h.hierarchy(this.state.data);h(d),function(t,e){I(t,((t,n)=>{t.ySizeInner=t.ySize-e,t.y+=e,n()}),"children")}(d,i);const u=d.descendants().reverse(),p=d.links(),g=r.linkHorizontal(),m=r.min(u,(t=>t.x-t.xSize/2)),x=r.max(u,(t=>t.x+t.xSize/2)),y=r.min(u,(t=>t.y)),v=r.max(u,(t=>t.y+t.ySizeInner));Object.assign(this.state,{minX:m,maxX:x,minY:y,maxY:v}),a&&this.fit();const z=t&&u.find((e=>e.data===t))||d,b=null!=(e=z.data.p.x0)?e:z.x,S=null!=(n=z.data.p.y0)?n:z.y,k=this.g.selectAll(B("g")).data(u,(t=>t.data.p.k)),w=k.enter().append("g").attr("transform",(t=>`translate(${S+z.ySizeInner-t.ySizeInner},${b+z.xSize/2-t.xSize})`)),E=this.transition(k.exit());E.select("rect").attr("width",0).attr("x",(t=>t.ySizeInner)),E.select("foreignObject").style("opacity",0),E.attr("transform",(t=>`translate(${z.y+z.ySizeInner-t.ySizeInner},${z.x+z.xSize/2-t.xSize})`)).remove();const $=k.merge(w);this.transition($).attr("transform",(t=>`translate(${t.y},${t.x-t.xSize/2})`));const X=$.selectAll(B("rect")).data((t=>[t]),(t=>t.data.p.k)).join((t=>t.append("rect").attr("x",(t=>t.ySizeInner)).attr("y",(t=>t.xSize-F(t)/2)).attr("width",0).attr("height",F)),(t=>t),(t=>t.remove()));this.transition(X).attr("x",-1).attr("width",(t=>t.ySizeInner+2)).attr("fill",(t=>l(t.data)));const j=$.selectAll(B("circle")).data((t=>t.data.c?[t]:[]),(t=>t.data.p.k)).join((t=>t.append("circle").attr("stroke-width","1.5").attr("cx",(t=>t.ySizeInner)).attr("cy",(t=>t.xSize)).attr("r",0).on("click",this.handleClick)),(t=>t),(t=>t.remove()));this.transition(j).attr("r",6).attr("stroke",(t=>l(t.data))).attr("fill",(t=>{var e;return null!=(e=t.data.p)&&e.f&&t.data.c?l(t.data):"#fff"}));const C=$.selectAll(B("foreignObject")).data((t=>[t]),(t=>t.data.p.k)).join((t=>{const e=t.append("foreignObject").attr("class",`${c}-fo`).attr("x",s).attr("y",0).style("opacity",0).attr("height",(t=>t.xSize)).on("mousedown",Y).on("dblclick",Y);return e.append("xhtml:div").select((function(t){const e=t.data.p.el.cloneNode(!0);return this.replaceWith(e),e})).attr("xmlns","http://www.w3.org/1999/xhtml"),e}),(t=>t),(t=>t.remove())).attr("width",(t=>Math.max(0,t.ySizeInner-2*s)));this.transition(C).style("opacity",1);const O=this.g.selectAll(B("path")).data(p,(t=>t.target.data.p.k)).join((t=>{const e=[S+z.ySizeInner,b+z.xSize/2];return t.insert("path","g").attr("d",g({source:e,target:e}))}),(t=>t),(t=>{const e=[z.y+z.ySizeInner,z.x+z.xSize/2];return this.transition(t).attr("d",g({source:e,target:e})).remove()}));this.transition(O).attr("stroke",(t=>l(t.target.data))).attr("stroke-width",(t=>F(t.target))).attr("d",(t=>{const e=[t.source.y+t.source.ySizeInner,t.source.x+t.source.xSize/2],n=[t.target.y,t.target.x+t.target.xSize/2];return g({source:e,target:n})})),u.forEach((t=>{t.data.p.x0=t.x,t.data.p.y0=t.y}))}transition(t){const{duration:e}=this.options;return t.transition().duration(e)}async fit(){const t=this.svg.node(),{width:e,height:n}=t.getBoundingClientRect(),{fitRatio:i}=this.options,{minX:s,maxX:o,minY:a,maxY:l}=this.state,c=l-a,h=o-s,d=Math.min(e/c*i,n/h*i,2),u=r.zoomIdentity.translate((e-c*d)/2-a*d,(n-h*d)/2-s*d).scale(d);return this.transition(this.svg).call(this.zoom.transform,u).end().catch(M)}async ensureView(t,e){let n,s;if(this.g.selectAll(B("g")).each((function(e){e.data===t&&(n=this,s=e)})),!n||!s)return;const o=this.svg.node(),a=o.getBoundingClientRect(),l=r.zoomTransform(o),[c,h]=[s.y,s.y+s.ySizeInner+2].map((t=>t*l.k+l.x)),[d,u]=[s.x-s.xSize/2,s.x+s.xSize/2].map((t=>t*l.k+l.y)),p=i({left:0,right:0,top:0,bottom:0},e),f=[p.left-c,a.width-p.right-h],g=[p.top-d,a.height-p.bottom-u],m=f[0]*f[1]>0?L(f,Math.abs)/l.k:0,x=g[0]*g[1]>0?L(g,Math.abs)/l.k:0;if(m||x){const t=l.translate(m,x);return this.transition(this.svg).call(this.zoom.transform,t).end().catch(M)}}async rescale(t){const e=this.svg.node(),{width:n,height:i}=e.getBoundingClientRect(),s=n/2,o=i/2,a=r.zoomTransform(e),l=a.translate((s-a.x)*(1-t)/a.k,(o-a.y)*(1-t)/a.k).scale(t);return this.transition(this.svg).call(this.zoom.transform,l).end().catch(M)}destroy(){this.svg.remove(),this.revokers.forEach((t=>{t()}))}static create(t,e,n){const r=new U(t,e);return n&&(r.setData(n),r.fit()),r}}var V;U.defaultOptions={duration:500,nodeFont:"300 16px/20px sans-serif",nodeMinHeight:16,spacingVertical:5,spacingHorizontal:80,autoFit:!1,fitRatio:.95,color:(V=r.scaleOrdinal(r.schemeCategory10),t=>V(t.p.i)),paddingX:8},t.Markmap=U,t.loadCSS=function(t){for(const e of t)N(e)},t.loadJS=async function(t,e){const n=t.filter((t=>{var e;return"script"===t.type&&(null==(e=t.data)?void 0:e.src)}));n.length>1&&n.forEach((t=>H(t.data.src))),e=j({getMarkmap:()=>window.markmap},e);for(const n of t)await T(n,e)},t.refreshHook=P}(this.markmap=this.markmap||{},d3); | ||
| /*! markmap-view v0.13.0-alpha.0 | MIT License */ | ||
| !function(t,e){"use strict";function n(t){if(t&&t.__esModule)return t;var e=Object.create(null);if(t)for(var n in t)e[n]=t[n];return e.default=t,Object.freeze(e)}var r=n(e); | ||
| /*! markmap-common v0.13.0-alpha.0 | MIT License */class i{constructor(){this.listeners=[]}tap(t){return this.listeners.push(t),()=>this.revoke(t)}revoke(t){const e=this.listeners.indexOf(t);e>=0&&this.listeners.splice(e,1)}revokeAll(){this.listeners.splice(0)}call(...t){for(const e of this.listeners)e(...t)}}function a(){return a=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n=arguments[e];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(t[r]=n[r])}return t},a.apply(this,arguments)}const o=Math.random().toString(36).slice(2,8);let s=0;function l(){}function c(t,e,n="children"){const r=(t,i)=>e(t,(()=>{var e;null==(e=t[n])||e.forEach((e=>{r(e,t)}))}),i);r(t)}function h(t){if(Array.from)return Array.from(t);const e=[];for(let n=0;n<t.length;n+=1)e.push(t[n]);return e}function d(t){if("string"==typeof t){const e=t;t=t=>t.tagName===e}const e=t;return function(){let t=h(this.childNodes);return e&&(t=t.filter((t=>e(t)))),t}}function u(t,e,n){const r=document.createElement(t);return e&&Object.entries(e).forEach((([t,e])=>{r[t]=e})),n&&Object.entries(n).forEach((([t,e])=>{r.setAttribute(t,e)})),r}const p=function(t){const e={};return function(...n){const r=`${n[0]}`;let i=e[r];return i||(i={value:t(...n)},e[r]=i),i.value}}((t=>{document.head.append(u("link",{rel:"preload",as:"script",href:t}))}));function f(t,e){if("script"===t.type)return new Promise(((e,n)=>{var r;document.head.append(u("script",a({},t.data,{onload:e,onerror:n}))),null!=(r=t.data)&&r.src||e()}));if("iife"===t.type){const{fn:n,getParams:r}=t.data;n(...(null==r?void 0:r(e))||[])}}function m(t){"style"===t.type?document.head.append(u("style",{textContent:t.data})):"stylesheet"===t.type&&document.head.append(u("link",a({rel:"stylesheet"},t.data)))}function g(){return g=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n=arguments[e];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(t[r]=n[r])}return t},g.apply(this,arguments)}function y(t){var e=0,n=t.children,r=n&&n.length;if(r)for(;--r>=0;)e+=n[r].value;else e=1;t.value=e}function x(t,e){var n,r,i,a,o,s=new z(t),l=+t.value&&(s.value=t.value),c=[s];for(null==e&&(e=v);n=c.pop();)if(l&&(n.value=+n.data.value),(i=e(n.data))&&(o=i.length))for(n.children=new Array(o),a=o-1;a>=0;--a)c.push(r=n.children[a]=new z(i[a])),r.parent=n,r.depth=n.depth+1;return s.eachBefore(b)}function v(t){return t.children}function k(t){t.data=t.data.data}function b(t){var e=0;do{t.height=e}while((t=t.parent)&&t.height<++e)}function z(t){this.data=t,this.depth=this.height=0,this.parent=null}z.prototype=x.prototype={constructor:z,count:function(){return this.eachAfter(y)},each:function(t){var e,n,r,i,a=this,o=[a];do{for(e=o.reverse(),o=[];a=e.pop();)if(t(a),n=a.children)for(r=0,i=n.length;r<i;++r)o.push(n[r])}while(o.length);return this},eachAfter:function(t){for(var e,n,r,i=this,a=[i],o=[];i=a.pop();)if(o.push(i),e=i.children)for(n=0,r=e.length;n<r;++n)a.push(e[n]);for(;i=o.pop();)t(i);return this},eachBefore:function(t){for(var e,n,r=this,i=[r];r=i.pop();)if(t(r),e=r.children)for(n=e.length-1;n>=0;--n)i.push(e[n]);return this},sum:function(t){return this.eachAfter((function(e){for(var n=+t(e.data)||0,r=e.children,i=r&&r.length;--i>=0;)n+=r[i].value;e.value=n}))},sort:function(t){return this.eachBefore((function(e){e.children&&e.children.sort(t)}))},path:function(t){for(var e=this,n=function(t,e){if(t===e)return t;var n=t.ancestors(),r=e.ancestors(),i=null;t=n.pop(),e=r.pop();for(;t===e;)i=t,t=n.pop(),e=r.pop();return i}(e,t),r=[e];e!==n;)e=e.parent,r.push(e);for(var i=r.length;t!==n;)r.splice(i,0,t),t=t.parent;return r},ancestors:function(){for(var t=this,e=[t];t=t.parent;)e.push(t);return e},descendants:function(){var t=[];return this.each((function(e){t.push(e)})),t},leaves:function(){var t=[];return this.eachBefore((function(e){e.children||t.push(e)})),t},links:function(){var t=this,e=[];return t.each((function(n){n!==t&&e.push({source:n.parent,target:n})})),e},copy:function(){return x(this).eachBefore(k)}};var S={name:"d3-flextree",version:"2.1.2",main:"build/d3-flextree.js",module:"index","jsnext:main":"index",author:{name:"Chris Maloney",url:"http://chrismaloney.org"},description:"Flexible tree layout algorithm that allows for variable node sizes.",keywords:["d3","d3-module","layout","tree","hierarchy","d3-hierarchy","plugin","d3-plugin","infovis","visualization","2d"],homepage:"https://github.com/klortho/d3-flextree",license:"WTFPL",repository:{type:"git",url:"https://github.com/klortho/d3-flextree.git"},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"},dependencies:{"d3-hierarchy":"^1.1.5"},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"}};const{version:w}=S,E=Object.freeze({children:t=>t.children,nodeSize:t=>t.data.size,spacing:0});function j(t){const e=Object.assign({},E,t);function n(t){const n=e[t];return"function"==typeof n?n:()=>n}function r(t){const e=a(function(){const t=i(),e=n("nodeSize"),r=n("spacing");return class extends t{constructor(t){super(t),Object.assign(this,{x:0,y:0,relX:0,prelim:0,shift:0,change:0,lExt:this,lExtRelX:0,lThr:null,rExt:this,rExtRelX:0,rThr:null})}get size(){return e(this.data)}spacing(t){return r(this.data,t.data)}get x(){return this.data.x}set x(t){this.data.x=t}get y(){return this.data.y}set y(t){this.data.y=t}update(){return C(this),X(this),this}}}(),t,(t=>t.children));return e.update(),e.data}function i(){const t=n("nodeSize"),e=n("spacing");return class n extends x.prototype.constructor{constructor(t){super(t)}copy(){const t=a(this.constructor,this,(t=>t.children));return t.each((t=>t.data=t.data.data)),t}get size(){return t(this)}spacing(t){return e(this,t)}get nodes(){return this.descendants()}get xSize(){return this.size[0]}get ySize(){return this.size[1]}get top(){return this.y}get bottom(){return this.y+this.ySize}get left(){return this.x-this.xSize/2}get right(){return this.x+this.xSize/2}get root(){const t=this.ancestors();return t[t.length-1]}get numChildren(){return this.hasChildren?this.children.length:0}get hasChildren(){return!this.noChildren}get noChildren(){return null===this.children}get firstChild(){return this.hasChildren?this.children[0]:null}get lastChild(){return this.hasChildren?this.children[this.numChildren-1]:null}get extents(){return(this.children||[]).reduce(((t,e)=>n.maxExtents(t,e.extents)),this.nodeExtents)}get nodeExtents(){return{top:this.top,bottom:this.bottom,left:this.left,right:this.right}}static maxExtents(t,e){return{top:Math.min(t.top,e.top),bottom:Math.max(t.bottom,e.bottom),left:Math.min(t.left,e.left),right:Math.max(t.right,e.right)}}}}function a(t,e,n){const r=(e,i)=>{const a=new t(e);Object.assign(a,{parent:i,depth:null===i?0:i.depth+1,height:0,length:1});const o=n(e)||[];return a.children=0===o.length?null:o.map((t=>r(t,a))),a.children&&Object.assign(a,a.children.reduce(((t,e)=>({height:Math.max(t.height,e.height+1),length:t.length+e.length})),a)),a};return r(e,null)}return Object.assign(r,{nodeSize(t){return arguments.length?(e.nodeSize=t,r):e.nodeSize},spacing(t){return arguments.length?(e.spacing=t,r):e.spacing},children(t){return arguments.length?(e.children=t,r):e.children},hierarchy(t,n){const r=void 0===n?e.children:n;return a(i(),t,r)},dump(t){const e=n("nodeSize"),r=t=>n=>{const i=t+" ",a=t+" ",{x:o,y:s}=n,l=e(n),c=n.children||[],h=0===c.length?" ":`,${i}children: [${a}${c.map(r(a)).join(a)}${i}],${t}`;return`{ size: [${l.join(", ")}],${i}x: ${o}, y: ${s}${h}},`};return r("\n")(t)}}),r}j.version=w;const C=(t,e=0)=>(t.y=e,(t.children||[]).reduce(((e,n)=>{const[r,i]=e;C(n,t.y+t.ySize);const a=(0===r?n.lExt:n.rExt).bottom;0!==r&&I(t,r,i);return[r+1,D(a,r,i)]}),[0,null]),O(t),T(t),t),X=(t,e,n)=>{void 0===e&&(e=-t.relX-t.prelim,n=0);const r=e+t.relX;return t.relX=r+t.prelim-n,t.prelim=0,t.x=n+t.relX,(t.children||[]).forEach((e=>X(e,r,t.x))),t},O=t=>{(t.children||[]).reduce(((t,e)=>{const[n,r]=t,i=n+e.shift,a=r+i+e.change;return e.relX+=a,[i,a]}),[0,0])},I=(t,e,n)=>{const r=t.children[e-1],i=t.children[e];let a=r,o=r.relX,s=i,l=i.relX,c=!0;for(;a&&s;){a.bottom>n.lowY&&(n=n.next);const r=o+a.prelim-(l+s.prelim)+a.xSize/2+s.xSize/2+a.spacing(s);(r>0||r<0&&c)&&(l+=r,M(i,r),A(t,e,n.index,r)),c=!1;const h=a.bottom,d=s.bottom;h<=d&&(a=R(a),a&&(o+=a.relX)),h>=d&&(s=$(s),s&&(l+=s.relX))}!a&&s?B(t,e,s,l):a&&!s&&N(t,e,a,o)},M=(t,e)=>{t.relX+=e,t.lExtRelX+=e,t.rExtRelX+=e},A=(t,e,n,r)=>{const i=t.children[e],a=e-n;if(a>1){const e=r/a;t.children[n+1].shift+=e,i.shift-=e,i.change-=r-e}},$=t=>t.hasChildren?t.firstChild:t.lThr,R=t=>t.hasChildren?t.lastChild:t.rThr,B=(t,e,n,r)=>{const i=t.firstChild,a=i.lExt,o=t.children[e];a.lThr=n;const s=r-n.relX-i.lExtRelX;a.relX+=s,a.prelim-=s,i.lExt=o.lExt,i.lExtRelX=o.lExtRelX},N=(t,e,n,r)=>{const i=t.children[e],a=i.rExt,o=t.children[e-1];a.rThr=n;const s=r-n.relX-i.rExtRelX;a.relX+=s,a.prelim-=s,i.rExt=o.rExt,i.rExtRelX=o.rExtRelX},T=t=>{if(t.hasChildren){const e=t.firstChild,n=t.lastChild,r=(e.prelim+e.relX-e.xSize/2+n.relX+n.prelim+n.xSize/2)/2;Object.assign(t,{prelim:r,lExt:e.lExt,lExtRelX:e.lExtRelX,rExt:n.rExt,rExtRelX:n.rExtRelX})}},D=(t,e,n)=>{for(;null!==n&&t>=n.lowY;)n=n.next;return{lowY:t,index:e,next:n}}; | ||
| /*! @gera2ld/jsx-dom v2.1.1 | ISC License */ | ||
| var H="http://www.w3.org/1999/xlink",L={show:H,actuate:H,href:H};function P(t,e){var n;if("string"==typeof t)n=1;else{if("function"!=typeof t)throw new Error("Invalid VNode type");n=2}return{vtype:n,type:t,props:e}}function F(t){return t.children}var Y={isSvg:!1};function W(t,e){if(1===e.type)null!=e.node&&t.append(e.node);else{if(4!==e.type)throw new Error("Unkown ref type "+JSON.stringify(e));e.children.forEach((function(e){W(t,e)}))}}var _={className:"class",labelFor:"for"};function U(t,e,n,r){if(e=_[e]||e,!0===n)t.setAttribute(e,"");else if(!1===n)t.removeAttribute(e);else{var i=r?L[e]:void 0;void 0!==i?t.setAttributeNS(i,e,n):t.setAttribute(e,n)}}function V(t,e){if(void 0===e&&(e=Y),null==t||"boolean"==typeof t)return{type:1,node:null};if(t instanceof Node)return{type:1,node:t};if(2===(null==(o=t)?void 0:o.vtype)){var n=t,r=n.type,i=n.props;if(r===F){var a=document.createDocumentFragment();if(i.children)W(a,V(i.children,e));return{type:1,node:a}}return V(r(i),e)}var o;if(function(t){return"string"==typeof t||"number"==typeof t}(t))return{type:1,node:document.createTextNode(""+t)};if(function(t){return 1===(null==t?void 0:t.vtype)}(t)){var s,l,c=t,h=c.type,d=c.props;if(e.isSvg||"svg"!==h||(e=Object.assign({},e,{isSvg:!0})),function(t,e,n){for(var r in e)"key"!==r&&"children"!==r&&"ref"!==r&&("dangerouslySetInnerHTML"===r?t.innerHTML=e[r].__html:"innerHTML"===r||"textContent"===r||"innerText"===r?t[r]=e[r]:r.startsWith("on")?t[r.toLowerCase()]=e[r]:U(t,r,e[r],n.isSvg))}(s=e.isSvg?document.createElementNS("http://www.w3.org/2000/svg",h):document.createElement(h),d,e),d.children){var u=e;e.isSvg&&"foreignObject"===h&&(u=Object.assign({},u,{isSvg:!1})),l=V(d.children,u)}null!=l&&W(s,l);var p=d.ref;return"function"==typeof p&&p(s),{type:1,node:s}}if(Array.isArray(t))return{type:4,children:t.map((function(t){return V(t,e)}))};throw new Error("mount: Invalid Vnode!")}function Z(t){for(var e=[],n=0;n<t.length;n+=1){var r=t[n];Array.isArray(r)?e=e.concat(Z(r)):null!=r&&e.push(r)}return e}function G(t){return 1===t.type?t.node:t.children.map(G)}function J(t){return Array.isArray(t)?Z(t.map(J)):G(V(t))}var K=".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:bolder}.markmap-foreign mark{background:#ffeaa7}.markmap-foreign pre,.markmap-foreign pre[class*=language-]{margin:0;padding:.2em .4em}",q=".markmap-container{height:0;left:-100px;overflow:hidden;position:absolute;top:-100px;width:0}.markmap-container>*{display:inline-block}.markmap-container>*>.markmap-foreign:last-child{white-space:nowrap}";function Q(t){const e=t.data;return Math.max(6-2*e.depth,1.5)}function tt(t,e){return t[r.minIndex(t,e)]}function et(t){t.stopPropagation()}const nt=new i,rt=r.scaleOrdinal(r.schemeCategory10),it="undefined"!=typeof navigator&&navigator.userAgent.includes("Macintosh");class at{constructor(t,e){this.revokers=[],["handleZoom","handleClick","handlePan"].forEach((t=>{this[t]=this[t].bind(this)})),this.viewHooks={transformHtml:new i},this.svg=t.datum?t:r.select(t),this.styleNode=this.svg.append("style"),this.zoom=r.zoom().filter((t=>this.options.scrollForPan&&"wheel"===t.type?t.ctrlKey&&!t.button:!(t.ctrlKey&&"wheel"!==t.type||t.button))).on("zoom",this.handleZoom),this.setOptions(e),this.state={id:this.options.id||this.svg.attr("id")||(s+=1,`mm-${o}-${s}`)},this.g=this.svg.append("g"),this.updateStyle(),this.svg.call(this.zoom).on("wheel",this.handlePan),this.revokers.push(nt.tap((()=>{this.setData()})))}getStyleContent(){const{style:t}=this.options,{id:e}=this.state,n="function"==typeof t?t(e):"";return[this.options.embedGlobalCSS&&K,n].filter(Boolean).join("\n")}updateStyle(){this.svg.attr("class",function(t,...e){const n=(t||"").split(" ").filter(Boolean);return e.forEach((t=>{t&&n.indexOf(t)<0&&n.push(t)})),n.join(" ")}(this.svg.attr("class"),"markmap",this.state.id));const t=this.getStyleContent();this.styleNode.text(t)}handleZoom(t){const{transform:e}=t;this.g.attr("transform",e)}handlePan(t){t.preventDefault();const e=r.zoomTransform(this.svg.node()).translate(-t.deltaX,-t.deltaY);this.svg.call(this.zoom.transform,e)}handleClick(t,e){var n;const{data:r}=e;r.payload=g({},r.payload,{fold:!(null!=(n=r.payload)&&n.fold)}),this.renderData(e.data)}initializeData(t){let e=0;const{color:n,nodeMinHeight:r,maxWidth:i}=this.options,{id:a}=this.state,o=J(P("div",{className:`markmap-container markmap ${a}-g`})),s=J(P("style",{children:[this.getStyleContent(),q].join("\n")}));document.body.append(o,s);const l=i?`max-width: ${i}px`:null;c(t,((t,r)=>{var i;t.children=null==(i=t.children)?void 0:i.map((t=>g({},t))),e+=1;const a=J(P("div",{style:l,children:P("div",{className:"markmap-foreign",dangerouslySetInnerHTML:{__html:t.content}})}));o.append(a),t.state=g({},t.state,{id:e,el:a.firstChild}),n(t),r()}));const d=h(o.childNodes).map((t=>t.firstChild));this.viewHooks.transformHtml.call(this,d),d.forEach((t=>{t.parentNode.append(t.cloneNode(!0))})),c(t,((t,e,n)=>{var i,a;const o=t.state.el.getBoundingClientRect();t.content=t.state.el.innerHTML,t.state.size=[Math.ceil(o.width)+1,Math.max(Math.ceil(o.height),r)],t.state.path=[null==n||null==(i=n.state)?void 0:i.path,t.state.id].filter(Boolean).join("."),t.state.key=[null==n||null==(a=n.state)?void 0:a.id,t.state.id].filter(Boolean).join(".")+t.content,e()})),o.remove(),s.remove()}setOptions(t){this.options=g({},at.defaultOptions,t)}setData(t,e){t&&(this.state.data=t),this.initializeData(this.state.data),e&&this.setOptions(e),this.renderData()}renderData(t){var e,n;if(!this.state.data)return;const{spacingHorizontal:i,paddingX:a,spacingVertical:o,autoFit:s,color:l}=this.options,h=j().children((t=>{var e;return!(null!=(e=t.payload)&&e.fold)&&t.children})).nodeSize((t=>{const[e,n]=t.data.state.size;return[n,e+(e?2*a:0)+i]})).spacing(((t,e)=>t.parent===e.parent?o:2*o)),u=h.hierarchy(this.state.data);h(u),function(t,e){c(t,((t,n)=>{t.ySizeInner=t.ySize-e,t.y+=e,n()}),"children")}(u,i);const p=u.descendants().reverse(),f=u.links(),m=r.linkHorizontal(),g=r.min(p,(t=>t.x-t.xSize/2)),y=r.max(p,(t=>t.x+t.xSize/2)),x=r.min(p,(t=>t.y)),v=r.max(p,(t=>t.y+t.ySizeInner));Object.assign(this.state,{minX:g,maxX:y,minY:x,maxY:v}),s&&this.fit();const k=t&&p.find((e=>e.data===t))||u,b=null!=(e=k.data.state.x0)?e:k.x,z=null!=(n=k.data.state.y0)?n:k.y,S=this.g.selectAll(d("g")).data(p,(t=>t.data.state.key)),w=S.enter().append("g").attr("class","markmap-node").attr("data-depth",(t=>t.data.depth)).attr("data-path",(t=>t.data.state.path)).attr("transform",(t=>`translate(${z+k.ySizeInner-t.ySizeInner},${b+k.xSize/2-t.xSize})`)),E=this.transition(S.exit());E.select("line").attr("x1",(t=>t.ySizeInner)).attr("x2",(t=>t.ySizeInner)),E.select("foreignObject").style("opacity",0),E.attr("transform",(t=>`translate(${k.y+k.ySizeInner-t.ySizeInner},${k.x+k.xSize/2-t.xSize})`)).remove();const C=S.merge(w);this.transition(C).attr("transform",(t=>`translate(${t.y},${t.x-t.xSize/2})`));const X=C.selectAll(d("line")).data((t=>[t]),(t=>t.data.state.key)).join((t=>t.append("line").attr("x1",(t=>t.ySizeInner)).attr("y1",(t=>t.xSize)).attr("x2",(t=>t.ySizeInner)).attr("y2",(t=>t.xSize))),(t=>t),(t=>t.remove()));this.transition(X).attr("x1",-1).attr("x2",(t=>t.ySizeInner+2)).attr("stroke",(t=>l(t.data))).attr("stroke-width",Q);const O=C.selectAll(d("circle")).data((t=>t.data.children?[t]:[]),(t=>t.data.state.key)).join((t=>t.append("circle").attr("stroke-width","1.5").attr("cx",(t=>t.ySizeInner)).attr("cy",(t=>t.xSize)).attr("r",0).on("click",this.handleClick)),(t=>t),(t=>t.remove()));this.transition(O).attr("r",6).attr("stroke",(t=>l(t.data))).attr("fill",(t=>{var e;return null!=(e=t.data.payload)&&e.fold&&t.data.children?l(t.data):"#fff"}));const I=C.selectAll(d("foreignObject")).data((t=>[t]),(t=>t.data.state.key)).join((t=>{const e=t.append("foreignObject").attr("class","markmap-foreign").attr("x",a).attr("y",0).style("opacity",0).attr("height",(t=>t.xSize)).on("mousedown",et).on("dblclick",et);return e.append("xhtml:div").select((function(t){const e=t.data.state.el.cloneNode(!0);return this.replaceWith(e),e})).attr("xmlns","http://www.w3.org/1999/xhtml"),e}),(t=>t),(t=>t.remove())).attr("width",(t=>Math.max(0,t.ySizeInner-2*a)));this.transition(I).style("opacity",1);const M=this.g.selectAll(d("path")).data(f,(t=>t.target.data.state.key)).join((t=>{const e=[z+k.ySizeInner,b+k.xSize/2];return t.insert("path","g").attr("class","markmap-link").attr("data-depth",(t=>t.target.data.depth)).attr("data-path",(t=>t.target.data.state.path)).attr("d",m({source:e,target:e}))}),(t=>t),(t=>{const e=[k.y+k.ySizeInner,k.x+k.xSize/2];return this.transition(t).attr("d",m({source:e,target:e})).remove()}));this.transition(M).attr("stroke",(t=>l(t.target.data))).attr("stroke-width",(t=>Q(t.target))).attr("d",(t=>{const e=[t.source.y+t.source.ySizeInner,t.source.x+t.source.xSize/2],n=[t.target.y,t.target.x+t.target.xSize/2];return m({source:e,target:n})})),p.forEach((t=>{t.data.state.x0=t.x,t.data.state.y0=t.y}))}transition(t){const{duration:e}=this.options;return t.transition().duration(e)}async fit(){const t=this.svg.node(),{width:e,height:n}=t.getBoundingClientRect(),{fitRatio:i}=this.options,{minX:a,maxX:o,minY:s,maxY:c}=this.state,h=c-s,d=o-a,u=Math.min(e/h*i,n/d*i,2),p=r.zoomIdentity.translate((e-h*u)/2-s*u,(n-d*u)/2-a*u).scale(u);return this.transition(this.svg).call(this.zoom.transform,p).end().catch(l)}async ensureView(t,e){let n,i;if(this.g.selectAll(d("g")).each((function(e){e.data===t&&(n=this,i=e)})),!n||!i)return;const a=this.svg.node(),o=a.getBoundingClientRect(),s=r.zoomTransform(a),[c,h]=[i.y,i.y+i.ySizeInner+2].map((t=>t*s.k+s.x)),[u,p]=[i.x-i.xSize/2,i.x+i.xSize/2].map((t=>t*s.k+s.y)),f=g({left:0,right:0,top:0,bottom:0},e),m=[f.left-c,o.width-f.right-h],y=[f.top-u,o.height-f.bottom-p],x=m[0]*m[1]>0?tt(m,Math.abs)/s.k:0,v=y[0]*y[1]>0?tt(y,Math.abs)/s.k:0;if(x||v){const t=s.translate(x,v);return this.transition(this.svg).call(this.zoom.transform,t).end().catch(l)}}async rescale(t){const e=this.svg.node(),{width:n,height:i}=e.getBoundingClientRect(),a=n/2,o=i/2,s=r.zoomTransform(e),c=s.translate((a-s.x)*(1-t)/s.k,(o-s.y)*(1-t)/s.k).scale(t);return this.transition(this.svg).call(this.zoom.transform,c).end().catch(l)}destroy(){this.svg.on(".zoom",null),this.svg.html(null),this.revokers.forEach((t=>{t()}))}static create(t,e,n){const r=new at(t,e);return n&&(r.setData(n),r.fit()),r}}at.defaultOptions={autoFit:!1,color:t=>rt(`${t.state.id}`),duration:500,embedGlobalCSS:!0,fitRatio:.95,maxWidth:0,nodeMinHeight:16,paddingX:8,scrollForPan:it,spacingHorizontal:80,spacingVertical:5},t.Markmap=at,t.defaultColorFn=rt,t.deriveOptions=function(t){const{color:e,duration:n,maxWidth:r}=t||{};let i;return"string"==typeof e?i=g({},i,{color:()=>e}):null!=e&&e.length&&(i=g({},i,{color:t=>e[t.state.id%e.length]})),"number"==typeof n&&(i=g({},i,{duration:n})),"number"==typeof r&&(i=g({},i,{maxWidth:r})),i},t.globalCSS=".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:bolder}.markmap-foreign mark{background:#ffeaa7}.markmap-foreign pre,.markmap-foreign pre[class*=language-]{margin:0;padding:.2em .4em}",t.loadCSS=function(t){for(const e of t)m(e)},t.loadJS=async function(t,e){const n=t.filter((t=>{var e;return"script"===t.type&&(null==(e=t.data)?void 0:e.src)}));n.length>1&&n.forEach((t=>p(t.data.src))),e=a({getMarkmap:()=>window.markmap},e);for(const n of t)await f(n,e)},t.refreshHook=nt}(this.markmap=this.markmap||{},d3); |
| { | ||
| "name": "markmap-view", | ||
| "version": "0.2.7", | ||
| "version": "0.13.0-alpha.0", | ||
| "description": "View markmaps in browser", | ||
@@ -44,3 +44,3 @@ "author": "Gerald <gera2ld@live.com>", | ||
| "d3-flextree": "^2.1.1", | ||
| "markmap-common": "^0.1.6" | ||
| "markmap-common": "^0.13.0-alpha.0" | ||
| }, | ||
@@ -50,3 +50,3 @@ "engines": { | ||
| }, | ||
| "gitHead": "fbec667e1706813f9f60bea6a971f3820858ca40" | ||
| "gitHead": "969aa149f36580954e77b7ba434e5c48b409cfc2" | ||
| } |
@@ -1,53 +0,3 @@ | ||
| import * as d3 from 'd3'; | ||
| import { INode, Hook, loadJS, loadCSS } from 'markmap-common'; | ||
| import { IMarkmapOptions, IMarkmapState, IMarkmapFlexTreeItem } from './types'; | ||
| export { loadJS, loadCSS }; | ||
| interface IPadding { | ||
| left: number; | ||
| right: number; | ||
| top: number; | ||
| bottom: number; | ||
| } | ||
| declare type ID3SVGElement = d3.Selection<SVGElement, IMarkmapFlexTreeItem, HTMLElement, IMarkmapFlexTreeItem>; | ||
| declare function createViewHooks(): { | ||
| transformHtml: Hook<[mm: Markmap, nodes: HTMLElement[]]>; | ||
| }; | ||
| /** | ||
| * A global hook to refresh all markmaps when called. | ||
| */ | ||
| export declare const refreshHook: Hook<[]>; | ||
| export declare class Markmap { | ||
| static defaultOptions: IMarkmapOptions; | ||
| options: IMarkmapOptions; | ||
| state: IMarkmapState; | ||
| svg: ID3SVGElement; | ||
| styleNode: d3.Selection<HTMLStyleElement, IMarkmapFlexTreeItem, HTMLElement, IMarkmapFlexTreeItem>; | ||
| g: d3.Selection<SVGGElement, IMarkmapFlexTreeItem, HTMLElement, IMarkmapFlexTreeItem>; | ||
| zoom: d3.ZoomBehavior<Element, unknown>; | ||
| viewHooks: ReturnType<typeof createViewHooks>; | ||
| revokers: (() => void)[]; | ||
| constructor(svg: string | SVGElement | ID3SVGElement, opts?: IMarkmapOptions); | ||
| getStyleContent(): string; | ||
| updateStyle(): void; | ||
| handleZoom(e: any): void; | ||
| handleClick(e: any, d: IMarkmapFlexTreeItem): void; | ||
| initializeData(node: INode): void; | ||
| setOptions(opts: IMarkmapOptions): void; | ||
| setData(data?: INode, opts?: IMarkmapOptions): void; | ||
| renderData(originData?: INode): void; | ||
| transition<T extends d3.BaseType, U, P extends d3.BaseType, Q>(sel: d3.Selection<T, U, P, Q>): d3.Transition<T, U, P, Q>; | ||
| /** | ||
| * Fit the content to the viewport. | ||
| */ | ||
| fit(): Promise<void>; | ||
| /** | ||
| * Pan the content to make the provided node visible in the viewport. | ||
| */ | ||
| ensureView(node: INode, padding: Partial<IPadding> | undefined): Promise<void>; | ||
| /** | ||
| * Scale content with it pinned at the center of the viewport. | ||
| */ | ||
| rescale(scale: number): Promise<void>; | ||
| destroy(): void; | ||
| static create(svg: string | SVGElement | ID3SVGElement, opts?: IMarkmapOptions, data?: INode): Markmap; | ||
| } | ||
| export { loadJS, loadCSS } from 'markmap-common'; | ||
| export * from './types'; | ||
| export * from './view'; |
| import { INode } from 'markmap-common'; | ||
| export interface IMarkmapJSONOptions { | ||
| color?: string | string[]; | ||
| duration?: number; | ||
| maxWidth?: number; | ||
| } | ||
| export interface IMarkmapOptions { | ||
| id?: string; | ||
| duration?: number; | ||
| nodeFont?: string; | ||
| nodeMinHeight?: number; | ||
| spacingVertical?: number; | ||
| spacingHorizontal?: number; | ||
| autoFit?: boolean; | ||
| fitRatio?: number; | ||
| color?: (node: INode) => string; | ||
| paddingX?: number; | ||
| autoFit: boolean; | ||
| color: (node: INode) => string; | ||
| duration: number; | ||
| embedGlobalCSS: boolean; | ||
| fitRatio: number; | ||
| maxWidth: number; | ||
| nodeMinHeight: number; | ||
| paddingX: number; | ||
| scrollForPan: boolean; | ||
| spacingHorizontal: number; | ||
| spacingVertical: number; | ||
| style?: (id: string) => string; | ||
@@ -14,0 +21,0 @@ } |
No alert changes
Improved metrics
- Total package byte prevSize
- increased by21.85%
160694
- Number of package files
- increased by11.11%
10
- Lines of code
- increased by18.9%
4392
- Published versions last week
- increased byInfinity%
1
Dependency changes
+ Addedmarkmap-common@0.13.4(transitive)
- Removedmarkmap-common@0.1.6(transitive)