From 24192ad12a57bdd1a3ffad3b6db85c1e56e99032 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=8E=8B=E5=BE=B7=E5=AE=87?= <kvtodev@outlook.com>
Date: Fri, 24 Jul 2026 12:02:41 +0800
Subject: [PATCH] fix: ignore wheel event from text area to prevent canva move

---
 ...™¨ã€‘生æˆ�ç±»é�¢æ�¿Lovart统一改造方案-2026-06-17.md |  1 +
 .../useImageCanvasViewportControls.test.tsx   | 21 +++++++++++++++++++
 .../useImageCanvasViewportControls.ts         | 17 ++++++++++++++-
 3 files changed, 38 insertions(+), 1 deletion(-)

diff --git a/docs/�编辑器】生�类��Lovart统一改造方案-2026-06-17.md b/docs/�编辑器】生�类��Lovart统一改造方案-2026-06-17.md
index 6fd784f9f..26bc34cb6 100644
--- a/docs/�编辑器】生�类��Lovart统一改造方案-2026-06-17.md
+++ b/docs/�编辑器】生�类��Lovart统一改造方案-2026-06-17.md
@@ -66,6 +66,7 @@
 - 底边�中会在上方弹出二级选项的入����赖点击展开。鼠标悬�到入���打开二级��，鼠标离开入�和二级���自动收起；当�范围包括 `生�规范` 和 `生�音�`。
 - 底边�二级选项��必须锚定到对应入�按钮本身，�使用�幕居中或固定底部�移；移动端窄�下也应��跟�入��置。
 - 生�图片和生�视频文本输入框紧贴�考图下方，�消旧网格预留导致的空白高度。
+- 在生�类��或独立修改弹窗的文本输入框内滚动时，滚轮�用于输入内容或��自身，�得冒泡平移或缩放画布；
 - 生�规范类图片固定使用 `16:9·2K · gpt-image-2`。这三个�数在��底部沿用�编辑�数按钮的胶囊样�展示，但控件���用��点击，��供比例�尺寸或模型修改入�。
 - 宣�素�的 `游�首图`�`详情五图`�`��海报` 固定使用 `gpt-image-2`。��底部�显示�用� `gpt-image-2` 模型胶囊和生�按钮，�出现 `nanobanana2` 选项；�端收到 `publication-material` 旧请求时也必须强制归一为 `gpt-image-2`。
 - 图片快速编辑�留一个�示�输入框，并展示与常规图片生�一致的比例 / 尺寸和模型选择；�示� placeholder 为 `你希望素�如何修改？`，�交按钮显示 `修改`，�展示�外�考图控件。打开��时优先继承原图关�生�器记录的模型�比例和尺寸；没有关�生�器时使用图层模型，并按原图真实分辨率推导比例和尺寸；模型缺失或已��支�时回�到当�默认图片模型。切�模型��展示该模型支�的�数，�兼容的当�值回�到该模型默认值，按钮泥点按选定模型和尺寸�步刷新。�交时必须�时传递 `model / aspectRatio / imageSize`；�端按模型选择 provider �议：`nanobanana2` 使用 `generateContent + inline_data`，`gpt-image-2` 使用 `/v1/images/edits` multipart，�能把 nanobanana 模型 ID �往 GPT edits 端点。
diff --git a/src/components/image-editor/useImageCanvasViewportControls.test.tsx b/src/components/image-editor/useImageCanvasViewportControls.test.tsx
index 0f0ab01eb..6c4fed9f9 100644
--- a/src/components/image-editor/useImageCanvasViewportControls.test.tsx
+++ b/src/components/image-editor/useImageCanvasViewportControls.test.tsx
@@ -191,6 +191,27 @@ describe('useImageCanvasViewportControls', () => {
     });
   });
 
+  it('does not pan the canvas when a generation prompt receives wheel input', () => {
+    const { result, viewportElement } = renderViewportControls();
+    const prompt = document.createElement('textarea');
+    viewportElement.append(prompt);
+    const initialViewport = result.current.viewport;
+
+    const wheelEvent = new WheelEvent('wheel', {
+      bubbles: true,
+      cancelable: true,
+      deltaY: 120,
+      clientX: 260,
+      clientY: 190,
+    });
+    act(() => {
+      prompt.dispatchEvent(wheelEvent);
+    });
+
+    expect(result.current.viewport).toEqual(initialViewport);
+    expect(wheelEvent.defaultPrevented).toBe(false);
+  });
+
   it('handles native two-axis wheel pan, ctrl wheel zoom and minimap movement', () => {
     const rafCallbacks: FrameRequestCallback[] = [];
     vi.spyOn(window, 'requestAnimationFrame').mockImplementation(
diff --git a/src/components/image-editor/useImageCanvasViewportControls.ts b/src/components/image-editor/useImageCanvasViewportControls.ts
index 2f74c1b8f..dddbe6784 100644
--- a/src/components/image-editor/useImageCanvasViewportControls.ts
+++ b/src/components/image-editor/useImageCanvasViewportControls.ts
@@ -34,6 +34,15 @@ export const DEFAULT_IMAGE_CANVAS_VIEWPORT: CanvasViewport = {
   scale: 0.5,
 };
 
+function isCanvasWheelInteractionTarget(target: EventTarget | null) {
+  return (
+    target instanceof Element &&
+    target.closest(
+      'input, textarea, select, [contenteditable="true"]',
+    ) !== null
+  );
+}
+
 type UseImageCanvasViewportControlsOptions = {
   canvasViewportRef: RefObject<HTMLDivElement | null>;
   layers: CanvasLayer[];
@@ -253,12 +262,18 @@ export function useImageCanvasViewportControls({
 
   const handleNativeWheel = useCallback(
     (event: WheelEvent) => {
-      event.preventDefault();
+      // Let form controls and their scrollable panels keep native wheel input.
+      if (isCanvasWheelInteractionTarget(event.target)) {
+        return;
+      }
+
       const viewportElement = canvasViewportRef.current;
       if (!viewportElement) {
         return;
       }
 
+      event.preventDefault();
+
       if (!event.ctrlKey && !event.metaKey) {
         const useShiftWheelHorizontalFallback =
           event.shiftKey && event.deltaX === 0;
-- 
2.52.0