Restore direct ROI resizing controls

Author: IgnatiusWang1001

docs/代码实现.md

@@ -86,6 +86,72 @@
 
 ---
 
+## 2026-06-20 00:22
+
+## ROI 交互回退优化：三类框均支持直接缩放，修复检测框宽度滑杆失效
+本轮修复针对用户明确反馈的两个实际可用性问题：
+- 上一轮增强后，`检测框宽度` 滑杆虽然改了设置值，但不会立即改变画布上已经存在的 ROI，表现为“滑了没变化”
+- 用户不希望继续依赖抽象滑杆猜测框体变化，希望蓝色泳道框、橙色目标框、青色内参框都能直接在图上调大小
+
+## 根因定位
+- `work/app/src/App.tsx`
+- 右侧控制面板的滑杆只调用 `updateSettings(...)`，并未同步改写当前 `draftsByPanelId`
+- 因此只要不重新草拟，现有 ROI 几何就保持不动，用户看到的就是参数变了、框没变
+- 另一个问题是当前画布交互仍是“按下记录起点，松手时一次性位移”，并不是真正的实时拖拽，更不支持直接缩放
+
+## 本轮修改点
+### 1. 新增现有 ROI 几何重整函数
+- `work/app/src/lib/analysis.ts`
+- 新增 `retuneDraftsForSettings(...)`
+- 作用：
+  - 当 `laneWidthScale / laneHeight / bandWidthScale / bandHeight / primaryY / referenceY` 变化时
+  - 直接在当前 drafts 上做几何重整
+  - 保留用户已经手工拖过的大致位置，而不是强制重新自动草拟
+
+### 2. 修复检测框宽度滑杆“滑了没变化”
+- `work/app/src/App.tsx`
+- `updateSettings(...)` 现在在相关参数变化时会同步调用 `retuneDraftsForSettings(...)`
+- 结果是：
+  - 调 `检测框宽度`，橙框和青框会立即变宽/变窄
+  - 调 `泳道宽度` / `泳道高度`，蓝框也会立即改变
+  - 调 `目标条带行` / `内参条带行`，短框会直接上下移动
+
+### 3. 三类框全部恢复为可直接缩放
+- `work/app/src/App.tsx`
+- `work/app/src/App.css`
+- 现在蓝框、橙框、青框都支持：
+  - 直接拖动位置
+  - 选中后显示四个小型角点
+  - 从角点直接缩放框体
+- 角点尺寸做得很小，只在选中状态下显示，避免再次遮挡条带图像
+
+### 4. 拖动改为实时生效
+- `work/app/src/App.tsx`
+- 原来是 `mouseDown` 记录起点、`mouseUp` 时一次性结算位移
+- 现在改为 `mouseMove` 实时更新，`mouseUp / mouseLeave` 结束操作
+- 这让框体移动和缩放的反馈更接近正常图形编辑器
+
+### 5. 回归测试补充
+- `work/app/src/lib/analysis.test.ts`
+- 新增测试验证：
+  - 当 `bandWidthScale` 从 `1.0` 调到 `1.3`
+  - 已存在的 primary / reference ROI 会立即变宽
+
+## 验证结果
+- `npm run lint` 通过
+- `npx vitest run` 通过，3 个测试文件、13 个测试全部通过
+- `npm run build` 通过
+
+## 当前效果判断
+到这一步为止，交互层已经回到更符合用户直觉的状态：
+- 不是只能靠重新草拟或抽象滑杆猜
+- 三类框都能直接在图上拖和改大小
+- `检测框宽度` 滑杆终于会即时改变当前 ROI，而不是看起来失效
+
+这轮修复本质上是把工具从“参数驱动的半静态框架”重新拉回“图上直接编辑”的工作流，更接近真实实验用户的操作习惯。
+
+---
+
 ## 2026-06-20 00:01
 
 ## 宽条带 / 拖尾条带场景的 ROI 宽度自适应修复

work/app/src/App.css

@@ -500,6 +500,44 @@
   background: rgba(49, 77, 86, 0.12);
 }
 
