refactor: reorg

src/components/md-deck/PltPreview.tsx

@@ -1,6 +1,13 @@
 import { createSignal, For, Show, createMemo } from 'solid-js';
 import type { PageData } from './hooks/usePDFExport';
-import type { CardShape } from './types';
+import type { CardPath } from '../../plotcutter';
+import type { CardShape } from '../../plotcutter';
+import {
+  getCardShapePoints,
+  calculateCenter,
+  contourToSvgPath
+} from '../../plotcutter';
+import { generateTravelPaths, travelPathsToSvg } from '../../plotcutter';
 import { pts2plotter } from '../../plotcutter';
 
 export interface PltPreviewProps {
@@ -13,263 +20,40 @@ export interface PltPreviewProps {
   onClose: () => void;
 }
 
-export interface CardPath {
-  pageIndex: number;
-  cardIndex: number;
-  points: [number, number][];
-  centerX: number;
-  centerY: number;
-  pathD: string;
-  startPoint: [number, number];
-  endPoint: [number, number];
-}
-
 /**
- * 生成带圆角的矩形路径点
- * @param width 矩形宽度
- * @param height 矩形高度
- * @param cornerRadius 圆角半径（mm）
- * @param segmentsPerCorner 每个圆角的分段数
+ * 生成卡片切割路径
  */
-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);
-    points.push([
-      r + r * Math.cos(angle - Math.PI / 2),
-      r + r * Math.sin(angle - Math.PI / 2)
-    ]);
-  }
-  
-  // 右上角圆角
-  for (let i = 0; i < segmentsPerCorner; i++) {
-    const angle = (Math.PI / 2) * (i / segmentsPerCorner);
-    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) + Math.PI / 2;
-    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;
-    points.push([
-      r + r * Math.cos(angle),
-      height - r + r * Math.sin(angle)
-    ]);
-  }
-  
-  return points;
-}
-
-/**
- * 根据形状生成卡片轮廓点（单位：mm，相对于卡片左下角）
- */
-function getCardShapePoints(
+function generateCardPaths(
+  pages: PageData[],
+  cardWidth: number,
+  cardHeight: number,
   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;
-}
-
-/**
- * 计算多边形的中心点
- */
-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
-  };
-}
-
-/**
- * 根据进度计算小球在路径上的位置
- */
-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 命令
- */
-function pointsToSvgPath(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;
-}
-
-/**
- * 生成空走路径（抬刀移动路径）
- */
-function generateTravelPaths(
-  cardPaths: CardPath[],
+  bleed: number,
+  cornerRadius: number,
   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 预览组件 - 显示切割路径预览
- */
-export function PltPreview(props: PltPreviewProps) {
-  const a4Width = 297; // 横向 A4
-  const a4Height = 210;
-
-  // 使用传入的圆角值，但也允许用户修改
-  const [cornerRadius, setCornerRadius] = createSignal(props.cornerRadius);
-
-  // 收集所有卡片路径
+): CardPath[] {
   const cardPaths: CardPath[] = [];
   let pathIndex = 0;
 
   // 计算切割尺寸（排版尺寸减去出血）
-  const cutWidth = props.cardWidth - props.bleed * 2;
-  const cutHeight = props.cardHeight - props.bleed * 2;
+  const cutWidth = cardWidth - bleed * 2;
+  const cutHeight = cardHeight - bleed * 2;
 
-  for (const page of props.pages) {
+  for (const page of pages) {
     for (const card of page.cards) {
       if (card.side !== 'front') continue;
 
-      const shapePoints = getCardShapePoints(props.shape, cutWidth, cutHeight, cornerRadius());
+      // 生成形状轮廓点（相对于卡片左下角）
+      const shapePoints = getCardShapePoints(shape, cutWidth, cutHeight, cornerRadius);
+
+      // 平移到页面坐标并翻转 Y 轴
       const pagePoints = shapePoints.map(([x, y]) => [
-        card.x + props.bleed + x,
-        a4Height - (card.y + props.bleed + y)
+        card.x + bleed + x,
+        a4Height - (card.y + bleed + y)
       ] as [number, number]);
 
       const center = calculateCenter(pagePoints);
-      const pathD = pointsToSvgPath(pagePoints);
+      const pathD = contourToSvgPath(pagePoints);
 
       // 起点和终点（对于闭合路径是同一点）
       const startPoint = pagePoints[0];
@@ -288,21 +72,51 @@ export function PltPreview(props: PltPreviewProps) {
     }
   }
 
+  return cardPaths;
+}
+
+/**
+ * PLT 预览组件 - 显示切割路径预览
+ */
+export function PltPreview(props: PltPreviewProps) {
+  const a4Width = 297; // 横向 A4
+  const a4Height = 210;
+
+  // 使用传入的圆角值，但也允许用户修改
+  const [cornerRadius, setCornerRadius] = createSignal(props.cornerRadius);
+
+  // 生成所有卡片路径
+  const cardPaths = createMemo(() =>
+    generateCardPaths(
+      props.pages,
+      props.cardWidth,
+      props.cardHeight,
+      props.shape,
+      props.bleed,
+      cornerRadius(),
+      a4Height
+    )
+  );
+
   // 生成空走路径
-  const travelPaths = generateTravelPaths(cardPaths, a4Height);
-  const travelPathD = travelPaths.map(path => pointsToSvgPath(path, false)).join(' ');
+  const travelPathD = createMemo(() => {
+    const travelPaths = generateTravelPaths(cardPaths(), a4Height);
+    return travelPathsToSvg(travelPaths);
+  });
 
   // 生成 HPGL 代码用于下载
-  const allPaths = cardPaths.map(p => p.points);
-  const plotterCode = allPaths.length > 0 ? pts2plotter(allPaths, a4Width, a4Height, 1) : '';
+  const plotterCode = createMemo(() => {
+    const allPaths = cardPaths().map(p => p.points);
+    return allPaths.length > 0 ? pts2plotter(allPaths, a4Width, a4Height, 1) : '';
+  });
 
   const handleDownload = () => {
-    if (!plotterCode) {
+    if (!plotterCode()) {
       alert('没有可导出的卡片');
       return;
     }
 
-    const blob = new Blob([plotterCode], { type: 'application/vnd.hp-HPGL' });
+    const blob = new Blob([plotterCode()], { type: 'application/vnd.hp-HPGL' });
     const url = URL.createObjectURL(blob);
     const link = document.createElement('a');
     link.href = url;
@@ -340,7 +154,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={cardPaths().length === 0}
             >
               📥 下载 PLT
             </button>
@@ -358,7 +172,7 @@ 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);
+              const pageCardPaths = cardPaths().filter(p => p.pageIndex === page.pageIndex);
 
               return (
                 <svg
@@ -393,9 +207,9 @@ export function PltPreview(props: PltPreviewProps) {
                   />
 
                   {/* 空走路径（虚线） */}
-                  <Show when={travelPathD}>
+                  <Show when={travelPathD()}>
                     <path
-                      d={travelPathD}
+                      d={travelPathD()}
                       fill="none"
                       stroke="#999"
                       stroke-width="0.2"