markmap-view-plus 0.0.6 → 0.0.7

package/dist/action.d.ts

@@ -42,7 +42,7 @@ export declare class ActionManager {
     /** Active + button UI state. */
     addUI?: {
         node: INode;
-        btn: HTMLButtonElement;
+        btn: HTMLElement;
         wrap: HTMLDivElement;
         cleanupDoc: () => void;
     } | undefined;

package/dist/browser/index.js

@@ -1229,10 +1229,13 @@
 					const svgEl = this.ctx.svg.node();
 					const scale = svgEl ? (0, d3.zoomTransform)(svgEl).k : 1;
 					const btnSize = Math.round(16 * scale);
-					const fontSize = Math.round(14 * scale);
 					this.addUI.btn.style.width = `${btnSize}px`;
 					this.addUI.btn.style.height = `${btnSize}px`;
-					this.addUI.btn.style.fontSize = `${fontSize}px`;
+					const svg = this.addUI.btn.querySelector("svg");
+					if (svg) {
+						svg.setAttribute("width", `${btnSize}`);
+						svg.setAttribute("height", `${btnSize}`);
+					}
 					this._positionOverlayToEl(this.addUI.wrap, contentEl, {
 						anchor: "br",
 						dx: Math.round(14 * scale),
@@ -1301,29 +1304,21 @@
 			const svgEl = this.ctx.svg.node();
 			const scale = svgEl ? (0, d3.zoomTransform)(svgEl).k : 1;
 			const btnSize = Math.round(16 * scale);
-			const fontSize = Math.round(14 * scale);
-			const btn = document.createElement("button");
-			btn.type = "button";
+			const btn = document.createElement("div");
 			btn.className = "markmap-add-btn";
-			btn.textContent = "+";
+			btn.innerHTML = `<svg width="${btnSize}" height="${btnSize}" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="8" cy="8" r="8" fill="#b4b4b4"/>
+<path d="M8 4.5V11.5M4.5 8H11.5" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>`;
 			btn.style.cssText = `
       width: ${btnSize}px;
       height: ${btnSize}px;
-      border-radius: 50%;
-      background: #b4b4b4;
-      color: #fff;
-      font-weight: 600;
-      font-size: ${fontSize}px;
-      line-height: 1;
-      padding: 0;
       cursor: pointer;
-      box-shadow: none;
-      outline: none;
-      border: none;
-      user-select: none;
+      padding: 0;
       display: flex;
       align-items: center;
       justify-content: center;
+      user-select: none;
     `;
 			btn.addEventListener("click", (e) => {
 				e.preventDefault();

package/dist/index.js

@@ -899,8 +899,10 @@ var Re = (e, t = 0) => (e.y = t, (e.children || []).reduce((t, n) => {
 		if (this.addUI) {
 			let e = this._getNodeContentEl(this.addUI.node);
 			if (e) {
-				let t = this.ctx.svg.node(), n = t ? l(t).k : 1, r = Math.round(16 * n), i = Math.round(14 * n);
-				this.addUI.btn.style.width = `${r}px`, this.addUI.btn.style.height = `${r}px`, this.addUI.btn.style.fontSize = `${i}px`, this._positionOverlayToEl(this.addUI.wrap, e, {
+				let t = this.ctx.svg.node(), n = t ? l(t).k : 1, r = Math.round(16 * n);
+				this.addUI.btn.style.width = `${r}px`, this.addUI.btn.style.height = `${r}px`;
+				let i = this.addUI.btn.querySelector("svg");
+				i && (i.setAttribute("width", `${r}`), i.setAttribute("height", `${r}`)), this._positionOverlayToEl(this.addUI.wrap, e, {
 					anchor: "br",
 					dx: Math.round(14 * n),
 					dy: 0
@@ -944,43 +946,37 @@ var Re = (e, t = 0) => (e.y = t, (e.children || []).reduce((t, n) => {
 		this.hideAddUI();
 		let n = this._getOverlayRoot(), r = document.createElement("div");
 		r.style.cssText = "\n      position: absolute;\n      z-index: 9999;\n      pointer-events: auto;\n    ";
-		let i = this.ctx.svg.node(), a = i ? l(i).k : 1, o = Math.round(16 * a), s = Math.round(14 * a), c = document.createElement("button");
-		c.type = "button", c.className = "markmap-add-btn", c.textContent = "+", c.style.cssText = `
+		let i = this.ctx.svg.node(), a = i ? l(i).k : 1, o = Math.round(16 * a), s = document.createElement("div");
+		s.className = "markmap-add-btn", s.innerHTML = `<svg width="${o}" height="${o}" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="8" cy="8" r="8" fill="#b4b4b4"/>
+<path d="M8 4.5V11.5M4.5 8H11.5" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>`, s.style.cssText = `
       width: ${o}px;
       height: ${o}px;
-      border-radius: 50%;
-      background: #b4b4b4;
-      color: #fff;
-      font-weight: 600;
-      font-size: ${s}px;
-      line-height: 1;
-      padding: 0;
       cursor: pointer;
-      box-shadow: none;
-      outline: none;
-      border: none;
-      user-select: none;
+      padding: 0;
       display: flex;
       align-items: center;
       justify-content: center;
-    `, c.addEventListener("click", (t) => {
+      user-select: none;
+    `, s.addEventListener("click", (t) => {
 			t.preventDefault(), t.stopPropagation(), this.showAddInput(e);
-		}), r.style.transform = "translate(-50%, -50%)", r.appendChild(c), n.appendChild(r), this._positionOverlayToEl(r, t, {
+		}), r.style.transform = "translate(-50%, -50%)", r.appendChild(s), n.appendChild(r), this._positionOverlayToEl(r, t, {
 			anchor: "br",
 			dx: Math.round(14 * a),
 			dy: 0
 		});
-		let u = (t) => {
+		let c = (t) => {
 			let n = t.target;
 			if (!n || r.contains(n) || this.addInputUI?.wrap.contains(n)) return;
 			let i = this._getNodeContentEl(e);
 			i && i.contains(n) || this.hideAddUI();
 		};
-		document.addEventListener("click", u, !0), this.addUI = {
+		document.addEventListener("click", c, !0), this.addUI = {
 			node: e,
-			btn: c,
+			btn: s,
 			wrap: r,
-			cleanupDoc: () => document.removeEventListener("click", u, !0)
+			cleanupDoc: () => document.removeEventListener("click", c, !0)
 		};
 	}
 	/** Delete `node` from the tree and re-render. */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "markmap-view-plus",
-  "version": "0.0.6",
+  "version": "0.0.7",
   "description": "markmap-plus is an enhanced version of markmap-view with node creation, editing, and deletion capabilities",
   "author": "Lin Jiman <temman_lin@qq.com>",
   "license": "MIT",