dsh-mindmap 0.3.0 → 0.4.1

package/CHANGELOG.md

@@ -2,7 +2,7 @@
 
 All notable changes to this project are documented here. Release-specific notes are also published on GitHub Releases.
 
-## [Unreleased]
+## [0.4.0] - 2026-08-24
 
 ### Changed
 
@@ -12,6 +12,7 @@ All notable changes to this project are documented here. Release-specific notes
 
 ### Added
 
+- Centered mindmap canvas with a floating zoom bar at the canvas top-right (zoom out / percent / zoom in / fit): the tree opens centered in the panel (scrollable, no edge clipping when larger), auto fit-to-view on open (no enlargement beyond 100%, 25% floor for giant trees), 25%–300% step zoom with a stable viewport-center anchor, and smart re-fit on AI edits or panel resize until the user zooms manually. Connector lines use `vector-effect: non-scaling-stroke` so they stay crisp at any zoom level, and natural-size debouncing keeps "fit" from oscillating with scrollbar appearance. Clicking any node focuses it: the node scrolls to the left-center of the canvas and the view zooms until the node and its whole subtree are visible (capped at 100%). Zoom math is exposed as pure functions (`clampZoom` / `stepZoom` / `fitZoom` / `focusZoom`) with unit tests.
 - Settings page section「思维脑图」in the left nav (`settings.section`), backed by a host settings namespace (`mindmap`): node theme (line style curve/elbow, card corners rounded/square, three color themes ocean/sunset/forest), default panel width (20-80%). The `requireApproval` switch stays functional (read at tool pre-execute time) but is hidden from the UI by design. Introduces a `@deepseek-ai/schemastery` dependency for the settings schema.
 
 ## [0.1.0] - 2026-08-23

package/README.md

@@ -4,7 +4,7 @@
 
 A DeepSeek Harness plugin that turns a plain Markdown file into a live mindmap. The working directory is the document: the chat is the editor, the AI edits the `.md` step by step, and the right-side floating panel re-renders the mindmap in real time.
 
-> Project status: pre-1.0. The 0.1.0 feature set (see [CHANGELOG](./CHANGELOG.md)) is implemented and covered by unit tests, but cross-version compatibility beyond the development environment is not yet certified.
+> Project status: pre-1.0. The current feature set (see [CHANGELOG](./CHANGELOG.md)) is implemented and covered by unit tests, but cross-version compatibility beyond the development environment is not yet certified.
 
 ## The core idea
 
@@ -22,6 +22,7 @@ A DeepSeek Harness plugin that turns a plain Markdown file into a live mindmap.
 - **Single-mindmap mode** — two tabs only: 目录 (tree) and 脑图 (the current mindmap); opening another `.md` replaces the previous one.
 - **"What you see is what the AI edits"** — when the visible mindmap differs from the AI's working document, the panel automatically asks the AI to open it, keeping the chat focus in sync.
 - **MarkGrove-style mapping** — heading hierarchy, nested lists (empty items become placeholder nodes), code blocks as leaf nodes, paragraphs as node notes, stable structural IDs, and orthogonal connector lines between nodes.
+- **Centered canvas with zoom** — the mindmap opens centered in the canvas (scrollable without edge clipping when larger); a floating zoom bar at the canvas top-right (zoom out / percent / zoom in / fit) applies auto fit-to-view on open (small maps stay at 100%), steps through 25%–300% with a stable view center, and keeps re-fitting as the AI edits — until you zoom manually. Click any node to zoom in on it and its whole subtree, with the node pinned at the left-center of the canvas.
 - **PNG export** — one click on 导出图片 exports the current mindmap.
 - **Safety** — `mindmap_update` is approval-free by default (files are git-managed) with a `requireApproval` switch as an escape hatch; the client has **no write path** to the filesystem — every edit goes through the AI tools.
 

package/README.zh-CN.md

@@ -4,7 +4,7 @@
 
 一个 DeepSeek Harness 插件：把工作目录里的普通 Markdown 文件变成一颗**实时脑图**。聊天框是编辑它的助手——你聊一句、AI 改一步 `.md`、右侧悬浮面板实时跟着变。
 
