markmap-view 0.14.4 → 0.14.5-alpha.13
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 → browser/index.js} +315 -384
- package/dist/index.js +149 -589
- package/dist/{index.esm.js → index.mjs} +126 -360
- package/package.json +11 -13
- package/types/view.d.ts +3 -2
- package/dist/index.min.js +0 -5
package/dist/index.js
CHANGED
|
@@ -1,267 +1,57 @@
|
|
|
1
|
-
/*! markmap-view v0.14.
|
|
2
|
-
(function (exports, d3) {
|
|
1
|
+
/*! markmap-view v0.14.5-alpha.13+50ca560 | MIT License */
|
|
3
2
|
'use strict';
|
|
4
3
|
|
|
5
|
-
|
|
6
|
-
|
|
4
|
+
var markmapCommon = require('markmap-common');
|
|
5
|
+
var d3 = require('d3');
|
|
6
|
+
|
|
7
|
+
function _interopNamespaceDefault(e) {
|
|
7
8
|
var n = Object.create(null);
|
|
8
9
|
if (e) {
|
|
9
10
|
for (var k in e) {
|
|
10
11
|
n[k] = e[k];
|
|
11
12
|
}
|
|
12
13
|
}
|
|
13
|
-
n
|
|
14
|
+
n.default = e;
|
|
14
15
|
return Object.freeze(n);
|
|
15
16
|
}
|
|
16
17
|
|
|
17
|
-
var d3__namespace = /*#__PURE__*/
|
|
18
|
-
|
|
19
|
-
/*! markmap-common v0.14.2 | MIT License */
|
|
20
|
-
class Hook {
|
|
21
|
-
constructor() {
|
|
22
|
-
this.listeners = [];
|
|
23
|
-
}
|
|
24
|
-
|
|
25
|
-
tap(fn) {
|
|
26
|
-
this.listeners.push(fn);
|
|
27
|
-
return () => this.revoke(fn);
|
|
28
|
-
}
|
|
29
|
-
|
|
30
|
-
revoke(fn) {
|
|
31
|
-
const i = this.listeners.indexOf(fn);
|
|
32
|
-
if (i >= 0) this.listeners.splice(i, 1);
|
|
33
|
-
}
|
|
34
|
-
|
|
35
|
-
revokeAll() {
|
|
36
|
-
this.listeners.splice(0);
|
|
37
|
-
}
|
|
38
|
-
|
|
39
|
-
call(...args) {
|
|
40
|
-
for (const fn of this.listeners) {
|
|
41
|
-
fn(...args);
|
|
42
|
-
}
|
|
43
|
-
}
|
|
44
|
-
|
|
45
|
-
}
|
|
46
|
-
|
|
47
|
-
function _extends$1() {
|
|
48
|
-
_extends$1 = Object.assign || function (target) {
|
|
49
|
-
for (var i = 1; i < arguments.length; i++) {
|
|
50
|
-
var source = arguments[i];
|
|
51
|
-
|
|
52
|
-
for (var key in source) {
|
|
53
|
-
if (Object.prototype.hasOwnProperty.call(source, key)) {
|
|
54
|
-
target[key] = source[key];
|
|
55
|
-
}
|
|
56
|
-
}
|
|
57
|
-
}
|
|
58
|
-
|
|
59
|
-
return target;
|
|
60
|
-
};
|
|
61
|
-
|
|
62
|
-
return _extends$1.apply(this, arguments);
|
|
63
|
-
}
|
|
64
|
-
|
|
65
|
-
const uniqId = Math.random().toString(36).slice(2, 8);
|
|
66
|
-
let globalIndex = 0;
|
|
67
|
-
function getId() {
|
|
68
|
-
globalIndex += 1;
|
|
69
|
-
return `mm-${uniqId}-${globalIndex}`;
|
|
70
|
-
}
|
|
71
|
-
function noop() {// noop
|
|
72
|
-
}
|
|
73
|
-
function walkTree(tree, callback, key = 'children') {
|
|
74
|
-
const walk = (item, parent) => callback(item, () => {
|
|
75
|
-
var _item$key;
|
|
76
|
-
|
|
77
|
-
(_item$key = item[key]) == null ? void 0 : _item$key.forEach(child => {
|
|
78
|
-
walk(child, item);
|
|
79
|
-
});
|
|
80
|
-
}, parent);
|
|
81
|
-
|
|
82
|
-
walk(tree);
|
|
83
|
-
}
|
|
84
|
-
function arrayFrom(arrayLike) {
|
|
85
|
-
if (Array.from) return Array.from(arrayLike);
|
|
86
|
-
const array = [];
|
|
87
|
-
|
|
88
|
-
for (let i = 0; i < arrayLike.length; i += 1) {
|
|
89
|
-
array.push(arrayLike[i]);
|
|
90
|
-
}
|
|
91
|
-
|
|
92
|
-
return array;
|
|
93
|
-
}
|
|
94
|
-
function addClass(className, ...rest) {
|
|
95
|
-
const classList = (className || '').split(' ').filter(Boolean);
|
|
96
|
-
rest.forEach(item => {
|
|
97
|
-
if (item && classList.indexOf(item) < 0) classList.push(item);
|
|
98
|
-
});
|
|
99
|
-
return classList.join(' ');
|
|
100
|
-
}
|
|
101
|
-
function childSelector(filter) {
|
|
102
|
-
if (typeof filter === 'string') {
|
|
103
|
-
const tagName = filter;
|
|
104
|
-
|
|
105
|
-
filter = el => el.tagName === tagName;
|
|
106
|
-
}
|
|
107
|
-
|
|
108
|
-
const filterFn = filter;
|
|
109
|
-
return function selector() {
|
|
110
|
-
let nodes = arrayFrom(this.childNodes);
|
|
111
|
-
if (filterFn) nodes = nodes.filter(node => filterFn(node));
|
|
112
|
-
return nodes;
|
|
113
|
-
};
|
|
114
|
-
}
|
|
115
|
-
function memoize(fn) {
|
|
116
|
-
const cache = {};
|
|
117
|
-
return function memoized(...args) {
|
|
118
|
-
const key = `${args[0]}`;
|
|
119
|
-
let data = cache[key];
|
|
120
|
-
|
|
121
|
-
if (!data) {
|
|
122
|
-
data = {
|
|
123
|
-
value: fn(...args)
|
|
124
|
-
};
|
|
125
|
-
cache[key] = data;
|
|
126
|
-
}
|
|
127
|
-
|
|
128
|
-
return data.value;
|
|
129
|
-
};
|
|
130
|
-
}
|
|
131
|
-
|
|
132
|
-
function createElement(tagName, props, attrs) {
|
|
133
|
-
const el = document.createElement(tagName);
|
|
134
|
-
|
|
135
|
-
if (props) {
|
|
136
|
-
Object.entries(props).forEach(([key, value]) => {
|
|
137
|
-
el[key] = value;
|
|
138
|
-
});
|
|
139
|
-
}
|
|
140
|
-
|
|
141
|
-
if (attrs) {
|
|
142
|
-
Object.entries(attrs).forEach(([key, value]) => {
|
|
143
|
-
el.setAttribute(key, value);
|
|
144
|
-
});
|
|
145
|
-
}
|
|
146
|
-
|
|
147
|
-
return el;
|
|
148
|
-
}
|
|
149
|
-
|
|
150
|
-
const memoizedPreloadJS = memoize(url => {
|
|
151
|
-
document.head.append(createElement('link', {
|
|
152
|
-
rel: 'preload',
|
|
153
|
-
as: 'script',
|
|
154
|
-
href: url
|
|
155
|
-
}));
|
|
156
|
-
});
|
|
157
|
-
|
|
158
|
-
async function loadJSItem(item, context) {
|
|
159
|
-
if (!item.loaded) {
|
|
160
|
-
if (item.type === 'script') {
|
|
161
|
-
item.loaded = new Promise((resolve, reject) => {
|
|
162
|
-
var _item$data;
|
|
163
|
-
|
|
164
|
-
document.head.append(createElement('script', _extends$1({}, item.data, {
|
|
165
|
-
onload: resolve,
|
|
166
|
-
onerror: reject
|
|
167
|
-
}))); // Run inline script synchronously
|
|
168
|
-
|
|
169
|
-
if (!((_item$data = item.data) != null && _item$data.src)) resolve(undefined);
|
|
170
|
-
}).then(() => {
|
|
171
|
-
item.loaded = true;
|
|
172
|
-
});
|
|
173
|
-
}
|
|
174
|
-
|
|
175
|
-
if (item.type === 'iife') {
|
|
176
|
-
const {
|
|
177
|
-
fn,
|
|
178
|
-
getParams
|
|
179
|
-
} = item.data;
|
|
180
|
-
fn(...((getParams == null ? void 0 : getParams(context)) || []));
|
|
181
|
-
item.loaded = true;
|
|
182
|
-
}
|
|
183
|
-
}
|
|
184
|
-
|
|
185
|
-
await item.loaded;
|
|
186
|
-
}
|
|
187
|
-
|
|
188
|
-
function loadCSSItem(item) {
|
|
189
|
-
if (item.loaded) return;
|
|
190
|
-
item.loaded = true;
|
|
191
|
-
|
|
192
|
-
if (item.type === 'style') {
|
|
193
|
-
document.head.append(createElement('style', {
|
|
194
|
-
textContent: item.data
|
|
195
|
-
}));
|
|
196
|
-
} else if (item.type === 'stylesheet') {
|
|
197
|
-
document.head.append(createElement('link', _extends$1({
|
|
198
|
-
rel: 'stylesheet'
|
|
199
|
-
}, item.data)));
|
|
200
|
-
}
|
|
201
|
-
}
|
|
202
|
-
|
|
203
|
-
async function loadJS(items, context) {
|
|
204
|
-
const needPreload = items.filter(item => {
|
|
205
|
-
var _item$data2;
|
|
206
|
-
|
|
207
|
-
return item.type === 'script' && ((_item$data2 = item.data) == null ? void 0 : _item$data2.src);
|
|
208
|
-
});
|
|
209
|
-
if (needPreload.length > 1) needPreload.forEach(item => memoizedPreloadJS(item.data.src));
|
|
210
|
-
context = _extends$1({
|
|
211
|
-
getMarkmap: () => window.markmap
|
|
212
|
-
}, context);
|
|
213
|
-
|
|
214
|
-
for (const item of items) {
|
|
215
|
-
await loadJSItem(item, context);
|
|
216
|
-
}
|
|
217
|
-
}
|
|
218
|
-
function loadCSS(items) {
|
|
219
|
-
for (const item of items) {
|
|
220
|
-
loadCSSItem(item);
|
|
221
|
-
}
|
|
222
|
-
}
|
|
18
|
+
var d3__namespace = /*#__PURE__*/_interopNamespaceDefault(d3);
|
|
223
19
|
|
|
224
20
|
function _extends() {
|
|
225
|
-
_extends = Object.assign
|
|
21
|
+
_extends = Object.assign ? Object.assign.bind() : function (target) {
|
|
226
22
|
for (var i = 1; i < arguments.length; i++) {
|
|
227
23
|
var source = arguments[i];
|
|
228
|
-
|
|
229
24
|
for (var key in source) {
|
|
230
25
|
if (Object.prototype.hasOwnProperty.call(source, key)) {
|
|
231
26
|
target[key] = source[key];
|
|
232
27
|
}
|
|
233
28
|
}
|
|
234
29
|
}
|
|
235
|
-
|
|
236
30
|
return target;
|
|
237
31
|
};
|
|
238
|
-
|
|
239
32
|
return _extends.apply(this, arguments);
|
|
240
33
|
}
|
|
241
34
|
|
|
242
35
|
function count(node) {
|
|
243
36
|
var sum = 0,
|
|
244
|
-
|
|
245
|
-
|
|
37
|
+
children = node.children,
|
|
38
|
+
i = children && children.length;
|
|
246
39
|
if (!i) sum = 1;else while (--i >= 0) sum += children[i].value;
|
|
247
40
|
node.value = sum;
|
|
248
41
|
}
|
|
249
|
-
|
|
250
42
|
function node_count () {
|
|
251
43
|
return this.eachAfter(count);
|
|
252
44
|
}
|
|
253
45
|
|
|
254
46
|
function node_each (callback) {
|
|
255
47
|
var node = this,
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
48
|
+
current,
|
|
49
|
+
next = [node],
|
|
50
|
+
children,
|
|
51
|
+
i,
|
|
52
|
+
n;
|
|
262
53
|
do {
|
|
263
54
|
current = next.reverse(), next = [];
|
|
264
|
-
|
|
265
55
|
while (node = current.pop()) {
|
|
266
56
|
callback(node), children = node.children;
|
|
267
57
|
if (children) for (i = 0, n = children.length; i < n; ++i) {
|
|
@@ -269,56 +59,48 @@ function node_each (callback) {
|
|
|
269
59
|
}
|
|
270
60
|
}
|
|
271
61
|
} while (next.length);
|
|
272
|
-
|
|
273
62
|
return this;
|
|
274
63
|
}
|
|
275
64
|
|
|
276
65
|
function node_eachBefore (callback) {
|
|
277
66
|
var node = this,
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
67
|
+
nodes = [node],
|
|
68
|
+
children,
|
|
69
|
+
i;
|
|
282
70
|
while (node = nodes.pop()) {
|
|
283
71
|
callback(node), children = node.children;
|
|
284
72
|
if (children) for (i = children.length - 1; i >= 0; --i) {
|
|
285
73
|
nodes.push(children[i]);
|
|
286
74
|
}
|
|
287
75
|
}
|
|
288
|
-
|
|
289
76
|
return this;
|
|
290
77
|
}
|
|
291
78
|
|
|
292
79
|
function node_eachAfter (callback) {
|
|
293
80
|
var node = this,
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
81
|
+
nodes = [node],
|
|
82
|
+
next = [],
|
|
83
|
+
children,
|
|
84
|
+
i,
|
|
85
|
+
n;
|
|
300
86
|
while (node = nodes.pop()) {
|
|
301
87
|
next.push(node), children = node.children;
|
|
302
88
|
if (children) for (i = 0, n = children.length; i < n; ++i) {
|
|
303
89
|
nodes.push(children[i]);
|
|
304
90
|
}
|
|
305
91
|
}
|
|
306
|
-
|
|
307
92
|
while (node = next.pop()) {
|
|
308
93
|
callback(node);
|
|
309
94
|
}
|
|
310
|
-
|
|
311
95
|
return this;
|
|
312
96
|
}
|
|
313
97
|
|
|
314
98
|
function node_sum (value) {
|
|
315
99
|
return this.eachAfter(function (node) {
|
|
316
100
|
var sum = +value(node.data) || 0,
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
|
|
101
|
+
children = node.children,
|
|
102
|
+
i = children && children.length;
|
|
320
103
|
while (--i >= 0) sum += children[i].value;
|
|
321
|
-
|
|
322
104
|
node.value = sum;
|
|
323
105
|
});
|
|
324
106
|
}
|
|
@@ -333,49 +115,40 @@ function node_sort (compare) {
|
|
|
333
115
|
|
|
334
116
|
function node_path (end) {
|
|
335
117
|
var start = this,
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
|
|
118
|
+
ancestor = leastCommonAncestor(start, end),
|
|
119
|
+
nodes = [start];
|
|
339
120
|
while (start !== ancestor) {
|
|
340
121
|
start = start.parent;
|
|
341
122
|
nodes.push(start);
|
|
342
123
|
}
|
|
343
|
-
|
|
344
124
|
var k = nodes.length;
|
|
345
|
-
|
|
346
125
|
while (end !== ancestor) {
|
|
347
126
|
nodes.splice(k, 0, end);
|
|
348
127
|
end = end.parent;
|
|
349
128
|
}
|
|
350
|
-
|
|
351
129
|
return nodes;
|
|
352
130
|
}
|
|
353
|
-
|
|
354
131
|
function leastCommonAncestor(a, b) {
|
|
355
132
|
if (a === b) return a;
|
|
356
133
|
var aNodes = a.ancestors(),
|
|
357
|
-
|
|
358
|
-
|
|
134
|
+
bNodes = b.ancestors(),
|
|
135
|
+
c = null;
|
|
359
136
|
a = aNodes.pop();
|
|
360
137
|
b = bNodes.pop();
|
|
361
|
-
|
|
362
138
|
while (a === b) {
|
|
363
139
|
c = a;
|
|
364
140
|
a = aNodes.pop();
|
|
365
141
|
b = bNodes.pop();
|
|
366
142
|
}
|
|
367
|
-
|
|
368
143
|
return c;
|
|
369
144
|
}
|
|
370
145
|
|
|
371
146
|
function node_ancestors () {
|
|
372
147
|
var node = this,
|
|
373
|
-
|
|
374
|
-
|
|
148
|
+
nodes = [node];
|
|
375
149
|
while (node = node.parent) {
|
|
376
150
|
nodes.push(node);
|
|
377
151
|
}
|
|
378
|
-
|
|
379
152
|
return nodes;
|
|
380
153
|
}
|
|
381
154
|
|
|
@@ -399,7 +172,7 @@ function node_leaves () {
|
|
|
399
172
|
|
|
400
173
|
function node_links () {
|
|
401
174
|
var root = this,
|
|
402
|
-
|
|
175
|
+
links = [];
|
|
403
176
|
root.each(function (node) {
|
|
404
177
|
if (node !== root) {
|
|
405
178
|
// Don’t include the root’s parent, if any.
|
|
@@ -414,21 +187,18 @@ function node_links () {
|
|
|
414
187
|
|
|
415
188
|
function hierarchy(data, children) {
|
|
416
189
|
var root = new Node$1(data),
|
|
417
|
-
|
|
418
|
-
|
|
419
|
-
|
|
420
|
-
|
|
421
|
-
|
|
422
|
-
|
|
423
|
-
|
|
190
|
+
valued = +data.value && (root.value = data.value),
|
|
191
|
+
node,
|
|
192
|
+
nodes = [root],
|
|
193
|
+
child,
|
|
194
|
+
childs,
|
|
195
|
+
i,
|
|
196
|
+
n;
|
|
424
197
|
if (children == null) children = defaultChildren;
|
|
425
|
-
|
|
426
198
|
while (node = nodes.pop()) {
|
|
427
199
|
if (valued) node.value = +node.data.value;
|
|
428
|
-
|
|
429
200
|
if ((childs = children(node.data)) && (n = childs.length)) {
|
|
430
201
|
node.children = new Array(n);
|
|
431
|
-
|
|
432
202
|
for (i = n - 1; i >= 0; --i) {
|
|
433
203
|
nodes.push(child = node.children[i] = new Node$1(childs[i]));
|
|
434
204
|
child.parent = node;
|
|
@@ -436,25 +206,19 @@ function hierarchy(data, children) {
|
|
|
436
206
|
}
|
|
437
207
|
}
|
|
438
208
|
}
|
|
439
|
-
|
|
440
209
|
return root.eachBefore(computeHeight);
|
|
441
210
|
}
|
|
442
|
-
|
|
443
211
|
function node_copy() {
|
|
444
212
|
return hierarchy(this).eachBefore(copyData);
|
|
445
213
|
}
|
|
446
|
-
|
|
447
214
|
function defaultChildren(d) {
|
|
448
215
|
return d.children;
|
|
449
216
|
}
|
|
450
|
-
|
|
451
217
|
function copyData(node) {
|
|
452
218
|
node.data = node.data.data;
|
|
453
219
|
}
|
|
454
|
-
|
|
455
220
|
function computeHeight(node) {
|
|
456
221
|
var height = 0;
|
|
457
|
-
|
|
458
222
|
do node.height = height; while ((node = node.parent) && node.height < ++height);
|
|
459
223
|
}
|
|
460
224
|
function Node$1(data) {
|
|
@@ -478,110 +242,29 @@ Node$1.prototype = hierarchy.prototype = {
|
|
|
478
242
|
copy: node_copy
|
|
479
243
|
};
|
|
480
244
|
|
|
481
|
-
var
|
|
482
|
-
var version$1 = "2.1.2";
|
|
483
|
-
var main = "build/d3-flextree.js";
|
|
484
|
-
var module = "index";
|
|
485
|
-
var author = {
|
|
486
|
-
name: "Chris Maloney",
|
|
487
|
-
url: "http://chrismaloney.org"
|
|
488
|
-
};
|
|
489
|
-
var description = "Flexible tree layout algorithm that allows for variable node sizes.";
|
|
490
|
-
var keywords = [
|
|
491
|
-
"d3",
|
|
492
|
-
"d3-module",
|
|
493
|
-
"layout",
|
|
494
|
-
"tree",
|
|
495
|
-
"hierarchy",
|
|
496
|
-
"d3-hierarchy",
|
|
497
|
-
"plugin",
|
|
498
|
-
"d3-plugin",
|
|
499
|
-
"infovis",
|
|
500
|
-
"visualization",
|
|
501
|
-
"2d"
|
|
502
|
-
];
|
|
503
|
-
var homepage = "https://github.com/klortho/d3-flextree";
|
|
504
|
-
var license = "WTFPL";
|
|
505
|
-
var repository = {
|
|
506
|
-
type: "git",
|
|
507
|
-
url: "https://github.com/klortho/d3-flextree.git"
|
|
508
|
-
};
|
|
509
|
-
var scripts = {
|
|
510
|
-
clean: "rm -rf build demo test",
|
|
511
|
-
"build:demo": "rollup -c --environment BUILD:demo",
|
|
512
|
-
"build:dev": "rollup -c --environment BUILD:dev",
|
|
513
|
-
"build:prod": "rollup -c --environment BUILD:prod",
|
|
514
|
-
"build:test": "rollup -c --environment BUILD:test",
|
|
515
|
-
build: "rollup -c",
|
|
516
|
-
lint: "eslint index.js src",
|
|
517
|
-
"test:main": "node test/bundle.js",
|
|
518
|
-
"test:browser": "node test/browser-tests.js",
|
|
519
|
-
test: "npm-run-all test:*",
|
|
520
|
-
prepare: "npm-run-all clean build lint test"
|
|
521
|
-
};
|
|
522
|
-
var dependencies = {
|
|
523
|
-
"d3-hierarchy": "^1.1.5"
|
|
524
|
-
};
|
|
525
|
-
var devDependencies = {
|
|
526
|
-
"babel-plugin-external-helpers": "^6.22.0",
|
|
527
|
-
"babel-preset-es2015-rollup": "^3.0.0",
|
|
528
|
-
d3: "^4.13.0",
|
|
529
|
-
"d3-selection-multi": "^1.0.1",
|
|
530
|
-
eslint: "^4.19.1",
|
|
531
|
-
jsdom: "^11.6.2",
|
|
532
|
-
"npm-run-all": "^4.1.2",
|
|
533
|
-
rollup: "^0.55.3",
|
|
534
|
-
"rollup-plugin-babel": "^2.7.1",
|
|
535
|
-
"rollup-plugin-commonjs": "^8.0.2",
|
|
536
|
-
"rollup-plugin-copy": "^0.2.3",
|
|
537
|
-
"rollup-plugin-json": "^2.3.0",
|
|
538
|
-
"rollup-plugin-node-resolve": "^3.0.2",
|
|
539
|
-
"rollup-plugin-uglify": "^3.0.0",
|
|
540
|
-
"uglify-es": "^3.3.9"
|
|
541
|
-
};
|
|
542
|
-
var packageInfo = {
|
|
543
|
-
name: name,
|
|
544
|
-
version: version$1,
|
|
545
|
-
main: main,
|
|
546
|
-
module: module,
|
|
547
|
-
"jsnext:main": "index",
|
|
548
|
-
author: author,
|
|
549
|
-
description: description,
|
|
550
|
-
keywords: keywords,
|
|
551
|
-
homepage: homepage,
|
|
552
|
-
license: license,
|
|
553
|
-
repository: repository,
|
|
554
|
-
scripts: scripts,
|
|
555
|
-
dependencies: dependencies,
|
|
556
|
-
devDependencies: devDependencies
|
|
557
|
-
};
|
|
245
|
+
var version = "2.1.1";
|
|
558
246
|
|
|
559
|
-
const {
|
|
560
|
-
version
|
|
561
|
-
} = packageInfo;
|
|
562
247
|
const defaults = Object.freeze({
|
|
563
248
|
children: data => data.children,
|
|
564
249
|
nodeSize: node => node.data.size,
|
|
565
250
|
spacing: 0
|
|
566
|
-
});
|
|
251
|
+
});
|
|
252
|
+
|
|
253
|
+
// Create a layout function with customizable options. Per D3-style, the
|
|
567
254
|
// options can be set at any time using setter methods. The layout function
|
|
568
255
|
// will compute the tree node positions based on the options in effect at the
|
|
569
256
|
// time it is called.
|
|
570
|
-
|
|
571
257
|
function flextree(options) {
|
|
572
258
|
const opts = Object.assign({}, defaults, options);
|
|
573
|
-
|
|
574
259
|
function accessor(name) {
|
|
575
260
|
const opt = opts[name];
|
|
576
261
|
return typeof opt === 'function' ? opt : () => opt;
|
|
577
262
|
}
|
|
578
|
-
|
|
579
263
|
function layout(tree) {
|
|
580
264
|
const wtree = wrap(getWrapper(), tree, node => node.children);
|
|
581
265
|
wtree.update();
|
|
582
266
|
return wtree.data;
|
|
583
267
|
}
|
|
584
|
-
|
|
585
268
|
function getFlexNode() {
|
|
586
269
|
const nodeSize = accessor('nodeSize');
|
|
587
270
|
const spacing = accessor('spacing');
|
|
@@ -589,78 +272,60 @@ function flextree(options) {
|
|
|
589
272
|
constructor(data) {
|
|
590
273
|
super(data);
|
|
591
274
|
}
|
|
592
|
-
|
|
593
275
|
copy() {
|
|
594
276
|
const c = wrap(this.constructor, this, node => node.children);
|
|
595
277
|
c.each(node => node.data = node.data.data);
|
|
596
278
|
return c;
|
|
597
279
|
}
|
|
598
|
-
|
|
599
280
|
get size() {
|
|
600
281
|
return nodeSize(this);
|
|
601
282
|
}
|
|
602
|
-
|
|
603
283
|
spacing(oNode) {
|
|
604
284
|
return spacing(this, oNode);
|
|
605
285
|
}
|
|
606
|
-
|
|
607
286
|
get nodes() {
|
|
608
287
|
return this.descendants();
|
|
609
288
|
}
|
|
610
|
-
|
|
611
289
|
get xSize() {
|
|
612
290
|
return this.size[0];
|
|
613
291
|
}
|
|
614
|
-
|
|
615
292
|
get ySize() {
|
|
616
293
|
return this.size[1];
|
|
617
294
|
}
|
|
618
|
-
|
|
619
295
|
get top() {
|
|
620
296
|
return this.y;
|
|
621
297
|
}
|
|
622
|
-
|
|
623
298
|
get bottom() {
|
|
624
299
|
return this.y + this.ySize;
|
|
625
300
|
}
|
|
626
|
-
|
|
627
301
|
get left() {
|
|
628
302
|
return this.x - this.xSize / 2;
|
|
629
303
|
}
|
|
630
|
-
|
|
631
304
|
get right() {
|
|
632
305
|
return this.x + this.xSize / 2;
|
|
633
306
|
}
|
|
634
|
-
|
|
635
307
|
get root() {
|
|
636
308
|
const ancs = this.ancestors();
|
|
637
309
|
return ancs[ancs.length - 1];
|
|
638
310
|
}
|
|
639
|
-
|
|
640
311
|
get numChildren() {
|
|
641
312
|
return this.hasChildren ? this.children.length : 0;
|
|
642
313
|
}
|
|
643
|
-
|
|
644
314
|
get hasChildren() {
|
|
645
315
|
return !this.noChildren;
|
|
646
316
|
}
|
|
647
|
-
|
|
648
317
|
get noChildren() {
|
|
649
318
|
return this.children === null;
|
|
650
319
|
}
|
|
651
|
-
|
|
652
320
|
get firstChild() {
|
|
653
321
|
return this.hasChildren ? this.children[0] : null;
|
|
654
322
|
}
|
|
655
|
-
|
|
656
323
|
get lastChild() {
|
|
657
324
|
return this.hasChildren ? this.children[this.numChildren - 1] : null;
|
|
658
325
|
}
|
|
659
|
-
|
|
660
326
|
get extents() {
|
|
661
327
|
return (this.children || []).reduce((acc, kid) => FlexNode.maxExtents(acc, kid.extents), this.nodeExtents);
|
|
662
328
|
}
|
|
663
|
-
|
|
664
329
|
get nodeExtents() {
|
|
665
330
|
return {
|
|
666
331
|
top: this.top,
|
|
@@ -669,7 +334,6 @@ function flextree(options) {
|
|
|
669
334
|
right: this.right
|
|
670
335
|
};
|
|
671
336
|
}
|
|
672
|
-
|
|
673
337
|
static maxExtents(e0, e1) {
|
|
674
338
|
return {
|
|
675
339
|
top: Math.min(e0.top, e1.top),
|
|
@@ -678,10 +342,8 @@ function flextree(options) {
|
|
|
678
342
|
right: Math.max(e0.right, e1.right)
|
|
679
343
|
};
|
|
680
344
|
}
|
|
681
|
-
|
|
682
345
|
};
|
|
683
346
|
}
|
|
684
|
-
|
|
685
347
|
function getWrapper() {
|
|
686
348
|
const FlexNode = getFlexNode();
|
|
687
349
|
const nodeSize = accessor('nodeSize');
|
|
@@ -704,40 +366,31 @@ function flextree(options) {
|
|
|
704
366
|
rThr: null
|
|
705
367
|
});
|
|
706
368
|
}
|
|
707
|
-
|
|
708
369
|
get size() {
|
|
709
370
|
return nodeSize(this.data);
|
|
710
371
|
}
|
|
711
|
-
|
|
712
372
|
spacing(oNode) {
|
|
713
373
|
return spacing(this.data, oNode.data);
|
|
714
374
|
}
|
|
715
|
-
|
|
716
375
|
get x() {
|
|
717
376
|
return this.data.x;
|
|
718
377
|
}
|
|
719
|
-
|
|
720
378
|
set x(v) {
|
|
721
379
|
this.data.x = v;
|
|
722
380
|
}
|
|
723
|
-
|
|
724
381
|
get y() {
|
|
725
382
|
return this.data.y;
|
|
726
383
|
}
|
|
727
|
-
|
|
728
384
|
set y(v) {
|
|
729
385
|
this.data.y = v;
|
|
730
386
|
}
|
|
731
|
-
|
|
732
387
|
update() {
|
|
733
388
|
layoutChildren(this);
|
|
734
389
|
resolveX(this);
|
|
735
390
|
return this;
|
|
736
391
|
}
|
|
737
|
-
|
|
738
392
|
};
|
|
739
393
|
}
|
|
740
|
-
|
|
741
394
|
function wrap(FlexClass, treeData, children) {
|
|
742
395
|
const _wrap = (data, parent) => {
|
|
743
396
|
const node = new FlexClass(data);
|
|
@@ -749,41 +402,32 @@ function flextree(options) {
|
|
|
749
402
|
});
|
|
750
403
|
const kidsData = children(data) || [];
|
|
751
404
|
node.children = kidsData.length === 0 ? null : kidsData.map(kd => _wrap(kd, node));
|
|
752
|
-
|
|
753
405
|
if (node.children) {
|
|
754
406
|
Object.assign(node, node.children.reduce((hl, kid) => ({
|
|
755
407
|
height: Math.max(hl.height, kid.height + 1),
|
|
756
408
|
length: hl.length + kid.length
|
|
757
409
|
}), node));
|
|
758
410
|
}
|
|
759
|
-
|
|
760
411
|
return node;
|
|
761
412
|
};
|
|
762
|
-
|
|
763
413
|
return _wrap(treeData, null);
|
|
764
414
|
}
|
|
765
|
-
|
|
766
415
|
Object.assign(layout, {
|
|
767
416
|
nodeSize(arg) {
|
|
768
417
|
return arguments.length ? (opts.nodeSize = arg, layout) : opts.nodeSize;
|
|
769
418
|
},
|
|
770
|
-
|
|
771
419
|
spacing(arg) {
|
|
772
420
|
return arguments.length ? (opts.spacing = arg, layout) : opts.spacing;
|
|
773
421
|
},
|
|
774
|
-
|
|
775
422
|
children(arg) {
|
|
776
423
|
return arguments.length ? (opts.children = arg, layout) : opts.children;
|
|
777
424
|
},
|
|
778
|
-
|
|
779
425
|
hierarchy(treeData, children) {
|
|
780
426
|
const kids = typeof children === 'undefined' ? opts.children : children;
|
|
781
427
|
return wrap(getFlexNode(), treeData, kids);
|
|
782
428
|
},
|
|
783
|
-
|
|
784
429
|
dump(tree) {
|
|
785
430
|
const nodeSize = accessor('nodeSize');
|
|
786
|
-
|
|
787
431
|
const _dump = i0 => node => {
|
|
788
432
|
const i1 = i0 + ' ';
|
|
789
433
|
const i2 = i0 + ' ';
|
|
@@ -796,22 +440,19 @@ function flextree(options) {
|
|
|
796
440
|
const kdumps = kids.length === 0 ? ' ' : `,${i1}children: [${i2}${kids.map(_dump(i2)).join(i2)}${i1}],${i0}`;
|
|
797
441
|
return `{ size: [${size.join(', ')}],${i1}x: ${x}, y: ${y}${kdumps}},`;
|
|
798
442
|
};
|
|
799
|
-
|
|
800
443
|
return _dump('\n')(tree);
|
|
801
444
|
}
|
|
802
|
-
|
|
803
445
|
});
|
|
804
446
|
return layout;
|
|
805
447
|
}
|
|
806
448
|
flextree.version = version;
|
|
807
|
-
|
|
808
449
|
const layoutChildren = (w, y = 0) => {
|
|
809
450
|
w.y = y;
|
|
810
451
|
(w.children || []).reduce((acc, kid) => {
|
|
811
452
|
const [i, lastLows] = acc;
|
|
812
|
-
layoutChildren(kid, w.y + w.ySize);
|
|
453
|
+
layoutChildren(kid, w.y + w.ySize);
|
|
454
|
+
// The lowest vertical coordinate while extreme nodes still point
|
|
813
455
|
// in current subtree.
|
|
814
|
-
|
|
815
456
|
const lowY = (i === 0 ? kid.lExt : kid.rExt).bottom;
|
|
816
457
|
if (i !== 0) separate(w, i, lastLows);
|
|
817
458
|
const lows = updateLows(lowY, i, lastLows);
|
|
@@ -820,12 +461,12 @@ const layoutChildren = (w, y = 0) => {
|
|
|
820
461
|
shiftChange(w);
|
|
821
462
|
positionRoot(w);
|
|
822
463
|
return w;
|
|
823
|
-
};
|
|
464
|
+
};
|
|
465
|
+
|
|
466
|
+
// Resolves the relative coordinate properties - relX and prelim --
|
|
824
467
|
// to set the final, absolute x coordinate for each node. This also sets
|
|
825
468
|
// `prelim` to 0, so that `relX` for each node is its x-coordinate relative
|
|
826
469
|
// to its parent.
|
|
827
|
-
|
|
828
|
-
|
|
829
470
|
const resolveX = (w, prevSum, parentX) => {
|
|
830
471
|
// A call to resolveX without arguments is assumed to be for the root of
|
|
831
472
|
// the tree. This will set the root's x-coord to zero.
|
|
@@ -833,17 +474,16 @@ const resolveX = (w, prevSum, parentX) => {
|
|
|
833
474
|
prevSum = -w.relX - w.prelim;
|
|
834
475
|
parentX = 0;
|
|
835
476
|
}
|
|
836
|
-
|
|
837
477
|
const sum = prevSum + w.relX;
|
|
838
478
|
w.relX = sum + w.prelim - parentX;
|
|
839
479
|
w.prelim = 0;
|
|
840
480
|
w.x = parentX + w.relX;
|
|
841
481
|
(w.children || []).forEach(k => resolveX(k, sum, w.x));
|
|
842
482
|
return w;
|
|
843
|
-
};
|
|
844
|
-
// each child's modifier.
|
|
845
|
-
|
|
483
|
+
};
|
|
846
484
|
|
|
485
|
+
// Process shift and change for all children, to add intermediate spacing to
|
|
486
|
+
// each child's modifier.
|
|
847
487
|
const shiftChange = w => {
|
|
848
488
|
(w.children || []).reduce((acc, child) => {
|
|
849
489
|
const [lastShiftSum, lastChangeSum] = acc;
|
|
@@ -852,11 +492,10 @@ const shiftChange = w => {
|
|
|
852
492
|
child.relX += changeSum;
|
|
853
493
|
return [shiftSum, changeSum];
|
|
854
494
|
}, [0, 0]);
|
|
855
|
-
};
|
|
495
|
+
};
|
|
856
496
|
|
|
497
|
+
// Separates the latest child from its previous sibling
|
|
857
498
|
/* eslint-disable complexity */
|
|
858
|
-
|
|
859
|
-
|
|
860
499
|
const separate = (w, i, lows) => {
|
|
861
500
|
const lSib = w.children[i - 1];
|
|
862
501
|
const curSubtree = w.children[i];
|
|
@@ -865,56 +504,49 @@ const separate = (w, i, lows) => {
|
|
|
865
504
|
let lContour = curSubtree;
|
|
866
505
|
let lSumMods = curSubtree.relX;
|
|
867
506
|
let isFirst = true;
|
|
868
|
-
|
|
869
507
|
while (rContour && lContour) {
|
|
870
|
-
if (rContour.bottom > lows.lowY) lows = lows.next;
|
|
508
|
+
if (rContour.bottom > lows.lowY) lows = lows.next;
|
|
509
|
+
// How far to the left of the right side of rContour is the left side
|
|
871
510
|
// of lContour? First compute the center-to-center distance, then add
|
|
872
511
|
// the "spacing"
|
|
873
|
-
|
|
874
512
|
const dist = rSumMods + rContour.prelim - (lSumMods + lContour.prelim) + rContour.xSize / 2 + lContour.xSize / 2 + rContour.spacing(lContour);
|
|
875
|
-
|
|
876
513
|
if (dist > 0 || dist < 0 && isFirst) {
|
|
877
|
-
lSumMods += dist;
|
|
878
|
-
|
|
514
|
+
lSumMods += dist;
|
|
515
|
+
// Move subtree by changing relX.
|
|
879
516
|
moveSubtree(curSubtree, dist);
|
|
880
517
|
distributeExtra(w, i, lows.index, dist);
|
|
881
518
|
}
|
|
882
|
-
|
|
883
|
-
|
|
884
|
-
|
|
519
|
+
isFirst = false;
|
|
520
|
+
// Advance highest node(s) and sum(s) of modifiers
|
|
885
521
|
const rightBottom = rContour.bottom;
|
|
886
522
|
const leftBottom = lContour.bottom;
|
|
887
|
-
|
|
888
523
|
if (rightBottom <= leftBottom) {
|
|
889
524
|
rContour = nextRContour(rContour);
|
|
890
525
|
if (rContour) rSumMods += rContour.relX;
|
|
891
526
|
}
|
|
892
|
-
|
|
893
527
|
if (rightBottom >= leftBottom) {
|
|
894
528
|
lContour = nextLContour(lContour);
|
|
895
529
|
if (lContour) lSumMods += lContour.relX;
|
|
896
530
|
}
|
|
897
|
-
}
|
|
531
|
+
}
|
|
532
|
+
// Set threads and update extreme nodes. In the first case, the
|
|
898
533
|
// current subtree is taller than the left siblings.
|
|
899
|
-
|
|
900
|
-
|
|
901
|
-
if (!rContour && lContour) setLThr(w, i, lContour, lSumMods); // In the next case, the left siblings are taller than the current subtree
|
|
534
|
+
if (!rContour && lContour) setLThr(w, i, lContour, lSumMods);
|
|
535
|
+
// In the next case, the left siblings are taller than the current subtree
|
|
902
536
|
else if (rContour && !lContour) setRThr(w, i, rContour, rSumMods);
|
|
903
537
|
};
|
|
904
538
|
/* eslint-enable complexity */
|
|
905
|
-
// Move subtree by changing relX.
|
|
906
|
-
|
|
907
539
|
|
|
540
|
+
// Move subtree by changing relX.
|
|
908
541
|
const moveSubtree = (subtree, distance) => {
|
|
909
542
|
subtree.relX += distance;
|
|
910
543
|
subtree.lExtRelX += distance;
|
|
911
544
|
subtree.rExtRelX += distance;
|
|
912
545
|
};
|
|
913
|
-
|
|
914
546
|
const distributeExtra = (w, curSubtreeI, leftSibI, dist) => {
|
|
915
547
|
const curSubtree = w.children[curSubtreeI];
|
|
916
|
-
const n = curSubtreeI - leftSibI;
|
|
917
|
-
|
|
548
|
+
const n = curSubtreeI - leftSibI;
|
|
549
|
+
// Are there intermediate children?
|
|
918
550
|
if (n > 1) {
|
|
919
551
|
const delta = dist / n;
|
|
920
552
|
w.children[leftSibI + 1].shift += delta;
|
|
@@ -922,31 +554,28 @@ const distributeExtra = (w, curSubtreeI, leftSibI, dist) => {
|
|
|
922
554
|
curSubtree.change -= dist - delta;
|
|
923
555
|
}
|
|
924
556
|
};
|
|
925
|
-
|
|
926
557
|
const nextLContour = w => {
|
|
927
558
|
return w.hasChildren ? w.firstChild : w.lThr;
|
|
928
559
|
};
|
|
929
|
-
|
|
930
560
|
const nextRContour = w => {
|
|
931
561
|
return w.hasChildren ? w.lastChild : w.rThr;
|
|
932
562
|
};
|
|
933
|
-
|
|
934
563
|
const setLThr = (w, i, lContour, lSumMods) => {
|
|
935
564
|
const firstChild = w.firstChild;
|
|
936
565
|
const lExt = firstChild.lExt;
|
|
937
566
|
const curSubtree = w.children[i];
|
|
938
|
-
lExt.lThr = lContour;
|
|
939
|
-
|
|
567
|
+
lExt.lThr = lContour;
|
|
568
|
+
// Change relX so that the sum of modifier after following thread is correct.
|
|
940
569
|
const diff = lSumMods - lContour.relX - firstChild.lExtRelX;
|
|
941
|
-
lExt.relX += diff;
|
|
942
|
-
|
|
943
|
-
lExt.prelim -= diff;
|
|
944
|
-
|
|
570
|
+
lExt.relX += diff;
|
|
571
|
+
// Change preliminary x coordinate so that the node does not move.
|
|
572
|
+
lExt.prelim -= diff;
|
|
573
|
+
// Update extreme node and its sum of modifiers.
|
|
945
574
|
firstChild.lExt = curSubtree.lExt;
|
|
946
575
|
firstChild.lExtRelX = curSubtree.lExtRelX;
|
|
947
|
-
};
|
|
948
|
-
|
|
576
|
+
};
|
|
949
577
|
|
|
578
|
+
// Mirror image of setLThr.
|
|
950
579
|
const setRThr = (w, i, rContour, rSumMods) => {
|
|
951
580
|
const curSubtree = w.children[i];
|
|
952
581
|
const rExt = curSubtree.rExt;
|
|
@@ -957,9 +586,9 @@ const setRThr = (w, i, rContour, rSumMods) => {
|
|
|
957
586
|
rExt.prelim -= diff;
|
|
958
587
|
curSubtree.rExt = lSib.rExt;
|
|
959
588
|
curSubtree.rExtRelX = lSib.rExtRelX;
|
|
960
|
-
};
|
|
961
|
-
|
|
589
|
+
};
|
|
962
590
|
|
|
591
|
+
// Position root between children, taking into account their modifiers
|
|
963
592
|
const positionRoot = w => {
|
|
964
593
|
if (w.hasChildren) {
|
|
965
594
|
const k0 = w.firstChild;
|
|
@@ -973,15 +602,14 @@ const positionRoot = w => {
|
|
|
973
602
|
rExtRelX: kf.rExtRelX
|
|
974
603
|
});
|
|
975
604
|
}
|
|
976
|
-
};
|
|
977
|
-
// lowest vertical coordinate.
|
|
978
|
-
|
|
605
|
+
};
|
|
979
606
|
|
|
607
|
+
// Make/maintain a linked list of the indexes of left siblings and their
|
|
608
|
+
// lowest vertical coordinate.
|
|
980
609
|
const updateLows = (lowY, index, lastLows) => {
|
|
981
610
|
// Remove siblings that are hidden by the new subtree.
|
|
982
|
-
while (lastLows !== null && lowY >= lastLows.lowY) lastLows = lastLows.next;
|
|
983
|
-
|
|
984
|
-
|
|
611
|
+
while (lastLows !== null && lowY >= lastLows.lowY) lastLows = lastLows.next;
|
|
612
|
+
// Prepend the new subtree.
|
|
985
613
|
return {
|
|
986
614
|
lowY,
|
|
987
615
|
index,
|
|
@@ -1001,19 +629,15 @@ var NS_ATTRS = {
|
|
|
1001
629
|
actuate: XLINK_NS,
|
|
1002
630
|
href: XLINK_NS
|
|
1003
631
|
};
|
|
1004
|
-
|
|
1005
632
|
var isLeaf = function isLeaf(c) {
|
|
1006
633
|
return typeof c === 'string' || typeof c === 'number';
|
|
1007
634
|
};
|
|
1008
|
-
|
|
1009
635
|
var isElement = function isElement(c) {
|
|
1010
636
|
return (c == null ? void 0 : c.vtype) === VTYPE_ELEMENT;
|
|
1011
637
|
};
|
|
1012
|
-
|
|
1013
638
|
var isRenderFunction = function isRenderFunction(c) {
|
|
1014
639
|
return (c == null ? void 0 : c.vtype) === VTYPE_FUNCTION;
|
|
1015
640
|
};
|
|
1016
|
-
|
|
1017
641
|
function jsx(type, props) {
|
|
1018
642
|
var vtype;
|
|
1019
643
|
if (typeof type === 'string') vtype = VTYPE_ELEMENT;else if (typeof type === 'function') vtype = VTYPE_FUNCTION;else throw new Error('Invalid VNode type');
|
|
@@ -1023,15 +647,12 @@ function jsx(type, props) {
|
|
|
1023
647
|
props: props
|
|
1024
648
|
};
|
|
1025
649
|
}
|
|
1026
|
-
|
|
1027
650
|
function Fragment(props) {
|
|
1028
651
|
return props.children;
|
|
1029
652
|
}
|
|
1030
|
-
|
|
1031
653
|
var DEFAULT_ENV = {
|
|
1032
654
|
isSvg: false
|
|
1033
655
|
};
|
|
1034
|
-
|
|
1035
656
|
function insertDom(parent, ref) {
|
|
1036
657
|
if (ref.type === MOUNT_SINGLE) {
|
|
1037
658
|
if (ref.node != null) parent.append(ref.node);
|
|
@@ -1043,11 +664,9 @@ function insertDom(parent, ref) {
|
|
|
1043
664
|
throw new Error("Unkown ref type " + JSON.stringify(ref));
|
|
1044
665
|
}
|
|
1045
666
|
}
|
|
1046
|
-
|
|
1047
667
|
function mountAttributes(domElement, props, env) {
|
|
1048
668
|
for (var key in props) {
|
|
1049
669
|
if (key === 'key' || key === 'children' || key === 'ref') continue;
|
|
1050
|
-
|
|
1051
670
|
if (key === 'dangerouslySetInnerHTML') {
|
|
1052
671
|
domElement.innerHTML = props[key].__html;
|
|
1053
672
|
} else if (key === 'innerHTML' || key === 'textContent' || key === 'innerText') {
|
|
@@ -1059,22 +678,18 @@ function mountAttributes(domElement, props, env) {
|
|
|
1059
678
|
}
|
|
1060
679
|
}
|
|
1061
680
|
}
|
|
1062
|
-
|
|
1063
681
|
var attrMap = {
|
|
1064
682
|
className: 'class',
|
|
1065
683
|
labelFor: 'for'
|
|
1066
684
|
};
|
|
1067
|
-
|
|
1068
685
|
function setDOMAttribute(el, attr, value, isSVG) {
|
|
1069
686
|
attr = attrMap[attr] || attr;
|
|
1070
|
-
|
|
1071
687
|
if (value === true) {
|
|
1072
688
|
el.setAttribute(attr, '');
|
|
1073
689
|
} else if (value === false) {
|
|
1074
690
|
el.removeAttribute(attr);
|
|
1075
691
|
} else {
|
|
1076
692
|
var namespace = isSVG ? NS_ATTRS[attr] : undefined;
|
|
1077
|
-
|
|
1078
693
|
if (namespace !== undefined) {
|
|
1079
694
|
el.setAttributeNS(namespace, attr, value);
|
|
1080
695
|
} else {
|
|
@@ -1082,91 +697,72 @@ function setDOMAttribute(el, attr, value, isSVG) {
|
|
|
1082
697
|
}
|
|
1083
698
|
}
|
|
1084
699
|
}
|
|
1085
|
-
|
|
1086
700
|
function mount(vnode, env) {
|
|
1087
701
|
if (env === void 0) {
|
|
1088
702
|
env = DEFAULT_ENV;
|
|
1089
703
|
}
|
|
1090
|
-
|
|
1091
704
|
if (vnode == null || typeof vnode === 'boolean') {
|
|
1092
705
|
return {
|
|
1093
706
|
type: MOUNT_SINGLE,
|
|
1094
707
|
node: null
|
|
1095
708
|
};
|
|
1096
709
|
}
|
|
1097
|
-
|
|
1098
710
|
if (vnode instanceof Node) {
|
|
1099
711
|
return {
|
|
1100
712
|
type: MOUNT_SINGLE,
|
|
1101
713
|
node: vnode
|
|
1102
714
|
};
|
|
1103
715
|
}
|
|
1104
|
-
|
|
1105
716
|
if (isRenderFunction(vnode)) {
|
|
1106
717
|
var _ref = vnode,
|
|
1107
|
-
|
|
1108
|
-
|
|
1109
|
-
|
|
718
|
+
type = _ref.type,
|
|
719
|
+
props = _ref.props;
|
|
1110
720
|
if (type === Fragment) {
|
|
1111
721
|
var node = document.createDocumentFragment();
|
|
1112
|
-
|
|
1113
722
|
if (props.children) {
|
|
1114
723
|
var childrenRef = mount(props.children, env);
|
|
1115
724
|
insertDom(node, childrenRef);
|
|
1116
725
|
}
|
|
1117
|
-
|
|
1118
726
|
return {
|
|
1119
727
|
type: MOUNT_SINGLE,
|
|
1120
728
|
node: node
|
|
1121
729
|
};
|
|
1122
730
|
}
|
|
1123
|
-
|
|
1124
731
|
var childVNode = type(props);
|
|
1125
732
|
return mount(childVNode, env);
|
|
1126
733
|
}
|
|
1127
|
-
|
|
1128
734
|
if (isLeaf(vnode)) {
|
|
1129
735
|
return {
|
|
1130
736
|
type: MOUNT_SINGLE,
|
|
1131
737
|
node: document.createTextNode("" + vnode)
|
|
1132
738
|
};
|
|
1133
739
|
}
|
|
1134
|
-
|
|
1135
740
|
if (isElement(vnode)) {
|
|
1136
741
|
var _node;
|
|
1137
|
-
|
|
1138
742
|
var _ref2 = vnode,
|
|
1139
|
-
|
|
1140
|
-
|
|
1141
|
-
|
|
743
|
+
_type = _ref2.type,
|
|
744
|
+
_props = _ref2.props;
|
|
1142
745
|
if (!env.isSvg && _type === 'svg') {
|
|
1143
746
|
env = Object.assign({}, env, {
|
|
1144
747
|
isSvg: true
|
|
1145
748
|
});
|
|
1146
749
|
}
|
|
1147
|
-
|
|
1148
750
|
if (!env.isSvg) {
|
|
1149
751
|
_node = document.createElement(_type);
|
|
1150
752
|
} else {
|
|
1151
753
|
_node = document.createElementNS(SVG_NS, _type);
|
|
1152
754
|
}
|
|
1153
|
-
|
|
1154
755
|
mountAttributes(_node, _props, env);
|
|
1155
|
-
|
|
1156
756
|
var _childrenRef;
|
|
1157
|
-
|
|
1158
757
|
if (_props.children) {
|
|
1159
758
|
var childEnv = env;
|
|
1160
|
-
|
|
1161
759
|
if (env.isSvg && _type === 'foreignObject') {
|
|
1162
760
|
childEnv = Object.assign({}, childEnv, {
|
|
1163
761
|
isSvg: false
|
|
1164
762
|
});
|
|
1165
763
|
}
|
|
1166
|
-
|
|
1167
764
|
_childrenRef = mount(_props.children, childEnv);
|
|
1168
765
|
}
|
|
1169
|
-
|
|
1170
766
|
if (_childrenRef != null) insertDom(_node, _childrenRef);
|
|
1171
767
|
var ref = _props.ref;
|
|
1172
768
|
if (typeof ref === 'function') ref(_node);
|
|
@@ -1175,7 +771,6 @@ function mount(vnode, env) {
|
|
|
1175
771
|
node: _node
|
|
1176
772
|
};
|
|
1177
773
|
}
|
|
1178
|
-
|
|
1179
774
|
if (Array.isArray(vnode)) {
|
|
1180
775
|
return {
|
|
1181
776
|
type: MOUNT_ARRAY,
|
|
@@ -1184,80 +779,66 @@ function mount(vnode, env) {
|
|
|
1184
779
|
})
|
|
1185
780
|
};
|
|
1186
781
|
}
|
|
1187
|
-
|
|
1188
782
|
throw new Error('mount: Invalid Vnode!');
|
|
1189
783
|
}
|
|
1190
|
-
|
|
1191
784
|
function flattenWithoutNull(array) {
|
|
1192
785
|
var result = [];
|
|
1193
|
-
|
|
1194
786
|
for (var i = 0; i < array.length; i += 1) {
|
|
1195
787
|
var item = array[i];
|
|
1196
788
|
if (Array.isArray(item)) result = result.concat(flattenWithoutNull(item));else if (item != null) result.push(item);
|
|
1197
789
|
}
|
|
1198
|
-
|
|
1199
790
|
return result;
|
|
1200
791
|
}
|
|
1201
|
-
|
|
1202
792
|
function asDom(result) {
|
|
1203
793
|
if (result.type === MOUNT_SINGLE) {
|
|
1204
794
|
return result.node;
|
|
1205
795
|
}
|
|
1206
|
-
|
|
1207
796
|
return result.children.map(asDom);
|
|
1208
797
|
}
|
|
1209
798
|
/**
|
|
1210
799
|
* Mount vdom as real DOM nodes.
|
|
1211
800
|
*/
|
|
1212
801
|
|
|
1213
|
-
|
|
1214
802
|
function mountDom(vnode) {
|
|
1215
803
|
if (Array.isArray(vnode)) {
|
|
1216
804
|
return flattenWithoutNull(vnode.map(mountDom));
|
|
1217
805
|
}
|
|
1218
|
-
|
|
1219
806
|
return asDom(mount(vnode));
|
|
1220
807
|
}
|
|
1221
808
|
|
|
1222
|
-
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:
|
|
809
|
+
var css_248z$1 = ".markmap{font:300 16px/20px sans-serif}.markmap-link{fill:none}.markmap-node>circle{cursor:pointer}.markmap-foreign{display:inline-block}.markmap-foreign a{color:#0097e6}.markmap-foreign a:hover{color:#00a8ff}.markmap-foreign code{background-color:#f0f0f0;border-radius:2px;color:#555;font-size:calc(1em - 2px)}.markmap-foreign :not(pre)>code{padding:.2em .4em}.markmap-foreign del{text-decoration:line-through}.markmap-foreign em{font-style:italic}.markmap-foreign strong{font-weight:700}.markmap-foreign mark{background:#ffeaa7}.markmap-foreign pre,.markmap-foreign pre[class*=language-]{margin:0;padding:.2em .4em}";
|
|
1223
810
|
|
|
1224
811
|
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}";
|
|
1225
812
|
|
|
1226
813
|
const globalCSS = css_248z$1;
|
|
1227
|
-
|
|
1228
814
|
function linkWidth(nodeData) {
|
|
1229
815
|
const data = nodeData.data;
|
|
1230
816
|
return Math.max(4 - 2 * data.depth, 1.5);
|
|
1231
817
|
}
|
|
1232
|
-
|
|
1233
818
|
function adjustSpacing(tree, spacing) {
|
|
1234
|
-
walkTree(tree, (d, next) => {
|
|
819
|
+
markmapCommon.walkTree(tree, (d, next) => {
|
|
1235
820
|
d.ySizeInner = d.ySize - spacing;
|
|
1236
821
|
d.y += spacing;
|
|
1237
822
|
next();
|
|
1238
823
|
}, 'children');
|
|
1239
824
|
}
|
|
1240
|
-
|
|
1241
825
|
function minBy(numbers, by) {
|
|
1242
826
|
const index = d3__namespace.minIndex(numbers, by);
|
|
1243
827
|
return numbers[index];
|
|
1244
828
|
}
|
|
1245
|
-
|
|
1246
829
|
function stopPropagation(e) {
|
|
1247
830
|
e.stopPropagation();
|
|
1248
831
|
}
|
|
1249
|
-
|
|
1250
832
|
function createViewHooks() {
|
|
1251
833
|
return {
|
|
1252
|
-
transformHtml: new Hook()
|
|
834
|
+
transformHtml: new markmapCommon.Hook()
|
|
1253
835
|
};
|
|
1254
836
|
}
|
|
837
|
+
|
|
1255
838
|
/**
|
|
1256
839
|
* A global hook to refresh all markmaps when called.
|
|
1257
840
|
*/
|
|
1258
|
-
|
|
1259
|
-
|
|
1260
|
-
const refreshHook = new Hook();
|
|
841
|
+
const refreshHook = new markmapCommon.Hook();
|
|
1261
842
|
const defaultColorFn = d3__namespace.scaleOrdinal(d3__namespace.schemeCategory10);
|
|
1262
843
|
const isMacintosh = typeof navigator !== 'undefined' && navigator.userAgent.includes('Macintosh');
|
|
1263
844
|
class Markmap {
|
|
@@ -1274,19 +855,17 @@ class Markmap {
|
|
|
1274
855
|
// Pan with wheels, zoom with ctrl+wheels
|
|
1275
856
|
if (event.type === 'wheel') return event.ctrlKey && !event.button;
|
|
1276
857
|
}
|
|
1277
|
-
|
|
1278
858
|
return (!event.ctrlKey || event.type === 'wheel') && !event.button;
|
|
1279
859
|
}).on('zoom', this.handleZoom);
|
|
1280
860
|
this.setOptions(opts);
|
|
1281
861
|
this.state = {
|
|
1282
|
-
id: this.options.id || this.svg.attr('id') || getId()
|
|
862
|
+
id: this.options.id || this.svg.attr('id') || markmapCommon.getId()
|
|
1283
863
|
};
|
|
1284
864
|
this.g = this.svg.append('g');
|
|
1285
865
|
this.revokers.push(refreshHook.tap(() => {
|
|
1286
866
|
this.setData();
|
|
1287
867
|
}));
|
|
1288
868
|
}
|
|
1289
|
-
|
|
1290
869
|
getStyleContent() {
|
|
1291
870
|
const {
|
|
1292
871
|
style
|
|
@@ -1297,39 +876,47 @@ class Markmap {
|
|
|
1297
876
|
const styleText = typeof style === 'function' ? style(id) : '';
|
|
1298
877
|
return [this.options.embedGlobalCSS && css_248z$1, styleText].filter(Boolean).join('\n');
|
|
1299
878
|
}
|
|
1300
|
-
|
|
1301
879
|
updateStyle() {
|
|
1302
|
-
this.svg.attr('class', addClass(this.svg.attr('class'), 'markmap', this.state.id));
|
|
880
|
+
this.svg.attr('class', markmapCommon.addClass(this.svg.attr('class'), 'markmap', this.state.id));
|
|
1303
881
|
const style = this.getStyleContent();
|
|
1304
882
|
this.styleNode.text(style);
|
|
1305
883
|
}
|
|
1306
|
-
|
|
1307
884
|
handleZoom(e) {
|
|
1308
885
|
const {
|
|
1309
886
|
transform
|
|
1310
887
|
} = e;
|
|
1311
888
|
this.g.attr('transform', transform);
|
|
1312
889
|
}
|
|
1313
|
-
|
|
1314
890
|
handlePan(e) {
|
|
1315
891
|
e.preventDefault();
|
|
1316
892
|
const transform = d3__namespace.zoomTransform(this.svg.node());
|
|
1317
893
|
const newTransform = transform.translate(-e.deltaX / transform.k, -e.deltaY / transform.k);
|
|
1318
894
|
this.svg.call(this.zoom.transform, newTransform);
|
|
1319
895
|
}
|
|
1320
|
-
|
|
1321
|
-
handleClick(_, d) {
|
|
896
|
+
toggleNode(data, recursive = false) {
|
|
1322
897
|
var _data$payload;
|
|
1323
|
-
|
|
1324
|
-
|
|
1325
|
-
|
|
1326
|
-
|
|
1327
|
-
|
|
1328
|
-
|
|
1329
|
-
|
|
1330
|
-
|
|
898
|
+
const fold = (_data$payload = data.payload) != null && _data$payload.fold ? 0 : 1;
|
|
899
|
+
if (recursive) {
|
|
900
|
+
// recursively
|
|
901
|
+
markmapCommon.walkTree(data, (item, next) => {
|
|
902
|
+
item.payload = _extends({}, item.payload, {
|
|
903
|
+
fold
|
|
904
|
+
});
|
|
905
|
+
next();
|
|
906
|
+
});
|
|
907
|
+
} else {
|
|
908
|
+
var _data$payload2;
|
|
909
|
+
data.payload = _extends({}, data.payload, {
|
|
910
|
+
fold: (_data$payload2 = data.payload) != null && _data$payload2.fold ? 0 : 1
|
|
911
|
+
});
|
|
912
|
+
}
|
|
913
|
+
this.renderData(data);
|
|
914
|
+
}
|
|
915
|
+
handleClick(e, d) {
|
|
916
|
+
let recursive = this.options.toggleRecursively;
|
|
917
|
+
if (e.ctrlKey) recursive = !recursive;
|
|
918
|
+
this.toggleNode(d.data, recursive);
|
|
1331
919
|
}
|
|
1332
|
-
|
|
1333
920
|
initializeData(node) {
|
|
1334
921
|
let nodeId = 0;
|
|
1335
922
|
const {
|
|
@@ -1350,9 +937,8 @@ class Markmap {
|
|
|
1350
937
|
document.body.append(container, style);
|
|
1351
938
|
const groupStyle = maxWidth ? `max-width: ${maxWidth}px` : '';
|
|
1352
939
|
let foldRecursively = 0;
|
|
1353
|
-
walkTree(node, (item, next, parent) => {
|
|
940
|
+
markmapCommon.walkTree(node, (item, next, parent) => {
|
|
1354
941
|
var _item$children, _parent$state, _item$payload;
|
|
1355
|
-
|
|
1356
942
|
item.children = (_item$children = item.children) == null ? void 0 : _item$children.map(child => _extends({}, child));
|
|
1357
943
|
nodeId += 1;
|
|
1358
944
|
const group = mountDom(jsx("div", {
|
|
@@ -1369,11 +955,10 @@ class Markmap {
|
|
|
1369
955
|
id: nodeId,
|
|
1370
956
|
el: group.firstChild
|
|
1371
957
|
});
|
|
1372
|
-
item.state.path = [parent == null
|
|
958
|
+
item.state.path = [parent == null || (_parent$state = parent.state) == null ? void 0 : _parent$state.path, item.state.id].filter(Boolean).join('.');
|
|
1373
959
|
color(item); // preload colors
|
|
1374
960
|
|
|
1375
961
|
const isFoldRecursively = ((_item$payload = item.payload) == null ? void 0 : _item$payload.fold) === 2;
|
|
1376
|
-
|
|
1377
962
|
if (isFoldRecursively) {
|
|
1378
963
|
foldRecursively += 1;
|
|
1379
964
|
} else if (foldRecursively || initialExpandLevel >= 0 && item.depth >= initialExpandLevel) {
|
|
@@ -1381,45 +966,40 @@ class Markmap {
|
|
|
1381
966
|
fold: 1
|
|
1382
967
|
});
|
|
1383
968
|
}
|
|
1384
|
-
|
|
1385
969
|
next();
|
|
1386
970
|
if (isFoldRecursively) foldRecursively -= 1;
|
|
1387
971
|
});
|
|
1388
|
-
const nodes =
|
|
1389
|
-
this.viewHooks.transformHtml.call(this, nodes);
|
|
972
|
+
const nodes = Array.from(container.childNodes).map(group => group.firstChild);
|
|
973
|
+
this.viewHooks.transformHtml.call(this, nodes);
|
|
974
|
+
// Clone the rendered HTML and set `white-space: nowrap` to it to detect its max-width.
|
|
1390
975
|
// The parent node will have a width of the max-width and the original content without
|
|
1391
976
|
// `white-space: nowrap` gets re-layouted, then we will get the expected layout, with
|
|
1392
977
|
// content in one line as much as possible, and subjecting to the given max-width.
|
|
1393
|
-
|
|
1394
978
|
nodes.forEach(node => {
|
|
1395
979
|
node.parentNode.append(node.cloneNode(true));
|
|
1396
980
|
});
|
|
1397
|
-
walkTree(node, (item, next, parent) => {
|
|
981
|
+
markmapCommon.walkTree(node, (item, next, parent) => {
|
|
1398
982
|
var _parent$state2;
|
|
1399
|
-
|
|
1400
983
|
const rect = item.state.el.getBoundingClientRect();
|
|
1401
984
|
item.content = item.state.el.innerHTML;
|
|
1402
985
|
item.state.size = [Math.ceil(rect.width) + 1, Math.max(Math.ceil(rect.height), nodeMinHeight)];
|
|
1403
|
-
item.state.key = [parent == null
|
|
986
|
+
item.state.key = [parent == null || (_parent$state2 = parent.state) == null ? void 0 : _parent$state2.id, item.state.id].filter(Boolean).join('.') +
|
|
987
|
+
// FIXME: find a way to check content hash
|
|
1404
988
|
item.content;
|
|
1405
989
|
next();
|
|
1406
990
|
});
|
|
1407
991
|
container.remove();
|
|
1408
992
|
style.remove();
|
|
1409
993
|
}
|
|
1410
|
-
|
|
1411
994
|
setOptions(opts) {
|
|
1412
995
|
this.options = _extends({}, Markmap.defaultOptions, opts);
|
|
1413
|
-
|
|
1414
996
|
if (this.options.zoom) {
|
|
1415
997
|
this.svg.call(this.zoom);
|
|
1416
998
|
} else {
|
|
1417
999
|
this.svg.on('.zoom', null);
|
|
1418
1000
|
}
|
|
1419
|
-
|
|
1420
1001
|
this.svg.on('wheel', this.options.pan ? this.handlePan : null);
|
|
1421
1002
|
}
|
|
1422
|
-
|
|
1423
1003
|
setData(data, opts) {
|
|
1424
1004
|
if (data) this.state.data = data;
|
|
1425
1005
|
if (opts) this.setOptions(opts);
|
|
@@ -1427,10 +1007,8 @@ class Markmap {
|
|
|
1427
1007
|
this.updateStyle();
|
|
1428
1008
|
this.renderData();
|
|
1429
1009
|
}
|
|
1430
|
-
|
|
1431
1010
|
renderData(originData) {
|
|
1432
1011
|
var _origin$data$state$x, _origin$data$state$y;
|
|
1433
|
-
|
|
1434
1012
|
if (!this.state.data) return;
|
|
1435
1013
|
const {
|
|
1436
1014
|
spacingHorizontal,
|
|
@@ -1441,7 +1019,6 @@ class Markmap {
|
|
|
1441
1019
|
} = this.options;
|
|
1442
1020
|
const layout = flextree().children(d => {
|
|
1443
1021
|
var _d$payload;
|
|
1444
|
-
|
|
1445
1022
|
return !((_d$payload = d.payload) != null && _d$payload.fold) && d.children;
|
|
1446
1023
|
}).nodeSize(d => {
|
|
1447
1024
|
const [width, height] = d.data.state.size;
|
|
@@ -1468,9 +1045,10 @@ class Markmap {
|
|
|
1468
1045
|
if (autoFit) this.fit();
|
|
1469
1046
|
const origin = originData && descendants.find(item => item.data === originData) || tree;
|
|
1470
1047
|
const x0 = (_origin$data$state$x = origin.data.state.x0) != null ? _origin$data$state$x : origin.x;
|
|
1471
|
-
const y0 = (_origin$data$state$y = origin.data.state.y0) != null ? _origin$data$state$y : origin.y;
|
|
1048
|
+
const y0 = (_origin$data$state$y = origin.data.state.y0) != null ? _origin$data$state$y : origin.y;
|
|
1472
1049
|
|
|
1473
|
-
|
|
1050
|
+
// Update the nodes
|
|
1051
|
+
const node = this.g.selectAll(markmapCommon.childSelector('g')).data(descendants, d => d.data.state.key);
|
|
1474
1052
|
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})`);
|
|
1475
1053
|
const nodeExit = this.transition(node.exit());
|
|
1476
1054
|
nodeExit.select('line').attr('x1', d => d.ySizeInner).attr('x2', d => d.ySizeInner);
|
|
@@ -1478,25 +1056,25 @@ class Markmap {
|
|
|
1478
1056
|
nodeExit.attr('transform', d => `translate(${origin.y + origin.ySizeInner - d.ySizeInner},${origin.x + origin.xSize / 2 - d.xSize})`).remove();
|
|
1479
1057
|
const nodeMerge = node.merge(nodeEnter).attr('class', d => {
|
|
1480
1058
|
var _d$data$payload;
|
|
1481
|
-
|
|
1482
1059
|
return ['markmap-node', ((_d$data$payload = d.data.payload) == null ? void 0 : _d$data$payload.fold) && 'markmap-fold'].filter(Boolean).join(' ');
|
|
1483
1060
|
});
|
|
1484
|
-
this.transition(nodeMerge).attr('transform', d => `translate(${d.y},${d.x - d.xSize / 2})`);
|
|
1061
|
+
this.transition(nodeMerge).attr('transform', d => `translate(${d.y},${d.x - d.xSize / 2})`);
|
|
1485
1062
|
|
|
1486
|
-
|
|
1063
|
+
// Update lines under the content
|
|
1064
|
+
const line = nodeMerge.selectAll(markmapCommon.childSelector('line')).data(d => [d], d => d.data.state.key).join(enter => {
|
|
1487
1065
|
return enter.append('line').attr('x1', d => d.ySizeInner).attr('x2', d => d.ySizeInner);
|
|
1488
1066
|
}, update => update, exit => exit.remove());
|
|
1489
|
-
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);
|
|
1067
|
+
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);
|
|
1490
1068
|
|
|
1491
|
-
|
|
1492
|
-
|
|
1069
|
+
// Circle to link to children of the node
|
|
1070
|
+
const circle = nodeMerge.selectAll(markmapCommon.childSelector('circle')).data(d => d.data.children ? [d] : [], d => d.data.state.key).join(enter => {
|
|
1071
|
+
return enter.append('circle').attr('stroke-width', '1.5').attr('cx', d => d.ySizeInner).attr('cy', d => d.xSize).attr('r', 0).on('click', (e, d) => this.handleClick(e, d)).on('mousedown', stopPropagation);
|
|
1493
1072
|
}, update => update, exit => exit.remove());
|
|
1494
1073
|
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 => {
|
|
1495
1074
|
var _d$data$payload2;
|
|
1496
|
-
|
|
1497
1075
|
return (_d$data$payload2 = d.data.payload) != null && _d$data$payload2.fold && d.data.children ? color(d.data) : '#fff';
|
|
1498
1076
|
});
|
|
1499
|
-
const foreignObject = nodeMerge.selectAll(childSelector('foreignObject')).data(d => [d], d => d.data.state.key).join(enter => {
|
|
1077
|
+
const foreignObject = nodeMerge.selectAll(markmapCommon.childSelector('foreignObject')).data(d => [d], d => d.data.state.key).join(enter => {
|
|
1500
1078
|
const fo = enter.append('foreignObject').attr('class', 'markmap-foreign').attr('x', paddingX).attr('y', 0).style('opacity', 0).on('mousedown', stopPropagation).on('dblclick', stopPropagation);
|
|
1501
1079
|
fo.append('xhtml:div').select(function select(d) {
|
|
1502
1080
|
const clone = d.data.state.el.cloneNode(true);
|
|
@@ -1505,9 +1083,10 @@ class Markmap {
|
|
|
1505
1083
|
}).attr('xmlns', 'http://www.w3.org/1999/xhtml');
|
|
1506
1084
|
return fo;
|
|
1507
1085
|
}, update => update, exit => exit.remove()).attr('width', d => Math.max(0, d.ySizeInner - paddingX * 2)).attr('height', d => d.xSize);
|
|
1508
|
-
this.transition(foreignObject).style('opacity', 1);
|
|
1086
|
+
this.transition(foreignObject).style('opacity', 1);
|
|
1509
1087
|
|
|
1510
|
-
|
|
1088
|
+
// Update the links
|
|
1089
|
+
const path = this.g.selectAll(markmapCommon.childSelector('path')).data(links, d => d.target.data.state.key).join(enter => {
|
|
1511
1090
|
const source = [y0 + origin.ySizeInner, x0 + origin.xSize / 2];
|
|
1512
1091
|
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({
|
|
1513
1092
|
source,
|
|
@@ -1533,18 +1112,16 @@ class Markmap {
|
|
|
1533
1112
|
d.data.state.y0 = d.y;
|
|
1534
1113
|
});
|
|
1535
1114
|
}
|
|
1536
|
-
|
|
1537
1115
|
transition(sel) {
|
|
1538
1116
|
const {
|
|
1539
1117
|
duration
|
|
1540
1118
|
} = this.options;
|
|
1541
1119
|
return sel.transition().duration(duration);
|
|
1542
1120
|
}
|
|
1121
|
+
|
|
1543
1122
|
/**
|
|
1544
1123
|
* Fit the content to the viewport.
|
|
1545
1124
|
*/
|
|
1546
|
-
|
|
1547
|
-
|
|
1548
1125
|
async fit() {
|
|
1549
1126
|
const svgNode = this.svg.node();
|
|
1550
1127
|
const {
|
|
@@ -1564,51 +1141,45 @@ class Markmap {
|
|
|
1564
1141
|
const naturalHeight = maxX - minX;
|
|
1565
1142
|
const scale = Math.min(offsetWidth / naturalWidth * fitRatio, offsetHeight / naturalHeight * fitRatio, 2);
|
|
1566
1143
|
const initialZoom = d3__namespace.zoomIdentity.translate((offsetWidth - naturalWidth * scale) / 2 - minY * scale, (offsetHeight - naturalHeight * scale) / 2 - minX * scale).scale(scale);
|
|
1567
|
-
return this.transition(this.svg).call(this.zoom.transform, initialZoom).end().catch(noop);
|
|
1144
|
+
return this.transition(this.svg).call(this.zoom.transform, initialZoom).end().catch(markmapCommon.noop);
|
|
1568
1145
|
}
|
|
1146
|
+
|
|
1569
1147
|
/**
|
|
1570
1148
|
* Pan the content to make the provided node visible in the viewport.
|
|
1571
1149
|
*/
|
|
1572
|
-
|
|
1573
|
-
|
|
1574
1150
|
async ensureView(node, padding) {
|
|
1575
|
-
let g;
|
|
1576
1151
|
let itemData;
|
|
1577
|
-
this.g.selectAll(childSelector('g')).each(function walk(d) {
|
|
1152
|
+
this.g.selectAll(markmapCommon.childSelector('g')).each(function walk(d) {
|
|
1578
1153
|
if (d.data === node) {
|
|
1579
|
-
g = this;
|
|
1580
1154
|
itemData = d;
|
|
1581
1155
|
}
|
|
1582
1156
|
});
|
|
1583
|
-
if (!
|
|
1157
|
+
if (!itemData) return;
|
|
1584
1158
|
const svgNode = this.svg.node();
|
|
1585
1159
|
const relRect = svgNode.getBoundingClientRect();
|
|
1586
1160
|
const transform = d3__namespace.zoomTransform(svgNode);
|
|
1587
1161
|
const [left, right] = [itemData.y, itemData.y + itemData.ySizeInner + 2].map(x => x * transform.k + transform.x);
|
|
1588
|
-
const [top, bottom] = [itemData.x - itemData.xSize / 2, itemData.x + itemData.xSize / 2].map(y => y * transform.k + transform.y);
|
|
1589
|
-
|
|
1162
|
+
const [top, bottom] = [itemData.x - itemData.xSize / 2, itemData.x + itemData.xSize / 2].map(y => y * transform.k + transform.y);
|
|
1163
|
+
// Skip if the node includes or is included in the container.
|
|
1590
1164
|
const pd = _extends({
|
|
1591
1165
|
left: 0,
|
|
1592
1166
|
right: 0,
|
|
1593
1167
|
top: 0,
|
|
1594
1168
|
bottom: 0
|
|
1595
1169
|
}, padding);
|
|
1596
|
-
|
|
1597
1170
|
const dxs = [pd.left - left, relRect.width - pd.right - right];
|
|
1598
1171
|
const dys = [pd.top - top, relRect.height - pd.bottom - bottom];
|
|
1599
1172
|
const dx = dxs[0] * dxs[1] > 0 ? minBy(dxs, Math.abs) / transform.k : 0;
|
|
1600
1173
|
const dy = dys[0] * dys[1] > 0 ? minBy(dys, Math.abs) / transform.k : 0;
|
|
1601
|
-
|
|
1602
1174
|
if (dx || dy) {
|
|
1603
1175
|
const newTransform = transform.translate(dx, dy);
|
|
1604
|
-
return this.transition(this.svg).call(this.zoom.transform, newTransform).end().catch(noop);
|
|
1176
|
+
return this.transition(this.svg).call(this.zoom.transform, newTransform).end().catch(markmapCommon.noop);
|
|
1605
1177
|
}
|
|
1606
1178
|
}
|
|
1179
|
+
|
|
1607
1180
|
/**
|
|
1608
1181
|
* Scale content with it pinned at the center of the viewport.
|
|
1609
1182
|
*/
|
|
1610
|
-
|
|
1611
|
-
|
|
1612
1183
|
async rescale(scale) {
|
|
1613
1184
|
const svgNode = this.svg.node();
|
|
1614
1185
|
const {
|
|
@@ -1619,9 +1190,8 @@ class Markmap {
|
|
|
1619
1190
|
const halfHeight = offsetHeight / 2;
|
|
1620
1191
|
const transform = d3__namespace.zoomTransform(svgNode);
|
|
1621
1192
|
const newTransform = transform.translate((halfWidth - transform.x) * (1 - scale) / transform.k, (halfHeight - transform.y) * (1 - scale) / transform.k).scale(scale);
|
|
1622
|
-
return this.transition(this.svg).call(this.zoom.transform, newTransform).end().catch(noop);
|
|
1193
|
+
return this.transition(this.svg).call(this.zoom.transform, newTransform).end().catch(markmapCommon.noop);
|
|
1623
1194
|
}
|
|
1624
|
-
|
|
1625
1195
|
destroy() {
|
|
1626
1196
|
this.svg.on('.zoom', null);
|
|
1627
1197
|
this.svg.html(null);
|
|
@@ -1629,10 +1199,8 @@ class Markmap {
|
|
|
1629
1199
|
fn();
|
|
1630
1200
|
});
|
|
1631
1201
|
}
|
|
1632
|
-
|
|
1633
1202
|
static create(svg, opts, data) {
|
|
1634
1203
|
const mm = new Markmap(svg, opts);
|
|
1635
|
-
|
|
1636
1204
|
if (data) {
|
|
1637
1205
|
mm.setData(data);
|
|
1638
1206
|
mm.fit(); // always fit for the first render
|
|
@@ -1640,7 +1208,6 @@ class Markmap {
|
|
|
1640
1208
|
|
|
1641
1209
|
return mm;
|
|
1642
1210
|
}
|
|
1643
|
-
|
|
1644
1211
|
}
|
|
1645
1212
|
Markmap.defaultOptions = {
|
|
1646
1213
|
autoFit: false,
|
|
@@ -1656,7 +1223,8 @@ Markmap.defaultOptions = {
|
|
|
1656
1223
|
spacingVertical: 5,
|
|
1657
1224
|
initialExpandLevel: -1,
|
|
1658
1225
|
zoom: true,
|
|
1659
|
-
pan: true
|
|
1226
|
+
pan: true,
|
|
1227
|
+
toggleRecursively: false
|
|
1660
1228
|
};
|
|
1661
1229
|
function deriveOptions(jsonOptions) {
|
|
1662
1230
|
const opts = {};
|
|
@@ -1665,20 +1233,15 @@ function deriveOptions(jsonOptions) {
|
|
|
1665
1233
|
color,
|
|
1666
1234
|
colorFreezeLevel
|
|
1667
1235
|
} = jsonOptions;
|
|
1668
|
-
|
|
1669
1236
|
if ((color == null ? void 0 : color.length) === 1) {
|
|
1670
1237
|
const solidColor = color[0];
|
|
1671
|
-
|
|
1672
1238
|
opts.color = () => solidColor;
|
|
1673
1239
|
} else if (color != null && color.length) {
|
|
1674
1240
|
const colorFn = d3__namespace.scaleOrdinal(color);
|
|
1675
|
-
|
|
1676
1241
|
opts.color = node => colorFn(`${node.state.path}`);
|
|
1677
1242
|
}
|
|
1678
|
-
|
|
1679
1243
|
if (colorFreezeLevel) {
|
|
1680
1244
|
const color = opts.color || Markmap.defaultOptions.color;
|
|
1681
|
-
|
|
1682
1245
|
opts.color = node => {
|
|
1683
1246
|
node = _extends({}, node, {
|
|
1684
1247
|
state: _extends({}, node.state, {
|
|
@@ -1688,7 +1251,6 @@ function deriveOptions(jsonOptions) {
|
|
|
1688
1251
|
return color(node);
|
|
1689
1252
|
};
|
|
1690
1253
|
}
|
|
1691
|
-
|
|
1692
1254
|
const numberKeys = ['duration', 'maxWidth', 'initialExpandLevel'];
|
|
1693
1255
|
numberKeys.forEach(key => {
|
|
1694
1256
|
const value = jsonOptions[key];
|
|
@@ -1702,12 +1264,10 @@ function deriveOptions(jsonOptions) {
|
|
|
1702
1264
|
return opts;
|
|
1703
1265
|
}
|
|
1704
1266
|
|
|
1267
|
+
exports.loadCSS = markmapCommon.loadCSS;
|
|
1268
|
+
exports.loadJS = markmapCommon.loadJS;
|
|
1705
1269
|
exports.Markmap = Markmap;
|
|
1706
1270
|
exports.defaultColorFn = defaultColorFn;
|
|
1707
1271
|
exports.deriveOptions = deriveOptions;
|
|
1708
1272
|
exports.globalCSS = globalCSS;
|
|
1709
|
-
exports.loadCSS = loadCSS;
|
|
1710
|
-
exports.loadJS = loadJS;
|
|
1711
1273
|
exports.refreshHook = refreshHook;
|
|
1712
|
-
|
|
1713
|
-
})(this.markmap = this.markmap || {}, d3);
|