feat: plt export

src/components/md-deck/PrintPreview.tsx

@@ -2,6 +2,7 @@ import { For, Show } from 'solid-js';
 import type { DeckStore } from './hooks/deckStore';
 import { usePageLayout } from './hooks/usePageLayout';
 import { usePDFExport, type ExportOptions } from './hooks/usePDFExport';
+import { usePlotterExport } from './hooks/usePlotterExport';
 import { getShapeSvgClipPath } from './hooks/shape-styles';
 import { PrintPreviewHeader } from './PrintPreviewHeader';
 import { PrintPreviewFooter } from './PrintPreviewFooter';
@@ -20,6 +21,7 @@ export function PrintPreview(props: PrintPreviewProps) {
   const { store } = props;
   const { getA4Size, pages, cropMarks } = usePageLayout(store);
   const { exportToPDF } = usePDFExport(store, props.onClose);
+  const { exportToPlt } = usePlotterExport(store);
 
   const frontVisibleLayers = () => store.state.frontLayerConfigs.filter((l) => l.visible);
   const backVisibleLayers = () => store.state.backLayerConfigs.filter((l) => l.visible);
@@ -39,6 +41,10 @@ export function PrintPreview(props: PrintPreviewProps) {
     await exportToPDF(pages(), cropMarks(), options);
   };
 
+  const handleExportPlt = () => {
+    exportToPlt(pages());
+  };
+
   return (
     <div class="fixed inset-0 bg-black/50 z-50 overflow-auto">
       <div class="min-h-screen py-20 px-4">
@@ -46,6 +52,7 @@ export function PrintPreview(props: PrintPreviewProps) {
           store={store}
           pageCount={pages().length}
           onExport={handleExport}
+          onExportPlt={handleExportPlt}
           onClose={props.onClose}
         />
 

src/components/md-deck/PrintPreviewHeader.tsx

@@ -4,6 +4,7 @@ export interface PrintPreviewHeaderProps {
   store: DeckStore;
   pageCount: number;
   onExport: () => void;
+  onExportPlt: () => void;
   onClose: () => void;
 }
 
@@ -86,6 +87,13 @@ export function PrintPreviewHeader(props: PrintPreviewHeaderProps) {
         </div>
       </div>
       <div class="flex gap-2">
+        <button
+          onClick={props.onExportPlt}
+          class="bg-green-600 hover:bg-green-700 text-white px-4 py-1.5 rounded text-sm font-medium cursor-pointer flex items-center gap-2"
+        >
+          <span>📐</span>
+          <span>导出 PLT</span>
+        </button>
         <button
           onClick={props.onExport}
           class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-1.5 rounded text-sm font-medium cursor-pointer flex items-center gap-2"

src/components/md-deck/hooks/usePlotterExport.ts

@@ -0,0 +1,123 @@
+import type { DeckStore } from './deckStore';
+import type { PageData } from './usePDFExport';
+import type { CardShape } from '../types';
+import { pts2plotter } from '../../../plotcutter';
+
+export interface UsePlotterExportReturn {
+  exportToPlt: (pages: PageData[]) => void;
+}
+
+/**
+ * 根据形状生成卡片轮廓点（单位：mm，相对于卡片左下角）
+ */
+function getCardShapePoints(
+  shape: CardShape,
+  width: number,
+  height: number
+): [number, number][] {
+  const points: [number, number][] = [];
+
+  switch (shape) {
+    case 'circle': {
+      // 圆形：生成 36 个点近似圆
+      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;
+}
+
+/**
+ * PLT 导出 hook - 生成 HPGL 格式文件并下载
+ */
+export function usePlotterExport(store: DeckStore): UsePlotterExportReturn {
+  const exportToPlt = (pages: PageData[]) => {
+    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 allPaths: [number, number][][] = [];
+
+    for (const page of pages) {
+      for (const card of page.cards) {
+        // 只导出正面
+        if (card.side !== 'front') continue;
+
+        // 获取卡片形状点（相对于卡片原点）
+        const shapePoints = getCardShapePoints(shape, cardWidth, cardHeight);
+
+        // 转换点到页面坐标（Y 轴翻转：SVG Y 向下，plotter Y 向上）
+        const pagePoints = shapePoints.map(([x, y]) => [
+          card.x + x,
+          a4Height - (card.y + y)
+        ] as [number, number]);
+
+        allPaths.push(pagePoints);
+      }
+    }
+
+    if (allPaths.length === 0) {
+      alert('没有可导出的卡片');
+      return;
+    }
+
+    // 生成 HPGL 指令
+    const plotterCode = pts2plotter(allPaths, a4Width, a4Height, 1);
+
+    // 创建 Blob 并下载
+    const blob = new Blob([plotterCode], { 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);
+  };
+
+  return { exportToPlt };
+}

src/plotcutter/bezier.ts

@@ -0,0 +1,49 @@
+export type Pt = [number, number];
+
+export function cubicBezierCommand(pts: Pt[], p1: Pt, p2: Pt, p3: Pt){
+    const p0 = pts[pts.length - 1];
+    if (!p0) return pts;
+
+    const [b1p0, b1p1, b1p2] = getMidPoints(p0, p1, p2, p3);
+    const [b2p0, b2p1] = getMidPoints(b1p0, b1p1, b1p2);
+    const [b3p0] = getMidPoints(b2p0, b2p1);
+
+    const a1 = Math.atan2(b3p0[1] - p0[1], b3p0[0] - p0[0]);
+    const a2 = Math.atan2(p3[1] - b3p0[1], p3[0] - b3p0[0]);
+    const d = a2 - a1 - Math.round((a2 - a1) / Math.PI / 2) * Math.PI * 2;
+    if (isNaN(d)) {
+        console.error('NaN found', { d, a2, a1, p0, p1, p2, p3 });
+        return pts;
+    }
+
+    const d03 = sqdist(p0, p3);
+    if (d * d * d03 < Math.PI * Math.PI / 18 / 18) {
+        pts.push(p3);
+        return pts;
+    }
+
+    cubicBezierCommand(pts, b1p0, b2p0, b3p0);
+    pts.push(b3p0);
+    cubicBezierCommand(pts, b2p1, b1p2, p3);
+
+    return pts;
+}
+
+function sqdist(pt: Pt, to: Pt) {
+    const x = pt[0] - to[0];
+    const y = pt[1] - to[1];
+    return x * x + y * y;
+}
+
+function getMidPoints(...pts: Pt[]){
+    const mps = [] as typeof pts;
+
+    for(let i = 1; i < pts.length; i ++){
+        mps[i-1] = [
+            (pts[i][0] + pts[i-1][0])/2,
+            (pts[i][1] + pts[i-1][1])/2,
+        ];
+    }
+
+    return mps;
+}

src/plotcutter/index.ts

@@ -0,0 +1,3 @@
+export * from "./bezier";
+export * from "./vector";
+export * from "./plotter";

src/plotcutter/normalize.ts

@@ -0,0 +1,57 @@
+// pts is a point loop
+// reorder the points, such that:
+// 1. the points are in counter-clockwise order
+// 2. the first edge(pts[0] to pts[1]) points to the (0,1) direction, as much as possible
+export function normalize(pts: [number, number][]){
+    if (pts.length < 3) {
+        return pts; // Need at least 3 points to form a polygon
+    }
+
+    // Calculate the signed area to determine winding order
+    let area = 0;
+    for (let i = 0; i < pts.length; i++) {
+        const [x1, y1] = pts[i];
+        const [x2, y2] = pts[(i + 1) % pts.length];
+        area += x1 * y2 - x2 * y1;
+    }
+
+    // If area is negative, points are in clockwise order, so reverse them
+    if (area < 0) {
+        pts.reverse();
+    }
+
+    // Find the best starting point to maximize alignment with (1,0) direction
+    let bestIndex = 0;
+    let maxDotProduct = -Infinity;
+
+    for (let i = 0; i < pts.length; i++) {
+        const [x1, y1] = pts[i];
+        const [x2, y2] = pts[(i + 1) % pts.length];
+        
+        // Calculate the direction vector of the edge
+        const dx = x2 - x1;
+        const dy = y2 - y1;
+        
+        // Normalize the vector
+        const length = Math.sqrt(dx * dx + dy * dy);
+        if (length > 0) {
+            const normalizedDx = dx / length;
+            const normalizedDy = dy / length;
+            
+            // Dot product with (1, 0) is just normalizedDx
+            const dotProduct = normalizedDy;
+            
+            if (dotProduct > maxDotProduct) {
+                maxDotProduct = dotProduct;
+                bestIndex = i;
+            }
+        }
+    }
+
+    // Rotate array to start with the best edge
+    if (bestIndex !== 0) {
+        pts = [...pts.slice(bestIndex), ...pts.slice(0, bestIndex)];
+    }
+
+    return pts;
+}

src/plotcutter/plotter.ts

@@ -0,0 +1,73 @@
+import {normalize} from "./normalize";
+
+export function pts2plotter(pts: [number, number][][], width: number, height: number, px2mm = 0.1){
+    let str = init(width * px2mm, height * px2mm);
+
+    // sort paths by x(long) then by y(short)
+    const sorted = pts.slice();
+    sorted.sort(function (a, b) {
+        const [ax,ay] = topleft(a);
+        const [bx,by] = topleft(b);
+
+        if (ax !== bx) return ax - bx;
+        return ay - by;
+    });
+
+    let lead = true;
+    for(const path of sorted){
+        for (const cmd of poly(normalize(path), height, px2mm, lead)) {
+            str += cmd;
+        }
+        lead = false;
+    }
+
+    str += end();
+
+    return str;
+}
+
+function topleft(pts: [number, number][]){
+    let minx = NaN;
+    let miny = NaN;
+    for(const pt of pts){
+        if (isNaN(minx) || minx > pt[0]) minx = pt[0];
+        if (isNaN(miny) || miny > pt[1]) miny = pt[1];
+    }
+    return [minx, miny] as [number, number];
+}
+
+function init(w: number, h: number) {
+    return ` IN TB26,${plu(w)},${plu(h)} CT1 U0,0 D0,0 D40,0`;
+}
+
+function end() {
+    return ' U0,0 @ @';
+}
+
+function* poly(pts: [number, number][], height: number, px2mm: number, lead = false){
+    function cutpt(down: boolean, pt: [number, number]) {
+        return ` ${down ? 'D' : 'U'}${plu(pt[0] * px2mm)},${plu((height - pt[1]) * px2mm)}`;
+    }
+
+    if (lead) {
+        yield cutpt(false, [0, 0]);
+        yield cutpt(true, [0, 1]);
+    }
+
+    yield cutpt(false, pts[0]);
+    for(const pt of pts){
+        yield cutpt(true, pt);
+    }
+}
+
+function sqrlen(x: number, y: number) {
+    return x * x + y * y;
+}
+
+function lerp(s: [number, number], e: [number, number], i: number) {
+    return [s[0] + (e[0] - s[0]) * i, s[1] + (e[1] - s[1]) * i] as typeof s;
+}
+
+function plu(n: number) {
+    return Math.round(n / 0.025);
+}

src/plotcutter/vector.ts

@@ -0,0 +1,18 @@
+import { cubicBezierCommand, Pt } from "./bezier";
+
+export function frame2preview(pts: Pt[][], width: number, height: number, px2mm = 0.1) {
+    return `<svg viewbox="0 0 ${width} ${height}" width=360 height=220>
+        <rect x=0 y=0 width=${width} height=${height} fill="#8001" stroke="#f008"></rect>
+        <path d="${pts2command(pts)}" fill="#0001" stroke="#0008">
+        </path>
+      </svg><span>${ (width * px2mm).toFixed(1)}mm x ${(height * px2mm).toFixed(1)}mm</span>`;
+}
+
+function pts2command(pts: Pt[][]){
+  return pts.map(
+    path => {
+      const pts = path.map(pt=> `${pt[0]} ${pt[1]}`).join(' L ');
+      return `M ${pts} Z`;
+    }
+  ).join(' ');
+}