refactor: move code to plotcutter

src/components/md-deck/PltPreview.tsx

@@ -1,5 +1,7 @@
 import { createSignal, For, Show, createMemo } from 'solid-js';
-import type { PageData } from './hooks/usePDFExport';
+import { parsePlt, extractCutPaths, parsedPltToSvg } from '../../plotcutter/parser';
+import { generateTravelPaths, travelPathsToSvg } from '../../plotcutter/layout';
+import { pts2plotter } from '../../plotcutter/plotter';
 import type { CardPath } from '../../plotcutter';
 import type { CardShape } from '../../plotcutter';
 import {
@@ -7,116 +9,166 @@ import {
   calculateCenter,
   contourToSvgPath
 } from '../../plotcutter';
-import { generateTravelPaths, travelPathsToSvg } from '../../plotcutter';
-import { pts2plotter } from '../../plotcutter';
 
 export interface PltPreviewProps {
-  pages: PageData[];
-  cardWidth: number;
-  cardHeight: number;
+  /** PLT 文件内容 */
+  pltCode: string;
+  /** 卡片形状（用于生成刀路） */
   shape: CardShape;
+  /** 卡片宽度 (mm) */
+  cardWidth: number;
+  /** 卡片高度 (mm) */
+  cardHeight: number;
+  /** 出血 (mm) */
   bleed: number;
+  /** 圆角半径 (mm) */
   cornerRadius: number;
+  /** 打印方向 */
+  orientation: 'portrait' | 'landscape';
+  /** 关闭回调 */
   onClose: () => void;
 }
 
 /**
- * 生成卡片切割路径
+ * 从 PLT 代码解析并生成卡片路径数据
  */
-function generateCardPaths(
-  pages: PageData[],
-  cardWidth: number,
-  cardHeight: number,
-  shape: CardShape,
-  bleed: number,
-  cornerRadius: number,
-  a4Height: number
-): CardPath[] {
-  const cardPaths: CardPath[] = [];
-  let pathIndex = 0;
+function parsePltToCardPaths(pltCode: string, a4Height: number): {
+  cutPaths: [number, number][][];
+  cardPaths: CardPath[];
+} {
+  const parsed = parsePlt(pltCode);
+  const cutPaths = extractCutPaths(parsed, 5); // 5mm 阈值
 
-  // 计算切割尺寸（排版尺寸减去出血）
-  const cutWidth = cardWidth - bleed * 2;
-  const cutHeight = cardHeight - bleed * 2;
+  // 将解析的路径转换为 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];
 
-  for (const page of pages) {
-    for (const card of page.cards) {
-      if (card.side !== 'front') continue;
+    return {
+      pageIndex: 0,
+      cardIndex: index,
+      points,
+      centerX: center.x,
+      centerY: center.y,
+      pathD,
+      startPoint,
+      endPoint
+    };
+  });
 
-      // 生成形状轮廓点（相对于卡片左下角）
-      const shapePoints = getCardShapePoints(shape, cutWidth, cutHeight, cornerRadius);
-
-      // 平移到页面坐标并翻转 Y 轴
-      const pagePoints = shapePoints.map(([x, y]) => [
-        card.x + bleed + x,
-        a4Height - (card.y + bleed + y)
-      ] as [number, number]);
-
-      const center = calculateCenter(pagePoints);
-      const pathD = contourToSvgPath(pagePoints);
-
-      // 起点和终点（对于闭合路径是同一点）
-      const startPoint = pagePoints[0];
-      const endPoint = pagePoints[pagePoints.length - 1];
-
-      cardPaths.push({
-        pageIndex: page.pageIndex,
-        cardIndex: pathIndex++,
-        points: pagePoints,
-        centerX: center.x,
-        centerY: center.y,
-        pathD,
-        startPoint,
-        endPoint
-      });
-    }
-  }
-
-  return cardPaths;
+  return { cutPaths, cardPaths };
 }
 
 /**
- * PLT 预览组件 - 显示切割路径预览
+ * 生成单页满排时的 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);
+}
+
+/**
+ * PLT 预览组件 - 基于 PLT 文本解析显示切割路径预览
  */
 export function PltPreview(props: PltPreviewProps) {
-  const a4Width = 297; // 横向 A4
-  const a4Height = 210;
+  const a4Width = props.orientation === 'landscape' ? 297 : 210;
+  const a4Height = props.orientation === 'landscape' ? 210 : 297;
 
   // 使用传入的圆角值，但也允许用户修改
   const [cornerRadius, setCornerRadius] = createSignal(props.cornerRadius);
 
-  // 生成所有卡片路径
-  const cardPaths = createMemo(() =>
-    generateCardPaths(
-      props.pages,
-      props.cardWidth,
-      props.cardHeight,
-      props.shape,
-      props.bleed,
-      cornerRadius(),
-      a4Height
-    )
-  );
+  // 解析传入的 PLT 代码
+  const parsedData = createMemo(() => {
+    if (!props.pltCode) {
+      return { cutPaths: [] as [number, number][][], cardPaths: [] as CardPath[] };
+    }
+    return parsePltToCardPaths(props.pltCode, a4Height);
+  });
 
   // 生成空走路径
   const travelPathD = createMemo(() => {
-    const travelPaths = generateTravelPaths(cardPaths(), a4Height);
+    const cardPaths = parsedData().cardPaths;
+    if (cardPaths.length === 0) return '';
+    const travelPaths = generateTravelPaths(cardPaths, a4Height);
     return travelPathsToSvg(travelPaths);
   });
 
-  // 生成 HPGL 代码用于下载
-  const plotterCode = createMemo(() => {
-    const allPaths = cardPaths().map(p => p.points);
-    return allPaths.length > 0 ? pts2plotter(allPaths, a4Width, a4Height, 1) : '';
+  // 生成单页满排时的 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 (!plotterCode()) {
+    if (!currentPltCode()) {
       alert('没有可导出的卡片');
       return;
     }
 
-    const blob = new Blob([plotterCode()], { type: 'application/vnd.hp-HPGL' });
+    const blob = new Blob([currentPltCode()], { type: 'application/vnd.hp-HPGL' });
     const url = URL.createObjectURL(blob);
     const link = document.createElement('a');
     link.href = url;
@@ -154,7 +206,7 @@ export function PltPreview(props: PltPreviewProps) {
             <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={cardPaths().length === 0}
+              disabled={parsedData().cardPaths.length === 0}
             >
               📥 下载 PLT
             </button>
@@ -170,101 +222,82 @@ export function PltPreview(props: PltPreviewProps) {
 
         {/* 预览区域 */}
         <div class="flex flex-col items-center gap-8 mt-20">
-          <For each={props.pages}>
-            {(page) => {
-              const pageCardPaths = cardPaths().filter(p => p.pageIndex === page.pageIndex);
-
-              return (
-                <svg
-                  class="bg-white shadow-xl"
-                  viewBox={`0 0 ${a4Width} ${a4Height}`}
-                  style={{
-                    width: `${a4Width}mm`,
-                    height: `${a4Height}mm`
-                  }}
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  {/* A4 边框 */}
-                  <rect
-                    x="0"
-                    y="0"
-                    width={a4Width}
-                    height={a4Height}
-                    fill="none"
-                    stroke="#ccc"
-                    stroke-width="0.5"
-                  />
-
-                  {/* 页面边框 */}
-                  <rect
-                    x={page.frameBounds.minX}
-                    y={page.frameBounds.minY}
-                    width={page.frameBounds.maxX - page.frameBounds.minX}
-                    height={page.frameBounds.maxY - page.frameBounds.minY}
-                    fill="none"
-                    stroke="#888"
-                    stroke-width="0.2"
-                  />
-
-                  {/* 空走路径（虚线） */}
-                  <Show when={travelPathD()}>
-                    <path
-                      d={travelPathD()}
-                      fill="none"
-                      stroke="#999"
-                      stroke-width="0.2"
-                      stroke-dasharray="2 2"
-                    />
-                  </Show>
-
-                  {/* 切割路径 */}
-                  <For each={pageCardPaths}>
-                    {(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>
-              );
+          <svg
+            class="bg-white shadow-xl"
+            viewBox={`0 0 ${a4Width} ${a4Height}`}
+            style={{
+              width: `${a4Width}mm`,
+              height: `${a4Height}mm`
             }}
-          </For>
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            {/* A4 边框 */}
+            <rect
+              x="0"
+              y="0"
+              width={a4Width}
+              height={a4Height}
+              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>
 
         {/* 图例说明 */}