Compare commits
No commits in common. "7aba5d0c81e335e23b86152af64b69ce7e1957f1" and "0ed95291ba19103065c3c2a91fcc78b58ec424d2" have entirely different histories.
7aba5d0c81
...
0ed95291ba
|
|
@ -1,14 +1,12 @@
|
||||||
import { Component, createSignal, createEffect, onCleanup, Show, createResource, createMemo } from 'solid-js';
|
import { Component, createSignal, createEffect, onCleanup, Show, createResource } from 'solid-js';
|
||||||
import { parseMarkdown } from '../markdown';
|
import { parseMarkdown } from '../markdown';
|
||||||
import { extractSection } from '../data-loader';
|
import { extractSection } from '../data-loader';
|
||||||
import mermaid from 'mermaid';
|
import mermaid from 'mermaid';
|
||||||
import {getIndexedData} from "../data-loader/file-index";
|
import {getIndexedData} from "../data-loader/file-index";
|
||||||
import { resolvePath } from './utils/path';
|
|
||||||
|
|
||||||
export interface ArticleProps {
|
export interface ArticleProps {
|
||||||
src: string;
|
src: string;
|
||||||
section?: string; // 指定要显示的标题(不含 #)
|
section?: string; // 指定要显示的标题(不含 #)
|
||||||
iconPath?: string; // 图标路径前缀,默认为 "./assets",空字符串表示禁用
|
|
||||||
onLoaded?: () => void;
|
onLoaded?: () => void;
|
||||||
onError?: (error: Error) => void;
|
onError?: (error: Error) => void;
|
||||||
class?: string; // 额外的 class 用于样式控制
|
class?: string; // 额外的 class 用于样式控制
|
||||||
|
|
@ -30,12 +28,6 @@ export const Article: Component<ArticleProps> = (props) => {
|
||||||
fetchArticleContent
|
fetchArticleContent
|
||||||
);
|
);
|
||||||
|
|
||||||
// 解析 iconPath,默认为 "./assets",空字符串表示禁用
|
|
||||||
const iconPrefix = createMemo(() => {
|
|
||||||
if (props.iconPath === '') return undefined; // 空字符串禁用图标前缀
|
|
||||||
return resolvePath(props.src, props.iconPath ?? "./assets");
|
|
||||||
});
|
|
||||||
|
|
||||||
createEffect(() => {
|
createEffect(() => {
|
||||||
const data = content();
|
const data = content();
|
||||||
if (data) {
|
if (data) {
|
||||||
|
|
@ -58,7 +50,7 @@ export const Article: Component<ArticleProps> = (props) => {
|
||||||
<div class="text-red-500">加载失败:{content.error?.message}</div>
|
<div class="text-red-500">加载失败:{content.error?.message}</div>
|
||||||
</Show>
|
</Show>
|
||||||
<Show when={!content.loading && !content.error && content()}>
|
<Show when={!content.loading && !content.error && content()}>
|
||||||
<div class="relative" innerHTML={parseMarkdown(content()!, iconPrefix())} />
|
<div class="relative" innerHTML={parseMarkdown(content()!)} />
|
||||||
</Show>
|
</Show>
|
||||||
</article>
|
</article>
|
||||||
);
|
);
|
||||||
|
|
|
||||||
|
|
@ -26,11 +26,11 @@ export function CardPreview(props: CardPreviewProps) {
|
||||||
let cardRef: HTMLDivElement | undefined;
|
let cardRef: HTMLDivElement | undefined;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div class="flex justify-center drop-shadow">
|
<div class="flex justify-center">
|
||||||
<Show when={store.state.activeTab < store.state.cards.length}>
|
<Show when={store.state.activeTab < store.state.cards.length}>
|
||||||
<div
|
<div
|
||||||
ref={cardRef}
|
ref={cardRef}
|
||||||
class="relative bg-white border border-gray-300 overflow-hidden"
|
class="relative bg-white border border-gray-300 shadow-lg overflow-hidden"
|
||||||
classList={{ 'select-none': store.state.isEditing }}
|
classList={{ 'select-none': store.state.isEditing }}
|
||||||
style={{
|
style={{
|
||||||
width: `${store.state.dimensions?.cardWidth}mm`,
|
width: `${store.state.dimensions?.cardWidth}mm`,
|
||||||
|
|
|
||||||
|
|
@ -1,229 +0,0 @@
|
||||||
import { createSignal, For, Show, createMemo } from 'solid-js';
|
|
||||||
import { parsePlt, extractCutPaths } from '../../plotcutter/parser';
|
|
||||||
import { generateTravelPaths, travelPathsToSvg } from '../../plotcutter/layout';
|
|
||||||
import type { CardPath } from '../../plotcutter/types';
|
|
||||||
import { calculateCenter, contourToSvgPath } from '../../plotcutter/contour';
|
|
||||||
|
|
||||||
export interface PltPreviewProps {
|
|
||||||
/** PLT 文件内容 */
|
|
||||||
pltCode: string;
|
|
||||||
/** 关闭回调 */
|
|
||||||
onClose: () => void;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 从 PLT 代码解析并生成卡片路径数据
|
|
||||||
*/
|
|
||||||
function parsePltToCardPaths(pltCode: string): {
|
|
||||||
cutPaths: [number, number][][];
|
|
||||||
cardPaths: CardPath[];
|
|
||||||
width: number;
|
|
||||||
height: number;
|
|
||||||
} {
|
|
||||||
const parsed = parsePlt(pltCode);
|
|
||||||
const cutPaths = extractCutPaths(parsed, 5); // 5mm 阈值
|
|
||||||
|
|
||||||
// 将解析的路径转换为 CardPath 格式用于显示
|
|
||||||
const cardPaths: CardPath[] = cutPaths.map((points, index) => {
|
|
||||||
const center = calculateCenter(points);
|
|
||||||
const pathD = contourToSvgPath(points);
|
|
||||||
const startPoint = points[0];
|
|
||||||
const endPoint = points[points.length - 1];
|
|
||||||
|
|
||||||
return {
|
|
||||||
pageIndex: 0,
|
|
||||||
cardIndex: index,
|
|
||||||
points,
|
|
||||||
centerX: center.x,
|
|
||||||
centerY: center.y,
|
|
||||||
pathD,
|
|
||||||
startPoint,
|
|
||||||
endPoint
|
|
||||||
};
|
|
||||||
});
|
|
||||||
|
|
||||||
return {
|
|
||||||
cutPaths,
|
|
||||||
cardPaths,
|
|
||||||
width: parsed.width || 0,
|
|
||||||
height: parsed.height || 0
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* PLT 预览组件 - 基于 PLT 文本解析显示切割路径预览
|
|
||||||
*
|
|
||||||
* 所有显示参数(尺寸、路径等)都从 PLT 文本解析获取。
|
|
||||||
*/
|
|
||||||
export function PltPreview(props: PltPreviewProps) {
|
|
||||||
// 解析传入的 PLT 代码
|
|
||||||
const parsedData = createMemo(() => {
|
|
||||||
if (!props.pltCode) {
|
|
||||||
return { cutPaths: [] as [number, number][][], cardPaths: [] as CardPath[], width: 0, height: 0 };
|
|
||||||
}
|
|
||||||
return parsePltToCardPaths(props.pltCode);
|
|
||||||
});
|
|
||||||
|
|
||||||
// 生成空走路径
|
|
||||||
const travelPathD = createMemo(() => {
|
|
||||||
const cardPaths = parsedData().cardPaths;
|
|
||||||
const height = parsedData().height;
|
|
||||||
if (cardPaths.length === 0) return '';
|
|
||||||
const travelPaths = generateTravelPaths(cardPaths, height);
|
|
||||||
return travelPathsToSvg(travelPaths);
|
|
||||||
});
|
|
||||||
|
|
||||||
const handleDownload = () => {
|
|
||||||
if (!props.pltCode) {
|
|
||||||
alert('没有可导出的卡片');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
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-plt-${new Date().toISOString().slice(0, 19).replace(/:/g, '-')}.plt`;
|
|
||||||
document.body.appendChild(link);
|
|
||||||
link.click();
|
|
||||||
document.body.removeChild(link);
|
|
||||||
URL.revokeObjectURL(url);
|
|
||||||
};
|
|
||||||
|
|
||||||
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 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"
|
|
||||||
disabled={parsedData().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>
|
|
||||||
|
|
||||||
{/* 预览区域 */}
|
|
||||||
<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 ${parsedData().width} ${parsedData().height}`}
|
|
||||||
style={{
|
|
||||||
width: `${Math.min(parsedData().width, 800)}mm`,
|
|
||||||
height: `${(parsedData().height / parsedData().width) * Math.min(parsedData().width, 800)}mm`
|
|
||||||
}}
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
>
|
|
||||||
{/* 边框 */}
|
|
||||||
<rect
|
|
||||||
x="0"
|
|
||||||
y="0"
|
|
||||||
width={parsedData().width}
|
|
||||||
height={parsedData().height}
|
|
||||||
fill="none"
|
|
||||||
stroke="#ccc"
|
|
||||||
stroke-width="0.5"
|
|
||||||
/>
|
|
||||||
|
|
||||||
{/* 空走路径(虚线) */}
|
|
||||||
<Show when={travelPathD()}>
|
|
||||||
<path
|
|
||||||
d={travelPathD()}
|
|
||||||
fill="none"
|
|
||||||
stroke="#999"
|
|
||||||
stroke-width="0.2"
|
|
||||||
stroke-dasharray="2 2"
|
|
||||||
/>
|
|
||||||
</Show>
|
|
||||||
|
|
||||||
{/* 切割路径 */}
|
|
||||||
<For each={parsedData().cardPaths}>
|
|
||||||
{(path) => {
|
|
||||||
return (
|
|
||||||
<g>
|
|
||||||
{/* 切割路径 */}
|
|
||||||
<path
|
|
||||||
d={path.pathD}
|
|
||||||
fill="none"
|
|
||||||
stroke="#3b82f6"
|
|
||||||
stroke-width="0.3"
|
|
||||||
/>
|
|
||||||
|
|
||||||
{/* 动画小球 */}
|
|
||||||
<circle
|
|
||||||
r="0.8"
|
|
||||||
fill="#ef4444"
|
|
||||||
>
|
|
||||||
<animateMotion dur="4s" repeatCount="indefinite" path={path.pathD}>
|
|
||||||
</animateMotion>
|
|
||||||
</circle>
|
|
||||||
|
|
||||||
{/* 序号标签 */}
|
|
||||||
<g transform={`translate(${path.centerX}, ${path.centerY})`}>
|
|
||||||
<circle
|
|
||||||
r="2"
|
|
||||||
fill="white"
|
|
||||||
stroke="#3b82f6"
|
|
||||||
stroke-width="0.1"
|
|
||||||
/>
|
|
||||||
<text
|
|
||||||
text-anchor="middle"
|
|
||||||
dominant-baseline="middle"
|
|
||||||
font-size="1.5"
|
|
||||||
fill="#3b82f6"
|
|
||||||
font-weight="bold"
|
|
||||||
>
|
|
||||||
{path.cardIndex + 1}
|
|
||||||
</text>
|
|
||||||
</g>
|
|
||||||
</g>
|
|
||||||
);
|
|
||||||
}}
|
|
||||||
</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">
|
|
||||||
<div class="flex items-center gap-2">
|
|
||||||
<div class="w-6 h-0.5" style={{ "border-bottom": "2px dashed #999" }}></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 solid #3b82f6" }}></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>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
@ -1,4 +1,4 @@
|
||||||
import { createSignal, For, Show } from 'solid-js';
|
import { For, Show } from 'solid-js';
|
||||||
import type { DeckStore } from './hooks/deckStore';
|
import type { DeckStore } from './hooks/deckStore';
|
||||||
import { usePageLayout } from './hooks/usePageLayout';
|
import { usePageLayout } from './hooks/usePageLayout';
|
||||||
import { usePDFExport, type ExportOptions } from './hooks/usePDFExport';
|
import { usePDFExport, type ExportOptions } from './hooks/usePDFExport';
|
||||||
|
|
@ -7,7 +7,6 @@ import { getShapeSvgClipPath } from './hooks/shape-styles';
|
||||||
import { PrintPreviewHeader } from './PrintPreviewHeader';
|
import { PrintPreviewHeader } from './PrintPreviewHeader';
|
||||||
import { PrintPreviewFooter } from './PrintPreviewFooter';
|
import { PrintPreviewFooter } from './PrintPreviewFooter';
|
||||||
import { CardLayer } from './CardLayer';
|
import { CardLayer } from './CardLayer';
|
||||||
import { PltPreview } from './PltPreview';
|
|
||||||
|
|
||||||
export interface PrintPreviewProps {
|
export interface PrintPreviewProps {
|
||||||
store: DeckStore;
|
store: DeckStore;
|
||||||
|
|
@ -22,10 +21,7 @@ export function PrintPreview(props: PrintPreviewProps) {
|
||||||
const { store } = props;
|
const { store } = props;
|
||||||
const { getA4Size, pages, cropMarks } = usePageLayout(store);
|
const { getA4Size, pages, cropMarks } = usePageLayout(store);
|
||||||
const { exportToPDF } = usePDFExport(store, props.onClose);
|
const { exportToPDF } = usePDFExport(store, props.onClose);
|
||||||
const { generatePltData } = usePlotterExport(store);
|
const { exportToPlt } = usePlotterExport(store);
|
||||||
|
|
||||||
const [showPltPreview, setShowPltPreview] = createSignal(false);
|
|
||||||
const [pltCode, setPltCode] = createSignal('');
|
|
||||||
|
|
||||||
const frontVisibleLayers = () => store.state.frontLayerConfigs.filter((l) => l.visible);
|
const frontVisibleLayers = () => store.state.frontLayerConfigs.filter((l) => l.visible);
|
||||||
const backVisibleLayers = () => store.state.backLayerConfigs.filter((l) => l.visible);
|
const backVisibleLayers = () => store.state.backLayerConfigs.filter((l) => l.visible);
|
||||||
|
|
@ -45,31 +41,20 @@ export function PrintPreview(props: PrintPreviewProps) {
|
||||||
await exportToPDF(pages(), cropMarks(), options);
|
await exportToPDF(pages(), cropMarks(), options);
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleOpenPltPreview = () => {
|
const handleExportPlt = () => {
|
||||||
const data = generatePltData();
|
exportToPlt(pages());
|
||||||
if (data) {
|
|
||||||
setPltCode(data.pltCode);
|
|
||||||
setShowPltPreview(true);
|
|
||||||
} else {
|
|
||||||
alert('没有可预览的卡片');
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleClosePltPreview = () => {
|
|
||||||
setShowPltPreview(false);
|
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Show when={!showPltPreview()} fallback={<PltPreview pltCode={pltCode()} onClose={handleClosePltPreview} />}>
|
<div class="fixed inset-0 bg-black/50 z-50 overflow-auto">
|
||||||
<div class="fixed inset-0 bg-black/50 z-50 overflow-auto">
|
<div class="min-h-screen py-20 px-4">
|
||||||
<div class="min-h-screen py-20 px-4">
|
<PrintPreviewHeader
|
||||||
<PrintPreviewHeader
|
store={store}
|
||||||
store={store}
|
pageCount={pages().length}
|
||||||
pageCount={pages().length}
|
onExport={handleExport}
|
||||||
onExport={handleExport}
|
onExportPlt={handleExportPlt}
|
||||||
onOpenPltPreview={handleOpenPltPreview}
|
onClose={props.onClose}
|
||||||
onClose={props.onClose}
|
/>
|
||||||
/>
|
|
||||||
|
|
||||||
<PrintPreviewFooter store={store} />
|
<PrintPreviewFooter store={store} />
|
||||||
|
|
||||||
|
|
@ -196,6 +181,5 @@ export function PrintPreview(props: PrintPreviewProps) {
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</Show>
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -4,7 +4,7 @@ export interface PrintPreviewHeaderProps {
|
||||||
store: DeckStore;
|
store: DeckStore;
|
||||||
pageCount: number;
|
pageCount: number;
|
||||||
onExport: () => void;
|
onExport: () => void;
|
||||||
onOpenPltPreview: () => void;
|
onExportPlt: () => void;
|
||||||
onClose: () => void;
|
onClose: () => void;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -88,11 +88,11 @@ export function PrintPreviewHeader(props: PrintPreviewHeaderProps) {
|
||||||
</div>
|
</div>
|
||||||
<div class="flex gap-2">
|
<div class="flex gap-2">
|
||||||
<button
|
<button
|
||||||
onClick={props.onOpenPltPreview}
|
onClick={props.onExportPlt}
|
||||||
class="bg-green-600 hover:bg-green-700 text-white px-4 py-1.5 rounded text-sm font-medium cursor-pointer flex items-center gap-2"
|
class="bg-green-600 hover:bg-green-700 text-white px-4 py-1.5 rounded text-sm font-medium cursor-pointer flex items-center gap-2"
|
||||||
>
|
>
|
||||||
<span>📐</span>
|
<span>📐</span>
|
||||||
<span>PLT 预览</span>
|
<span>导出 PLT</span>
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
onClick={props.onExport}
|
onClick={props.onExport}
|
||||||
|
|
|
||||||
|
|
@ -13,8 +13,7 @@ export const DECK_DEFAULTS = {
|
||||||
GRID_W: 5,
|
GRID_W: 5,
|
||||||
GRID_H: 8,
|
GRID_H: 8,
|
||||||
BLEED: 1,
|
BLEED: 1,
|
||||||
PADDING: 2,
|
PADDING: 2
|
||||||
CORNER_RADIUS: 3
|
|
||||||
} as const;
|
} as const;
|
||||||
|
|
||||||
export interface DeckState {
|
export interface DeckState {
|
||||||
|
|
@ -25,7 +24,6 @@ export interface DeckState {
|
||||||
gridH: number;
|
gridH: number;
|
||||||
bleed: number;
|
bleed: number;
|
||||||
padding: number;
|
padding: number;
|
||||||
cornerRadius: number;
|
|
||||||
shape: CardShape;
|
shape: CardShape;
|
||||||
fixed: boolean;
|
fixed: boolean;
|
||||||
src: string;
|
src: string;
|
||||||
|
|
@ -78,7 +76,6 @@ export interface DeckActions {
|
||||||
setGridH: (grid: number) => void;
|
setGridH: (grid: number) => void;
|
||||||
setBleed: (bleed: number) => void;
|
setBleed: (bleed: number) => void;
|
||||||
setPadding: (padding: number) => void;
|
setPadding: (padding: number) => void;
|
||||||
setCornerRadius: (cornerRadius: number) => void;
|
|
||||||
setShape: (shape: CardShape) => void;
|
setShape: (shape: CardShape) => void;
|
||||||
|
|
||||||
// 数据设置
|
// 数据设置
|
||||||
|
|
@ -149,7 +146,6 @@ export function createDeckStore(
|
||||||
gridH: DECK_DEFAULTS.GRID_H,
|
gridH: DECK_DEFAULTS.GRID_H,
|
||||||
bleed: DECK_DEFAULTS.BLEED,
|
bleed: DECK_DEFAULTS.BLEED,
|
||||||
padding: DECK_DEFAULTS.PADDING,
|
padding: DECK_DEFAULTS.PADDING,
|
||||||
cornerRadius: DECK_DEFAULTS.CORNER_RADIUS,
|
|
||||||
shape: 'rectangle',
|
shape: 'rectangle',
|
||||||
fixed: false,
|
fixed: false,
|
||||||
src: initialSrc,
|
src: initialSrc,
|
||||||
|
|
@ -213,9 +209,6 @@ export function createDeckStore(
|
||||||
setState({ padding });
|
setState({ padding });
|
||||||
updateDimensions();
|
updateDimensions();
|
||||||
};
|
};
|
||||||
const setCornerRadius = (cornerRadius: number) => {
|
|
||||||
setState({ cornerRadius });
|
|
||||||
};
|
|
||||||
const setShape = (shape: CardShape) => {
|
const setShape = (shape: CardShape) => {
|
||||||
setState({ shape });
|
setState({ shape });
|
||||||
};
|
};
|
||||||
|
|
@ -384,7 +377,6 @@ export function createDeckStore(
|
||||||
setGridH,
|
setGridH,
|
||||||
setBleed,
|
setBleed,
|
||||||
setPadding,
|
setPadding,
|
||||||
setCornerRadius,
|
|
||||||
setShape,
|
setShape,
|
||||||
setCards,
|
setCards,
|
||||||
setActiveTab,
|
setActiveTab,
|
||||||
|
|
|
||||||
|
|
@ -1,121 +1,123 @@
|
||||||
import type { DeckStore } from './deckStore';
|
import type { DeckStore } from './deckStore';
|
||||||
import { calculateSinglePageLayout, generateTravelPaths } from '../../../plotcutter/layout';
|
import type { PageData } from './usePDFExport';
|
||||||
import { pts2plotter } from '../../../plotcutter/plotter';
|
import type { CardShape } from '../types';
|
||||||
|
import { pts2plotter } from '../../../plotcutter';
|
||||||
export interface PltExportData {
|
|
||||||
/** 单页满排时的 PLT 代码 */
|
|
||||||
pltCode: string;
|
|
||||||
/** 排版区域宽度 (mm) */
|
|
||||||
frameWidth: number;
|
|
||||||
/** 排版区域高度 (mm) */
|
|
||||||
frameHeight: number;
|
|
||||||
/** 每页卡片数 */
|
|
||||||
cardsPerPage: number;
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface UsePlotterExportReturn {
|
export interface UsePlotterExportReturn {
|
||||||
/** 生成单页满排时的 PLT 数据 */
|
exportToPlt: (pages: PageData[]) => void;
|
||||||
generatePltData: () => PltExportData | null;
|
|
||||||
/** 下载 PLT 文件 */
|
|
||||||
downloadPltFile: (pltCode: string) => void;
|
|
||||||
/** 直接导出 PLT(打开下载) */
|
|
||||||
exportToPlt: () => void;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* PLT 导出 hook - 生成单页满排时的 HPGL 格式文件
|
* 根据形状生成卡片轮廓点(单位:mm,相对于卡片左下角)
|
||||||
*
|
*/
|
||||||
* 刀路只关心单页排满的情况,不考虑实际牌组的张数。
|
function getCardShapePoints(
|
||||||
* PLT 坐标系统以 frameBoundsWithMargin 左上角为原点 (0,0)。
|
shape: CardShape,
|
||||||
|
width: number,
|
||||||
|
height: number
|
||||||
|
): [number, number][] {
|
||||||
|
const points: [number, number][] = [];
|
||||||
|
|
||||||
|
switch (shape) {
|
||||||
|
case 'circle': {
|
||||||
|
// 圆形:生成 36 个点近似圆
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* PLT 导出 hook - 生成 HPGL 格式文件并下载
|
||||||
*/
|
*/
|
||||||
export function usePlotterExport(store: DeckStore): UsePlotterExportReturn {
|
export function usePlotterExport(store: DeckStore): UsePlotterExportReturn {
|
||||||
const bleed = () => store.state.bleed || 1;
|
const exportToPlt = (pages: PageData[]) => {
|
||||||
const cornerRadius = () => store.state.cornerRadius ?? 3;
|
const cardWidth = store.state.dimensions?.cardWidth || 56;
|
||||||
const cardWidth = () => store.state.dimensions?.cardWidth || 56;
|
const cardHeight = store.state.dimensions?.cardHeight || 88;
|
||||||
const cardHeight = () => store.state.dimensions?.cardHeight || 88;
|
const shape = store.state.shape;
|
||||||
const shape = () => store.state.shape;
|
|
||||||
const orientation = () => store.state.printOrientation || 'landscape';
|
|
||||||
|
|
||||||
/**
|
// 计算所有页面的总尺寸
|
||||||
* 生成单页满排时的 PLT 数据
|
const a4Width = 297; // 横向 A4
|
||||||
*/
|
const a4Height = 210;
|
||||||
const generatePltData = (): PltExportData | null => {
|
|
||||||
const layout = calculateSinglePageLayout({
|
|
||||||
cardWidth: cardWidth(),
|
|
||||||
cardHeight: cardHeight(),
|
|
||||||
shape: shape(),
|
|
||||||
bleed: bleed(),
|
|
||||||
cornerRadius: cornerRadius(),
|
|
||||||
orientation: orientation()
|
|
||||||
});
|
|
||||||
|
|
||||||
if (layout.cardPaths.length === 0) {
|
// 收集所有卡片的轮廓点
|
||||||
return null;
|
const allPaths: [number, number][][] = [];
|
||||||
|
|
||||||
|
for (const page of pages) {
|
||||||
|
for (const card of page.cards) {
|
||||||
|
// 只导出正面
|
||||||
|
if (card.side !== 'front') continue;
|
||||||
|
|
||||||
|
// 获取卡片形状点(相对于卡片原点)
|
||||||
|
const shapePoints = getCardShapePoints(shape, cardWidth, cardHeight);
|
||||||
|
|
||||||
|
// 转换点到页面坐标(Y 轴翻转:SVG Y 向下,plotter Y 向上)
|
||||||
|
const pagePoints = shapePoints.map(([x, y]) => [
|
||||||
|
card.x + x,
|
||||||
|
a4Height - (card.y + y)
|
||||||
|
] as [number, number]);
|
||||||
|
|
||||||
|
allPaths.push(pagePoints);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// 使用 frameBoundsWithMargin 作为 PLT 的坐标系统
|
if (allPaths.length === 0) {
|
||||||
const frameBounds = layout.frameBoundsWithMargin;
|
alert('没有可导出的卡片');
|
||||||
const pltWidth = frameBounds.width;
|
return;
|
||||||
const pltHeight = frameBounds.height;
|
}
|
||||||
|
|
||||||
// 将卡片路径转换为相对于 frameBoundsWithMargin 的坐标
|
// 生成 HPGL 指令
|
||||||
// 原点在 frameBoundsWithMargin 的左上角
|
const plotterCode = pts2plotter(allPaths, a4Width, a4Height, 1);
|
||||||
const relativePaths = layout.cardPaths.map(cardPath => {
|
|
||||||
const relativePoints = cardPath.points.map(([x, y]) => {
|
|
||||||
// 转换为相对于 frameBounds 左上角的坐标
|
|
||||||
const relativeX = x - frameBounds.x;
|
|
||||||
const relativeY = y - frameBounds.y;
|
|
||||||
// 翻转 Y 轴(plotter 坐标 Y 向上,SVG 坐标 Y 向下)
|
|
||||||
// 在 frameBounds 坐标系中,原点在左上,Y 向下为正
|
|
||||||
// 在 plotter 坐标系中,原点在左下,Y 向上为正
|
|
||||||
// 所以 plotterY = pltHeight - relativeY
|
|
||||||
return [relativeX, pltHeight - relativeY] as [number, number];
|
|
||||||
});
|
|
||||||
return relativePoints;
|
|
||||||
});
|
|
||||||
|
|
||||||
// 起点和终点都在 frameBoundsWithMargin 的左上角 (0, pltHeight)
|
// 创建 Blob 并下载
|
||||||
// 在 plotter 坐标系中,左上角是 (0, height)
|
const blob = new Blob([plotterCode], { type: 'application/vnd.hp-HPGL' });
|
||||||
const startPoint: [number, number] = [0, pltHeight];
|
|
||||||
const endPoint: [number, number] = [0, pltHeight];
|
|
||||||
|
|
||||||
// 生成 HPGL 代码
|
|
||||||
const plotterCode = pts2plotter(relativePaths, pltWidth, pltHeight, 1, startPoint, endPoint);
|
|
||||||
|
|
||||||
return {
|
|
||||||
pltCode: plotterCode,
|
|
||||||
frameWidth: pltWidth,
|
|
||||||
frameHeight: pltHeight,
|
|
||||||
cardsPerPage: layout.cardsPerPage
|
|
||||||
};
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 下载 PLT 文件
|
|
||||||
*/
|
|
||||||
const downloadPltFile = (pltCode: string) => {
|
|
||||||
const blob = new Blob([pltCode], { type: 'application/vnd.hp-HPGL' });
|
|
||||||
const url = URL.createObjectURL(blob);
|
const url = URL.createObjectURL(blob);
|
||||||
const link = document.createElement('a');
|
const link = document.createElement('a');
|
||||||
link.href = url;
|
link.href = url;
|
||||||
link.download = `deck-plt-${new Date().toISOString().slice(0, 19).replace(/:/g, '-')}.plt`;
|
link.download = `deck-export-${new Date().toISOString().slice(0, 19).replace(/:/g, '-')}.plt`;
|
||||||
document.body.appendChild(link);
|
document.body.appendChild(link);
|
||||||
link.click();
|
link.click();
|
||||||
document.body.removeChild(link);
|
document.body.removeChild(link);
|
||||||
URL.revokeObjectURL(url);
|
URL.revokeObjectURL(url);
|
||||||
};
|
};
|
||||||
|
|
||||||
/**
|
return { exportToPlt };
|
||||||
* 直接导出 PLT(打开下载)
|
|
||||||
*/
|
|
||||||
const exportToPlt = () => {
|
|
||||||
const data = generatePltData();
|
|
||||||
if (!data) {
|
|
||||||
alert('没有可导出的卡片');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
downloadPltFile(data.pltCode);
|
|
||||||
};
|
|
||||||
|
|
||||||
return { generatePltData, downloadPltFile, exportToPlt };
|
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -4,7 +4,7 @@ export interface CardData {
|
||||||
|
|
||||||
export type CardSide = 'front' | 'back';
|
export type CardSide = 'front' | 'back';
|
||||||
|
|
||||||
export type { CardShape } from '../../plotcutter/contour';
|
export type CardShape = 'rectangle' | 'circle' | 'triangle' | 'hexagon';
|
||||||
|
|
||||||
export interface Layer {
|
export interface Layer {
|
||||||
prop: string;
|
prop: string;
|
||||||
|
|
|
||||||
|
|
@ -1,236 +0,0 @@
|
||||||
import type { CardShape, ContourPoint, ContourBounds } from './types';
|
|
||||||
|
|
||||||
// 重新导出类型以兼容旧导入路径
|
|
||||||
export type { CardShape, ContourPoint, ContourBounds };
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 生成带圆角的矩形轮廓点
|
|
||||||
* @param width 矩形宽度
|
|
||||||
* @param height 矩形高度
|
|
||||||
* @param cornerRadius 圆角半径(mm)
|
|
||||||
* @param segmentsPerCorner 每个圆角的分段数
|
|
||||||
*/
|
|
||||||
export 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;
|
|
||||||
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) - Math.PI/2;
|
|
||||||
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);
|
|
||||||
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/2;
|
|
||||||
points.push([
|
|
||||||
r + r * Math.cos(angle),
|
|
||||||
height - r + r * Math.sin(angle)
|
|
||||||
]);
|
|
||||||
}
|
|
||||||
|
|
||||||
return points;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 根据形状生成卡片轮廓点(单位:mm,相对于卡片左下角)
|
|
||||||
*/
|
|
||||||
export 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;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 计算多边形的中心点
|
|
||||||
*/
|
|
||||||
export 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
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 计算轮廓的边界框
|
|
||||||
*/
|
|
||||||
export function calculateBounds(points: [number, number][]): ContourBounds {
|
|
||||||
if (points.length === 0) {
|
|
||||||
return { minX: 0, minY: 0, maxX: 0, maxY: 0 };
|
|
||||||
}
|
|
||||||
|
|
||||||
let minX = Infinity;
|
|
||||||
let minY = Infinity;
|
|
||||||
let maxX = -Infinity;
|
|
||||||
let maxY = -Infinity;
|
|
||||||
|
|
||||||
for (const [x, y] of points) {
|
|
||||||
minX = Math.min(minX, x);
|
|
||||||
minY = Math.min(minY, y);
|
|
||||||
maxX = Math.max(maxX, x);
|
|
||||||
maxY = Math.max(maxY, y);
|
|
||||||
}
|
|
||||||
|
|
||||||
return { minX, minY, maxX, maxY };
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 根据进度计算点在路径上的位置
|
|
||||||
*/
|
|
||||||
export 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
|
|
||||||
];
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 将轮廓点转换为 SVG path 命令
|
|
||||||
* @param points 轮廓点数组
|
|
||||||
* @param closed 是否闭合路径
|
|
||||||
*/
|
|
||||||
export function contourToSvgPath(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;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 平移轮廓点(添加偏移量)
|
|
||||||
*/
|
|
||||||
export function translateContour(
|
|
||||||
points: [number, number][],
|
|
||||||
offsetX: number,
|
|
||||||
offsetY: number
|
|
||||||
): [number, number][] {
|
|
||||||
return points.map(([x, y]) => [x + offsetX, y + offsetY] as [number, number]);
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 翻转轮廓(用于 SVG 坐标转换,Y 轴翻转)
|
|
||||||
* @param points 轮廓点
|
|
||||||
* @param height 画布高度
|
|
||||||
*/
|
|
||||||
export function flipContourY(
|
|
||||||
points: [number, number][],
|
|
||||||
height: number
|
|
||||||
): [number, number][] {
|
|
||||||
return points.map(([x, y]) => [x, height - y] as [number, number]);
|
|
||||||
}
|
|
||||||
|
|
@ -1,7 +1,3 @@
|
||||||
export * from "./bezier";
|
export * from "./bezier";
|
||||||
export * from "./vector";
|
export * from "./vector";
|
||||||
export * from "./plotter";
|
export * from "./plotter";
|
||||||
export * from "./contour";
|
|
||||||
export * from "./layout";
|
|
||||||
export * from "./types";
|
|
||||||
export * from "./parser";
|
|
||||||
|
|
@ -1,247 +0,0 @@
|
||||||
import { contourToSvgPath } from './contour';
|
|
||||||
import { getCardShapePoints, calculateCenter } from './contour';
|
|
||||||
import type { CardPath, SinglePageLayout, LayoutOptions, CardPosition } from './types';
|
|
||||||
|
|
||||||
const A4_WIDTH_PORTRAIT = 210;
|
|
||||||
const A4_HEIGHT_PORTRAIT = 297;
|
|
||||||
const A4_WIDTH_LANDSCAPE = 297;
|
|
||||||
const A4_HEIGHT_LANDSCAPE = 210;
|
|
||||||
const DEFAULT_PRINT_MARGIN = 5;
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 生成空走路径(抬刀移动路径)
|
|
||||||
* @param cardPaths 卡片切割路径
|
|
||||||
* @param a4Height A4 纸高度(用于坐标转换)
|
|
||||||
*/
|
|
||||||
export function generateTravelPaths(
|
|
||||||
cardPaths: CardPath[],
|
|
||||||
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;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 将旅行路径转换为 SVG path 命令
|
|
||||||
*/
|
|
||||||
export function travelPathsToSvg(travelPaths: [number, number][][]): string {
|
|
||||||
return travelPaths.map(path => contourToSvgPath(path, false)).join(' ');
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 计算所有卡片轮廓的总边界框
|
|
||||||
*/
|
|
||||||
export function calculateTotalBounds(cardPaths: CardPath[]): {
|
|
||||||
minX: number;
|
|
||||||
minY: number;
|
|
||||||
maxX: number;
|
|
||||||
maxY: number;
|
|
||||||
width: number;
|
|
||||||
height: number;
|
|
||||||
} {
|
|
||||||
if (cardPaths.length === 0) {
|
|
||||||
return { minX: 0, minY: 0, maxX: 0, maxY: 0, width: 0, height: 0 };
|
|
||||||
}
|
|
||||||
|
|
||||||
let minX = Infinity;
|
|
||||||
let minY = Infinity;
|
|
||||||
let maxX = -Infinity;
|
|
||||||
let maxY = -Infinity;
|
|
||||||
|
|
||||||
for (const cardPath of cardPaths) {
|
|
||||||
for (const [x, y] of cardPath.points) {
|
|
||||||
minX = Math.min(minX, x);
|
|
||||||
minY = Math.min(minY, y);
|
|
||||||
maxX = Math.max(maxX, x);
|
|
||||||
maxY = Math.max(maxY, y);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return {
|
|
||||||
minX,
|
|
||||||
minY,
|
|
||||||
maxX,
|
|
||||||
maxY,
|
|
||||||
width: maxX - minX,
|
|
||||||
height: maxY - minY
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 计算单页满排时的排版布局和刀路
|
|
||||||
*
|
|
||||||
* 此函数只关心单页排满的情况,不考虑实际牌组的张数。
|
|
||||||
* 返回的布局信息可以用于:
|
|
||||||
* - 预览单页最大容量时的刀路
|
|
||||||
* - 计算排版参数
|
|
||||||
* - 生成 PLT 文件
|
|
||||||
*/
|
|
||||||
export function calculateSinglePageLayout(options: LayoutOptions): SinglePageLayout {
|
|
||||||
const {
|
|
||||||
cardWidth,
|
|
||||||
cardHeight,
|
|
||||||
shape,
|
|
||||||
bleed,
|
|
||||||
cornerRadius,
|
|
||||||
orientation,
|
|
||||||
printMargin = DEFAULT_PRINT_MARGIN
|
|
||||||
} = options;
|
|
||||||
|
|
||||||
// 确定 A4 尺寸
|
|
||||||
const a4Width = orientation === 'landscape' ? A4_WIDTH_LANDSCAPE : A4_WIDTH_PORTRAIT;
|
|
||||||
const a4Height = orientation === 'landscape' ? A4_HEIGHT_LANDSCAPE : A4_HEIGHT_PORTRAIT;
|
|
||||||
|
|
||||||
// 计算可用区域
|
|
||||||
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 cardPositions: CardPosition[] = [];
|
|
||||||
const cardPaths: CardPath[] = [];
|
|
||||||
|
|
||||||
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;
|
|
||||||
|
|
||||||
cardPositions.push({ x, y, cardIndex: i });
|
|
||||||
|
|
||||||
// 生成形状轮廓点(相对于卡片左下角)
|
|
||||||
const shapePoints = getCardShapePoints(shape, cutWidth, cutHeight, cornerRadius);
|
|
||||||
|
|
||||||
// 平移到页面坐标并翻转 Y 轴(SVG Y 向下,plotter Y 向上)
|
|
||||||
const pagePoints = shapePoints.map(([px, py]) => [
|
|
||||||
x + bleed + px,
|
|
||||||
a4Height - (y + bleed + py)
|
|
||||||
] as [number, number]);
|
|
||||||
|
|
||||||
const center = calculateCenter(pagePoints);
|
|
||||||
const pathD = contourToSvgPath(pagePoints);
|
|
||||||
const startPoint = pagePoints[0];
|
|
||||||
const endPoint = pagePoints[pagePoints.length - 1];
|
|
||||||
|
|
||||||
cardPaths.push({
|
|
||||||
pageIndex: 0,
|
|
||||||
cardIndex: i,
|
|
||||||
points: pagePoints,
|
|
||||||
centerX: center.x,
|
|
||||||
centerY: center.y,
|
|
||||||
pathD,
|
|
||||||
startPoint,
|
|
||||||
endPoint
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
return {
|
|
||||||
cardPositions,
|
|
||||||
cardPaths,
|
|
||||||
a4Width,
|
|
||||||
a4Height,
|
|
||||||
cardsPerRow,
|
|
||||||
rowsPerPage,
|
|
||||||
cardsPerPage,
|
|
||||||
frameBounds: {
|
|
||||||
minX: offsetX,
|
|
||||||
minY: offsetY,
|
|
||||||
maxX: offsetX + maxGridWidth,
|
|
||||||
maxY: offsetY + maxGridHeight
|
|
||||||
},
|
|
||||||
frameBoundsWithMargin: {
|
|
||||||
x: offsetX - 1,
|
|
||||||
y: offsetY - 1,
|
|
||||||
width: maxGridWidth + 2,
|
|
||||||
height: maxGridHeight + 2
|
|
||||||
}
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 根据卡片位置生成刀路(用于自定义布局)
|
|
||||||
*/
|
|
||||||
export function generateCardPathsFromPositions(
|
|
||||||
positions: CardPosition[],
|
|
||||||
options: Omit<LayoutOptions, 'orientation' | 'printMargin'> & { a4Height: number }
|
|
||||||
): CardPath[] {
|
|
||||||
const {
|
|
||||||
cardWidth,
|
|
||||||
cardHeight,
|
|
||||||
shape,
|
|
||||||
bleed,
|
|
||||||
cornerRadius,
|
|
||||||
a4Height
|
|
||||||
} = options;
|
|
||||||
|
|
||||||
// 计算切割尺寸
|
|
||||||
const cutWidth = cardWidth - bleed * 2;
|
|
||||||
const cutHeight = cardHeight - bleed * 2;
|
|
||||||
|
|
||||||
const cardPaths: CardPath[] = [];
|
|
||||||
|
|
||||||
for (const pos of positions) {
|
|
||||||
// 生成形状轮廓点(相对于卡片左下角)
|
|
||||||
const shapePoints = getCardShapePoints(shape, cutWidth, cutHeight, cornerRadius);
|
|
||||||
|
|
||||||
// 平移到页面坐标并翻转 Y 轴
|
|
||||||
const pagePoints = shapePoints.map(([px, py]) => [
|
|
||||||
pos.x + bleed + px,
|
|
||||||
a4Height - (pos.y + bleed + py)
|
|
||||||
] as [number, number]);
|
|
||||||
|
|
||||||
const center = calculateCenter(pagePoints);
|
|
||||||
const pathD = contourToSvgPath(pagePoints);
|
|
||||||
const startPoint = pagePoints[0];
|
|
||||||
const endPoint = pagePoints[pagePoints.length - 1];
|
|
||||||
|
|
||||||
cardPaths.push({
|
|
||||||
pageIndex: 0,
|
|
||||||
cardIndex: pos.cardIndex,
|
|
||||||
points: pagePoints,
|
|
||||||
centerX: center.x,
|
|
||||||
centerY: center.y,
|
|
||||||
pathD,
|
|
||||||
startPoint,
|
|
||||||
endPoint
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
return cardPaths;
|
|
||||||
}
|
|
||||||
|
|
@ -1,221 +0,0 @@
|
||||||
import type { ParsedPlt } from './types';
|
|
||||||
|
|
||||||
/**
|
|
||||||
* HPGL 单位转换系数
|
|
||||||
*/
|
|
||||||
const HPGL_UNIT = 0.025; // 1 HPGL unit = 0.025mm
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 解析 HPGL/PLT 代码,提取路径信息
|
|
||||||
*
|
|
||||||
* 支持的命令:
|
|
||||||
* - IN: 初始化
|
|
||||||
* - TB: 定义绘图区域
|
|
||||||
* - CT: 设置切线角度
|
|
||||||
* - SP: 选择画笔
|
|
||||||
* - PU: 抬笔移动
|
|
||||||
* - PD: 下笔绘制
|
|
||||||
* - D: 绘制到指定点(简写)
|
|
||||||
* - U: 抬笔移动到指定点(简写)
|
|
||||||
* - @: 结束命令
|
|
||||||
*/
|
|
||||||
export function parsePlt(pltCode: string): ParsedPlt {
|
|
||||||
const result: ParsedPlt = {
|
|
||||||
paths: [],
|
|
||||||
startPoint: undefined,
|
|
||||||
endPoint: undefined,
|
|
||||||
width: undefined,
|
|
||||||
height: undefined
|
|
||||||
};
|
|
||||||
|
|
||||||
// 解析 TB 命令获取页面尺寸
|
|
||||||
const tbMatch = pltCode.match(/TB(\d+),(\d+),(\d+)/);
|
|
||||||
if (tbMatch) {
|
|
||||||
const width = Number(tbMatch[2]) * HPGL_UNIT;
|
|
||||||
const height = Number(tbMatch[3]) * HPGL_UNIT;
|
|
||||||
result.width = width;
|
|
||||||
result.height = height;
|
|
||||||
}
|
|
||||||
|
|
||||||
// 提取所有下笔绘制的路径
|
|
||||||
// 解析逻辑:跟踪 PU/PD/U/D 命令,收集 PD/D 命令的点
|
|
||||||
const lines = pltCode.split(' ');
|
|
||||||
let currentPath: [number, number][] = [];
|
|
||||||
let isPenDown = false;
|
|
||||||
let currentPosition: [number, number] = [0, 0];
|
|
||||||
|
|
||||||
for (const line of lines) {
|
|
||||||
const trimmed = line.trim();
|
|
||||||
|
|
||||||
// 解析 PU 命令(抬笔移动)
|
|
||||||
const puMatch = trimmed.match(/PU\s*(\d+(?:\.\d+)?),(\d+(?:\.\d+)?)/i);
|
|
||||||
if (puMatch) {
|
|
||||||
if (currentPath.length > 0) {
|
|
||||||
result.paths.push([...currentPath]);
|
|
||||||
currentPath = [];
|
|
||||||
}
|
|
||||||
isPenDown = false;
|
|
||||||
currentPosition = [
|
|
||||||
Number(puMatch[1]) * HPGL_UNIT,
|
|
||||||
Number(puMatch[2]) * HPGL_UNIT
|
|
||||||
];
|
|
||||||
continue;
|
|
||||||
}
|
|
||||||
|
|
||||||
// 解析 PD 命令(下笔绘制)
|
|
||||||
const pdMatch = trimmed.match(/PD\s*(\d+(?:\.\d+)?),(\d+(?:\.\d+)?)/i);
|
|
||||||
if (pdMatch) {
|
|
||||||
const newPoint: [number, number] = [
|
|
||||||
Number(pdMatch[1]) * HPGL_UNIT,
|
|
||||||
Number(pdMatch[2]) * HPGL_UNIT
|
|
||||||
];
|
|
||||||
|
|
||||||
if (!isPenDown) {
|
|
||||||
// 新的路径起点
|
|
||||||
currentPath = [newPoint];
|
|
||||||
isPenDown = true;
|
|
||||||
} else {
|
|
||||||
currentPath.push(newPoint);
|
|
||||||
}
|
|
||||||
currentPosition = newPoint;
|
|
||||||
continue;
|
|
||||||
}
|
|
||||||
|
|
||||||
// 解析 U 命令(抬笔移动,简写)
|
|
||||||
const uMatch = trimmed.match(/U\s*(\d+(?:\.\d+)?),(\d+(?:\.\d+)?)/i);
|
|
||||||
if (uMatch) {
|
|
||||||
if (currentPath.length > 0) {
|
|
||||||
result.paths.push([...currentPath]);
|
|
||||||
currentPath = [];
|
|
||||||
}
|
|
||||||
isPenDown = false;
|
|
||||||
currentPosition = [
|
|
||||||
Number(uMatch[1]) * HPGL_UNIT,
|
|
||||||
Number(uMatch[2]) * HPGL_UNIT
|
|
||||||
];
|
|
||||||
continue;
|
|
||||||
}
|
|
||||||
|
|
||||||
// 解析 D 命令(下笔绘制,简写)
|
|
||||||
const dMatch = trimmed.match(/D\s*(\d+(?:\.\d+)?),(\d+(?:\.\d+)?)/i);
|
|
||||||
if (dMatch) {
|
|
||||||
const newPoint: [number, number] = [
|
|
||||||
Number(dMatch[1]) * HPGL_UNIT,
|
|
||||||
Number(dMatch[2]) * HPGL_UNIT
|
|
||||||
];
|
|
||||||
|
|
||||||
if (!isPenDown) {
|
|
||||||
// 新的路径起点
|
|
||||||
currentPath = [newPoint];
|
|
||||||
isPenDown = true;
|
|
||||||
} else {
|
|
||||||
currentPath.push(newPoint);
|
|
||||||
}
|
|
||||||
currentPosition = newPoint;
|
|
||||||
continue;
|
|
||||||
}
|
|
||||||
|
|
||||||
// 解析 PA 命令(绝对坐标移动)
|
|
||||||
const paMatch = trimmed.match(/PA\s*(\d+(?:\.\d+)?),(\d+(?:\.\d+)?)/i);
|
|
||||||
if (paMatch) {
|
|
||||||
const newPoint: [number, number] = [
|
|
||||||
Number(paMatch[1]) * HPGL_UNIT,
|
|
||||||
Number(paMatch[2]) * HPGL_UNIT
|
|
||||||
];
|
|
||||||
|
|
||||||
if (isPenDown) {
|
|
||||||
currentPath.push(newPoint);
|
|
||||||
} else {
|
|
||||||
if (currentPath.length > 0) {
|
|
||||||
result.paths.push([...currentPath]);
|
|
||||||
currentPath = [];
|
|
||||||
}
|
|
||||||
currentPosition = newPoint;
|
|
||||||
}
|
|
||||||
continue;
|
|
||||||
}
|
|
||||||
|
|
||||||
// 检查结束命令
|
|
||||||
if (trimmed.includes('@')) {
|
|
||||||
if (currentPath.length > 0) {
|
|
||||||
result.paths.push([...currentPath]);
|
|
||||||
currentPath = [];
|
|
||||||
}
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 处理最后一条路径
|
|
||||||
if (currentPath.length > 0) {
|
|
||||||
result.paths.push([...currentPath]);
|
|
||||||
}
|
|
||||||
|
|
||||||
// 设置起点和终点
|
|
||||||
if (result.paths.length > 0) {
|
|
||||||
const firstPath = result.paths[0];
|
|
||||||
const lastPath = result.paths[result.paths.length - 1];
|
|
||||||
|
|
||||||
if (firstPath.length > 0) {
|
|
||||||
result.startPoint = firstPath[0];
|
|
||||||
}
|
|
||||||
if (lastPath.length > 0) {
|
|
||||||
result.endPoint = lastPath[lastPath.length - 1];
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return result;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 从解析的 PLT 数据中提取切割路径(排除空走路径)
|
|
||||||
*
|
|
||||||
* 空走路径特征:
|
|
||||||
* - 路径长度短(通常是直线移动)
|
|
||||||
* - 连接两个切割路径的终点和起点
|
|
||||||
*
|
|
||||||
* @param parsedPlt 解析后的 PLT 数据
|
|
||||||
* @param minCutLength 最小切割路径长度阈值(mm),小于此值的路径被视为空走路径
|
|
||||||
*/
|
|
||||||
export function extractCutPaths(parsedPlt: ParsedPlt, minCutLength: number = 5): [number, number][][] {
|
|
||||||
const allPaths = parsedPlt.paths;
|
|
||||||
const cutPaths: [number, number][][] = [];
|
|
||||||
|
|
||||||
for (const path of allPaths) {
|
|
||||||
if (path.length < 2) continue;
|
|
||||||
|
|
||||||
// 计算路径长度
|
|
||||||
let pathLength = 0;
|
|
||||||
for (let i = 1; i < path.length; i++) {
|
|
||||||
const [x1, y1] = path[i - 1];
|
|
||||||
const [x2, y2] = path[i];
|
|
||||||
const dx = x2 - x1;
|
|
||||||
const dy = y2 - y1;
|
|
||||||
pathLength += Math.sqrt(dx * dx + dy * dy);
|
|
||||||
}
|
|
||||||
|
|
||||||
// 如果路径长度大于阈值,认为是切割路径
|
|
||||||
if (pathLength >= minCutLength) {
|
|
||||||
cutPaths.push(path);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return cutPaths;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 将解析的路径转换为 SVG path 命令
|
|
||||||
*/
|
|
||||||
export function parsedPltToSvg(paths: [number, number][]): string {
|
|
||||||
if (paths.length === 0) return '';
|
|
||||||
|
|
||||||
const [startX, startY] = paths[0];
|
|
||||||
let d = `M ${startX} ${startY}`;
|
|
||||||
|
|
||||||
for (let i = 1; i < paths.length; i++) {
|
|
||||||
const [x, y] = paths[i];
|
|
||||||
d += ` L ${x} ${y}`;
|
|
||||||
}
|
|
||||||
|
|
||||||
d += ' Z';
|
|
||||||
return d;
|
|
||||||
}
|
|
||||||
|
|
@ -1,101 +1,73 @@
|
||||||
import { normalize } from "./normalize";
|
import {normalize} from "./normalize";
|
||||||
|
|
||||||
/**
|
export function pts2plotter(pts: [number, number][][], width: number, height: number, px2mm = 0.1){
|
||||||
* 生成 HPGL 代码,支持指定起点和终点
|
let str = init(width * px2mm, height * px2mm);
|
||||||
* @param pts 路径点数组
|
|
||||||
* @param width 页面宽度(mm)
|
|
||||||
* @param height 页面高度(mm)
|
|
||||||
* @param px2mm 像素到毫米的转换系数
|
|
||||||
* @param startPoint 起点坐标(mm),默认为左上角 [0, height]
|
|
||||||
* @param endPoint 终点坐标(mm),默认为左上角 [0, height]
|
|
||||||
*/
|
|
||||||
export function pts2plotter(
|
|
||||||
pts: [number, number][][],
|
|
||||||
width: number,
|
|
||||||
height: number,
|
|
||||||
px2mm = 0.1,
|
|
||||||
startPoint?: [number, number],
|
|
||||||
endPoint?: [number, number]
|
|
||||||
) {
|
|
||||||
const start = startPoint ?? [0, height];
|
|
||||||
const end = endPoint ?? [0, height];
|
|
||||||
|
|
||||||
let str = init(width * px2mm, height * px2mm);
|
|
||||||
|
|
||||||
// 按 X 轴然后 Y 轴排序路径
|
// sort paths by x(long) then by y(short)
|
||||||
const sorted = pts.slice();
|
const sorted = pts.slice();
|
||||||
sorted.sort(function (a, b) {
|
sorted.sort(function (a, b) {
|
||||||
const [ax, ay] = topleft(a);
|
const [ax,ay] = topleft(a);
|
||||||
const [bx, by] = topleft(b);
|
const [bx,by] = topleft(b);
|
||||||
|
|
||||||
if (ax !== bx) return ax - bx;
|
if (ax !== bx) return ax - bx;
|
||||||
return ay - by;
|
return ay - by;
|
||||||
});
|
});
|
||||||
|
|
||||||
// 从起点到第一个路径
|
let lead = true;
|
||||||
if (sorted.length > 0) {
|
for(const path of sorted){
|
||||||
const firstPath = sorted[0];
|
for (const cmd of poly(normalize(path), height, px2mm, lead)) {
|
||||||
str += ` U${plu(start[0] * px2mm)},${plu((height - start[1]) * px2mm)}`;
|
str += cmd;
|
||||||
str += ` D${plu(firstPath[0][0] * px2mm)},${plu((height - firstPath[0][1]) * px2mm)}`;
|
}
|
||||||
|
lead = false;
|
||||||
// 切割第一个路径
|
|
||||||
for (let i = 1; i < firstPath.length; i++) {
|
|
||||||
const pt = firstPath[i];
|
|
||||||
str += ` D${plu(pt[0] * px2mm)},${plu((height - pt[1]) * px2mm)}`;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// 路径之间移动
|
|
||||||
for (let i = 1; i < sorted.length; i++) {
|
|
||||||
const prevPath = sorted[i - 1];
|
|
||||||
const currPath = sorted[i];
|
|
||||||
|
|
||||||
// 抬刀移动到下一个路径起点
|
|
||||||
str += ` U${plu(currPath[0][0] * px2mm)},${plu((height - currPath[0][1]) * px2mm)}`;
|
|
||||||
// 下刀切割
|
|
||||||
str += ` D${plu(currPath[0][0] * px2mm)},${plu((height - currPath[0][1]) * px2mm)}`;
|
|
||||||
|
|
||||||
for (let j = 1; j < currPath.length; j++) {
|
|
||||||
const pt = currPath[j];
|
|
||||||
str += ` D${plu(pt[0] * px2mm)},${plu((height - pt[1]) * px2mm)}`;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 返回终点
|
str += end();
|
||||||
str += ` U${plu(end[0] * px2mm)},${plu((height - end[1]) * px2mm)}`;
|
|
||||||
str += endCommand();
|
|
||||||
|
|
||||||
return str;
|
return str;
|
||||||
}
|
}
|
||||||
|
|
||||||
// 兼容旧版本(不使用新参数)
|
function topleft(pts: [number, number][]){
|
||||||
export function pts2plotterLegacy(
|
let minx = NaN;
|
||||||
pts: [number, number][][],
|
let miny = NaN;
|
||||||
width: number,
|
for(const pt of pts){
|
||||||
height: number,
|
if (isNaN(minx) || minx > pt[0]) minx = pt[0];
|
||||||
px2mm = 0.1
|
if (isNaN(miny) || miny > pt[1]) miny = pt[1];
|
||||||
) {
|
}
|
||||||
return pts2plotter(pts, width, height, px2mm);
|
return [minx, miny] as [number, number];
|
||||||
}
|
|
||||||
|
|
||||||
function topleft(pts: [number, number][]) {
|
|
||||||
let minx = NaN;
|
|
||||||
let miny = NaN;
|
|
||||||
for (const pt of pts) {
|
|
||||||
if (isNaN(minx) || minx > pt[0]) minx = pt[0];
|
|
||||||
if (isNaN(miny) || miny > pt[1]) miny = pt[1];
|
|
||||||
}
|
|
||||||
return [minx, miny] as [number, number];
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function init(w: number, h: number) {
|
function init(w: number, h: number) {
|
||||||
return ` IN TB26,${plu(w)},${plu(h)} CT1`;
|
return ` IN TB26,${plu(w)},${plu(h)} CT1 U0,0 D0,0 D40,0`;
|
||||||
}
|
}
|
||||||
|
|
||||||
function endCommand() {
|
function end() {
|
||||||
return ' @ @';
|
return ' U0,0 @ @';
|
||||||
|
}
|
||||||
|
|
||||||
|
function* poly(pts: [number, number][], height: number, px2mm: number, lead = false){
|
||||||
|
function cutpt(down: boolean, pt: [number, number]) {
|
||||||
|
return ` ${down ? 'D' : 'U'}${plu(pt[0] * px2mm)},${plu((height - pt[1]) * px2mm)}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (lead) {
|
||||||
|
yield cutpt(false, [0, 0]);
|
||||||
|
yield cutpt(true, [0, 1]);
|
||||||
|
}
|
||||||
|
|
||||||
|
yield cutpt(false, pts[0]);
|
||||||
|
for(const pt of pts){
|
||||||
|
yield cutpt(true, pt);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function sqrlen(x: number, y: number) {
|
||||||
|
return x * x + y * y;
|
||||||
|
}
|
||||||
|
|
||||||
|
function lerp(s: [number, number], e: [number, number], i: number) {
|
||||||
|
return [s[0] + (e[0] - s[0]) * i, s[1] + (e[1] - s[1]) * i] as typeof s;
|
||||||
}
|
}
|
||||||
|
|
||||||
function plu(n: number) {
|
function plu(n: number) {
|
||||||
return Math.round(n / 0.025);
|
return Math.round(n / 0.025);
|
||||||
}
|
}
|
||||||
|
|
@ -1,125 +0,0 @@
|
||||||
/**
|
|
||||||
* 边界框
|
|
||||||
*/
|
|
||||||
export interface Bounds {
|
|
||||||
minX: number;
|
|
||||||
minY: number;
|
|
||||||
maxX: number;
|
|
||||||
maxY: number;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 带边距的边界框(用于裁切标记)
|
|
||||||
*/
|
|
||||||
export interface BoundsWithMargin {
|
|
||||||
x: number;
|
|
||||||
y: number;
|
|
||||||
width: number;
|
|
||||||
height: number;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 卡片形状类型
|
|
||||||
*/
|
|
||||||
export type CardShape = 'rectangle' | 'circle' | 'triangle' | 'hexagon';
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 轮廓点类型
|
|
||||||
*/
|
|
||||||
export interface ContourPoint {
|
|
||||||
x: number;
|
|
||||||
y: number;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 轮廓边界框
|
|
||||||
*/
|
|
||||||
export interface ContourBounds {
|
|
||||||
minX: number;
|
|
||||||
minY: number;
|
|
||||||
maxX: number;
|
|
||||||
maxY: number;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 卡片切割路径
|
|
||||||
*/
|
|
||||||
export interface CardPath {
|
|
||||||
pageIndex: number;
|
|
||||||
cardIndex: number;
|
|
||||||
points: [number, number][];
|
|
||||||
centerX: number;
|
|
||||||
centerY: number;
|
|
||||||
pathD: string;
|
|
||||||
startPoint: [number, number];
|
|
||||||
endPoint: [number, number];
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 单页排版结果
|
|
||||||
*/
|
|
||||||
export interface SinglePageLayout {
|
|
||||||
/** 单页满排时的卡片位置 */
|
|
||||||
cardPositions: CardPosition[];
|
|
||||||
/** 对应的刀路路径 */
|
|
||||||
cardPaths: CardPath[];
|
|
||||||
/** A4 纸宽度 (mm) */
|
|
||||||
a4Width: number;
|
|
||||||
/** A4 纸高度 (mm) */
|
|
||||||
a4Height: number;
|
|
||||||
/** 每行卡片数 */
|
|
||||||
cardsPerRow: number;
|
|
||||||
/** 每页行数 */
|
|
||||||
rowsPerPage: number;
|
|
||||||
/** 每页总卡片数 */
|
|
||||||
cardsPerPage: number;
|
|
||||||
/** 排版区域边界框 */
|
|
||||||
frameBounds: Bounds;
|
|
||||||
/** 带边距的边界框(用于裁切标记) */
|
|
||||||
frameBoundsWithMargin: BoundsWithMargin;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 卡片位置
|
|
||||||
*/
|
|
||||||
export interface CardPosition {
|
|
||||||
x: number;
|
|
||||||
y: number;
|
|
||||||
cardIndex: number;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 排版选项
|
|
||||||
*/
|
|
||||||
export interface LayoutOptions {
|
|
||||||
/** 卡片宽度 (mm) */
|
|
||||||
cardWidth: number;
|
|
||||||
/** 卡片高度 (mm) */
|
|
||||||
cardHeight: number;
|
|
||||||
/** 卡片形状 */
|
|
||||||
shape: CardShape;
|
|
||||||
/** 出血 (mm) */
|
|
||||||
bleed: number;
|
|
||||||
/** 圆角半径 (mm) */
|
|
||||||
cornerRadius: number;
|
|
||||||
/** 打印方向 */
|
|
||||||
orientation: 'portrait' | 'landscape';
|
|
||||||
/** 打印边距 (mm) */
|
|
||||||
printMargin?: number;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* PLT 解析结果
|
|
||||||
*/
|
|
||||||
export interface ParsedPlt {
|
|
||||||
/** 解析出的路径 */
|
|
||||||
paths: [number, number][][];
|
|
||||||
/** 起点坐标 (mm) */
|
|
||||||
startPoint?: [number, number];
|
|
||||||
/** 终点坐标 (mm) */
|
|
||||||
endPoint?: [number, number];
|
|
||||||
/** 页面宽度 (mm) */
|
|
||||||
width?: number;
|
|
||||||
/** 页面高度 (mm) */
|
|
||||||
height?: number;
|
|
||||||
}
|
|
||||||
Loading…
Reference in New Issue