refactor: move code to plotcutter

2026-03-15 09:29:18 +08:00
parent 025f5a46b0
commit 28794fd9f0
8 changed files with 737 additions and 314 deletions
@@ -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>

        {/* 图例说明 */}
@@ -25,6 +25,7 @@ export function PrintPreview(props: PrintPreviewProps) {
  const { generatePltData, downloadPltFile } = usePlotterExport(store);

  const [showPltPreview, setShowPltPreview] = createSignal(false);
+  const [pltCode, setPltCode] = createSignal('');

  const frontVisibleLayers = () => store.state.frontLayerConfigs.filter((l) => l.visible);
  const backVisibleLayers = () => store.state.backLayerConfigs.filter((l) => l.visible);
@@ -45,7 +46,13 @@ export function PrintPreview(props: PrintPreviewProps) {
  };

  const handleOpenPltPreview = () => {
-    setShowPltPreview(true);
+    const data = generatePltData();
+    if (data) {
+      setPltCode(data.pltCode);
+      setShowPltPreview(true);
+    } else {
+      alert('没有可预览的卡片');
+    }
  };

  const handleClosePltPreview = () => {
@@ -53,7 +60,7 @@ export function PrintPreview(props: PrintPreviewProps) {
  };

  return (
-    <Show when={!showPltPreview()} fallback={<PltPreview pages={pages()} cardWidth={store.state.dimensions?.cardWidth || 56} cardHeight={store.state.dimensions?.cardHeight || 88} shape={store.state.shape} bleed={store.state.bleed || 1} cornerRadius={store.state.cornerRadius ?? 3} onClose={handleClosePltPreview} />}>
+    <Show when={!showPltPreview()} fallback={<PltPreview pltCode={pltCode()} cardWidth={store.state.dimensions?.cardWidth || 56} cardHeight={store.state.dimensions?.cardHeight || 88} shape={store.state.shape} bleed={store.state.bleed || 1} cornerRadius={store.state.cornerRadius ?? 3} orientation={store.state.printOrientation || 'landscape'} onClose={handleClosePltPreview} />}>
      <div class="fixed inset-0 bg-black/50 z-50 overflow-auto">
        <div class="min-h-screen py-20 px-4">
          <PrintPreviewHeader
@@ -1,69 +1,30 @@
 import type { DeckStore } from './deckStore';
-import type { PageData } from './usePDFExport';
-import type { CardShape } from '../types';
-import {
-  getCardShapePoints,
-  calculateCenter
-} from '../../../plotcutter/contour';
-import { pts2plotter } from '../../../plotcutter/plotter';
-
-export interface CardPathData {
-  points: [number, number][];
-  centerX: number;
-  centerY: number;
-  startPoint: [number, number];
-  endPoint: [number, number];
-}
+import { calculateSinglePageLayout, generateTravelPaths, pts2plotter } from '../../../plotcutter';

 export interface PltExportData {
-  paths: CardPathData[];
-  travelPaths: [number, number][][];
-  plotterCode: string;
+  /** 单页满排时的 PLT 代码 */
+  pltCode: string;
+  /** A4 宽度 (mm) */
  a4Width: number;
+  /** A4 高度 (mm) */
  a4Height: number;
+  /** 每页卡片数 */
+  cardsPerPage: number;
 }

 export interface UsePlotterExportReturn {
-  generatePltData: (pages: PageData[]) => PltExportData | null;
-  downloadPltFile: (plotterCode: string) => void;
-  exportToPlt: (pages: PageData[]) => void;
+  /** 生成单页满排时的 PLT 数据 */
+  generatePltData: () => PltExportData | null;
+  /** 下载 PLT 文件 */
+  downloadPltFile: (pltCode: string) => void;
+  /** 直接导出 PLT（打开下载） */
+  exportToPlt: () => void;
 }

 /**
- * 生成空走路径（抬刀移动路径）
- * 从左上角出发，连接所有卡片的起点/终点，最后返回左上角
- */
-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 格式文件并下载
+ * PLT 导出 hook - 生成单页满排时的 HPGL 格式文件
+ * 
+ * 刀路只关心单页排满的情况，不考虑实际牌组的张数。
 */
 export function usePlotterExport(store: DeckStore): UsePlotterExportReturn {
  const bleed = () => store.state.bleed || 1;
@@ -71,81 +32,51 @@ export function usePlotterExport(store: DeckStore): UsePlotterExportReturn {
  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;
+  const orientation = () => store.state.printOrientation || 'landscape';

  /**
-   * 生成 PLT 数据（不下载，用于预览）
+   * 生成单页满排时的 PLT 数据
   */
-  const generatePltData = (pages: PageData[]): PltExportData | null => {
-    const paths: CardPathData[] = [];
-    const currentBleed = bleed();
-    const currentCornerRadius = cornerRadius();
+  const generatePltData = (): PltExportData | null => {
+    const layout = calculateSinglePageLayout({
+      cardWidth: cardWidth(),
+      cardHeight: cardHeight(),
+      shape: shape(),
+      bleed: bleed(),
+      cornerRadius: cornerRadius(),
+      orientation: orientation()
+    });

-    // 计算切割尺寸（排版尺寸减去出血）
-    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) {
+    if (layout.cardPaths.length === 0) {
      return null;
    }

    // 生成空走路径
-    const travelPaths = generateTravelPaths(paths, a4Height);
-    
+    const travelPaths = generateTravelPaths(layout.cardPaths, layout.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);
+    const allPaths = layout.cardPaths.map(p => p.points);
+    const startPoint: [number, number] = [0, layout.a4Height];
+    const endPoint: [number, number] = [0, layout.a4Height];
+    const plotterCode = pts2plotter(allPaths, layout.a4Width, layout.a4Height, 1, startPoint, endPoint);

    return {
-      paths,
-      travelPaths,
-      plotterCode,
-      a4Width,
-      a4Height
+      pltCode: plotterCode,
+      a4Width: layout.a4Width,
+      a4Height: layout.a4Height,
+      cardsPerPage: layout.cardsPerPage
    };
  };

  /**
   * 下载 PLT 文件
   */
-  const downloadPltFile = (plotterCode: string) => {
-    const blob = new Blob([plotterCode], { type: 'application/vnd.hp-HPGL' });
+  const downloadPltFile = (pltCode: string) => {
+    const blob = new Blob([pltCode], { 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`;
+    link.download = `deck-plt-${new Date().toISOString().slice(0, 19).replace(/:/g, '-')}.plt`;
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
@@ -153,15 +84,15 @@ export function usePlotterExport(store: DeckStore): UsePlotterExportReturn {
  };

  /**
-   * 直接导出 PLT（兼容旧接口）
+   * 直接导出 PLT（打开下载）
   */
-  const exportToPlt = (pages: PageData[]) => {
-    const data = generatePltData(pages);
+  const exportToPlt = () => {
+    const data = generatePltData();
    if (!data) {
      alert('没有可导出的卡片');
      return;
    }
-    downloadPltFile(data.plotterCode);
+    downloadPltFile(data.pltCode);
  };

  return { generatePltData, downloadPltFile, exportToPlt };