feat() better support cricut

src/components/PrintModal.tsx

@@ -35,7 +35,7 @@ const createOutput = async (
   } else {
     await preparePdf(printOptions, template, canvasArrayRef);
   }
-  if (printOptions.cutMarks === 'cut') {
+  if (printOptions.cutMarks === 'cri-cut') {
     await generateCutShapes(printOptions, template, canvasArrayRef);
   }
 };
@@ -134,11 +134,11 @@ export const PrintModal = ({ open, onClose }: PrintModalProps) => {
               <Typography>Crop marks</Typography>
             </Button>
             <Button
-              onClick={() => setPrintOptions({ cutMarks: 'cut' })}
+              onClick={() => setPrintOptions({ cutMarks: 'cri-cut' })}
               {...basicButtonProps}
-              color={cutMarks === 'cut' ? 'primary' : 'secondary'}
+              color={cutMarks === 'cri-cut' ? 'primary' : 'secondary'}
             >
-              <Typography>Cutting shape</Typography>
+              <Typography>Cricut</Typography>
             </Button>
             <Button
               onClick={() => setPrintOptions({ cutMarks: 'none' })}

src/contexts/appData.ts

@@ -14,7 +14,7 @@ import { noop } from '../utils/utils';
 export type PrintOptions = {
   imageType: 'raster' | 'vector';
   printerTemplateKey: string;
-  cutMarks: 'crop' | 'cut' | 'none',
+  cutMarks: 'crop' | 'cut' | 'cri-cut' | 'none',
   fileType: 'pdf' | 'zip';
 };
 

src/printTemplates.ts

@@ -30,6 +30,16 @@ export const printTemplates: Record<string, PrintTemplate> = {
     layout: 'portrait',
     paperSize: [210, 297],
   },
+  a4cricut: {
+    gridSize: [90, 56],
+    label: 'Cricut A4',
+    rows: 2,
+    columns: 2,
+    leftMargin: 60,
+    topMargin: 50,
+    layout: 'landscape',
+    paperSize: [297, 210],
+  },
   horizontalLetter: {
     gridSize: [88, 59],
     label: 'Letter, Horizontal 3x3',

src/utils/generateCutShapes.ts

@@ -8,7 +8,7 @@ import type { PrintOptions } from '../contexts/appData';
 import type { templateType } from '../cardsTemplates';
 import type { RefObject } from 'react';
 import { printTemplates } from '../printTemplates';
-import { downloadBlob, fromMMtoPxAt72DPI } from './utils';
+import { downloadBlob, fromMMtoPxAt144DPI } from './utils';
 
 export const generateCutShapes = async (printOptions: PrintOptions, _template: templateType, canvasArrayRef: RefObject<Canvas[]>) => {
   const { printerTemplateKey } = printOptions;
@@ -24,25 +24,26 @@ export const generateCutShapes = async (printOptions: PrintOptions, _template: t
 
 
   canvas.setDimensions({
-    width: fromMMtoPxAt72DPI(paperSize[0]),
-    height: fromMMtoPxAt72DPI(paperSize[1]),
+    width: fromMMtoPxAt144DPI(paperSize[0]),
+    height: fromMMtoPxAt144DPI(paperSize[1]),
   });
 
-  const borderRadius = fromMMtoPxAt72DPI(4)
-  const width = fromMMtoPxAt72DPI(85);
-  const height = fromMMtoPxAt72DPI(54);
+  const borderRadius = fromMMtoPxAt144DPI(4)
+  const width = fromMMtoPxAt144DPI(85);
+  const height = fromMMtoPxAt144DPI(54);
   for (let index = 0; index < numberOfCuts; index++) {
     const column = index % columns;
     const row = Math.floor(index / columns) % rows;
 
-    const xStart = fromMMtoPxAt72DPI(column * gridSize[0] + leftMargin);
-    const yStart = fromMMtoPxAt72DPI(row * gridSize[1] + topMargin);
+    const xStart = fromMMtoPxAt144DPI(column * gridSize[0] + leftMargin);
+    const yStart = fromMMtoPxAt144DPI(row * gridSize[1] + topMargin);
     const shape = new Rect({ width, height, fill: 'cyan', rx: borderRadius, ry: borderRadius });
     canvas.add(shape);
     shape.setPositionByOrigin(new Point(xStart, yStart), 'left', 'top');
   }
-
-  const svg = canvas.toSVG({}, (a) => a);
-  const blob = new Blob([svg], { type: 'image/svg+xml' });
-  downloadBlob(blob, `${printerTemplate.label}.svg`);
+  canvas.backgroundColor = 'magenta';
+  const cElement = canvas.toCanvasElement();
+  cElement.toBlob((blob) => {
+    downloadBlob(blob!, `${printerTemplate.label}.png`);
+  });
 }

src/utils/preparePdfKit.ts

@@ -9,6 +9,8 @@ import { type PrintOptions } from '../contexts/appData';
 import { printTemplates } from '../printTemplates';
 
 const fromMMtoPoint = (x: number): number => (x / 25.4) * 72;
+// const fromPointToMM = (x: number): number => (x * 25.4) / 72;
+
 
 export const preparePdf = async (
   printOptions: PrintOptions,
@@ -66,6 +68,31 @@ export const preparePdf = async (
     cutHelperY.clear();
   }
 
+  const makeTheCricutMarks = () => {
+    const markStartY = fromMMtoPoint(13.5);
+    const markStartX = fromMMtoPoint(26);
+    const markLength = fromMMtoPoint(25);
+
+    pdfDoc.lineWidth(fromMMtoPoint(1.5));
+    pdfDoc.moveTo(markStartX + markLength, markStartY);
+    pdfDoc.lineTo(markStartX, markStartY);
+    pdfDoc.lineTo(markStartX, markStartY + markLength);
+
+    pdfDoc.moveTo(ptPaperSize[0] - (markStartX + markLength), markStartY);
+    pdfDoc.lineTo(ptPaperSize[0] - markStartX, markStartY);
+    pdfDoc.lineTo(ptPaperSize[0] - markStartX, markStartY + markLength);
+
+    pdfDoc.moveTo(markStartX + markLength, ptPaperSize[1] - markStartY);
+    pdfDoc.lineTo(markStartX, ptPaperSize[1] - markStartY);
+    pdfDoc.lineTo(markStartX, ptPaperSize[1] - (markStartY + markLength));
+
+    pdfDoc.moveTo(ptPaperSize[0] - (markStartX + markLength), ptPaperSize[1] - markStartY);
+    pdfDoc.lineTo(ptPaperSize[0] - markStartX, ptPaperSize[1] - markStartY);
+    pdfDoc.lineTo(ptPaperSize[0] - markStartX, ptPaperSize[1] - (markStartY + markLength));
+
+    pdfDoc.stroke();
+  }
+
   if (canvases) {
 
     let pageNumber = 0;
@@ -77,6 +104,7 @@ export const preparePdf = async (
       if (newPageNumber > pageNumber) {
         // do the cropmarks
         cutMarks === 'crop' && makeTheCropMarks();
+        cutMarks === 'cri-cut' && makeTheCricutMarks();
         pageNumber = newPageNumber;
         pdfDoc.addPage({ margins: 0, size: ptPaperSize });
         pdfDoc.switchToPage(pageNumber);
@@ -110,6 +138,7 @@ export const preparePdf = async (
     }
   }
   cutMarks === 'crop' && makeTheCropMarks();
+  cutMarks === 'cri-cut' && makeTheCricutMarks();
   pdfDoc.end();
   downloadPromise.then((blob) => {
     const link = document.createElement('a');

src/utils/utils.ts

@@ -15,3 +15,4 @@ export const downloadBlob = (blob: Blob, name: string): void => {
 }
 
 export const fromMMtoPxAt72DPI = (mm: number): number => mm / 25.4 * 72;
+export const fromMMtoPxAt144DPI = (mm: number): number => mm / 25.4 * 144;