299 lines
8.1 KiB
TypeScript
299 lines
8.1 KiB
TypeScript
import type { DeckStore } from './deckStore';
|
||
import type { PageData } from './usePDFExport';
|
||
import type { CardShape } from '../types';
|
||
import { pts2plotter } from '../../../plotcutter';
|
||
|
||
export interface CardPathData {
|
||
points: [number, number][];
|
||
centerX: number;
|
||
centerY: number;
|
||
startPoint: [number, number];
|
||
endPoint: [number, number];
|
||
}
|
||
|
||
export interface PltExportData {
|
||
paths: CardPathData[];
|
||
travelPaths: [number, number][][];
|
||
plotterCode: string;
|
||
a4Width: number;
|
||
a4Height: number;
|
||
}
|
||
|
||
export interface UsePlotterExportReturn {
|
||
generatePltData: (pages: PageData[]) => PltExportData | null;
|
||
downloadPltFile: (plotterCode: string) => void;
|
||
exportToPlt: (pages: PageData[]) => void;
|
||
}
|
||
|
||
/**
|
||
* 生成带圆角的矩形路径点
|
||
*/
|
||
function getRoundedRectPoints(
|
||
width: number,
|
||
height: number,
|
||
cornerRadius: number,
|
||
segmentsPerCorner: number = 4
|
||
): [number, number][] {
|
||
const points: [number, number][] = [];
|
||
const r = Math.min(cornerRadius, width / 2, height / 2);
|
||
|
||
if (r <= 0) {
|
||
points.push([0, 0]);
|
||
points.push([width, 0]);
|
||
points.push([width, height]);
|
||
points.push([0, height]);
|
||
return points;
|
||
}
|
||
|
||
// 左上角圆角（从顶部开始，顺时针）
|
||
for (let i = 0; i < segmentsPerCorner; i++) {
|
||
const angle = (Math.PI / 2) * (i / segmentsPerCorner) - Math.PI / 2;
|
||
points.push([
|
||
r + r * Math.cos(angle),
|
||
r + r * Math.sin(angle)
|
||
]);
|
||
}
|
||
|
||
// 右上角圆角
|
||
for (let i = 0; i < segmentsPerCorner; i++) {
|
||
const angle = (Math.PI / 2) * (i / segmentsPerCorner);
|
||
points.push([
|
||
width - r + r * Math.cos(angle),
|
||
r + r * Math.sin(angle)
|
||
]);
|
||
}
|
||
|
||
// 右下角圆角
|
||
for (let i = 0; i < segmentsPerCorner; i++) {
|
||
const angle = (Math.PI / 2) * (i / segmentsPerCorner) + Math.PI / 2;
|
||
points.push([
|
||
width - r + r * Math.cos(angle),
|
||
height - r + r * Math.sin(angle)
|
||
]);
|
||
}
|
||
|
||
// 左下角圆角
|
||
for (let i = 0; i < segmentsPerCorner; i++) {
|
||
const angle = (Math.PI / 2) * (i / segmentsPerCorner) + Math.PI;
|
||
points.push([
|
||
r + r * Math.cos(angle),
|
||
height - r + r * Math.sin(angle)
|
||
]);
|
||
}
|
||
|
||
return points;
|
||
}
|
||
|
||
/**
|
||
* 根据形状生成卡片轮廓点（单位：mm，相对于卡片左下角）
|
||
*/
|
||
function getCardShapePoints(
|
||
shape: CardShape,
|
||
width: number,
|
||
height: number,
|
||
cornerRadius: number = 0
|
||
): [number, number][] {
|
||
if (shape === 'rectangle' && cornerRadius > 0) {
|
||
return getRoundedRectPoints(width, height, cornerRadius);
|
||
}
|
||
|
||
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 generateTravelPaths(
|
||
cardPaths: CardPathData[],
|
||
a4Height: number
|
||
): [number, number][][] {
|
||
const travelPaths: [number, number][][] = [];
|
||
|
||
// 起点：左上角 (0, a4Height) - 注意 SVG 坐标 Y 向下，plotter 坐标 Y 向上
|
||
const startPoint: [number, number] = [0, a4Height];
|
||
|
||
if (cardPaths.length === 0) {
|
||
return travelPaths;
|
||
}
|
||
|
||
// 从起点到第一张卡的起点
|
||
travelPaths.push([startPoint, cardPaths[0].startPoint]);
|
||
|
||
// 卡片之间的移动
|
||
for (let i = 0; i < cardPaths.length - 1; i++) {
|
||
const currentEnd = cardPaths[i].endPoint;
|
||
const nextStart = cardPaths[i + 1].startPoint;
|
||
travelPaths.push([currentEnd, nextStart]);
|
||
}
|
||
|
||
// 从最后一张卡返回起点
|
||
travelPaths.push([cardPaths[cardPaths.length - 1].endPoint, startPoint]);
|
||
|
||
return travelPaths;
|
||
}
|
||
|
||
/**
|
||
* PLT 导出 hook - 生成 HPGL 格式文件并下载
|
||
*/
|
||
export function usePlotterExport(store: DeckStore): UsePlotterExportReturn {
|
||
const bleed = () => store.state.bleed || 1;
|
||
const cornerRadius = () => store.state.cornerRadius ?? 3;
|
||
const cardWidth = () => store.state.dimensions?.cardWidth || 56;
|
||
const cardHeight = () => store.state.dimensions?.cardHeight || 88;
|
||
const shape = () => store.state.shape;
|
||
const a4Width = 297; // 横向 A4
|
||
const a4Height = 210;
|
||
|
||
/**
|
||
* 生成 PLT 数据（不下载，用于预览）
|
||
*/
|
||
const generatePltData = (pages: PageData[]): PltExportData | null => {
|
||
const paths: CardPathData[] = [];
|
||
const currentBleed = bleed();
|
||
const currentCornerRadius = cornerRadius();
|
||
|
||
// 计算切割尺寸（排版尺寸减去出血）
|
||
const cutWidth = cardWidth() - currentBleed * 2;
|
||
const cutHeight = cardHeight() - currentBleed * 2;
|
||
|
||
for (const page of pages) {
|
||
for (const card of page.cards) {
|
||
if (card.side !== 'front') continue;
|
||
|
||
// 获取卡片形状点（相对于卡片原点，使用切割尺寸）
|
||
const shapePoints = getCardShapePoints(shape(), cutWidth, cutHeight, currentCornerRadius);
|
||
|
||
// 转换点到页面坐标：
|
||
// - X 轴：卡片位置 + 出血偏移
|
||
// - Y 轴：翻转（SVG Y 向下，plotter Y 向上）
|
||
const pagePoints = shapePoints.map(([x, y]) => [
|
||
card.x + currentBleed + x,
|
||
a4Height - (card.y + currentBleed + y)
|
||
] as [number, number]);
|
||
|
||
const center = calculateCenter(pagePoints);
|
||
const startPoint = pagePoints[0];
|
||
const endPoint = pagePoints[pagePoints.length - 1];
|
||
|
||
paths.push({
|
||
points: pagePoints,
|
||
centerX: center.x,
|
||
centerY: center.y,
|
||
startPoint,
|
||
endPoint
|
||
});
|
||
}
|
||
}
|
||
|
||
if (paths.length === 0) {
|
||
return null;
|
||
}
|
||
|
||
// 生成空走路径
|
||
const travelPaths = generateTravelPaths(paths, a4Height);
|
||
|
||
// 生成 HPGL 代码（包含空走路径，从左上角出发并返回）
|
||
const allPaths = paths.map(p => p.points);
|
||
const startPoint: [number, number] = [0, a4Height]; // 左上角
|
||
const endPoint: [number, number] = [0, a4Height]; // 返回左上角
|
||
const plotterCode = pts2plotter(allPaths, a4Width, a4Height, 1, startPoint, endPoint);
|
||
|
||
return {
|
||
paths,
|
||
travelPaths,
|
||
plotterCode,
|
||
a4Width,
|
||
a4Height
|
||
};
|
||
};
|
||
|
||
/**
|
||
* 下载 PLT 文件
|
||
*/
|
||
const downloadPltFile = (plotterCode: string) => {
|
||
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);
|
||
};
|
||
|
||
/**
|
||
* 直接导出 PLT（兼容旧接口）
|
||
*/
|
||
const exportToPlt = (pages: PageData[]) => {
|
||
const data = generatePltData(pages);
|
||
if (!data) {
|
||
alert('没有可导出的卡片');
|
||
return;
|
||
}
|
||
downloadPltFile(data.plotterCode);
|
||
};
|
||
|
||
return { generatePltData, downloadPltFile, exportToPlt };
|
||
}
|