markmap-toolbar 0.14.4 → 0.14.5-alpha.15

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 CHANGED
@@ -15,7 +15,7 @@ $ npm i markmap-toolbar
15
15
  ```js
16
16
  import { Toolbar } from 'markmap-toolbar';
17
17
 
18
- const el = Toolbar.create(mm);
18
+ const { el } = Toolbar.create(mm);
19
19
  el.style.position = 'absolute';
20
20
  el.style.bottom = '0.5rem';
21
21
  el.style.right = '0.5rem';
@@ -1,4 +1,4 @@
1
- /*! markmap-toolbar v0.14.4 | MIT License */
1
+ /*! markmap-toolbar v0.14.5-alpha.15+1fe26c8 | 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 || function (target) {
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
- type = _ref.type,
144
- props = _ref.props;
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
- _type = _ref2.type,
176
- _props = _ref2.props;
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
- return toolbar.render();
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',
@@ -362,79 +297,39 @@ class Toolbar {
362
297
  });
363
298
  this.register({
364
299
  id: 'recurse',
365
- title: 'Recursively toggle the next node',
300
+ title: 'Toggle recursively',
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.handleRecurse(active, toggle);
306
+ this.markmap.setOptions({
307
+ toggleRecursively: active
308
+ });
374
309
  }
375
310
  });
376
- this.setItems(Toolbar.defaultItems);
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
- return mountDom(jsxs("div", {
449
- className: "mm-toolbar",
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.4 | MIT License */
1
+ /*! markmap-toolbar v0.14.5-alpha.15+1fe26c8 | 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 || function (target) {
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
- return toolbar.render();
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',
@@ -127,79 +104,39 @@ class Toolbar {
127
104
  });
128
105
  this.register({
129
106
  id: 'recurse',
130
- title: 'Recursively toggle the next node',
107
+ title: 'Toggle recursively',
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.handleRecurse(active, toggle);
113
+ this.markmap.setOptions({
114
+ toggleRecursively: active
115
+ });
139
116
  }
140
117
  });
141
- this.setItems(Toolbar.defaultItems);
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
- return mountDom(jsxs("div", {
214
- className: "mm-toolbar",
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{--tw-border-opacity:1;--tw-bg-opacity:1;align-items:center;background-color:rgb(255 255 255/var(--tw-bg-opacity));border-color:rgb(209 213 219/var(--tw-border-opacity));border-radius:.25rem;border-style:solid;border-width:1px;display:flex;line-height:1;padding:.25rem;-moz-user-select:none;user-select:none}.mm-toolbar:hover{--tw-border-opacity:1;border-color:rgb(156 163 175/var(--tw-border-opacity))}.mm-toolbar svg{display:block}.mm-toolbar a{display:inline-block;-webkit-text-decoration-line:none;text-decoration-line:none}.mm-toolbar-brand>img{height:1rem;vertical-align:middle;width:1rem}.mm-toolbar-brand>span{padding-left:.25rem;padding-right:.25rem}.mm-toolbar-brand:not(:first-child),.mm-toolbar-item:not(:first-child){margin-left:.25rem}.mm-toolbar-brand>*,.mm-toolbar-item>*{--tw-text-opacity:1;color:rgb(156 163 175/var(--tw-text-opacity));cursor:pointer;font-size:.75rem;height:20px;line-height:1rem;line-height:20px;min-width:20px;text-align:center}.mm-toolbar-brand.active,.mm-toolbar-brand:hover,.mm-toolbar-item.active,.mm-toolbar-item:hover{--tw-bg-opacity:1;background-color:rgb(229 231 235/var(--tw-bg-opacity));border-radius:.25rem}.mm-toolbar-brand.active>*,.mm-toolbar-brand:hover>*,.mm-toolbar-item.active>*,.mm-toolbar-item:hover>*{--tw-text-opacity:1;color:rgb(31 41 55/var(--tw-text-opacity))}.mm-toolbar-brand.active,.mm-toolbar-item.active{--tw-bg-opacity:1;background-color:rgb(209 213 219/var(--tw-bg-opacity))}
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.4",
3
+ "version": "0.14.5-alpha.15+1fe26c8",
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.umd.js",
14
- "module": "dist/index.esm.js",
15
- "unpkg": "dist/index.umd.min.js",
16
- "jsdelivr": "dist/index.umd.min.js",
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-view": "^0.14.4"
38
+ "markmap-common": "0.14.5-alpha.15+1fe26c8",
39
+ "markmap-view": "0.14.5-alpha.15+1fe26c8"
28
40
  },
29
41
  "dependencies": {
30
42
  "@babel/runtime": "^7.16.3",
31
43
  "@gera2ld/jsx-dom": "^2.1.1"
32
44
  },
33
- "gitHead": "8eb2fa223ab85d1a7699d2c9660fdb5fac24acd1"
45
+ "gitHead": "1fe26c8234296e2188e466c7b9dbf3b7e171857d"
34
46
  }
@@ -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): Node;
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): void;
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)[]): void;
25
+ setItems(items: (string | IToolbarItem)[]): HTMLDivElement;
25
26
  attach(mm: Markmap): void;
26
- handleRecurse(active: boolean, reset: () => void): void;
27
- render(): Node;
27
+ render(): HTMLDivElement;
28
28
  }
29
- export {};
@@ -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}));