markmap-toolbar 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/README.md +1 -1
- package/dist/{index.umd.js → index.js} +23 -127
- package/dist/{index.esm.js → index.mjs} +20 -82
- package/dist/style.css +65 -1
- package/package.json +19 -7
- package/types/toolbar.d.ts +6 -7
- package/dist/index.umd.min.js +0 -4
package/README.md
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/*! markmap-toolbar v0.14.
|
|
1
|
+
/*! markmap-toolbar v0.14.5-alpha.13+50ca560 | 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,35 @@ 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
214
|
const clsActive = 'active';
|
|
276
|
-
|
|
277
215
|
function renderBrand() {
|
|
278
216
|
return jsxs("a", {
|
|
279
217
|
className: "mm-toolbar-brand",
|
|
@@ -286,7 +224,6 @@ function renderBrand() {
|
|
|
286
224
|
})]
|
|
287
225
|
});
|
|
288
226
|
}
|
|
289
|
-
|
|
290
227
|
function renderItem({
|
|
291
228
|
title,
|
|
292
229
|
content,
|
|
@@ -299,14 +236,11 @@ function renderItem({
|
|
|
299
236
|
children: content
|
|
300
237
|
});
|
|
301
238
|
}
|
|
302
|
-
|
|
303
239
|
let promise;
|
|
304
|
-
|
|
305
240
|
function safeCaller(fn) {
|
|
306
241
|
return async (...args) => {
|
|
307
242
|
if (promise) return;
|
|
308
243
|
promise = fn(...args);
|
|
309
|
-
|
|
310
244
|
try {
|
|
311
245
|
await promise;
|
|
312
246
|
} finally {
|
|
@@ -314,14 +248,13 @@ function safeCaller(fn) {
|
|
|
314
248
|
}
|
|
315
249
|
};
|
|
316
250
|
}
|
|
317
|
-
|
|
318
251
|
class Toolbar {
|
|
319
252
|
static create(mm) {
|
|
320
253
|
const toolbar = new Toolbar();
|
|
321
254
|
toolbar.attach(mm);
|
|
322
|
-
|
|
255
|
+
toolbar.render();
|
|
256
|
+
return toolbar;
|
|
323
257
|
}
|
|
324
|
-
|
|
325
258
|
static icon(path, attrs = {}) {
|
|
326
259
|
attrs = _extends({
|
|
327
260
|
stroke: 'none',
|
|
@@ -337,11 +270,13 @@ class Toolbar {
|
|
|
337
270
|
}))
|
|
338
271
|
});
|
|
339
272
|
}
|
|
340
|
-
|
|
341
273
|
constructor() {
|
|
342
274
|
this.showBrand = true;
|
|
343
275
|
this.registry = {};
|
|
344
276
|
this.markmap = null;
|
|
277
|
+
this.el = mountDom(jsx("div", {
|
|
278
|
+
className: "mm-toolbar"
|
|
279
|
+
}));
|
|
345
280
|
this.register({
|
|
346
281
|
id: 'zoomIn',
|
|
347
282
|
title: 'Zoom in',
|
|
@@ -366,75 +301,35 @@ class Toolbar {
|
|
|
366
301
|
content: Toolbar.icon('M16 4h-12v12h12v-8h-8v4h2v-2h4v4h-8v-8h10z'),
|
|
367
302
|
onClick: e => {
|
|
368
303
|
const button = e.target.closest(`.${clsToolbarItem}`);
|
|
369
|
-
|
|
370
304
|
const toggle = () => button.classList.toggle(clsActive);
|
|
371
|
-
|
|
372
305
|
const active = toggle();
|
|
373
|
-
this.
|
|
306
|
+
this.markmap.setOptions({
|
|
307
|
+
toggleRecursively: active
|
|
308
|
+
});
|
|
374
309
|
}
|
|
375
310
|
});
|
|
376
|
-
this.
|
|
311
|
+
this.items = Toolbar.defaultItems;
|
|
377
312
|
}
|
|
378
|
-
|
|
379
313
|
setBrand(show) {
|
|
380
314
|
this.showBrand = show;
|
|
315
|
+
return this.render();
|
|
381
316
|
}
|
|
382
|
-
|
|
383
317
|
register(data) {
|
|
384
318
|
this.registry[data.id] = data;
|
|
385
319
|
}
|
|
386
|
-
|
|
387
320
|
getHandler(handle) {
|
|
388
321
|
handle = safeCaller(handle);
|
|
389
322
|
return () => {
|
|
390
323
|
if (this.markmap) handle(this.markmap);
|
|
391
324
|
};
|
|
392
325
|
}
|
|
393
|
-
|
|
394
326
|
setItems(items) {
|
|
395
327
|
this.items = [...items];
|
|
328
|
+
return this.render();
|
|
396
329
|
}
|
|
397
|
-
|
|
398
330
|
attach(mm) {
|
|
399
331
|
this.markmap = mm;
|
|
400
332
|
}
|
|
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
333
|
render() {
|
|
439
334
|
const items = this.items.map(item => {
|
|
440
335
|
if (typeof item === 'string') {
|
|
@@ -442,15 +337,16 @@ class Toolbar {
|
|
|
442
337
|
if (!data) console.warn(`[markmap-toolbar] ${item} not found`);
|
|
443
338
|
return data;
|
|
444
339
|
}
|
|
445
|
-
|
|
446
340
|
return item;
|
|
447
341
|
}).filter(Boolean);
|
|
448
|
-
|
|
449
|
-
|
|
342
|
+
while (this.el.firstChild) {
|
|
343
|
+
this.el.firstChild.remove();
|
|
344
|
+
}
|
|
345
|
+
this.el.append(mountDom(jsxs(Fragment, {
|
|
450
346
|
children: [this.showBrand && renderBrand(), items.map(renderItem)]
|
|
451
|
-
}));
|
|
347
|
+
})));
|
|
348
|
+
return this.el;
|
|
452
349
|
}
|
|
453
|
-
|
|
454
350
|
}
|
|
455
351
|
Toolbar.defaultItems = ['zoomIn', 'zoomOut', 'fit', 'recurse'];
|
|
456
352
|
|
|
@@ -1,44 +1,24 @@
|
|
|
1
|
-
/*! markmap-toolbar v0.14.
|
|
1
|
+
/*! markmap-toolbar v0.14.5-alpha.13+50ca560 | MIT License */
|
|
2
2
|
import { mountDom } from '@gera2ld/jsx-dom';
|
|
3
|
-
import { jsx, jsxs } from '@gera2ld/jsx-dom/jsx-runtime';
|
|
3
|
+
import { jsx, jsxs, Fragment } 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
21
|
const clsActive = 'active';
|
|
41
|
-
|
|
42
22
|
function renderBrand() {
|
|
43
23
|
return jsxs("a", {
|
|
44
24
|
className: "mm-toolbar-brand",
|
|
@@ -51,7 +31,6 @@ function renderBrand() {
|
|
|
51
31
|
})]
|
|
52
32
|
});
|
|
53
33
|
}
|
|
54
|
-
|
|
55
34
|
function renderItem({
|
|
56
35
|
title,
|
|
57
36
|
content,
|
|
@@ -64,14 +43,11 @@ function renderItem({
|
|
|
64
43
|
children: content
|
|
65
44
|
});
|
|
66
45
|
}
|
|
67
|
-
|
|
68
46
|
let promise;
|
|
69
|
-
|
|
70
47
|
function safeCaller(fn) {
|
|
71
48
|
return async (...args) => {
|
|
72
49
|
if (promise) return;
|
|
73
50
|
promise = fn(...args);
|
|
74
|
-
|
|
75
51
|
try {
|
|
76
52
|
await promise;
|
|
77
53
|
} finally {
|
|
@@ -79,14 +55,13 @@ function safeCaller(fn) {
|
|
|
79
55
|
}
|
|
80
56
|
};
|
|
81
57
|
}
|
|
82
|
-
|
|
83
58
|
class Toolbar {
|
|
84
59
|
static create(mm) {
|
|
85
60
|
const toolbar = new Toolbar();
|
|
86
61
|
toolbar.attach(mm);
|
|
87
|
-
|
|
62
|
+
toolbar.render();
|
|
63
|
+
return toolbar;
|
|
88
64
|
}
|
|
89
|
-
|
|
90
65
|
static icon(path, attrs = {}) {
|
|
91
66
|
attrs = _extends({
|
|
92
67
|
stroke: 'none',
|
|
@@ -102,11 +77,13 @@ class Toolbar {
|
|
|
102
77
|
}))
|
|
103
78
|
});
|
|
104
79
|
}
|
|
105
|
-
|
|
106
80
|
constructor() {
|
|
107
81
|
this.showBrand = true;
|
|
108
82
|
this.registry = {};
|
|
109
83
|
this.markmap = null;
|
|
84
|
+
this.el = mountDom(jsx("div", {
|
|
85
|
+
className: "mm-toolbar"
|
|
86
|
+
}));
|
|
110
87
|
this.register({
|
|
111
88
|
id: 'zoomIn',
|
|
112
89
|
title: 'Zoom in',
|
|
@@ -131,75 +108,35 @@ class Toolbar {
|
|
|
131
108
|
content: Toolbar.icon('M16 4h-12v12h12v-8h-8v4h2v-2h4v4h-8v-8h10z'),
|
|
132
109
|
onClick: e => {
|
|
133
110
|
const button = e.target.closest(`.${clsToolbarItem}`);
|
|
134
|
-
|
|
135
111
|
const toggle = () => button.classList.toggle(clsActive);
|
|
136
|
-
|
|
137
112
|
const active = toggle();
|
|
138
|
-
this.
|
|
113
|
+
this.markmap.setOptions({
|
|
114
|
+
toggleRecursively: active
|
|
115
|
+
});
|
|
139
116
|
}
|
|
140
117
|
});
|
|
141
|
-
this.
|
|
118
|
+
this.items = Toolbar.defaultItems;
|
|
142
119
|
}
|
|
143
|
-
|
|
144
120
|
setBrand(show) {
|
|
145
121
|
this.showBrand = show;
|
|
122
|
+
return this.render();
|
|
146
123
|
}
|
|
147
|
-
|
|
148
124
|
register(data) {
|
|
149
125
|
this.registry[data.id] = data;
|
|
150
126
|
}
|
|
151
|
-
|
|
152
127
|
getHandler(handle) {
|
|
153
128
|
handle = safeCaller(handle);
|
|
154
129
|
return () => {
|
|
155
130
|
if (this.markmap) handle(this.markmap);
|
|
156
131
|
};
|
|
157
132
|
}
|
|
158
|
-
|
|
159
133
|
setItems(items) {
|
|
160
134
|
this.items = [...items];
|
|
135
|
+
return this.render();
|
|
161
136
|
}
|
|
162
|
-
|
|
163
137
|
attach(mm) {
|
|
164
138
|
this.markmap = mm;
|
|
165
139
|
}
|
|
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
140
|
render() {
|
|
204
141
|
const items = this.items.map(item => {
|
|
205
142
|
if (typeof item === 'string') {
|
|
@@ -207,15 +144,16 @@ class Toolbar {
|
|
|
207
144
|
if (!data) console.warn(`[markmap-toolbar] ${item} not found`);
|
|
208
145
|
return data;
|
|
209
146
|
}
|
|
210
|
-
|
|
211
147
|
return item;
|
|
212
148
|
}).filter(Boolean);
|
|
213
|
-
|
|
214
|
-
|
|
149
|
+
while (this.el.firstChild) {
|
|
150
|
+
this.el.firstChild.remove();
|
|
151
|
+
}
|
|
152
|
+
this.el.append(mountDom(jsxs(Fragment, {
|
|
215
153
|
children: [this.showBrand && renderBrand(), items.map(renderItem)]
|
|
216
|
-
}));
|
|
154
|
+
})));
|
|
155
|
+
return this.el;
|
|
217
156
|
}
|
|
218
|
-
|
|
219
157
|
}
|
|
220
158
|
Toolbar.defaultItems = ['zoomIn', 'zoomOut', 'fit', 'recurse'];
|
|
221
159
|
|
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.14.
|
|
3
|
+
"version": "0.14.5-alpha.13+50ca560",
|
|
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.14.5-alpha.13+50ca560",
|
|
39
|
+
"markmap-view": "0.14.5-alpha.13+50ca560"
|
|
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": "50ca5603019498f93dba6485c96d0a5630b221e5"
|
|
34
46
|
}
|
package/types/toolbar.d.ts
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { VChildren } from '@gera2ld/jsx-dom';
|
|
2
2
|
import type { Markmap } from 'markmap-view';
|
|
3
3
|
import './style.css';
|
|
4
|
-
interface IToolbarItem {
|
|
4
|
+
export interface IToolbarItem {
|
|
5
5
|
id?: string;
|
|
6
6
|
title?: string;
|
|
7
7
|
content: VChildren;
|
|
@@ -12,18 +12,17 @@ export declare class Toolbar {
|
|
|
12
12
|
private registry;
|
|
13
13
|
private markmap;
|
|
14
14
|
static defaultItems: (string | IToolbarItem)[];
|
|
15
|
+
el: HTMLDivElement;
|
|
15
16
|
items: (string | IToolbarItem)[];
|
|
16
|
-
static create(mm: Markmap):
|
|
17
|
+
static create(mm: Markmap): Toolbar;
|
|
17
18
|
static icon(path: string, attrs?: {}): import("@gera2ld/jsx-dom").VNode;
|
|
18
19
|
constructor();
|
|
19
|
-
setBrand(show: boolean):
|
|
20
|
+
setBrand(show: boolean): HTMLDivElement;
|
|
20
21
|
register(data: IToolbarItem & {
|
|
21
22
|
id: string;
|
|
22
23
|
}): void;
|
|
23
24
|
getHandler(handle: (mm: Markmap) => Promise<void>): () => void;
|
|
24
|
-
setItems(items: (string | IToolbarItem)[]):
|
|
25
|
+
setItems(items: (string | IToolbarItem)[]): HTMLDivElement;
|
|
25
26
|
attach(mm: Markmap): void;
|
|
26
|
-
|
|
27
|
-
render(): Node;
|
|
27
|
+
render(): HTMLDivElement;
|
|
28
28
|
}
|
|
29
|
-
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}));
|