修复画笔橡皮擦选区提示与越界绘制

- 画笔和橡皮擦模式下保留当前选中 mask 的顶点提示，并将顶点设为只读，方便确认正在处理的区域。

- 画笔和橡皮擦采样改为图像范围外不落点，离开图像再进入时不会连出跨越边界的笔触。

- 画笔/橡皮擦最终 stroke geometry 按当前帧图像边界裁剪，避免边缘笔触生成图外 polygon。

- 补充 CanvasArea 回归测试，覆盖顶点提示、图外落笔不创建 mask、靠边笔触坐标不越界。

- 更新需求冻结和测试计划文档，记录笔触边界与只读顶点提示行为。

doc/07-current-requirements-freeze.md

@@ -76,8 +76,8 @@
 - 工作区 AI 智能分割入口切换到 AI 页面。
 - 多边形、矩形、圆、画笔、橡皮擦工具会在 Canvas 上生成或编辑可保存的 polygon mask；左侧工具栏不再提供创建点和创建线段入口。
 - 多边形通过点击取点并按 Enter 完成，也支持三点后点击首节点闭合；矩形、圆通过拖拽生成；画笔和橡皮擦支持调整大小。
-- 画笔工具只在语义分类树有选中类别时可用，按住拖动时以圆形笔触采样，鼠标松开后一次性 union 成连续区域；如果笔触与当前选中 mask 连通，默认合并到该 mask，否则生成新的当前类别 mask。
+- 画笔工具只在语义分类树有选中类别时可用，按住拖动时以圆形笔触采样，鼠标松开后一次性 union 成连续区域；如果笔触与当前选中 mask 连通，默认合并到该 mask，否则生成新的当前类别 mask；笔触只在当前图像范围内采样，最终几何也必须裁剪到当前帧边界内。
-- 橡皮擦工具只在当前帧已选中 mask 时可用，按住拖动时以圆形笔触采样，鼠标松开后从选中 mask 中 difference 扣除；扣空时删除该 mask，已保存 mask 仍需同步后端删除。
+- 橡皮擦工具只在当前帧已选中 mask 时可用，按住拖动时以圆形笔触采样，鼠标松开后从选中 mask 中 difference 扣除；扣空时删除该 mask，已保存 mask 仍需同步后端删除；进入画笔或橡皮擦模式后，当前选中 mask 的顶点提示仍保持可见，但这些顶点在笔触模式下只读不可拖动。
 - 创建多边形、创建矩形、区域合并/去除、调整多边形等 Canvas 左上角上下文提示只作为短提示，切换工具或操作状态变化时显示，数秒后自动隐藏，避免长期遮挡待编辑图像；再次切换工具或操作状态变化会重新显示。
 - 绘制工具点击已有 mask 时应继续执行当前绘制动作，不应被 mask 选择逻辑吞掉。
 - 所有 polygon mask 都不显示黄色 seed point，也不提供 seed point 拖动；普通手工/AI/GT mask 在画布上应保持一致的区域渲染、选择、顶点编辑、拓扑统计、边缘平滑和保存体验。

doc/09-test-plan.md