-> 项目状态：pre-1.0。0.1.0 功能集（见 [CHANGELOG](./CHANGELOG.md)）已实现并有单元测试覆盖，但开发环境之外的跨版本兼容性尚未认证。
+> 项目状态：pre-1.0。当前功能集（见 [CHANGELOG](./CHANGELOG.md)）已实现并有单元测试覆盖，但开发环境之外的跨版本兼容性尚未认证。
 
 ## 核心思想
 
@@ -22,6 +22,7 @@
 - **单脑图模式**——面板只有「目录」和「脑图」两个 tab，打开新脑图替换旧的那颗。
 - **「所见即所编」焦点同步**——可见脑图与 AI 工作文档不一致时，面板自动让 AI 打开它，聊天焦点始终跟随你的眼睛。
 - **MarkGrove 同款映射与连线**——标题层级挂树、列表缩进（空项 = 占位节点）、代码块叶节点、段落挂节点说明、稳定结构 ID、节点间直角折线。
+- **画布居中与缩放**——脑图打开后居中呈现（超出画布时可滚动、无边缘裁剪）；画布右上角浮动缩放条（缩小 / 比例 / 放大 / 适配），打开时自动适配合适比例（小图保持 100%），25%–300% 逐级缩放且视图中心不跳变，AI 编辑后持续自动再适配，直到你手动缩放。点击任意节点即可聚焦：节点滚到画布左侧居中，视图放大到它和整棵子树完整可见（上限 100%）。
 - **PNG 导出**——面板右上角「导出图片」一键导出当前脑图。
 - **安全**——`mindmap_update` 默认免原生审批（文件受 git 管控），留 `requireApproval` 开关作后悔药；客户端**没有任何写文件通道**，一切编辑都经 AI 工具。
 

package/client.js

