markmap-toolbar 0.14.4 → 0.15.0-alpha.0
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.umd.js → index.js} +6 -133
- package/dist/{index.esm.js → index.mjs} +2 -87
- package/dist/style.css +65 -1
- package/package.json +19 -7
- package/types/toolbar.d.ts +0 -1
- package/dist/index.umd.min.js +0 -4
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/*! markmap-toolbar v0.
|
|
1
|
+
/*! markmap-toolbar v0.15.0-alpha.0 | MIT License */
|
|
2
2
|
(function (global, factory) {
|
|
3
3
|
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
|
|
4
4
|
typeof define === 'function' && define.amd ? define(['exports'], factory) :
|
|
@@ -6,20 +6,17 @@ typeof define === 'function' && define.amd ? define(['exports'], factory) :
|
|
|
6
6
|
})(this, (function (exports) { 'use strict';
|
|
7
7
|
|
|
8
8
|
function _extends() {
|
|
9
|
-
_extends = Object.assign
|
|
9
|
+
_extends = Object.assign ? Object.assign.bind() : function (target) {
|
|
10
10
|
for (var i = 1; i < arguments.length; i++) {
|
|
11
11
|
var source = arguments[i];
|
|
12
|
-
|
|
13
12
|
for (var key in source) {
|
|
14
13
|
if (Object.prototype.hasOwnProperty.call(source, key)) {
|
|
15
14
|
target[key] = source[key];
|
|
16
15
|
}
|
|
17
16
|
}
|
|
18
17
|
}
|
|
19
|
-
|
|
20
18
|
return target;
|
|
21
19
|
};
|
|
22
|
-
|
|
23
20
|
return _extends.apply(this, arguments);
|
|
24
21
|
}
|
|
25
22
|
|
|
@@ -35,19 +32,15 @@ var NS_ATTRS = {
|
|
|
35
32
|
actuate: XLINK_NS,
|
|
36
33
|
href: XLINK_NS
|
|
37
34
|
};
|
|
38
|
-
|
|
39
35
|
var isLeaf = function isLeaf(c) {
|
|
40
36
|
return typeof c === 'string' || typeof c === 'number';
|
|
41
37
|
};
|
|
42
|
-
|
|
43
38
|
var isElement = function isElement(c) {
|
|
44
39
|
return (c == null ? void 0 : c.vtype) === VTYPE_ELEMENT;
|
|
45
40
|
};
|
|
46
|
-
|
|
47
41
|
var isRenderFunction = function isRenderFunction(c) {
|
|
48
42
|
return (c == null ? void 0 : c.vtype) === VTYPE_FUNCTION;
|
|
49
43
|
};
|
|
50
|
-
|
|
51
44
|
function jsx(type, props) {
|
|
52
45
|
var vtype;
|
|
53
46
|
if (typeof type === 'string') vtype = VTYPE_ELEMENT;else if (typeof type === 'function') vtype = VTYPE_FUNCTION;else throw new Error('Invalid VNode type');
|
|
@@ -57,17 +50,13 @@ function jsx(type, props) {
|
|
|
57
50
|
props: props
|
|
58
51
|
};
|
|
59
52
|
}
|
|
60
|
-
|
|
61
53
|
var jsxs = jsx;
|
|
62
|
-
|
|
63
54
|
function Fragment(props) {
|
|
64
55
|
return props.children;
|
|
65
56
|
}
|
|
66
|
-
|
|
67
57
|
var DEFAULT_ENV = {
|
|
68
58
|
isSvg: false
|
|
69
59
|
};
|
|
70
|
-
|
|
71
60
|
function insertDom(parent, ref) {
|
|
72
61
|
if (ref.type === MOUNT_SINGLE) {
|
|
73
62
|
if (ref.node != null) parent.append(ref.node);
|
|
@@ -79,11 +68,9 @@ function insertDom(parent, ref) {
|
|
|
79
68
|
throw new Error("Unkown ref type " + JSON.stringify(ref));
|
|
80
69
|
}
|
|
81
70
|
}
|
|
82
|
-
|
|
83
71
|
function mountAttributes(domElement, props, env) {
|
|
84
72
|
for (var key in props) {
|
|
85
73
|
if (key === 'key' || key === 'children' || key === 'ref') continue;
|
|
86
|
-
|
|
87
74
|
if (key === 'dangerouslySetInnerHTML') {
|
|
88
75
|
domElement.innerHTML = props[key].__html;
|
|
89
76
|
} else if (key === 'innerHTML' || key === 'textContent' || key === 'innerText') {
|
|
@@ -95,22 +82,18 @@ function mountAttributes(domElement, props, env) {
|
|
|
95
82
|
}
|
|
96
83
|
}
|
|
97
84
|
}
|
|
98
|
-
|
|
99
85
|
var attrMap = {
|
|
100
86
|
className: 'class',
|
|
101
87
|
labelFor: 'for'
|
|
102
88
|
};
|
|
103
|
-
|
|
104
89
|
function setDOMAttribute(el, attr, value, isSVG) {
|
|
105
90
|
attr = attrMap[attr] || attr;
|
|
106
|
-
|
|
107
91
|
if (value === true) {
|
|
108
92
|
el.setAttribute(attr, '');
|
|
109
93
|
} else if (value === false) {
|
|
110
94
|
el.removeAttribute(attr);
|
|
111
95
|
} else {
|
|
112
96
|
var namespace = isSVG ? NS_ATTRS[attr] : undefined;
|
|
113
|
-
|
|
114
97
|
if (namespace !== undefined) {
|
|
115
98
|
el.setAttributeNS(namespace, attr, value);
|
|
116
99
|
} else {
|
|
@@ -118,91 +101,72 @@ function setDOMAttribute(el, attr, value, isSVG) {
|
|
|
118
101
|
}
|
|
119
102
|
}
|
|
120
103
|
}
|
|
121
|
-
|
|
122
104
|
function mount(vnode, env) {
|
|
123
105
|
if (env === void 0) {
|
|
124
106
|
env = DEFAULT_ENV;
|
|
125
107
|
}
|
|
126
|
-
|
|
127
108
|
if (vnode == null || typeof vnode === 'boolean') {
|
|
128
109
|
return {
|
|
129
110
|
type: MOUNT_SINGLE,
|
|
130
111
|
node: null
|
|
131
112
|
};
|
|
132
113
|
}
|
|
133
|
-
|
|
134
114
|
if (vnode instanceof Node) {
|
|
135
115
|
return {
|
|
136
116
|
type: MOUNT_SINGLE,
|
|
137
117
|
node: vnode
|
|
138
118
|
};
|
|
139
119
|
}
|
|
140
|
-
|
|
141
120
|
if (isRenderFunction(vnode)) {
|
|
142
121
|
var _ref = vnode,
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
122
|
+
type = _ref.type,
|
|
123
|
+
props = _ref.props;
|
|
146
124
|
if (type === Fragment) {
|
|
147
125
|
var node = document.createDocumentFragment();
|
|
148
|
-
|
|
149
126
|
if (props.children) {
|
|
150
127
|
var childrenRef = mount(props.children, env);
|
|
151
128
|
insertDom(node, childrenRef);
|
|
152
129
|
}
|
|
153
|
-
|
|
154
130
|
return {
|
|
155
131
|
type: MOUNT_SINGLE,
|
|
156
132
|
node: node
|
|
157
133
|
};
|
|
158
134
|
}
|
|
159
|
-
|
|
160
135
|
var childVNode = type(props);
|
|
161
136
|
return mount(childVNode, env);
|
|
162
137
|
}
|
|
163
|
-
|
|
164
138
|
if (isLeaf(vnode)) {
|
|
165
139
|
return {
|
|
166
140
|
type: MOUNT_SINGLE,
|
|
167
141
|
node: document.createTextNode("" + vnode)
|
|
168
142
|
};
|
|
169
143
|
}
|
|
170
|
-
|
|
171
144
|
if (isElement(vnode)) {
|
|
172
145
|
var _node;
|
|
173
|
-
|
|
174
146
|
var _ref2 = vnode,
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
147
|
+
_type = _ref2.type,
|
|
148
|
+
_props = _ref2.props;
|
|
178
149
|
if (!env.isSvg && _type === 'svg') {
|
|
179
150
|
env = Object.assign({}, env, {
|
|
180
151
|
isSvg: true
|
|
181
152
|
});
|
|
182
153
|
}
|
|
183
|
-
|
|
184
154
|
if (!env.isSvg) {
|
|
185
155
|
_node = document.createElement(_type);
|
|
186
156
|
} else {
|
|
187
157
|
_node = document.createElementNS(SVG_NS, _type);
|
|
188
158
|
}
|
|
189
|
-
|
|
190
159
|
mountAttributes(_node, _props, env);
|
|
191
|
-
|
|
192
160
|
var _childrenRef;
|
|
193
|
-
|
|
194
161
|
if (_props.children) {
|
|
195
162
|
var childEnv = env;
|
|
196
|
-
|
|
197
163
|
if (env.isSvg && _type === 'foreignObject') {
|
|
198
164
|
childEnv = Object.assign({}, childEnv, {
|
|
199
165
|
isSvg: false
|
|
200
166
|
});
|
|
201
167
|
}
|
|
202
|
-
|
|
203
168
|
_childrenRef = mount(_props.children, childEnv);
|
|
204
169
|
}
|
|
205
|
-
|
|
206
170
|
if (_childrenRef != null) insertDom(_node, _childrenRef);
|
|
207
171
|
var ref = _props.ref;
|
|
208
172
|
if (typeof ref === 'function') ref(_node);
|
|
@@ -211,7 +175,6 @@ function mount(vnode, env) {
|
|
|
211
175
|
node: _node
|
|
212
176
|
};
|
|
213
177
|
}
|
|
214
|
-
|
|
215
178
|
if (Array.isArray(vnode)) {
|
|
216
179
|
return {
|
|
217
180
|
type: MOUNT_ARRAY,
|
|
@@ -220,60 +183,34 @@ function mount(vnode, env) {
|
|
|
220
183
|
})
|
|
221
184
|
};
|
|
222
185
|
}
|
|
223
|
-
|
|
224
186
|
throw new Error('mount: Invalid Vnode!');
|
|
225
187
|
}
|
|
226
|
-
|
|
227
188
|
function flattenWithoutNull(array) {
|
|
228
189
|
var result = [];
|
|
229
|
-
|
|
230
190
|
for (var i = 0; i < array.length; i += 1) {
|
|
231
191
|
var item = array[i];
|
|
232
192
|
if (Array.isArray(item)) result = result.concat(flattenWithoutNull(item));else if (item != null) result.push(item);
|
|
233
193
|
}
|
|
234
|
-
|
|
235
194
|
return result;
|
|
236
195
|
}
|
|
237
|
-
|
|
238
196
|
function asDom(result) {
|
|
239
197
|
if (result.type === MOUNT_SINGLE) {
|
|
240
198
|
return result.node;
|
|
241
199
|
}
|
|
242
|
-
|
|
243
200
|
return result.children.map(asDom);
|
|
244
201
|
}
|
|
245
202
|
/**
|
|
246
203
|
* Mount vdom as real DOM nodes.
|
|
247
204
|
*/
|
|
248
205
|
|
|
249
|
-
|
|
250
206
|
function mountDom(vnode) {
|
|
251
207
|
if (Array.isArray(vnode)) {
|
|
252
208
|
return flattenWithoutNull(vnode.map(mountDom));
|
|
253
209
|
}
|
|
254
|
-
|
|
255
210
|
return asDom(mount(vnode));
|
|
256
211
|
}
|
|
257
212
|
|
|
258
|
-
/*! markmap-common v0.14.2 | MIT License */
|
|
259
|
-
|
|
260
|
-
Math.random().toString(36).slice(2, 8);
|
|
261
|
-
|
|
262
|
-
function walkTree(tree, callback, key = 'children') {
|
|
263
|
-
const walk = (item, parent) => callback(item, () => {
|
|
264
|
-
var _item$key;
|
|
265
|
-
|
|
266
|
-
(_item$key = item[key]) == null ? void 0 : _item$key.forEach(child => {
|
|
267
|
-
walk(child, item);
|
|
268
|
-
});
|
|
269
|
-
}, parent);
|
|
270
|
-
|
|
271
|
-
walk(tree);
|
|
272
|
-
}
|
|
273
|
-
|
|
274
213
|
const clsToolbarItem = 'mm-toolbar-item';
|
|
275
|
-
const clsActive = 'active';
|
|
276
|
-
|
|
277
214
|
function renderBrand() {
|
|
278
215
|
return jsxs("a", {
|
|
279
216
|
className: "mm-toolbar-brand",
|
|
@@ -286,7 +223,6 @@ function renderBrand() {
|
|
|
286
223
|
})]
|
|
287
224
|
});
|
|
288
225
|
}
|
|
289
|
-
|
|
290
226
|
function renderItem({
|
|
291
227
|
title,
|
|
292
228
|
content,
|
|
@@ -299,14 +235,11 @@ function renderItem({
|
|
|
299
235
|
children: content
|
|
300
236
|
});
|
|
301
237
|
}
|
|
302
|
-
|
|
303
238
|
let promise;
|
|
304
|
-
|
|
305
239
|
function safeCaller(fn) {
|
|
306
240
|
return async (...args) => {
|
|
307
241
|
if (promise) return;
|
|
308
242
|
promise = fn(...args);
|
|
309
|
-
|
|
310
243
|
try {
|
|
311
244
|
await promise;
|
|
312
245
|
} finally {
|
|
@@ -314,14 +247,12 @@ function safeCaller(fn) {
|
|
|
314
247
|
}
|
|
315
248
|
};
|
|
316
249
|
}
|
|
317
|
-
|
|
318
250
|
class Toolbar {
|
|
319
251
|
static create(mm) {
|
|
320
252
|
const toolbar = new Toolbar();
|
|
321
253
|
toolbar.attach(mm);
|
|
322
254
|
return toolbar.render();
|
|
323
255
|
}
|
|
324
|
-
|
|
325
256
|
static icon(path, attrs = {}) {
|
|
326
257
|
attrs = _extends({
|
|
327
258
|
stroke: 'none',
|
|
@@ -337,7 +268,6 @@ class Toolbar {
|
|
|
337
268
|
}))
|
|
338
269
|
});
|
|
339
270
|
}
|
|
340
|
-
|
|
341
271
|
constructor() {
|
|
342
272
|
this.showBrand = true;
|
|
343
273
|
this.registry = {};
|
|
@@ -360,81 +290,26 @@ class Toolbar {
|
|
|
360
290
|
content: Toolbar.icon('M4 7h2v-2h2v4h-4zM4 13h2v2h2v-4h-4zM16 7h-2v-2h-2v4h4zM16 13h-2v2h-2v-4h4z'),
|
|
361
291
|
onClick: this.getHandler(mm => mm.fit())
|
|
362
292
|
});
|
|
363
|
-
this.register({
|
|
364
|
-
id: 'recurse',
|
|
365
|
-
title: 'Recursively toggle the next node',
|
|
366
|
-
content: Toolbar.icon('M16 4h-12v12h12v-8h-8v4h2v-2h4v4h-8v-8h10z'),
|
|
367
|
-
onClick: e => {
|
|
368
|
-
const button = e.target.closest(`.${clsToolbarItem}`);
|
|
369
|
-
|
|
370
|
-
const toggle = () => button.classList.toggle(clsActive);
|
|
371
|
-
|
|
372
|
-
const active = toggle();
|
|
373
|
-
this.handleRecurse(active, toggle);
|
|
374
|
-
}
|
|
375
|
-
});
|
|
376
293
|
this.setItems(Toolbar.defaultItems);
|
|
377
294
|
}
|
|
378
|
-
|
|
379
295
|
setBrand(show) {
|
|
380
296
|
this.showBrand = show;
|
|
381
297
|
}
|
|
382
|
-
|
|
383
298
|
register(data) {
|
|
384
299
|
this.registry[data.id] = data;
|
|
385
300
|
}
|
|
386
|
-
|
|
387
301
|
getHandler(handle) {
|
|
388
302
|
handle = safeCaller(handle);
|
|
389
303
|
return () => {
|
|
390
304
|
if (this.markmap) handle(this.markmap);
|
|
391
305
|
};
|
|
392
306
|
}
|
|
393
|
-
|
|
394
307
|
setItems(items) {
|
|
395
308
|
this.items = [...items];
|
|
396
309
|
}
|
|
397
|
-
|
|
398
310
|
attach(mm) {
|
|
399
311
|
this.markmap = mm;
|
|
400
312
|
}
|
|
401
|
-
|
|
402
|
-
handleRecurse(active, reset) {
|
|
403
|
-
const mm = this.markmap;
|
|
404
|
-
|
|
405
|
-
if (!active) {
|
|
406
|
-
var _mm$handleClick, _mm$handleClick$__res;
|
|
407
|
-
|
|
408
|
-
(_mm$handleClick = mm.handleClick) == null ? void 0 : (_mm$handleClick$__res = _mm$handleClick['__reset']) == null ? void 0 : _mm$handleClick$__res.call(_mm$handleClick);
|
|
409
|
-
return;
|
|
410
|
-
}
|
|
411
|
-
|
|
412
|
-
const originalClick = mm.handleClick;
|
|
413
|
-
if (!originalClick) return;
|
|
414
|
-
|
|
415
|
-
const handleClick = (_, d) => {
|
|
416
|
-
var _d$data$payload;
|
|
417
|
-
|
|
418
|
-
const fold = (_d$data$payload = d.data.payload) != null && _d$data$payload.fold ? 0 : 1;
|
|
419
|
-
walkTree(d.data, (item, next) => {
|
|
420
|
-
item.payload = _extends({}, item.payload, {
|
|
421
|
-
fold
|
|
422
|
-
});
|
|
423
|
-
next();
|
|
424
|
-
});
|
|
425
|
-
mm.renderData(d.data);
|
|
426
|
-
reset();
|
|
427
|
-
|
|
428
|
-
handleClick.__reset();
|
|
429
|
-
};
|
|
430
|
-
|
|
431
|
-
handleClick.__reset = () => {
|
|
432
|
-
mm.handleClick = originalClick;
|
|
433
|
-
};
|
|
434
|
-
|
|
435
|
-
mm.handleClick = handleClick;
|
|
436
|
-
}
|
|
437
|
-
|
|
438
313
|
render() {
|
|
439
314
|
const items = this.items.map(item => {
|
|
440
315
|
if (typeof item === 'string') {
|
|
@@ -442,7 +317,6 @@ class Toolbar {
|
|
|
442
317
|
if (!data) console.warn(`[markmap-toolbar] ${item} not found`);
|
|
443
318
|
return data;
|
|
444
319
|
}
|
|
445
|
-
|
|
446
320
|
return item;
|
|
447
321
|
}).filter(Boolean);
|
|
448
322
|
return mountDom(jsxs("div", {
|
|
@@ -450,7 +324,6 @@ class Toolbar {
|
|
|
450
324
|
children: [this.showBrand && renderBrand(), items.map(renderItem)]
|
|
451
325
|
}));
|
|
452
326
|
}
|
|
453
|
-
|
|
454
327
|
}
|
|
455
328
|
Toolbar.defaultItems = ['zoomIn', 'zoomOut', 'fit', 'recurse'];
|
|
456
329
|
|
|
@@ -1,44 +1,23 @@
|
|
|
1
|
-
/*! markmap-toolbar v0.
|
|
1
|
+
/*! markmap-toolbar v0.15.0-alpha.0 | MIT License */
|
|
2
2
|
import { mountDom } from '@gera2ld/jsx-dom';
|
|
3
3
|
import { jsx, jsxs } from '@gera2ld/jsx-dom/jsx-runtime';
|
|
4
4
|
|
|
5
5
|
function _extends() {
|
|
6
|
-
_extends = Object.assign
|
|
6
|
+
_extends = Object.assign ? Object.assign.bind() : function (target) {
|
|
7
7
|
for (var i = 1; i < arguments.length; i++) {
|
|
8
8
|
var source = arguments[i];
|
|
9
|
-
|
|
10
9
|
for (var key in source) {
|
|
11
10
|
if (Object.prototype.hasOwnProperty.call(source, key)) {
|
|
12
11
|
target[key] = source[key];
|
|
13
12
|
}
|
|
14
13
|
}
|
|
15
14
|
}
|
|
16
|
-
|
|
17
15
|
return target;
|
|
18
16
|
};
|
|
19
|
-
|
|
20
17
|
return _extends.apply(this, arguments);
|
|
21
18
|
}
|
|
22
19
|
|
|
23
|
-
/*! markmap-common v0.14.2 | MIT License */
|
|
24
|
-
|
|
25
|
-
Math.random().toString(36).slice(2, 8);
|
|
26
|
-
|
|
27
|
-
function walkTree(tree, callback, key = 'children') {
|
|
28
|
-
const walk = (item, parent) => callback(item, () => {
|
|
29
|
-
var _item$key;
|
|
30
|
-
|
|
31
|
-
(_item$key = item[key]) == null ? void 0 : _item$key.forEach(child => {
|
|
32
|
-
walk(child, item);
|
|
33
|
-
});
|
|
34
|
-
}, parent);
|
|
35
|
-
|
|
36
|
-
walk(tree);
|
|
37
|
-
}
|
|
38
|
-
|
|
39
20
|
const clsToolbarItem = 'mm-toolbar-item';
|
|
40
|
-
const clsActive = 'active';
|
|
41
|
-
|
|
42
21
|
function renderBrand() {
|
|
43
22
|
return jsxs("a", {
|
|
44
23
|
className: "mm-toolbar-brand",
|
|
@@ -51,7 +30,6 @@ function renderBrand() {
|
|
|
51
30
|
})]
|
|
52
31
|
});
|
|
53
32
|
}
|
|
54
|
-
|
|
55
33
|
function renderItem({
|
|
56
34
|
title,
|
|
57
35
|
content,
|
|
@@ -64,14 +42,11 @@ function renderItem({
|
|
|
64
42
|
children: content
|
|
65
43
|
});
|
|
66
44
|
}
|
|
67
|
-
|
|
68
45
|
let promise;
|
|
69
|
-
|
|
70
46
|
function safeCaller(fn) {
|
|
71
47
|
return async (...args) => {
|
|
72
48
|
if (promise) return;
|
|
73
49
|
promise = fn(...args);
|
|
74
|
-
|
|
75
50
|
try {
|
|
76
51
|
await promise;
|
|
77
52
|
} finally {
|
|
@@ -79,14 +54,12 @@ function safeCaller(fn) {
|
|
|
79
54
|
}
|
|
80
55
|
};
|
|
81
56
|
}
|
|
82
|
-
|
|
83
57
|
class Toolbar {
|
|
84
58
|
static create(mm) {
|
|
85
59
|
const toolbar = new Toolbar();
|
|
86
60
|
toolbar.attach(mm);
|
|
87
61
|
return toolbar.render();
|
|
88
62
|
}
|
|
89
|
-
|
|
90
63
|
static icon(path, attrs = {}) {
|
|
91
64
|
attrs = _extends({
|
|
92
65
|
stroke: 'none',
|
|
@@ -102,7 +75,6 @@ class Toolbar {
|
|
|
102
75
|
}))
|
|
103
76
|
});
|
|
104
77
|
}
|
|
105
|
-
|
|
106
78
|
constructor() {
|
|
107
79
|
this.showBrand = true;
|
|
108
80
|
this.registry = {};
|
|
@@ -125,81 +97,26 @@ class Toolbar {
|
|
|
125
97
|
content: Toolbar.icon('M4 7h2v-2h2v4h-4zM4 13h2v2h2v-4h-4zM16 7h-2v-2h-2v4h4zM16 13h-2v2h-2v-4h4z'),
|
|
126
98
|
onClick: this.getHandler(mm => mm.fit())
|
|
127
99
|
});
|
|
128
|
-
this.register({
|
|
129
|
-
id: 'recurse',
|
|
130
|
-
title: 'Recursively toggle the next node',
|
|
131
|
-
content: Toolbar.icon('M16 4h-12v12h12v-8h-8v4h2v-2h4v4h-8v-8h10z'),
|
|
132
|
-
onClick: e => {
|
|
133
|
-
const button = e.target.closest(`.${clsToolbarItem}`);
|
|
134
|
-
|
|
135
|
-
const toggle = () => button.classList.toggle(clsActive);
|
|
136
|
-
|
|
137
|
-
const active = toggle();
|
|
138
|
-
this.handleRecurse(active, toggle);
|
|
139
|
-
}
|
|
140
|
-
});
|
|
141
100
|
this.setItems(Toolbar.defaultItems);
|
|
142
101
|
}
|
|
143
|
-
|
|
144
102
|
setBrand(show) {
|
|
145
103
|
this.showBrand = show;
|
|
146
104
|
}
|
|
147
|
-
|
|
148
105
|
register(data) {
|
|
149
106
|
this.registry[data.id] = data;
|
|
150
107
|
}
|
|
151
|
-
|
|
152
108
|
getHandler(handle) {
|
|
153
109
|
handle = safeCaller(handle);
|
|
154
110
|
return () => {
|
|
155
111
|
if (this.markmap) handle(this.markmap);
|
|
156
112
|
};
|
|
157
113
|
}
|
|
158
|
-
|
|
159
114
|
setItems(items) {
|
|
160
115
|
this.items = [...items];
|
|
161
116
|
}
|
|
162
|
-
|
|
163
117
|
attach(mm) {
|
|
164
118
|
this.markmap = mm;
|
|
165
119
|
}
|
|
166
|
-
|
|
167
|
-
handleRecurse(active, reset) {
|
|
168
|
-
const mm = this.markmap;
|
|
169
|
-
|
|
170
|
-
if (!active) {
|
|
171
|
-
var _mm$handleClick, _mm$handleClick$__res;
|
|
172
|
-
|
|
173
|
-
(_mm$handleClick = mm.handleClick) == null ? void 0 : (_mm$handleClick$__res = _mm$handleClick['__reset']) == null ? void 0 : _mm$handleClick$__res.call(_mm$handleClick);
|
|
174
|
-
return;
|
|
175
|
-
}
|
|
176
|
-
|
|
177
|
-
const originalClick = mm.handleClick;
|
|
178
|
-
if (!originalClick) return;
|
|
179
|
-
|
|
180
|
-
const handleClick = (_, d) => {
|
|
181
|
-
var _d$data$payload;
|
|
182
|
-
|
|
183
|
-
const fold = (_d$data$payload = d.data.payload) != null && _d$data$payload.fold ? 0 : 1;
|
|
184
|
-
walkTree(d.data, (item, next) => {
|
|
185
|
-
item.payload = _extends({}, item.payload, {
|
|
186
|
-
fold
|
|
187
|
-
});
|
|
188
|
-
next();
|
|
189
|
-
});
|
|
190
|
-
mm.renderData(d.data);
|
|
191
|
-
reset();
|
|
192
|
-
|
|
193
|
-
handleClick.__reset();
|
|
194
|
-
};
|
|
195
|
-
|
|
196
|
-
handleClick.__reset = () => {
|
|
197
|
-
mm.handleClick = originalClick;
|
|
198
|
-
};
|
|
199
|
-
|
|
200
|
-
mm.handleClick = handleClick;
|
|
201
|
-
}
|
|
202
|
-
|
|
203
120
|
render() {
|
|
204
121
|
const items = this.items.map(item => {
|
|
205
122
|
if (typeof item === 'string') {
|
|
@@ -207,7 +124,6 @@ class Toolbar {
|
|
|
207
124
|
if (!data) console.warn(`[markmap-toolbar] ${item} not found`);
|
|
208
125
|
return data;
|
|
209
126
|
}
|
|
210
|
-
|
|
211
127
|
return item;
|
|
212
128
|
}).filter(Boolean);
|
|
213
129
|
return mountDom(jsxs("div", {
|
|
@@ -215,7 +131,6 @@ class Toolbar {
|
|
|
215
131
|
children: [this.showBrand && renderBrand(), items.map(renderItem)]
|
|
216
132
|
}));
|
|
217
133
|
}
|
|
218
|
-
|
|
219
134
|
}
|
|
220
135
|
Toolbar.defaultItems = ['zoomIn', 'zoomOut', 'fit', 'recurse'];
|
|
221
136
|
|
package/dist/style.css
CHANGED
|
@@ -1 +1,65 @@
|
|
|
1
|
-
.mm-toolbar
|
|
1
|
+
.mm-toolbar {
|
|
2
|
+
display: flex;
|
|
3
|
+
-moz-user-select: none;
|
|
4
|
+
user-select: none;
|
|
5
|
+
align-items: center;
|
|
6
|
+
border-radius: 0.25rem;
|
|
7
|
+
border-width: 1px;
|
|
8
|
+
border-style: solid;
|
|
9
|
+
--tw-border-opacity: 1;
|
|
10
|
+
border-color: rgb(209 213 219 / var(--tw-border-opacity));
|
|
11
|
+
--tw-bg-opacity: 1;
|
|
12
|
+
background-color: rgb(255 255 255 / var(--tw-bg-opacity));
|
|
13
|
+
padding: 0.25rem;
|
|
14
|
+
line-height: 1
|
|
15
|
+
}
|
|
16
|
+
.mm-toolbar:hover {
|
|
17
|
+
--tw-border-opacity: 1;
|
|
18
|
+
border-color: rgb(156 163 175 / var(--tw-border-opacity))
|
|
19
|
+
}
|
|
20
|
+
.mm-toolbar svg {
|
|
21
|
+
display: block
|
|
22
|
+
}
|
|
23
|
+
.mm-toolbar a {
|
|
24
|
+
display: inline-block;
|
|
25
|
+
text-decoration-line: none
|
|
26
|
+
}
|
|
27
|
+
.mm-toolbar-brand > img {
|
|
28
|
+
height: 1rem;
|
|
29
|
+
width: 1rem;
|
|
30
|
+
vertical-align: middle
|
|
31
|
+
}
|
|
32
|
+
.mm-toolbar-brand > span {
|
|
33
|
+
padding-left: 0.25rem;
|
|
34
|
+
padding-right: 0.25rem
|
|
35
|
+
}
|
|
36
|
+
.mm-toolbar-brand:not(:first-child), .mm-toolbar-item:not(:first-child) {
|
|
37
|
+
margin-left: 0.25rem
|
|
38
|
+
}
|
|
39
|
+
.mm-toolbar-brand > *, .mm-toolbar-item > * {
|
|
40
|
+
cursor: pointer;
|
|
41
|
+
text-align: center;
|
|
42
|
+
font-size: 0.75rem;
|
|
43
|
+
line-height: 1rem;
|
|
44
|
+
--tw-text-opacity: 1;
|
|
45
|
+
color: rgb(156 163 175 / var(--tw-text-opacity));
|
|
46
|
+
min-width: 20px;
|
|
47
|
+
height: 20px;
|
|
48
|
+
line-height: 20px
|
|
49
|
+
}
|
|
50
|
+
.mm-toolbar-brand.active,
|
|
51
|
+
.mm-toolbar-brand:hover,
|
|
52
|
+
.mm-toolbar-item.active,
|
|
53
|
+
.mm-toolbar-item:hover {
|
|
54
|
+
border-radius: 0.25rem;
|
|
55
|
+
--tw-bg-opacity: 1;
|
|
56
|
+
background-color: rgb(229 231 235 / var(--tw-bg-opacity))
|
|
57
|
+
}
|
|
58
|
+
.mm-toolbar-brand.active > *, .mm-toolbar-brand:hover > *, .mm-toolbar-item.active > *, .mm-toolbar-item:hover > * {
|
|
59
|
+
--tw-text-opacity: 1;
|
|
60
|
+
color: rgb(31 41 55 / var(--tw-text-opacity))
|
|
61
|
+
}
|
|
62
|
+
.mm-toolbar-brand.active, .mm-toolbar-item.active {
|
|
63
|
+
--tw-bg-opacity: 1;
|
|
64
|
+
background-color: rgb(209 213 219 / var(--tw-bg-opacity))
|
|
65
|
+
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "markmap-toolbar",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.15.0-alpha.0",
|
|
4
4
|
"description": "Extensible toolbar for markmap",
|
|
5
5
|
"author": "Gerald <gera2ld@live.com>",
|
|
6
6
|
"license": "MIT",
|
|
@@ -10,10 +10,10 @@
|
|
|
10
10
|
"build:types": "tsc",
|
|
11
11
|
"build:js": "rollup -c rollup.conf.js"
|
|
12
12
|
},
|
|
13
|
-
"main": "dist/index.
|
|
14
|
-
"module": "dist/index.
|
|
15
|
-
"unpkg": "dist/index.
|
|
16
|
-
"jsdelivr": "dist/index.
|
|
13
|
+
"main": "dist/index.js",
|
|
14
|
+
"module": "dist/index.mjs",
|
|
15
|
+
"unpkg": "dist/index.js",
|
|
16
|
+
"jsdelivr": "dist/index.js",
|
|
17
17
|
"files": [
|
|
18
18
|
"dist",
|
|
19
19
|
"types"
|
|
@@ -22,13 +22,25 @@
|
|
|
22
22
|
"access": "public",
|
|
23
23
|
"registry": "https://registry.npmjs.org/"
|
|
24
24
|
},
|
|
25
|
+
"homepage": "https://github.com/markmap/markmap/packages/markmap-toolbar#readme",
|
|
26
|
+
"repository": {
|
|
27
|
+
"type": "git",
|
|
28
|
+
"url": "git+https://github.com/markmap/markmap.git"
|
|
29
|
+
},
|
|
30
|
+
"bugs": {
|
|
31
|
+
"url": "https://github.com/markmap/markmap/issues"
|
|
32
|
+
},
|
|
25
33
|
"typings": "types/index.d.ts",
|
|
34
|
+
"peerDependencies": {
|
|
35
|
+
"markmap-common": "*"
|
|
36
|
+
},
|
|
26
37
|
"devDependencies": {
|
|
27
|
-
"markmap-
|
|
38
|
+
"markmap-common": "0.15.0-alpha.0",
|
|
39
|
+
"markmap-view": "0.15.0-alpha.0"
|
|
28
40
|
},
|
|
29
41
|
"dependencies": {
|
|
30
42
|
"@babel/runtime": "^7.16.3",
|
|
31
43
|
"@gera2ld/jsx-dom": "^2.1.1"
|
|
32
44
|
},
|
|
33
|
-
"gitHead": "
|
|
45
|
+
"gitHead": "cea14d4791b8483481a99baa5d256017f52f267c"
|
|
34
46
|
}
|
package/types/toolbar.d.ts
CHANGED
|
@@ -23,7 +23,6 @@ export declare class Toolbar {
|
|
|
23
23
|
getHandler(handle: (mm: Markmap) => Promise<void>): () => void;
|
|
24
24
|
setItems(items: (string | IToolbarItem)[]): void;
|
|
25
25
|
attach(mm: Markmap): void;
|
|
26
|
-
handleRecurse(active: boolean, reset: () => void): void;
|
|
27
26
|
render(): Node;
|
|
28
27
|
}
|
|
29
28
|
export {};
|
package/dist/index.umd.min.js
DELETED
|
@@ -1,4 +0,0 @@
|
|
|
1
|
-
/*! markmap-toolbar v0.14.4 | MIT License */
|
|
2
|
-
!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports):"function"==typeof define&&define.amd?define(["exports"],e):e((t="undefined"!=typeof globalThis?globalThis:t||self).markmap=t.markmap||{})}(this,(function(t){"use strict";function e(){return e=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var r=arguments[e];for(var A in r)Object.prototype.hasOwnProperty.call(r,A)&&(t[A]=r[A])}return t},e.apply(this,arguments)}
|
|
3
|
-
/*! @gera2ld/jsx-dom v2.1.1 | ISC License */var r="http://www.w3.org/1999/xlink",A={show:r,actuate:r,href:r};function n(t,e){var r;if("string"==typeof t)r=1;else{if("function"!=typeof t)throw new Error("Invalid VNode type");r=2}return{vtype:r,type:t,props:e}}var i=n;function o(t){return t.children}var a={isSvg:!1};function s(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){s(t,e)}))}}var l={className:"class",labelFor:"for"};function h(t,e,r,n){if(e=l[e]||e,!0===r)t.setAttribute(e,"");else if(!1===r)t.removeAttribute(e);else{var i=n?A[e]:void 0;void 0!==i?t.setAttributeNS(i,e,r):t.setAttribute(e,r)}}function c(t,e){if(void 0===e&&(e=a),null==t||"boolean"==typeof t)return{type:1,node:null};if(t instanceof Node)return{type:1,node:t};if(2===(null==(l=t)?void 0:l.vtype)){var r=t,A=r.type,n=r.props;if(A===o){var i=document.createDocumentFragment();if(n.children)s(i,c(n.children,e));return{type:1,node:i}}return c(A(n),e)}var l;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 d,u,v=t,f=v.type,g=v.props;if(e.isSvg||"svg"!==f||(e=Object.assign({},e,{isSvg:!0})),function(t,e,r){for(var A in e)"key"!==A&&"children"!==A&&"ref"!==A&&("dangerouslySetInnerHTML"===A?t.innerHTML=e[A].__html:"innerHTML"===A||"textContent"===A||"innerText"===A?t[A]=e[A]:A.startsWith("on")?t[A.toLowerCase()]=e[A]:h(t,A,e[A],r.isSvg))}(d=e.isSvg?document.createElementNS("http://www.w3.org/2000/svg",f):document.createElement(f),g,e),g.children){var p=e;e.isSvg&&"foreignObject"===f&&(p=Object.assign({},p,{isSvg:!1})),u=c(g.children,p)}null!=u&&s(d,u);var m=g.ref;return"function"==typeof m&&m(d),{type:1,node:d}}if(Array.isArray(t))return{type:4,children:t.map((function(t){return c(t,e)}))};throw new Error("mount: Invalid Vnode!")}function d(t){for(var e=[],r=0;r<t.length;r+=1){var A=t[r];Array.isArray(A)?e=e.concat(d(A)):null!=A&&e.push(A)}return e}function u(t){return 1===t.type?t.node:t.children.map(u)}function v(t){return Array.isArray(t)?d(t.map(v)):u(c(t))}
|
|
4
|
-
/*! markmap-common v0.14.2 | MIT License */Math.random().toString(36).slice(2,8);const f="mm-toolbar-item";function g({title:t,content:e,onClick:r}){return n("div",{className:f,title:t,onClick:r,children:e})}let p;class m{static create(t){const e=new m;return e.attach(t),e.render()}static icon(t,r={}){return r=e({stroke:"none",fill:"currentColor","fill-rule":"evenodd"},r),n("svg",{width:"20",height:"20",viewBox:"0 0 20 20",children:n("path",e({},r,{d:t}))})}constructor(){this.showBrand=!0,this.registry={},this.markmap=null,this.register({id:"zoomIn",title:"Zoom in",content:m.icon("M9 5v4h-4v2h4v4h2v-4h4v-2h-4v-4z"),onClick:this.getHandler((t=>t.rescale(1.25)))}),this.register({id:"zoomOut",title:"Zoom out",content:m.icon("M5 9h10v2h-10z"),onClick:this.getHandler((t=>t.rescale(.8)))}),this.register({id:"fit",title:"Fit window size",content:m.icon("M4 7h2v-2h2v4h-4zM4 13h2v2h2v-4h-4zM16 7h-2v-2h-2v4h4zM16 13h-2v2h-2v-4h4z"),onClick:this.getHandler((t=>t.fit()))}),this.register({id:"recurse",title:"Recursively toggle the next node",content:m.icon("M16 4h-12v12h12v-8h-8v4h2v-2h4v4h-8v-8h10z"),onClick:t=>{const e=t.target.closest(".mm-toolbar-item"),r=()=>e.classList.toggle("active"),A=r();this.handleRecurse(A,r)}}),this.setItems(m.defaultItems)}setBrand(t){this.showBrand=t}register(t){this.registry[t.id]=t}getHandler(t){var e;return e=t,t=async(...t)=>{if(!p){p=e(...t);try{await p}finally{p=null}}},()=>{this.markmap&&t(this.markmap)}}setItems(t){this.items=[...t]}attach(t){this.markmap=t}handleRecurse(t,r){const A=this.markmap;var n,i;if(!t)return void(null==(n=A.handleClick)||null==(i=n.__reset)||i.call(n));const o=A.handleClick;if(!o)return;const a=(t,n)=>{var i;const o=null!=(i=n.data.payload)&&i.fold?0:1;!function(t,e,r="children"){const A=(t,n)=>e(t,(()=>{var e;null==(e=t[r])||e.forEach((e=>{A(e,t)}))}),n);A(t)}(n.data,((t,r)=>{t.payload=e({},t.payload,{fold:o}),r()})),A.renderData(n.data),r(),a.__reset()};a.__reset=()=>{A.handleClick=o},A.handleClick=a}render(){const t=this.items.map((t=>{if("string"==typeof t){const e=this.registry[t];return e||console.warn(`[markmap-toolbar] ${t} not found`),e}return t})).filter(Boolean);return v(i("div",{className:"mm-toolbar",children:[this.showBrand&&i("a",{className:"mm-toolbar-brand",href:"https://markmap.js.org/",children:[n("img",{alt:"markmap",src:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAACoFBMVEUAAAAAAAD//wAAAACAgAD//wAAAABVVQCqqgBAQACAQACAgABmZgBtbQAAAABgQABgYAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAaFQAAAAAAAAAAAAAAAAAHAAARBQIdGAIYEwI/OgJYUQUfHQI+OgJDPgJJRARBPQRJQgRRSwRRTQRIQQRUTgRUUARZUgRSTQRPSQRjWgZORQRfWQZsZAhTTQRNRwRWUAZkXAZOSARUTgZPRwRRSQRoYwZWUQZWTgRbUwZmXQZoXghmXwdqYwdsYwdfVwVmXQdqYgdiWgVpYAl3bgl6cgl4cAqLggw8OAOWjA2Uig1OSAR2bQihlg55cAh5cAh6cQmMgwyOhAyUjA2QhQ2Uiw2Viw2soBCflA+voxGwpRGhlg+hlg+snxGroBGjmBCpnBC0pxKyphKxpRG2qhK0qBK5rBK5rBP/7h3/8B7/8R3/8h3/8R7/8h786x397B3+7R3EtxT66Rz66hz76hz86xz96xz97Bz+7Rz45xz56Bz76hz97Bz97B3MvRX15Rv25Rv45xz66Rz76hz97B3+7R3IuxX05Bv15Bv25Rz56Bz66Ry/sxPAsxPCtRTCthTNvxbZyxfczxfi0xjl1Rnn2Bnr2xrr3Brs3Rru3Rru3xrv3hrw3xrx4Bvx4Rvy4hvz4hvz4xv04xv05Bv14xv15Bv15Rv25Bv25Rv25Rz25hv35hv35xv45xv45xz55xz56Bv56Bz66Rv66Rz76Rv76Rz76hz86hv86xz+7h3/7R3/7h3/7x3/8B3/8B7/8R3/8R4Yqhj5AAAAq3RSTlMAAQECAgIDAwMEBAQFBwgICAwQERITFRYXGBkbHB0eHyQlJyguNTg8RUZISU5PV2FiY2RlZmdqa2xubnJzc3R2d3d3eXl5eXp7fH1+gIGCgoKDg4SEhIWGh4eHiYmJjIyMjZSUlJ+sra+zt7i4uru8ztHV1tbW2d7g4OHi4uPk5ufp7Ozv9fX29/f3+Pj6+vr7+/v7+/v7+/z8/Pz8/f39/f39/f3+/v7+/v7K6J1dAAACHklEQVQ4y2NgwAoYWdi5uLm5GXHIcrLCmMzYpDmAhKCKjoGtp40MFhVsDAwSxmmVEzZu2XvqSLkchjw3g0h445Ybd24vmTN1Usd5X3R5DgaNqgN35sycP2/GxMkTMRVwMOivvtO3YsWUm3duX790EcMKdgbNNXdnnJh1+9T6ipzU+FB0RzIyiFYB5WdfaElUF8TmTQ6GwH39J2bvypMHcpg4MAKKkUGo5s6KWRfyGRh4WJClGEGBCgS8DLobliy/3abMwM8NBYwQjXDgf3ryxOspyKYyg+RFTFwdnYDAzbrw+oLFm9Ot3J3AwNHFTBykQrhg++GDh48cOXzk4P6VZy8s230MyAGCwwcP7iyRBJpiur1n8hQIWHX27NkLi6bAwOSuow5ABeY7OydOhoCFIAULe6E8YFCf8QAqEC86evniZTA4tfLsuRXHr0E4ly9ePF0uC3KnpH1MZBQQxPoVgxyZ5RMdBQaRMc6yIEcihWbQGaA3k9G8CfQoN0pAtSoxCMACihk9qGtBQZ2LHtRIkRUMiqwd2TJADiswsrjQlAGju/o+MLrPNkWo8mFN1ewMWmvBCebQ0rKMJG87QzF0FRwMRuvugpLcrXu3rp7Zs61UCtMZ2nVHbk+fMX/+jMmTp3Sf9MLiULG45q237txaPG3yxPYrYQzYMo60RWbD3E27Ll68Uq+AK+uJqOlZBiSEKGLNnMA0iDfzwrI/NKgBOivk9piPdtUAAAAASUVORK5CYII="}),n("span",{children:"markmap"})]}),t.map(g)]}))}}m.defaultItems=["zoomIn","zoomOut","fit","recurse"],t.Toolbar=m}));
|