@@ -18,7 +18,7 @@
 | R2 项目管理 | `src/lib/api.test.ts`, `src/components/ProjectLibrary.test.tsx`, `backend/tests/test_projects.py` | 前端字段映射、PATCH 更新、项目卡片复制/删除、修改项目名称时隐藏生成帧、DICOM 项目不显示生成帧、复制项目 reset/full 契约、DELETE 契约、后端 CRUD、删除级联、帧列表、项目按当前 JWT 用户隔离 |
 | R3 媒体上传与拆帧 | `src/components/ProjectLibrary.test.tsx`, `src/components/TransientNotice.test.tsx`, `backend/tests/test_media.py`, `backend/tests/test_tasks.py` | 视频导入不自动拆帧、视频/DICOM 上传进度可视化、DICOM 导入显示有效文件数量并在上传后持续显示解析任务进度、显式生成帧 FPS 选择、项目卡片显示目标 parse_fps 而非原视频 FPS、扩展名校验、自动建项目、关联项目、创建异步任务、非阻塞自动消失操作提示、标准帧序列参数、帧时间戳/源帧号、任务序列元数据、worker 注册帧、取消任务、重试任务、取消后 worker 停止 |
 | R4 工作区与帧浏览 | `src/components/VideoWorkspace.test.tsx`, `src/components/FrameTimeline.test.tsx` | 加载帧、无帧项目不自动解析并提示生成帧、工作区短状态自动消失、工作区/AI 画布底图默认居中且保留边距、工作区 mask 透明度、回显已保存标注时保留本地未保存 draft mask、选中 mask 后跨帧自动跟随同一传播链结果、左侧工具栏清空遮罩优先作用于当前帧选中 mask/无选中时作用于当前帧全部 mask、无传播链时直接执行、有传播链时可选取消/只清当前帧/按帧范围选择/清空所有传播帧且按范围清空需最终确认、按范围清空或清空所有传播帧遇到人工/AI 标注帧时二次询问并支持保留人工帧、顶栏不显示重复的清空片段遮罩、传播链布尔操作按帧范围选择并二次确认、清空/删除前预检后端 annotation id 并跳过本地陈旧 id、删除单个传播 mask 后空帧不保留传播历史颜色、传播权重下拉深色可读配色、自动传播范围选择时显示传播权重和向前/向后帧数、缩略图/range/视频处理进度条、视频处理进度条点击跳帧、人工/AI 标注帧红色竖线和标识点击跳帧、自动传播帧通过 source/lineage metadata 识别为蓝色区段和标识点击跳帧、最近自动传播历史片段同一蓝色系按新旧递进纯色显示，旧记录第 5 次后统一阈值色、当前帧白色贯穿线、传播/布尔/清空范围边界贯穿线、缩略图红/蓝边框、人工/AI 标注帧叠加传播状态时红框优先保留并显示蓝色内描边、当前人工/AI 标注帧青色外框加红色内描边、普通状态不显示传播范围黄色选区、播放进度条和视频处理进度条选择传播/布尔/清空范围、左右方向键切帧、播放、按项目 FPS 显示当前/总时长 |
