@xiangfa/mindmap 0.3.0

package/dist/esm/components/MindMapContextMenu.js

@@ -0,0 +1,123 @@
+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);
+	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
+		},
+		onClick: (e) => e.stopPropagation(),
+		children: [
+			!s && /* @__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 }
+			})] }),
+			/* @__PURE__ */ r("div", {
+				className: "mindmap-ctx-item mindmap-ctx-has-sub mindmap-ctx-layout",
+				onMouseEnter: () => _(!0),
+				onMouseLeave: () => _(!1),
+				style: { color: a.contextMenu.textColor },
+				children: [
+					o.layout,
+					/* @__PURE__ */ n("span", {
+						className: "mindmap-ctx-arrow",
+						children: "▶"
+					}),
+					g && /* @__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();
+								},
+								style: { color: a.contextMenu.textColor },
+								children: o.layoutLeft
+							}),
+							/* @__PURE__ */ n("div", {
+								className: "mindmap-ctx-item mindmap-ctx-layout-both",
+								onClick: () => {
+									f("both"), p();
+								},
+								style: { color: a.contextMenu.textColor },
+								children: o.layoutBoth
+							}),
+							/* @__PURE__ */ n("div", {
+								className: "mindmap-ctx-item mindmap-ctx-layout-right",
+								onClick: () => {
+									f("right"), p();
+								},
+								style: { color: a.contextMenu.textColor },
+								children: o.layoutRight
+							})
+						]
+					})
+				]
+			}),
+			/* @__PURE__ */ n("div", {
+				className: "mindmap-ctx-divider",
+				style: { borderColor: a.contextMenu.borderColor }
+			}),
+			/* @__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 },
+				children: [
+					o.export,
+					/* @__PURE__ */ n("span", {
+						className: "mindmap-ctx-arrow",
+						children: "▶"
+					}),
+					m && /* @__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
+							}),
+							/* @__PURE__ */ n("div", {
+								className: "mindmap-ctx-item mindmap-ctx-export-png",
+								onClick: u,
+								style: { color: a.contextMenu.textColor },
+								children: o.exportPNG
+							}),
+							/* @__PURE__ */ n("div", {
+								className: "mindmap-ctx-item mindmap-ctx-export-md",
+								onClick: d,
+								style: { color: a.contextMenu.textColor },
+								children: o.exportMarkdown
+							})
+						]
+					})
+				]
+			})
+		]
+	});
+}
+//#endregion
+export { i as MindMapContextMenu };

package/dist/esm/components/MindMapControls.js

@@ -0,0 +1,114 @@
+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", {
+		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 },
+				children: /* @__PURE__ */ r(e, { size: 16 })
+			}),
+			/* @__PURE__ */ i("button", {
+				className: "mindmap-ctrl-pct",
+				onClick: p,
+				title: s.resetView,
+				style: { color: o.controls.textColor },
+				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 },
+				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", {
+				width: 16,
+				height: 16,
+				viewBox: "0 0 24 24",
+				fill: "none",
+				stroke: "currentColor",
+				strokeWidth: 2,
+				strokeLinecap: "round",
+				strokeLinejoin: "round",
+				children: [
+					/* @__PURE__ */ r("path", { d: "M6 5h12" }),
+					/* @__PURE__ */ r("path", { d: "M4 12h10" }),
+					/* @__PURE__ */ r("path", { d: "M12 19h8" })
+				]
+			}) : /* @__PURE__ */ i("svg", {
+				width: 16,
+				height: 16,
+				viewBox: "0 0 24 24",
+				fill: "none",
+				stroke: "currentColor",
+				strokeWidth: 2,
+				strokeLinecap: "round",
+				strokeLinejoin: "round",
+				children: [/* @__PURE__ */ r("path", { d: "M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0" }), /* @__PURE__ */ r("circle", {
+					cx: "12",
+					cy: "12",
+					r: "3"
+				})]
+			})
+		}), /* @__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", {
+				width: 16,
+				height: 16,
+				viewBox: "0 0 24 24",
+				fill: "none",
+				stroke: "currentColor",
+				strokeWidth: 2,
+				strokeLinecap: "round",
+				strokeLinejoin: "round",
+				children: [
+					/* @__PURE__ */ r("path", { d: "M8 3v3a2 2 0 0 1-2 2H3" }),
+					/* @__PURE__ */ r("path", { d: "M21 8h-3a2 2 0 0 1-2-2V3" }),
+					/* @__PURE__ */ r("path", { d: "M3 16h3a2 2 0 0 1 2 2v3" }),
+					/* @__PURE__ */ r("path", { d: "M16 21v-3a2 2 0 0 1 2-2h3" })
+				]
+			}) : /* @__PURE__ */ i("svg", {
+				width: 16,
+				height: 16,
+				viewBox: "0 0 24 24",
+				fill: "none",
+				stroke: "currentColor",
+				strokeWidth: 2,
+				strokeLinecap: "round",
+				strokeLinejoin: "round",
+				children: [
+					/* @__PURE__ */ r("path", { d: "M8 3H5a2 2 0 0 0-2 2v3" }),
+					/* @__PURE__ */ r("path", { d: "M21 8V5a2 2 0 0 0-2-2h-3" }),
+					/* @__PURE__ */ r("path", { d: "M3 16v3a2 2 0 0 0 2 2h3" }),
+					/* @__PURE__ */ r("path", { d: "M16 21h3a2 2 0 0 0 2-2v-3" })
+				]
+			})
+		})]
+	})] });
+}
+//#endregion
+export { a as MindMapControls };