markmap-view 0.14.5-alpha.19 → 0.14.5-alpha.21
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/browser/index.js +17 -30
- package/dist/index.js +38 -58
- package/package.json +7 -6
- package/types/view.d.ts +1 -1
- package/dist/index.mjs +0 -1297
package/dist/browser/index.js
CHANGED
|
@@ -1,21 +1,8 @@
|
|
|
1
|
-
/*! markmap-view v0.14.5-alpha.
|
|
1
|
+
/*! markmap-view v0.14.5-alpha.21+fb81f2c | MIT License */
|
|
2
2
|
(function (exports, d3) {
|
|
3
3
|
'use strict';
|
|
4
4
|
|
|
5
|
-
|
|
6
|
-
var n = Object.create(null);
|
|
7
|
-
if (e) {
|
|
8
|
-
for (var k in e) {
|
|
9
|
-
n[k] = e[k];
|
|
10
|
-
}
|
|
11
|
-
}
|
|
12
|
-
n.default = e;
|
|
13
|
-
return Object.freeze(n);
|
|
14
|
-
}
|
|
15
|
-
|
|
16
|
-
var d3__namespace = /*#__PURE__*/_interopNamespaceDefault(d3);
|
|
17
|
-
|
|
18
|
-
/*! markmap-common v0.14.5-alpha.19+5323905 | MIT License */
|
|
5
|
+
/*! markmap-common v0.14.5-alpha.21+fb81f2c | MIT License */
|
|
19
6
|
class Hook {
|
|
20
7
|
constructor() {
|
|
21
8
|
this.listeners = [];
|
|
@@ -1144,7 +1131,7 @@ function mountDom(vnode) {
|
|
|
1144
1131
|
return mount(vnode);
|
|
1145
1132
|
}
|
|
1146
1133
|
|
|
1147
|
-
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 :
|
|
1134
|
+
var css_248z$1 = ".markmap{font:300 16px/20px sans-serif}.markmap-link{fill:none}.markmap-node>circle{cursor:pointer}.markmap-foreign{display:inline-block}.markmap-foreign a{color:#0097e6}.markmap-foreign a:hover{color:#00a8ff}.markmap-foreign code{background-color:#f0f0f0;border-radius:2px;color:#555;font-size:calc(1em - 2px);padding:.25em}.markmap-foreign pre{margin:0}.markmap-foreign pre>code{display:block}.markmap-foreign del{text-decoration:line-through}.markmap-foreign em{font-style:italic}.markmap-foreign strong{font-weight:700}.markmap-foreign mark{background:#ffeaa7}";
|
|
1148
1135
|
|
|
1149
1136
|
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}";
|
|
1150
1137
|
|
|
@@ -1154,7 +1141,7 @@ function linkWidth(nodeData) {
|
|
|
1154
1141
|
return Math.max(4 - 2 * data.depth, 1.5);
|
|
1155
1142
|
}
|
|
1156
1143
|
function minBy(numbers, by) {
|
|
1157
|
-
const index =
|
|
1144
|
+
const index = d3.minIndex(numbers, by);
|
|
1158
1145
|
return numbers[index];
|
|
1159
1146
|
}
|
|
1160
1147
|
function stopPropagation(e) {
|
|
@@ -1170,7 +1157,7 @@ function createViewHooks() {
|
|
|
1170
1157
|
* A global hook to refresh all markmaps when called.
|
|
1171
1158
|
*/
|
|
1172
1159
|
const refreshHook = new Hook();
|
|
1173
|
-
const defaultColorFn =
|
|
1160
|
+
const defaultColorFn = d3.scaleOrdinal(d3.schemeCategory10);
|
|
1174
1161
|
const isMacintosh = typeof navigator !== 'undefined' && navigator.userAgent.includes('Macintosh');
|
|
1175
1162
|
class Markmap {
|
|
1176
1163
|
constructor(svg, opts) {
|
|
@@ -1184,7 +1171,7 @@ class Markmap {
|
|
|
1184
1171
|
};
|
|
1185
1172
|
this.handlePan = e => {
|
|
1186
1173
|
e.preventDefault();
|
|
1187
|
-
const transform =
|
|
1174
|
+
const transform = d3.zoomTransform(this.svg.node());
|
|
1188
1175
|
const newTransform = transform.translate(-e.deltaX / transform.k, -e.deltaY / transform.k);
|
|
1189
1176
|
this.svg.call(this.zoom.transform, newTransform);
|
|
1190
1177
|
};
|
|
@@ -1194,9 +1181,9 @@ class Markmap {
|
|
|
1194
1181
|
this.toggleNode(d.data, recursive);
|
|
1195
1182
|
};
|
|
1196
1183
|
this.viewHooks = createViewHooks();
|
|
1197
|
-
this.svg = svg.datum ? svg :
|
|
1184
|
+
this.svg = svg.datum ? svg : d3.select(svg);
|
|
1198
1185
|
this.styleNode = this.svg.append('style');
|
|
1199
|
-
this.zoom =
|
|
1186
|
+
this.zoom = d3.zoom().filter(event => {
|
|
1200
1187
|
if (this.options.scrollForPan) {
|
|
1201
1188
|
// Pan with wheels, zoom with ctrl+wheels
|
|
1202
1189
|
if (event.type === 'wheel') return event.ctrlKey && !event.button;
|
|
@@ -1370,11 +1357,11 @@ class Markmap {
|
|
|
1370
1357
|
layout(tree);
|
|
1371
1358
|
const descendants = tree.descendants().reverse();
|
|
1372
1359
|
const links = tree.links();
|
|
1373
|
-
const linkShape =
|
|
1374
|
-
const minX =
|
|
1375
|
-
const maxX =
|
|
1376
|
-
const minY =
|
|
1377
|
-
const maxY =
|
|
1360
|
+
const linkShape = d3.linkHorizontal();
|
|
1361
|
+
const minX = d3.min(descendants, d => d.x - d.xSize / 2);
|
|
1362
|
+
const maxX = d3.max(descendants, d => d.x + d.xSize / 2);
|
|
1363
|
+
const minY = d3.min(descendants, d => d.y);
|
|
1364
|
+
const maxY = d3.max(descendants, d => d.y + d.ySize - spacingHorizontal);
|
|
1378
1365
|
Object.assign(this.state, {
|
|
1379
1366
|
minX,
|
|
1380
1367
|
maxX,
|
|
@@ -1484,7 +1471,7 @@ class Markmap {
|
|
|
1484
1471
|
const naturalWidth = maxY - minY;
|
|
1485
1472
|
const naturalHeight = maxX - minX;
|
|
1486
1473
|
const scale = Math.min(offsetWidth / naturalWidth * fitRatio, offsetHeight / naturalHeight * fitRatio, 2);
|
|
1487
|
-
const initialZoom =
|
|
1474
|
+
const initialZoom = d3.zoomIdentity.translate((offsetWidth - naturalWidth * scale) / 2 - minY * scale, (offsetHeight - naturalHeight * scale) / 2 - minX * scale).scale(scale);
|
|
1488
1475
|
return this.transition(this.svg).call(this.zoom.transform, initialZoom).end().catch(noop);
|
|
1489
1476
|
}
|
|
1490
1477
|
|
|
@@ -1504,7 +1491,7 @@ class Markmap {
|
|
|
1504
1491
|
spacingHorizontal
|
|
1505
1492
|
} = this.options;
|
|
1506
1493
|
const relRect = svgNode.getBoundingClientRect();
|
|
1507
|
-
const transform =
|
|
1494
|
+
const transform = d3.zoomTransform(svgNode);
|
|
1508
1495
|
const [left, right] = [itemData.y, itemData.y + itemData.ySize - spacingHorizontal + 2].map(x => x * transform.k + transform.x);
|
|
1509
1496
|
const [top, bottom] = [itemData.x - itemData.xSize / 2, itemData.x + itemData.xSize / 2].map(y => y * transform.k + transform.y);
|
|
1510
1497
|
// Skip if the node includes or is included in the container.
|
|
@@ -1535,7 +1522,7 @@ class Markmap {
|
|
|
1535
1522
|
} = svgNode.getBoundingClientRect();
|
|
1536
1523
|
const halfWidth = offsetWidth / 2;
|
|
1537
1524
|
const halfHeight = offsetHeight / 2;
|
|
1538
|
-
const transform =
|
|
1525
|
+
const transform = d3.zoomTransform(svgNode);
|
|
1539
1526
|
const newTransform = transform.translate((halfWidth - transform.x) * (1 - scale) / transform.k, (halfHeight - transform.y) * (1 - scale) / transform.k).scale(scale);
|
|
1540
1527
|
return this.transition(this.svg).call(this.zoom.transform, newTransform).end().catch(noop);
|
|
1541
1528
|
}
|
|
@@ -1587,7 +1574,7 @@ function deriveOptions(jsonOptions) {
|
|
|
1587
1574
|
const solidColor = color[0];
|
|
1588
1575
|
derivedOptions.color = () => solidColor;
|
|
1589
1576
|
} else if (color != null && color.length) {
|
|
1590
|
-
const colorFn =
|
|
1577
|
+
const colorFn = d3.scaleOrdinal(color);
|
|
1591
1578
|
derivedOptions.color = node => colorFn(`${node.state.path}`);
|
|
1592
1579
|
}
|
|
1593
1580
|
if (colorFreezeLevel) {
|
package/dist/index.js
CHANGED
|
@@ -1,21 +1,7 @@
|
|
|
1
|
-
/*! markmap-view v0.14.5-alpha.
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
var d3 = require('d3');
|
|
6
|
-
|
|
7
|
-
function _interopNamespaceDefault(e) {
|
|
8
|
-
var n = Object.create(null);
|
|
9
|
-
if (e) {
|
|
10
|
-
for (var k in e) {
|
|
11
|
-
n[k] = e[k];
|
|
12
|
-
}
|
|
13
|
-
}
|
|
14
|
-
n.default = e;
|
|
15
|
-
return Object.freeze(n);
|
|
16
|
-
}
|
|
17
|
-
|
|
18
|
-
var d3__namespace = /*#__PURE__*/_interopNamespaceDefault(d3);
|
|
1
|
+
/*! markmap-view v0.14.5-alpha.21+fb81f2c | MIT License */
|
|
2
|
+
import { Hook, getId, addClass, walkTree, childSelector, noop } from 'markmap-common';
|
|
3
|
+
export { loadCSS, loadJS } from 'markmap-common';
|
|
4
|
+
import { scaleOrdinal, schemeCategory10, zoomTransform, select, zoom, linkHorizontal, min, max, zoomIdentity, minIndex } from 'd3';
|
|
19
5
|
|
|
20
6
|
function _extends() {
|
|
21
7
|
_extends = Object.assign ? Object.assign.bind() : function (target) {
|
|
@@ -245,7 +231,7 @@ Node$1.prototype = hierarchy.prototype = {
|
|
|
245
231
|
var name = "d3-flextree";
|
|
246
232
|
var version$1 = "2.1.2";
|
|
247
233
|
var main = "build/d3-flextree.js";
|
|
248
|
-
var module
|
|
234
|
+
var module = "index";
|
|
249
235
|
var author = {
|
|
250
236
|
name: "Chris Maloney",
|
|
251
237
|
url: "http://chrismaloney.org"
|
|
@@ -307,7 +293,7 @@ var packageInfo = {
|
|
|
307
293
|
name: name,
|
|
308
294
|
version: version$1,
|
|
309
295
|
main: main,
|
|
310
|
-
module: module
|
|
296
|
+
module: module,
|
|
311
297
|
"jsnext:main": "index",
|
|
312
298
|
author: author,
|
|
313
299
|
description: description,
|
|
@@ -838,7 +824,7 @@ function mountDom(vnode) {
|
|
|
838
824
|
return mount(vnode);
|
|
839
825
|
}
|
|
840
826
|
|
|
841
|
-
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 :
|
|
827
|
+
var css_248z$1 = ".markmap{font:300 16px/20px sans-serif}.markmap-link{fill:none}.markmap-node>circle{cursor:pointer}.markmap-foreign{display:inline-block}.markmap-foreign a{color:#0097e6}.markmap-foreign a:hover{color:#00a8ff}.markmap-foreign code{background-color:#f0f0f0;border-radius:2px;color:#555;font-size:calc(1em - 2px);padding:.25em}.markmap-foreign pre{margin:0}.markmap-foreign pre>code{display:block}.markmap-foreign del{text-decoration:line-through}.markmap-foreign em{font-style:italic}.markmap-foreign strong{font-weight:700}.markmap-foreign mark{background:#ffeaa7}";
|
|
842
828
|
|
|
843
829
|
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}";
|
|
844
830
|
|
|
@@ -848,7 +834,7 @@ function linkWidth(nodeData) {
|
|
|
848
834
|
return Math.max(4 - 2 * data.depth, 1.5);
|
|
849
835
|
}
|
|
850
836
|
function minBy(numbers, by) {
|
|
851
|
-
const index =
|
|
837
|
+
const index = minIndex(numbers, by);
|
|
852
838
|
return numbers[index];
|
|
853
839
|
}
|
|
854
840
|
function stopPropagation(e) {
|
|
@@ -856,15 +842,15 @@ function stopPropagation(e) {
|
|
|
856
842
|
}
|
|
857
843
|
function createViewHooks() {
|
|
858
844
|
return {
|
|
859
|
-
transformHtml: new
|
|
845
|
+
transformHtml: new Hook()
|
|
860
846
|
};
|
|
861
847
|
}
|
|
862
848
|
|
|
863
849
|
/**
|
|
864
850
|
* A global hook to refresh all markmaps when called.
|
|
865
851
|
*/
|
|
866
|
-
const refreshHook = new
|
|
867
|
-
const defaultColorFn =
|
|
852
|
+
const refreshHook = new Hook();
|
|
853
|
+
const defaultColorFn = scaleOrdinal(schemeCategory10);
|
|
868
854
|
const isMacintosh = typeof navigator !== 'undefined' && navigator.userAgent.includes('Macintosh');
|
|
869
855
|
class Markmap {
|
|
870
856
|
constructor(svg, opts) {
|
|
@@ -878,7 +864,7 @@ class Markmap {
|
|
|
878
864
|
};
|
|
879
865
|
this.handlePan = e => {
|
|
880
866
|
e.preventDefault();
|
|
881
|
-
const transform =
|
|
867
|
+
const transform = zoomTransform(this.svg.node());
|
|
882
868
|
const newTransform = transform.translate(-e.deltaX / transform.k, -e.deltaY / transform.k);
|
|
883
869
|
this.svg.call(this.zoom.transform, newTransform);
|
|
884
870
|
};
|
|
@@ -888,9 +874,9 @@ class Markmap {
|
|
|
888
874
|
this.toggleNode(d.data, recursive);
|
|
889
875
|
};
|
|
890
876
|
this.viewHooks = createViewHooks();
|
|
891
|
-
this.svg = svg.datum ? svg :
|
|
877
|
+
this.svg = svg.datum ? svg : select(svg);
|
|
892
878
|
this.styleNode = this.svg.append('style');
|
|
893
|
-
this.zoom =
|
|
879
|
+
this.zoom = zoom().filter(event => {
|
|
894
880
|
if (this.options.scrollForPan) {
|
|
895
881
|
// Pan with wheels, zoom with ctrl+wheels
|
|
896
882
|
if (event.type === 'wheel') return event.ctrlKey && !event.button;
|
|
@@ -899,7 +885,7 @@ class Markmap {
|
|
|
899
885
|
}).on('zoom', this.handleZoom);
|
|
900
886
|
this.setOptions(opts);
|
|
901
887
|
this.state = {
|
|
902
|
-
id: this.options.id || this.svg.attr('id') ||
|
|
888
|
+
id: this.options.id || this.svg.attr('id') || getId(),
|
|
903
889
|
minX: 0,
|
|
904
890
|
maxX: 0,
|
|
905
891
|
minY: 0,
|
|
@@ -921,7 +907,7 @@ class Markmap {
|
|
|
921
907
|
return [this.options.embedGlobalCSS && css_248z$1, styleText].filter(Boolean).join('\n');
|
|
922
908
|
}
|
|
923
909
|
updateStyle() {
|
|
924
|
-
this.svg.attr('class',
|
|
910
|
+
this.svg.attr('class', addClass(this.svg.attr('class'), 'markmap', this.state.id));
|
|
925
911
|
const style = this.getStyleContent();
|
|
926
912
|
this.styleNode.text(style);
|
|
927
913
|
}
|
|
@@ -930,7 +916,7 @@ class Markmap {
|
|
|
930
916
|
const fold = (_data$payload = data.payload) != null && _data$payload.fold ? 0 : 1;
|
|
931
917
|
if (recursive) {
|
|
932
918
|
// recursively
|
|
933
|
-
|
|
919
|
+
walkTree(data, (item, next) => {
|
|
934
920
|
item.payload = _extends({}, item.payload, {
|
|
935
921
|
fold
|
|
936
922
|
});
|
|
@@ -964,7 +950,7 @@ class Markmap {
|
|
|
964
950
|
document.body.append(container, style);
|
|
965
951
|
const groupStyle = maxWidth ? `max-width: ${maxWidth}px` : '';
|
|
966
952
|
let foldRecursively = 0;
|
|
967
|
-
|
|
953
|
+
walkTree(node, (item, next, parent) => {
|
|
968
954
|
var _item$children, _parent$state, _item$payload;
|
|
969
955
|
item.children = (_item$children = item.children) == null ? void 0 : _item$children.map(child => _extends({}, child));
|
|
970
956
|
nodeId += 1;
|
|
@@ -1006,7 +992,7 @@ class Markmap {
|
|
|
1006
992
|
var _node$parentNode;
|
|
1007
993
|
(_node$parentNode = node.parentNode) == null ? void 0 : _node$parentNode.append(node.cloneNode(true));
|
|
1008
994
|
});
|
|
1009
|
-
|
|
995
|
+
walkTree(node, (item, next, parent) => {
|
|
1010
996
|
var _parent$state2;
|
|
1011
997
|
const state = item.state;
|
|
1012
998
|
const rect = state.el.getBoundingClientRect();
|
|
@@ -1064,11 +1050,11 @@ class Markmap {
|
|
|
1064
1050
|
layout(tree);
|
|
1065
1051
|
const descendants = tree.descendants().reverse();
|
|
1066
1052
|
const links = tree.links();
|
|
1067
|
-
const linkShape =
|
|
1068
|
-
const minX =
|
|
1069
|
-
const maxX =
|
|
1070
|
-
const minY =
|
|
1071
|
-
const maxY =
|
|
1053
|
+
const linkShape = linkHorizontal();
|
|
1054
|
+
const minX = min(descendants, d => d.x - d.xSize / 2);
|
|
1055
|
+
const maxX = max(descendants, d => d.x + d.xSize / 2);
|
|
1056
|
+
const minY = min(descendants, d => d.y);
|
|
1057
|
+
const maxY = max(descendants, d => d.y + d.ySize - spacingHorizontal);
|
|
1072
1058
|
Object.assign(this.state, {
|
|
1073
1059
|
minX,
|
|
1074
1060
|
maxX,
|
|
@@ -1081,7 +1067,7 @@ class Markmap {
|
|
|
1081
1067
|
const y0 = (_origin$data$state$y = origin.data.state.y0) != null ? _origin$data$state$y : origin.y;
|
|
1082
1068
|
|
|
1083
1069
|
// Update the nodes
|
|
1084
|
-
const node = this.g.selectAll(
|
|
1070
|
+
const node = this.g.selectAll(childSelector('g')).data(descendants, d => d.data.state.key);
|
|
1085
1071
|
const nodeEnter = node.enter().append('g').attr('data-depth', d => d.data.depth).attr('data-path', d => d.data.state.path).attr('transform', d => `translate(${y0 + origin.ySize - d.ySize},${x0 + origin.xSize / 2 - d.xSize})`);
|
|
1086
1072
|
const nodeExit = this.transition(node.exit());
|
|
1087
1073
|
nodeExit.select('line').attr('x1', d => d.ySize - spacingHorizontal).attr('x2', d => d.ySize - spacingHorizontal);
|
|
@@ -1094,13 +1080,13 @@ class Markmap {
|
|
|
1094
1080
|
this.transition(nodeMerge).attr('transform', d => `translate(${d.y},${d.x - d.xSize / 2})`);
|
|
1095
1081
|
|
|
1096
1082
|
// Update lines under the content
|
|
1097
|
-
const line = nodeMerge.selectAll(
|
|
1083
|
+
const line = nodeMerge.selectAll(childSelector('line')).data(d => [d], d => d.data.state.key).join(enter => {
|
|
1098
1084
|
return enter.append('line').attr('x1', d => d.ySize - spacingHorizontal).attr('x2', d => d.ySize - spacingHorizontal);
|
|
1099
1085
|
}, update => update, exit => exit.remove());
|
|
1100
1086
|
this.transition(line).attr('x1', -1).attr('x2', d => d.ySize - spacingHorizontal + 2).attr('y1', d => d.xSize).attr('y2', d => d.xSize).attr('stroke', d => color(d.data)).attr('stroke-width', linkWidth);
|
|
1101
1087
|
|
|
1102
1088
|
// Circle to link to children of the node
|
|
1103
|
-
const circle = nodeMerge.selectAll(
|
|
1089
|
+
const circle = nodeMerge.selectAll(childSelector('circle')).data(d => {
|
|
1104
1090
|
var _d$data$children;
|
|
1105
1091
|
return (_d$data$children = d.data.children) != null && _d$data$children.length ? [d] : [];
|
|
1106
1092
|
}, d => d.data.state.key).join(enter => {
|
|
@@ -1110,7 +1096,7 @@ class Markmap {
|
|
|
1110
1096
|
var _d$data$payload2;
|
|
1111
1097
|
return (_d$data$payload2 = d.data.payload) != null && _d$data$payload2.fold && d.data.children ? color(d.data) : '#fff';
|
|
1112
1098
|
});
|
|
1113
|
-
const foreignObject = nodeMerge.selectAll(
|
|
1099
|
+
const foreignObject = nodeMerge.selectAll(childSelector('foreignObject')).data(d => [d], d => d.data.state.key).join(enter => {
|
|
1114
1100
|
const fo = enter.append('foreignObject').attr('class', 'markmap-foreign').attr('x', paddingX).attr('y', 0).style('opacity', 0).on('mousedown', stopPropagation).on('dblclick', stopPropagation);
|
|
1115
1101
|
fo.append('xhtml:div').select(function select(d) {
|
|
1116
1102
|
const clone = d.data.state.el.cloneNode(true);
|
|
@@ -1122,7 +1108,7 @@ class Markmap {
|
|
|
1122
1108
|
this.transition(foreignObject).style('opacity', 1);
|
|
1123
1109
|
|
|
1124
1110
|
// Update the links
|
|
1125
|
-
const path = this.g.selectAll(
|
|
1111
|
+
const path = this.g.selectAll(childSelector('path')).data(links, d => d.target.data.state.key).join(enter => {
|
|
1126
1112
|
const source = [y0 + origin.ySize - spacingHorizontal, x0 + origin.xSize / 2];
|
|
1127
1113
|
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({
|
|
1128
1114
|
source,
|
|
@@ -1178,8 +1164,8 @@ class Markmap {
|
|
|
1178
1164
|
const naturalWidth = maxY - minY;
|
|
1179
1165
|
const naturalHeight = maxX - minX;
|
|
1180
1166
|
const scale = Math.min(offsetWidth / naturalWidth * fitRatio, offsetHeight / naturalHeight * fitRatio, 2);
|
|
1181
|
-
const initialZoom =
|
|
1182
|
-
return this.transition(this.svg).call(this.zoom.transform, initialZoom).end().catch(
|
|
1167
|
+
const initialZoom = zoomIdentity.translate((offsetWidth - naturalWidth * scale) / 2 - minY * scale, (offsetHeight - naturalHeight * scale) / 2 - minX * scale).scale(scale);
|
|
1168
|
+
return this.transition(this.svg).call(this.zoom.transform, initialZoom).end().catch(noop);
|
|
1183
1169
|
}
|
|
1184
1170
|
|
|
1185
1171
|
/**
|
|
@@ -1187,7 +1173,7 @@ class Markmap {
|
|
|
1187
1173
|
*/
|
|
1188
1174
|
async ensureView(node, padding) {
|
|
1189
1175
|
let itemData;
|
|
1190
|
-
this.g.selectAll(
|
|
1176
|
+
this.g.selectAll(childSelector('g')).each(function walk(d) {
|
|
1191
1177
|
if (d.data === node) {
|
|
1192
1178
|
itemData = d;
|
|
1193
1179
|
}
|
|
@@ -1198,7 +1184,7 @@ class Markmap {
|
|
|
1198
1184
|
spacingHorizontal
|
|
1199
1185
|
} = this.options;
|
|
1200
1186
|
const relRect = svgNode.getBoundingClientRect();
|
|
1201
|
-
const transform =
|
|
1187
|
+
const transform = zoomTransform(svgNode);
|
|
1202
1188
|
const [left, right] = [itemData.y, itemData.y + itemData.ySize - spacingHorizontal + 2].map(x => x * transform.k + transform.x);
|
|
1203
1189
|
const [top, bottom] = [itemData.x - itemData.xSize / 2, itemData.x + itemData.xSize / 2].map(y => y * transform.k + transform.y);
|
|
1204
1190
|
// Skip if the node includes or is included in the container.
|
|
@@ -1214,7 +1200,7 @@ class Markmap {
|
|
|
1214
1200
|
const dy = dys[0] * dys[1] > 0 ? minBy(dys, Math.abs) / transform.k : 0;
|
|
1215
1201
|
if (dx || dy) {
|
|
1216
1202
|
const newTransform = transform.translate(dx, dy);
|
|
1217
|
-
return this.transition(this.svg).call(this.zoom.transform, newTransform).end().catch(
|
|
1203
|
+
return this.transition(this.svg).call(this.zoom.transform, newTransform).end().catch(noop);
|
|
1218
1204
|
}
|
|
1219
1205
|
}
|
|
1220
1206
|
|
|
@@ -1229,9 +1215,9 @@ class Markmap {
|
|
|
1229
1215
|
} = svgNode.getBoundingClientRect();
|
|
1230
1216
|
const halfWidth = offsetWidth / 2;
|
|
1231
1217
|
const halfHeight = offsetHeight / 2;
|
|
1232
|
-
const transform =
|
|
1218
|
+
const transform = zoomTransform(svgNode);
|
|
1233
1219
|
const newTransform = transform.translate((halfWidth - transform.x) * (1 - scale) / transform.k, (halfHeight - transform.y) * (1 - scale) / transform.k).scale(scale);
|
|
1234
|
-
return this.transition(this.svg).call(this.zoom.transform, newTransform).end().catch(
|
|
1220
|
+
return this.transition(this.svg).call(this.zoom.transform, newTransform).end().catch(noop);
|
|
1235
1221
|
}
|
|
1236
1222
|
destroy() {
|
|
1237
1223
|
this.svg.on('.zoom', null);
|
|
@@ -1281,7 +1267,7 @@ function deriveOptions(jsonOptions) {
|
|
|
1281
1267
|
const solidColor = color[0];
|
|
1282
1268
|
derivedOptions.color = () => solidColor;
|
|
1283
1269
|
} else if (color != null && color.length) {
|
|
1284
|
-
const colorFn =
|
|
1270
|
+
const colorFn = scaleOrdinal(color);
|
|
1285
1271
|
derivedOptions.color = node => colorFn(`${node.state.path}`);
|
|
1286
1272
|
}
|
|
1287
1273
|
if (colorFreezeLevel) {
|
|
@@ -1308,10 +1294,4 @@ function deriveOptions(jsonOptions) {
|
|
|
1308
1294
|
return derivedOptions;
|
|
1309
1295
|
}
|
|
1310
1296
|
|
|
1311
|
-
|
|
1312
|
-
exports.loadJS = markmapCommon.loadJS;
|
|
1313
|
-
exports.Markmap = Markmap;
|
|
1314
|
-
exports.defaultColorFn = defaultColorFn;
|
|
1315
|
-
exports.deriveOptions = deriveOptions;
|
|
1316
|
-
exports.globalCSS = globalCSS;
|
|
1317
|
-
exports.refreshHook = refreshHook;
|
|
1297
|
+
export { Markmap, defaultColorFn, deriveOptions, globalCSS, refreshHook };
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "markmap-view",
|
|
3
|
-
"version": "0.14.5-alpha.
|
|
3
|
+
"version": "0.14.5-alpha.21+fb81f2c",
|
|
4
4
|
"description": "View markmaps in browser",
|
|
5
5
|
"author": "Gerald <gera2ld@live.com>",
|
|
6
6
|
"license": "MIT",
|
|
@@ -19,16 +19,17 @@
|
|
|
19
19
|
"url": "git+https://github.com/markmap/markmap.git"
|
|
20
20
|
},
|
|
21
21
|
"scripts": {
|
|
22
|
-
"dev": "rollup -wc
|
|
22
|
+
"dev": "rollup -wc",
|
|
23
23
|
"clean": "del-cli dist types",
|
|
24
|
-
"build:js": "rollup -c
|
|
24
|
+
"build:js": "rollup -c",
|
|
25
25
|
"build:types": "tsc"
|
|
26
26
|
},
|
|
27
27
|
"bugs": {
|
|
28
28
|
"url": "https://github.com/markmap/markmap/issues"
|
|
29
29
|
},
|
|
30
|
+
"type": "module",
|
|
30
31
|
"main": "dist/index.js",
|
|
31
|
-
"module": "dist/index.
|
|
32
|
+
"module": "dist/index.js",
|
|
32
33
|
"unpkg": "dist/browser/index.js",
|
|
33
34
|
"jsdelivr": "dist/browser/index.js",
|
|
34
35
|
"files": [
|
|
@@ -45,10 +46,10 @@
|
|
|
45
46
|
},
|
|
46
47
|
"devDependencies": {
|
|
47
48
|
"@types/d3-flextree": "^2.1.1",
|
|
48
|
-
"markmap-common": "0.14.5-alpha.
|
|
49
|
+
"markmap-common": "0.14.5-alpha.21+fb81f2c"
|
|
49
50
|
},
|
|
50
51
|
"peerDependencies": {
|
|
51
52
|
"markmap-common": "*"
|
|
52
53
|
},
|
|
53
|
-
"gitHead": "
|
|
54
|
+
"gitHead": "fb81f2cb688f400f17f911774539267219f639ce"
|
|
54
55
|
}
|
package/types/view.d.ts
CHANGED