markmap-toolbar 0.15.0-alpha.0 → 0.15.0

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 | MIT License */
 (function (global, factory) {
 typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
 typeof define === 'function' && define.amd ? define(['exports'], factory) :
@@ -20,61 +20,48 @@ function _extends() {
   return _extends.apply(this, arguments);
 }
 
-/*! @gera2ld/jsx-dom v2.1.1 | ISC License */
-var VTYPE_ELEMENT = 1;
-var VTYPE_FUNCTION = 2;
-var MOUNT_SINGLE = 1;
-var MOUNT_ARRAY = 4;
-var SVG_NS = 'http://www.w3.org/2000/svg';
-var XLINK_NS = 'http://www.w3.org/1999/xlink';
-var NS_ATTRS = {
+/*! @gera2ld/jsx-dom v2.2.2 | ISC License */
+const VTYPE_ELEMENT = 1;
+const VTYPE_FUNCTION = 2;
+const SVG_NS = 'http://www.w3.org/2000/svg';
+const XLINK_NS = 'http://www.w3.org/1999/xlink';
+const NS_ATTRS = {
   show: XLINK_NS,
   actuate: XLINK_NS,
   href: XLINK_NS
 };
-var isLeaf = function isLeaf(c) {
-  return typeof c === 'string' || typeof c === 'number';
-};
-var isElement = function isElement(c) {
-  return (c == null ? void 0 : c.vtype) === VTYPE_ELEMENT;
-};
-var isRenderFunction = function isRenderFunction(c) {
-  return (c == null ? void 0 : c.vtype) === VTYPE_FUNCTION;
-};
+const isLeaf = c => typeof c === 'string' || typeof c === 'number';
+const isElement = c => (c == null ? void 0 : c.vtype) === VTYPE_ELEMENT;
+const isRenderFunction = c => (c == null ? void 0 : c.vtype) === VTYPE_FUNCTION;
 function jsx(type, props) {
-  var vtype;
+  let vtype;
   if (typeof type === 'string') vtype = VTYPE_ELEMENT;else if (typeof type === 'function') vtype = VTYPE_FUNCTION;else throw new Error('Invalid VNode type');
   return {
-    vtype: vtype,
-    type: type,
-    props: props
+    vtype,
+    type,
+    props
   };
 }
-var jsxs = jsx;
+const jsxs = jsx;
 function Fragment(props) {
   return props.children;
 }
-var DEFAULT_ENV = {
+const DEFAULT_ENV = {
   isSvg: false
 };
-function insertDom(parent, ref) {
-  if (ref.type === MOUNT_SINGLE) {
-    if (ref.node != null) parent.append(ref.node);
-  } else if (ref.type === MOUNT_ARRAY) {
-    ref.children.forEach(function (ch) {
-      insertDom(parent, ch);
-    });
-  } else {
-    throw new Error("Unkown ref type " + JSON.stringify(ref));
-  }
+function insertDom(parent, nodes) {
+  if (!Array.isArray(nodes)) nodes = [nodes];
+  nodes = nodes.filter(Boolean);
+  if (nodes.length) parent.append(...nodes);
 }
 function mountAttributes(domElement, props, env) {
-  for (var key in props) {
+  for (const key in props) {
     if (key === 'key' || key === 'children' || key === 'ref') continue;
     if (key === 'dangerouslySetInnerHTML') {
       domElement.innerHTML = props[key].__html;
-    } else if (key === 'innerHTML' || key === 'textContent' || key === 'innerText') {
-      domElement[key] = props[key];
+    } else if (key === 'innerHTML' || key === 'textContent' || key === 'innerText' || key === 'value' && ['textarea', 'select'].includes(domElement.tagName)) {
+      const value = props[key];
+      if (value != null) domElement[key] = value;
     } else if (key.startsWith('on')) {
       domElement[key.toLowerCase()] = props[key];
     } else {
@@ -82,7 +69,7 @@ function mountAttributes(domElement, props, env) {
     }
   }
 }
-var attrMap = {
+const attrMap = {
   className: 'class',
   labelFor: 'for'
 };
@@ -93,7 +80,7 @@ function setDOMAttribute(el, attr, value, isSVG) {
   } else if (value === false) {
     el.removeAttribute(attr);
   } else {
-    var namespace = isSVG ? NS_ATTRS[attr] : undefined;
+    const namespace = isSVG ? NS_ATTRS[attr] : undefined;
     if (namespace !== undefined) {
       el.setAttributeNS(namespace, attr, value);
     } else {
@@ -101,116 +88,83 @@ function setDOMAttribute(el, attr, value, isSVG) {
     }
   }
 }
-function mount(vnode, env) {
-  if (env === void 0) {
-    env = DEFAULT_ENV;
-  }
+function flatten(arr) {
+  return arr.reduce((prev, item) => prev.concat(item), []);
+}
+function mountChildren(children, env) {
+  return Array.isArray(children) ? flatten(children.map(child => mountChildren(child, env))) : mount(children, env);
+}
+function mount(vnode, env = DEFAULT_ENV) {
   if (vnode == null || typeof vnode === 'boolean') {
-    return {
-      type: MOUNT_SINGLE,
-      node: null
-    };
+    return null;
   }
   if (vnode instanceof Node) {
-    return {
-      type: MOUNT_SINGLE,
-      node: vnode
-    };
+    return vnode;
   }
   if (isRenderFunction(vnode)) {
-    var _ref = vnode,
-      type = _ref.type,
-      props = _ref.props;
+    const {
+      type,
+      props
+    } = vnode;
     if (type === Fragment) {
-      var node = document.createDocumentFragment();
+      const node = document.createDocumentFragment();
       if (props.children) {
-        var childrenRef = mount(props.children, env);
-        insertDom(node, childrenRef);
+        const children = mountChildren(props.children, env);
+        insertDom(node, children);
       }
-      return {
-        type: MOUNT_SINGLE,
-        node: node
-      };
+      return node;
     }
-    var childVNode = type(props);
+    const childVNode = type(props);
     return mount(childVNode, env);
   }
   if (isLeaf(vnode)) {
-    return {
-      type: MOUNT_SINGLE,
-      node: document.createTextNode("" + vnode)
-    };
+    return document.createTextNode(`${vnode}`);
   }
   if (isElement(vnode)) {
-    var _node;
-    var _ref2 = vnode,
-      _type = _ref2.type,
-      _props = _ref2.props;
-    if (!env.isSvg && _type === 'svg') {
+    let node;
+    const {
+      type,
+      props
+    } = vnode;
+    if (!env.isSvg && type === 'svg') {
       env = Object.assign({}, env, {
         isSvg: true
       });
     }
     if (!env.isSvg) {
-      _node = document.createElement(_type);
+      node = document.createElement(type);
     } else {
-      _node = document.createElementNS(SVG_NS, _type);
+      node = document.createElementNS(SVG_NS, type);
     }
-    mountAttributes(_node, _props, env);
-    var _childrenRef;
-    if (_props.children) {
-      var childEnv = env;
-      if (env.isSvg && _type === 'foreignObject') {
+    mountAttributes(node, props, env);
+    if (props.children) {
+      let childEnv = env;
+      if (env.isSvg && type === 'foreignObject') {
         childEnv = Object.assign({}, childEnv, {
           isSvg: false
         });
       }
-      _childrenRef = mount(_props.children, childEnv);
+      const children = mountChildren(props.children, childEnv);
+      if (children != null) insertDom(node, children);
     }
-    if (_childrenRef != null) insertDom(_node, _childrenRef);
-    var ref = _props.ref;
-    if (typeof ref === 'function') ref(_node);
-    return {
-      type: MOUNT_SINGLE,
-      node: _node
-    };
-  }
-  if (Array.isArray(vnode)) {
-    return {
-      type: MOUNT_ARRAY,
-      children: vnode.map(function (child) {
-        return mount(child, env);
-      })
-    };
+    const {
+      ref
+    } = props;
+    if (typeof ref === 'function') ref(node);
+    return node;
   }
   throw new Error('mount: Invalid Vnode!');
 }
-function flattenWithoutNull(array) {
-  var result = [];
-  for (var i = 0; i < array.length; i += 1) {
-    var item = array[i];
-    if (Array.isArray(item)) result = result.concat(flattenWithoutNull(item));else if (item != null) result.push(item);
-  }
-  return result;
-}
-function asDom(result) {
-  if (result.type === MOUNT_SINGLE) {
-    return result.node;
-  }
-  return result.children.map(asDom);
-}
+
 /**
  * Mount vdom as real DOM nodes.
  */
-
 function mountDom(vnode) {
-  if (Array.isArray(vnode)) {
-    return flattenWithoutNull(vnode.map(mountDom));
-  }
-  return asDom(mount(vnode));
+  return mount(vnode);
 }
 
 const clsToolbarItem = 'mm-toolbar-item';
+const clsActive = 'active';
 function renderBrand() {
   return jsxs("a", {
     className: "mm-toolbar-brand",
@@ -243,7 +197,7 @@ function safeCaller(fn) {
     try {
       await promise;
     } finally {
-      promise = null;
+      promise = undefined;
     }
   };
 }
@@ -251,7 +205,7 @@ class Toolbar {
   static create(mm) {
     const toolbar = new Toolbar();
     toolbar.attach(mm);
-    return toolbar.render();
+    return toolbar;
   }
   static icon(path, attrs = {}) {
     attrs = _extends({
@@ -271,7 +225,10 @@ class Toolbar {
   constructor() {
     this.showBrand = true;
     this.registry = {};
-    this.markmap = null;
+    this.el = mountDom(jsx("div", {
+      className: "mm-toolbar"
+    }));
+    this.items = [...Toolbar.defaultItems];
     this.register({
       id: 'zoomIn',
       title: 'Zoom in',
@@ -290,10 +247,24 @@ 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.register({
+      id: 'recurse',
+      title: 'Toggle recursively',
+      content: Toolbar.icon('M16 4h-12v12h12v-8h-8v4h2v-2h4v4h-8v-8h10z'),
+      onClick: e => {
+        var _this$markmap;
+        const button = e.target.closest(`.${clsToolbarItem}`);
+        const active = button == null ? void 0 : button.classList.toggle(clsActive);
+        (_this$markmap = this.markmap) == null ? void 0 : _this$markmap.setOptions({
+          toggleRecursively: active
+        });
+      }
+    });
+    this.render();
   }
   setBrand(show) {
     this.showBrand = show;
+    return this.render();
   }
   register(data) {
     this.registry[data.id] = data;
@@ -306,6 +277,7 @@ class Toolbar {
   }
   setItems(items) {
     this.items = [...items];
+    return this.render();
   }
   attach(mm) {
     this.markmap = mm;
@@ -319,10 +291,13 @@ 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'];

package/dist/index.mjs

@@ -1,6 +1,6 @@
-/*! markmap-toolbar v0.15.0-alpha.0 | MIT License */
+/*! markmap-toolbar v0.15.0 | 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) {
@@ -18,6 +18,7 @@ function _extends() {
 }
 
 const clsToolbarItem = 'mm-toolbar-item';
+const clsActive = 'active';
 function renderBrand() {
   return jsxs("a", {
     className: "mm-toolbar-brand",
@@ -50,7 +51,7 @@ function safeCaller(fn) {
     try {
       await promise;
     } finally {
-      promise = null;
+      promise = undefined;
     }
   };
 }
@@ -58,7 +59,7 @@ class Toolbar {
   static create(mm) {
     const toolbar = new Toolbar();
     toolbar.attach(mm);
-    return toolbar.render();
+    return toolbar;
   }
   static icon(path, attrs = {}) {
     attrs = _extends({
@@ -78,7 +79,10 @@ class Toolbar {
   constructor() {
     this.showBrand = true;
     this.registry = {};
-    this.markmap = null;
+    this.el = mountDom(jsx("div", {
+      className: "mm-toolbar"
+    }));
+    this.items = [...Toolbar.defaultItems];
     this.register({
       id: 'zoomIn',
       title: 'Zoom in',
@@ -97,10 +101,24 @@ 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.register({
+      id: 'recurse',
+      title: 'Toggle recursively',
+      content: Toolbar.icon('M16 4h-12v12h12v-8h-8v4h2v-2h4v4h-8v-8h10z'),
+      onClick: e => {
+        var _this$markmap;
+        const button = e.target.closest(`.${clsToolbarItem}`);
+        const active = button == null ? void 0 : button.classList.toggle(clsActive);
+        (_this$markmap = this.markmap) == null ? void 0 : _this$markmap.setOptions({
+          toggleRecursively: active
+        });
+      }
+    });
+    this.render();
   }
   setBrand(show) {
     this.showBrand = show;
+    return this.render();
   }
   register(data) {
     this.registry[data.id] = data;
@@ -113,6 +131,7 @@ class Toolbar {
   }
   setItems(items) {
     this.items = [...items];
+    return this.render();
   }
   attach(mm) {
     this.markmap = mm;
@@ -126,10 +145,13 @@ 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'];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "markmap-toolbar",
-  "version": "0.15.0-alpha.0",
+  "version": "0.15.0",
   "description": "Extensible toolbar for markmap",
   "author": "Gerald <gera2ld@live.com>",
   "license": "MIT",
@@ -35,12 +35,12 @@
     "markmap-common": "*"
   },
   "devDependencies": {
-    "markmap-common": "0.15.0-alpha.0",
-    "markmap-view": "0.15.0-alpha.0"
+    "markmap-common": "0.15.0",
+    "markmap-view": "0.15.0"
   },
   "dependencies": {
-    "@babel/runtime": "^7.16.3",
-    "@gera2ld/jsx-dom": "^2.1.1"
+    "@babel/runtime": "^7.22.6",
+    "@gera2ld/jsx-dom": "^2.2.2"
   },
-  "gitHead": "cea14d4791b8483481a99baa5d256017f52f267c"
+  "gitHead": "9c13bae5e28346ec613362046a023839ef64538b"
 }

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 {};