+.resize-handle {
+  position: absolute;
+  width: 10px;
+  height: 10px;
+  padding: 0;
+  border: 1px solid rgba(255, 252, 247, 0.95);
+  border-radius: 999px;
+  background: var(--ink);
+  box-shadow: 0 0 0 1px rgba(63, 53, 42, 0.12);
+  cursor: nwse-resize;
+  z-index: 3;
+}
+
+.resize-ne,
+.resize-sw {
+  cursor: nesw-resize;
+}
+
+.resize-nw {
+  left: -5px;
+  top: -5px;
+}
+
+.resize-ne {
+  right: -5px;
+  top: -5px;
+}
+
+.resize-sw {
+  left: -5px;
+  bottom: -5px;
+}
+
+.resize-se {
+  right: -5px;
+  bottom: -5px;
+}
+
 .rail {
   display: grid;
   gap: 14px;

work/app/src/App.tsx

@@ -15,6 +15,8 @@ import {
   defaultSettings,
   draftLaneLayout,
   readFileAsDataUrl,
+  resizeRegionFromHandle,
+  retuneDraftsForSettings,
   syncLaneConfigs,
   type AnalysisResult,
   type AnalysisSettings,
@@ -44,6 +46,7 @@ import type {
   LaneDraft,
   PanelAsset,
   Rect,
+  ResizeHandle,
   SelectedRegion,
   StatisticalSettings,
 } from './types'
@@ -126,6 +129,7 @@ function App() {
     startX: number
     startY: number
     region: SelectedRegion
+    handle?: ResizeHandle
   } | null>(null)
   const [showAutosaveBanner, setShowAutosaveBanner] = useState(Boolean(restoredProject))
   const [installPrompt, setInstallPrompt] = useState<BeforeInstallPromptEvent | null>(null)
@@ -368,10 +372,35 @@ function App() {
     if (!activePanelId) {
       return
     }
+    const previousSettings = settingsByPanelId[activePanelId] ?? settings
+    const nextSettings = { ...previousSettings, [key]: value }
     setSettingsByPanelId((current) => ({
       ...current,
-      [activePanelId]: { ...(current[activePanelId] ?? settings), [key]: value },
+      [activePanelId]: nextSettings,
     }))
+
+    if (
+      draftsByPanelId[activePanelId]?.length &&
+      ['laneWidthScale', 'laneHeight', 'bandWidthScale', 'bandHeight', 'primaryY', 'referenceY'].includes(
+        String(key),
+      )
+    ) {
+      const bounds = {
+        x: 0,
+        y: 0,
+        width: activeAnalysis?.width ?? 1000,
+        height: activeAnalysis?.height ?? 620,
+      }
+      setDraftsByPanelId((current) => ({
+        ...current,
+        [activePanelId]: retuneDraftsForSettings({
+          drafts: current[activePanelId] ?? [],
+          previous: previousSettings,
+          next: nextSettings,
+          bounds,
+        }),
+      }))
+    }
   }
 
   function updateStatisticalSettings<K extends keyof StatisticalSettings>(
@@ -700,16 +729,20 @@ function App() {
   function handleOverlayMouseDown(
     event: ReactMouseEvent<HTMLButtonElement>,
     region: SelectedRegion,
+    handle?: ResizeHandle,
   ) {
+    event.preventDefault()
+    event.stopPropagation()
     setSelectedRegion(region)
     setDragState({
       startX: event.clientX,
       startY: event.clientY,
       region,
+      handle,
     })
   }
 
-  function handleOverlayMouseUp(event: ReactMouseEvent<HTMLDivElement>) {
+  function handleOverlayMouseMove(event: ReactMouseEvent<HTMLDivElement>) {
     if (!dragState || !activePanelId) {
       return
     }
@@ -730,10 +763,34 @@ function App() {
       ...current,
       [activePanelId]: current[activePanelId].map((draft) =>
         draft.id === dragState.region.laneId
-          ? applyRegionDelta(draft, dragState.region, deltaX, deltaY, bounds)
+          ? dragState.handle
+            ? resizeRegionFromHandle(
+                draft,
+                dragState.region,
+                dragState.handle,
+                deltaX,
+                deltaY,
+                dragState.region.target === 'lane' ? bounds : draft.lane,
+              )
+            : applyRegionDelta(draft, dragState.region, deltaX, deltaY, bounds)
           : draft,
       ),
     }))
+    setDragState((current) =>
+      current
+        ? {
+            ...current,
+            startX: event.clientX,
+            startY: event.clientY,
+          }
+        : null,
+    )
+  }
+
+  function handleOverlayMouseUp() {
+    if (!dragState) {
+      return
+    }
     setDragState(null)
   }
 
@@ -784,6 +841,31 @@ function App() {
     setShowAutosaveBanner(false)
   }
 
+  function renderResizeHandles(
+    laneId: string,
+    target: SelectedRegion['target'],
+  ) {
+    const handles: ResizeHandle[] = ['nw', 'ne', 'sw', 'se']
+    return handles.map((handle) => (
+      <button
+        key={`${laneId}-${target}-${handle}`}
+        type="button"
+        className={`resize-handle resize-${handle}`}
+        onMouseDown={(event) =>
+          handleOverlayMouseDown(
+            event,
+            {
+              laneId,
+              target,
+            },
+            handle,
+          )
+        }
+        onClick={(event) => event.stopPropagation()}
+      />
+    ))
+  }
+
   function handleDropzoneDragOver(event: ReactDragEvent<HTMLDivElement>) {
     event.preventDefault()
     if (!isDragActive) {
@@ -1084,7 +1166,13 @@ function App() {
                     alt={activePanel.name}
                     className="stage-image"
                   />
-                  <div className="overlay" style={overlayStyle(stageMetrics)} onMouseUp={handleOverlayMouseUp}>
+                  <div
+                    className="overlay"
+                    style={overlayStyle(stageMetrics)}
+                    onMouseMove={handleOverlayMouseMove}
+                    onMouseUp={handleOverlayMouseUp}
+                    onMouseLeave={handleOverlayMouseUp}
+                  >
                     {activeGeometries.map((geometry, index) => (
                       <div
                         key={geometry.id}
@@ -1108,6 +1196,9 @@ function App() {
                           }
                           onClick={() => handleSelectRegion({ laneId: geometry.id, target: 'lane' })}
                         />
+                        {isSelected(selectedRegion, geometry.id, 'lane')
+                          ? renderResizeHandles(geometry.id, 'lane')
+                          : null}
                         <button
                           type="button"
                           className={`band-outline primary ${
@@ -1122,6 +1213,9 @@ function App() {
                           }
                           onClick={() => handleSelectRegion({ laneId: geometry.id, target: 'primary' })}
                         />
+                        {isSelected(selectedRegion, geometry.id, 'primary')
+                          ? renderResizeHandles(geometry.id, 'primary')
+                          : null}
                         {geometry.reference ? (
                           <>
                             <button
@@ -1140,6 +1234,9 @@ function App() {
                                 handleSelectRegion({ laneId: geometry.id, target: 'reference' })
                               }
                             />
+                            {isSelected(selectedRegion, geometry.id, 'reference')
+                              ? renderResizeHandles(geometry.id, 'reference')
+                              : null}
                           </>
                         ) : null}
                       </div>

work/app/src/lib/analysis.test.ts

@@ -3,6 +3,7 @@ import {
   autoDraftFromSignal,
   buildDefaultDrafts,
   detectSignalBounds,
+  retuneDraftsForSettings,
   resizeRegionFromHandle,
   summarizeGroups,
   type AnalysisSettings,
@@ -222,4 +223,22 @@ describe('analysis helpers', () => {
     expect(resized.primary.x).toBeGreaterThanOrEqual(draft.lane.x)
     expect(resized.primary.y).toBeGreaterThanOrEqual(draft.lane.y)
   })
+
+  it('retunes existing drafts when band width scale changes', () => {
+    const original = buildDefaultDrafts({
+      width: 1000,
+      height: 600,
+      settings: { ...settings, laneCount: 1, bandWidthScale: 1 },
+    })[0]
+
+    const widened = retuneDraftsForSettings({
+      drafts: [original],
+      previous: { ...settings, laneCount: 1, bandWidthScale: 1 },
+      next: { ...settings, laneCount: 1, bandWidthScale: 1.3 },
+      bounds: { x: 0, y: 0, width: 1000, height: 600 },
+    })[0]
+
+    expect(widened.primary.width).toBeGreaterThan(original.primary.width)
+    expect(widened.reference?.width ?? 0).toBeGreaterThan(original.reference?.width ?? 0)
+  })
 })