386 lines
12 KiB
TypeScript
386 lines
12 KiB
TypeScript
|
import { createSignal, For, Show, createMemo } from 'solid-js';
|
|||
|
|
import type { PageData } from './hooks/usePDFExport';
|
|||
|
|
import type { CardShape } from './types';
|
|||
|
|
import { pts2plotter } from '../../plotcutter';
|
|||
|
|
|
|||
|
|
export interface PltPreviewProps {
|
|||
|
|
pages: PageData[];
|
|||
|
|
cardWidth: number;
|
|||
|
|
cardHeight: number;
|
|||
|
|
shape: CardShape;
|
|||
|
|
bleed: number;
|
|||
|
|
onClose: () => void;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
export interface CardPath {
|
|||
|
|
pageIndex: number;
|
|||
|
|
cardIndex: number;
|
|||
|
|
points: [number, number][];
|
|||
|
|
centerX: number;
|
|||
|
|
centerY: number;
|
|||
|
|
pathD: string;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 根据形状生成卡片轮廓点（单位：mm，相对于卡片左下角）
|
|||
|
|
*/
|
|||
|
|
function getCardShapePoints(
|
|||
|
|
shape: CardShape,
|
|||
|
|
width: number,
|
|||
|
|
height: number
|
|||
|
|
): [number, number][] {
|
|||
|
|
const points: [number, number][] = [];
|
|||
|
|
|
|||
|
|
switch (shape) {
|
|||
|
|
case 'circle': {
|
|||
|
|
const radius = Math.min(width, height) / 2;
|
|||
|
|
const centerX = width / 2;
|
|||
|
|
const centerY = height / 2;
|
|||
|
|
for (let i = 0; i < 36; i++) {
|
|||
|
|
const angle = (i / 36) * Math.PI * 2;
|
|||
|
|
points.push([
|
|||
|
|
centerX + radius * Math.cos(angle),
|
|||
|
|
centerY + radius * Math.sin(angle)
|
|||
|
|
]);
|
|||
|
|
}
|
|||
|
|
break;
|
|||
|
|
}
|
|||
|
|
case 'triangle': {
|
|||
|
|
points.push([width / 2, 0]);
|
|||
|
|
points.push([0, height]);
|
|||
|
|
points.push([width, height]);
|
|||
|
|
break;
|
|||
|
|
}
|
|||
|
|
case 'hexagon': {
|
|||
|
|
const halfW = width / 2;
|
|||
|
|
const quarterH = height / 4;
|
|||
|
|
points.push([halfW, 0]);
|
|||
|
|
points.push([width, quarterH]);
|
|||
|
|
points.push([width, height - quarterH]);
|
|||
|
|
points.push([halfW, height]);
|
|||
|
|
points.push([0, height - quarterH]);
|
|||
|
|
points.push([0, quarterH]);
|
|||
|
|
break;
|
|||
|
|
}
|
|||
|
|
case 'rectangle':
|
|||
|
|
default: {
|
|||
|
|
points.push([0, 0]);
|
|||
|
|
points.push([width, 0]);
|
|||
|
|
points.push([width, height]);
|
|||
|
|
points.push([0, height]);
|
|||
|
|
break;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return points;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 计算多边形的中心点
|
|||
|
|
*/
|
|||
|
|
function calculateCenter(points: [number, number][]): { x: number; y: number } {
|
|||
|
|
let sumX = 0;
|
|||
|
|
let sumY = 0;
|
|||
|
|
for (const [x, y] of points) {
|
|||
|
|
sumX += x;
|
|||
|
|
sumY += y;
|
|||
|
|
}
|
|||
|
|
return {
|
|||
|
|
x: sumX / points.length,
|
|||
|
|
y: sumY / points.length
|
|||
|
|
};
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 根据进度计算小球在路径上的位置
|
|||
|
|
*/
|
|||
|
|
function getPointOnPath(points: [number, number][], progress: number): [number, number] {
|
|||
|
|
if (points.length === 0) return [0, 0];
|
|||
|
|
if (points.length === 1) return points[0];
|
|||
|
|
|
|||
|
|
const totalSegments = points.length;
|
|||
|
|
const scaledProgress = progress * totalSegments;
|
|||
|
|
const segmentIndex = Math.floor(scaledProgress);
|
|||
|
|
const segmentProgress = scaledProgress - segmentIndex;
|
|||
|
|
|
|||
|
|
const currentIndex = Math.min(segmentIndex, points.length - 1);
|
|||
|
|
const nextIndex = (currentIndex + 1) % points.length;
|
|||
|
|
|
|||
|
|
const [x1, y1] = points[currentIndex];
|
|||
|
|
const [x2, y2] = points[nextIndex];
|
|||
|
|
|
|||
|
|
return [
|
|||
|
|
x1 + (x2 - x1) * segmentProgress,
|
|||
|
|
y1 + (y2 - y1) * segmentProgress
|
|||
|
|
];
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* PLT 预览组件 - 显示切割路径预览
|
|||
|
|
*/
|
|||
|
|
export function PltPreview(props: PltPreviewProps) {
|
|||
|
|
const a4Width = 297; // 横向 A4
|
|||
|
|
const a4Height = 210;
|
|||
|
|
|
|||
|
|
// 收集所有卡片路径
|
|||
|
|
const cardPaths: CardPath[] = [];
|
|||
|
|
let pathIndex = 0;
|
|||
|
|
|
|||
|
|
// 计算切割尺寸（排版尺寸减去出血）
|
|||
|
|
const cutWidth = props.cardWidth - props.bleed * 2;
|
|||
|
|
const cutHeight = props.cardHeight - props.bleed * 2;
|
|||
|
|
|
|||
|
|
for (const page of props.pages) {
|
|||
|
|
for (const card of page.cards) {
|
|||
|
|
if (card.side !== 'front') continue;
|
|||
|
|
|
|||
|
|
const shapePoints = getCardShapePoints(props.shape, cutWidth, cutHeight);
|
|||
|
|
const pagePoints = shapePoints.map(([x, y]) => [
|
|||
|
|
card.x + props.bleed + x,
|
|||
|
|
a4Height - (card.y + props.bleed + y)
|
|||
|
|
] as [number, number]);
|
|||
|
|
|
|||
|
|
const center = calculateCenter(pagePoints);
|
|||
|
|
const pathD = pointsToSvgPath(pagePoints);
|
|||
|
|
|
|||
|
|
cardPaths.push({
|
|||
|
|
pageIndex: page.pageIndex,
|
|||
|
|
cardIndex: pathIndex++,
|
|||
|
|
points: pagePoints,
|
|||
|
|
centerX: center.x,
|
|||
|
|
centerY: center.y,
|
|||
|
|
pathD
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 生成 HPGL 代码用于下载
|
|||
|
|
const allPaths = cardPaths.map(p => p.points);
|
|||
|
|
const plotterCode = allPaths.length > 0 ? pts2plotter(allPaths, a4Width, a4Height, 1) : '';
|
|||
|
|
|
|||
|
|
// 进度控制 (0 到 cardPaths.length)
|
|||
|
|
const [progress, setProgress] = createSignal(0);
|
|||
|
|
|
|||
|
|
// 计算当前正在切割的卡片索引
|
|||
|
|
const currentPathIndex = createMemo(() => {
|
|||
|
|
const p = progress();
|
|||
|
|
if (p <= 0) return -1;
|
|||
|
|
if (p >= cardPaths.length) return cardPaths.length - 1;
|
|||
|
|
return Math.floor(p);
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 计算当前小球位置
|
|||
|
|
const ballPosition = createMemo(() => {
|
|||
|
|
const p = progress();
|
|||
|
|
if (p <= 0 || cardPaths.length === 0) return null;
|
|||
|
|
|
|||
|
|
const cardIndex = Math.min(Math.floor(p), cardPaths.length - 1);
|
|||
|
|
const cardProgress = p - cardIndex;
|
|||
|
|
const cardPath = cardPaths[cardIndex];
|
|||
|
|
|
|||
|
|
return getPointOnPath(cardPath.points, cardProgress);
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
const handleDownload = () => {
|
|||
|
|
if (!plotterCode) {
|
|||
|
|
alert('没有可导出的卡片');
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const blob = new Blob([plotterCode], { type: 'application/vnd.hp-HPGL' });
|
|||
|
|
const url = URL.createObjectURL(blob);
|
|||
|
|
const link = document.createElement('a');
|
|||
|
|
link.href = url;
|
|||
|
|
link.download = `deck-export-${new Date().toISOString().slice(0, 19).replace(/:/g, '-')}.plt`;
|
|||
|
|
document.body.appendChild(link);
|
|||
|
|
link.click();
|
|||
|
|
document.body.removeChild(link);
|
|||
|
|
URL.revokeObjectURL(url);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const handleProgressChange = (e: Event) => {
|
|||
|
|
const target = e.target as HTMLInputElement;
|
|||
|
|
setProgress(Number(target.value));
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<div class="fixed inset-0 bg-black/50 z-50 overflow-auto">
|
|||
|
|
<div class="min-h-screen py-20 px-4">
|
|||
|
|
{/* 头部控制栏 */}
|
|||
|
|
<div class="fixed top-4 left-1/2 -translate-x-1/2 bg-white shadow-lg rounded-lg px-4 py-3 flex items-center gap-4 z-50">
|
|||
|
|
<h2 class="text-base font-bold m-0">PLT 切割预览</h2>
|
|||
|
|
<div class="flex items-center gap-4 flex-1 max-w-md">
|
|||
|
|
<span class="text-sm text-gray-600 whitespace-nowrap">切割进度</span>
|
|||
|
|
<input
|
|||
|
|
type="range"
|
|||
|
|
min="0"
|
|||
|
|
max={cardPaths.length}
|
|||
|
|
step="0.01"
|
|||
|
|
value={progress()}
|
|||
|
|
onInput={handleProgressChange}
|
|||
|
|
class="flex-1 h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer accent-blue-600"
|
|||
|
|
/>
|
|||
|
|
<span class="text-sm text-gray-600 whitespace-nowrap w-20 text-right">
|
|||
|
|
{Math.floor(progress())} / {cardPaths.length}
|
|||
|
|
</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="flex items-center gap-2">
|
|||
|
|
<button
|
|||
|
|
onClick={handleDownload}
|
|||
|
|
class="bg-blue-600 hover:bg-blue-700 text-white px-3 py-1.5 rounded text-sm font-medium cursor-pointer flex items-center gap-1"
|
|||
|
|
disabled={cardPaths.length === 0}
|
|||
|
|
>
|
|||
|
|
📥 下载 PLT
|
|||
|
|
</button>
|
|||
|
|
|
|||
|
|
<button
|
|||
|
|
onClick={props.onClose}
|
|||
|
|
class="bg-gray-200 hover:bg-gray-300 text-gray-700 px-3 py-1.5 rounded text-sm font-medium cursor-pointer"
|
|||
|
|
>
|
|||
|
|
关闭
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* 预览区域 */}
|
|||
|
|
<div class="flex flex-col items-center gap-8 mt-20">
|
|||
|
|
<For each={props.pages}>
|
|||
|
|
{(page) => {
|
|||
|
|
const pageCardPaths = cardPaths.filter(p => p.pageIndex === page.pageIndex);
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<svg
|
|||
|
|
class="bg-white shadow-xl"
|
|||
|
|
viewBox={`0 0 ${a4Width} ${a4Height}`}
|
|||
|
|
style={{
|
|||
|
|
width: `${a4Width}mm`,
|
|||
|
|
height: `${a4Height}mm`
|
|||
|
|
}}
|
|||
|
|
xmlns="http://www.w3.org/2000/svg"
|
|||
|
|
>
|
|||
|
|
{/* A4 边框 */}
|
|||
|
|
<rect
|
|||
|
|
x="0"
|
|||
|
|
y="0"
|
|||
|
|
width={a4Width}
|
|||
|
|
height={a4Height}
|
|||
|
|
fill="none"
|
|||
|
|
stroke="#ccc"
|
|||
|
|
stroke-width="0.5"
|
|||
|
|
/>
|
|||
|
|
|
|||
|
|
{/* 页面边框 */}
|
|||
|
|
<rect
|
|||
|
|
x={page.frameBounds.minX}
|
|||
|
|
y={page.frameBounds.minY}
|
|||
|
|
width={page.frameBounds.maxX - page.frameBounds.minX}
|
|||
|
|
height={page.frameBounds.maxY - page.frameBounds.minY}
|
|||
|
|
fill="none"
|
|||
|
|
stroke="#888"
|
|||
|
|
stroke-width="0.2"
|
|||
|
|
/>
|
|||
|
|
|
|||
|
|
{/* 切割路径 */}
|
|||
|
|
<For each={pageCardPaths}>
|
|||
|
|
{(path) => {
|
|||
|
|
const currentIndex = currentPathIndex();
|
|||
|
|
const isCurrentPath = currentIndex === path.cardIndex;
|
|||
|
|
const isCompleted = currentIndex > path.cardIndex;
|
|||
|
|
const displayColor = isCurrentPath ? '#ef4444' : (isCompleted ? '#10b981' : '#3b82f6');
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<g>
|
|||
|
|
{/* 切割路径（虚线） */}
|
|||
|
|
<path
|
|||
|
|
d={path.pathD}
|
|||
|
|
fill="none"
|
|||
|
|
stroke={displayColor}
|
|||
|
|
stroke-width="0.3"
|
|||
|
|
stroke-dasharray="2 1"
|
|||
|
|
/>
|
|||
|
|
|
|||
|
|
{/* 序号标签 */}
|
|||
|
|
<g transform={`translate(${path.centerX}, ${path.centerY})`}>
|
|||
|
|
<circle
|
|||
|
|
r="2"
|
|||
|
|
fill="white"
|
|||
|
|
stroke={displayColor}
|
|||
|
|
stroke-width="0.1"
|
|||
|
|
/>
|
|||
|
|
<text
|
|||
|
|
text-anchor="middle"
|
|||
|
|
dominant-baseline="middle"
|
|||
|
|
font-size="1.5"
|
|||
|
|
fill={displayColor}
|
|||
|
|
font-weight="bold"
|
|||
|
|
>
|
|||
|
|
{path.cardIndex + 1}
|
|||
|
|
</text>
|
|||
|
|
</g>
|
|||
|
|
</g>
|
|||
|
|
);
|
|||
|
|
}}
|
|||
|
|
</For>
|
|||
|
|
|
|||
|
|
{/* 动画小球 */}
|
|||
|
|
<Show when={ballPosition()}>
|
|||
|
|
{(pos) => (
|
|||
|
|
<circle
|
|||
|
|
cx={pos()[0]}
|
|||
|
|
cy={pos()[1]}
|
|||
|
|
r="0.8"
|
|||
|
|
fill="#ef4444"
|
|||
|
|
/>
|
|||
|
|
)}
|
|||
|
|
</Show>
|
|||
|
|
</svg>
|
|||
|
|
);
|
|||
|
|
}}
|
|||
|
|
</For>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* 图例说明 */}
|
|||
|
|
<div class="fixed bottom-4 left-1/2 -translate-x-1/2 bg-white shadow-lg rounded-lg px-4 py-2 flex items-center gap-4 z-50">
|
|||
|
|
<div class="flex items-center gap-2">
|
|||
|
|
<div class="w-6 h-0.5" style={{ "border-bottom": "2px dashed #3b82f6" }}></div>
|
|||
|
|
<span class="text-sm text-gray-600">待切割路径</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="flex items-center gap-2">
|
|||
|
|
<div class="w-6 h-0.5" style={{ "border-bottom": "2px dashed #ef4444" }}></div>
|
|||
|
|
<span class="text-sm text-gray-600">正在切割</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="flex items-center gap-2">
|
|||
|
|
<div class="w-6 h-0.5" style={{ "border-bottom": "2px dashed #10b981" }}></div>
|
|||
|
|
<span class="text-sm text-gray-600">已切割</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="flex items-center gap-2">
|
|||
|
|
<div class="w-4 h-4 rounded-full bg-red-500"></div>
|
|||
|
|
<span class="text-sm text-gray-600">刀头</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 将路径点转换为 SVG path 命令
|
|||
|
|
*/
|
|||
|
|
function pointsToSvgPath(points: [number, number][], closed = true): string {
|
|||
|
|
if (points.length === 0) return '';
|
|||
|
|
|
|||
|
|
const [startX, startY] = points[0];
|
|||
|
|
let d = `M ${startX} ${startY}`;
|
|||
|
|
|
|||
|
|
for (let i = 1; i < points.length; i++) {
|
|||
|
|
const [x, y] = points[i];
|
|||
|
|
d += ` L ${x} ${y}`;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (closed) {
|
|||
|
|
d += ' Z';
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return d;
|
|||
|
|
}
|