修复:DAG 画布 tab 切换后节点拖不动(多层根因)

根因链:
1. mousemove handler 更新 rect 用闭包 s.pos(旧 dagState 对象),切回 tab 后 renderDag 重建 dagState,s 指向旧对象 → 节点被设回旧布局值 → 视觉上拖不动 → 改为 handler 内现查的 st.pos
2. overflow:visible 让节点绘制到 svg 元素盒外,盒外内容看得见但命中测试不到 → svg 盒加 ±3000 边距(DAG_M)+viewBox 同步扩大,节点永远可命中
3. 保存的越界节点位置(y=620>画布560)使 fit 看不到 → dagFitView 改为基于节点实际包围盒计算
4. 打开时仅'任一节点可见'就保留旧视图 → 改为'全部节点可见',任一越界自动适配

实测:刷新进入/SPA切看板切回/连续切换3次后,真实鼠标拖动均精确跟随;缩放显示/100%按钮/删除区正常
This commit is contained in:
2026-08-13 00:25:01 +08:00
parent dfdcd78f1a
commit 3cbe3a5996
+28 -17
View File
@@ -324,16 +324,25 @@ function dagSize() {
}
function dagFitView() {
// 画布适配视口:缩放并居中,让全部节点可见
// 画布适配视口:基于节点实际包围盒缩放并居中,让全部节点可见
const s = dagState;
const box = $('#dag-box');
const {width, height} = dagSize();
if (!box || !s) return;
const poss = Object.values(s.pos || {});
if (!poss.length) return;
const minX = Math.min(...poss.map(p => p.x)) - 120;
const maxX = Math.max(...poss.map(p => p.x)) + 120;
const minY = Math.min(...poss.map(p => p.y)) - 120;
const maxY = Math.max(...poss.map(p => p.y)) + 120;
const cw = Math.max(200, maxX - minX), ch = Math.max(200, maxY - minY);
const bw = box.clientWidth, bh = box.clientHeight;
const scale = Math.max(0.25, Math.min(1, (bw - 60) / width, (bh - 60) / height));
const scale = Math.max(0.25, Math.min(1, (bw - 60) / cw, (bh - 60) / ch));
s.scale = scale;
s.tx = (bw - width * scale) / 2;
s.ty = (bh - height * scale) / 2;
// 节点包围盒中心(viewBox 坐标)对准视口中心
const cx = DAG_M + (minX + maxX) / 2;
const cy = DAG_M + (minY + maxY) / 2;
s.tx = bw / 2 - cx * scale;
s.ty = bh / 2 - cy * scale;
dagApplyView();
saveDagState();
}
@@ -382,6 +391,7 @@ function drawDag() {
const body = $('#tab-body');
if (!body) return;
const NW = 140, NHW = 70; // 节点宽 / 半宽
const M = DAG_M; // svg 盒边距:节点平移/缩放后仍在盒内可命中
const dagText = t => {
const raw = `#${t.id} ${t.title}`;
return raw.length > 13 ? raw.slice(0, 13) + '…' : raw;
@@ -397,9 +407,9 @@ function drawDag() {
<button onclick="dagZoomTo(1)" title="一键回到 100% 原始视图">100%</button>
</div>
<div class="dag-trash" id="dag-trash" onclick="openDagTrash()" title="点击查看回收站">🗑️ 删除区<span class="cnt" id="dag-trash-cnt">0</span></div>
<svg id="dag-svg" width="${width}" height="${Math.max(480, height)}" viewBox="0 0 ${width} ${height}" style="transform-origin:0 0">
<svg id="dag-svg" width="${width + M * 2}" height="${Math.max(480, height) + M * 2}" viewBox="${-M} ${-M} ${width + M * 2} ${height + M * 2}" style="transform-origin:0 0">
<defs><marker id="arrow" markerWidth="8" markerHeight="8" refX="7" refY="3" orient="auto"><path d="M0,0 L8,3 L0,6 Z" fill="#4a5878"/></marker></defs>
<rect id="dag-bg" x="-4000" y="-4000" width="${width + 8000}" height="${height + 8000}" fill="var(--panel)"/>
<rect id="dag-bg" x="${-M - 1000}" y="${-M - 1000}" width="${width + 2 * M + 2000}" height="${height + 2 * M + 2000}" fill="var(--panel)"/>
${edges.map(e => {
const a = dagState.pos[e.from], b = dagState.pos[e.to];
if (!a || !b) return '';
@@ -426,6 +436,7 @@ function drawDag() {
let dagBound = false; // window 级监听只绑定一次
let dagDrag = null; // 模块级拖拽状态(box 重绑后 window handler 仍可访问)
const DAG_M = 3000; // svg 盒边距:节点平移/缩放后仍在盒内可命中
function bindDagEvents() {
const box = $('#dag-box');
if (!box) return;
@@ -509,7 +520,7 @@ function bindDagEvents() {
if (!svgEl2) return;
svgEl2.querySelectorAll('.dag-node').forEach(g => {
const nid = Number(g.dataset.id);
const pp = s.pos[nid];
const pp = st.pos[nid];
if (!pp) return;
g.querySelector('rect').setAttribute('x', pp.x - 70);
g.querySelector('rect').setAttribute('y', pp.y - 24);
@@ -527,7 +538,7 @@ function bindDagEvents() {
projCtx.tasks.forEach(t => {
if (t.id !== tid) return;
(t.depends_on || []).forEach(d => {
const b = s.pos[d];
const b = st.pos[d];
if (!b) return;
const path = svgEl2.querySelector(`path[data-e="${d}-${tid}"]`);
if (!path) return;
@@ -662,20 +673,20 @@ function renderDag() {
const body2 = $('#tab-body');
body2.innerHTML = '';
drawDag();
// 节点是否在视口内?不在则自动适配(防止节点被平移到视口外无法操作)
// 节点是否全部在视口内?任一越界则自动适配(防止节点被平移到视口外无法操作)
const box = $('#dag-box');
const bb = box ? box.getBoundingClientRect() : null;
let anyVisible = false;
let allVisible = !bb;
if (bb) {
tasks.forEach(t => {
allVisible = tasks.every(t => {
const p = dagState.pos[t.id];
if (!p) return;
const vx = bb.left + dagState.tx + p.x * dagState.scale;
const vy = bb.top + dagState.ty + p.y * dagState.scale;
if (vx < bb.right && vx > bb.left && vy < bb.bottom && vy > bb.top) anyVisible = true;
if (!p) return true;
const vx = bb.left + dagState.tx + (DAG_M + p.x) * dagState.scale;
const vy = bb.top + dagState.ty + (DAG_M + p.y) * dagState.scale;
return vx < bb.right && vx > bb.left && vy < bb.bottom && vy > bb.top;
});
}
if (!anyVisible || !savedView) dagFitView();
if (!allVisible || !savedView) dagFitView();
}
async function runWorkflow() {