admin
4c21de02f8
功能增加: - 在工作区增加按范围传播和传播全部可达入口，支持选中区域或当前帧全部 mask 作为 seed，并按前后帧范围调用 SAM2 传播后刷新已保存标注。 - 在 AI 智能分割中接入框选提示，支持 box prompt 以及 box + 正/反向点的 interactive prompt 细化流程。 - 在 AI 智能分割中增加提示点删除、最近锚点删除、清空锚点、选中 AI 候选删除和 Delete/Backspace 快捷删除。 - 在项目库删除项目后同步清理当前项目、帧、mask 与选区状态，避免删除后工作区残留旧数据。 - 将时间进度条上的已编辑帧提示改为覆盖在进度条上的琥珀色竖线，并保留已编辑帧计数。 - 将 AI 参数文案调整为局部专注模式（自动裁剪无锚区域）和严格除杂模式（自动清理干涉点），仅改善可读性，不改变内部字段。 Bugfix: - 修复 AI 框选工具无实际 prompt 输出的问题。 - 修复多次执行 AI 高精度语义分割时旧候选 mask 叠加显示的问题，改为替换本页 AI 候选。 - 修复删除 AI 候选后选区仍引用已删除 mask 的状态残留。 - 修复进度条当前帧提示与已编辑帧提示颜色/语义混淆的问题，当前帧继续由播放进度和缩略图高亮表达。 测试与文档: - 补充 AI 分割框选、候选替换、提示点删除和快捷删除相关测试。 - 补充工作区传播范围、传播全部可达、编辑区域删除和项目删除状态清理测试。 - 更新 README、AGENTS 和 doc 下需求冻结、设计冻结、接口契约、前端审计、实施计划、测试计划，记录当前真实功能和测试覆盖。
1209 lines
46 KiB
TypeScript
1209 lines
46 KiB
TypeScript
import React, { useEffect, useRef, useState, useCallback } from 'react';
|
|
import { Stage, Layer, Image as KonvaImage, Circle, Rect, Path, Group } from 'react-konva';
|
|
import polygonClipping, { type MultiPolygon, type Pair } from 'polygon-clipping';
|
|
import useImage from 'use-image';
|
|
import { useStore } from '../store/useStore';
|
|
import { predictMask } from '../lib/api';
|
|
import type { Frame, Mask } from '../store/useStore';
|
|
|
|
interface CanvasAreaProps {
|
|
activeTool: string;
|
|
frame: Frame | null;
|
|
onClearMasks?: () => void;
|
|
onDeleteMaskAnnotations?: (annotationIds: string[]) => Promise<void> | void;
|
|
}
|
|
|
|
type CanvasPoint = { x: number; y: number };
|
|
type PromptPoint = CanvasPoint & { type: 'pos' | 'neg' };
|
|
type PromptBox = { x1: number; y1: number; x2: number; y2: number };
|
|
|
|
const DRAG_MANUAL_TOOLS = new Set(['create_rectangle', 'create_circle', 'create_line']);
|
|
const POLYGON_TOOL = 'create_polygon';
|
|
const EDIT_POLYGON_TOOL = 'edit_polygon';
|
|
const POINT_TOOL = 'create_point';
|
|
const BOOLEAN_TOOLS = new Set(['area_merge', 'area_remove']);
|
|
const POLYGON_CLOSE_RADIUS = 8;
|
|
|
|
function clamp(value: number, min: number, max: number): number {
|
|
return Math.min(Math.max(value, min), max);
|
|
}
|
|
|
|
function polygonPath(points: CanvasPoint[]): string {
|
|
if (points.length === 0) return '';
|
|
return points
|
|
.map((point, index) => `${index === 0 ? 'M' : 'L'} ${point.x} ${point.y}`)
|
|
.join(' ')
|
|
.concat(' Z');
|
|
}
|
|
|
|
function segmentationPath(segmentation?: number[][]): string {
|
|
return (segmentation || [])
|
|
.map((polygon) => polygonPath(flatPolygonToPoints(polygon)))
|
|
.filter(Boolean)
|
|
.join(' ');
|
|
}
|
|
|
|
function segmentationPolygonPath(segmentation: number[][] | undefined, polygonIndex: number): string {
|
|
const polygon = segmentation?.[polygonIndex];
|
|
return polygon ? polygonPath(flatPolygonToPoints(polygon)) : '';
|
|
}
|
|
|
|
function polygonSegmentation(points: CanvasPoint[]): number[][] {
|
|
return [points.flatMap((point) => [point.x, point.y])];
|
|
}
|
|
|
|
function segmentationToPoints(segmentation?: number[][], polygonIndex = 0): CanvasPoint[] {
|
|
const polygon = segmentation?.[polygonIndex] || [];
|
|
const points: CanvasPoint[] = [];
|
|
for (let index = 0; index < polygon.length - 1; index += 2) {
|
|
points.push({ x: polygon[index], y: polygon[index + 1] });
|
|
}
|
|
return points;
|
|
}
|
|
|
|
function flatPolygonToPoints(polygon: number[]): CanvasPoint[] {
|
|
const points: CanvasPoint[] = [];
|
|
for (let index = 0; index < polygon.length - 1; index += 2) {
|
|
points.push({ x: polygon[index], y: polygon[index + 1] });
|
|
}
|
|
return points;
|
|
}
|
|
|
|
function segmentationAllPoints(segmentation?: number[][]): CanvasPoint[] {
|
|
return (segmentation || []).flatMap((polygon) => flatPolygonToPoints(polygon));
|
|
}
|
|
|
|
function polygonBbox(points: CanvasPoint[]): [number, number, number, number] {
|
|
const xs = points.map((point) => point.x);
|
|
const ys = points.map((point) => point.y);
|
|
const minX = Math.min(...xs);
|
|
const minY = Math.min(...ys);
|
|
const maxX = Math.max(...xs);
|
|
const maxY = Math.max(...ys);
|
|
return [minX, minY, maxX - minX, maxY - minY];
|
|
}
|
|
|
|
function polygonArea(points: CanvasPoint[]): number {
|
|
if (points.length < 3) return 0;
|
|
const sum = points.reduce((acc, point, index) => {
|
|
const next = points[(index + 1) % points.length];
|
|
return acc + point.x * next.y - next.x * point.y;
|
|
}, 0);
|
|
return Math.abs(sum) / 2;
|
|
}
|
|
|
|
function pointDistance(a: CanvasPoint, b: CanvasPoint): number {
|
|
return Math.hypot(a.x - b.x, a.y - b.y);
|
|
}
|
|
|
|
function distanceToSegmentSquared(point: CanvasPoint, start: CanvasPoint, end: CanvasPoint): number {
|
|
const dx = end.x - start.x;
|
|
const dy = end.y - start.y;
|
|
const lengthSquared = dx * dx + dy * dy;
|
|
if (lengthSquared === 0) {
|
|
return (point.x - start.x) ** 2 + (point.y - start.y) ** 2;
|
|
}
|
|
const t = clamp(((point.x - start.x) * dx + (point.y - start.y) * dy) / lengthSquared, 0, 1);
|
|
const projected = { x: start.x + t * dx, y: start.y + t * dy };
|
|
return (point.x - projected.x) ** 2 + (point.y - projected.y) ** 2;
|
|
}
|
|
|
|
function nearestPolygonEdgeIndex(points: CanvasPoint[], point: CanvasPoint): number {
|
|
return points.reduce((bestIndex, start, index) => {
|
|
const end = points[(index + 1) % points.length];
|
|
if (!end) return bestIndex;
|
|
const bestStart = points[bestIndex];
|
|
const bestEnd = points[(bestIndex + 1) % points.length];
|
|
const currentDistance = distanceToSegmentSquared(point, start, end);
|
|
const bestDistance = bestStart && bestEnd
|
|
? distanceToSegmentSquared(point, bestStart, bestEnd)
|
|
: Number.POSITIVE_INFINITY;
|
|
return currentDistance < bestDistance ? index : bestIndex;
|
|
}, 0);
|
|
}
|
|
|
|
function segmentationArea(segmentation?: number[][]): number {
|
|
return (segmentation || []).reduce((sum, polygon) => sum + polygonArea(flatPolygonToPoints(polygon)), 0);
|
|
}
|
|
|
|
function segmentationBbox(segmentation?: number[][]): [number, number, number, number] | undefined {
|
|
const points = segmentationAllPoints(segmentation);
|
|
return points.length > 0 ? polygonBbox(points) : undefined;
|
|
}
|
|
|
|
function closeRing(points: CanvasPoint[]): Pair[] {
|
|
const ring = points.map((point) => [point.x, point.y] as Pair);
|
|
const first = ring[0];
|
|
const last = ring[ring.length - 1];
|
|
if (first && last && (first[0] !== last[0] || first[1] !== last[1])) {
|
|
ring.push([first[0], first[1]]);
|
|
}
|
|
return ring;
|
|
}
|
|
|
|
function maskToMultiPolygon(mask: Mask): MultiPolygon | null {
|
|
const polygons = (mask.segmentation || [])
|
|
.map((polygon) => flatPolygonToPoints(polygon))
|
|
.filter((points) => points.length >= 3)
|
|
.map((points) => [closeRing(points)]);
|
|
return polygons.length > 0 ? polygons : null;
|
|
}
|
|
|
|
function openRingPoints(ring: Pair[]): CanvasPoint[] {
|
|
const openRing = ring.length > 1
|
|
&& ring[0][0] === ring[ring.length - 1][0]
|
|
&& ring[0][1] === ring[ring.length - 1][1]
|
|
? ring.slice(0, -1)
|
|
: ring;
|
|
return openRing.map(([x, y]) => ({ x, y }));
|
|
}
|
|
|
|
function multiPolygonToSegmentation(geometry: MultiPolygon): number[][] {
|
|
return geometry
|
|
.flatMap((polygon) => polygon)
|
|
.map((ring) => openRingPoints(ring).flatMap(({ x, y }) => [x, y]))
|
|
.filter((polygon) => polygon.length >= 6);
|
|
}
|
|
|
|
function multiPolygonArea(geometry: MultiPolygon): number {
|
|
return geometry.reduce((sum, polygon) => {
|
|
const [outerRing, ...holeRings] = polygon;
|
|
const outerArea = outerRing ? polygonArea(openRingPoints(outerRing)) : 0;
|
|
const holesArea = holeRings.reduce((holeSum, ring) => holeSum + polygonArea(openRingPoints(ring)), 0);
|
|
return sum + Math.max(outerArea - holesArea, 0);
|
|
}, 0);
|
|
}
|
|
|
|
function multiPolygonHasHoles(geometry: MultiPolygon): boolean {
|
|
return geometry.some((polygon) => polygon.length > 1);
|
|
}
|
|
|
|
function rectanglePoints(start: CanvasPoint, end: CanvasPoint): CanvasPoint[] {
|
|
const x1 = Math.min(start.x, end.x);
|
|
const y1 = Math.min(start.y, end.y);
|
|
const x2 = Math.max(start.x, end.x);
|
|
const y2 = Math.max(start.y, end.y);
|
|
return [
|
|
{ x: x1, y: y1 },
|
|
{ x: x2, y: y1 },
|
|
{ x: x2, y: y2 },
|
|
{ x: x1, y: y2 },
|
|
];
|
|
}
|
|
|
|
function circlePoints(start: CanvasPoint, end: CanvasPoint): CanvasPoint[] {
|
|
const cx = (start.x + end.x) / 2;
|
|
const cy = (start.y + end.y) / 2;
|
|
const rx = Math.abs(end.x - start.x) / 2;
|
|
const ry = Math.abs(end.y - start.y) / 2;
|
|
return Array.from({ length: 32 }, (_, index) => {
|
|
const angle = (Math.PI * 2 * index) / 32;
|
|
return { x: cx + Math.cos(angle) * rx, y: cy + Math.sin(angle) * ry };
|
|
});
|
|
}
|
|
|
|
function pointRegion(point: CanvasPoint, radius = 5): CanvasPoint[] {
|
|
return Array.from({ length: 12 }, (_, index) => {
|
|
const angle = (Math.PI * 2 * index) / 12;
|
|
return { x: point.x + Math.cos(angle) * radius, y: point.y + Math.sin(angle) * radius };
|
|
});
|
|
}
|
|
|
|
function lineRegion(start: CanvasPoint, end: CanvasPoint, halfWidth = 4): CanvasPoint[] {
|
|
const dx = end.x - start.x;
|
|
const dy = end.y - start.y;
|
|
const length = Math.hypot(dx, dy) || 1;
|
|
const nx = (-dy / length) * halfWidth;
|
|
const ny = (dx / length) * halfWidth;
|
|
return [
|
|
{ x: start.x + nx, y: start.y + ny },
|
|
{ x: end.x + nx, y: end.y + ny },
|
|
{ x: end.x - nx, y: end.y - ny },
|
|
{ x: start.x - nx, y: start.y - ny },
|
|
];
|
|
}
|
|
|
|
export function CanvasArea({ activeTool, frame, onClearMasks, onDeleteMaskAnnotations }: CanvasAreaProps) {
|
|
const containerRef = useRef<HTMLDivElement>(null);
|
|
const [stageSize, setStageSize] = useState({ width: 800, height: 600 });
|
|
const [scale, setScale] = useState(1);
|
|
const [position, setPosition] = useState({ x: 0, y: 0 });
|
|
const [points, setPoints] = useState<PromptPoint[]>([]);
|
|
const [cursorPos, setCursorPos] = useState({ x: 0, y: 0 });
|
|
const [boxStart, setBoxStart] = useState<{ x: number, y: number } | null>(null);
|
|
const [boxCurrent, setBoxCurrent] = useState<{ x: number, y: number } | null>(null);
|
|
const [samPromptBox, setSamPromptBox] = useState<PromptBox | null>(null);
|
|
const [samCandidateMaskId, setSamCandidateMaskId] = useState<string | null>(null);
|
|
const [manualStart, setManualStart] = useState<CanvasPoint | null>(null);
|
|
const [manualCurrent, setManualCurrent] = useState<CanvasPoint | null>(null);
|
|
const [polygonPoints, setPolygonPoints] = useState<CanvasPoint[]>([]);
|
|
const [selectedMaskId, setSelectedMaskId] = useState<string | null>(() => useStore.getState().selectedMaskIds[0] || null);
|
|
const [selectedMaskIds, setSelectedMaskIds] = useState<string[]>(() => useStore.getState().selectedMaskIds);
|
|
const [selectedPolygonIndex, setSelectedPolygonIndex] = useState(0);
|
|
const [selectedVertexIndex, setSelectedVertexIndex] = useState<number | null>(null);
|
|
const previousFrameIdRef = useRef<string | undefined>(frame?.id);
|
|
const [isInferencing, setIsInferencing] = useState(false);
|
|
const [inferenceMessage, setInferenceMessage] = useState('');
|
|
|
|
const masks = useStore((state) => state.masks);
|
|
const addMask = useStore((state) => state.addMask);
|
|
const updateMask = useStore((state) => state.updateMask);
|
|
const clearMasks = useStore((state) => state.clearMasks);
|
|
const setMasks = useStore((state) => state.setMasks);
|
|
const setGlobalSelectedMaskIds = useStore((state) => state.setSelectedMaskIds);
|
|
const storeActiveTool = useStore((state) => state.activeTool);
|
|
const aiModel = useStore((state) => state.aiModel);
|
|
const activeTemplateId = useStore((state) => state.activeTemplateId);
|
|
const activeClass = useStore((state) => state.activeClass);
|
|
const undoMasks = useStore((state) => state.undoMasks);
|
|
const redoMasks = useStore((state) => state.redoMasks);
|
|
|
|
const effectiveTool = activeTool || storeActiveTool;
|
|
|
|
// Load the actual frame image
|
|
const [image] = useImage(frame?.url || '');
|
|
const frameMasks = masks.filter((mask) => mask.frameId === frame?.id);
|
|
const selectedMask = React.useMemo(
|
|
() => frameMasks.find((mask) => mask.id === selectedMaskId) || null,
|
|
[frameMasks, selectedMaskId],
|
|
);
|
|
const booleanSelectedMasks = React.useMemo(
|
|
() => selectedMaskIds
|
|
.map((id) => frameMasks.find((mask) => mask.id === id))
|
|
.filter((mask): mask is Mask => Boolean(mask)),
|
|
[frameMasks, selectedMaskIds],
|
|
);
|
|
const selectedMaskPoints = React.useMemo(
|
|
() => segmentationToPoints(selectedMask?.segmentation, selectedPolygonIndex),
|
|
[selectedMask?.segmentation, selectedPolygonIndex],
|
|
);
|
|
const savedMaskCount = frameMasks.filter((mask) => mask.saveStatus === 'saved' || mask.saved).length;
|
|
const draftMaskCount = frameMasks.filter((mask) => !mask.annotationId).length;
|
|
const dirtyMaskCount = frameMasks.filter((mask) => mask.saveStatus === 'dirty').length;
|
|
const isBooleanTool = BOOLEAN_TOOLS.has(effectiveTool);
|
|
const isPolygonEditTool = effectiveTool === 'move' || effectiveTool === EDIT_POLYGON_TOOL;
|
|
|
|
useEffect(() => {
|
|
const handleResize = () => {
|
|
if (containerRef.current) {
|
|
setStageSize({
|
|
width: containerRef.current.clientWidth,
|
|
height: containerRef.current.clientHeight,
|
|
});
|
|
}
|
|
};
|
|
|
|
handleResize();
|
|
window.addEventListener('resize', handleResize);
|
|
return () => window.removeEventListener('resize', handleResize);
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
setManualStart(null);
|
|
setManualCurrent(null);
|
|
setPolygonPoints([]);
|
|
setSelectedVertexIndex(null);
|
|
if (!isPolygonEditTool && !isBooleanTool) {
|
|
setSelectedMaskId(null);
|
|
setSelectedMaskIds([]);
|
|
setSelectedPolygonIndex(0);
|
|
}
|
|
}, [effectiveTool, isBooleanTool, isPolygonEditTool]);
|
|
|
|
useEffect(() => {
|
|
if (previousFrameIdRef.current === frame?.id) return;
|
|
previousFrameIdRef.current = frame?.id;
|
|
setSelectedMaskId(null);
|
|
setSelectedMaskIds([]);
|
|
setSelectedPolygonIndex(0);
|
|
setSelectedVertexIndex(null);
|
|
}, [frame?.id]);
|
|
|
|
useEffect(() => {
|
|
setPoints([]);
|
|
setSamPromptBox(null);
|
|
setSamCandidateMaskId(null);
|
|
}, [frame?.id]);
|
|
|
|
useEffect(() => {
|
|
const currentGlobalSelectedIds = useStore.getState().selectedMaskIds;
|
|
if (selectedMaskIds.length === 0) {
|
|
const validGlobalSelectedIds = currentGlobalSelectedIds.filter((id) => (
|
|
frameMasks.some((mask) => mask.id === id)
|
|
));
|
|
if (validGlobalSelectedIds.length > 0) return;
|
|
}
|
|
const isSameSelection = currentGlobalSelectedIds.length === selectedMaskIds.length
|
|
&& currentGlobalSelectedIds.every((id, index) => id === selectedMaskIds[index]);
|
|
if (!isSameSelection) {
|
|
setGlobalSelectedMaskIds(selectedMaskIds);
|
|
}
|
|
}, [frameMasks, selectedMaskIds, setGlobalSelectedMaskIds]);
|
|
|
|
useEffect(() => () => setGlobalSelectedMaskIds([]), [setGlobalSelectedMaskIds]);
|
|
|
|
useEffect(() => {
|
|
if (!selectedMaskId) {
|
|
const validGlobalSelectedIds = useStore.getState().selectedMaskIds.filter((id) => (
|
|
frameMasks.some((mask) => mask.id === id)
|
|
));
|
|
if (validGlobalSelectedIds.length > 0) {
|
|
setSelectedMaskId(validGlobalSelectedIds[0]);
|
|
setSelectedMaskIds(validGlobalSelectedIds);
|
|
setSelectedPolygonIndex(0);
|
|
setSelectedVertexIndex(null);
|
|
return;
|
|
}
|
|
}
|
|
if (selectedMaskId && !frameMasks.some((mask) => mask.id === selectedMaskId)) {
|
|
setSelectedMaskId(null);
|
|
setSelectedMaskIds([]);
|
|
setSelectedPolygonIndex(0);
|
|
setSelectedVertexIndex(null);
|
|
}
|
|
}, [frameMasks, selectedMaskId]);
|
|
|
|
const handleWheel = (e: any) => {
|
|
e.evt.preventDefault();
|
|
const scaleBy = 1.1;
|
|
const stage = e.target.getStage();
|
|
const oldScale = stage.scaleX();
|
|
|
|
const mousePointTo = {
|
|
x: stage.getPointerPosition().x / oldScale - stage.x() / oldScale,
|
|
y: stage.getPointerPosition().y / oldScale - stage.y() / oldScale,
|
|
};
|
|
|
|
const newScale = e.evt.deltaY < 0 ? oldScale * scaleBy : oldScale / scaleBy;
|
|
setScale(newScale);
|
|
setPosition({
|
|
x: -(mousePointTo.x - stage.getPointerPosition().x / newScale) * newScale,
|
|
y: -(mousePointTo.y - stage.getPointerPosition().y / newScale) * newScale,
|
|
});
|
|
};
|
|
|
|
const stagePoint = (e: any): 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;
|
|
return {
|
|
x: clamp(relPos.x, 0, imageWidth),
|
|
y: clamp(relPos.y, 0, imageHeight),
|
|
};
|
|
};
|
|
|
|
const createManualMask = useCallback((shape: string, polygon: CanvasPoint[]) => {
|
|
if (!frame?.id || polygon.length < 3) return;
|
|
const area = polygonArea(polygon);
|
|
if (area <= 1) return;
|
|
const color = activeClass?.color || '#06b6d4';
|
|
const label = activeClass?.name || `手工${shape}`;
|
|
const mask: Mask = {
|
|
id: `manual-${frame.id}-${shape}-${Date.now()}`,
|
|
frameId: frame.id,
|
|
templateId: activeTemplateId || undefined,
|
|
classId: activeClass?.id,
|
|
className: activeClass?.name,
|
|
classZIndex: activeClass?.zIndex,
|
|
saveStatus: 'draft',
|
|
saved: false,
|
|
pathData: polygonPath(polygon),
|
|
label,
|
|
color,
|
|
segmentation: polygonSegmentation(polygon),
|
|
points: shape === '点区域'
|
|
? [[
|
|
polygon.reduce((sum, point) => sum + point.x, 0) / polygon.length,
|
|
polygon.reduce((sum, point) => sum + point.y, 0) / polygon.length,
|
|
]]
|
|
: undefined,
|
|
bbox: polygonBbox(polygon),
|
|
area,
|
|
metadata: { source: 'manual', shape },
|
|
};
|
|
addMask(mask);
|
|
}, [activeClass, activeTemplateId, addMask, frame?.id]);
|
|
|
|
const finishPolygon = useCallback(() => {
|
|
if (polygonPoints.length < 3) return;
|
|
createManualMask('多边形', polygonPoints);
|
|
setPolygonPoints([]);
|
|
}, [createManualMask, polygonPoints]);
|
|
|
|
const handleMouseMove = (e: any) => {
|
|
const stage = e.target.getStage();
|
|
if (!stage) return;
|
|
const pos = stage.getPointerPosition();
|
|
if (pos) {
|
|
const imageX = (pos.x - position.x) / scale;
|
|
const imageY = (pos.y - position.y) / scale;
|
|
setCursorPos({ x: imageX, y: imageY });
|
|
}
|
|
|
|
if (boxStart && effectiveTool === 'box_select') {
|
|
const relPos = stage.getRelativePointerPosition();
|
|
if (relPos) {
|
|
setBoxCurrent({ x: relPos.x, y: relPos.y });
|
|
}
|
|
}
|
|
|
|
if (manualStart && DRAG_MANUAL_TOOLS.has(effectiveTool)) {
|
|
const pos = stage.getRelativePointerPosition();
|
|
if (pos) {
|
|
setManualCurrent({ x: pos.x, y: pos.y });
|
|
}
|
|
}
|
|
};
|
|
|
|
const runInference = useCallback(async (
|
|
promptPoints?: PromptPoint[],
|
|
promptBox?: PromptBox,
|
|
options: { resetCandidate?: boolean } = {},
|
|
) => {
|
|
if (!frame?.id) {
|
|
console.warn('Inference skipped: no active frame');
|
|
setInferenceMessage('请先选择一帧图像。');
|
|
return;
|
|
}
|
|
const imageWidth = frame.width || image?.naturalWidth || image?.width || 0;
|
|
const imageHeight = frame.height || image?.naturalHeight || image?.height || 0;
|
|
if (imageWidth <= 0 || imageHeight <= 0) {
|
|
console.warn('Inference skipped: active frame dimensions are unavailable');
|
|
setInferenceMessage('当前帧缺少宽高信息，无法推理。');
|
|
return;
|
|
}
|
|
|
|
setIsInferencing(true);
|
|
setInferenceMessage('');
|
|
try {
|
|
const hasNegativePrompt = Boolean(promptPoints?.some((point) => point.type === 'neg'));
|
|
const existingCandidate = !options.resetCandidate && samCandidateMaskId
|
|
? masks.find((mask) => mask.id === samCandidateMaskId)
|
|
: null;
|
|
const result = await predictMask({
|
|
imageId: frame.id,
|
|
imageWidth,
|
|
imageHeight,
|
|
model: aiModel,
|
|
points: promptPoints && promptPoints.length > 0
|
|
? promptPoints.map((p) => ({ x: p.x, y: p.y, type: p.type }))
|
|
: undefined,
|
|
box: promptBox,
|
|
...(hasNegativePrompt ? { options: { auto_filter_background: true, min_score: 0.05 } } : {}),
|
|
});
|
|
|
|
const [m] = result.masks;
|
|
if (m) {
|
|
const label = activeClass?.name || existingCandidate?.label || m.label;
|
|
const color = activeClass?.color || existingCandidate?.color || m.color;
|
|
const metadata = {
|
|
...(existingCandidate?.metadata || {}),
|
|
source: 'sam2_interactive',
|
|
promptBox: promptBox || null,
|
|
promptPointCount: promptPoints?.length || 0,
|
|
promptNegativePointCount: promptPoints?.filter((point) => point.type === 'neg').length || 0,
|
|
};
|
|
const nextMask = {
|
|
frameId: frame.id,
|
|
templateId: activeTemplateId || existingCandidate?.templateId || undefined,
|
|
classId: activeClass?.id || existingCandidate?.classId,
|
|
className: activeClass?.name || existingCandidate?.className,
|
|
classZIndex: activeClass?.zIndex ?? existingCandidate?.classZIndex,
|
|
saveStatus: existingCandidate?.annotationId ? 'dirty' as const : 'draft' as const,
|
|
saved: false,
|
|
pathData: m.pathData,
|
|
label,
|
|
color,
|
|
segmentation: m.segmentation,
|
|
points: promptPoints?.filter((p) => p.type === 'pos').map((p) => [p.x, p.y]),
|
|
bbox: m.bbox,
|
|
area: m.area,
|
|
metadata,
|
|
};
|
|
if (existingCandidate) {
|
|
updateMask(existingCandidate.id, nextMask);
|
|
setSelectedMaskId(existingCandidate.id);
|
|
setSelectedMaskIds([existingCandidate.id]);
|
|
} else {
|
|
const id = m.id;
|
|
setSamCandidateMaskId(id);
|
|
setSelectedMaskId(id);
|
|
setSelectedMaskIds([id]);
|
|
addMask({
|
|
id,
|
|
...nextMask,
|
|
});
|
|
}
|
|
} else {
|
|
if (existingCandidate && hasNegativePrompt) {
|
|
setMasks(masks.filter((mask) => mask.id !== existingCandidate.id));
|
|
setSamCandidateMaskId(null);
|
|
setSelectedMaskId(null);
|
|
setSelectedMaskIds([]);
|
|
setInferenceMessage('反向点已排除当前候选区域，请重新框选或添加新的正向点。');
|
|
} else {
|
|
setInferenceMessage('模型没有返回可用区域，请调整点/框提示后重试。');
|
|
}
|
|
}
|
|
} catch (err) {
|
|
console.error('Inference failed:', err);
|
|
const detail = (err as any)?.response?.data?.detail;
|
|
setInferenceMessage(detail || 'AI 推理失败，请查看模型状态或后端日志。');
|
|
} finally {
|
|
setIsInferencing(false);
|
|
}
|
|
}, [activeClass, activeTemplateId, addMask, aiModel, frame?.height, frame?.id, frame?.width, image?.height, image?.naturalHeight, image?.naturalWidth, image?.width, masks, samCandidateMaskId, setMasks, updateMask]);
|
|
|
|
const handleApplyActiveClass = () => {
|
|
if (!frame?.id || !activeClass) return;
|
|
setMasks(masks.map((mask) => {
|
|
if (mask.frameId !== frame.id) return mask;
|
|
return {
|
|
...mask,
|
|
templateId: activeTemplateId || mask.templateId,
|
|
classId: activeClass.id,
|
|
className: activeClass.name,
|
|
classZIndex: activeClass.zIndex,
|
|
label: activeClass.name,
|
|
color: activeClass.color,
|
|
saveStatus: mask.annotationId ? 'dirty' : 'draft',
|
|
saved: Boolean(mask.annotationId) ? false : mask.saved,
|
|
};
|
|
}));
|
|
};
|
|
|
|
const handleClearMasks = () => {
|
|
if (onClearMasks) {
|
|
onClearMasks();
|
|
return;
|
|
}
|
|
clearMasks();
|
|
};
|
|
|
|
const deleteMasksById = useCallback((maskIds: string[]) => {
|
|
if (maskIds.length === 0) return;
|
|
const idSet = new Set(maskIds);
|
|
const deletingMasks = masks.filter((mask) => idSet.has(mask.id));
|
|
if (deletingMasks.length === 0) return;
|
|
setMasks(masks.filter((mask) => !idSet.has(mask.id)));
|
|
const annotationIds = deletingMasks
|
|
.map((mask) => mask.annotationId)
|
|
.filter((annotationId): annotationId is string => Boolean(annotationId));
|
|
if (annotationIds.length > 0) {
|
|
void onDeleteMaskAnnotations?.(annotationIds);
|
|
}
|
|
if (samCandidateMaskId && idSet.has(samCandidateMaskId)) {
|
|
setSamCandidateMaskId(null);
|
|
setSamPromptBox(null);
|
|
setPoints([]);
|
|
}
|
|
setSelectedMaskId(null);
|
|
setSelectedMaskIds([]);
|
|
setSelectedPolygonIndex(0);
|
|
setSelectedVertexIndex(null);
|
|
}, [masks, onDeleteMaskAnnotations, samCandidateMaskId, setMasks]);
|
|
|
|
const handleStageMouseDown = (e: any) => {
|
|
if (DRAG_MANUAL_TOOLS.has(effectiveTool)) {
|
|
const pos = stagePoint(e);
|
|
if (pos) {
|
|
setManualStart(pos);
|
|
setManualCurrent(pos);
|
|
}
|
|
return;
|
|
}
|
|
|
|
if (effectiveTool === 'box_select') {
|
|
const stage = e.target.getStage();
|
|
const pos = stage.getRelativePointerPosition();
|
|
if (pos) {
|
|
setBoxStart({ x: pos.x, y: pos.y });
|
|
setBoxCurrent({ x: pos.x, y: pos.y });
|
|
}
|
|
}
|
|
};
|
|
|
|
const handleStageMouseUp = (e: any) => {
|
|
if (DRAG_MANUAL_TOOLS.has(effectiveTool) && manualStart) {
|
|
const end = stagePoint(e) || manualCurrent || manualStart;
|
|
const width = Math.abs(end.x - manualStart.x);
|
|
const height = Math.abs(end.y - manualStart.y);
|
|
const distance = Math.hypot(width, height);
|
|
|
|
if (effectiveTool === 'create_rectangle' && width > 4 && height > 4) {
|
|
createManualMask('矩形', rectanglePoints(manualStart, end));
|
|
}
|
|
if (effectiveTool === 'create_circle' && width > 4 && height > 4) {
|
|
createManualMask('圆形', circlePoints(manualStart, end));
|
|
}
|
|
if (effectiveTool === 'create_line' && distance > 4) {
|
|
createManualMask('线段', lineRegion(manualStart, end));
|
|
}
|
|
|
|
setManualStart(null);
|
|
setManualCurrent(null);
|
|
return;
|
|
}
|
|
|
|
if (effectiveTool === 'box_select' && boxStart && boxCurrent) {
|
|
const x1 = Math.min(boxStart.x, boxCurrent.x);
|
|
const y1 = Math.min(boxStart.y, boxCurrent.y);
|
|
const x2 = Math.max(boxStart.x, boxCurrent.x);
|
|
const y2 = Math.max(boxStart.y, boxCurrent.y);
|
|
|
|
if (Math.abs(x2 - x1) > 5 && Math.abs(y2 - y1) > 5) {
|
|
const nextBox = { x1, y1, x2, y2 };
|
|
setPoints([]);
|
|
setSamPromptBox(nextBox);
|
|
setSamCandidateMaskId(null);
|
|
runInference([], nextBox, { resetCandidate: true });
|
|
}
|
|
|
|
setBoxStart(null);
|
|
setBoxCurrent(null);
|
|
}
|
|
};
|
|
|
|
const handleStageClick = (e: any) => {
|
|
if (isPolygonEditTool) return;
|
|
if (effectiveTool === 'box_select') return; // handled by mouseup
|
|
if (DRAG_MANUAL_TOOLS.has(effectiveTool)) return;
|
|
|
|
if (effectiveTool === POINT_TOOL) {
|
|
const pos = stagePoint(e);
|
|
if (pos) {
|
|
createManualMask('点区域', pointRegion(pos));
|
|
}
|
|
return;
|
|
}
|
|
|
|
if (effectiveTool === POLYGON_TOOL) {
|
|
const pos = stagePoint(e);
|
|
if (pos) {
|
|
const closeRadius = POLYGON_CLOSE_RADIUS / Math.max(scale, 0.1);
|
|
if (polygonPoints.length >= 3 && pointDistance(pos, polygonPoints[0]) <= closeRadius) {
|
|
finishPolygon();
|
|
return;
|
|
}
|
|
setPolygonPoints((current) => [...current, pos]);
|
|
}
|
|
return;
|
|
}
|
|
|
|
if (effectiveTool === 'point_pos' || effectiveTool === 'point_neg') {
|
|
const stage = e.target.getStage();
|
|
const pos = stage.getRelativePointerPosition();
|
|
if (pos) {
|
|
const newPoints = [
|
|
...points,
|
|
{ x: pos.x, y: pos.y, type: (effectiveTool === 'point_pos' ? 'pos' : 'neg') as 'pos' | 'neg' },
|
|
];
|
|
setPoints(newPoints);
|
|
runInference(newPoints, samPromptBox || undefined);
|
|
}
|
|
}
|
|
};
|
|
|
|
const removePromptPoint = useCallback((pointIndex: number, event?: any) => {
|
|
if (event) event.cancelBubble = true;
|
|
const nextPoints = points.filter((_, index) => index !== pointIndex);
|
|
setPoints(nextPoints);
|
|
|
|
if (nextPoints.length > 0 || samPromptBox) {
|
|
runInference(nextPoints, samPromptBox || undefined);
|
|
return;
|
|
}
|
|
|
|
if (samCandidateMaskId) {
|
|
setMasks(masks.filter((mask) => mask.id !== samCandidateMaskId));
|
|
setSamCandidateMaskId(null);
|
|
setSelectedMaskId(null);
|
|
setSelectedMaskIds([]);
|
|
setInferenceMessage('已移除最后一个提示点和对应候选区域。');
|
|
}
|
|
}, [masks, points, runInference, samCandidateMaskId, samPromptBox, setMasks]);
|
|
|
|
const updatePolygonMask = useCallback((mask: Mask, nextPoints: CanvasPoint[], polygonIndex = 0) => {
|
|
if (nextPoints.length < 3) return;
|
|
const nextSegmentation = [...(mask.segmentation || [])];
|
|
nextSegmentation[polygonIndex] = nextPoints.flatMap((point) => [point.x, point.y]);
|
|
const bbox = segmentationBbox(nextSegmentation) || polygonBbox(nextPoints);
|
|
updateMask(mask.id, {
|
|
pathData: segmentationPath(nextSegmentation),
|
|
segmentation: nextSegmentation,
|
|
bbox,
|
|
area: segmentationArea(nextSegmentation),
|
|
saveStatus: mask.annotationId ? 'dirty' : 'draft',
|
|
saved: mask.annotationId ? false : mask.saved,
|
|
});
|
|
}, [updateMask]);
|
|
|
|
const updateMaskFromSegmentation = useCallback((
|
|
mask: Mask,
|
|
segmentation: number[][],
|
|
options: { area?: number; hasHoles?: boolean } = {},
|
|
): Mask => {
|
|
const bbox = segmentationBbox(segmentation);
|
|
const metadata = { ...(mask.metadata || {}) };
|
|
if (options.hasHoles === true) metadata.hasHoles = true;
|
|
if (options.hasHoles === false) delete metadata.hasHoles;
|
|
return {
|
|
...mask,
|
|
pathData: segmentationPath(segmentation),
|
|
segmentation,
|
|
bbox,
|
|
area: options.area ?? segmentationArea(segmentation),
|
|
metadata,
|
|
saveStatus: mask.annotationId ? 'dirty' : 'draft',
|
|
saved: mask.annotationId ? false : mask.saved,
|
|
};
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
const handleKeyDown = (event: KeyboardEvent) => {
|
|
const key = event.key.toLowerCase();
|
|
if ((event.metaKey || event.ctrlKey) && key === 'z') {
|
|
event.preventDefault();
|
|
if (event.shiftKey) redoMasks();
|
|
else undoMasks();
|
|
return;
|
|
}
|
|
if ((event.metaKey || event.ctrlKey) && key === 'y') {
|
|
event.preventDefault();
|
|
redoMasks();
|
|
return;
|
|
}
|
|
if ((event.key === 'Delete' || event.key === 'Backspace') && selectedMask && selectedVertexIndex !== null) {
|
|
const currentPoints = segmentationToPoints(selectedMask.segmentation, selectedPolygonIndex);
|
|
if (currentPoints.length > 3) {
|
|
event.preventDefault();
|
|
const nextPoints = currentPoints.filter((_, index) => index !== selectedVertexIndex);
|
|
updatePolygonMask(selectedMask, nextPoints, selectedPolygonIndex);
|
|
setSelectedVertexIndex(null);
|
|
}
|
|
return;
|
|
}
|
|
if ((event.key === 'Delete' || event.key === 'Backspace') && selectedMask) {
|
|
event.preventDefault();
|
|
const ids = selectedMaskIds.length > 0 ? selectedMaskIds : [selectedMask.id];
|
|
deleteMasksById(ids);
|
|
return;
|
|
}
|
|
if (effectiveTool !== POLYGON_TOOL) return;
|
|
if (event.key === 'Enter' && polygonPoints.length >= 3) {
|
|
event.preventDefault();
|
|
finishPolygon();
|
|
}
|
|
if (event.key === 'Escape') {
|
|
event.preventDefault();
|
|
setPolygonPoints([]);
|
|
}
|
|
};
|
|
|
|
window.addEventListener('keydown', handleKeyDown);
|
|
return () => window.removeEventListener('keydown', handleKeyDown);
|
|
}, [deleteMasksById, effectiveTool, finishPolygon, isPolygonEditTool, polygonPoints, redoMasks, selectedMask, selectedMaskIds, selectedPolygonIndex, selectedVertexIndex, undoMasks, updatePolygonMask]);
|
|
|
|
const boxRect = React.useMemo(() => {
|
|
if (!boxStart || !boxCurrent) return null;
|
|
const x = Math.min(boxStart.x, boxCurrent.x);
|
|
const y = Math.min(boxStart.y, boxCurrent.y);
|
|
const width = Math.abs(boxCurrent.x - boxStart.x);
|
|
const height = Math.abs(boxCurrent.y - boxStart.y);
|
|
return { x, y, width, height };
|
|
}, [boxStart, boxCurrent]);
|
|
|
|
const manualPreviewPath = React.useMemo(() => {
|
|
if (manualStart && manualCurrent) {
|
|
if (effectiveTool === 'create_rectangle') return polygonPath(rectanglePoints(manualStart, manualCurrent));
|
|
if (effectiveTool === 'create_circle') return polygonPath(circlePoints(manualStart, manualCurrent));
|
|
if (effectiveTool === 'create_line') return polygonPath(lineRegion(manualStart, manualCurrent));
|
|
}
|
|
if (effectiveTool === POLYGON_TOOL && polygonPoints.length > 0) {
|
|
const previewPoints = [...polygonPoints, cursorPos];
|
|
return polygonPath(previewPoints);
|
|
}
|
|
return null;
|
|
}, [cursorPos, effectiveTool, manualCurrent, manualStart, polygonPoints]);
|
|
|
|
const handleSeedPointDragEnd = (mask: Mask, pointIndex: number, event: any) => {
|
|
const x = event.target.x();
|
|
const y = event.target.y();
|
|
const nextPoints = [...(mask.points || [])];
|
|
nextPoints[pointIndex] = [x, y];
|
|
updateMask(mask.id, {
|
|
points: nextPoints,
|
|
saveStatus: mask.annotationId ? 'dirty' : 'draft',
|
|
saved: mask.annotationId ? false : mask.saved,
|
|
});
|
|
};
|
|
|
|
const handleMaskSelect = (mask: Mask, event: any, polygonIndex = 0) => {
|
|
if (!isPolygonEditTool && !isBooleanTool) return;
|
|
event.cancelBubble = true;
|
|
if (isBooleanTool) {
|
|
setSelectedMaskIds((current) => (
|
|
current.includes(mask.id)
|
|
? current.filter((id) => id !== mask.id)
|
|
: [...current, mask.id]
|
|
));
|
|
setSelectedMaskId(mask.id);
|
|
setSelectedPolygonIndex(polygonIndex);
|
|
setSelectedVertexIndex(null);
|
|
return;
|
|
}
|
|
setSelectedMaskId(mask.id);
|
|
setSelectedMaskIds([mask.id]);
|
|
setSelectedPolygonIndex(polygonIndex);
|
|
setSelectedVertexIndex(null);
|
|
};
|
|
|
|
const handleVertexDragEnd = (mask: Mask, vertexIndex: number, event: any) => {
|
|
const imageWidth = frame?.width || image?.naturalWidth || image?.width || stageSize.width;
|
|
const imageHeight = frame?.height || image?.naturalHeight || image?.height || stageSize.height;
|
|
const currentPoints = segmentationToPoints(mask.segmentation, selectedPolygonIndex);
|
|
if (!currentPoints[vertexIndex]) return;
|
|
const nextPoints = currentPoints.map((point, index) => (
|
|
index === vertexIndex
|
|
? {
|
|
x: clamp(event.target.x(), 0, imageWidth),
|
|
y: clamp(event.target.y(), 0, imageHeight),
|
|
}
|
|
: point
|
|
));
|
|
setSelectedMaskId(mask.id);
|
|
setSelectedVertexIndex(vertexIndex);
|
|
updatePolygonMask(mask, nextPoints, selectedPolygonIndex);
|
|
};
|
|
|
|
const handleEdgeInsert = (mask: Mask, edgeIndex: number, event: any) => {
|
|
event.cancelBubble = true;
|
|
const currentPoints = segmentationToPoints(mask.segmentation, selectedPolygonIndex);
|
|
const start = currentPoints[edgeIndex];
|
|
const end = currentPoints[(edgeIndex + 1) % currentPoints.length];
|
|
if (!start || !end) return;
|
|
const inserted = { x: (start.x + end.x) / 2, y: (start.y + end.y) / 2 };
|
|
const nextPoints = [
|
|
...currentPoints.slice(0, edgeIndex + 1),
|
|
inserted,
|
|
...currentPoints.slice(edgeIndex + 1),
|
|
];
|
|
setSelectedMaskId(mask.id);
|
|
setSelectedVertexIndex(edgeIndex + 1);
|
|
updatePolygonMask(mask, nextPoints, selectedPolygonIndex);
|
|
};
|
|
|
|
const handlePathDoubleClick = (mask: Mask, event: any, polygonIndex = 0) => {
|
|
if (effectiveTool !== EDIT_POLYGON_TOOL) return;
|
|
event.cancelBubble = true;
|
|
const point = stagePoint(event);
|
|
const currentPoints = segmentationToPoints(mask.segmentation, polygonIndex);
|
|
if (!point || currentPoints.length < 3) return;
|
|
const edgeIndex = nearestPolygonEdgeIndex(currentPoints, point);
|
|
const nextPoints = [
|
|
...currentPoints.slice(0, edgeIndex + 1),
|
|
point,
|
|
...currentPoints.slice(edgeIndex + 1),
|
|
];
|
|
setSelectedMaskId(mask.id);
|
|
setSelectedMaskIds([mask.id]);
|
|
setSelectedPolygonIndex(polygonIndex);
|
|
setSelectedVertexIndex(edgeIndex + 1);
|
|
updatePolygonMask(mask, nextPoints, polygonIndex);
|
|
};
|
|
|
|
const handleBooleanOperation = async () => {
|
|
if (!frame || booleanSelectedMasks.length < 2) return;
|
|
const primary = booleanSelectedMasks[0];
|
|
const primaryGeometry = maskToMultiPolygon(primary);
|
|
if (!primaryGeometry) return;
|
|
|
|
const clipGeometries = booleanSelectedMasks
|
|
.slice(1)
|
|
.map(maskToMultiPolygon)
|
|
.filter((geometry): geometry is MultiPolygon => Boolean(geometry));
|
|
if (clipGeometries.length === 0) return;
|
|
|
|
const resultGeometry = effectiveTool === 'area_merge'
|
|
? polygonClipping.union(primaryGeometry, ...clipGeometries)
|
|
: polygonClipping.difference(primaryGeometry, ...clipGeometries);
|
|
const resultSegmentation = multiPolygonToSegmentation(resultGeometry);
|
|
|
|
if (resultSegmentation.length === 0) {
|
|
const deleteIds = primary.annotationId ? [primary.annotationId] : [];
|
|
setMasks(masks.filter((mask) => mask.id !== primary.id));
|
|
if (deleteIds.length > 0) await onDeleteMaskAnnotations?.(deleteIds);
|
|
setSelectedMaskId(null);
|
|
setSelectedMaskIds([]);
|
|
setSelectedVertexIndex(null);
|
|
return;
|
|
}
|
|
|
|
const nextPrimary = updateMaskFromSegmentation(primary, resultSegmentation, {
|
|
area: multiPolygonArea(resultGeometry),
|
|
hasHoles: multiPolygonHasHoles(resultGeometry),
|
|
});
|
|
const secondaryIds = effectiveTool === 'area_merge'
|
|
? new Set(booleanSelectedMasks.slice(1).map((mask) => mask.id))
|
|
: new Set<string>();
|
|
const secondaryAnnotationIds = effectiveTool === 'area_merge'
|
|
? booleanSelectedMasks
|
|
.slice(1)
|
|
.map((mask) => mask.annotationId)
|
|
.filter((annotationId): annotationId is string => Boolean(annotationId))
|
|
: [];
|
|
|
|
setMasks(masks
|
|
.filter((mask) => !secondaryIds.has(mask.id))
|
|
.map((mask) => (mask.id === primary.id ? nextPrimary : mask)));
|
|
if (secondaryAnnotationIds.length > 0) await onDeleteMaskAnnotations?.(secondaryAnnotationIds);
|
|
setSelectedMaskId(primary.id);
|
|
setSelectedMaskIds([primary.id]);
|
|
setSelectedVertexIndex(null);
|
|
};
|
|
|
|
return (
|
|
<div ref={containerRef} className="w-full h-full relative cursor-crosshair overflow-hidden rounded-sm">
|
|
{isInferencing && (
|
|
<div className="absolute top-4 right-4 z-20 flex items-center gap-2 bg-[#111] border border-white/10 px-3 py-2 rounded-lg shadow-xl">
|
|
<div className="w-3 h-3 border-2 border-cyan-500 border-t-transparent rounded-full animate-spin" />
|
|
<span className="text-xs text-cyan-400 font-mono">AI 推理中...</span>
|
|
</div>
|
|
)}
|
|
{!isInferencing && inferenceMessage && (
|
|
<div className="absolute top-4 right-4 z-20 max-w-xs bg-[#111] border border-white/10 px-3 py-2 rounded-lg shadow-xl text-xs leading-relaxed text-gray-300">
|
|
{inferenceMessage}
|
|
</div>
|
|
)}
|
|
|
|
<Stage
|
|
width={stageSize.width}
|
|
height={stageSize.height}
|
|
onWheel={handleWheel}
|
|
onMouseMove={handleMouseMove}
|
|
onMouseDown={handleStageMouseDown}
|
|
onMouseUp={handleStageMouseUp}
|
|
scaleX={scale}
|
|
scaleY={scale}
|
|
x={position.x}
|
|
y={position.y}
|
|
draggable={effectiveTool === 'move'}
|
|
onClick={handleStageClick}
|
|
>
|
|
<Layer>
|
|
{/* Background Image Layer */}
|
|
{image && (
|
|
<KonvaImage
|
|
image={image}
|
|
x={0}
|
|
y={0}
|
|
opacity={0.8}
|
|
/>
|
|
)}
|
|
|
|
{/* AI Returned Masks */}
|
|
{frameMasks.map((mask) => {
|
|
const hasHoles = Boolean(mask.metadata?.hasHoles);
|
|
const paths = hasHoles
|
|
? [{ data: segmentationPath(mask.segmentation), polygonIndex: 0, fillRule: 'evenodd' }]
|
|
: (mask.segmentation && mask.segmentation.length > 0 ? mask.segmentation : [undefined]).map((_, polygonIndex) => ({
|
|
data: mask.segmentation ? segmentationPolygonPath(mask.segmentation, polygonIndex) : mask.pathData,
|
|
polygonIndex,
|
|
fillRule: undefined,
|
|
}));
|
|
return (
|
|
<Group key={mask.id} opacity={selectedMaskIds.includes(mask.id) ? 0.65 : 0.5}>
|
|
{paths.map(({ data, polygonIndex, fillRule }) => (
|
|
<Path
|
|
key={`${mask.id}-polygon-${polygonIndex}`}
|
|
data={data}
|
|
fill={mask.color}
|
|
fillRule={fillRule}
|
|
stroke={mask.color}
|
|
strokeWidth={(selectedMaskIds.includes(mask.id) ? 2 : 1) / scale}
|
|
onClick={(event: any) => handleMaskSelect(mask, event, polygonIndex)}
|
|
onTap={(event: any) => handleMaskSelect(mask, event, polygonIndex)}
|
|
onDblClick={(event: any) => handlePathDoubleClick(mask, event, polygonIndex)}
|
|
onDblTap={(event: any) => handlePathDoubleClick(mask, event, polygonIndex)}
|
|
/>
|
|
))}
|
|
</Group>
|
|
);
|
|
})}
|
|
|
|
{/* Box selection preview */}
|
|
{boxRect && effectiveTool === 'box_select' && (
|
|
<Rect
|
|
x={boxRect.x}
|
|
y={boxRect.y}
|
|
width={boxRect.width}
|
|
height={boxRect.height}
|
|
fill="rgba(6, 182, 212, 0.1)"
|
|
stroke="#06b6d4"
|
|
strokeWidth={2 / scale}
|
|
dash={[4 / scale, 4 / scale]}
|
|
/>
|
|
)}
|
|
|
|
{/* Manual shape preview */}
|
|
{manualPreviewPath && (
|
|
<Path
|
|
data={manualPreviewPath}
|
|
fill="rgba(34, 211, 238, 0.12)"
|
|
stroke="#22d3ee"
|
|
strokeWidth={2 / scale}
|
|
dash={[5 / scale, 5 / scale]}
|
|
/>
|
|
)}
|
|
|
|
{polygonPoints.map((point, index) => (
|
|
<Circle
|
|
key={`poly-point-${index}`}
|
|
x={point.x}
|
|
y={point.y}
|
|
radius={(index === 0 && polygonPoints.length >= 3 ? 6 : 4) / scale}
|
|
fill={index === 0 && polygonPoints.length >= 3 ? '#facc15' : '#22d3ee'}
|
|
stroke={index === 0 && polygonPoints.length >= 3 ? '#fef3c7' : '#ffffff'}
|
|
strokeWidth={1 / scale}
|
|
onClick={(event: any) => {
|
|
if (index !== 0 || polygonPoints.length < 3) return;
|
|
event.cancelBubble = true;
|
|
finishPolygon();
|
|
}}
|
|
onTap={(event: any) => {
|
|
if (index !== 0 || polygonPoints.length < 3) return;
|
|
event.cancelBubble = true;
|
|
finishPolygon();
|
|
}}
|
|
/>
|
|
))}
|
|
|
|
{/* Imported GT seed points / editable point regions */}
|
|
{frameMasks.flatMap((mask) => (mask.points || []).map(([x, y], index) => (
|
|
<Group key={`${mask.id}-seed-${index}`} x={x} y={y}>
|
|
<Circle
|
|
radius={5 / scale}
|
|
fill="#facc15"
|
|
stroke="#111827"
|
|
strokeWidth={2 / scale}
|
|
draggable
|
|
onDragEnd={(event: any) => handleSeedPointDragEnd(mask, index, event)}
|
|
/>
|
|
<Circle radius={1.5 / scale} fill="#111827" />
|
|
</Group>
|
|
)))}
|
|
|
|
{/* Polygon edge insertion handles */}
|
|
{isPolygonEditTool && selectedMask && selectedMaskPoints.map((point, index) => {
|
|
const next = selectedMaskPoints[(index + 1) % selectedMaskPoints.length];
|
|
if (!next) return null;
|
|
return (
|
|
<Circle
|
|
key={`${selectedMask.id}-edge-${selectedPolygonIndex}-${index}`}
|
|
x={(point.x + next.x) / 2}
|
|
y={(point.y + next.y) / 2}
|
|
radius={3.5 / scale}
|
|
fill="#22d3ee"
|
|
stroke="#111827"
|
|
strokeWidth={1.5 / scale}
|
|
onClick={(event: any) => handleEdgeInsert(selectedMask, index, event)}
|
|
onTap={(event: any) => handleEdgeInsert(selectedMask, index, event)}
|
|
/>
|
|
);
|
|
})}
|
|
|
|
{/* Polygon vertex editor */}
|
|
{isPolygonEditTool && selectedMask && selectedMaskPoints.map((point, index) => (
|
|
<Circle
|
|
key={`${selectedMask.id}-vertex-${selectedPolygonIndex}-${index}`}
|
|
x={point.x}
|
|
y={point.y}
|
|
radius={(selectedVertexIndex === index ? 6 : 4.5) / scale}
|
|
fill={selectedVertexIndex === index ? '#22d3ee' : '#ffffff'}
|
|
stroke={selectedMask.color}
|
|
strokeWidth={2 / scale}
|
|
draggable
|
|
onClick={(event: any) => {
|
|
event.cancelBubble = true;
|
|
setSelectedVertexIndex(index);
|
|
}}
|
|
onTap={(event: any) => {
|
|
event.cancelBubble = true;
|
|
setSelectedVertexIndex(index);
|
|
}}
|
|
onDragEnd={(event: any) => handleVertexDragEnd(selectedMask, index, event)}
|
|
/>
|
|
))}
|
|
|
|
{/* AI Prompts Point Regions */}
|
|
{points.map((p, i) => (
|
|
<Group key={i} x={p.x} y={p.y}>
|
|
<Circle
|
|
radius={6 / scale}
|
|
fill={p.type === 'pos' ? '#22c55e' : '#ef4444'}
|
|
stroke="#ffffff"
|
|
strokeWidth={2 / scale}
|
|
shadowColor="black"
|
|
shadowBlur={4}
|
|
onClick={(event: any) => removePromptPoint(i, event)}
|
|
onTap={(event: any) => removePromptPoint(i, event)}
|
|
/>
|
|
<Circle
|
|
radius={1.5 / scale}
|
|
fill="#ffffff"
|
|
onClick={(event: any) => removePromptPoint(i, event)}
|
|
onTap={(event: any) => removePromptPoint(i, event)}
|
|
/>
|
|
</Group>
|
|
))}
|
|
</Layer>
|
|
</Stage>
|
|
|
|
<div className="absolute bottom-4 left-4 flex gap-4 text-[10px] font-mono text-gray-500 pointer-events-none">
|
|
<span>光标: {cursorPos.x.toFixed(2)}, {cursorPos.y.toFixed(2)}</span>
|
|
<span>当前图层树: OBJECT_VEHICLE_01</span>
|
|
<span>缩放比: {(scale * 100).toFixed(0)}%</span>
|
|
<span>遮罩数: {frameMasks.length}</span>
|
|
<span>已保存: {savedMaskCount}</span>
|
|
<span>未保存: {draftMaskCount}</span>
|
|
<span>待更新: {dirtyMaskCount}</span>
|
|
</div>
|
|
|
|
{frameMasks.length > 0 && (
|
|
<div className="absolute bottom-4 right-4 flex gap-2">
|
|
{isBooleanTool && (
|
|
<div className="flex items-center gap-2">
|
|
<span className="text-xs bg-white/5 text-gray-300 border border-white/10 px-2.5 py-1.5 rounded">
|
|
已选 {booleanSelectedMasks.length}
|
|
</span>
|
|
<button
|
|
onClick={handleBooleanOperation}
|
|
disabled={booleanSelectedMasks.length < 2}
|
|
className="text-xs bg-emerald-500/10 hover:bg-emerald-500/20 text-emerald-300 border border-emerald-500/20 px-3 py-1.5 rounded transition-colors disabled:opacity-40 disabled:cursor-not-allowed disabled:hover:bg-emerald-500/10"
|
|
>
|
|
{effectiveTool === 'area_merge' ? '合并选中' : '从主区域去除'}
|
|
</button>
|
|
</div>
|
|
)}
|
|
{activeClass && (
|
|
<button
|
|
onClick={handleApplyActiveClass}
|
|
className="text-xs bg-cyan-500/10 hover:bg-cyan-500/20 text-cyan-300 border border-cyan-500/20 px-3 py-1.5 rounded transition-colors"
|
|
>
|
|
应用分类
|
|
</button>
|
|
)}
|
|
<button
|
|
onClick={handleClearMasks}
|
|
className="text-xs bg-red-500/10 hover:bg-red-500/20 text-red-400 border border-red-500/20 px-3 py-1.5 rounded transition-colors"
|
|
>
|
|
清空遮罩
|
|
</button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|