ttrpg-tools/src/components/md-deck/hooks/usePlotterExport.ts

188 lines
5.0 KiB
TypeScript
Raw Normal View History

2026-03-14 16:20:55 +08:00
import type { DeckStore } from './deckStore';
import type { PageData } from './usePDFExport';
import type { CardShape } from '../types';
import { pts2plotter } from '../../../plotcutter';
2026-03-15 00:52:00 +08:00
export interface CardPathData {
points: [number, number][];
centerX: number;
centerY: number;
}
export interface PltExportData {
paths: CardPathData[];
plotterCode: string;
a4Width: number;
a4Height: number;
}
2026-03-14 16:20:55 +08:00
export interface UsePlotterExportReturn {
2026-03-15 00:52:00 +08:00
generatePltData: (pages: PageData[]) => PltExportData | null;
downloadPltFile: (plotterCode: string) => void;
2026-03-14 16:20:55 +08:00
exportToPlt: (pages: PageData[]) => void;
}
/**
* mm
2026-03-15 00:52:00 +08:00
* @param shape
* @param width
* @param height
2026-03-14 16:20:55 +08:00
*/
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;
}
2026-03-15 00:52:00 +08:00
/**
*
*/
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
};
}
2026-03-14 16:20:55 +08:00
/**
* PLT hook - HPGL
*/
export function usePlotterExport(store: DeckStore): UsePlotterExportReturn {
2026-03-15 00:52:00 +08:00
const bleed = () => store.state.bleed || 1;
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;
2026-03-14 16:20:55 +08:00
2026-03-15 00:52:00 +08:00
/**
* PLT
*/
const generatePltData = (pages: PageData[]): PltExportData | null => {
const paths: CardPathData[] = [];
const currentBleed = bleed();
2026-03-14 16:20:55 +08:00
2026-03-15 00:52:00 +08:00
// 计算切割尺寸(排版尺寸减去出血)
const cutWidth = cardWidth() - currentBleed * 2;
const cutHeight = cardHeight() - currentBleed * 2;
2026-03-14 16:20:55 +08:00
for (const page of pages) {
for (const card of page.cards) {
if (card.side !== 'front') continue;
2026-03-15 00:52:00 +08:00
// 获取卡片形状点(相对于卡片原点,使用切割尺寸)
const shapePoints = getCardShapePoints(shape(), cutWidth, cutHeight);
2026-03-14 16:20:55 +08:00
2026-03-15 00:52:00 +08:00
// 转换点到页面坐标:
// - X 轴:卡片位置 + 出血偏移
// - Y 轴翻转SVG Y 向下plotter Y 向上)
2026-03-14 16:20:55 +08:00
const pagePoints = shapePoints.map(([x, y]) => [
2026-03-15 00:52:00 +08:00
card.x + currentBleed + x,
a4Height - (card.y + currentBleed + y)
2026-03-14 16:20:55 +08:00
] as [number, number]);
2026-03-15 00:52:00 +08:00
const center = calculateCenter(pagePoints);
paths.push({
points: pagePoints,
centerX: center.x,
centerY: center.y
});
2026-03-14 16:20:55 +08:00
}
}
2026-03-15 00:52:00 +08:00
if (paths.length === 0) {
return null;
2026-03-14 16:20:55 +08:00
}
2026-03-15 00:52:00 +08:00
const allPaths = paths.map(p => p.points);
2026-03-14 16:20:55 +08:00
const plotterCode = pts2plotter(allPaths, a4Width, a4Height, 1);
2026-03-15 00:52:00 +08:00
return {
paths,
plotterCode,
a4Width,
a4Height
};
};
/**
* PLT
*/
const downloadPltFile = (plotterCode: string) => {
2026-03-14 16:20:55 +08:00
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);
};
2026-03-15 00:52:00 +08:00
/**
* PLT
*/
const exportToPlt = (pages: PageData[]) => {
const data = generatePltData(pages);
if (!data) {
alert('没有可导出的卡片');
return;
}
downloadPltFile(data.plotterCode);
};
return { generatePltData, downloadPltFile, exportToPlt };
2026-03-14 16:20:55 +08:00
}