1357 lines
40 KiB
TypeScript
1357 lines
40 KiB
TypeScript
"use client";
|
||
|
||
import { Download, Loader2, Ruler, Trash2 } from "lucide-react";
|
||
import Image from "next/image";
|
||
import {
|
||
type PointerEvent as ReactPointerEvent,
|
||
useCallback,
|
||
useEffect,
|
||
useMemo,
|
||
useRef,
|
||
useState,
|
||
} from "react";
|
||
import { toast } from "sonner";
|
||
import { Button } from "@/components/ui/button";
|
||
import { Input } from "@/components/ui/input";
|
||
import { buildImageProxyUrl } from "@/lib/image-delivery";
|
||
import { cn } from "@/lib/utils";
|
||
|
||
type AgentPsdTemplateExportPreviewProps = {
|
||
imageUrl: string;
|
||
imageAlt?: string;
|
||
enableDimensionAnnotations?: boolean;
|
||
downloadName?: string;
|
||
sizeInfoText?: string | null;
|
||
};
|
||
|
||
type ImageSize = {
|
||
width: number;
|
||
height: number;
|
||
};
|
||
|
||
type PreviewRect = {
|
||
left: number;
|
||
top: number;
|
||
width: number;
|
||
height: number;
|
||
};
|
||
|
||
type DimensionAnnotation = {
|
||
id: string;
|
||
x1: number;
|
||
y1: number;
|
||
x2: number;
|
||
y2: number;
|
||
label: string;
|
||
};
|
||
|
||
type Point = {
|
||
x: number;
|
||
y: number;
|
||
};
|
||
|
||
type CoordinateSpace = {
|
||
containerLeft: number;
|
||
containerTop: number;
|
||
previewRect: PreviewRect;
|
||
imageSize: ImageSize;
|
||
};
|
||
|
||
type DragState =
|
||
| {
|
||
kind: "drawing";
|
||
pointerId: number;
|
||
annotationId: string;
|
||
coordinateSpace: CoordinateSpace;
|
||
}
|
||
| {
|
||
kind: "move-start" | "move-end";
|
||
pointerId: number;
|
||
annotationId: string;
|
||
coordinateSpace: CoordinateSpace;
|
||
}
|
||
| {
|
||
kind: "move-line";
|
||
pointerId: number;
|
||
annotationId: string;
|
||
coordinateSpace: CoordinateSpace;
|
||
startClientX: number;
|
||
startClientY: number;
|
||
startAnnotation: DimensionAnnotation;
|
||
};
|
||
|
||
const PREVIEW_MIN_HEIGHT = 340;
|
||
const DIMENSION_UNIT = "CM";
|
||
const LABEL_PLACEHOLDER = "例如：120";
|
||
const IMAGE_EXTENSION_REGEX = /\.(png|jpg|jpeg|webp)$/i;
|
||
const DIMENSION_SUFFIX_REGEX = /-尺寸标注(?=\.)/;
|
||
const DIMENSION_LINE_COLOR = "#666b73";
|
||
const DIMENSION_TEXT_COLOR = "#2a2f35";
|
||
const DIMENSION_TEXT_HALO_COLOR = "rgba(255,255,255,0.92)";
|
||
const PREVIEW_DIMENSION_FONT_SIZE = 10.4;
|
||
const PREVIEW_DIMENSION_LABEL_OFFSET = 13;
|
||
const PREVIEW_DIMENSION_STROKE_WIDTH = 1.1;
|
||
const PREVIEW_DIMENSION_STROKE_WIDTH_ACTIVE = 1.5;
|
||
const PREVIEW_DIMENSION_CAP_STROKE_WIDTH = 1.55;
|
||
const PREVIEW_DIMENSION_CAP_STROKE_WIDTH_ACTIVE = 1.9;
|
||
const PREVIEW_DIMENSION_TICK_LENGTH = 5.2;
|
||
const PREVIEW_DIMENSION_TICK_LENGTH_ACTIVE = 6.5;
|
||
const PREVIEW_DIMENSION_HANDLE_RADIUS = 3.2;
|
||
const PREVIEW_DIMENSION_HANDLE_STROKE_WIDTH = 1.2;
|
||
const PREVIEW_DIMENSION_TEXT_HALO_WIDTH = 2.2;
|
||
const SIZE_INFO_LINE_REGEX = /尺寸信息[:：]\s*([^\n]+)/i;
|
||
const NUMBER_REGEX = /\d+(?:\.\d+)?/g;
|
||
|
||
type AutoDimensionValues = {
|
||
widthCm?: number;
|
||
depthCm?: number;
|
||
heightCm?: number;
|
||
rawValues: number[];
|
||
};
|
||
|
||
function clamp(value: number, min: number, max: number) {
|
||
return Math.max(min, Math.min(max, value));
|
||
}
|
||
|
||
function createAnnotationId() {
|
||
if (
|
||
typeof crypto !== "undefined" &&
|
||
typeof crypto.randomUUID === "function"
|
||
) {
|
||
return crypto.randomUUID();
|
||
}
|
||
|
||
return `psd-dimension-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`;
|
||
}
|
||
|
||
function getContainPreviewRect(
|
||
container: ImageSize,
|
||
image: ImageSize
|
||
): PreviewRect {
|
||
const safeContainerWidth = Math.max(1, container.width);
|
||
const safeContainerHeight = Math.max(1, container.height);
|
||
const safeImageWidth = Math.max(1, image.width);
|
||
const safeImageHeight = Math.max(1, image.height);
|
||
const scale = Math.min(
|
||
safeContainerWidth / safeImageWidth,
|
||
safeContainerHeight / safeImageHeight
|
||
);
|
||
const width = safeImageWidth * scale;
|
||
const height = safeImageHeight * scale;
|
||
|
||
return {
|
||
left: (safeContainerWidth - width) / 2,
|
||
top: (safeContainerHeight - height) / 2,
|
||
width,
|
||
height,
|
||
};
|
||
}
|
||
|
||
function getDimensionLength(annotation: DimensionAnnotation) {
|
||
return Math.hypot(
|
||
annotation.x2 - annotation.x1,
|
||
annotation.y2 - annotation.y1
|
||
);
|
||
}
|
||
|
||
function formatDimensionValue(value: number) {
|
||
return Number.isInteger(value)
|
||
? `${value}${DIMENSION_UNIT}`
|
||
: `${value.toFixed(1)}${DIMENSION_UNIT}`;
|
||
}
|
||
|
||
function normalizeDimensionInput(value: string) {
|
||
return String(value || "")
|
||
.trim()
|
||
.replace(/厘米|公分/gi, "")
|
||
.replace(/cm/gi, "")
|
||
.replace(/\s+/g, "")
|
||
.replace(/[^0-9.]/g, "");
|
||
}
|
||
|
||
function extractAutoDimensionValues(
|
||
sizeInfoText: string | null | undefined
|
||
): AutoDimensionValues | null {
|
||
const normalizedText = String(sizeInfoText || "").trim();
|
||
if (!normalizedText) {
|
||
return null;
|
||
}
|
||
|
||
const matchedLine =
|
||
normalizedText.match(SIZE_INFO_LINE_REGEX)?.[1] || normalizedText;
|
||
const values = Array.from(matchedLine.matchAll(NUMBER_REGEX))
|
||
.map((item) => Number(item[0]))
|
||
.filter((item) => Number.isFinite(item) && item > 0)
|
||
.slice(0, 3);
|
||
|
||
if (values.length === 0) {
|
||
return null;
|
||
}
|
||
|
||
if (values.length === 1) {
|
||
return {
|
||
heightCm: values[0],
|
||
rawValues: values,
|
||
widthCm: values[0],
|
||
};
|
||
}
|
||
|
||
if (values.length === 2) {
|
||
const [larger, smaller] = [...values].sort((left, right) => right - left);
|
||
return {
|
||
heightCm: larger,
|
||
rawValues: values,
|
||
widthCm: smaller,
|
||
};
|
||
}
|
||
|
||
const sortedValues = [...values].sort((left, right) => right - left);
|
||
const [heightCm, widthCm, depthCm] = sortedValues;
|
||
|
||
return {
|
||
depthCm,
|
||
heightCm,
|
||
rawValues: values,
|
||
widthCm,
|
||
};
|
||
}
|
||
|
||
function getAnnotationOrientation(annotation: DimensionAnnotation) {
|
||
const deltaX = Math.abs(annotation.x2 - annotation.x1);
|
||
const deltaY = Math.abs(annotation.y2 - annotation.y1);
|
||
|
||
if (deltaY > deltaX * 1.25) {
|
||
return "vertical";
|
||
}
|
||
|
||
if (deltaX > deltaY * 1.25) {
|
||
return "horizontal";
|
||
}
|
||
|
||
return "diagonal";
|
||
}
|
||
|
||
function getAutoDimensionLabel(params: {
|
||
annotation: DimensionAnnotation;
|
||
annotations: DimensionAnnotation[];
|
||
autoDimensionValues?: AutoDimensionValues | null;
|
||
}) {
|
||
const { annotation, annotations, autoDimensionValues } = params;
|
||
if (!autoDimensionValues) {
|
||
return "";
|
||
}
|
||
|
||
if (autoDimensionValues.rawValues.length === 1) {
|
||
return formatDimensionValue(autoDimensionValues.rawValues[0]);
|
||
}
|
||
|
||
const orientation = getAnnotationOrientation(annotation);
|
||
if (orientation === "vertical" && autoDimensionValues.heightCm) {
|
||
return formatDimensionValue(autoDimensionValues.heightCm);
|
||
}
|
||
|
||
if (orientation === "diagonal" && autoDimensionValues.depthCm) {
|
||
return formatDimensionValue(autoDimensionValues.depthCm);
|
||
}
|
||
|
||
if (orientation === "horizontal") {
|
||
const horizontalAnnotations = annotations
|
||
.filter((item) => getAnnotationOrientation(item) === "horizontal")
|
||
.sort(
|
||
(left, right) => getDimensionLength(right) - getDimensionLength(left)
|
||
);
|
||
const currentIndex = horizontalAnnotations.findIndex(
|
||
(item) => item.id === annotation.id
|
||
);
|
||
|
||
if (currentIndex <= 0 && autoDimensionValues.widthCm) {
|
||
return formatDimensionValue(autoDimensionValues.widthCm);
|
||
}
|
||
|
||
if (autoDimensionValues.depthCm) {
|
||
return formatDimensionValue(autoDimensionValues.depthCm);
|
||
}
|
||
|
||
if (autoDimensionValues.widthCm) {
|
||
return formatDimensionValue(autoDimensionValues.widthCm);
|
||
}
|
||
}
|
||
|
||
if (autoDimensionValues.widthCm) {
|
||
return formatDimensionValue(autoDimensionValues.widthCm);
|
||
}
|
||
|
||
if (autoDimensionValues.heightCm) {
|
||
return formatDimensionValue(autoDimensionValues.heightCm);
|
||
}
|
||
|
||
return "";
|
||
}
|
||
|
||
function getDimensionLabel(params: {
|
||
annotation: DimensionAnnotation;
|
||
annotations: DimensionAnnotation[];
|
||
autoDimensionValues?: AutoDimensionValues | null;
|
||
}) {
|
||
const { annotation, annotations, autoDimensionValues } = params;
|
||
const customLabel = normalizeDimensionInput(annotation.label);
|
||
if (customLabel) {
|
||
return `${customLabel}${DIMENSION_UNIT}`;
|
||
}
|
||
|
||
return getAutoDimensionLabel({
|
||
annotation,
|
||
annotations,
|
||
autoDimensionValues,
|
||
});
|
||
}
|
||
|
||
function mapImagePointToPreviewPoint(
|
||
point: Point,
|
||
previewRect: PreviewRect,
|
||
imageSize: ImageSize
|
||
) {
|
||
return {
|
||
x:
|
||
previewRect.left +
|
||
(point.x / Math.max(1, imageSize.width)) * previewRect.width,
|
||
y:
|
||
previewRect.top +
|
||
(point.y / Math.max(1, imageSize.height)) * previewRect.height,
|
||
};
|
||
}
|
||
|
||
function mapClientPointToImagePoint(
|
||
clientX: number,
|
||
clientY: number,
|
||
coordinateSpace: CoordinateSpace,
|
||
options?: { requireInside?: boolean }
|
||
) {
|
||
const localX = clientX - coordinateSpace.containerLeft;
|
||
const localY = clientY - coordinateSpace.containerTop;
|
||
const { left, top, width, height } = coordinateSpace.previewRect;
|
||
const isInside =
|
||
localX >= left &&
|
||
localX <= left + width &&
|
||
localY >= top &&
|
||
localY <= top + height;
|
||
|
||
if (options?.requireInside && !isInside) {
|
||
return null;
|
||
}
|
||
|
||
return {
|
||
x: clamp(
|
||
((localX - left) / Math.max(1, width)) * coordinateSpace.imageSize.width,
|
||
0,
|
||
coordinateSpace.imageSize.width
|
||
),
|
||
y: clamp(
|
||
((localY - top) / Math.max(1, height)) * coordinateSpace.imageSize.height,
|
||
0,
|
||
coordinateSpace.imageSize.height
|
||
),
|
||
};
|
||
}
|
||
|
||
function getAnnotationVector(x1: number, y1: number, x2: number, y2: number) {
|
||
const dx = x2 - x1;
|
||
const dy = y2 - y1;
|
||
const length = Math.max(1, Math.hypot(dx, dy));
|
||
|
||
return {
|
||
dx,
|
||
dy,
|
||
length,
|
||
ux: dx / length,
|
||
uy: dy / length,
|
||
nx: -dy / length,
|
||
ny: dx / length,
|
||
};
|
||
}
|
||
|
||
function getPreviewAnnotationGeometry(params: {
|
||
annotation: DimensionAnnotation;
|
||
annotations: DimensionAnnotation[];
|
||
previewRect: PreviewRect;
|
||
imageSize: ImageSize;
|
||
autoDimensionValues?: AutoDimensionValues | null;
|
||
}) {
|
||
const {
|
||
annotation,
|
||
annotations,
|
||
previewRect,
|
||
imageSize,
|
||
autoDimensionValues,
|
||
} = params;
|
||
const start = mapImagePointToPreviewPoint(
|
||
{ x: annotation.x1, y: annotation.y1 },
|
||
previewRect,
|
||
imageSize
|
||
);
|
||
const end = mapImagePointToPreviewPoint(
|
||
{ x: annotation.x2, y: annotation.y2 },
|
||
previewRect,
|
||
imageSize
|
||
);
|
||
const vector = getAnnotationVector(start.x, start.y, end.x, end.y);
|
||
const label = getDimensionLabel({
|
||
annotation,
|
||
annotations,
|
||
autoDimensionValues,
|
||
});
|
||
const labelOffset = PREVIEW_DIMENSION_LABEL_OFFSET;
|
||
const rawAngleRadians = Math.atan2(vector.dy, vector.dx);
|
||
const angleRadians =
|
||
rawAngleRadians > Math.PI / 2
|
||
? rawAngleRadians - Math.PI
|
||
: rawAngleRadians < -Math.PI / 2
|
||
? rawAngleRadians + Math.PI
|
||
: rawAngleRadians;
|
||
|
||
return {
|
||
start,
|
||
end,
|
||
vector,
|
||
label,
|
||
angleDegrees: (angleRadians * 180) / Math.PI,
|
||
labelCenterX: (start.x + end.x) / 2 + vector.nx * labelOffset,
|
||
labelCenterY: (start.y + end.y) / 2 + vector.ny * labelOffset,
|
||
};
|
||
}
|
||
|
||
function buildDownloadName(downloadName: string | undefined, imageUrl: string) {
|
||
const explicitName = String(downloadName || "").trim();
|
||
if (explicitName) {
|
||
return explicitName;
|
||
}
|
||
|
||
try {
|
||
const pathname = new URL(imageUrl).pathname;
|
||
const rawName = pathname.split("/").pop() || "";
|
||
const decoded = decodeURIComponent(rawName).trim();
|
||
if (!decoded) {
|
||
return `psd-template-${Date.now()}.png`;
|
||
}
|
||
|
||
if (IMAGE_EXTENSION_REGEX.test(decoded)) {
|
||
return decoded.replace(IMAGE_EXTENSION_REGEX, "-尺寸标注.png");
|
||
}
|
||
|
||
return `${decoded}-尺寸标注.png`;
|
||
} catch {
|
||
return `psd-template-${Date.now()}.png`;
|
||
}
|
||
}
|
||
|
||
async function loadImageFromCandidates(candidates: string[]) {
|
||
const uniqueCandidates = Array.from(
|
||
new Set(candidates.map((item) => String(item || "").trim()).filter(Boolean))
|
||
);
|
||
|
||
for (const candidate of uniqueCandidates) {
|
||
try {
|
||
const response = await fetch(candidate);
|
||
if (!response.ok) {
|
||
continue;
|
||
}
|
||
|
||
const blob = await response.blob();
|
||
const objectUrl = URL.createObjectURL(blob);
|
||
const image = await new Promise<HTMLImageElement>((resolve, reject) => {
|
||
const nextImage = new window.Image();
|
||
nextImage.onload = () => resolve(nextImage);
|
||
nextImage.onerror = () => reject(new Error("图片加载失败"));
|
||
nextImage.src = objectUrl;
|
||
});
|
||
|
||
return {
|
||
image,
|
||
dispose: () => URL.revokeObjectURL(objectUrl),
|
||
};
|
||
} catch {
|
||
// continue to next candidate
|
||
}
|
||
}
|
||
|
||
throw new Error("结果图加载失败");
|
||
}
|
||
|
||
function downloadBlob(blob: Blob, fileName: string) {
|
||
const objectUrl = URL.createObjectURL(blob);
|
||
const link = document.createElement("a");
|
||
link.href = objectUrl;
|
||
link.download = fileName;
|
||
document.body.appendChild(link);
|
||
link.click();
|
||
document.body.removeChild(link);
|
||
URL.revokeObjectURL(objectUrl);
|
||
}
|
||
|
||
function drawDimensionCap(params: {
|
||
context: CanvasRenderingContext2D;
|
||
point: Point;
|
||
vector: ReturnType<typeof getAnnotationVector>;
|
||
size: number;
|
||
}) {
|
||
const { context, point, vector, size } = params;
|
||
context.beginPath();
|
||
context.moveTo(point.x + vector.nx * size, point.y + vector.ny * size);
|
||
context.lineTo(point.x - vector.nx * size, point.y - vector.ny * size);
|
||
context.stroke();
|
||
}
|
||
|
||
function drawAnnotationToCanvas(params: {
|
||
context: CanvasRenderingContext2D;
|
||
annotation: DimensionAnnotation;
|
||
imageSize: ImageSize;
|
||
annotations: DimensionAnnotation[];
|
||
autoDimensionValues?: AutoDimensionValues | null;
|
||
}) {
|
||
const { context, annotation, imageSize, annotations, autoDimensionValues } =
|
||
params;
|
||
const label = getDimensionLabel({
|
||
annotation,
|
||
annotations,
|
||
autoDimensionValues,
|
||
});
|
||
const vector = getAnnotationVector(
|
||
annotation.x1,
|
||
annotation.y1,
|
||
annotation.x2,
|
||
annotation.y2
|
||
);
|
||
const rawAngleRadians = Math.atan2(vector.dy, vector.dx);
|
||
const angleRadians =
|
||
rawAngleRadians > Math.PI / 2
|
||
? rawAngleRadians - Math.PI
|
||
: rawAngleRadians < -Math.PI / 2
|
||
? rawAngleRadians + Math.PI
|
||
: rawAngleRadians;
|
||
const strokeWidth = clamp(
|
||
Math.min(imageSize.width, imageSize.height) * 0.001_35,
|
||
1,
|
||
2.4
|
||
);
|
||
const capLength = strokeWidth * 5.3;
|
||
const fontSize = clamp(
|
||
Math.round(Math.min(imageSize.width, imageSize.height) * 0.0176),
|
||
11,
|
||
27
|
||
);
|
||
const labelOffset = fontSize * 0.95;
|
||
const centerX = (annotation.x1 + annotation.x2) / 2 + vector.nx * labelOffset;
|
||
const centerY = (annotation.y1 + annotation.y2) / 2 + vector.ny * labelOffset;
|
||
|
||
context.save();
|
||
context.strokeStyle = DIMENSION_LINE_COLOR;
|
||
context.lineWidth = strokeWidth;
|
||
context.lineCap = "round";
|
||
context.lineJoin = "round";
|
||
|
||
context.beginPath();
|
||
context.moveTo(annotation.x1, annotation.y1);
|
||
context.lineTo(annotation.x2, annotation.y2);
|
||
context.stroke();
|
||
|
||
drawDimensionCap({
|
||
context,
|
||
point: { x: annotation.x1, y: annotation.y1 },
|
||
size: capLength,
|
||
vector,
|
||
});
|
||
drawDimensionCap({
|
||
context,
|
||
point: { x: annotation.x2, y: annotation.y2 },
|
||
size: capLength,
|
||
vector,
|
||
});
|
||
|
||
context.translate(centerX, centerY);
|
||
context.rotate(angleRadians);
|
||
context.font = `500 ${fontSize}px "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif`;
|
||
context.textAlign = "center";
|
||
context.textBaseline = "middle";
|
||
context.lineWidth = Math.max(1.5, fontSize * 0.18);
|
||
context.strokeStyle = DIMENSION_TEXT_HALO_COLOR;
|
||
context.strokeText(label, 0, 0);
|
||
context.fillStyle = DIMENSION_TEXT_COLOR;
|
||
context.fillText(label, 0, 0);
|
||
context.restore();
|
||
}
|
||
|
||
export function AgentPsdTemplateExportPreview({
|
||
imageUrl,
|
||
imageAlt = "PSD 模板导出结果",
|
||
enableDimensionAnnotations = false,
|
||
downloadName,
|
||
sizeInfoText,
|
||
}: AgentPsdTemplateExportPreviewProps) {
|
||
const previewViewportRef = useRef<HTMLDivElement | null>(null);
|
||
const dragStateRef = useRef<DragState | null>(null);
|
||
const cleanupRef = useRef<(() => void) | null>(null);
|
||
const [viewportSize, setViewportSize] = useState<ImageSize>({
|
||
width: 0,
|
||
height: 0,
|
||
});
|
||
const [imageSize, setImageSize] = useState<ImageSize | null>(null);
|
||
const [annotations, setAnnotations] = useState<DimensionAnnotation[]>([]);
|
||
const [selectedAnnotationId, setSelectedAnnotationId] = useState<string>("");
|
||
const [isDrawMode, setIsDrawMode] = useState(false);
|
||
const [isDownloading, setIsDownloading] = useState(false);
|
||
const previewImageUrl = useMemo(
|
||
() => buildImageProxyUrl(imageUrl),
|
||
[imageUrl]
|
||
);
|
||
const autoDimensionValues = useMemo(
|
||
() => extractAutoDimensionValues(sizeInfoText),
|
||
[sizeInfoText]
|
||
);
|
||
const selectedAnnotation = useMemo(
|
||
() =>
|
||
annotations.find(
|
||
(annotation) => annotation.id === selectedAnnotationId
|
||
) || null,
|
||
[annotations, selectedAnnotationId]
|
||
);
|
||
const previewRect = useMemo(() => {
|
||
if (!imageSize || viewportSize.width <= 0 || viewportSize.height <= 0) {
|
||
return null;
|
||
}
|
||
|
||
return getContainPreviewRect(viewportSize, imageSize);
|
||
}, [imageSize, viewportSize]);
|
||
|
||
const clearPointerSession = useCallback(() => {
|
||
cleanupRef.current?.();
|
||
cleanupRef.current = null;
|
||
dragStateRef.current = null;
|
||
}, []);
|
||
|
||
useEffect(() => {
|
||
const element = previewViewportRef.current;
|
||
if (!element) {
|
||
return;
|
||
}
|
||
|
||
const updateViewportSize = () => {
|
||
setViewportSize({
|
||
width: element.clientWidth,
|
||
height: element.clientHeight,
|
||
});
|
||
};
|
||
|
||
updateViewportSize();
|
||
if (typeof ResizeObserver !== "undefined") {
|
||
const observer = new ResizeObserver(updateViewportSize);
|
||
observer.observe(element);
|
||
return () => observer.disconnect();
|
||
}
|
||
|
||
window.addEventListener("resize", updateViewportSize);
|
||
return () => window.removeEventListener("resize", updateViewportSize);
|
||
}, []);
|
||
|
||
useEffect(() => clearPointerSession, [clearPointerSession]);
|
||
|
||
const getCoordinateSpace = useCallback(() => {
|
||
const element = previewViewportRef.current;
|
||
if (!element || !previewRect || !imageSize) {
|
||
return null;
|
||
}
|
||
|
||
const bounds = element.getBoundingClientRect();
|
||
return {
|
||
containerLeft: bounds.left,
|
||
containerTop: bounds.top,
|
||
previewRect,
|
||
imageSize,
|
||
} satisfies CoordinateSpace;
|
||
}, [imageSize, previewRect]);
|
||
|
||
const attachPointerSession = useCallback(
|
||
(
|
||
state: DragState,
|
||
event: ReactPointerEvent<SVGElement>,
|
||
onMove: (dragState: DragState, moveEvent: PointerEvent) => void,
|
||
onEnd?: (dragState: DragState) => void
|
||
) => {
|
||
clearPointerSession();
|
||
dragStateRef.current = state;
|
||
|
||
try {
|
||
event.currentTarget.setPointerCapture?.(event.pointerId);
|
||
} catch {
|
||
// ignore capture failures in unsupported environments
|
||
}
|
||
|
||
const handlePointerMove = (moveEvent: PointerEvent) => {
|
||
const activeState = dragStateRef.current;
|
||
if (!activeState || activeState.pointerId !== moveEvent.pointerId) {
|
||
return;
|
||
}
|
||
|
||
onMove(activeState, moveEvent);
|
||
};
|
||
|
||
const handlePointerUp = (upEvent: PointerEvent) => {
|
||
const activeState = dragStateRef.current;
|
||
if (!activeState || activeState.pointerId !== upEvent.pointerId) {
|
||
return;
|
||
}
|
||
|
||
onEnd?.(activeState);
|
||
clearPointerSession();
|
||
};
|
||
|
||
cleanupRef.current = () => {
|
||
window.removeEventListener("pointermove", handlePointerMove);
|
||
window.removeEventListener("pointerup", handlePointerUp);
|
||
window.removeEventListener("pointercancel", handlePointerUp);
|
||
};
|
||
|
||
window.addEventListener("pointermove", handlePointerMove);
|
||
window.addEventListener("pointerup", handlePointerUp);
|
||
window.addEventListener("pointercancel", handlePointerUp);
|
||
},
|
||
[clearPointerSession]
|
||
);
|
||
|
||
const handleOverlayPointerDown = useCallback(
|
||
(event: ReactPointerEvent<SVGSVGElement>) => {
|
||
if (!enableDimensionAnnotations) {
|
||
return;
|
||
}
|
||
|
||
if (!isDrawMode) {
|
||
setSelectedAnnotationId("");
|
||
return;
|
||
}
|
||
|
||
const coordinateSpace = getCoordinateSpace();
|
||
if (!coordinateSpace) {
|
||
return;
|
||
}
|
||
|
||
const startPoint = mapClientPointToImagePoint(
|
||
event.clientX,
|
||
event.clientY,
|
||
coordinateSpace,
|
||
{ requireInside: true }
|
||
);
|
||
if (!startPoint) {
|
||
return;
|
||
}
|
||
|
||
event.preventDefault();
|
||
event.stopPropagation();
|
||
const annotationId = createAnnotationId();
|
||
setAnnotations((current) => [
|
||
...current,
|
||
{
|
||
id: annotationId,
|
||
x1: startPoint.x,
|
||
y1: startPoint.y,
|
||
x2: startPoint.x,
|
||
y2: startPoint.y,
|
||
label: "",
|
||
},
|
||
]);
|
||
setSelectedAnnotationId(annotationId);
|
||
|
||
attachPointerSession(
|
||
{
|
||
kind: "drawing",
|
||
pointerId: event.pointerId,
|
||
annotationId,
|
||
coordinateSpace,
|
||
},
|
||
event,
|
||
(dragState, moveEvent) => {
|
||
const nextPoint = mapClientPointToImagePoint(
|
||
moveEvent.clientX,
|
||
moveEvent.clientY,
|
||
dragState.coordinateSpace
|
||
);
|
||
if (!nextPoint) {
|
||
return;
|
||
}
|
||
|
||
setAnnotations((current) =>
|
||
current.map((annotation) =>
|
||
annotation.id === dragState.annotationId
|
||
? {
|
||
...annotation,
|
||
x2: nextPoint.x,
|
||
y2: nextPoint.y,
|
||
}
|
||
: annotation
|
||
)
|
||
);
|
||
},
|
||
(dragState) => {
|
||
setAnnotations((current) =>
|
||
current.filter((annotation) => {
|
||
if (annotation.id !== dragState.annotationId) {
|
||
return true;
|
||
}
|
||
|
||
return getDimensionLength(annotation) >= 12;
|
||
})
|
||
);
|
||
setIsDrawMode(false);
|
||
}
|
||
);
|
||
},
|
||
[
|
||
attachPointerSession,
|
||
enableDimensionAnnotations,
|
||
getCoordinateSpace,
|
||
isDrawMode,
|
||
]
|
||
);
|
||
|
||
const handleAnnotationHandlePointerDown = useCallback(
|
||
(
|
||
annotationId: string,
|
||
handle: "move-start" | "move-end",
|
||
event: ReactPointerEvent<SVGCircleElement>
|
||
) => {
|
||
const coordinateSpace = getCoordinateSpace();
|
||
if (!coordinateSpace) {
|
||
return;
|
||
}
|
||
|
||
event.preventDefault();
|
||
event.stopPropagation();
|
||
setSelectedAnnotationId(annotationId);
|
||
|
||
attachPointerSession(
|
||
{
|
||
kind: handle,
|
||
pointerId: event.pointerId,
|
||
annotationId,
|
||
coordinateSpace,
|
||
},
|
||
event,
|
||
(dragState, moveEvent) => {
|
||
const nextPoint = mapClientPointToImagePoint(
|
||
moveEvent.clientX,
|
||
moveEvent.clientY,
|
||
dragState.coordinateSpace
|
||
);
|
||
if (!nextPoint) {
|
||
return;
|
||
}
|
||
|
||
setAnnotations((current) =>
|
||
current.map((annotation) => {
|
||
if (annotation.id !== dragState.annotationId) {
|
||
return annotation;
|
||
}
|
||
|
||
return dragState.kind === "move-start"
|
||
? { ...annotation, x1: nextPoint.x, y1: nextPoint.y }
|
||
: { ...annotation, x2: nextPoint.x, y2: nextPoint.y };
|
||
})
|
||
);
|
||
}
|
||
);
|
||
},
|
||
[attachPointerSession, getCoordinateSpace]
|
||
);
|
||
|
||
const handleAnnotationBodyPointerDown = useCallback(
|
||
(
|
||
annotation: DimensionAnnotation,
|
||
event: ReactPointerEvent<SVGLineElement | SVGGElement>
|
||
) => {
|
||
const coordinateSpace = getCoordinateSpace();
|
||
if (!coordinateSpace) {
|
||
return;
|
||
}
|
||
|
||
event.preventDefault();
|
||
event.stopPropagation();
|
||
setSelectedAnnotationId(annotation.id);
|
||
|
||
attachPointerSession(
|
||
{
|
||
kind: "move-line",
|
||
pointerId: event.pointerId,
|
||
annotationId: annotation.id,
|
||
coordinateSpace,
|
||
startClientX: event.clientX,
|
||
startClientY: event.clientY,
|
||
startAnnotation: annotation,
|
||
},
|
||
event,
|
||
(dragState, moveEvent) => {
|
||
if (dragState.kind !== "move-line") {
|
||
return;
|
||
}
|
||
|
||
const deltaImageX =
|
||
((moveEvent.clientX - dragState.startClientX) /
|
||
Math.max(1, dragState.coordinateSpace.previewRect.width)) *
|
||
dragState.coordinateSpace.imageSize.width;
|
||
const deltaImageY =
|
||
((moveEvent.clientY - dragState.startClientY) /
|
||
Math.max(1, dragState.coordinateSpace.previewRect.height)) *
|
||
dragState.coordinateSpace.imageSize.height;
|
||
const minDeltaX = -Math.min(
|
||
dragState.startAnnotation.x1,
|
||
dragState.startAnnotation.x2
|
||
);
|
||
const maxDeltaX =
|
||
dragState.coordinateSpace.imageSize.width -
|
||
Math.max(
|
||
dragState.startAnnotation.x1,
|
||
dragState.startAnnotation.x2
|
||
);
|
||
const minDeltaY = -Math.min(
|
||
dragState.startAnnotation.y1,
|
||
dragState.startAnnotation.y2
|
||
);
|
||
const maxDeltaY =
|
||
dragState.coordinateSpace.imageSize.height -
|
||
Math.max(
|
||
dragState.startAnnotation.y1,
|
||
dragState.startAnnotation.y2
|
||
);
|
||
const safeDeltaX = clamp(deltaImageX, minDeltaX, maxDeltaX);
|
||
const safeDeltaY = clamp(deltaImageY, minDeltaY, maxDeltaY);
|
||
|
||
setAnnotations((current) =>
|
||
current.map((item) =>
|
||
item.id === dragState.annotationId
|
||
? {
|
||
...item,
|
||
x1: dragState.startAnnotation.x1 + safeDeltaX,
|
||
y1: dragState.startAnnotation.y1 + safeDeltaY,
|
||
x2: dragState.startAnnotation.x2 + safeDeltaX,
|
||
y2: dragState.startAnnotation.y2 + safeDeltaY,
|
||
}
|
||
: item
|
||
)
|
||
);
|
||
}
|
||
);
|
||
},
|
||
[attachPointerSession, getCoordinateSpace]
|
||
);
|
||
|
||
const handleDeleteSelected = useCallback(() => {
|
||
if (!selectedAnnotation) {
|
||
return;
|
||
}
|
||
|
||
setAnnotations((current) =>
|
||
current.filter((annotation) => annotation.id !== selectedAnnotation.id)
|
||
);
|
||
setSelectedAnnotationId("");
|
||
}, [selectedAnnotation]);
|
||
|
||
const handleDownload = useCallback(async () => {
|
||
const fileName = buildDownloadName(downloadName, imageUrl);
|
||
const shouldCompose = enableDimensionAnnotations && annotations.length > 0;
|
||
|
||
try {
|
||
setIsDownloading(true);
|
||
if (!shouldCompose) {
|
||
const response = await fetch(buildImageProxyUrl(imageUrl));
|
||
if (!response.ok) {
|
||
throw new Error(`下载失败（${response.status}）`);
|
||
}
|
||
|
||
const blob = await response.blob();
|
||
downloadBlob(blob, fileName.replace(DIMENSION_SUFFIX_REGEX, ""));
|
||
return;
|
||
}
|
||
|
||
const { image, dispose } = await loadImageFromCandidates([
|
||
buildImageProxyUrl(imageUrl),
|
||
imageUrl,
|
||
]);
|
||
|
||
try {
|
||
const canvas = document.createElement("canvas");
|
||
canvas.width = Math.max(1, image.naturalWidth || image.width);
|
||
canvas.height = Math.max(1, image.naturalHeight || image.height);
|
||
const context = canvas.getContext("2d");
|
||
if (!context) {
|
||
throw new Error("无法创建导出画布");
|
||
}
|
||
|
||
context.drawImage(image, 0, 0, canvas.width, canvas.height);
|
||
for (const annotation of annotations) {
|
||
drawAnnotationToCanvas({
|
||
annotation,
|
||
annotations,
|
||
autoDimensionValues,
|
||
context,
|
||
imageSize: {
|
||
width: canvas.width,
|
||
height: canvas.height,
|
||
},
|
||
});
|
||
}
|
||
|
||
const blob = await new Promise<Blob>((resolve, reject) => {
|
||
canvas.toBlob(
|
||
(nextBlob) => {
|
||
if (nextBlob) {
|
||
resolve(nextBlob);
|
||
return;
|
||
}
|
||
|
||
reject(new Error("导出结果生成失败"));
|
||
},
|
||
"image/png",
|
||
1
|
||
);
|
||
});
|
||
|
||
downloadBlob(blob, fileName);
|
||
} finally {
|
||
dispose();
|
||
}
|
||
} catch (error) {
|
||
toast.error(error instanceof Error ? error.message : "下载结果图失败");
|
||
} finally {
|
||
setIsDownloading(false);
|
||
}
|
||
}, [
|
||
annotations,
|
||
autoDimensionValues,
|
||
downloadName,
|
||
enableDimensionAnnotations,
|
||
imageUrl,
|
||
]);
|
||
|
||
return (
|
||
<div className="flex min-h-0 flex-1 flex-col gap-3 rounded-2xl border border-white/10 bg-white/[0.02] p-3.5 xl:p-4">
|
||
{enableDimensionAnnotations ? (
|
||
<div className="flex flex-wrap items-center gap-2">
|
||
<Button
|
||
className={cn(
|
||
"h-9 px-3",
|
||
isDrawMode
|
||
? "bg-orange-500 text-white hover:bg-orange-400"
|
||
: "border-white/10 bg-white/[0.03] text-white hover:bg-white/[0.08]"
|
||
)}
|
||
onClick={() => {
|
||
setIsDrawMode((current) => !current);
|
||
setSelectedAnnotationId("");
|
||
}}
|
||
type="button"
|
||
variant={isDrawMode ? "default" : "outline"}
|
||
>
|
||
<Ruler className="mr-1.5 h-4 w-4" />
|
||
{isDrawMode ? "取消拉线" : "新增尺寸线"}
|
||
</Button>
|
||
<Button
|
||
className="h-9 border-white/10 bg-white/[0.03] text-white hover:bg-white/[0.08]"
|
||
disabled={!selectedAnnotation}
|
||
onClick={handleDeleteSelected}
|
||
type="button"
|
||
variant="outline"
|
||
>
|
||
<Trash2 className="mr-1.5 h-4 w-4" />
|
||
删除当前
|
||
</Button>
|
||
<Button
|
||
className="h-9 px-3 text-white/72 hover:text-white"
|
||
disabled={annotations.length === 0}
|
||
onClick={() => {
|
||
setAnnotations([]);
|
||
setSelectedAnnotationId("");
|
||
}}
|
||
type="button"
|
||
variant="ghost"
|
||
>
|
||
清空标注
|
||
</Button>
|
||
<div className="text-white/45 text-xs">
|
||
{isDrawMode
|
||
? "在预览图上按住拖动即可拉出一条尺寸线"
|
||
: "支持拖动整条线、拖动两端端点，并可手动改尺寸文字"}
|
||
</div>
|
||
</div>
|
||
) : null}
|
||
|
||
<div
|
||
className={cn(
|
||
"relative flex-1 overflow-hidden rounded-2xl border border-white/10 bg-[#111114]",
|
||
enableDimensionAnnotations && isDrawMode
|
||
? "cursor-crosshair"
|
||
: "cursor-default"
|
||
)}
|
||
ref={previewViewportRef}
|
||
style={{ minHeight: PREVIEW_MIN_HEIGHT }}
|
||
>
|
||
{previewRect && imageSize ? (
|
||
<>
|
||
<div
|
||
className="absolute select-none overflow-hidden"
|
||
style={{
|
||
left: previewRect.left,
|
||
top: previewRect.top,
|
||
width: previewRect.width,
|
||
height: previewRect.height,
|
||
}}
|
||
>
|
||
<Image
|
||
alt={imageAlt}
|
||
draggable={false}
|
||
fill
|
||
sizes={`${Math.max(320, Math.round(previewRect.width))}px`}
|
||
src={previewImageUrl}
|
||
style={{ objectFit: "fill" }}
|
||
unoptimized
|
||
/>
|
||
</div>
|
||
|
||
<svg
|
||
className="absolute inset-0 h-full w-full"
|
||
onPointerDown={handleOverlayPointerDown}
|
||
>
|
||
{annotations.map((annotation) => {
|
||
const isSelected = annotation.id === selectedAnnotationId;
|
||
const geometry = getPreviewAnnotationGeometry({
|
||
annotation,
|
||
annotations,
|
||
autoDimensionValues,
|
||
imageSize,
|
||
previewRect,
|
||
});
|
||
const strokeWidth = isSelected
|
||
? PREVIEW_DIMENSION_STROKE_WIDTH_ACTIVE
|
||
: PREVIEW_DIMENSION_STROKE_WIDTH;
|
||
const tickLength = isSelected
|
||
? PREVIEW_DIMENSION_TICK_LENGTH_ACTIVE
|
||
: PREVIEW_DIMENSION_TICK_LENGTH;
|
||
|
||
return (
|
||
<g key={annotation.id}>
|
||
<line
|
||
onPointerDown={(event) =>
|
||
handleAnnotationBodyPointerDown(annotation, event)
|
||
}
|
||
stroke="transparent"
|
||
strokeWidth={24}
|
||
x1={geometry.start.x}
|
||
x2={geometry.end.x}
|
||
y1={geometry.start.y}
|
||
y2={geometry.end.y}
|
||
/>
|
||
<line
|
||
opacity={isSelected ? 1 : 0.92}
|
||
pointerEvents="none"
|
||
stroke={DIMENSION_LINE_COLOR}
|
||
strokeLinecap="round"
|
||
strokeWidth={strokeWidth}
|
||
x1={geometry.start.x}
|
||
x2={geometry.end.x}
|
||
y1={geometry.start.y}
|
||
y2={geometry.end.y}
|
||
/>
|
||
<line
|
||
pointerEvents="none"
|
||
stroke={DIMENSION_LINE_COLOR}
|
||
strokeLinecap="round"
|
||
strokeWidth={
|
||
isSelected
|
||
? PREVIEW_DIMENSION_CAP_STROKE_WIDTH_ACTIVE
|
||
: PREVIEW_DIMENSION_CAP_STROKE_WIDTH
|
||
}
|
||
x1={geometry.start.x + geometry.vector.nx * tickLength}
|
||
x2={geometry.start.x - geometry.vector.nx * tickLength}
|
||
y1={geometry.start.y + geometry.vector.ny * tickLength}
|
||
y2={geometry.start.y - geometry.vector.ny * tickLength}
|
||
/>
|
||
<line
|
||
pointerEvents="none"
|
||
stroke={DIMENSION_LINE_COLOR}
|
||
strokeLinecap="round"
|
||
strokeWidth={
|
||
isSelected
|
||
? PREVIEW_DIMENSION_CAP_STROKE_WIDTH_ACTIVE
|
||
: PREVIEW_DIMENSION_CAP_STROKE_WIDTH
|
||
}
|
||
x1={geometry.end.x + geometry.vector.nx * tickLength}
|
||
x2={geometry.end.x - geometry.vector.nx * tickLength}
|
||
y1={geometry.end.y + geometry.vector.ny * tickLength}
|
||
y2={geometry.end.y - geometry.vector.ny * tickLength}
|
||
/>
|
||
<g
|
||
onPointerDown={(event) =>
|
||
handleAnnotationBodyPointerDown(annotation, event)
|
||
}
|
||
>
|
||
<text
|
||
dominantBaseline="middle"
|
||
fill={DIMENSION_TEXT_COLOR}
|
||
fontSize={PREVIEW_DIMENSION_FONT_SIZE}
|
||
fontWeight={500}
|
||
paintOrder="stroke"
|
||
pointerEvents="none"
|
||
stroke={DIMENSION_TEXT_HALO_COLOR}
|
||
strokeLinejoin="round"
|
||
strokeWidth={PREVIEW_DIMENSION_TEXT_HALO_WIDTH}
|
||
textAnchor="middle"
|
||
transform={`rotate(${geometry.angleDegrees} ${geometry.labelCenterX} ${geometry.labelCenterY})`}
|
||
x={geometry.labelCenterX}
|
||
y={geometry.labelCenterY + 0.5}
|
||
>
|
||
{geometry.label}
|
||
</text>
|
||
</g>
|
||
{isSelected ? (
|
||
<>
|
||
<circle
|
||
cx={geometry.start.x}
|
||
cy={geometry.start.y}
|
||
fill="#ffffff"
|
||
onPointerDown={(event) =>
|
||
handleAnnotationHandlePointerDown(
|
||
annotation.id,
|
||
"move-start",
|
||
event
|
||
)
|
||
}
|
||
r={PREVIEW_DIMENSION_HANDLE_RADIUS}
|
||
stroke={DIMENSION_LINE_COLOR}
|
||
strokeWidth={PREVIEW_DIMENSION_HANDLE_STROKE_WIDTH}
|
||
/>
|
||
<circle
|
||
cx={geometry.end.x}
|
||
cy={geometry.end.y}
|
||
fill="#ffffff"
|
||
onPointerDown={(event) =>
|
||
handleAnnotationHandlePointerDown(
|
||
annotation.id,
|
||
"move-end",
|
||
event
|
||
)
|
||
}
|
||
r={PREVIEW_DIMENSION_HANDLE_RADIUS}
|
||
stroke={DIMENSION_LINE_COLOR}
|
||
strokeWidth={PREVIEW_DIMENSION_HANDLE_STROKE_WIDTH}
|
||
/>
|
||
</>
|
||
) : null}
|
||
</g>
|
||
);
|
||
})}
|
||
</svg>
|
||
|
||
{enableDimensionAnnotations && isDrawMode ? (
|
||
<div className="-translate-x-1/2 pointer-events-none absolute top-3 left-1/2 rounded-full border border-orange-300/25 bg-black/70 px-3 py-1.5 text-orange-100 text-xs shadow-lg backdrop-blur">
|
||
按住并拖动，拉出尺寸线
|
||
</div>
|
||
) : null}
|
||
</>
|
||
) : (
|
||
<Image
|
||
alt={imageAlt}
|
||
fill
|
||
onLoad={(event) => {
|
||
const nextWidth = Math.max(
|
||
1,
|
||
event.currentTarget.naturalWidth || 0
|
||
);
|
||
const nextHeight = Math.max(
|
||
1,
|
||
event.currentTarget.naturalHeight || 0
|
||
);
|
||
if (nextWidth > 0 && nextHeight > 0) {
|
||
setImageSize({ width: nextWidth, height: nextHeight });
|
||
}
|
||
}}
|
||
sizes="100vw"
|
||
src={previewImageUrl}
|
||
style={{ objectFit: "contain" }}
|
||
unoptimized
|
||
/>
|
||
)}
|
||
</div>
|
||
|
||
{enableDimensionAnnotations ? (
|
||
<div className="rounded-2xl border border-white/10 bg-white/[0.03] p-3">
|
||
{selectedAnnotation ? (
|
||
<div className="space-y-2.5">
|
||
<div className="flex items-center justify-between gap-3">
|
||
<div>
|
||
<div className="font-medium text-sm text-white">尺寸文字</div>
|
||
<div className="text-white/45 text-xs">
|
||
{autoDimensionValues
|
||
? "留空时会优先使用商品尺寸信息自动显示 CM；手动时只输入数值即可。"
|
||
: "当前没有拿到商品尺寸信息，请直接输入数值，系统会自动补 CM。"}
|
||
</div>
|
||
</div>
|
||
{getDimensionLabel({
|
||
annotation: selectedAnnotation,
|
||
annotations,
|
||
autoDimensionValues,
|
||
}) ? (
|
||
<div className="rounded-full border border-white/10 bg-black/40 px-2.5 py-1 text-[11px] text-white/65">
|
||
建议值{" "}
|
||
{getDimensionLabel({
|
||
annotation: selectedAnnotation,
|
||
annotations,
|
||
autoDimensionValues,
|
||
})}
|
||
</div>
|
||
) : null}
|
||
</div>
|
||
<div className="relative">
|
||
<Input
|
||
className="border-white/10 bg-black/35 pr-14 text-white placeholder:text-white/28"
|
||
inputMode="decimal"
|
||
onChange={(event) =>
|
||
setAnnotations((current) =>
|
||
current.map((annotation) =>
|
||
annotation.id === selectedAnnotation.id
|
||
? {
|
||
...annotation,
|
||
label: normalizeDimensionInput(
|
||
event.target.value
|
||
),
|
||
}
|
||
: annotation
|
||
)
|
||
)
|
||
}
|
||
placeholder={LABEL_PLACEHOLDER}
|
||
value={normalizeDimensionInput(selectedAnnotation.label)}
|
||
/>
|
||
<span className="-translate-y-1/2 pointer-events-none absolute top-1/2 right-3 text-[11px] text-white/42">
|
||
{DIMENSION_UNIT}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
) : (
|
||
<div className="text-sm text-white/55">
|
||
选中一条尺寸线后，可以在这里输入真实尺寸文案。
|
||
</div>
|
||
)}
|
||
</div>
|
||
) : null}
|
||
|
||
<Button
|
||
className="w-full"
|
||
disabled={isDownloading}
|
||
onClick={handleDownload}
|
||
>
|
||
{isDownloading ? (
|
||
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
|
||
) : (
|
||
<Download className="mr-2 h-4 w-4" />
|
||
)}
|
||
下载结果图
|
||
</Button>
|
||
</div>
|
||
);
|
||
}
|