-| R5 工具栏 | `src/components/ToolsPalette.test.tsx`, `src/components/CanvasArea.test.tsx`, `src/components/VideoWorkspace.test.tsx`, `src/lib/keyboardShortcuts.test.ts`, `src/store/useStore.test.ts` | 工具切换、工具栏紧凑垂直布局和高度不足时滚动、工具栏低对比滚动条、工具栏外扩滚动条槽位不挤占按钮列、调整多边形工具、AI 跳转、清空遮罩唯一左侧工具栏入口、清空遮罩上方 DEL 删除按钮、橡皮擦下方彩色 AI 自动传播入口、Canvas 右下角不再重复显示清空遮罩或应用分类按钮、GT Mask 导入位于清空遮罩分隔线之后且使用紫色底色、工具栏分隔线位于创建圆后、自动传播后和清空遮罩后、GT Mask 未知类别导入策略选择、工作区工具栏不展示 AI 正/反点和框选、左侧工具栏不重复撤销/重做、左侧工具栏不展示创建点/创建线段、矩形/圆/多边形手工 mask 绘制且未选分类时默认待分类、普通/导入 polygon mask 不显示黄色 seed point、画笔/橡皮擦尺寸控制、画笔新建当前类别 mask、画笔与选中 mask 连通时自动合并、橡皮擦从选中 mask 扣除、未选中 mask 时画布按语义分类树内部优先级渲染、多边形 Enter/首节点闭合、上下文提示提示 Enter/Esc/首节点闭合且数秒后自动隐藏、polygon 顶点直接拖动/删除、顶点拖拽结束不改变 Canvas 视口、边中点插点、双击边界按位置插点、多 polygon/分离区域全部显示编辑顶点、中空 mask 内洞 ring 顶点和插点可编辑、整块 mask 删除、DEL 和 Delete/Backspace 删除共用传播链范围确认、同帧传播链分散 mask 点选联动高亮、传播链自动传播 mask 随 seed/传播结果删除、独立 AI 推理 mask 不被误删、区域合并/去除存在传播帧时弹窗选择当前帧/所有传播帧/按帧范围选择、范围确认前重新开始当前帧布尔操作会取消旧顶栏范围请求、区域合并/去除按帧范围同步到对应传播帧且保留传播 metadata、布尔选择主区域/扣除区域视觉区分和选择顺序提示、内含去除 hole 渲染和 ring 分组保存、合并模式隐藏编辑手柄、工作区顶栏撤销/重做按钮、顶栏撤销/重做图标强调色、撤销/重做快捷键 Ctrl/Cmd+Z、Ctrl/Cmd+Shift+Z、Ctrl/Cmd+Y、物理键码 fallback 和输入框快捷键跳过、撤销/重做历史栈 |
+| R5 工具栏 | `src/components/ToolsPalette.test.tsx`, `src/components/CanvasArea.test.tsx`, `src/components/VideoWorkspace.test.tsx`, `src/lib/keyboardShortcuts.test.ts`, `src/store/useStore.test.ts` | 工具切换、工具栏紧凑垂直布局和高度不足时滚动、工具栏低对比滚动条、工具栏外扩滚动条槽位不挤占按钮列、调整多边形工具、AI 跳转、清空遮罩唯一左侧工具栏入口、清空遮罩上方 DEL 删除按钮、橡皮擦下方彩色 AI 自动传播入口、Canvas 右下角不再重复显示清空遮罩或应用分类按钮、GT Mask 导入位于清空遮罩分隔线之后且使用紫色底色、工具栏分隔线位于创建圆后、自动传播后和清空遮罩后、GT Mask 未知类别导入策略选择、工作区工具栏不展示 AI 正/反点和框选、左侧工具栏不重复撤销/重做、左侧工具栏不展示创建点/创建线段、矩形/圆/多边形手工 mask 绘制且未选分类时默认待分类、普通/导入 polygon mask 不显示黄色 seed point、画笔/橡皮擦尺寸控制、画笔新建当前类别 mask、画笔与选中 mask 连通时自动合并、画笔/橡皮擦模式下保留当前选中 mask 顶点提示且只读、画笔从图外落笔不创建 mask、靠边画笔生成几何裁剪到当前帧边界内、橡皮擦从选中 mask 扣除、未选中 mask 时画布按语义分类树内部优先级渲染、多边形 Enter/首节点闭合、上下文提示提示 Enter/Esc/首节点闭合且数秒后自动隐藏、polygon 顶点直接拖动/删除、顶点拖拽结束不改变 Canvas 视口、边中点插点、双击边界按位置插点、多 polygon/分离区域全部显示编辑顶点、中空 mask 内洞 ring 顶点和插点可编辑、整块 mask 删除、DEL 和 Delete/Backspace 删除共用传播链范围确认、同帧传播链分散 mask 点选联动高亮、传播链自动传播 mask 随 seed/传播结果删除、独立 AI 推理 mask 不被误删、区域合并/去除存在传播帧时弹窗选择当前帧/所有传播帧/按帧范围选择、范围确认前重新开始当前帧布尔操作会取消旧顶栏范围请求、区域合并/去除按帧范围同步到对应传播帧且保留传播 metadata、布尔选择主区域/扣除区域视觉区分和选择顺序提示、内含去除 hole 渲染和 ring 分组保存、合并模式隐藏编辑手柄、工作区顶栏撤销/重做按钮、顶栏撤销/重做图标强调色、撤销/重做快捷键 Ctrl/Cmd+Z、Ctrl/Cmd+Shift+Z、Ctrl/Cmd+Y、物理键码 fallback 和输入框快捷键跳过、撤销/重做历史栈 |
 | R6 AI 推理 | `src/lib/api.test.ts`, `src/components/CanvasArea.test.tsx`, `src/components/AISegmentation.test.tsx`, `src/components/VideoWorkspace.test.tsx`, `src/components/ModelStatusBadge.test.tsx`, `backend/tests/test_ai.py`, `backend/tests/test_sam2_engine.py` | SAM 2.1 变体选择、点/框/interactive 契约、semantic 禁用、SAM 3 入口隐藏和后端拒绝、SAM 2.1 最高分候选去重、SAM 2.1 框选后正负点细化同一候选 mask、AI 页框选发送 box prompt、AI 页框选后加点发送 interactive prompt、AI 页提示工具上下文提示、AI 页重复执行替换旧候选、SAM 2.1 反向点启用背景过滤且空结果移除旧候选、AI 页不渲染工作区已有 mask、AI 页可在候选 mask 上继续添加正/反点、AI 页可单点删除提示点并删除最近锚点、AI 页可删除选中候选且不删除工作区 mask、AI 页清空只移除本页候选、AI 页参数开关可读性文案且 options 字段不变、AI 页/右侧共享遮罩透明度只改预览 opacity、AI 页生成 mask 自动选中并可通过分类树换标签、AI 页无语义候选禁止推送到工作区并用 error toast 提示、离开 AI 页时清理未分类候选、AI 页推送到工作区编辑保留选择和当前帧、SAM 2.1 视频以当前参考帧全部 mask 和起止帧范围自动传播、同类多实例按来源 id 分开传播、当前参考帧无遮罩提示、传播前只保存参考帧 draft/dirty seed mask、传播前独立选择 SAM 2.1 tiny/small/base+/large 权重、自动传播创建 Celery 任务、传播入队权重 id 规范化/拒绝不支持 id、传播 seed 来源 id/签名和历史平滑 metadata 兼容、中空传播 seed 扣除 holes 后注入 SAM 2 且传播结果保留 holes、历史平滑 seed 保存前对 forward/backward polygon 实际应用边缘平滑并减少密集轮廓点、边缘平滑强度缓入递进曲线、未编辑传播结果作为 seed 时继承原始签名并跳过重复传播、已编辑传播结果保留 lineage 但重算签名并清理旧结果、中间帧人工新增替代 seed 时清理下游同物体旧传播结果、中间帧 backward 传播清理旧 forward 结果、换权重传播先清理旧结果、旧临时 seed id 传播结果兼容清理、传播中轮询任务进度、传播任务取消/重试、传播来源 metadata 回显、空提示/空结果反馈、GPU/SAM2.1 状态、AI 参数 options、局部裁剪推理、背景过滤、状态徽标、坐标归一化、正负点 labels、polygons 转 path、后端 fake registry |
 | R7 标注保存 | `src/components/VideoWorkspace.test.tsx`, `src/components/CanvasArea.test.tsx`, `src/lib/api.test.ts`, `backend/tests/test_ai.py` | 保存状态按钮“保存 X 个改动/已全部保存”、保存标注、保存后用后端 saved annotation 替换已提交 draft、加载回显、更新 dirty 标注、dirty 本地旧 annotationId 预检缺失时直接重新 POST 创建、预检后 PATCH 404 时重新 POST 创建并回显替换、中空 mask 保存为 `polygons` + `holes` 并可回显为 ring 分组、清空删除已保存标注、GT mask 多类别导入、高精度 GT contour、导入 mask 可直接拓扑统计和边缘平滑、后端 seed point 归一化兼容但前端不显示或拖动、缺失 seed point 的普通 polygon 保存时自动写入代表点、项目不存在、帧不存在 |
 | R8 模板库 | `src/components/TemplateRegistry.test.tsx`, `src/components/TransientNotice.test.tsx`, `src/lib/api.test.ts`, `backend/tests/test_templates.py` | 前端模板加载/新建/编辑/删除、删除模板站内确认、鼠标复制模板为私有副本、所有模板归一化包含黑色 `maskid:0`“待分类”保留类、保留类固定最后且不可删除/拖拽上移、详情页“语义分类树（拖拽调层级）”标题、详情页“编辑模板”按钮和编辑图标、详情页垃圾桶删除 label 且不显示来源标签、编辑弹窗分类编辑不显示旧 category 来源元信息、编辑后详情页刷新、详情页和编辑弹窗拖拽语义层级顺序、拖拽保存 `zIndex` 且不改变 maskid、JSON 分类导入预览、`[[colors],[names]]` 数组格式、`{colors,names}` 对象格式、带前缀/宽松 keys/中文标点粘贴格式、JSON 错误内联提示、保存错误非阻塞提示、mapping_rules 解包/打包、后端模板 CRUD |

