diff --git a/src/components/md-deck/PltPreview.tsx b/src/components/md-deck/PltPreview.tsx index 902d261..35be583 100644 --- a/src/components/md-deck/PltPreview.tsx +++ b/src/components/md-deck/PltPreview.tsx @@ -1,9 +1,9 @@ -import { createSignal, For, Show, createMemo } from 'solid-js'; -import { Portal } from 'solid-js/web'; -import { parsePlt, extractCutPaths } from '../../plotcutter/parser'; -import { generateTravelPaths, travelPathsToSvg } from '../../plotcutter/layout'; -import type { CardPath } from '../../plotcutter/types'; -import { calculateCenter, contourToSvgPath } from '../../plotcutter/contour'; +import { createSignal, For, Show, createMemo } from "solid-js"; +import { Portal } from "solid-js/web"; +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 文件内容 */ @@ -39,7 +39,7 @@ function parsePltToCardPaths(pltCode: string): { centerY: center.y, pathD, startPoint, - endPoint + endPoint, }; }); @@ -47,20 +47,25 @@ function parsePltToCardPaths(pltCode: string): { cutPaths, cardPaths, width: parsed.width || 0, - height: parsed.height || 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 { + cutPaths: [] as [number, number][][], + cardPaths: [] as CardPath[], + width: 0, + height: 0, + }; } return parsePltToCardPaths(props.pltCode); }); @@ -69,22 +74,22 @@ export function PltPreview(props: PltPreviewProps) { const travelPathD = createMemo(() => { const cardPaths = parsedData().cardPaths; const height = parsedData().height; - if (cardPaths.length === 0) return ''; + if (cardPaths.length === 0) return ""; const travelPaths = generateTravelPaths(cardPaths, height); return travelPathsToSvg(travelPaths); }); const handleDownload = () => { if (!props.pltCode) { - alert('没有可导出的卡片'); + alert("没有可导出的卡片"); return; } - const blob = new Blob([props.pltCode], { 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'); + const link = document.createElement("a"); link.href = url; - link.download = `deck-plt-${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); @@ -97,135 +102,145 @@ export function PltPreview(props: PltPreviewProps) {
{/* 头部控制栏 */}
-

PLT 切割预览

-
- 0}> - - 尺寸:{parsedData().width.toFixed(1)}mm × {parsedData().height.toFixed(1)}mm - - - - - -
-
- - {/* 预览区域 */} - 0 && parsedData().height > 0} - fallback={ -
- 无法解析 PLT 文件尺寸 -
- } - > -
- - {/* 边框 */} - - - {/* 空走路径(虚线) */} - - +

PLT 切割预览

+
+ 0}> + + 尺寸:{parsedData().width.toFixed(1)}mm ×{" "} + {parsedData().height.toFixed(1)}mm + + - {/* 切割路径 */} - - {(path) => { - return ( - - {/* 切割路径 */} - + +
+
- {/* 动画小球 */} - - - - - - {/* 序号标签 */} - - - - {path.cardIndex + 1} - - - - ); + {/* 预览区域 */} + 0 && parsedData().height > 0} + fallback={ +
+ 无法解析 PLT 文件尺寸 +
+ } + > +
+ - -
-
+ xmlns="http://www.w3.org/2000/svg" + > + {/* 边框 */} + - {/* 图例说明 */} -
-
-
- 空走路径 -
-
-
- 切割路径 -
-
-
- 刀头 + {/* 空走路径(虚线) */} + + + + + {/* 切割路径 */} + + {(path) => { + return ( + + {/* 切割路径 */} + + + {/* 动画小球 */} + + + + + {/* 序号标签 */} + + + + {path.cardIndex + 1} + + + + ); + }} + + +
+ + + {/* 图例说明 */} +
+
+
+ 空走路径 +
+
+
+ 切割路径 +
+
+
+ 刀头 +
- ); }