markmap-toolbar 0.15.0-alpha.0 → 0.15.0-alpha.1

package/README.md

@@ -15,7 +15,7 @@ $ npm i markmap-toolbar
 ```js
 import { Toolbar } from 'markmap-toolbar';
 
-const el = Toolbar.create(mm);
+const { el } = Toolbar.create(mm);
 el.style.position = 'absolute';
 el.style.bottom = '0.5rem';
 el.style.right = '0.5rem';

package/dist/index.js

@@ -1,4 +1,4 @@
-/*! markmap-toolbar v0.15.0-alpha.0 | MIT License */
+/*! markmap-toolbar v0.15.0-alpha.1+1308d8e | MIT License */
 (function (global, factory) {
 typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
 typeof define === 'function' && define.amd ? define(['exports'], factory) :
@@ -251,7 +251,8 @@ class Toolbar {
   static create(mm) {
     const toolbar = new Toolbar();
     toolbar.attach(mm);
-    return toolbar.render();
+    toolbar.render();
+    return toolbar;
   }
   static icon(path, attrs = {}) {
     attrs = _extends({
@@ -272,6 +273,9 @@ class Toolbar {
     this.showBrand = true;
     this.registry = {};
     this.markmap = null;
+    this.el = mountDom(jsx("div", {
+      className: "mm-toolbar"
+    }));
     this.register({
       id: 'zoomIn',
       title: 'Zoom in',
@@ -290,10 +294,11 @@ class Toolbar {
       content: Toolbar.icon('M4 7h2v-2h2v4h-4zM4 13h2v2h2v-4h-4zM16 7h-2v-2h-2v4h4zM16 13h-2v2h-2v-4h4z'),
       onClick: this.getHandler(mm => mm.fit())
     });
-    this.setItems(Toolbar.defaultItems);
+    this.items = Toolbar.defaultItems;
   }
   setBrand(show) {
     this.showBrand = show;
+    return this.render();
   }
   register(data) {
     this.registry[data.id] = data;
@@ -306,6 +311,7 @@ class Toolbar {
   }
   setItems(items) {
     this.items = [...items];
+    return this.render();
   }
   attach(mm) {
     this.markmap = mm;
@@ -319,13 +325,16 @@ class Toolbar {
       }
       return item;
     }).filter(Boolean);
-    return mountDom(jsxs("div", {
-      className: "mm-toolbar",
+    while (this.el.firstChild) {
+      this.el.firstChild.remove();
+    }
+    this.el.append(mountDom(jsxs(Fragment, {
       children: [this.showBrand && renderBrand(), items.map(renderItem)]
-    }));
+    })));
+    return this.el;
   }
 }
-Toolbar.defaultItems = ['zoomIn', 'zoomOut', 'fit', 'recurse'];
+Toolbar.defaultItems = ['zoomIn', 'zoomOut', 'fit'];
 
 exports.Toolbar = Toolbar;
 

package/dist/index.mjs

@@ -1,6 +1,6 @@
-/*! markmap-toolbar v0.15.0-alpha.0 | MIT License */
+/*! markmap-toolbar v0.15.0-alpha.1+1308d8e | MIT License */
 import { mountDom } from '@gera2ld/jsx-dom';
-import { jsx, jsxs } from '@gera2ld/jsx-dom/jsx-runtime';
+import { jsx, jsxs, Fragment } from '@gera2ld/jsx-dom/jsx-runtime';
 
 function _extends() {
   _extends = Object.assign ? Object.assign.bind() : function (target) {
@@ -58,7 +58,8 @@ class Toolbar {
   static create(mm) {
     const toolbar = new Toolbar();
     toolbar.attach(mm);
-    return toolbar.render();
+    toolbar.render();
+    return toolbar;
   }
   static icon(path, attrs = {}) {
     attrs = _extends({
@@ -79,6 +80,9 @@ class Toolbar {
     this.showBrand = true;
     this.registry = {};
     this.markmap = null;
+    this.el = mountDom(jsx("div", {
+      className: "mm-toolbar"
+    }));
     this.register({
       id: 'zoomIn',
       title: 'Zoom in',
@@ -97,10 +101,11 @@ class Toolbar {
       content: Toolbar.icon('M4 7h2v-2h2v4h-4zM4 13h2v2h2v-4h-4zM16 7h-2v-2h-2v4h4zM16 13h-2v2h-2v-4h4z'),
       onClick: this.getHandler(mm => mm.fit())
     });
-    this.setItems(Toolbar.defaultItems);
+    this.items = Toolbar.defaultItems;
   }
   setBrand(show) {
     this.showBrand = show;
+    return this.render();
   }
   register(data) {
     this.registry[data.id] = data;
@@ -113,6 +118,7 @@ class Toolbar {
   }
   setItems(items) {
     this.items = [...items];
+    return this.render();
   }
   attach(mm) {
     this.markmap = mm;
@@ -126,12 +132,15 @@ class Toolbar {
       }
       return item;
     }).filter(Boolean);
-    return mountDom(jsxs("div", {
-      className: "mm-toolbar",
+    while (this.el.firstChild) {
+      this.el.firstChild.remove();
+    }
+    this.el.append(mountDom(jsxs(Fragment, {
       children: [this.showBrand && renderBrand(), items.map(renderItem)]
-    }));
+    })));
+    return this.el;
   }
 }
-Toolbar.defaultItems = ['zoomIn', 'zoomOut', 'fit', 'recurse'];
+Toolbar.defaultItems = ['zoomIn', 'zoomOut', 'fit'];
 
 export { Toolbar };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "markmap-toolbar",
-  "version": "0.15.0-alpha.0",
+  "version": "0.15.0-alpha.1+1308d8e",
   "description": "Extensible toolbar for markmap",
   "author": "Gerald <gera2ld@live.com>",
   "license": "MIT",
@@ -42,5 +42,5 @@
     "@babel/runtime": "^7.16.3",
     "@gera2ld/jsx-dom": "^2.1.1"
   },
-  "gitHead": "cea14d4791b8483481a99baa5d256017f52f267c"
+  "gitHead": "1308d8ea5a6e6b24b6c5f053a50cc319df4ad93d"
 }

package/types/toolbar.d.ts

@@ -1,7 +1,7 @@
 import { VChildren } from '@gera2ld/jsx-dom';
 import type { Markmap } from 'markmap-view';
 import './style.css';
-interface IToolbarItem {
+export interface IToolbarItem {
     id?: string;
     title?: string;
     content: VChildren;
@@ -12,17 +12,17 @@ export declare class Toolbar {
     private registry;
     private markmap;
     static defaultItems: (string | IToolbarItem)[];
+    el: HTMLDivElement;
     items: (string | IToolbarItem)[];
-    static create(mm: Markmap): Node;
+    static create(mm: Markmap): Toolbar;
     static icon(path: string, attrs?: {}): import("@gera2ld/jsx-dom").VNode;
     constructor();
-    setBrand(show: boolean): void;
+    setBrand(show: boolean): HTMLDivElement;
     register(data: IToolbarItem & {
         id: string;
     }): void;
     getHandler(handle: (mm: Markmap) => Promise<void>): () => void;
-    setItems(items: (string | IToolbarItem)[]): void;
+    setItems(items: (string | IToolbarItem)[]): HTMLDivElement;
     attach(mm: Markmap): void;
-    render(): Node;
+    render(): HTMLDivElement;
 }
-export {};