src/components/CanvasArea.test.tsx

@@ -1624,6 +1624,76 @@ describe('CanvasArea', () => {
     expect(useStore.getState().masks[0].area).toBeGreaterThan(1000);
   });
 
+  it('keeps selected mask vertex markers visible while using brush and eraser', () => {
+    useStore.setState({
+      activeTemplateId: '2',
+      activeClass: { id: 'c1', name: '胆囊', color: '#ff0000', zIndex: 20, maskId: 1 },
+      activeClassId: 'c1',
+      selectedMaskIds: ['m1'],
+      masks: [
+        {
+          id: 'm1',
+          frameId: 'frame-1',
+          pathData: 'M 100 70 L 150 70 L 150 120 L 100 120 Z',
+          label: '胆囊',
+          color: '#ff0000',
+          classId: 'c1',
+          segmentation: [[100, 70, 150, 70, 150, 120, 100, 120]],
+          area: 2500,
+        },
+      ],
+    });
+
+    const selectedVertexHandles = () => screen.getAllByTestId('konva-circle')
+      .filter((element) => element.getAttribute('data-fill') === '#ffffff');
+
+    const { rerender } = render(<CanvasArea activeTool="brush" frame={frame} />);
+    expect(selectedVertexHandles()).toHaveLength(4);
+
+    rerender(<CanvasArea activeTool="eraser" frame={frame} />);
+    expect(selectedVertexHandles()).toHaveLength(4);
+  });
+
+  it('does not start brush strokes outside the image bounds', () => {
+    useStore.setState({
+      activeTemplateId: '2',
+      activeClass: { id: 'c1', name: '胆囊', color: '#ff0000', zIndex: 20, maskId: 1 },
+      activeClassId: 'c1',
+    });
+
+    render(<CanvasArea activeTool="brush" frame={frame} />);
+    const stage = screen.getByTestId('konva-stage');
+    fireEvent.mouseDown(stage, { clientX: 700, clientY: 400 });
+    fireEvent.mouseMove(stage, { clientX: 720, clientY: 420 });
+    fireEvent.mouseUp(stage, { clientX: 720, clientY: 420 });
+
+    expect(useStore.getState().masks).toHaveLength(0);
+  });
+
+  it('clips brush stroke geometry to the current image bounds', () => {
+    useStore.setState({
+      activeTemplateId: '2',
+      activeClass: { id: 'c1', name: '胆囊', color: '#ff0000', zIndex: 20, maskId: 1 },
+      activeClassId: 'c1',
+      brushSize: 40,
+    });
+
+    render(<CanvasArea activeTool="brush" frame={frame} />);
+    const stage = screen.getByTestId('konva-stage');
+    fireEvent.mouseDown(stage, { clientX: 630, clientY: 350 });
+    fireEvent.mouseMove(stage, { clientX: 700, clientY: 420 });
+    fireEvent.mouseUp(stage, { clientX: 700, clientY: 420 });
+
+    expect(useStore.getState().masks).toHaveLength(1);
+    const coordinates = useStore.getState().masks[0].segmentation?.flat() || [];
+    for (let index = 0; index < coordinates.length; index += 2) {
+      expect(coordinates[index]).toBeGreaterThanOrEqual(0);
+      expect(coordinates[index]).toBeLessThanOrEqual(frame.width);
+      expect(coordinates[index + 1]).toBeGreaterThanOrEqual(0);
+      expect(coordinates[index + 1]).toBeLessThanOrEqual(frame.height);
+    }
+  });
+
   it('merges a connected brush stroke into the selected mask', () => {
     useStore.setState({
       activeTemplateId: '2',

src/components/CanvasArea.tsx

@@ -502,6 +502,16 @@ function paintStrokeToGeometry(strokePoints: CanvasPoint[], radius: number): Mul
     : polygonClipping.union(firstGeometry, ...restGeometries);
 }
 
+function imageBoundsGeometry(width: number, height: number): MultiPolygon | null {
+  if (width <= 0 || height <= 0) return null;
+  return polygonsToMultiPolygon([[
+    { x: 0, y: 0 },
+    { x: width, y: 0 },
+    { x: width, y: height },
+    { x: 0, y: height },
+  ]]);
+}
+
 function geometriesOverlap(first: MultiPolygon, second: MultiPolygon): boolean {
   return polygonClipping.intersection(first, second).length > 0;
 }
@@ -592,6 +602,7 @@ export function CanvasArea({
   const isBooleanTool = BOOLEAN_TOOLS.has(effectiveTool);
   const isPaintTool = PAINT_TOOLS.has(effectiveTool);
   const isPolygonEditTool = effectiveTool === 'move' || effectiveTool === EDIT_POLYGON_TOOL;
+  const showSelectedMaskVertices = Boolean(selectedMask && (isPolygonEditTool || isPaintTool));
   const activePaintSize = effectiveTool === ERASER_TOOL ? eraserSize : brushSize;
   const activePaintRadius = Math.max(2, activePaintSize / 2);
   const setPaintStrokePoints = useCallback((nextPoints: CanvasPoint[]) => {
@@ -852,15 +863,19 @@ export function CanvasArea({
     });
   };
 
-  const stagePoint = (e: any): CanvasPoint | null => {
+  const stagePoint = (e: any, options: { clampToImage?: boolean } = {}): CanvasPoint | null => {
     const stage = e.target.getStage();
     const relPos = stage?.getRelativePointerPosition();
     if (!relPos) return null;
     const imageWidth = frame?.width || image?.naturalWidth || image?.width || stageSize.width;
     const imageHeight = frame?.height || image?.naturalHeight || image?.height || stageSize.height;
+    const shouldClamp = options.clampToImage ?? true;
+    if (!shouldClamp && (relPos.x < 0 || relPos.y < 0 || relPos.x > imageWidth || relPos.y > imageHeight)) {
+      return null;
+    }
     return {
-      x: clamp(relPos.x, 0, imageWidth),
+      x: shouldClamp ? clamp(relPos.x, 0, imageWidth) : relPos.x,
-      y: clamp(relPos.y, 0, imageHeight),
+      y: shouldClamp ? clamp(relPos.y, 0, imageHeight) : relPos.y,
     };
   };
 
@@ -955,13 +970,23 @@ export function CanvasArea({
     }
 
     if (paintToolRef.current && PAINT_TOOLS.has(effectiveTool)) {
-      const pos = stagePoint(e);
+      const pos = stagePoint(e, { clampToImage: false });
+      const currentStroke = paintStrokeRef.current;
+      if (!pos) {
+        lastPaintPointRef.current = null;
+        return;
+      }
       const previous = lastPaintPointRef.current;
-      if (!pos || !previous) return;
       const radius = Math.max(2, (paintToolRef.current === ERASER_TOOL ? eraserSize : brushSize) / 2);
       const minDistance = Math.max(3, radius * 0.55);
+      if (!previous) {
+        if (currentStroke.length >= MAX_PAINT_STROKE_POINTS) return;
+        const nextStroke = [...currentStroke, pos].slice(0, MAX_PAINT_STROKE_POINTS);
+        lastPaintPointRef.current = pos;
+        setPaintStrokePoints(nextStroke);
+        return;
+      }
       if (pointDistance(previous, pos) < minDistance) return;
-      const currentStroke = paintStrokeRef.current;
       if (currentStroke.length >= MAX_PAINT_STROKE_POINTS) return;
       const nextStroke = extendStrokePoints(currentStroke, pos, minDistance);
       lastPaintPointRef.current = nextStroke[nextStroke.length - 1] || pos;
@@ -1095,8 +1120,15 @@ export function CanvasArea({
   const applyPaintStroke = useCallback((tool: string | null, strokePoints: CanvasPoint[]) => {
     if (!frame?.id || strokePoints.length === 0) return;
     const radius = Math.max(2, (tool === ERASER_TOOL ? eraserSize : brushSize) / 2);
-    const strokeGeometry = paintStrokeToGeometry(strokePoints, radius);
+    const rawStrokeGeometry = paintStrokeToGeometry(strokePoints, radius);
-    if (!strokeGeometry) return;
+    if (!rawStrokeGeometry) return;
+    const imageWidth = frame.width || image?.naturalWidth || image?.width || stageSize.width;
+    const imageHeight = frame.height || image?.naturalHeight || image?.height || stageSize.height;
+    const imageBounds = imageBoundsGeometry(imageWidth, imageHeight);
+    const strokeGeometry = imageBounds
+      ? polygonClipping.intersection(rawStrokeGeometry, imageBounds)
+      : rawStrokeGeometry;
+    if (!strokeGeometry || strokeGeometry.length === 0) return;
 
     if (tool === BRUSH_TOOL) {
       if (!activeClass) {
@@ -1172,16 +1204,24 @@ export function CanvasArea({
     deleteMasksById,
     eraserSize,
     frame?.id,
+    frame?.height,
+    frame?.width,
+    image?.height,
+    image?.naturalHeight,
+    image?.naturalWidth,
+    image?.width,
     masks,
     selectedMask,
     setMasks,
+    stageSize.height,
+    stageSize.width,
   ]);
 
   const handleStageMouseDown = (e: any) => {
     if (PAINT_TOOLS.has(effectiveTool)) {
       const canStart = effectiveTool === BRUSH_TOOL ? Boolean(activeClass) : Boolean(selectedMask);
       if (!canStart) return;
-      const pos = stagePoint(e);
+      const pos = stagePoint(e, { clampToImage: false });
       if (pos) {
         paintToolRef.current = effectiveTool;
         lastPaintPointRef.current = pos;
@@ -1211,7 +1251,7 @@ export function CanvasArea({
 
   const handleStageMouseUp = (e: any) => {
     if (paintToolRef.current && PAINT_TOOLS.has(effectiveTool)) {
-      const finalPoint = stagePoint(e);
+      const finalPoint = stagePoint(e, { clampToImage: false });
       const currentStroke = paintStrokeRef.current;
       const spacing = Math.max(3, activePaintRadius * 0.55);
       const nextStroke = finalPoint
@@ -1813,7 +1853,7 @@ export function CanvasArea({
             ))}
 
             {/* Polygon vertex editor */}
-            {isPolygonEditTool && selectedMask && selectedMaskEditableRings.flatMap(({ polygonIndex, points: ringPoints }) => (
+            {showSelectedMaskVertices && selectedMask && selectedMaskEditableRings.flatMap(({ polygonIndex, points: ringPoints }) => (
               ringPoints.map((point, index) => {
                 const isActiveVertex = selectedPolygonIndex === polygonIndex && selectedVertexIndex === index;
                 return (
@@ -1825,22 +1865,24 @@ export function CanvasArea({
                     fill={isActiveVertex ? '#22d3ee' : '#ffffff'}
                     stroke={selectedMask.color}
                     strokeWidth={2 / scale}
-                    draggable
+                    draggable={isPolygonEditTool}
-                    onMouseDown={(event: any) => handleVertexDragStart(selectedMask, index, polygonIndex, event)}
+                    onMouseDown={isPolygonEditTool ? ((event: any) => handleVertexDragStart(selectedMask, index, polygonIndex, event)) : undefined}
-                    onTouchStart={(event: any) => handleVertexDragStart(selectedMask, index, polygonIndex, event)}
+                    onTouchStart={isPolygonEditTool ? ((event: any) => handleVertexDragStart(selectedMask, index, polygonIndex, event)) : undefined}
-                    onDragStart={(event: any) => handleVertexDragStart(selectedMask, index, polygonIndex, event)}
+                    onDragStart={isPolygonEditTool ? ((event: any) => handleVertexDragStart(selectedMask, index, polygonIndex, event)) : undefined}
                     onClick={(event: any) => {
                       event.cancelBubble = true;
+                      if (!isPolygonEditTool) return;
                       setSelectedPolygonIndex(polygonIndex);
                       setSelectedVertexIndex(index);
                     }}
                     onTap={(event: any) => {
                       event.cancelBubble = true;
+                      if (!isPolygonEditTool) return;
                       setSelectedPolygonIndex(polygonIndex);
                       setSelectedVertexIndex(index);
                     }}
-                    onDragMove={(event: any) => handleVertexDrag(selectedMask, index, event, polygonIndex)}
+                    onDragMove={isPolygonEditTool ? ((event: any) => handleVertexDrag(selectedMask, index, event, polygonIndex)) : undefined}
-                    onDragEnd={(event: any) => handleVertexDrag(selectedMask, index, event, polygonIndex)}
+                    onDragEnd={isPolygonEditTool ? ((event: any) => handleVertexDrag(selectedMask, index, event, polygonIndex)) : undefined}
                   />
                 );
               })