From 76a1b0ec150d32de45bac9858e16db76f3460ba5 Mon Sep 17 00:00:00 2001
From: Kyle <41976328+ImKyle4815@users.noreply.github.com>
Date: Wed, 10 Nov 2021 11:11:12 -0800
Subject: [PATCH] better cutting guides

---
 print/index.php |  8 ++++++++
 print/print.js  | 15 +++++++++++++--
 2 files changed, 21 insertions(+), 2 deletions(-)

diff --git a/print/index.php b/print/index.php
index 5b87e5b6..59a602b1 100644
--- a/print/index.php
+++ b/print/index.php
@@ -54,6 +54,14 @@ include('../globalHTML/header-1.php');
         <h4 class='padding'>
         	Upload up to nine images, and they will automatically arrange themselves on an 8.5" by 11" sheet, so you can print them at home at up to 600PPI.
         </h4>
+    </div>
+    <div style="display:none;">
+        <svg id='cuttingGuides' width="1500" height="2100" viewBox="0 0 1500 2100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
+            <path d="M1470,3L1470,0L1500,0L1500,30L1497,30L1497,3L1470,3Z" style="fill:rgb(0,166,80);"/>
+            <path d="M30,2097L30,2100L0,2100L0,2070L3,2070L3,2097L30,2097Z" style="fill:rgb(0,174,239);"/>
+            <path d="M1470,2097L1470,2100L1500,2100L1500,2070L1497,2070L1497,2097L1470,2097Z" style="fill:rgb(236,3,140);"/>
+            <path d="M30,3L30,0L0,0L0,30L3,30L3,3L30,3Z" style="fill:rgb(255,242,0);"/>
+        </svg>
     </div>
 	<script defer src='https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.5/jspdf.debug.js'></script>
     <script defer src="/print/print.js"></script>
diff --git a/print/print.js b/print/print.js
index 63d509e1..4e9a3949 100644
--- a/print/print.js
+++ b/print/print.js
@@ -12,7 +12,12 @@ var context = canvas.getContext('2d');
 var aidCanvas = document.createElement('canvas');
 var aidContext = aidCanvas.getContext('2d');
 drawSheet();
-
+//svgs
+var cuttingGuides = new Image();
+cuttingGuides.src = 'cuttingGuides.svg';
+var testImg = document.createElement('IMG');
+testImg.src = cuttingGuides.src;
+document.body.appendChild(testImg);
 
 function uploadCard(card, filename) {
     var img = new Image();
@@ -38,6 +43,9 @@ function drawSheet() {
             const cardY = (page[1] - cardsY * cardHeight) / 2 + (Math.floor(count / cardsX) % cardsY) * (cardHeight + cardMarginY) - cardMarginY;
             try {
                 context.drawImage(imageList[i], cardX * ppi, cardY * ppi, cardWidth * ppi, cardHeight * ppi);
+                if (document.querySelector('#cuttingAids').checked) {
+                    context.drawImage(cuttingGuides, cardX * ppi, cardY * ppi, cardWidth * ppi, cardHeight * ppi);
+                }
                 if (document.querySelector('#cuttingAids').checked) {
                     aidContext.fillStyle = 'black';
                     aidContext.fillRect(Math.floor((cardX - cardMarginX / 2) * ppi + 2), Math.floor((cardY - cardMarginY / 2) * ppi + 2), Math.ceil((cardWidth + cardMarginX) * ppi - 4), Math.ceil((cardHeight + cardMarginY) * ppi - 4));
@@ -94,8 +102,11 @@ function downloadPDF() {
         if (imageList[i].width > 1) {
             const cardX = (page[0] - cardsX * cardWidth) / 2 + (count % cardsX) * (cardWidth + cardMarginX) - cardMarginX;
             const cardY = (page[1] - cardsY * cardHeight) / 2 + (Math.floor(count / cardsX) % cardsY) * (cardHeight + cardMarginY) - cardMarginY;
-            console.log(`image: ${imageList[i].filename}, bounds: ${cardX}, ${cardY}, ${cardWidth}, ${cardHeight}`)
+            console.log(`image: ${imageList[i].filename}, bounds: ${cardX}, ${cardY}, ${cardWidth}, ${cardHeight}`);
             doc.addImage(imageList[i], 'PNG', cardX, cardY, cardWidth, cardHeight);
+            if (document.querySelector('#cuttingAids').checked) {
+                doc.addImage(cuttingGuides, 'PNG', cardX, cardY, cardWidth, cardHeight);
+            }
         }
         count ++;
     }