From 987d1d248d954bc91187095cbba8a9bc2b0f0d61 Mon Sep 17 00:00:00 2001
From: Asturur <andreabogazzi79@gmail.com>
Date: Sat, 13 Apr 2024 16:47:49 +0200
Subject: [PATCH 1/2] test

---
 src/components/PrintModal.tsx  |  8 ++++----
 src/contexts/appData.ts        |  2 +-
 src/printTemplates.ts          | 10 ++++++++++
 src/utils/generateCutShapes.ts | 23 ++++++++++++-----------
 src/utils/preparePdfKit.ts     | 29 +++++++++++++++++++++++++++++
 src/utils/utils.ts             |  1 +
 6 files changed, 57 insertions(+), 16 deletions(-)

diff --git a/src/components/PrintModal.tsx b/src/components/PrintModal.tsx
index ad77f68e..1e418cb1 100644
--- a/src/components/PrintModal.tsx
+++ b/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' })}
diff --git a/src/contexts/appData.ts b/src/contexts/appData.ts
index a62dbc2c..2d146430 100644
--- a/src/contexts/appData.ts
+++ b/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';
 };
 
diff --git a/src/printTemplates.ts b/src/printTemplates.ts
index 9f11ca02..aec83f21 100644
--- a/src/printTemplates.ts
+++ b/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',
diff --git a/src/utils/generateCutShapes.ts b/src/utils/generateCutShapes.ts
index 1d4ee22d..042a03b2 100644
--- a/src/utils/generateCutShapes.ts
+++ b/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`);
+  const cElement = canvas.toCanvasElement();
+  cElement.toBlob((blob) => {
+    downloadBlob(blob!, `${printerTemplate.label}.png`);
+  });
 }
\ No newline at end of file
diff --git a/src/utils/preparePdfKit.ts b/src/utils/preparePdfKit.ts
index 84e53434..befdf357 100644
--- a/src/utils/preparePdfKit.ts
+++ b/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');
diff --git a/src/utils/utils.ts b/src/utils/utils.ts
index 2c60dd0a..8177acaa 100644
--- a/src/utils/utils.ts
+++ b/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;

From cbb5469c485ac5831f25e843c9a5f206ec8dde6c Mon Sep 17 00:00:00 2001
From: Asturur <andreabogazzi79@gmail.com>
Date: Sat, 13 Apr 2024 22:40:16 +0200
Subject: [PATCH 2/2] magenta

---
 src/utils/generateCutShapes.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/utils/generateCutShapes.ts b/src/utils/generateCutShapes.ts
index 042a03b2..0fe00acd 100644
--- a/src/utils/generateCutShapes.ts
+++ b/src/utils/generateCutShapes.ts
@@ -41,7 +41,7 @@ export const generateCutShapes = async (printOptions: PrintOptions, _template: t
     canvas.add(shape);
     shape.setPositionByOrigin(new Point(xStart, yStart), 'left', 'top');
   }
-
+  canvas.backgroundColor = 'magenta';
   const cElement = canvas.toCanvasElement();
   cElement.toBlob((blob) => {
     downloadBlob(blob!, `${printerTemplate.label}.png`);