refactor: clean up
This commit is contained in:
parent
57d2a7ed46
commit
f87ccb662d
|
|
@ -1,29 +1,12 @@
|
|||
import { createSignal, For, Show, createMemo } from 'solid-js';
|
||||
import { parsePlt, extractCutPaths } from '../../plotcutter/parser';
|
||||
import { generateTravelPaths, travelPathsToSvg } from '../../plotcutter/layout';
|
||||
import { pts2plotter } from '../../plotcutter/plotter';
|
||||
import type { CardPath, CardShape } from '../../plotcutter/types';
|
||||
import {
|
||||
getCardShapePoints,
|
||||
calculateCenter,
|
||||
contourToSvgPath
|
||||
} from '../../plotcutter/contour';
|
||||
import type { CardPath } from '../../plotcutter/types';
|
||||
import { calculateCenter, contourToSvgPath } from '../../plotcutter/contour';
|
||||
|
||||
export interface PltPreviewProps {
|
||||
/** PLT 文件内容 */
|
||||
pltCode: string;
|
||||
/** 卡片形状(用于生成刀路) */
|
||||
shape: CardShape;
|
||||
/** 卡片宽度 (mm) */
|
||||
cardWidth: number;
|
||||
/** 卡片高度 (mm) */
|
||||
cardHeight: number;
|
||||
/** 出血 (mm) */
|
||||
bleed: number;
|
||||
/** 圆角半径 (mm) */
|
||||
cornerRadius: number;
|
||||
/** 打印方向 */
|
||||
orientation: 'portrait' | 'landscape';
|
||||
/** 关闭回调 */
|
||||
onClose: () => void;
|
||||
}
|
||||
|
|
@ -31,9 +14,11 @@ export interface PltPreviewProps {
|
|||
/**
|
||||
* 从 PLT 代码解析并生成卡片路径数据
|
||||
*/
|
||||
function parsePltToCardPaths(pltCode: string, a4Height: number): {
|
||||
function parsePltToCardPaths(pltCode: string): {
|
||||
cutPaths: [number, number][][];
|
||||
cardPaths: CardPath[];
|
||||
width: number;
|
||||
height: number;
|
||||
} {
|
||||
const parsed = parsePlt(pltCode);
|
||||
const cutPaths = extractCutPaths(parsed, 5); // 5mm 阈值
|
||||
|
|
@ -57,151 +42,66 @@ function parsePltToCardPaths(pltCode: string, a4Height: number): {
|
|||
};
|
||||
});
|
||||
|
||||
return { cutPaths, cardPaths };
|
||||
}
|
||||
|
||||
/**
|
||||
* 生成单页满排时的 PLT 代码(用于预览对比)
|
||||
*/
|
||||
function generateSinglePagePlt(
|
||||
shape: CardShape,
|
||||
cardWidth: number,
|
||||
cardHeight: number,
|
||||
bleed: number,
|
||||
cornerRadius: number,
|
||||
orientation: 'portrait' | 'landscape'
|
||||
): string {
|
||||
const a4Width = orientation === 'landscape' ? 297 : 210;
|
||||
const a4Height = orientation === 'landscape' ? 210 : 297;
|
||||
const printMargin = 5;
|
||||
|
||||
const usableWidth = a4Width - printMargin * 2;
|
||||
const usableHeight = a4Height - printMargin * 2;
|
||||
const cardsPerRow = Math.floor(usableWidth / cardWidth);
|
||||
const rowsPerPage = Math.floor(usableHeight / cardHeight);
|
||||
const cardsPerPage = cardsPerRow * rowsPerPage;
|
||||
|
||||
const maxGridWidth = cardsPerRow * cardWidth;
|
||||
const maxGridHeight = rowsPerPage * cardHeight;
|
||||
const offsetX = (a4Width - maxGridWidth) / 2;
|
||||
const offsetY = (a4Height - maxGridHeight) / 2;
|
||||
|
||||
const cutWidth = cardWidth - bleed * 2;
|
||||
const cutHeight = cardHeight - bleed * 2;
|
||||
|
||||
const allPaths: [number, number][][] = [];
|
||||
|
||||
for (let i = 0; i < cardsPerPage; i++) {
|
||||
const row = Math.floor(i / cardsPerRow);
|
||||
const col = i % cardsPerRow;
|
||||
const x = offsetX + col * cardWidth;
|
||||
const y = offsetY + row * cardHeight;
|
||||
|
||||
const shapePoints = getCardShapePoints(shape, cutWidth, cutHeight, cornerRadius);
|
||||
const pagePoints = shapePoints.map(([px, py]) => [
|
||||
x + bleed + px,
|
||||
a4Height - (y + bleed + py)
|
||||
] as [number, number]);
|
||||
|
||||
allPaths.push(pagePoints);
|
||||
}
|
||||
|
||||
if (allPaths.length === 0) return '';
|
||||
|
||||
const startPoint: [number, number] = [0, a4Height];
|
||||
const endPoint: [number, number] = [0, a4Height];
|
||||
return pts2plotter(allPaths, a4Width, a4Height, 1, startPoint, endPoint);
|
||||
return {
|
||||
cutPaths,
|
||||
cardPaths,
|
||||
width: parsed.width || 0,
|
||||
height: parsed.height || 0
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* PLT 预览组件 - 基于 PLT 文本解析显示切割路径预览
|
||||
*
|
||||
* 所有显示参数(尺寸、路径等)都从 PLT 文本解析获取。
|
||||
*/
|
||||
export function PltPreview(props: PltPreviewProps) {
|
||||
const a4Width = props.orientation === 'landscape' ? 297 : 210;
|
||||
const a4Height = props.orientation === 'landscape' ? 210 : 297;
|
||||
|
||||
// 使用传入的圆角值,但也允许用户修改
|
||||
const [cornerRadius, setCornerRadius] = createSignal(props.cornerRadius);
|
||||
|
||||
// 解析传入的 PLT 代码
|
||||
const parsedData = createMemo(() => {
|
||||
if (!props.pltCode) {
|
||||
return { cutPaths: [] as [number, number][][], cardPaths: [] as CardPath[] };
|
||||
return { cutPaths: [] as [number, number][][], cardPaths: [] as CardPath[], width: 0, height: 0 };
|
||||
}
|
||||
return parsePltToCardPaths(props.pltCode, a4Height);
|
||||
return parsePltToCardPaths(props.pltCode);
|
||||
});
|
||||
|
||||
// 生成空走路径
|
||||
const travelPathD = createMemo(() => {
|
||||
const cardPaths = parsedData().cardPaths;
|
||||
const height = parsedData().height;
|
||||
if (cardPaths.length === 0) return '';
|
||||
const travelPaths = generateTravelPaths(cardPaths, a4Height);
|
||||
const travelPaths = generateTravelPaths(cardPaths, height);
|
||||
return travelPathsToSvg(travelPaths);
|
||||
});
|
||||
|
||||
// 生成单页满排时的 PLT 代码(用于对比)
|
||||
const singlePagePltCode = createMemo(() => {
|
||||
return generateSinglePagePlt(
|
||||
props.shape,
|
||||
props.cardWidth,
|
||||
props.cardHeight,
|
||||
props.bleed,
|
||||
cornerRadius(),
|
||||
props.orientation
|
||||
);
|
||||
});
|
||||
|
||||
// 生成当前 PLT 的 HPGL 代码(重新生成,确保圆角更新)
|
||||
const currentPltCode = createMemo(() => {
|
||||
const cardPaths = parsedData().cardPaths;
|
||||
if (cardPaths.length === 0) return '';
|
||||
const allPaths = cardPaths.map(p => p.points);
|
||||
const startPoint: [number, number] = [0, a4Height];
|
||||
const endPoint: [number, number] = [0, a4Height];
|
||||
return pts2plotter(allPaths, a4Width, a4Height, 1, startPoint, endPoint);
|
||||
});
|
||||
|
||||
const handleDownload = () => {
|
||||
if (!currentPltCode()) {
|
||||
if (!props.pltCode) {
|
||||
alert('没有可导出的卡片');
|
||||
return;
|
||||
}
|
||||
|
||||
const blob = new Blob([currentPltCode()], { type: 'application/vnd.hp-HPGL' });
|
||||
const blob = new Blob([props.pltCode], { 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`;
|
||||
link.download = `deck-plt-${new Date().toISOString().slice(0, 19).replace(/:/g, '-')}.plt`;
|
||||
document.body.appendChild(link);
|
||||
link.click();
|
||||
document.body.removeChild(link);
|
||||
URL.revokeObjectURL(url);
|
||||
};
|
||||
|
||||
const handleCornerRadiusChange = (e: Event) => {
|
||||
const target = e.target as HTMLInputElement;
|
||||
setCornerRadius(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-2">
|
||||
<label class="text-sm text-gray-600">圆角 (mm):</label>
|
||||
<input
|
||||
type="number"
|
||||
min="0"
|
||||
max="10"
|
||||
step="0.5"
|
||||
value={cornerRadius()}
|
||||
onInput={handleCornerRadiusChange}
|
||||
class="w-16 px-2 py-1 border border-gray-300 rounded text-sm"
|
||||
/>
|
||||
</div>
|
||||
<div class="flex items-center gap-2 flex-1">
|
||||
<Show when={parsedData().width > 0}>
|
||||
<span class="text-sm text-gray-500">
|
||||
尺寸:{parsedData().width.toFixed(1)}mm × {parsedData().height.toFixed(1)}mm
|
||||
</span>
|
||||
</Show>
|
||||
<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"
|
||||
|
|
@ -220,22 +120,30 @@ export function PltPreview(props: PltPreviewProps) {
|
|||
</div>
|
||||
|
||||
{/* 预览区域 */}
|
||||
<Show
|
||||
when={parsedData().width > 0 && parsedData().height > 0}
|
||||
fallback={
|
||||
<div class="flex items-center justify-center h-screen text-gray-500">
|
||||
无法解析 PLT 文件尺寸
|
||||
</div>
|
||||
}
|
||||
>
|
||||
<div class="flex flex-col items-center gap-8 mt-20">
|
||||
<svg
|
||||
class="bg-white shadow-xl"
|
||||
viewBox={`0 0 ${a4Width} ${a4Height}`}
|
||||
viewBox={`0 0 ${parsedData().width} ${parsedData().height}`}
|
||||
style={{
|
||||
width: `${a4Width}mm`,
|
||||
height: `${a4Height}mm`
|
||||
width: `${Math.min(parsedData().width, 800)}px`,
|
||||
height: `${(parsedData().height / parsedData().width) * Math.min(parsedData().width, 800)}px`
|
||||
}}
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
{/* A4 边框 */}
|
||||
{/* 边框 */}
|
||||
<rect
|
||||
x="0"
|
||||
y="0"
|
||||
width={a4Width}
|
||||
height={a4Height}
|
||||
width={parsedData().width}
|
||||
height={parsedData().height}
|
||||
fill="none"
|
||||
stroke="#ccc"
|
||||
stroke-width="0.5"
|
||||
|
|
@ -298,6 +206,7 @@ export function PltPreview(props: PltPreviewProps) {
|
|||
</For>
|
||||
</svg>
|
||||
</div>
|
||||
</Show>
|
||||
|
||||
{/* 图例说明 */}
|
||||
<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">
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@ export function PrintPreview(props: PrintPreviewProps) {
|
|||
const { store } = props;
|
||||
const { getA4Size, pages, cropMarks } = usePageLayout(store);
|
||||
const { exportToPDF } = usePDFExport(store, props.onClose);
|
||||
const { generatePltData, downloadPltFile } = usePlotterExport(store);
|
||||
const { generatePltData } = usePlotterExport(store);
|
||||
|
||||
const [showPltPreview, setShowPltPreview] = createSignal(false);
|
||||
const [pltCode, setPltCode] = createSignal('');
|
||||
|
|
@ -60,7 +60,7 @@ export function PrintPreview(props: PrintPreviewProps) {
|
|||
};
|
||||
|
||||
return (
|
||||
<Show when={!showPltPreview()} fallback={<PltPreview pltCode={pltCode()} cardWidth={store.state.dimensions?.cardWidth || 56} cardHeight={store.state.dimensions?.cardHeight || 88} shape={store.state.shape} bleed={store.state.bleed || 1} cornerRadius={store.state.cornerRadius ?? 3} orientation={store.state.printOrientation || 'landscape'} onClose={handleClosePltPreview} />}>
|
||||
<Show when={!showPltPreview()} fallback={<PltPreview pltCode={pltCode()} onClose={handleClosePltPreview} />}>
|
||||
<div class="fixed inset-0 bg-black/50 z-50 overflow-auto">
|
||||
<div class="min-h-screen py-20 px-4">
|
||||
<PrintPreviewHeader
|
||||
|
|
|
|||
Loading…
Reference in New Issue