markmap-view 0.13.0 → 0.13.3-alpha.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.cjs.js +23 -18
- package/dist/index.esm.js +23 -18
- package/dist/index.js +23 -18
- package/dist/index.min.js +3 -3
- package/package.json +3 -3
- package/types/types.d.ts +0 -20
- package/types/view.d.ts +2 -2
package/dist/index.cjs.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/*! markmap-view v0.13.
|
|
1
|
+
/*! markmap-view v0.13.3-alpha.1+f7f5075 | MIT License */
|
|
2
2
|
'use strict';
|
|
3
3
|
|
|
4
4
|
var d3 = require('d3');
|
|
@@ -17,7 +17,7 @@ return Object.freeze(n);
|
|
|
17
17
|
|
|
18
18
|
var d3__namespace = /*#__PURE__*/_interopNamespace(d3);
|
|
19
19
|
|
|
20
|
-
/*! markmap-common v0.13.
|
|
20
|
+
/*! markmap-common v0.13.3-alpha.1+f7f5075 | MIT License */
|
|
21
21
|
class Hook {
|
|
22
22
|
constructor() {
|
|
23
23
|
this.listeners = [];
|
|
@@ -1220,7 +1220,7 @@ function mountDom(vnode) {
|
|
|
1220
1220
|
|
|
1221
1221
|
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}";
|
|
1222
1222
|
|
|
1223
|
-
var css_248z = ".markmap-container{height:0;left:-100px;overflow:hidden;position:absolute;top:-100px;width:0}.markmap-container
|
|
1223
|
+
var css_248z = ".markmap-container{height:0;left:-100px;overflow:hidden;position:absolute;top:-100px;width:0}.markmap-container>.markmap-foreign{display:inline-block}.markmap-container>.markmap-foreign>div:last-child{white-space:nowrap}";
|
|
1224
1224
|
|
|
1225
1225
|
const globalCSS = css_248z$1;
|
|
1226
1226
|
|
|
@@ -1315,7 +1315,7 @@ class Markmap {
|
|
|
1315
1315
|
handlePan(e) {
|
|
1316
1316
|
e.preventDefault();
|
|
1317
1317
|
const transform = d3__namespace.zoomTransform(this.svg.node());
|
|
1318
|
-
const newTransform = transform.translate(-e.deltaX, -e.deltaY);
|
|
1318
|
+
const newTransform = transform.translate(-e.deltaX / transform.k, -e.deltaY / transform.k);
|
|
1319
1319
|
this.svg.call(this.zoom.transform, newTransform);
|
|
1320
1320
|
}
|
|
1321
1321
|
|
|
@@ -1348,16 +1348,16 @@ class Markmap {
|
|
|
1348
1348
|
children: [this.getStyleContent(), css_248z].join('\n')
|
|
1349
1349
|
}));
|
|
1350
1350
|
document.body.append(container, style);
|
|
1351
|
-
const groupStyle = maxWidth ? `max-width: ${maxWidth}px` :
|
|
1351
|
+
const groupStyle = maxWidth ? `max-width: ${maxWidth}px` : '';
|
|
1352
1352
|
walkTree(node, (item, next) => {
|
|
1353
1353
|
var _item$children;
|
|
1354
1354
|
|
|
1355
1355
|
item.children = (_item$children = item.children) == null ? void 0 : _item$children.map(child => _extends({}, child));
|
|
1356
1356
|
nodeId += 1;
|
|
1357
1357
|
const group = mountDom(jsx("div", {
|
|
1358
|
+
className: "markmap-foreign",
|
|
1358
1359
|
style: groupStyle,
|
|
1359
1360
|
children: jsx("div", {
|
|
1360
|
-
className: "markmap-foreign",
|
|
1361
1361
|
dangerouslySetInnerHTML: {
|
|
1362
1362
|
__html: item.content
|
|
1363
1363
|
}
|
|
@@ -1402,8 +1402,8 @@ class Markmap {
|
|
|
1402
1402
|
|
|
1403
1403
|
setData(data, opts) {
|
|
1404
1404
|
if (data) this.state.data = data;
|
|
1405
|
-
this.initializeData(this.state.data);
|
|
1406
1405
|
if (opts) this.setOptions(opts);
|
|
1406
|
+
this.initializeData(this.state.data);
|
|
1407
1407
|
this.renderData();
|
|
1408
1408
|
}
|
|
1409
1409
|
|
|
@@ -1450,36 +1450,40 @@ class Markmap {
|
|
|
1450
1450
|
const y0 = (_origin$data$state$y = origin.data.state.y0) != null ? _origin$data$state$y : origin.y; // Update the nodes
|
|
1451
1451
|
|
|
1452
1452
|
const node = this.g.selectAll(childSelector('g')).data(descendants, d => d.data.state.key);
|
|
1453
|
-
const nodeEnter = node.enter().append('g').attr('
|
|
1453
|
+
const nodeEnter = node.enter().append('g').attr('data-depth', d => d.data.depth).attr('data-path', d => d.data.state.path).attr('transform', d => `translate(${y0 + origin.ySizeInner - d.ySizeInner},${x0 + origin.xSize / 2 - d.xSize})`);
|
|
1454
1454
|
const nodeExit = this.transition(node.exit());
|
|
1455
1455
|
nodeExit.select('line').attr('x1', d => d.ySizeInner).attr('x2', d => d.ySizeInner);
|
|
1456
1456
|
nodeExit.select('foreignObject').style('opacity', 0);
|
|
1457
1457
|
nodeExit.attr('transform', d => `translate(${origin.y + origin.ySizeInner - d.ySizeInner},${origin.x + origin.xSize / 2 - d.xSize})`).remove();
|
|
1458
|
-
const nodeMerge = node.merge(nodeEnter)
|
|
1458
|
+
const nodeMerge = node.merge(nodeEnter).attr('class', d => {
|
|
1459
|
+
var _d$data$payload;
|
|
1460
|
+
|
|
1461
|
+
return ['markmap-node', ((_d$data$payload = d.data.payload) == null ? void 0 : _d$data$payload.fold) && 'markmap-fold'].filter(Boolean).join(' ');
|
|
1462
|
+
});
|
|
1459
1463
|
this.transition(nodeMerge).attr('transform', d => `translate(${d.y},${d.x - d.xSize / 2})`); // Update lines under the content
|
|
1460
1464
|
|
|
1461
1465
|
const line = nodeMerge.selectAll(childSelector('line')).data(d => [d], d => d.data.state.key).join(enter => {
|
|
1462
|
-
return enter.append('line').attr('x1', d => d.ySizeInner).attr('
|
|
1466
|
+
return enter.append('line').attr('x1', d => d.ySizeInner).attr('x2', d => d.ySizeInner);
|
|
1463
1467
|
}, update => update, exit => exit.remove());
|
|
1464
|
-
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
|
|
1468
|
+
this.transition(line).attr('x1', -1).attr('x2', d => d.ySizeInner + 2).attr('y1', d => d.xSize).attr('y2', d => d.xSize).attr('stroke', d => color(d.data)).attr('stroke-width', linkWidth); // Circle to link to children of the node
|
|
1465
1469
|
|
|
1466
1470
|
const circle = nodeMerge.selectAll(childSelector('circle')).data(d => d.data.children ? [d] : [], d => d.data.state.key).join(enter => {
|
|
1467
1471
|
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);
|
|
1468
1472
|
}, update => update, exit => exit.remove());
|
|
1469
|
-
this.transition(circle).attr('r', 6).attr('stroke', d => color(d.data)).attr('fill', d => {
|
|
1470
|
-
var _d$data$
|
|
1473
|
+
this.transition(circle).attr('r', 6).attr('cx', d => d.ySizeInner).attr('cy', d => d.xSize).attr('stroke', d => color(d.data)).attr('fill', d => {
|
|
1474
|
+
var _d$data$payload2;
|
|
1471
1475
|
|
|
1472
|
-
return (_d$data$
|
|
1476
|
+
return (_d$data$payload2 = d.data.payload) != null && _d$data$payload2.fold && d.data.children ? color(d.data) : '#fff';
|
|
1473
1477
|
});
|
|
1474
1478
|
const foreignObject = nodeMerge.selectAll(childSelector('foreignObject')).data(d => [d], d => d.data.state.key).join(enter => {
|
|
1475
|
-
const fo = enter.append('foreignObject').attr('class', 'markmap-foreign').attr('x', paddingX).attr('y', 0).style('opacity', 0).
|
|
1479
|
+
const fo = enter.append('foreignObject').attr('class', 'markmap-foreign').attr('x', paddingX).attr('y', 0).style('opacity', 0).on('mousedown', stopPropagation).on('dblclick', stopPropagation);
|
|
1476
1480
|
fo.append('xhtml:div').select(function select(d) {
|
|
1477
1481
|
const clone = d.data.state.el.cloneNode(true);
|
|
1478
1482
|
this.replaceWith(clone);
|
|
1479
1483
|
return clone;
|
|
1480
1484
|
}).attr('xmlns', 'http://www.w3.org/1999/xhtml');
|
|
1481
1485
|
return fo;
|
|
1482
|
-
}, update => update, exit => exit.remove()).attr('width', d => Math.max(0, d.ySizeInner - paddingX * 2));
|
|
1486
|
+
}, update => update, exit => exit.remove()).attr('width', d => Math.max(0, d.ySizeInner - paddingX * 2)).attr('height', d => d.xSize);
|
|
1483
1487
|
this.transition(foreignObject).style('opacity', 1); // Update the links
|
|
1484
1488
|
|
|
1485
1489
|
const path = this.g.selectAll(childSelector('path')).data(links, d => d.target.data.state.key).join(enter => {
|
|
@@ -1642,9 +1646,10 @@ function deriveOptions(jsonOptions) {
|
|
|
1642
1646
|
opts = _extends({}, opts, {
|
|
1643
1647
|
color: () => color
|
|
1644
1648
|
});
|
|
1645
|
-
} else if (color != null && color.length) {
|
|
1649
|
+
} else if (color != null && color.length && typeof color[0] === 'string') {
|
|
1650
|
+
const colorFn = d3__namespace.scaleOrdinal(color);
|
|
1646
1651
|
opts = _extends({}, opts, {
|
|
1647
|
-
color: node =>
|
|
1652
|
+
color: node => colorFn(`${node.state.id}`)
|
|
1648
1653
|
});
|
|
1649
1654
|
}
|
|
1650
1655
|
|
package/dist/index.esm.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
/*! markmap-view v0.13.
|
|
1
|
+
/*! markmap-view v0.13.3-alpha.1+f7f5075 | MIT License */
|
|
2
2
|
import * as d3 from 'd3';
|
|
3
3
|
|
|
4
|
-
/*! markmap-common v0.13.
|
|
4
|
+
/*! markmap-common v0.13.3-alpha.1+f7f5075 | MIT License */
|
|
5
5
|
class Hook {
|
|
6
6
|
constructor() {
|
|
7
7
|
this.listeners = [];
|
|
@@ -1204,7 +1204,7 @@ function mountDom(vnode) {
|
|
|
1204
1204
|
|
|
1205
1205
|
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}";
|
|
1206
1206
|
|
|
1207
|
-
var css_248z = ".markmap-container{height:0;left:-100px;overflow:hidden;position:absolute;top:-100px;width:0}.markmap-container
|
|
1207
|
+
var css_248z = ".markmap-container{height:0;left:-100px;overflow:hidden;position:absolute;top:-100px;width:0}.markmap-container>.markmap-foreign{display:inline-block}.markmap-container>.markmap-foreign>div:last-child{white-space:nowrap}";
|
|
1208
1208
|
|
|
1209
1209
|
const globalCSS = css_248z$1;
|
|
1210
1210
|
|
|
@@ -1299,7 +1299,7 @@ class Markmap {
|
|
|
1299
1299
|
handlePan(e) {
|
|
1300
1300
|
e.preventDefault();
|
|
1301
1301
|
const transform = d3.zoomTransform(this.svg.node());
|
|
1302
|
-
const newTransform = transform.translate(-e.deltaX, -e.deltaY);
|
|
1302
|
+
const newTransform = transform.translate(-e.deltaX / transform.k, -e.deltaY / transform.k);
|
|
1303
1303
|
this.svg.call(this.zoom.transform, newTransform);
|
|
1304
1304
|
}
|
|
1305
1305
|
|
|
@@ -1332,16 +1332,16 @@ class Markmap {
|
|
|
1332
1332
|
children: [this.getStyleContent(), css_248z].join('\n')
|
|
1333
1333
|
}));
|
|
1334
1334
|
document.body.append(container, style);
|
|
1335
|
-
const groupStyle = maxWidth ? `max-width: ${maxWidth}px` :
|
|
1335
|
+
const groupStyle = maxWidth ? `max-width: ${maxWidth}px` : '';
|
|
1336
1336
|
walkTree(node, (item, next) => {
|
|
1337
1337
|
var _item$children;
|
|
1338
1338
|
|
|
1339
1339
|
item.children = (_item$children = item.children) == null ? void 0 : _item$children.map(child => _extends({}, child));
|
|
1340
1340
|
nodeId += 1;
|
|
1341
1341
|
const group = mountDom(jsx("div", {
|
|
1342
|
+
className: "markmap-foreign",
|
|
1342
1343
|
style: groupStyle,
|
|
1343
1344
|
children: jsx("div", {
|
|
1344
|
-
className: "markmap-foreign",
|
|
1345
1345
|
dangerouslySetInnerHTML: {
|
|
1346
1346
|
__html: item.content
|
|
1347
1347
|
}
|
|
@@ -1386,8 +1386,8 @@ class Markmap {
|
|
|
1386
1386
|
|
|
1387
1387
|
setData(data, opts) {
|
|
1388
1388
|
if (data) this.state.data = data;
|
|
1389
|
-
this.initializeData(this.state.data);
|
|
1390
1389
|
if (opts) this.setOptions(opts);
|
|
1390
|
+
this.initializeData(this.state.data);
|
|
1391
1391
|
this.renderData();
|
|
1392
1392
|
}
|
|
1393
1393
|
|
|
@@ -1434,36 +1434,40 @@ class Markmap {
|
|
|
1434
1434
|
const y0 = (_origin$data$state$y = origin.data.state.y0) != null ? _origin$data$state$y : origin.y; // Update the nodes
|
|
1435
1435
|
|
|
1436
1436
|
const node = this.g.selectAll(childSelector('g')).data(descendants, d => d.data.state.key);
|
|
1437
|
-
const nodeEnter = node.enter().append('g').attr('
|
|
1437
|
+
const nodeEnter = node.enter().append('g').attr('data-depth', d => d.data.depth).attr('data-path', d => d.data.state.path).attr('transform', d => `translate(${y0 + origin.ySizeInner - d.ySizeInner},${x0 + origin.xSize / 2 - d.xSize})`);
|
|
1438
1438
|
const nodeExit = this.transition(node.exit());
|
|
1439
1439
|
nodeExit.select('line').attr('x1', d => d.ySizeInner).attr('x2', d => d.ySizeInner);
|
|
1440
1440
|
nodeExit.select('foreignObject').style('opacity', 0);
|
|
1441
1441
|
nodeExit.attr('transform', d => `translate(${origin.y + origin.ySizeInner - d.ySizeInner},${origin.x + origin.xSize / 2 - d.xSize})`).remove();
|
|
1442
|
-
const nodeMerge = node.merge(nodeEnter)
|
|
1442
|
+
const nodeMerge = node.merge(nodeEnter).attr('class', d => {
|
|
1443
|
+
var _d$data$payload;
|
|
1444
|
+
|
|
1445
|
+
return ['markmap-node', ((_d$data$payload = d.data.payload) == null ? void 0 : _d$data$payload.fold) && 'markmap-fold'].filter(Boolean).join(' ');
|
|
1446
|
+
});
|
|
1443
1447
|
this.transition(nodeMerge).attr('transform', d => `translate(${d.y},${d.x - d.xSize / 2})`); // Update lines under the content
|
|
1444
1448
|
|
|
1445
1449
|
const line = nodeMerge.selectAll(childSelector('line')).data(d => [d], d => d.data.state.key).join(enter => {
|
|
1446
|
-
return enter.append('line').attr('x1', d => d.ySizeInner).attr('
|
|
1450
|
+
return enter.append('line').attr('x1', d => d.ySizeInner).attr('x2', d => d.ySizeInner);
|
|
1447
1451
|
}, update => update, exit => exit.remove());
|
|
1448
|
-
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
|
|
1452
|
+
this.transition(line).attr('x1', -1).attr('x2', d => d.ySizeInner + 2).attr('y1', d => d.xSize).attr('y2', d => d.xSize).attr('stroke', d => color(d.data)).attr('stroke-width', linkWidth); // Circle to link to children of the node
|
|
1449
1453
|
|
|
1450
1454
|
const circle = nodeMerge.selectAll(childSelector('circle')).data(d => d.data.children ? [d] : [], d => d.data.state.key).join(enter => {
|
|
1451
1455
|
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);
|
|
1452
1456
|
}, update => update, exit => exit.remove());
|
|
1453
|
-
this.transition(circle).attr('r', 6).attr('stroke', d => color(d.data)).attr('fill', d => {
|
|
1454
|
-
var _d$data$
|
|
1457
|
+
this.transition(circle).attr('r', 6).attr('cx', d => d.ySizeInner).attr('cy', d => d.xSize).attr('stroke', d => color(d.data)).attr('fill', d => {
|
|
1458
|
+
var _d$data$payload2;
|
|
1455
1459
|
|
|
1456
|
-
return (_d$data$
|
|
1460
|
+
return (_d$data$payload2 = d.data.payload) != null && _d$data$payload2.fold && d.data.children ? color(d.data) : '#fff';
|
|
1457
1461
|
});
|
|
1458
1462
|
const foreignObject = nodeMerge.selectAll(childSelector('foreignObject')).data(d => [d], d => d.data.state.key).join(enter => {
|
|
1459
|
-
const fo = enter.append('foreignObject').attr('class', 'markmap-foreign').attr('x', paddingX).attr('y', 0).style('opacity', 0).
|
|
1463
|
+
const fo = enter.append('foreignObject').attr('class', 'markmap-foreign').attr('x', paddingX).attr('y', 0).style('opacity', 0).on('mousedown', stopPropagation).on('dblclick', stopPropagation);
|
|
1460
1464
|
fo.append('xhtml:div').select(function select(d) {
|
|
1461
1465
|
const clone = d.data.state.el.cloneNode(true);
|
|
1462
1466
|
this.replaceWith(clone);
|
|
1463
1467
|
return clone;
|
|
1464
1468
|
}).attr('xmlns', 'http://www.w3.org/1999/xhtml');
|
|
1465
1469
|
return fo;
|
|
1466
|
-
}, update => update, exit => exit.remove()).attr('width', d => Math.max(0, d.ySizeInner - paddingX * 2));
|
|
1470
|
+
}, update => update, exit => exit.remove()).attr('width', d => Math.max(0, d.ySizeInner - paddingX * 2)).attr('height', d => d.xSize);
|
|
1467
1471
|
this.transition(foreignObject).style('opacity', 1); // Update the links
|
|
1468
1472
|
|
|
1469
1473
|
const path = this.g.selectAll(childSelector('path')).data(links, d => d.target.data.state.key).join(enter => {
|
|
@@ -1626,9 +1630,10 @@ function deriveOptions(jsonOptions) {
|
|
|
1626
1630
|
opts = _extends({}, opts, {
|
|
1627
1631
|
color: () => color
|
|
1628
1632
|
});
|
|
1629
|
-
} else if (color != null && color.length) {
|
|
1633
|
+
} else if (color != null && color.length && typeof color[0] === 'string') {
|
|
1634
|
+
const colorFn = d3.scaleOrdinal(color);
|
|
1630
1635
|
opts = _extends({}, opts, {
|
|
1631
|
-
color: node =>
|
|
1636
|
+
color: node => colorFn(`${node.state.id}`)
|
|
1632
1637
|
});
|
|
1633
1638
|
}
|
|
1634
1639
|
|
package/dist/index.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/*! markmap-view v0.13.
|
|
1
|
+
/*! markmap-view v0.13.3-alpha.1+f7f5075 | MIT License */
|
|
2
2
|
(function (exports, d3) {
|
|
3
3
|
'use strict';
|
|
4
4
|
|
|
@@ -16,7 +16,7 @@ return Object.freeze(n);
|
|
|
16
16
|
|
|
17
17
|
var d3__namespace = /*#__PURE__*/_interopNamespace(d3);
|
|
18
18
|
|
|
19
|
-
/*! markmap-common v0.13.
|
|
19
|
+
/*! markmap-common v0.13.3-alpha.1+f7f5075 | MIT License */
|
|
20
20
|
class Hook {
|
|
21
21
|
constructor() {
|
|
22
22
|
this.listeners = [];
|
|
@@ -1219,7 +1219,7 @@ function mountDom(vnode) {
|
|
|
1219
1219
|
|
|
1220
1220
|
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}";
|
|
1221
1221
|
|
|
1222
|
-
var css_248z = ".markmap-container{height:0;left:-100px;overflow:hidden;position:absolute;top:-100px;width:0}.markmap-container
|
|
1222
|
+
var css_248z = ".markmap-container{height:0;left:-100px;overflow:hidden;position:absolute;top:-100px;width:0}.markmap-container>.markmap-foreign{display:inline-block}.markmap-container>.markmap-foreign>div:last-child{white-space:nowrap}";
|
|
1223
1223
|
|
|
1224
1224
|
const globalCSS = css_248z$1;
|
|
1225
1225
|
|
|
@@ -1314,7 +1314,7 @@ class Markmap {
|
|
|
1314
1314
|
handlePan(e) {
|
|
1315
1315
|
e.preventDefault();
|
|
1316
1316
|
const transform = d3__namespace.zoomTransform(this.svg.node());
|
|
1317
|
-
const newTransform = transform.translate(-e.deltaX, -e.deltaY);
|
|
1317
|
+
const newTransform = transform.translate(-e.deltaX / transform.k, -e.deltaY / transform.k);
|
|
1318
1318
|
this.svg.call(this.zoom.transform, newTransform);
|
|
1319
1319
|
}
|
|
1320
1320
|
|
|
@@ -1347,16 +1347,16 @@ class Markmap {
|
|
|
1347
1347
|
children: [this.getStyleContent(), css_248z].join('\n')
|
|
1348
1348
|
}));
|
|
1349
1349
|
document.body.append(container, style);
|
|
1350
|
-
const groupStyle = maxWidth ? `max-width: ${maxWidth}px` :
|
|
1350
|
+
const groupStyle = maxWidth ? `max-width: ${maxWidth}px` : '';
|
|
1351
1351
|
walkTree(node, (item, next) => {
|
|
1352
1352
|
var _item$children;
|
|
1353
1353
|
|
|
1354
1354
|
item.children = (_item$children = item.children) == null ? void 0 : _item$children.map(child => _extends({}, child));
|
|
1355
1355
|
nodeId += 1;
|
|
1356
1356
|
const group = mountDom(jsx("div", {
|
|
1357
|
+
className: "markmap-foreign",
|
|
1357
1358
|
style: groupStyle,
|
|
1358
1359
|
children: jsx("div", {
|
|
1359
|
-
className: "markmap-foreign",
|
|
1360
1360
|
dangerouslySetInnerHTML: {
|
|
1361
1361
|
__html: item.content
|
|
1362
1362
|
}
|
|
@@ -1401,8 +1401,8 @@ class Markmap {
|
|
|
1401
1401
|
|
|
1402
1402
|
setData(data, opts) {
|
|
1403
1403
|
if (data) this.state.data = data;
|
|
1404
|
-
this.initializeData(this.state.data);
|
|
1405
1404
|
if (opts) this.setOptions(opts);
|
|
1405
|
+
this.initializeData(this.state.data);
|
|
1406
1406
|
this.renderData();
|
|
1407
1407
|
}
|
|
1408
1408
|
|
|
@@ -1449,36 +1449,40 @@ class Markmap {
|
|
|
1449
1449
|
const y0 = (_origin$data$state$y = origin.data.state.y0) != null ? _origin$data$state$y : origin.y; // Update the nodes
|
|
1450
1450
|
|
|
1451
1451
|
const node = this.g.selectAll(childSelector('g')).data(descendants, d => d.data.state.key);
|
|
1452
|
-
const nodeEnter = node.enter().append('g').attr('
|
|
1452
|
+
const nodeEnter = node.enter().append('g').attr('data-depth', d => d.data.depth).attr('data-path', d => d.data.state.path).attr('transform', d => `translate(${y0 + origin.ySizeInner - d.ySizeInner},${x0 + origin.xSize / 2 - d.xSize})`);
|
|
1453
1453
|
const nodeExit = this.transition(node.exit());
|
|
1454
1454
|
nodeExit.select('line').attr('x1', d => d.ySizeInner).attr('x2', d => d.ySizeInner);
|
|
1455
1455
|
nodeExit.select('foreignObject').style('opacity', 0);
|
|
1456
1456
|
nodeExit.attr('transform', d => `translate(${origin.y + origin.ySizeInner - d.ySizeInner},${origin.x + origin.xSize / 2 - d.xSize})`).remove();
|
|
1457
|
-
const nodeMerge = node.merge(nodeEnter)
|
|
1457
|
+
const nodeMerge = node.merge(nodeEnter).attr('class', d => {
|
|
1458
|
+
var _d$data$payload;
|
|
1459
|
+
|
|
1460
|
+
return ['markmap-node', ((_d$data$payload = d.data.payload) == null ? void 0 : _d$data$payload.fold) && 'markmap-fold'].filter(Boolean).join(' ');
|
|
1461
|
+
});
|
|
1458
1462
|
this.transition(nodeMerge).attr('transform', d => `translate(${d.y},${d.x - d.xSize / 2})`); // Update lines under the content
|
|
1459
1463
|
|
|
1460
1464
|
const line = nodeMerge.selectAll(childSelector('line')).data(d => [d], d => d.data.state.key).join(enter => {
|
|
1461
|
-
return enter.append('line').attr('x1', d => d.ySizeInner).attr('
|
|
1465
|
+
return enter.append('line').attr('x1', d => d.ySizeInner).attr('x2', d => d.ySizeInner);
|
|
1462
1466
|
}, update => update, exit => exit.remove());
|
|
1463
|
-
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
|
|
1467
|
+
this.transition(line).attr('x1', -1).attr('x2', d => d.ySizeInner + 2).attr('y1', d => d.xSize).attr('y2', d => d.xSize).attr('stroke', d => color(d.data)).attr('stroke-width', linkWidth); // Circle to link to children of the node
|
|
1464
1468
|
|
|
1465
1469
|
const circle = nodeMerge.selectAll(childSelector('circle')).data(d => d.data.children ? [d] : [], d => d.data.state.key).join(enter => {
|
|
1466
1470
|
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);
|
|
1467
1471
|
}, update => update, exit => exit.remove());
|
|
1468
|
-
this.transition(circle).attr('r', 6).attr('stroke', d => color(d.data)).attr('fill', d => {
|
|
1469
|
-
var _d$data$
|
|
1472
|
+
this.transition(circle).attr('r', 6).attr('cx', d => d.ySizeInner).attr('cy', d => d.xSize).attr('stroke', d => color(d.data)).attr('fill', d => {
|
|
1473
|
+
var _d$data$payload2;
|
|
1470
1474
|
|
|
1471
|
-
return (_d$data$
|
|
1475
|
+
return (_d$data$payload2 = d.data.payload) != null && _d$data$payload2.fold && d.data.children ? color(d.data) : '#fff';
|
|
1472
1476
|
});
|
|
1473
1477
|
const foreignObject = nodeMerge.selectAll(childSelector('foreignObject')).data(d => [d], d => d.data.state.key).join(enter => {
|
|
1474
|
-
const fo = enter.append('foreignObject').attr('class', 'markmap-foreign').attr('x', paddingX).attr('y', 0).style('opacity', 0).
|
|
1478
|
+
const fo = enter.append('foreignObject').attr('class', 'markmap-foreign').attr('x', paddingX).attr('y', 0).style('opacity', 0).on('mousedown', stopPropagation).on('dblclick', stopPropagation);
|
|
1475
1479
|
fo.append('xhtml:div').select(function select(d) {
|
|
1476
1480
|
const clone = d.data.state.el.cloneNode(true);
|
|
1477
1481
|
this.replaceWith(clone);
|
|
1478
1482
|
return clone;
|
|
1479
1483
|
}).attr('xmlns', 'http://www.w3.org/1999/xhtml');
|
|
1480
1484
|
return fo;
|
|
1481
|
-
}, update => update, exit => exit.remove()).attr('width', d => Math.max(0, d.ySizeInner - paddingX * 2));
|
|
1485
|
+
}, update => update, exit => exit.remove()).attr('width', d => Math.max(0, d.ySizeInner - paddingX * 2)).attr('height', d => d.xSize);
|
|
1482
1486
|
this.transition(foreignObject).style('opacity', 1); // Update the links
|
|
1483
1487
|
|
|
1484
1488
|
const path = this.g.selectAll(childSelector('path')).data(links, d => d.target.data.state.key).join(enter => {
|
|
@@ -1641,9 +1645,10 @@ function deriveOptions(jsonOptions) {
|
|
|
1641
1645
|
opts = _extends({}, opts, {
|
|
1642
1646
|
color: () => color
|
|
1643
1647
|
});
|
|
1644
|
-
} else if (color != null && color.length) {
|
|
1648
|
+
} else if (color != null && color.length && typeof color[0] === 'string') {
|
|
1649
|
+
const colorFn = d3__namespace.scaleOrdinal(color);
|
|
1645
1650
|
opts = _extends({}, opts, {
|
|
1646
|
-
color: node =>
|
|
1651
|
+
color: node => colorFn(`${node.state.id}`)
|
|
1647
1652
|
});
|
|
1648
1653
|
}
|
|
1649
1654
|
|
package/dist/index.min.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
/*! markmap-view v0.13.
|
|
1
|
+
/*! markmap-view v0.13.3-alpha.1+f7f5075 | MIT License */
|
|
2
2
|
!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);
|
|
3
|
-
/*! markmap-common v0.13.
|
|
3
|
+
/*! markmap-common v0.13.3-alpha.1+f7f5075 | 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}};
|
|
4
4
|
/*! @gera2ld/jsx-dom v2.1.1 | ISC License */
|
|
5
|
-
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);
|
|
5
|
+
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>.markmap-foreign{display:inline-block}.markmap-container>.markmap-foreign>div: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()),n=e.translate(-t.deltaX/e.k,-t.deltaY/e.k);this.svg.call(this.zoom.transform,n)}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`:"";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",{className:"markmap-foreign",style:l,children:P("div",{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),e&&this.setOptions(e),this.initializeData(this.state.data),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("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).attr("class",(t=>{var e;return["markmap-node",(null==(e=t.data.payload)?void 0:e.fold)&&"markmap-fold"].filter(Boolean).join(" ")}));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("x2",(t=>t.ySizeInner))),(t=>t),(t=>t.remove()));this.transition(X).attr("x1",-1).attr("x2",(t=>t.ySizeInner+2)).attr("y1",(t=>t.xSize)).attr("y2",(t=>t.xSize)).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("cx",(t=>t.ySizeInner)).attr("cy",(t=>t.xSize)).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).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))).attr("height",(t=>t.xSize));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:i}=t||{};let a;if("string"==typeof e)a=g({},a,{color:()=>e});else if(null!=e&&e.length&&"string"==typeof e[0]){const t=r.scaleOrdinal(e);a=g({},a,{color:e=>t(`${e.state.id}`)})}return"number"==typeof n&&(a=g({},a,{duration:n})),"number"==typeof i&&(a=g({},a,{maxWidth:i})),a},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);
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "markmap-view",
|
|
3
|
-
"version": "0.13.
|
|
3
|
+
"version": "0.13.3-alpha.1+f7f5075",
|
|
4
4
|
"description": "View markmaps in browser",
|
|
5
5
|
"author": "Gerald <gera2ld@live.com>",
|
|
6
6
|
"license": "MIT",
|
|
@@ -41,10 +41,10 @@
|
|
|
41
41
|
"@types/d3": "^6.0.0",
|
|
42
42
|
"d3": "^6.2.0",
|
|
43
43
|
"d3-flextree": "^2.1.1",
|
|
44
|
-
"markmap-common": "^0.13.
|
|
44
|
+
"markmap-common": "^0.13.3-alpha.1+f7f5075"
|
|
45
45
|
},
|
|
46
46
|
"engines": {
|
|
47
47
|
"node": ">=10"
|
|
48
48
|
},
|
|
49
|
-
"gitHead": "
|
|
49
|
+
"gitHead": "f7f507547a2e1b2b1637e532a1c67d6ad0eabaf9"
|
|
50
50
|
}
|
package/types/types.d.ts
CHANGED
|
@@ -1,24 +1,4 @@
|
|
|
1
1
|
import { INode } from 'markmap-common';
|
|
2
|
-
export interface IMarkmapJSONOptions {
|
|
3
|
-
color?: string | string[];
|
|
4
|
-
duration?: number;
|
|
5
|
-
maxWidth?: number;
|
|
6
|
-
}
|
|
7
|
-
export interface IMarkmapOptions {
|
|
8
|
-
id?: string;
|
|
9
|
-
autoFit: boolean;
|
|
10
|
-
color: (node: INode) => string;
|
|
11
|
-
duration: number;
|
|
12
|
-
embedGlobalCSS: boolean;
|
|
13
|
-
fitRatio: number;
|
|
14
|
-
maxWidth: number;
|
|
15
|
-
nodeMinHeight: number;
|
|
16
|
-
paddingX: number;
|
|
17
|
-
scrollForPan: boolean;
|
|
18
|
-
spacingHorizontal: number;
|
|
19
|
-
spacingVertical: number;
|
|
20
|
-
style?: (id: string) => string;
|
|
21
|
-
}
|
|
22
2
|
export interface IMarkmapState {
|
|
23
3
|
id: string;
|
|
24
4
|
data?: INode;
|
package/types/view.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import * as d3 from 'd3';
|
|
2
|
-
import { INode,
|
|
3
|
-
import {
|
|
2
|
+
import { Hook, INode, IMarkmapOptions, IMarkmapJSONOptions } from 'markmap-common';
|
|
3
|
+
import { IMarkmapState, IMarkmapFlexTreeItem } from './types';
|
|
4
4
|
export declare const globalCSS: string;
|
|
5
5
|
interface IPadding {
|
|
6
6
|
left: number;
|