ttrpg-tools/src/components/md-deck/PltPreview.tsx

import { createSignal, For, Show, createMemo } from 'solid-js';
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 {
  getCardShapePoints,
  calculateCenter,
  contourToSvgPath
} from '../../plotcutter';

export interface PltPreviewProps {
  /** PLT 文件内容 */
  pltCode: string;
  /** 卡片形状（用于生成刀路） */
  shape: CardShape;
  /** 卡片宽度 (mm) */
  cardWidth: number;
  /** 卡片高度 (mm) */
  cardHeight: number;
  /** 出血 (mm) */
  bleed: number;
  /** 圆角半径 (mm) */
  cornerRadius: number;
  /** 打印方向 */
  orientation: 'portrait' | 'landscape';
  /** 关闭回调 */
  onClose: () => void;
}

/**
 * 从 PLT 代码解析并生成卡片路径数据
 */
function parsePltToCardPaths(pltCode: string, a4Height: number): {
  cutPaths: [number, number][][];
  cardPaths: CardPath[];
} {
  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 };
}

/**
 * 生成单页满排时的 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 = props.orientation === 'landscape' ? 297 : 210;
  const a4Height = props.orientation === 'landscape' ? 210 : 297;

  // 使用传入的圆角值，但也允许用户修改
  const [cornerRadius, setCornerRadius] = createSignal(props.cornerRadius);

  // 解析传入的 PLT 代码
  const parsedData = createMemo(() => {
    if (!props.pltCode) {
      return { cutPaths: [] as [number, number][][], cardPaths: [] as CardPath[] };
    }
    return parsePltToCardPaths(props.pltCode, a4Height);
  });

  // 生成空走路径
  const travelPathD = createMemo(() => {
    const cardPaths = parsedData().cardPaths;
    if (cardPaths.length === 0) return '';
    const travelPaths = generateTravelPaths(cardPaths, a4Height);
    return travelPathsToSvg(travelPaths);
  });

  // 生成单页满排时的 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 (!currentPltCode()) {
      alert('没有可导出的卡片');
      return;
    }

    const blob = new Blob([currentPltCode()], { type: 'application/vnd.hp-HPGL' });
    const url = URL.createObjectURL(blob);
    const link = document.createElement('a');
    link.href = url;
    link.download = `deck-export-${new Date().toISOString().slice(0, 19).replace(/:/g, '-')}.plt`;
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
    URL.revokeObjectURL(url);
  };

  const handleCornerRadiusChange = (e: Event) => {
    const target = e.target as HTMLInputElement;
    setCornerRadius(Number(target.value));
  };

  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">
            <label class="text-sm text-gray-600">圆角 (mm):</label>
            <input
              type="number"
              min="0"
              max="10"
              step="0.5"
              value={cornerRadius()}
              onInput={handleCornerRadiusChange}
              class="w-16 px-2 py-1 border border-gray-300 rounded text-sm"
            />
          </div>
          <div class="flex items-center gap-2 flex-1">
            <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>

        {/* 预览区域 */}
        <div class="flex flex-col items-center gap-8 mt-20">
          <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"
            />

            {/* 空走路径（虚线） */}
            <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>

        {/* 图例说明 */}
        <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>
  );
}