@xiangfa/mindmap 0.4.0 → 0.5.0

package/dist/esm/components/MindMapAIInput.js

@@ -2,7 +2,7 @@ import { IconClose as e, IconLightning as t, IconLoaderCircle as n, IconPapercli
 import { useCallback as a, useRef as o, useState as s } from "react";
 import { Fragment as c, jsx as l, jsxs as u } from "react/jsx-runtime";
 //#region src/components/MindMap/components/MindMapAIInput.tsx
-var d = "#Role\nYou are a professional Mind Map Generator specializing in hierarchical information architecture. Your objective is to deconstruct complex topics into a robust, visual Markdown outline.\n\n#Logic and Structure\n- Primary Branches: Use the MECE (Mutually Exclusive, Collectively Exhaustive) principle to ensure no overlap and complete coverage of the topic.\n- Branching Density: Aim for 3-5 primary branches. For narrow topics that do not naturally yield five branches, provide at least 3 branches and prioritize hierarchical depth over breadth.\n- Hierarchical Depth: The structure must not exceed a maximum depth of the Root + 3 levels.\n- Logical Flow: Organize the sequence of branches and sub-nodes based on priority, moving from foundational concepts to advanced applications.\n- Task Status Logic:\n  - `- [x] ` : Assigned to foundational, prerequisite, or essential concepts.\n  - `- [-] ` : Assigned to intermediate, active, or transitional concepts.\n  - `- [ ] ` : Assigned to advanced, future-state, or specialized concepts.\n\n#Formatting Standards\n- Root Node: Place the root node on the first line of the response with no prefix (no hyphen, bullet, or number).\n- Indentation: Use exactly two spaces per level of hierarchy to define the structure.\n- Child Node Prefix: Every child node must start with a hyphen followed by a space (\"- \").\n- Text Constraints: Each node must contain between 2 and 6 visible words. Markdown formatting characters (e.g., **, ==, `) do not count toward this 2-6 word limit.\n- Remarks: Insert contextual notes or brief explanations immediately after relevant nodes using the \"> \" prefix.\n- Inline Styling: Use Obsidian-compatible Markdown for emphasis: **bold**, *italic*, `code`, ~~strikethrough~~, and ==highlighting==.\n\n#Extended Syntax (Optional)\nUse these features only when they naturally enhance the mind map's clarity or structure. Do not force them into every response.\n- Dotted Lines: Use \"-.\" instead of \"-\" for weak, optional, or tentative relationships. Example: \"-. Optional Step\"\n- Multi-line Content: Use \"|\" prefix lines to append additional display lines to a node. Example:\n  - Main Point\n    | Supporting detail line 1\n    | Supporting detail line 2\n- Tags: Add \"#tag\" at the end of node text for categorization. Example: \"- React #frontend #framework\"\n- Cross-links: Define anchors with \"{#id}\" and link with \"-> {#id}\" to connect nodes across branches. Example:\n  - Node A {#a}\n  - Node B\n    -> {#a} \"references\"\n- Folding: Use \"+\" instead of \"-\" to mark a node as initially collapsed (children hidden by default). Example: \"+ Collapsed Section\"\n- LaTeX: Use \"$...$\" for inline math and \"$$...$$\" for display math. Example: \"- Energy: $E = mc^2$\"\n- Frontmatter: Use a \"---\" block at the very top to set layout direction or theme:\n  ---\n  direction: right\n  theme: dark\n  ---\n\n#Example Output\nProject Management\n- [x] **Foundational Concepts** #core\n  - Project Life Cycle\n    > Initiation through closing phases\n    | Planning, executing, monitoring\n  - Stakeholder Identification\n- [-] *Execution Frameworks*\n  - ==Agile Methodologies==\n  -. Hybrid Approaches\n- [ ] Advanced Optimization\n  - Resource Load Balancing\n    > Optimizing team allocation\n  - Portfolio Risk Mitigation\n\n#Constraints\n- Provide the raw Markdown output only.\n- Do not include any introductory text, conversational fillers, or explanations.\n- Do not include any concluding remarks or summaries.\n- Use extended syntax features (dotted lines, tags, multi-line, cross-links, etc.) only when they genuinely improve the mind map's clarity or structure. Default to basic syntax.\n- FINAL NEGATIVE CONSTRAINT: Do not wrap the output in markdown code fences. Provide the response as raw, plain text.";
+var d = "#Role\nYou are a professional Mind Map Generator specializing in hierarchical information architecture. Your objective is to deconstruct complex topics into a robust, visual Markdown outline.\n\n#Logic and Structure\n- Primary Branches: Use the MECE (Mutually Exclusive, Collectively Exhaustive) principle to ensure no overlap and complete coverage of the topic.\n- Branching Density: Aim for 3-5 primary branches. For narrow topics that do not naturally yield five branches, provide at least 3 branches and prioritize hierarchical depth over breadth.\n- Hierarchical Depth: The structure must not exceed a maximum depth of the Root + 3 levels.\n- Logical Flow: Organize the sequence of branches and sub-nodes based on priority, moving from foundational concepts to advanced applications.\n\n#Formatting Standards\n- Root Node: Place the root node on the first line of the response with no prefix (no hyphen, bullet, or number).\n- Indentation: Use exactly two spaces per level of hierarchy to define the structure.\n- Child Node Prefix: Every child node must start with a hyphen followed by a space (\"- \").\n- Text Constraints: Each node must contain between 2 and 6 visible words. Markdown formatting characters (e.g., **, ==, `) do not count toward this 2-6 word limit.\n- Remarks: Insert contextual notes or brief explanations immediately after relevant nodes using the \"> \" prefix.\n- Inline Styling: Use Obsidian-compatible Markdown for emphasis: **bold**, *italic*, `code`, ~~strikethrough~~, and ==highlighting==.\n\n#Extended Syntax (Optional)\nUse these features only when they naturally enhance the mind map's clarity or structure. Do not force them into every response.\n- Dotted Lines: Use \"-.\" instead of \"-\" for weak, optional, or tentative relationships. Example: \"-. Optional Step\"\n- Multi-line Content: Use \"|\" prefix lines to append additional display lines to a node. Example:\n  - Main Point\n    | Supporting detail line 1\n    | Supporting detail line 2\n- Tags: Add \"#tag\" at the end of node text for categorization. Example: \"- React #frontend #framework\"\n- Cross-links: Define anchors with \"{#id}\" and link with \"-> {#id}\" to connect nodes across branches. Example:\n  - Node A {#a}\n  - Node B\n    -> {#a} \"references\"\n- Folding: Use \"+\" instead of \"-\" to mark a node as initially collapsed (children hidden by default). Example: \"+ Collapsed Section\"\n- LaTeX: Use \"$...$\" for inline math and \"$$...$$\" for display math. Example: \"- Energy: $E = mc^2$\"\n- Frontmatter: Use a \"---\" block at the very top to set layout direction or theme:\n  ---\n  direction: right\n  theme: dark\n  ---\n\n#Example Output\nProject Management\n- **Foundational Concepts** #core\n  - Project Life Cycle\n    > Initiation through closing phases\n    | Planning, executing, monitoring\n  - Stakeholder Identification\n- *Execution Frameworks*\n  - ==Agile Methodologies==\n  -. Hybrid Approaches\n- Advanced Optimization\n  - Resource Load Balancing\n    > Optimizing team allocation\n  - Portfolio Risk Mitigation\n\n#Constraints\n- Provide the raw Markdown output only.\n- Do not include any introductory text, conversational fillers, or explanations.\n- Do not include any concluding remarks or summaries.\n- Use extended syntax features (dotted lines, tags, multi-line, cross-links, etc.) only when they genuinely improve the mind map's clarity or structure. Default to basic syntax.\n- FINAL NEGATIVE CONSTRAINT: Do not wrap the output in markdown code fences. Provide the response as raw, plain text.";
 function f(e) {
 	if (!e || e.length === 0) return "";
 	let t = [];
@@ -129,24 +129,17 @@ function g({ config: g, theme: _, messages: v, currentMarkdown: y, onMarkdownStr
 	}, []);
 	return /* @__PURE__ */ u("div", {
 		className: "mindmap-ai-input",
-		style: {
-			background: _.controls.bgColor,
-			color: _.controls.textColor,
-			borderColor: _.contextMenu.borderColor
-		},
 		children: [
 			D.length > 0 && /* @__PURE__ */ l("div", {
 				className: "mindmap-ai-file-previews",
 				children: D.map((t, n) => /* @__PURE__ */ u("span", {
 					className: "mindmap-ai-file-chip",
-					style: { background: _.controls.hoverBg },
 					children: [/* @__PURE__ */ l("span", {
 						className: "mindmap-ai-file-name",
 						children: t.name
 					}), /* @__PURE__ */ l("button", {
 						className: "mindmap-ai-file-remove",
 						onClick: () => z(n),
-						style: { color: _.controls.textColor },
 						children: /* @__PURE__ */ l(e, { size: 12 })
 					})]
 				}, n))
@@ -159,7 +152,6 @@ function g({ config: g, theme: _, messages: v, currentMarkdown: y, onMarkdownStr
 						onClick: () => M.current?.click(),
 						disabled: T,
 						title: v.aiPlaceholder,
-						style: { color: _.controls.textColor },
 						children: /* @__PURE__ */ l(r, { size: 18 })
 					}), /* @__PURE__ */ l("input", {
 						ref: M,
@@ -176,8 +168,7 @@ function g({ config: g, theme: _, messages: v, currentMarkdown: y, onMarkdownStr
 						onChange: (e) => w(e.target.value),
 						onKeyDown: L,
 						placeholder: T ? v.aiGenerating : v.aiPlaceholder,
-						disabled: T,
-						style: { color: _.controls.textColor }
+						disabled: T
 					}),
 					/* @__PURE__ */ l("button", {
 						className: `mindmap-ai-send-btn${T ? " mindmap-ai-send-btn--loading" : ""}`,
@@ -199,7 +190,6 @@ function g({ config: g, theme: _, messages: v, currentMarkdown: y, onMarkdownStr
 			}),
 			k && /* @__PURE__ */ l("div", {
 				className: "mindmap-ai-error",
-				style: { color: "#ef4444" },
 				children: k
 			})
 		]

package/dist/esm/components/MindMapContextMenu.js

@@ -1,116 +1,87 @@
 import { useState as e } from "react";
 import { Fragment as t, jsx as n, jsxs as r } from "react/jsx-runtime";
 //#region src/components/MindMap/components/MindMapContextMenu.tsx
-function i({ position: i, theme: a, messages: o, readonly: s, onNewRootNode: c, onExportSVG: l, onExportPNG: u, onExportMarkdown: d, onDirectionChange: f, onClose: p }) {
-	let [m, h] = e(!1), [g, _] = e(!1);
+function i({ position: i, messages: a, readonly: o, onNewRootNode: s, onExportSVG: c, onExportPNG: l, onExportMarkdown: u, onDirectionChange: d, onClose: f }) {
+	let [p, m] = e(!1), [h, g] = e(!1);
 	return /* @__PURE__ */ r("div", {
 		className: "mindmap-context-menu",
 		style: {
 			left: i.x,
-			top: i.y,
-			background: a.contextMenu.bgColor,
-			color: a.contextMenu.textColor,
-			boxShadow: `0 4px 16px ${a.contextMenu.shadowColor}`,
-			borderColor: a.contextMenu.borderColor
+			top: i.y
 		},
 		onClick: (e) => e.stopPropagation(),
 		children: [
-			!s && /* @__PURE__ */ r(t, { children: [/* @__PURE__ */ n("div", {
+			!o && /* @__PURE__ */ r(t, { children: [/* @__PURE__ */ n("div", {
 				className: "mindmap-ctx-item mindmap-ctx-new-root",
-				onClick: c,
-				style: { color: a.contextMenu.textColor },
-				children: o.newRootNode
-			}), /* @__PURE__ */ n("div", {
-				className: "mindmap-ctx-divider",
-				style: { borderColor: a.contextMenu.borderColor }
-			})] }),
+				onClick: s,
+				children: a.newRootNode
+			}), /* @__PURE__ */ n("div", { className: "mindmap-ctx-divider" })] }),
 			/* @__PURE__ */ r("div", {
 				className: "mindmap-ctx-item mindmap-ctx-has-sub mindmap-ctx-layout",
-				onMouseEnter: () => _(!0),
-				onMouseLeave: () => _(!1),
-				style: { color: a.contextMenu.textColor },
+				onMouseEnter: () => g(!0),
+				onMouseLeave: () => g(!1),
 				children: [
-					o.layout,
+					a.layout,
 					/* @__PURE__ */ n("span", {
 						className: "mindmap-ctx-arrow",
 						children: "▶"
 					}),
-					g && /* @__PURE__ */ r("div", {
+					h && /* @__PURE__ */ r("div", {
 						className: "mindmap-ctx-submenu",
-						style: {
-							background: a.contextMenu.bgColor,
-							boxShadow: `0 4px 16px ${a.contextMenu.shadowColor}`,
-							borderColor: a.contextMenu.borderColor
-						},
 						children: [
 							/* @__PURE__ */ n("div", {
 								className: "mindmap-ctx-item mindmap-ctx-layout-left",
 								onClick: () => {
-									f("left"), p();
+									d("left"), f();
 								},
-								style: { color: a.contextMenu.textColor },
-								children: o.layoutLeft
+								children: a.layoutLeft
 							}),
 							/* @__PURE__ */ n("div", {
 								className: "mindmap-ctx-item mindmap-ctx-layout-both",
 								onClick: () => {
-									f("both"), p();
+									d("both"), f();
 								},
-								style: { color: a.contextMenu.textColor },
-								children: o.layoutBoth
+								children: a.layoutBoth
 							}),
 							/* @__PURE__ */ n("div", {
 								className: "mindmap-ctx-item mindmap-ctx-layout-right",
 								onClick: () => {
-									f("right"), p();
+									d("right"), f();
 								},
-								style: { color: a.contextMenu.textColor },
-								children: o.layoutRight
+								children: a.layoutRight
 							})
 						]
 					})
 				]
 			}),
-			/* @__PURE__ */ n("div", {
-				className: "mindmap-ctx-divider",
-				style: { borderColor: a.contextMenu.borderColor }
-			}),
+			/* @__PURE__ */ n("div", { className: "mindmap-ctx-divider" }),
 			/* @__PURE__ */ r("div", {
 				className: "mindmap-ctx-item mindmap-ctx-has-sub mindmap-ctx-export",
-				onMouseEnter: () => h(!0),
-				onMouseLeave: () => h(!1),
-				style: { color: a.contextMenu.textColor },
+				onMouseEnter: () => m(!0),
+				onMouseLeave: () => m(!1),
 				children: [
-					o.export,
+					a.export,
 					/* @__PURE__ */ n("span", {
 						className: "mindmap-ctx-arrow",
 						children: "▶"
 					}),
-					m && /* @__PURE__ */ r("div", {
+					p && /* @__PURE__ */ r("div", {
 						className: "mindmap-ctx-submenu",
-						style: {
-							background: a.contextMenu.bgColor,
-							boxShadow: `0 4px 16px ${a.contextMenu.shadowColor}`,
-							borderColor: a.contextMenu.borderColor
-						},
 						children: [
 							/* @__PURE__ */ n("div", {
 								className: "mindmap-ctx-item mindmap-ctx-export-svg",
-								onClick: l,
-								style: { color: a.contextMenu.textColor },
-								children: o.exportSVG
+								onClick: c,
+								children: a.exportSVG
 							}),
 							/* @__PURE__ */ n("div", {
 								className: "mindmap-ctx-item mindmap-ctx-export-png",
-								onClick: u,
-								style: { color: a.contextMenu.textColor },
-								children: o.exportPNG
+								onClick: l,
+								children: a.exportPNG
 							}),
 							/* @__PURE__ */ n("div", {
 								className: "mindmap-ctx-item mindmap-ctx-export-md",
-								onClick: d,
-								style: { color: a.contextMenu.textColor },
-								children: o.exportMarkdown
+								onClick: u,
+								children: a.exportMarkdown
 							})
 						]
 					})

package/dist/esm/components/MindMapControls.js

@@ -1,48 +1,36 @@
 import { IconMinus as e, IconPlus as t } from "./icons.js";
 import { Fragment as n, jsx as r, jsxs as i } from "react/jsx-runtime";
 //#region src/components/MindMap/components/MindMapControls.tsx
-function a({ zoom: a, theme: o, messages: s, showZoom: c = !0, mode: l, isFullscreen: u, onZoomIn: d, onZoomOut: f, onAutoFit: p, onModeToggle: m, onFullscreenToggle: h }) {
-	return /* @__PURE__ */ i(n, { children: [c && /* @__PURE__ */ i("div", {
+function a({ zoom: a, messages: o, showZoom: s = !0, mode: c, isFullscreen: l, onZoomIn: u, onZoomOut: d, onAutoFit: f, onModeToggle: p, onFullscreenToggle: m }) {
+	return /* @__PURE__ */ i(n, { children: [s && /* @__PURE__ */ i("div", {
 		className: "mindmap-zoom-controls",
-		style: {
-			background: o.controls.bgColor,
-			color: o.controls.textColor
-		},
 		children: [
 			/* @__PURE__ */ r("button", {
 				className: "mindmap-ctrl-btn mindmap-ctrl-zoom-out",
-				onClick: f,
-				title: s.zoomOut,
-				style: { color: o.controls.textColor },
+				onClick: d,
+				title: o.zoomOut,
 				children: /* @__PURE__ */ r(e, { size: 16 })
 			}),
 			/* @__PURE__ */ i("button", {
 				className: "mindmap-ctrl-pct",
-				onClick: p,
-				title: s.resetView,
-				style: { color: o.controls.textColor },
+				onClick: f,
+				title: o.resetView,
 				children: [Math.round(a * 100), "%"]
 			}),
 			/* @__PURE__ */ r("button", {
 				className: "mindmap-ctrl-btn mindmap-ctrl-zoom-in",
-				onClick: d,
-				title: s.zoomIn,
-				style: { color: o.controls.textColor },
+				onClick: u,
+				title: o.zoomIn,
 				children: /* @__PURE__ */ r(t, { size: 16 })
 			})
 		]
 	}), /* @__PURE__ */ i("div", {
 		className: "mindmap-extra-controls",
-		style: {
-			background: o.controls.bgColor,
-			color: o.controls.textColor
-		},
 		children: [/* @__PURE__ */ r("button", {
 			className: "mindmap-ctrl-btn mindmap-ctrl-mode",
-			onClick: m,
-			title: l === "view" ? s.textMode : s.viewMode,
-			style: { color: o.controls.textColor },
-			children: l === "view" ? /* @__PURE__ */ i("svg", {
+			onClick: p,
+			title: c === "view" ? o.textMode : o.viewMode,
+			children: c === "view" ? /* @__PURE__ */ i("svg", {
 				width: 16,
 				height: 16,
 				viewBox: "0 0 24 24",
@@ -73,10 +61,9 @@ function a({ zoom: a, theme: o, messages: s, showZoom: c = !0, mode: l, isFullsc
 			})
 		}), /* @__PURE__ */ r("button", {
 			className: "mindmap-ctrl-btn mindmap-ctrl-fullscreen",
-			onClick: h,
-			title: u ? s.exitFullscreen : s.fullscreen,
-			style: { color: o.controls.textColor },
-			children: u ? /* @__PURE__ */ i("svg", {
+			onClick: m,
+			title: l ? o.exitFullscreen : o.fullscreen,
+			children: l ? /* @__PURE__ */ i("svg", {
 				width: 16,
 				height: 16,
 				viewBox: "0 0 24 24",

package/dist/esm/components/MindMapNode.js

@@ -193,17 +193,12 @@ function _({ node: n, fontSize: r, fontWeight: d, fontFamily: m, textColor: _, o
 					y: -l / 2,
 					width: c,
 					height: l,
-					style: {
-						overflow: "visible",
-						pointerEvents: "none"
-					},
 					children: /* @__PURE__ */ f("div", {
+						className: "mindmap-latex-content",
 						style: {
 							fontSize: r * .75,
 							lineHeight: `${l}px`,
-							color: _,
-							whiteSpace: "nowrap",
-							textAlign: "center"
+							color: _
 						},
 						dangerouslySetInnerHTML: { __html: i }
 					})
@@ -257,17 +252,12 @@ function _({ node: n, fontSize: r, fontWeight: d, fontFamily: m, textColor: _, o
 								y: u - p / 2,
 								width: d,
 								height: p,
-								style: {
-									overflow: "visible",
-									pointerEvents: "none"
-								},
 								children: /* @__PURE__ */ f("div", {
+									className: "mindmap-latex-content",
 									style: {
 										fontSize: o * .75,
 										lineHeight: `${p}px`,
 										color: _,
-										whiteSpace: "nowrap",
-										textAlign: "center",
 										opacity: .8
 									},
 									dangerouslySetInnerHTML: { __html: r }
@@ -322,7 +312,6 @@ function _({ node: n, fontSize: r, fontWeight: d, fontFamily: m, textColor: _, o
 				dominantBaseline: "central",
 				fontSize: N,
 				opacity: .5,
-				style: { cursor: "help" },
 				onMouseEnter: () => v?.(n.id),
 				onMouseLeave: () => v?.(null),
 				children: [/* @__PURE__ */ f("title", { children: n.remark }), "💬"]
@@ -336,15 +325,12 @@ function v({ node: e, offset: t, isEditing: n, isPendingEdit: i, isSelected: a,
 		let t = u.root.bgColor;
 		return /* @__PURE__ */ p("g", {
 			transform: `translate(${O}, ${k})`,
-			className: `mindmap-node-g mindmap-node-root ${c} ${M} ${N}`,
+			className: `mindmap-node-g mindmap-node-root ${c} ${M} ${N}${s ? " mindmap-node-ghost" : ""}`,
+			"data-branch-index": e.branchIndex,
 			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
-			},
+			style: P,
 			children: [
 				/* @__PURE__ */ f("rect", {
 					className: "mindmap-node-bg",
@@ -454,7 +440,6 @@ function v({ node: e, offset: t, isEditing: n, isPendingEdit: i, isSelected: a,
 				}),
 				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);
@@ -472,14 +457,11 @@ function v({ node: e, offset: t, isEditing: n, isPendingEdit: i, isSelected: a,
 	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}`,
+		className: `mindmap-node-g mindmap-node-child ${c} ${M}${s ? " mindmap-node-ghost" : ""}`,
+		"data-branch-index": e.branchIndex,
 		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",
@@ -569,7 +551,6 @@ function v({ node: e, offset: t, isEditing: n, isPendingEdit: i, isSelected: a,
 			}),
 			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);

package/dist/esm/style.css

@@ -1,2 +1,2 @@
-.mindmap-container{width:100%;height:100%;position:relative;overflow:hidden}.mindmap-svg{cursor:grab;-webkit-user-select:none;user-select:none;touch-action:none;width:100%;height:100%;display:block}.mindmap-svg:focus{outline:none}.mindmap-svg.dragging-canvas,.mindmap-svg.dragging-node{cursor:grabbing}.mindmap-node-animated{transition:transform .3s ease-out}.mindmap-edge-animated{transition:d .3s ease-out}@keyframes mindmap-node-appear{0%{opacity:0;transform:scale(.85)}to{opacity:1;transform:scale(1)}}.mindmap-node-new{animation:.3s ease-out mindmap-node-appear}@keyframes mindmap-expand-appear{0%{opacity:0;transform:scale(.5)}to{opacity:1;transform:scale(1)}}.mindmap-node-expanding{animation:.3s ease-out both mindmap-expand-appear}@keyframes mindmap-edge-draw{0%{stroke-dashoffset:300px}to{stroke-dashoffset:0}}.mindmap-edge-expanding{stroke-dasharray:300;animation:.3s ease-out both mindmap-edge-draw}.mindmap-edit-input{text-align:center;box-sizing:border-box;background:0 0;border:none;outline:none;width:100%;height:100%;margin:0;padding:0}.mindmap-edit-root{color:#fff;background:0 0}.mindmap-edit-child{color:inherit;background:0 0;border-radius:4px}.mindmap-zoom-controls{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:8px;align-items:center;gap:2px;padding:4px;display:flex;position:absolute;bottom:16px;left:16px;box-shadow:0 2px 8px #0000001a}.mindmap-ctrl-btn{cursor:pointer;width:32px;height:32px;color:inherit;background:0 0;border:none;border-radius:6px;justify-content:center;align-items:center;transition:background .15s,color .15s;display:flex}.mindmap-ctrl-btn:hover{background:#80808033}.mindmap-ctrl-pct{cursor:pointer;min-width:48px;height:32px;color:inherit;background:0 0;border:none;border-radius:6px;justify-content:center;align-items:center;font-family:system-ui,sans-serif;font-size:13px;font-weight:500;transition:background .15s;display:flex}.mindmap-ctrl-pct:hover{background:#80808033}.mindmap-extra-controls{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:20;border-radius:8px;align-items:center;gap:2px;padding:4px;display:flex;position:absolute;bottom:16px;right:16px;box-shadow:0 2px 8px #0000001a}.mindmap-text-editor{resize:none;box-sizing:border-box;z-index:10;border:none;outline:none;width:100%;height:100%;padding:24px;font-family:ui-monospace,SFMono-Regular,SF Mono,Menlo,monospace;font-size:15px;line-height:1.7;position:absolute;inset:0}.mindmap-add-btn{opacity:0;cursor:pointer;transition:opacity .2s}.mindmap-node-g:hover .mindmap-add-btn{opacity:1}.mindmap-context-menu{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);z-index:1000;border:1px solid;border-radius:8px;min-width:150px;padding:4px 0;font-family:system-ui,-apple-system,sans-serif;position:absolute}.mindmap-ctx-item{cursor:pointer;white-space:nowrap;justify-content:space-between;align-items:center;padding:8px 16px;font-size:14px;display:flex;position:relative}.mindmap-ctx-item:hover{filter:brightness(.92);background:#8080801a}.mindmap-ctx-arrow{opacity:.5;margin-left:12px;font-size:8px}.mindmap-ctx-divider{opacity:.3;border-top:1px solid;height:0;margin:4px 8px}.mindmap-ctx-submenu{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid;border-radius:8px;min-width:140px;padding:4px 0;position:absolute;top:-4px;left:100%}.mindmap-ctx-has-sub{position:relative}.mindmap-dialog-backdrop{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:2000;background:#0003;justify-content:center;align-items:center;font-family:system-ui,-apple-system,sans-serif;animation:.15s ease-out mindmap-fade-in;display:flex;position:absolute;inset:0}@keyframes mindmap-fade-in{0%{opacity:0}to{opacity:1}}.mindmap-dialog-modal{border:1px solid;border-radius:12px;width:calc(100% - 32px);max-width:480px;max-height:80%;padding:24px;animation:.2s ease-out mindmap-dialog-enter;position:relative;overflow-y:auto;box-shadow:0 8px 32px #0003}@keyframes mindmap-dialog-enter{0%{opacity:0;transform:scale(.95)translateY(8px)}to{opacity:1;transform:scale(1)translateY(0)}}.mindmap-dialog-header{justify-content:space-between;align-items:center;margin-bottom:16px;display:flex}.mindmap-dialog-title{margin:0;font-size:16px;font-weight:600}.mindmap-dialog-close{cursor:pointer;width:28px;height:28px;color:inherit;opacity:.5;background:0 0;border:none;border-radius:6px;flex-shrink:0;justify-content:center;align-items:center;transition:opacity .15s,background .15s;display:flex}.mindmap-dialog-close:hover{opacity:1;background:#80808033}@media (width<=500px){.mindmap-dialog-modal{max-height:90%;padding:16px}}@media (width<=768px){.mindmap-ctrl-btn{width:28px;height:28px}.mindmap-ctrl-btn svg{width:14px;height:14px}.mindmap-ctrl-pct{min-width:40px;height:28px;font-size:12px}.mindmap-zoom-controls,.mindmap-extra-controls{gap:1px;padding:3px;bottom:12px}.mindmap-zoom-controls{left:12px}.mindmap-extra-controls{right:12px}}.mindmap-node-content{white-space:nowrap;box-sizing:border-box;justify-content:center;align-items:center;gap:4px;line-height:1;display:flex;overflow:hidden}.mindmap-node-root-content{line-height:1}.mindmap-node-content strong{font-weight:700}.mindmap-node-content em{font-style:italic}.mindmap-node-content del{opacity:.6;text-decoration:line-through}.mindmap-node-content .mindmap-inline-code{background:#8080801f;border-radius:3px;padding:1px 4px;font-family:SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;font-size:.88em}.mindmap-node-content .mindmap-highlight{color:#fac800;background:#fcd34d33;border-radius:2px;padding:1px 2px}.mindmap-node-content .mindmap-link{color:#2563eb;cursor:pointer;text-decoration:none}.mindmap-node-content .mindmap-link:hover{text-decoration:underline}.mindmap-node-content .mindmap-inline-image{vertical-align:middle;border-radius:2px;max-width:80px;max-height:1.2em}.mindmap-node-root-content .mindmap-inline-code{background:#ffffff26}.mindmap-node-root-content .mindmap-highlight{color:#fcd34d;background:#fbbf2433}.mindmap-node-root-content .mindmap-link{color:#93c5fd}.mindmap-task-icon{vertical-align:middle;flex-shrink:0}.mindmap-remark-indicator{opacity:.5;cursor:help;flex-shrink:0;font-size:.7em;line-height:1;transition:opacity .15s}.mindmap-remark-indicator:hover{opacity:1}.mindmap-remark-tooltip{white-space:pre-wrap;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);z-index:1000;pointer-events:none;border-radius:8px;max-width:280px;padding:8px 12px;font-family:system-ui,-apple-system,sans-serif;font-size:13px;line-height:1.5;animation:.15s ease-out mindmap-fade-in;position:absolute;box-shadow:0 4px 16px #00000026}.mindmap-ai-input{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);z-index:30;border:1px solid;border-radius:26px;outline:none;width:calc(100% - 32px);max-width:600px;font-family:system-ui,-apple-system,sans-serif;animation:.15s ease-out mindmap-fade-in;position:absolute;bottom:56px;left:50%;transform:translate(-50%)}.mindmap-ai-input-row{align-items:center;gap:4px;padding:6px 6px 6px 16px;display:flex}.mindmap-ai-input-field{color:inherit;background:0 0;border:none;outline:none;flex:1;min-width:0;font-family:inherit;font-size:14px;line-height:1.5}.mindmap-ai-input-field:focus{box-shadow:none}.mindmap-ai-input-field::placeholder{opacity:.5}.mindmap-ai-input-field:disabled{opacity:.5;cursor:not-allowed}.mindmap-ai-send-btn{cursor:pointer;border:none;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:36px;height:36px;transition:background .15s,opacity .15s,transform .1s;display:flex;position:relative}.mindmap-ai-send-btn:hover:not(:disabled){opacity:.85;transform:scale(1.05)}.mindmap-ai-send-btn:disabled{cursor:not-allowed;opacity:.4}.mindmap-ai-send-btn--loading{cursor:pointer}@keyframes mindmap-ai-spin{to{transform:rotate(360deg)}}.mindmap-ai-spinner{justify-content:center;align-items:center;transition:opacity .2s;animation:.8s linear infinite mindmap-ai-spin;display:flex}.mindmap-ai-stop-icon{opacity:0;color:#ef4444;justify-content:center;align-items:center;transition:opacity .2s,transform .2s;display:flex;position:absolute;transform:scale(.5)}.mindmap-ai-send-btn--loading:hover .mindmap-ai-spinner{opacity:0}.mindmap-ai-send-btn--loading:hover .mindmap-ai-stop-icon{opacity:1;transform:scale(1)}.mindmap-ai-send-btn--loading:hover{background:#ef44441a!important}.mindmap-ai-attach-btn{cursor:pointer;opacity:.5;background:0 0;border:none;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:32px;height:32px;transition:opacity .15s,background .15s;display:flex}.mindmap-ai-attach-btn:hover:not(:disabled){opacity:1;background:#80808026}.mindmap-ai-attach-btn:disabled{cursor:not-allowed;opacity:.3}.mindmap-ai-file-previews{flex-wrap:wrap;gap:6px;padding:8px 12px 0;display:flex}.mindmap-ai-file-chip{border-radius:12px;align-items:center;gap:4px;max-width:160px;padding:3px 8px;font-size:12px;display:inline-flex}.mindmap-ai-file-name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.mindmap-ai-file-remove{cursor:pointer;opacity:.5;background:0 0;border:none;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:16px;height:16px;padding:0;transition:opacity .15s;display:flex}.mindmap-ai-file-remove:hover{opacity:1}.mindmap-ai-error{padding:0 16px 8px;font-size:12px;animation:.15s ease-out mindmap-fade-in}@media (width<=768px){.mindmap-ai-input{border-radius:20px;max-width:calc(100% - 24px);bottom:48px}.mindmap-ai-input-row{padding:4px 4px 4px 12px}.mindmap-ai-send-btn{width:32px;height:32px}}
+.mindmap-container{width:100%;height:100%;position:relative;overflow:hidden}.mindmap-svg{cursor:grab;-webkit-user-select:none;user-select:none;touch-action:none;background:var(--mindmap-canvas-bg);width:100%;height:100%;display:block}.mindmap-svg:focus{outline:none}.mindmap-svg.dragging-canvas,.mindmap-svg.dragging-node{cursor:grabbing}.mindmap-node-g{cursor:pointer}.mindmap-node-ghost{opacity:.3}.mindmap-canvas-ready{transition:opacity .4s ease-out}.mindmap-floating,.mindmap-floating-edge,.mindmap-edge-label{pointer-events:none}.mindmap-fold-btn{cursor:pointer}.mindmap-latex{pointer-events:none;overflow:visible}.mindmap-latex-content{white-space:nowrap;text-align:center}.mindmap-node-animated{transition:transform .3s ease-out}.mindmap-edge-animated{transition:d .3s ease-out}@keyframes mindmap-node-appear{0%{opacity:0;transform:scale(.85)}to{opacity:1;transform:scale(1)}}.mindmap-node-new{animation:.3s ease-out mindmap-node-appear}@keyframes mindmap-expand-appear{0%{opacity:0;transform:scale(.5)}to{opacity:1;transform:scale(1)}}.mindmap-node-expanding{animation:.3s ease-out both mindmap-expand-appear}@keyframes mindmap-edge-draw{0%{stroke-dashoffset:300px}to{stroke-dashoffset:0}}.mindmap-edge-expanding{stroke-dasharray:300;animation:.3s ease-out both mindmap-edge-draw}.mindmap-edit-input{text-align:center;box-sizing:border-box;background:0 0;border:none;outline:none;width:100%;height:100%;margin:0;padding:0}.mindmap-edit-root{color:#fff;background:0 0}.mindmap-edit-child{color:inherit;background:0 0;border-radius:4px}.mindmap-zoom-controls{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:var(--mindmap-controls-bg);color:var(--mindmap-controls-text);border-radius:8px;align-items:center;gap:2px;padding:4px;display:flex;position:absolute;bottom:16px;left:16px;box-shadow:0 2px 8px #0000001a}.mindmap-ctrl-btn{cursor:pointer;width:32px;height:32px;color:inherit;background:0 0;border:none;border-radius:6px;justify-content:center;align-items:center;transition:background .15s,color .15s;display:flex}.mindmap-ctrl-btn:hover{background:#80808033}.mindmap-ctrl-pct{cursor:pointer;min-width:48px;height:32px;color:inherit;background:0 0;border:none;border-radius:6px;justify-content:center;align-items:center;font-family:system-ui,sans-serif;font-size:13px;font-weight:500;transition:background .15s;display:flex}.mindmap-ctrl-pct:hover{background:#80808033}.mindmap-extra-controls{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:20;background:var(--mindmap-controls-bg);color:var(--mindmap-controls-text);border-radius:8px;align-items:center;gap:2px;padding:4px;display:flex;position:absolute;bottom:16px;right:16px;box-shadow:0 2px 8px #0000001a}.mindmap-text-editor{resize:none;box-sizing:border-box;z-index:10;background:var(--mindmap-canvas-bg);width:100%;height:100%;color:var(--mindmap-node-text);border:none;outline:none;padding:24px;font-family:ui-monospace,SFMono-Regular,SF Mono,Menlo,monospace;font-size:15px;line-height:1.7;position:absolute;inset:0}.mindmap-add-btn{opacity:0;cursor:pointer;transition:opacity .2s}.mindmap-node-g:hover .mindmap-add-btn{opacity:1}.mindmap-context-menu{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);z-index:1000;background:var(--mindmap-ctx-bg);min-width:150px;color:var(--mindmap-ctx-text);border:1px solid;border-color:var(--mindmap-ctx-border);box-shadow:0 4px 16px var(--mindmap-ctx-shadow);border-radius:8px;padding:4px 0;font-family:system-ui,-apple-system,sans-serif;position:absolute}.mindmap-ctx-item{cursor:pointer;white-space:nowrap;justify-content:space-between;align-items:center;padding:8px 16px;font-size:14px;display:flex;position:relative}.mindmap-ctx-item:hover{filter:brightness(.92);background:#8080801a}.mindmap-ctx-arrow{opacity:.5;margin-left:12px;font-size:8px}.mindmap-ctx-divider{opacity:.3;border-top:1px solid;height:0;margin:4px 8px}.mindmap-ctx-submenu{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:var(--mindmap-ctx-bg);border:1px solid;border-color:var(--mindmap-ctx-border);min-width:140px;box-shadow:0 4px 16px var(--mindmap-ctx-shadow);border-radius:8px;padding:4px 0;position:absolute;top:-4px;left:100%}.mindmap-ctx-has-sub{position:relative}.mindmap-dialog-backdrop{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:2000;background:#0003;justify-content:center;align-items:center;font-family:system-ui,-apple-system,sans-serif;animation:.15s ease-out mindmap-fade-in;display:flex;position:absolute;inset:0}@keyframes mindmap-fade-in{0%{opacity:0}to{opacity:1}}.mindmap-dialog-modal{border:1px solid;border-radius:12px;width:calc(100% - 32px);max-width:480px;max-height:80%;padding:24px;animation:.2s ease-out mindmap-dialog-enter;position:relative;overflow-y:auto;box-shadow:0 8px 32px #0003}@keyframes mindmap-dialog-enter{0%{opacity:0;transform:scale(.95)translateY(8px)}to{opacity:1;transform:scale(1)translateY(0)}}.mindmap-dialog-header{justify-content:space-between;align-items:center;margin-bottom:16px;display:flex}.mindmap-dialog-title{margin:0;font-size:16px;font-weight:600}.mindmap-dialog-close{cursor:pointer;width:28px;height:28px;color:inherit;opacity:.5;background:0 0;border:none;border-radius:6px;flex-shrink:0;justify-content:center;align-items:center;transition:opacity .15s,background .15s;display:flex}.mindmap-dialog-close:hover{opacity:1;background:#80808033}@media (width<=500px){.mindmap-dialog-modal{max-height:90%;padding:16px}}@media (width<=768px){.mindmap-ctrl-btn{width:28px;height:28px}.mindmap-ctrl-btn svg{width:14px;height:14px}.mindmap-ctrl-pct{min-width:40px;height:28px;font-size:12px}.mindmap-zoom-controls,.mindmap-extra-controls{gap:1px;padding:3px;bottom:12px}.mindmap-zoom-controls{left:12px}.mindmap-extra-controls{right:12px}}.mindmap-node-content{white-space:nowrap;box-sizing:border-box;justify-content:center;align-items:center;gap:4px;line-height:1;display:flex;overflow:hidden}.mindmap-node-root-content{line-height:1}.mindmap-node-content strong{font-weight:700}.mindmap-node-content em{font-style:italic}.mindmap-node-content del{opacity:.6;text-decoration:line-through}.mindmap-node-content .mindmap-inline-code{background:#8080801f;border-radius:3px;padding:1px 4px;font-family:SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;font-size:.88em}.mindmap-node-content .mindmap-highlight{color:#fac800;background:#fcd34d33;border-radius:2px;padding:1px 2px}.mindmap-node-content .mindmap-link{color:#2563eb;cursor:pointer;text-decoration:none}.mindmap-node-content .mindmap-link:hover{text-decoration:underline}.mindmap-node-content .mindmap-inline-image{vertical-align:middle;border-radius:2px;max-width:80px;max-height:1.2em}.mindmap-node-root-content .mindmap-inline-code{background:#ffffff26}.mindmap-node-root-content .mindmap-highlight{color:#fcd34d;background:#fbbf2433}.mindmap-node-root-content .mindmap-link{color:#93c5fd}.mindmap-task-icon{vertical-align:middle;flex-shrink:0}.mindmap-remark-indicator{opacity:.5;cursor:help;flex-shrink:0;font-size:.7em;line-height:1;transition:opacity .15s}.mindmap-remark-indicator:hover{opacity:1}.mindmap-remark-tooltip{white-space:pre-wrap;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);z-index:1000;pointer-events:none;background:var(--mindmap-ctx-bg);max-width:280px;color:var(--mindmap-ctx-text);border:1px solid var(--mindmap-ctx-border);border-radius:8px;padding:8px 12px;font-family:system-ui,-apple-system,sans-serif;font-size:13px;line-height:1.5;animation:.15s ease-out mindmap-fade-in;position:absolute;box-shadow:0 4px 16px #00000026}.mindmap-ai-input{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);z-index:30;background:var(--mindmap-controls-bg);width:calc(100% - 32px);max-width:600px;color:var(--mindmap-controls-text);border:1px solid;border-color:var(--mindmap-ctx-border);border-radius:26px;outline:none;font-family:system-ui,-apple-system,sans-serif;animation:.15s ease-out mindmap-fade-in;position:absolute;bottom:56px;left:50%;transform:translate(-50%)}.mindmap-ai-input-row{align-items:center;gap:4px;padding:6px 6px 6px 16px;display:flex}.mindmap-ai-input-field{color:inherit;background:0 0;border:none;outline:none;flex:1;min-width:0;font-family:inherit;font-size:14px;line-height:1.5}.mindmap-ai-input-field:focus{box-shadow:none}.mindmap-ai-input-field::placeholder{opacity:.5}.mindmap-ai-input-field:disabled{opacity:.5;cursor:not-allowed}.mindmap-ai-send-btn{cursor:pointer;border:none;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:36px;height:36px;transition:background .15s,opacity .15s,transform .1s;display:flex;position:relative}.mindmap-ai-send-btn:hover:not(:disabled){opacity:.85;transform:scale(1.05)}.mindmap-ai-send-btn:disabled{cursor:not-allowed;opacity:.4}.mindmap-ai-send-btn--loading{cursor:pointer}@keyframes mindmap-ai-spin{to{transform:rotate(360deg)}}.mindmap-ai-spinner{justify-content:center;align-items:center;transition:opacity .2s;animation:.8s linear infinite mindmap-ai-spin;display:flex}.mindmap-ai-stop-icon{opacity:0;color:#ef4444;justify-content:center;align-items:center;transition:opacity .2s,transform .2s;display:flex;position:absolute;transform:scale(.5)}.mindmap-ai-send-btn--loading:hover .mindmap-ai-spinner{opacity:0}.mindmap-ai-send-btn--loading:hover .mindmap-ai-stop-icon{opacity:1;transform:scale(1)}.mindmap-ai-send-btn--loading:hover{background:#ef44441a!important}.mindmap-ai-attach-btn{cursor:pointer;opacity:.5;background:0 0;border:none;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:32px;height:32px;transition:opacity .15s,background .15s;display:flex}.mindmap-ai-attach-btn:hover:not(:disabled){opacity:1;background:#80808026}.mindmap-ai-attach-btn:disabled{cursor:not-allowed;opacity:.3}.mindmap-ai-file-previews{flex-wrap:wrap;gap:6px;padding:8px 12px 0;display:flex}.mindmap-ai-file-chip{background:var(--mindmap-controls-hover);border-radius:12px;align-items:center;gap:4px;max-width:160px;padding:3px 8px;font-size:12px;display:inline-flex}.mindmap-ai-file-name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.mindmap-ai-file-remove{cursor:pointer;opacity:.5;background:0 0;border:none;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:16px;height:16px;padding:0;transition:opacity .15s;display:flex}.mindmap-ai-file-remove:hover{opacity:1}.mindmap-ai-error{color:#ef4444;padding:0 16px 8px;font-size:12px;animation:.15s ease-out mindmap-fade-in}@media (width<=768px){.mindmap-ai-input{border-radius:20px;max-width:calc(100% - 24px);bottom:48px}.mindmap-ai-input-row{padding:4px 4px 4px 12px}.mindmap-ai-send-btn{width:32px;height:32px}}
 /*$vite$:1*/

package/dist/esm/utils/export.js

@@ -1,36 +1,36 @@
-import { THEME as e } from "./theme.js";
-import { buildSvgNodeTextString as t } from "./inline-markdown.js";
-import { runExportNodeDecoration as n, runExportOverlay as r } from "../plugins/runner.js";
+import { THEME as e, generateExportStyles as t } from "./theme.js";
+import { buildSvgNodeTextString as n } from "./inline-markdown.js";
+import { runExportNodeDecoration as r, runExportOverlay as i } from "../plugins/runner.js";
 //#region src/components/MindMap/utils/export.ts
-function i(i, a, o = {}, s = e, c) {
-	let { padding: l = 40, background: u = s.canvas.bgColor, pngSafe: d = !1 } = o, f = Infinity, p = -Infinity, m = Infinity, h = -Infinity;
-	for (let e of i) f = Math.min(f, e.x - e.width / 2), p = Math.max(p, e.x + e.width / 2), m = Math.min(m, e.y - e.height / 2), h = Math.max(h, e.y + e.height / 2);
-	let g = p - f + l * 2, _ = h - m + l * 2, v = -f + l, y = -m + l, b = [];
-	b.push(`<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="${g}" height="${_}" viewBox="0 0 ${g} ${_}">`), a.some((e) => e.isCrossLink) && (b.push("<defs>"), b.push("<marker id=\"arrowhead\" markerWidth=\"8\" markerHeight=\"6\" refX=\"8\" refY=\"3\" orient=\"auto\">"), b.push("<path d=\"M0,0 L8,3 L0,6\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\"/>"), b.push("</marker>"), b.push("</defs>")), b.push(`<rect width="100%" height="100%" fill="${u}"/>`), b.push(`<g transform="translate(${v}, ${y})">`);
-	for (let e of a) {
-		let t = `d="${e.path}" stroke="${e.color}" stroke-width="${s.connection.strokeWidth}" stroke-linecap="round" fill="none"`;
-		if (e.strokeDasharray && (t += ` stroke-dasharray="${e.strokeDasharray}"`), e.isCrossLink && (t += " marker-end=\"url(#arrowhead)\" opacity=\"0.7\""), b.push(`<path ${t}/>`), e.label) {
-			let t = i.find((t) => t.id === e.fromId), n = i.find((t) => t.id === e.toId);
-			if (t && n) {
-				let r = (t.x + n.x) / 2, i = (t.y + n.y) / 2;
-				b.push(`<text x="${r}" y="${i - 6}" text-anchor="middle" font-size="11" fill="${e.color}" opacity="0.8" font-family="${s.node.fontFamily}">${e.label}</text>`);
+function a(a, o, s = {}, c = e, l) {
+	let { padding: u = 40, background: d = c.canvas.bgColor, pngSafe: f = !1 } = s, p = Infinity, m = -Infinity, h = Infinity, g = -Infinity;
+	for (let e of a) p = Math.min(p, e.x - e.width / 2), m = Math.max(m, e.x + e.width / 2), h = Math.min(h, e.y - e.height / 2), g = Math.max(g, e.y + e.height / 2);
+	let _ = m - p + u * 2, v = g - h + u * 2, y = -p + u, b = -h + u, x = [];
+	x.push(`<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="${_}" height="${v}" viewBox="0 0 ${_} ${v}">`), x.push("<defs>"), x.push("  <style>"), x.push(`    ${t(c)}`), x.push("  </style>"), o.some((e) => e.isCrossLink) && (x.push("<marker id=\"arrowhead\" markerWidth=\"8\" markerHeight=\"6\" refX=\"8\" refY=\"3\" orient=\"auto\">"), x.push("<path d=\"M0,0 L8,3 L0,6\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\"/>"), x.push("</marker>")), x.push("</defs>"), x.push(`<rect width="100%" height="100%" fill="${d}"/>`), x.push(`<g transform="translate(${y}, ${b})">`);
+	for (let e of o) {
+		let t = a.find((t) => t.id === e.toId), n = t?.branchIndex === void 0 ? "" : ` data-branch-index="${t.branchIndex}"`, r = `class="mindmap-edge" d="${e.path}" stroke="${e.color}"${n}`;
+		if (e.strokeDasharray && (r += ` stroke-dasharray="${e.strokeDasharray}"`), e.isCrossLink && (r += " marker-end=\"url(#arrowhead)\" opacity=\"0.7\""), x.push(`<path ${r}/>`), e.label) {
+			let n = a.find((t) => t.id === e.fromId);
+			if (n && t) {
+				let r = (n.x + t.x) / 2, i = (n.y + t.y) / 2;
+				x.push(`<text class="mindmap-edge-label" x="${r}" y="${i - 6}" text-anchor="middle" font-size="11" fill="${e.color}" opacity="0.8">${e.label}</text>`);
 			}
 		}
 	}
-	for (let e of i) {
-		let r = e.x, i = e.y;
+	for (let e of a) {
+		let t = e.x, i = e.y, a = e.branchIndex === void 0 ? "" : ` data-branch-index="${e.branchIndex}"`;
 		if (e.depth === 0) {
-			let { fontSize: a, fontWeight: o, fontFamily: l, textColor: u } = s.root, f = s.root.bgColor;
-			b.push(`<g transform="translate(${r}, ${i})">`), b.push(`<rect x="${-e.width / 2}" y="${-e.height / 2}" width="${e.width}" height="${e.height}" rx="${e.height / 2}" ry="${e.height / 2}" fill="${f}"/>`), b.push(t(e.text, a, o, l, u, e.taskStatus, e.remark, c, s.highlight.textColor, s.highlight.bgColor, d)), c && c.length > 0 && b.push(n(c, e, s, c, d)), b.push("</g>");
+			let { fontSize: o, fontWeight: s, fontFamily: u, textColor: d } = c.root, p = c.root.bgColor;
+			x.push(`<g class="mindmap-node-g mindmap-node-root" transform="translate(${t}, ${i})"${a}>`), x.push(`<rect class="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="${p}"/>`), x.push(n(e.text, o, s, u, d, e.taskStatus, e.remark, l, c.highlight.textColor, c.highlight.bgColor, f)), l && l.length > 0 && x.push(r(l, e, c, l, f)), x.push("</g>");
 		} else {
-			let a = e.depth === 1 ? s.level1.fontSize : s.node.fontSize, o = e.depth === 1 ? s.level1.fontWeight : s.node.fontWeight, l = e.width - s.node.paddingH * 2, u = a / 2 + 4;
-			b.push(`<g transform="translate(${r}, ${i})">`), b.push(t(e.text, a, o, s.node.fontFamily, s.node.textColor, e.taskStatus, e.remark, c, s.highlight.textColor, s.highlight.bgColor, d)), b.push(`<line x1="${-l / 2}" y1="${u}" x2="${l / 2}" y2="${u}" stroke="${e.color}" stroke-width="2.5" stroke-linecap="round"/>`), c && c.length > 0 && b.push(n(c, e, s, c, d)), b.push("</g>");
+			let o = e.depth === 1 ? c.level1.fontSize : c.node.fontSize, s = e.depth === 1 ? c.level1.fontWeight : c.node.fontWeight, u = e.width - c.node.paddingH * 2, d = o / 2 + 4;
+			x.push(`<g class="mindmap-node-g mindmap-node-child" transform="translate(${t}, ${i})"${a}>`), x.push(n(e.text, o, s, c.node.fontFamily, c.node.textColor, e.taskStatus, e.remark, l, c.highlight.textColor, c.highlight.bgColor, f)), x.push(`<line class="mindmap-node-underline" x1="${-u / 2}" y1="${d}" x2="${u / 2}" y2="${d}" stroke="${e.color}"/>`), l && l.length > 0 && x.push(r(l, e, c, l, f)), x.push("</g>");
 		}
 	}
-	return c && c.length > 0 && b.push(r(c, i, a, s)), b.push("</g>"), b.push("</svg>"), b.join("\n");
+	return l && l.length > 0 && x.push(i(l, a, o, c)), x.push("</g>"), x.push("</svg>"), x.join("\n");
 }
-var a = i;
-function o(e, t = {}) {
+var o = a;
+function s(e, t = {}) {
 	let n = typeof window < "u" ? Math.max(window.devicePixelRatio ?? 1, 2) : 2, { scale: r = n } = t;
 	return new Promise((t, n) => {
 		let i = new DOMParser().parseFromString(e, "image/svg+xml").documentElement, a = parseFloat(i.getAttribute("width") || "800"), o = parseFloat(i.getAttribute("height") || "600"), s = new Blob([e], { type: "image/svg+xml;charset=utf-8" }), c = URL.createObjectURL(s), l = new Image();
@@ -47,4 +47,4 @@ function o(e, t = {}) {
 	});
 }
 //#endregion
-export { i as buildExportSVG, a as buildExportSVGForPNG, o as exportToPNG };
+export { a as buildExportSVG, o as buildExportSVGForPNG, s as exportToPNG };

package/dist/esm/utils/layout.js

@@ -15,49 +15,50 @@ function p(e, t, r, i, a) {
 	let o = u(n(e), t, r);
 	return i && (o += t * .9 + d), a && (o += f), o;
 }
-function m(n, a, o, c, l, u, d) {
-	let f = a === 0, h = a === 1, g = f ? t.root.fontSize : h ? t.level1.fontSize : t.node.fontSize, _ = f ? t.root.fontWeight : h ? t.level1.fontWeight : t.node.fontWeight, v = f ? t.root.paddingH : t.node.paddingH, y = f ? t.root.paddingV : t.node.paddingV, b = p(n.text, g, _, n.taskStatus, !!n.remark) + v * 2, x = g + y * 2;
+function m(n, a, o, c, l, u, d, f) {
+	let h = a === 0, g = a === 1, _ = h ? t.root.fontSize : g ? t.level1.fontSize : t.node.fontSize, v = h ? t.root.fontWeight : g ? t.level1.fontWeight : t.node.fontWeight, y = h ? t.root.paddingH : t.node.paddingH, b = h ? t.root.paddingV : t.node.paddingV, x = p(n.text, _, v, n.taskStatus, !!n.remark) + y * 2, S = _ + b * 2;
 	if (u && u.length > 0) {
-		let e = r(u, n, b, x, g);
-		b = e.width, x = e.height;
+		let e = r(u, n, x, S, _);
+		x = e.width, S = e.height;
 	}
-	let S = n.children || [];
-	u && u.length > 0 && d && (S = i(u, n, S, d));
-	let C = c;
+	let C = n.children || [];
+	u && u.length > 0 && d && (C = i(u, n, C, d));
+	let w = c;
 	if (u && u.length > 0) {
 		let e = s(u, {
 			id: n.id,
 			text: n.text,
 			x: 0,
 			y: 0,
-			width: b,
-			height: x,
+			width: x,
+			height: S,
 			color: c,
 			depth: a,
 			side: o,
 			parentId: l
 		}, n, c);
-		e.color && (C = e.color);
+		e.color && (w = e.color);
 	}
-	let w = S.map((t, r) => {
-		let i = f ? e[r % e.length] : C;
-		return m(t, a + 1, o, i, n.id, u, d);
+	let T = C.map((t, r) => {
+		let i = h ? e[r % e.length] : w, s = h ? r % e.length : f;
+		return m(t, a + 1, o, i, n.id, u, d, s);
 	});
 	return {
 		id: n.id,
 		text: n.text,
-		children: w,
-		width: b,
-		height: x,
+		children: T,
+		width: x,
+		height: S,
 		depth: a,
 		side: o,
-		color: C,
+		color: w,
 		x: 0,
 		y: 0,
 		subtreeHeight: 0,
 		parentId: l,
 		remark: n.remark,
 		taskStatus: n.taskStatus,
+		branchIndex: f,
 		dottedLine: n.dottedLine,
 		multiLineContent: n.multiLineContent,
 		tags: n.tags,
@@ -93,6 +94,7 @@ function _(e, t) {
 		parentId: e.parentId,
 		remark: e.remark,
 		taskStatus: e.taskStatus,
+		branchIndex: e.branchIndex,
 		dottedLine: e.dottedLine,
 		multiLineContent: e.multiLineContent,
 		tags: e.tags,
@@ -133,7 +135,13 @@ function b(n, r = "both", i, o, s, c, l) {
 	let b = m({
 		...n,
 		children: []
-	}, 0, "root", t.root.bgColor, void 0, s, u), x = f.map((t, r) => m(t, 1, "right", i?.[t.id] ?? e[r % e.length], n.id, s, u)), S = p.map((t, a) => m(t, 1, "left", i?.[t.id] ?? e[((r === "left" ? 0 : v) + a) % e.length], n.id, s, u));
+	}, 0, "root", t.root.bgColor, void 0, s, u), x = f.map((t, r) => {
+		let a = r % e.length;
+		return m(t, 1, "right", i?.[t.id] ?? e[a], n.id, s, u, a);
+	}), S = p.map((t, a) => {
+		let o = ((r === "left" ? 0 : v) + a) % e.length;
+		return m(t, 1, "left", i?.[t.id] ?? e[o], n.id, s, u, o);
+	});
 	b.children = [...x, ...S];
 	for (let e of b.children) h(e);
 	b.x = 0, b.y = 0;