@xiangfa/mindmap 0.3.0

package/dist/esm/components/MindMapNode.js

@@ -0,0 +1,588 @@
+import { computeTokenLayouts as e, parseInlineMarkdown as t } from "../utils/inline-markdown.js";
+import { runRenderInlineToken as n, runRenderNodeDecoration as r } from "../plugins/runner.js";
+import { getKatexSync as i, loadKatexStyle as a, onKatexReady as o, renderLatexToHtml as s } from "../plugins/latex.js";
+import { useEffect as c, useMemo as l, useState as u } from "react";
+import { Fragment as d, jsx as f, jsxs as p } from "react/jsx-runtime";
+//#region src/components/MindMap/components/MindMapNode.tsx
+var m = "'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace";
+function h(e, t, r, i) {
+	let { token: a } = e;
+	if (a.type !== "text" && a.type !== "bold" && a.type !== "italic" && a.type !== "strikethrough" && a.type !== "code" && a.type !== "highlight" && a.type !== "link" && a.type !== "image" && r && r.length > 0) {
+		let i = n(r, e, t);
+		if (i) return i;
+	}
+	switch (a.type) {
+		case "bold": return /* @__PURE__ */ f("tspan", {
+			className: "mindmap-text-bold",
+			fontWeight: 700,
+			children: a.content
+		}, t);
+		case "italic": return /* @__PURE__ */ f("tspan", {
+			className: "mindmap-text-italic",
+			fontStyle: "italic",
+			children: a.content
+		}, t);
+		case "strikethrough": return /* @__PURE__ */ f("tspan", {
+			className: "mindmap-text-strikethrough",
+			textDecoration: "line-through",
+			opacity: .6,
+			children: a.content
+		}, t);
+		case "code": return /* @__PURE__ */ f("tspan", {
+			className: "mindmap-text-code",
+			fontFamily: m,
+			fontSize: "0.88em",
+			children: a.content
+		}, t);
+		case "highlight": return /* @__PURE__ */ f("tspan", {
+			className: "mindmap-text-highlight",
+			fill: i || "#FFEB3B",
+			children: a.content
+		}, t);
+		case "link": return /* @__PURE__ */ f("a", {
+			className: "mindmap-text-link",
+			href: a.url,
+			target: "_blank",
+			rel: "noopener noreferrer",
+			onClick: (e) => e.stopPropagation(),
+			onMouseDown: (e) => e.stopPropagation(),
+			children: /* @__PURE__ */ f("tspan", {
+				fill: "#2563EB",
+				textDecoration: "underline",
+				children: a.text
+			})
+		}, t);
+		case "image": return /* @__PURE__ */ p("tspan", {
+			className: "mindmap-text-image",
+			fontStyle: "italic",
+			children: [
+				"[",
+				a.alt || "image",
+				"]"
+			]
+		}, t);
+		case "latex-inline":
+		case "latex-block": return /* @__PURE__ */ f("tspan", {
+			className: "mindmap-text-latex",
+			fontFamily: m,
+			fontStyle: "italic",
+			fontSize: "0.9em",
+			children: a.content
+		}, t);
+		default: return /* @__PURE__ */ f("tspan", {
+			className: "mindmap-text-plain",
+			children: a.content
+		}, t);
+	}
+}
+function g({ status: e, size: t }) {
+	return e === "done" ? /* @__PURE__ */ p("g", { children: [/* @__PURE__ */ f("rect", {
+		x: 0,
+		y: 0,
+		width: t,
+		height: t,
+		rx: t * .2,
+		fill: "#22C55E"
+	}), /* @__PURE__ */ f("path", {
+		d: `M${t * .28} ${t * .5}L${t * .44} ${t * .66}L${t * .72} ${t * .34}`,
+		stroke: "white",
+		strokeWidth: t * .13,
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		fill: "none"
+	})] }) : e === "doing" ? /* @__PURE__ */ p("g", { children: [/* @__PURE__ */ f("rect", {
+		x: 0,
+		y: 0,
+		width: t,
+		height: t,
+		rx: t * .2,
+		fill: "none",
+		stroke: "#FBBF24",
+		strokeWidth: t * .1
+	}), /* @__PURE__ */ f("rect", {
+		x: t * .25,
+		y: t * .25,
+		width: t * .5,
+		height: t * .5,
+		rx: t * .1,
+		fill: "#FBBF24",
+		opacity: .6
+	})] }) : /* @__PURE__ */ f("rect", {
+		x: 0,
+		y: 0,
+		width: t,
+		height: t,
+		rx: t * .2,
+		fill: "none",
+		stroke: "#999",
+		strokeWidth: t * .1,
+		opacity: .4
+	});
+}
+function _({ node: n, fontSize: r, fontWeight: d, fontFamily: m, textColor: _, onRemarkHover: v, plugins: y, highlightTextColor: b, highlightBgColor: x }) {
+	let [S, C] = u(() => !!i());
+	c(() => {
+		S || o(() => C(!0));
+	}, [S]);
+	let { layouts: w, textContentWidth: T, taskIconWidth: E, totalWidth: D } = l(() => {
+		let i = e(t(n.text, y), r, d, m), a = i.length > 0 ? i[i.length - 1].x + i[i.length - 1].width : 0, o = r * .85, s = n.taskStatus ? 4 : 0, c = n.taskStatus ? o + s : 0, l = r * .7, u = n.remark ? 4 : 0, f = n.remark ? l + u : 0;
+		return {
+			layouts: i,
+			textContentWidth: a,
+			taskIconWidth: c,
+			totalWidth: c + a + f
+		};
+	}, [
+		n.text,
+		n.taskStatus,
+		n.remark,
+		r,
+		d,
+		m,
+		y
+	]), O = -D / 2, k = O + E, A = r * .85, j = -r / 2 - 2, M = r + 4, N = r * .7, P = n.multiLineContent, F = r * 1.4, I = r / 2 + 8;
+	return /* @__PURE__ */ p("g", {
+		className: "mindmap-node-content",
+		children: [
+			n.taskStatus && /* @__PURE__ */ f("g", {
+				className: `mindmap-task-icon mindmap-task-${n.taskStatus}`,
+				transform: `translate(${O}, ${-A / 2})`,
+				children: /* @__PURE__ */ f(g, {
+					status: n.taskStatus,
+					size: A
+				})
+			}),
+			w.map((e, t) => e.token.type === "code" ? /* @__PURE__ */ f("rect", {
+				className: "mindmap-code-bg",
+				x: k + e.x - 2,
+				y: j,
+				width: e.width + 4,
+				height: M,
+				rx: 3,
+				fill: "rgba(128,128,128,0.12)"
+			}, `bg-${t}`) : e.token.type === "highlight" ? /* @__PURE__ */ f("rect", {
+				className: "mindmap-highlight-bg",
+				x: k + e.x - 1,
+				y: j,
+				width: e.width + 2,
+				height: M,
+				rx: 2,
+				fill: x || "rgba(255,213,79,0.3)"
+			}, `bg-${t}`) : null),
+			/* @__PURE__ */ f("text", {
+				className: "mindmap-node-text",
+				textAnchor: "start",
+				dominantBaseline: "central",
+				x: k,
+				fill: _,
+				fontSize: r,
+				fontWeight: d,
+				fontFamily: m,
+				children: w.map((e, t) => h(e, t, y, b))
+			}),
+			S && w.map((e, t) => {
+				let { token: n } = e;
+				if (n.type !== "latex-inline" && n.type !== "latex-block") return null;
+				let i = s(n.content, n.type === "latex-block");
+				if (!i) return null;
+				a();
+				let o = k + e.x + e.width / 2, c = Math.max(e.width * 2.5, 120), l = r * 2;
+				return /* @__PURE__ */ f("foreignObject", {
+					className: "mindmap-latex",
+					x: o - c / 2,
+					y: -l / 2,
+					width: c,
+					height: l,
+					style: {
+						overflow: "visible",
+						pointerEvents: "none"
+					},
+					children: /* @__PURE__ */ f("div", {
+						style: {
+							fontSize: r * .75,
+							lineHeight: `${l}px`,
+							color: _,
+							whiteSpace: "nowrap",
+							textAlign: "center"
+						},
+						dangerouslySetInnerHTML: { __html: i }
+					})
+				}, `latex-fo-${t}`);
+			}),
+			P && P.length > 0 && P.map((n, i) => {
+				let o = r * .85, c = e(t(n, y), o, 400, m), l = -(c.length > 0 ? c[c.length - 1].x + c[c.length - 1].width : 0) / 2, u = I + i * F, d = u - o / 2 - 2, g = o + 4;
+				return /* @__PURE__ */ p("g", {
+					className: "mindmap-multiline",
+					children: [
+						c.map((e, t) => e.token.type === "code" ? /* @__PURE__ */ f("rect", {
+							className: "mindmap-code-bg",
+							x: l + e.x - 2,
+							y: d,
+							width: e.width + 4,
+							height: g,
+							rx: 3,
+							fill: "rgba(128,128,128,0.12)"
+						}, `ml-bg-${t}`) : e.token.type === "highlight" ? /* @__PURE__ */ f("rect", {
+							className: "mindmap-highlight-bg",
+							x: l + e.x - 1,
+							y: d,
+							width: e.width + 2,
+							height: g,
+							rx: 2,
+							fill: x || "rgba(255,213,79,0.3)"
+						}, `ml-bg-${t}`) : null),
+						/* @__PURE__ */ f("text", {
+							className: "mindmap-multiline-text",
+							x: l,
+							y: u,
+							textAnchor: "start",
+							dominantBaseline: "central",
+							fill: _,
+							fontSize: o,
+							fontWeight: 400,
+							fontFamily: m,
+							opacity: .8,
+							children: c.map((e, t) => h(e, t, y, b))
+						}),
+						S && c.map((e, t) => {
+							let { token: n } = e;
+							if (n.type !== "latex-inline" && n.type !== "latex-block") return null;
+							let r = s(n.content, n.type === "latex-block");
+							if (!r) return null;
+							a();
+							let c = l + e.x + e.width / 2, d = Math.max(e.width * 2.5, 120), p = o * 2;
+							return /* @__PURE__ */ f("foreignObject", {
+								className: "mindmap-latex",
+								x: c - d / 2,
+								y: u - p / 2,
+								width: d,
+								height: p,
+								style: {
+									overflow: "visible",
+									pointerEvents: "none"
+								},
+								children: /* @__PURE__ */ f("div", {
+									style: {
+										fontSize: o * .75,
+										lineHeight: `${p}px`,
+										color: _,
+										whiteSpace: "nowrap",
+										textAlign: "center",
+										opacity: .8
+									},
+									dangerouslySetInnerHTML: { __html: r }
+								})
+							}, `ml-latex-fo-${i}-${t}`);
+						})
+					]
+				}, `ml-${i}`);
+			}),
+			n.tags && n.tags.length > 0 && (() => {
+				let e = r * .65, t = r / 2 + 6 + (P ? P.length * F : 0), i = -D / 2;
+				return n.tags.map((n, r) => {
+					let a = n.length * e * .65 + 10, o = i;
+					i += a + 4;
+					let s = [
+						"#3B82F6",
+						"#8B5CF6",
+						"#EC4899",
+						"#F59E0B",
+						"#10B981",
+						"#6366F1"
+					], c = s[r % s.length];
+					return /* @__PURE__ */ p("g", {
+						className: "mindmap-tag",
+						children: [/* @__PURE__ */ f("rect", {
+							className: "mindmap-tag-bg",
+							x: o,
+							y: t,
+							width: a,
+							height: e + 6,
+							rx: 3,
+							fill: c,
+							opacity: .15
+						}), /* @__PURE__ */ f("text", {
+							className: "mindmap-tag-text",
+							x: o + a / 2,
+							y: t + (e + 6) / 2,
+							textAnchor: "middle",
+							dominantBaseline: "central",
+							fontSize: e,
+							fill: c,
+							fontFamily: m,
+							children: n
+						})]
+					}, `tag-${r}`);
+				});
+			})(),
+			n.remark && /* @__PURE__ */ p("text", {
+				className: "mindmap-remark-indicator",
+				x: k + T + 4,
+				textAnchor: "start",
+				dominantBaseline: "central",
+				fontSize: N,
+				opacity: .5,
+				style: { cursor: "help" },
+				onMouseEnter: () => v?.(n.id),
+				onMouseLeave: () => v?.(null),
+				children: [/* @__PURE__ */ f("title", { children: n.remark }), "💬"]
+			})
+		]
+	});
+}
+function v({ node: e, offset: t, isEditing: n, isPendingEdit: i, isSelected: a, isNew: o, isGhost: s, animClass: c, editText: l, theme: u, direction: m, readonly: h, plugins: g, onMouseDown: v, onClick: y, onDoubleClick: b, onEditChange: x, onEditCommit: S, onEditCancel: C, onAddChild: w, onRemarkHover: T, onFoldToggle: E, expandDelay: D }) {
+	let O = e.x + (t?.x ?? 0), k = e.y + (t?.y ?? 0), A = n || i, j = i && !n ? "" : l, M = o ? "mindmap-node-new" : "", N = D === void 0 ? "" : "mindmap-node-expanding", P = D === void 0 ? void 0 : { animationDelay: `${D}ms` }, F = (e.taskStatus === "done" ? "[x] " : e.taskStatus === "doing" ? "[-] " : e.taskStatus === "todo" ? "[ ] " : "") + e.text, I = g && g.length > 0 ? r(g, e, u) : null;
+	if (e.depth === 0) {
+		let t = u.root.bgColor;
+		return /* @__PURE__ */ p("g", {
+			transform: `translate(${O}, ${k})`,
+			className: `mindmap-node-g mindmap-node-root ${c} ${M} ${N}`,
+			onMouseDown: (t) => v(t, e.id),
+			onClick: (t) => y(t, e.id),
+			onDoubleClick: (t) => b(t, e.id, F),
+			style: {
+				cursor: "pointer",
+				opacity: s ? .3 : 1,
+				...P
+			},
+			children: [
+				/* @__PURE__ */ f("rect", {
+					className: "mindmap-node-bg",
+					x: -e.width / 2,
+					y: -e.height / 2,
+					width: e.width,
+					height: e.height,
+					rx: e.height / 2,
+					ry: e.height / 2,
+					fill: t,
+					stroke: a ? u.selection.strokeColor : "none",
+					strokeWidth: a ? 2.5 : 0
+				}),
+				A ? /* @__PURE__ */ f("foreignObject", {
+					x: -e.width / 2,
+					y: -e.height / 2,
+					width: e.width,
+					height: e.height,
+					children: /* @__PURE__ */ f("input", {
+						className: "mindmap-edit-input mindmap-edit-root",
+						value: j,
+						onChange: (e) => x(e.target.value),
+						onKeyDown: (e) => {
+							e.key === "Enter" && S();
+						},
+						onBlur: S,
+						autoFocus: !0,
+						style: {
+							fontSize: u.root.fontSize,
+							fontWeight: u.root.fontWeight,
+							fontFamily: u.root.fontFamily
+						}
+					})
+				}) : /* @__PURE__ */ f(_, {
+					node: e,
+					fontSize: u.root.fontSize,
+					fontWeight: u.root.fontWeight,
+					fontFamily: u.root.fontFamily,
+					textColor: u.root.textColor,
+					onRemarkHover: T,
+					plugins: g,
+					highlightTextColor: u.highlight.textColor,
+					highlightBgColor: u.highlight.bgColor
+				}),
+				I,
+				!h && !s && (m === "right" || m === "both") && /* @__PURE__ */ p("g", {
+					className: "mindmap-add-btn",
+					onMouseDown: (e) => e.stopPropagation(),
+					onClick: (t) => w(t, e.id, "right"),
+					children: [
+						/* @__PURE__ */ f("circle", {
+							cx: e.width / 2 + 18,
+							cy: 0,
+							r: 11,
+							fill: u.addBtn.fill
+						}),
+						/* @__PURE__ */ f("line", {
+							x1: e.width / 2 + 14,
+							y1: 0,
+							x2: e.width / 2 + 22,
+							y2: 0,
+							stroke: u.addBtn.iconColor,
+							strokeWidth: 2,
+							strokeLinecap: "round"
+						}),
+						/* @__PURE__ */ f("line", {
+							x1: e.width / 2 + 18,
+							y1: -4,
+							x2: e.width / 2 + 18,
+							y2: 4,
+							stroke: u.addBtn.iconColor,
+							strokeWidth: 2,
+							strokeLinecap: "round"
+						})
+					]
+				}),
+				!h && !s && (m === "left" || m === "both") && /* @__PURE__ */ p("g", {
+					className: "mindmap-add-btn",
+					onMouseDown: (e) => e.stopPropagation(),
+					onClick: (t) => w(t, e.id, "left"),
+					children: [
+						/* @__PURE__ */ f("circle", {
+							cx: -(e.width / 2 + 18),
+							cy: 0,
+							r: 11,
+							fill: u.addBtn.fill
+						}),
+						/* @__PURE__ */ f("line", {
+							x1: -(e.width / 2 + 22),
+							y1: 0,
+							x2: -(e.width / 2 + 14),
+							y2: 0,
+							stroke: u.addBtn.iconColor,
+							strokeWidth: 2,
+							strokeLinecap: "round"
+						}),
+						/* @__PURE__ */ f("line", {
+							x1: -(e.width / 2 + 18),
+							y1: -4,
+							x2: -(e.width / 2 + 18),
+							y2: 4,
+							stroke: u.addBtn.iconColor,
+							strokeWidth: 2,
+							strokeLinecap: "round"
+						})
+					]
+				}),
+				e.collapsed !== void 0 && h && E && /* @__PURE__ */ f("g", {
+					className: "mindmap-fold-btn",
+					style: { cursor: "pointer" },
+					onMouseDown: (e) => e.stopPropagation(),
+					onClick: (t) => {
+						t.stopPropagation(), E(e.id);
+					},
+					children: /* @__PURE__ */ f("circle", {
+						cx: e.width / 2 + 14,
+						cy: 0,
+						r: 6,
+						fill: e.color
+					})
+				})
+			]
+		}, e.id);
+	}
+	let L = e.depth === 1 ? u.level1.fontSize : u.node.fontSize, R = e.depth === 1 ? u.level1.fontWeight : u.node.fontWeight, z = e.width - u.node.paddingH * 2, B = L / 2 + 4, V = e.side === "left" ? -e.width / 2 - 18 : e.width / 2 + 18;
+	return /* @__PURE__ */ p("g", {
+		transform: `translate(${O}, ${k})`,
+		className: `mindmap-node-g mindmap-node-child ${c} ${M}`,
+		onMouseDown: (t) => v(t, e.id),
+		onClick: (t) => y(t, e.id),
+		onDoubleClick: (t) => b(t, e.id, F),
+		style: {
+			cursor: "pointer",
+			opacity: s ? .3 : 1
+		},
+		children: [
+			/* @__PURE__ */ f("rect", {
+				className: "mindmap-node-bg",
+				x: -e.width / 2,
+				y: -e.height / 2,
+				width: e.width,
+				height: e.height,
+				fill: a ? u.selection.fillColor : "transparent",
+				stroke: a ? u.selection.strokeColor : "none",
+				strokeWidth: a ? 1.5 : 0,
+				rx: 4
+			}),
+			A ? /* @__PURE__ */ f("foreignObject", {
+				x: -Math.max(e.width, 80) / 2,
+				y: -e.height / 2,
+				width: Math.max(e.width, 80),
+				height: e.height,
+				children: /* @__PURE__ */ f("input", {
+					className: "mindmap-edit-input mindmap-edit-child",
+					value: j,
+					onChange: (e) => x(e.target.value),
+					onKeyDown: (e) => {
+						e.key === "Enter" && S(), e.key === "Escape" && C();
+					},
+					onBlur: S,
+					autoFocus: !0,
+					style: {
+						fontSize: L,
+						fontWeight: R,
+						fontFamily: u.node.fontFamily,
+						color: u.node.textColor,
+						textAlign: "center",
+						borderBottom: `2.5px solid ${e.color}`
+					}
+				})
+			}) : /* @__PURE__ */ p(d, { children: [/* @__PURE__ */ f(_, {
+				node: e,
+				fontSize: L,
+				fontWeight: R,
+				fontFamily: u.node.fontFamily,
+				textColor: u.node.textColor,
+				onRemarkHover: T,
+				plugins: g,
+				highlightTextColor: u.highlight.textColor,
+				highlightBgColor: u.highlight.bgColor
+			}), /* @__PURE__ */ f("line", {
+				className: "mindmap-node-underline",
+				x1: -z / 2,
+				y1: B,
+				x2: z / 2,
+				y2: B,
+				stroke: e.color,
+				strokeWidth: 2.5,
+				strokeLinecap: "round"
+			})] }),
+			I,
+			!h && !s && /* @__PURE__ */ p("g", {
+				className: "mindmap-add-btn",
+				onMouseDown: (e) => e.stopPropagation(),
+				onClick: (t) => w(t, e.id),
+				children: [
+					/* @__PURE__ */ f("circle", {
+						cx: V,
+						cy: 0,
+						r: 11,
+						fill: u.addBtn.fill
+					}),
+					/* @__PURE__ */ f("line", {
+						x1: V - 4,
+						y1: 0,
+						x2: V + 4,
+						y2: 0,
+						stroke: u.addBtn.iconColor,
+						strokeWidth: 2,
+						strokeLinecap: "round"
+					}),
+					/* @__PURE__ */ f("line", {
+						x1: V,
+						y1: -4,
+						x2: V,
+						y2: 4,
+						stroke: u.addBtn.iconColor,
+						strokeWidth: 2,
+						strokeLinecap: "round"
+					})
+				]
+			}),
+			e.collapsed !== void 0 && h && E && /* @__PURE__ */ f("g", {
+				className: "mindmap-fold-btn",
+				style: { cursor: "pointer" },
+				onMouseDown: (e) => e.stopPropagation(),
+				onClick: (t) => {
+					t.stopPropagation(), E(e.id);
+				},
+				children: /* @__PURE__ */ f("circle", {
+					cx: V,
+					cy: 0,
+					r: 6,
+					fill: e.color
+				})
+			})
+		]
+	}, e.id);
+}
+//#endregion
+export { v as MindMapNode };

package/dist/esm/components/icons.js

@@ -0,0 +1,45 @@
+import { jsx as e, jsxs as t } from "react/jsx-runtime";
+//#region src/components/MindMap/components/icons.tsx
+function n({ size: n = 24, className: r }) {
+	return /* @__PURE__ */ t("svg", {
+		width: n,
+		height: n,
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: 2,
+		strokeLinecap: "round",
+		className: r,
+		children: [/* @__PURE__ */ e("line", {
+			x1: "12",
+			y1: "5",
+			x2: "12",
+			y2: "19"
+		}), /* @__PURE__ */ e("line", {
+			x1: "5",
+			y1: "12",
+			x2: "19",
+			y2: "12"
+		})]
+	});
+}
+function r({ size: t = 24, className: n }) {
+	return /* @__PURE__ */ e("svg", {
+		width: t,
+		height: t,
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: 2,
+		strokeLinecap: "round",
+		className: n,
+		children: /* @__PURE__ */ e("line", {
+			x1: "5",
+			y1: "12",
+			x2: "19",
+			y2: "12"
+		})
+	});
+}
+//#endregion
+export { r as IconMinus, n as IconPlus };