From 30b7730ebd6ae7b0396058086fb344f249a8d7fb Mon Sep 17 00:00:00 2001
From: Kyle <41976328+ImKyle4815@users.noreply.github.com>
Date: Fri, 26 Feb 2021 18:08:17 -0800
Subject: [PATCH] better prints

---
 js/main-1.js    |  2 +-
 print/index.php |  2 +-
 print/print.js  | 41 ++++++++++++++++++-----------------------
 3 files changed, 20 insertions(+), 25 deletions(-)

diff --git a/js/main-1.js b/js/main-1.js
index 9f428f77..30c89b03 100644
--- a/js/main-1.js
+++ b/js/main-1.js
@@ -65,7 +65,7 @@ function dropDrop(e) {
 	otherParams = e.target.closest('.drop-area').children[1].getAttribute('data-otherParams');
 	uploadFiles(e.dataTransfer.files, destination, otherParams);
 }
-async function uploadFiles(filesRaw, destination, otherParams) {
+async function uploadFiles(filesRaw, destination, otherParams = '') {
 	var files = ([...filesRaw]);
 	if (files.length > 9) {
 		if (!confirm('You are uploading ' + files.length + ' images. Would you like to continue?')) {
diff --git a/print/index.php b/print/index.php
index b17586b8..46e58a6d 100644
--- a/print/index.php
+++ b/print/index.php
@@ -14,7 +14,7 @@ include('../globalHTML/header-1.php');
         <h5 class='margin-bottom padding input-description'>Toggle the paper orientation (Portrait / Landscape)</h5>
         <button onclick='changeOrientation();' class='input margin-bottom'>Toggle orientation</button>
 		<h5 class='margin-bottom padding input-description'>Set the distance between cards (in pixels)</h5>
-		<input type='number' class='input margin-bottom' value='50' min='0' max='100' onchange='setCardDistance(this.value);'>
+		<input type='number' id='cardMargin' class='input margin-bottom' value='60' min='0' max='100' onchange='setCardDistance(this.value);'>
 	</div>
     <div class="layer">
         <div class='padding margin-bottom readable-background drop-area'>
diff --git a/print/print.js b/print/print.js
index a06d1b74..2294e7fe 100644
--- a/print/print.js
+++ b/print/print.js
@@ -1,12 +1,10 @@
 //Configure sizes
 var ppi = 600;
-var pageWidth = 11 * ppi;
-var pageHeight = 8.5 * ppi;
+var page = [8.5 * ppi, 11 * ppi];
 var cardWidth = 2.5 * ppi;
 var cardHeight = 3.5 * ppi;
-var cardMarginX = 50;
-var cardMarginY = 50;
-var pageOrientation = 'landscape';
+var cardMarginX = parseInt(document.querySelector('#cardMargin').value);
+var cardMarginY = parseInt(document.querySelector('#cardMargin').value);
 //Prepare variables/canvas/context
 var imageList = [];
 var canvas = document.querySelector('canvas');
@@ -22,15 +20,15 @@ function uploadCard(card) {
 }
 
 function drawSheet() {
-    canvas.width = pageWidth;
-    canvas.height = pageHeight;
-    context.clearRect(0, 0, pageWidth, pageHeight);
-    const cardsX = Math.floor(pageWidth / cardWidth);
-    const cardsY = Math.floor(pageHeight / cardHeight);
+    canvas.width = page[0];
+    canvas.height = page[1];
+    context.clearRect(0, 0, page[0], page[1]);
+    const cardsX = Math.floor(page[0] / cardWidth);
+    const cardsY = Math.floor(page[1] / cardHeight);
     var count = 0;
     for (var i = imageList.length - 1; i >= 0 && count < cardsX * cardsY; i --) {
         if (imageList[i].width > 1) {
-            context.drawImage(imageList[i], (pageWidth - cardsX * cardWidth) / 2 + (count % cardsX) * (cardWidth + cardMarginX) - cardMarginX, (pageHeight - cardsY * cardHeight) / 2 + (Math.floor(count / cardsX) % cardsY) * (cardHeight + cardMarginY) - cardMarginY, cardWidth, cardHeight);
+            context.drawImage(imageList[i], (page[0] - cardsX * cardWidth) / 2 + (count % cardsX) * (cardWidth + cardMarginX) - cardMarginX, (page[1] - cardsY * cardHeight) / 2 + (Math.floor(count / cardsX) % cardsY) * (cardHeight + cardMarginY) - cardMarginY, cardWidth, cardHeight);
         }
         count ++;
     }
@@ -46,18 +44,22 @@ async function downloadSheet() {
 }
 
 function downloadPDF() {
+    var pageOrientation = 'portrait';
+    if (page[0] > page[1]) {
+        pageOrientation = 'landscape';
+    }
     var doc = new jsPDF({
         orientation: pageOrientation,
         unit: 'in',
-        format: [pageWidth / ppi, pageHeight / ppi]
+        format: [page[0] / ppi, page[1] / ppi]
     });
-    doc.addImage(canvas.toDataURL('image/png'), 'PNG', 0, 0, pageWidth / ppi, pageHeight / ppi);
+    doc.addImage(canvas.toDataURL('image/png'), 'PNG', 0, 0, page[0] / ppi, page[1] / ppi);
     doc.save('print.pdf');
 }
 
 function setPageSize(size = [8.5, 11]) {
-    pageHeight = parseFloat(size[0]) * ppi;
-    pageWidth = parseFloat(size[1]) * ppi;
+    page[0] = parseFloat(size[0]) * ppi;
+    page[1] = parseFloat(size[1]) * ppi;
     drawSheet();
 }
 
@@ -68,13 +70,6 @@ function setCardDistance(distance) {
 }
 
 function changeOrientation() {
-    var oldWidth = pageWidth;
-    pageWidth = pageHeight;
-    pageHeight = oldWidth;
-    if (pageWidth > pageHeight) {
-        pageOrientation = 'landscape';
-    } else {
-        pageOrientation = 'portrait';
-    }
+    page = page.reverse();
     drawSheet();
 }
\ No newline at end of file