@@ -637,12 +637,30 @@ window.__ModuleLoader__.load({
 			childrenColumn: { display: "flex", flexDirection: "column", gap: "8px", marginLeft: "40px", minWidth: 0 },
 			// 面板树连线层：正交折线（MarkGrove 的 orthogonalPath 风格），
 			// 覆盖整行、点击穿透、置于节点盒之下。
-			edgeLayer: { position: "absolute", top: 0, left: 0, width: "100%", height: "100%", pointerEvents: "none", overflow: "visible" },
+			// 016：去掉 CSS width/height 百分比——在 auto-height 的 flex 行内，
+			// 百分比高度解析为 auto 会让 SVG 坐标系塌缩，连线与节点像素错位。
+			// 改为由 TreeRow 在 measure 里同步记下实际像素，作 SVG 属性直传。
+			edgeLayer: { position: "absolute", top: 0, left: 0, display: "block", pointerEvents: "none", overflow: "visible" },
 			box: { padding: "6px 12px", borderRadius: "10px", border: "1px solid var(--dsw-alias-border-l2)", background: "var(--dsw-alias-bg-layer-3)", maxWidth: "240px", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", flex: "0 0 auto", boxShadow: "0 1px 2px rgba(16,24,40,0.04)" },
 			rootBox: { fontWeight: 700, fontSize: "14px", border: "1px solid var(--dsw-alias-border-l2-darkmode-thin, #b9c0cc)", background: "var(--dsw-alias-bg-module-platform, #eef2ff)" },
 			headingBox: { fontWeight: 600 },
 			placeholderBox: { padding: "6px 12px", borderRadius: "10px", border: "1px dashed var(--dsw-alias-border-l2)", color: "var(--dsw-alias-label-tertiary)", background: "none" },
 			codeBox: { fontFamily: "Menlo, monospace", fontSize: "12px" },
+			// 016 脑图画布：滚动区 + 居中层 + 右上角浮动缩放控制条。
+			canvasWrap: { flex: "1 1 auto", minHeight: 0, minWidth: 0, position: "relative", display: "flex", flexDirection: "column" },
+			canvasScroll: { flex: "1 1 auto", minHeight: 0, minWidth: 0, overflow: "auto" },
+			// 居中层：内容小则铺满视口（100%），大则撑到内容尺寸（max-content）；
+			// 子项用 margin:auto——空间充足双向居中，溢出时 margin 归零、从滚动
+			// 原点排布（flexbox 溢出居中裁剪的标准解法，无左/上侧裁剪）。
+			canvasCenter: { display: "flex", width: "100%", height: "100%", minWidth: "max-content", minHeight: "max-content", boxSizing: "border-box", padding: "16px" },
+			// 缩放控制条：绝对定位于 canvasWrap（滚动区外，不随内容滚动）。
+			zoomBar: { position: "absolute", top: "10px", right: "12px", zIndex: 5, display: "inline-flex", alignItems: "center", gap: "2px", padding: "3px", borderRadius: "8px", background: "var(--dsw-alias-bg-layer-3)", border: "1px solid var(--dsw-alias-border-l2)", boxShadow: "var(--dsw-shadow-lv2)" },
+			zoomBtn: { border: "none", background: "none", cursor: "pointer", font: "inherit", fontSize: "13px", lineHeight: "20px", height: "22px", minWidth: "22px", padding: "0 4px", borderRadius: "6px", color: "var(--dsw-alias-label-secondary)", display: "inline-flex", alignItems: "center", justifyContent: "center", flex: "none" },
+			zoomBtnHover: { background: "var(--dsw-alias-interactive-bg-hover)", color: "var(--dsw-alias-label-primary)" },
+			zoomBtnDisabled: { opacity: 0.4, cursor: "default" },
+			// 百分比标签：tabular-nums 防数字抖动。
+			zoomLabel: { flex: "none", minWidth: "38px", textAlign: "center", fontSize: "11px", lineHeight: "20px", color: "var(--dsw-alias-label-secondary)", fontVariantNumeric: "tabular-nums", userSelect: "none" },
+			zoomFitBtn: { border: "none", background: "none", cursor: "pointer", font: "inherit", fontSize: "12px", lineHeight: "20px", height: "22px", padding: "0 8px", borderRadius: "6px", color: "var(--dsw-alias-label-secondary)", flex: "none" },
 		};
 
 		/** 015 分段选择控件（线型/卡片风格）。 */
@@ -873,8 +891,15 @@ window.__ModuleLoader__.load({
 			const rowRef = react.useRef(null);
 			const boxWrapRef = react.useRef(null);
 			const childRefs = react.useRef([]);
-			const [edges, setEdges] = react.useState([]);
-			const prevEdgesRef = react.useRef("");
+			// 016：一次测量 = 连线 + 行本地尺寸，单键防抖。坐标全部换算到行
+			// 「本地空间」（视觉像素 ÷ 缩放因子，由隐形探针实测），SVG 用
+			// viewBox 把用户空间钉在本地空间——CSS zoom 新旧实现都精确对齐，
+			// 且 SVG 盒子恒等于行的视觉尺寸（绝不撑出滚动区）。
+			const [layout, setLayout] = react.useState({ edges: [], w: 0, h: 0 });
+			const prevKeyRef = react.useRef("");
+			// 缩放探针：本地 10×10（小于最小节点盒，永不溢出行），visibility
+			// 隐藏。getBoundingClientRect 返回 10×zoom → 实测缩放因子。
+			const probeRef = react.useRef(null);
 
 			// 测量父盒右缘与各子节点包裹块的几何位置，画连线
 			// （折线 = M x1 y1 H midX V y2 H x2；曲线 = 贝塞尔水平切出）；
@@ -882,28 +907,35 @@ window.__ModuleLoader__.load({
 			react.useLayoutEffect(() => {
 				const rowEl = rowRef.current;
 				const boxEl = boxWrapRef.current;
-				if (!rowEl || !boxEl) return;
+				const probeEl = probeRef.current;
+				if (!rowEl || !boxEl || !probeEl) return;
 				const curve = theme && theme.lineStyle === "curve";
 				const measure = () => {
+					// 探针实测缩放因子（视觉/本地）——与 DOM 当前状态同步，
+					// 对 CSS zoom 的新旧实现（渲染期缩放 / used 值缩放）都成立。
+					const scale = probeEl.getBoundingClientRect().width / 10 || 1;
 					const rowRect = rowEl.getBoundingClientRect();
 					const boxRect = boxEl.getBoundingClientRect();
 					const next = [];
 					for (const ref of childRefs.current) {
 						if (!ref) continue;
 						const c = ref.getBoundingClientRect();
-						const x1 = boxRect.right - rowRect.left;
-						const y1 = boxRect.top - rowRect.top + boxRect.height / 2;
-						const x2 = c.left - rowRect.left;
-						const y2 = c.top - rowRect.top + c.height / 2;
+						// 视觉像素 → 行本地坐标（SVG 用户空间 = 本地空间）。
+						const x1 = (boxRect.right - rowRect.left) / scale;
+						const y1 = (boxRect.top - rowRect.top + boxRect.height / 2) / scale;
+						const x2 = (c.left - rowRect.left) / scale;
+						const y2 = (c.top - rowRect.top + c.height / 2) / scale;
 						const midX = (x1 + x2) / 2;
 						next.push(curve
 							? `M ${x1} ${y1} C ${midX} ${y1}, ${midX} ${y2}, ${x2} ${y2}`
 							: `M ${x1} ${y1} H ${midX} V ${y2} H ${x2}`);
 					}
-					const key = next.join("|");
-					if (prevEdgesRef.current === key) return;
-					prevEdgesRef.current = key;
-					setEdges(next);
+					const w = rowRect.width / scale;
+					const h = rowRect.height / scale;
+					const key = `${w.toFixed(2)}x${h.toFixed(2)}|${next.join("|")}`;
+					if (prevKeyRef.current === key) return;
+					prevKeyRef.current = key;
+					setLayout({ edges: next, w, h });
 				};
 				measure();
 				let observer = null;
@@ -919,20 +951,34 @@ window.__ModuleLoader__.load({
 				};
 			});
 
-			return (0, react_jsx_runtime.jsxs)("div", { ref: rowRef, style: { ...S.row, position: "relative" }, children: [
-				edges.length > 0
+			// 016 点击聚焦标记：row = 该节点的整棵子树边界（盒+子列），node = 节点盒本身；
+				// 画布层用事件委托 closest 定位（递归树不逐层传回调）。
+				return (0, react_jsx_runtime.jsxs)("div", { ref: rowRef, "data-mindmap-row": "", style: { ...S.row, position: "relative" }, children: [
+				// 缩放探针（本地 10×10，隐形，点击穿透）。
+				(0, react_jsx_runtime.jsx)("div", { ref: probeRef, style: { position: "absolute", top: 0, left: 0, width: 10, height: 10, visibility: "hidden", pointerEvents: "none" } }),
+				layout.edges.length > 0 && layout.w > 0 && layout.h > 0
 					? (0, react_jsx_runtime.jsx)("svg", {
+						// width/height = 本地尺寸 → 视觉 = 本地×zoom，恒等于行尺寸；
+						// viewBox 把用户空间钉在本地空间，路径坐标（本地）精确落位。
+						width: layout.w,
+						height: layout.h,
+						viewBox: `0 0 ${layout.w} ${layout.h}`,
+						preserveAspectRatio: "none",
 						style: S.edgeLayer,
-						children: edges.map((d, i) => (0, react_jsx_runtime.jsx)("path", {
+						children: layout.edges.map((d, i) => (0, react_jsx_runtime.jsx)("path", {
 							key: i,
 							d,
 							stroke: "var(--dsw-alias-border-l2)",
 							strokeWidth: 1.5,
 							fill: "none",
+							// 016：CSS zoom 缩放下 strokeWidth 会被一并缩放，缩小后线变
+							// 亚像素、模糊看不清；vectorEffect=non-scaling-stroke 让线宽
+							// 保持不变（任何缩放下都是 1.5px 视觉宽度）。
+							vectorEffect: "non-scaling-stroke",
 						}, i)),
 					})
 					: null,
-				(0, react_jsx_runtime.jsx)("div", { ref: boxWrapRef, style: { flex: "0 0 auto" }, children: (0, react_jsx_runtime.jsx)(NodeBox, { node, theme }) }),
+				(0, react_jsx_runtime.jsx)("div", { ref: boxWrapRef, "data-mindmap-node": "", style: { flex: "0 0 auto", cursor: "pointer" }, children: (0, react_jsx_runtime.jsx)(NodeBox, { node, theme }) }),
 				node.children && node.children.length > 0
 					? (0, react_jsx_runtime.jsx)("div", { style: S.childrenColumn, children: node.children.map((child, idx) => (0, react_jsx_runtime.jsx)("div", {
 						key: child.id,
@@ -942,8 +988,281 @@ window.__ModuleLoader__.load({
 						children: (0, react_jsx_runtime.jsx)(TreeRow, { node: child, theme }),
 					}, child.id)) })
 					: null,
-			] });
-		}
+				] });
+				}
+
+				//#region 016 脑图画布：居中呈现 + 缩放控制（右上角）
+				// 缩放契约：范围 [0.25, 3]，每级 ×1.2；适配计算四周留 48px 余量
+				//（16px 视觉内距 + 经典滚动条占位，避免「适配→滚动条出现→视口变
+				// 窄→再适配」的抖动循环）。
+				const ZOOM = { min: 0.25, max: 3, step: 1.2, padding: 48, focusMax: 1 };
+
+				/** 缩放夹取：非有限值/≤0 回退 1，否则夹到 [min, max]。 */
+				function clampZoom(value) {
+				if (!Number.isFinite(value) || value <= 0) return 1;
+				return Math.min(ZOOM.max, Math.max(ZOOM.min, value));
+				}
+
+				/** 步进缩放：direction>0 放大（×step），否则缩小（÷step），结果夹取。 */
+				function stepZoom(value, direction) {
+				const base = clampZoom(value);
+				return clampZoom(direction > 0 ? base * ZOOM.step : base / ZOOM.step);
+				}
+
+				/** 适配比例：min((view-padding)/tree, 1) 再夹取——小图不放大、巨图夹下限；零/非法尺寸返回 1。 */
+				function fitZoom(treeW, treeH, viewW, viewH) {
+					if (!(treeW > 0) || !(treeH > 0) || !(viewW > 0) || !(viewH > 0)) return 1;
+					return clampZoom(Math.min((viewW - ZOOM.padding) / treeW, (viewH - ZOOM.padding) / treeH, 1));
+				}
+
+				/**
+				 * 子树聚焦比例：适配整棵子树（区别于全局适配，允许放大到 focusMax），
+				 * 叶子/小子树不会怼脸、巨子树夹下限；零/非法尺寸返回 1。
+				 */
+				function focusZoom(treeW, treeH, viewW, viewH) {
+					if (!(treeW > 0) || !(treeH > 0) || !(viewW > 0) || !(viewH > 0)) return 1;
+					return clampZoom(Math.min((viewW - ZOOM.padding) / treeW, (viewH - ZOOM.padding) / treeH, ZOOM.focusMax));
+				}
+
+				/**
+				* 脑图画布：滚动区（canvasScroll）+ 居中层（canvasCenter，100%/max-content
+				* 双下限）+ 缩放内容（margin:auto + CSS zoom）。zoom 用 CSS zoom 而非
+				* transform:scale——它影响布局，滚动范围随缩放自动正确；TreeRow 连线是
+				* getBoundingClientRect 相对测量，父子同因子缩放，几何保持一致。
+				* 打开（fitKey=文档路径）时自动测量并应用适配比例；用户未手动缩放前
+				* ResizeObserver 持续再适配（AI 编辑改树尺寸、面板拖宽）；手动缩放后以
+				* 用户为准，点「适配」或切换文档恢复自动。缩放时记录视口中心并按比例
+				* 修正 scroll，视图不跳变（内容回到视口内时浏览器会自动钳制回 0）。
+				*/
+				function MindmapCanvas(props) {
+							const { node, theme, fitKey } = props;
+							const scrollRef = react.useRef(null);
+							const contentRef = react.useRef(null);
+							const zoomRef = react.useRef(1);
+							const userZoomedRef = react.useRef(false);
+							const anchorRef = react.useRef(null);
+							// 016：上次适配时的脑图自然尺寸（getBoundingClientRect / 当前 zoom）。
+							// ResizeObserver 回调里对比当前自然尺寸，差异 ≤ 2px 视为「滚动条抖动」
+							// 引发的同树再测，跳过避免「适配→横向滚动条出现→视口变窄→再适配」
+							// 的 33%/34%/30% 不停跳变。
+							const lastNaturalRef = react.useRef(null);
+						// 016 点击聚焦：记录待定位的节点盒元素。zoom 生效后的 [zoom]
+						// layout effect 里量新布局，把节点滚到「水平 25% / 垂直居中」。
+						const focusRef = react.useRef(null);
+						// 016 已提交 zoom：DOM 真正渲染到的缩放值（[zoom] layout effect
+						// 里同步）。zoomRef 可能领先于渲染提交（setState 异步），测量
+						// 一律除以 committed——否则「新 zoom ÷ 旧尺寸」得到错误自然
+						// 尺寸，适配值来回跳、停不下来（跳闪根源）。
+						const committedZoomRef = react.useRef(1);
+						// 016 熔断器：观察器触发的适配时间戳。1.5s 内第 5 次 → 判定
+						// 反馈循环，自动停手（保险丝，任何未知循环都最多闪几下）。
+						const fitStampRef = react.useRef([]);
+							const [zoom, setZoomState] = react.useState(1);
+							const [hover, setHover] = react.useState(null);
+
+							// 测量并适配：自然尺寸 = getBoundingClientRect ÷ 已提交 zoom（与
+							// DOM 实际状态严格同步，无竞态）。值不变不动 state（bail-out），
+							// 值变化才重置滚动到原点让树回到居中；同步记录自然尺寸供防抖。
+							function applyFit() {
+								const scroller = scrollRef.current;
+								const content = contentRef.current;
+								if (!scroller || !content) return;
+								const rect = content.getBoundingClientRect();
+								if (!(rect.width > 0) || !(rect.height > 0)) return;
+								const committed = committedZoomRef.current;
+								const naturalW = rect.width / committed;
+								const naturalH = rect.height / committed;
+								lastNaturalRef.current = { w: naturalW, h: naturalH };
+								const fit = fitZoom(naturalW, naturalH, scroller.clientWidth, scroller.clientHeight);
+								zoomRef.current = fit;
+								if (fit !== committed) {
+									scroller.scrollLeft = 0;
+									scroller.scrollTop = 0;
+									setZoomState(fit);
+								}
+							}
+
+							// 挂载 / 文档切换：清除「用户已手动缩放」标记与熔断计数，
+							// 布局稳定后（rAF）适配一次。
+							react.useLayoutEffect(() => {
+								userZoomedRef.current = false;
+								lastNaturalRef.current = null;
+								fitStampRef.current = [];
+								const id = requestAnimationFrame(applyFit);
+								return () => cancelAnimationFrame(id);
+							}, [fitKey]);
+
+							// 内容 / 画布尺寸变化（AI 编辑、面板拖宽）→ 未手动缩放则再适配。
+							// 区分触发源：仅内容变化（多为 zoom 引发的重排）时对比自然尺寸
+							// （÷ 已提交 zoom），差异 ≤ 2px 视为「滚动条抖动/亚像素重测」跳过；
+							// 画布变化（拖宽、滚动条出现）正常再适配。熔断器兜底：1.5s 内
+							// 第 5 次观察器适配 → 判定循环，自动停手（点适配/切文档可恢复）。
+							react.useEffect(() => {
+								const scroller = scrollRef.current;
+								const content = contentRef.current;
+								if (!scroller || !content || typeof ResizeObserver === "undefined") return;
+								const observer = new ResizeObserver((entries) => {
+									if (userZoomedRef.current) return;
+									const scrollerChanged = entries.some((e) => e.target === scroller);
+									if (!scrollerChanged) {
+										const last = lastNaturalRef.current;
+										if (last) {
+											const rect = content.getBoundingClientRect();
+											const w = rect.width / committedZoomRef.current;
+											const h = rect.height / committedZoomRef.current;
+											if (Math.abs(w - last.w) <= 2 && Math.abs(h - last.h) <= 2) return;
+										}
+									}
+									const now = Date.now();
+									const stamps = fitStampRef.current = fitStampRef.current.filter((t) => now - t < 1500);
+									if (stamps.length >= 5) {
+										userZoomedRef.current = true;
+										return;
+									}
+									stamps.push(now);
+									applyFit();
+								});
+								observer.observe(content);
+								observer.observe(scroller);
+								return () => observer.disconnect();
+							}, []);
+
+				function setZoom(next, anchorViewport) {
+					const value = clampZoom(next);
+					anchorRef.current = anchorViewport && scrollRef.current
+						? { prevZoom: zoomRef.current, scrollLeft: scrollRef.current.scrollLeft, scrollTop: scrollRef.current.scrollTop }
+						: null;
+					zoomRef.current = value;
+					setZoomState(value);
+				}
+
+				// 用户缩放后保持视口中心稳定：内容坐标按 new/old 比例缩放，scroll 同步修正。
+				// fit 路径 anchorRef 为 null，不锚定。
+				react.useLayoutEffect(() => {
+					// DOM 已提交到该 zoom，测量换算基准同步（applyFit 依赖）。
+					committedZoomRef.current = zoom;
+					if (focusRef.current) {
+						positionFocus();
+						return;
+					}
+					const scroller = scrollRef.current;
+					const anchor = anchorRef.current;
+					if (!scroller || !anchor) return;
+					anchorRef.current = null;
+					const ratio = anchor.prevZoom > 0 ? zoom / anchor.prevZoom : 1;
+					if (!(ratio > 0) || ratio === 1) return;
+					scroller.scrollLeft = (anchor.scrollLeft + scroller.clientWidth / 2) * ratio - scroller.clientWidth / 2;
+					scroller.scrollTop = (anchor.scrollTop + scroller.clientHeight / 2) * ratio - scroller.clientHeight / 2;
+				}, [zoom]);
+
+				function zoomIn() {
+					userZoomedRef.current = true;
+					setZoom(stepZoom(zoomRef.current, 1), true);
+				}
+
+				function zoomOut() {
+					userZoomedRef.current = true;
+					setZoom(stepZoom(zoomRef.current, -1), true);
+				}
+
+				function refit() {
+					userZoomedRef.current = false;
+					fitStampRef.current = [];
+					applyFit();
+				}
+
+				// 016 点击节点聚焦：节点滚到「垂直居中、水平约 25%」（树向右生长，
+				// 左侧锚点让子级铺满右侧视野），缩放比例取 focusZoom（整棵子树适配、
+				// 上限 focusMax）。事件委托：closest 找节点盒与所在子树 row，无需给
+				// 递归 TreeRow 传回调。聚焦视为用户手动缩放（停自动再适配）。
+				function onCanvasClick(e) {
+					const target = e.target;
+					if (!target || typeof target.closest !== "function") return;
+					const boxEl = target.closest("[data-mindmap-node]");
+					if (!boxEl || !boxEl.isConnected) return;
+					const rowEl = boxEl.closest("[data-mindmap-row]");
+					if (!rowEl) return;
+					const scroller = scrollRef.current;
+					if (!scroller) return;
+					const current = zoomRef.current;
+					const rowRect = rowEl.getBoundingClientRect();
+					const focus = focusZoom(rowRect.width / current, rowRect.height / current, scroller.clientWidth, scroller.clientHeight);
+					userZoomedRef.current = true;
+					focusRef.current = { boxEl };
+					if (focus !== current) {
+						anchorRef.current = null;
+						zoomRef.current = focus;
+						setZoomState(focus);
+					} else {
+						positionFocus();
+					}
+				}
+
+				// 聚焦定位：DOM 更新后量节点盒当前位置，滚动增量 = 当前位置 − 期望位置
+				//（scroll 增量与视口位移 1:1，浏览器自动钳制滚动范围；比例不变时同步调用）。
+				function positionFocus() {
+					const focus = focusRef.current;
+					focusRef.current = null;
+					const scroller = scrollRef.current;
+					if (!scroller || !focus || !focus.boxEl || !focus.boxEl.isConnected) return;
+					const boxRect = focus.boxEl.getBoundingClientRect();
+					const scrollerRect = scroller.getBoundingClientRect();
+					const curX = boxRect.left + boxRect.width / 2 - scrollerRect.left;
+					const curY = boxRect.top + boxRect.height / 2 - scrollerRect.top;
+					scroller.scrollLeft += curX - scroller.clientWidth * 0.25;
+					scroller.scrollTop += curY - scroller.clientHeight / 2;
+				}
+
+				// 边界反馈：到达上下限时对应按钮置灰（fit 值与边界精确相等时也命中）。
+				const atMin = zoom <= ZOOM.min;
+				const atMax = zoom >= ZOOM.max;
+				const zoomBtnStyle = (key, disabled) => (disabled
+					? { ...S.zoomBtn, ...S.zoomBtnDisabled }
+					: (hover === key ? { ...S.zoomBtn, ...S.zoomBtnHover } : S.zoomBtn));
+
+				return (0, react_jsx_runtime.jsxs)("div", { style: S.canvasWrap, children: [
+					(0, react_jsx_runtime.jsx)("div", { ref: scrollRef, style: S.canvasScroll, onClick: onCanvasClick, children:
+						(0, react_jsx_runtime.jsx)("div", { style: S.canvasCenter, children:
+							(0, react_jsx_runtime.jsx)("div", { ref: contentRef, style: { margin: "auto", zoom }, children:
+								(0, react_jsx_runtime.jsx)(TreeRow, { node, theme })
+							})
+						})
+					}),
+					(0, react_jsx_runtime.jsxs)("div", { style: S.zoomBar, children: [
+						(0, react_jsx_runtime.jsx)("button", {
+							type: "button",
+							title: "缩小",
+							style: zoomBtnStyle("out", atMin),
+							disabled: atMin,
+							onClick: zoomOut,
+							onMouseEnter: () => setHover("out"),
+							onMouseLeave: () => setHover((h) => (h === "out" ? null : h)),
+							children: "−",
+						}),
+						(0, react_jsx_runtime.jsx)("span", { style: S.zoomLabel, children: `${Math.round(zoom * 100)}%` }),
+						(0, react_jsx_runtime.jsx)("button", {
+							type: "button",
+							title: "放大",
+							style: zoomBtnStyle("in", atMax),
+							disabled: atMax,
+							onClick: zoomIn,
+							onMouseEnter: () => setHover("in"),
+							onMouseLeave: () => setHover((h) => (h === "in" ? null : h)),
+							children: "+",
+						}),
+						(0, react_jsx_runtime.jsx)("button", {
+							type: "button",
+							title: "适配画布（重新计算合适比例）",
+							style: hover === "fit" ? { ...S.zoomFitBtn, ...S.zoomBtnHover } : S.zoomFitBtn,
+							onClick: refit,
+							onMouseEnter: () => setHover("fit"),
+							onMouseLeave: () => setHover((h) => (h === "fit" ? null : h)),
+							children: "适配",
+						}),
+					] }),
+				] });
+				}
+				//#endregion
 
 		function MindmapDetailsPanel(props) {
 			// 014：面板与 M 按钮同槽位（conversation.session.header.actions），
@@ -1606,13 +1925,15 @@ window.__ModuleLoader__.load({
 						}, shown) : null,
 					] }),
 				] }),
-				(0, react_jsx_runtime.jsx)("div", { style: S.body, children: active === TREE_TAB
-					? renderTree()
-					: (doc && doc.op === "local")
-						? renderLoading()
-						: tree
-							? (0, react_jsx_runtime.jsx)(TreeRow, { node: tree, theme })
-							: renderTree() }),
+				// 016：脑图视图走 MindmapCanvas（自带滚动 + 居中 + 右上角缩放控制条），
+				// 不再套 S.body（避免嵌套滚动容器与双重 padding）；目录/加载/空态保持原样。
+				active === TREE_TAB || (doc && doc.op === "local") || !tree
+					? (0, react_jsx_runtime.jsx)("div", { style: S.body, children: active === TREE_TAB
+						? renderTree()
+						: (doc && doc.op === "local")
+							? renderLoading()
+							: renderTree() })
+					: (0, react_jsx_runtime.jsx)(MindmapCanvas, { node: tree, theme, fitKey: doc && doc.path }),
 				tabMenu ? (0, react_jsx_runtime.jsxs)("div", {
 					style: { ...S.treeMenu, left: tabMenu.x, top: tabMenu.y },
 					onContextMenu: (e) => e.preventDefault(),
@@ -1729,6 +2050,10 @@ window.__ModuleLoader__.load({
 			relPathWithin,
 			visibleTreeRows,
 			colorThemeTokens,
+			clampZoom,
+			stepZoom,
+			fitZoom,
+			focusZoom,
 			TOOL_NAMES,
 			OPENING_OPS,
 		});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dsh-mindmap",
-  "version": "0.3.0",
+  "version": "0.4.1",
   "description": "Mindmap plugin for DeepSeek Harness: a plain markdown file in the working directory IS the mindmap; the chat edits it step by step and the right-side panel follows live.",
   "repository": {
     "type": "git",