From 453beec2fbf58d74bdd85f1027cca2f0886fa030 Mon Sep 17 00:00:00 2001
From: Kyle <41976328+ImKyle4815@users.noreply.github.com>
Date: Sat, 1 May 2021 15:59:38 -0700
Subject: [PATCH] art visual editor

---
 creator/index.php                   |  4 +--
 js/{creator-14.js => creator-15.js} | 46 +++++++++++++++++++++++++++++
 2 files changed, 48 insertions(+), 2 deletions(-)
 rename js/{creator-14.js => creator-15.js} (98%)

diff --git a/creator/index.php b/creator/index.php
index 3358a74b..b71569f2 100644
--- a/creator/index.php
+++ b/creator/index.php
@@ -231,7 +231,7 @@ include('../globalHTML/header-1.php');
 							</div>
 						</div>
 						<div class='readable-background padding margin-bottom'>
-							<h5 class='margin-bottom padding input-description'>Position/scale your art (X, Y, Scale)</h5>
+							<h5 class='margin-bottom padding input-description'>Position/scale your art (X, Y, Scale)<br>Art is now visually adjustable! Click and drag anywhere on the card to move your art around, and hold shift while doing so to scale your art.</h5>
 							<div class='input-grid margin-bottom'>
 								<input id='art-x' type='number' class='input' oninput='artEdited();' value=0>
 								<input id='art-y' type='number' class='input' oninput='artEdited();' value=0>
@@ -472,5 +472,5 @@ include('../globalHTML/header-1.php');
 			</h4>
 		</div>
 	</div>
-	<script defer src='/js/creator-14.js'></script>
+	<script defer src='/js/creator-15.js'></script>
 <?php include('../globalHTML/footer.php'); ?>
\ No newline at end of file
diff --git a/js/creator-14.js b/js/creator-15.js
similarity index 98%
rename from js/creator-14.js
rename to js/creator-15.js
index 5f2a15f5..2be99119 100644
--- a/js/creator-14.js
+++ b/js/creator-15.js
@@ -980,6 +980,51 @@ function changeArtIndex() {
 		artistEdited(scryfallArt[document.querySelector('#art-index').value - 1].artist);
 	}
 }
+function initDraggableArt() {
+	previewCanvas.onmousedown = artStartDrag;
+	previewCanvas.onmousemove = artDrag;
+	previewCanvas.onmouseout = artStopDrag;
+	previewCanvas.onmouseup = artStopDrag;
+	draggingArt = false;
+	lastArtDragTime = 0;
+}
+function artStartDrag(e) {
+	e.preventDefault();
+	e.stopPropagation();
+	startX = parseInt(e.clientX);
+	startY = parseInt(e.clientY);
+	draggingArt = true;
+}
+function artDrag(e) {
+	e.preventDefault();
+	e.stopPropagation();
+	if (draggingArt && Date.now() > lastArtDragTime + 25) {
+		lastArtDragTime = Date.now();
+		if (e.shiftKey) {
+			startX = parseInt(e.clientX);
+			const endY = parseInt(e.clientY);
+			document.querySelector('#art-zoom').value = Math.round((parseFloat(document.querySelector('#art-zoom').value) * (1.002 ** (startY - endY))) * 10) / 10;
+			startY = endY;
+			artEdited();
+		} else {
+			const endX = parseInt(e.clientX);
+			const endY = parseInt(e.clientY);
+			document.querySelector('#art-x').value = parseInt(document.querySelector('#art-x').value) + (endX - startX) * 2;
+			document.querySelector('#art-y').value = parseInt(document.querySelector('#art-y').value) + (endY - startY) * 2;
+			startX = endX;
+			startY = endY;
+			artEdited();
+		}
+		
+	}
+}
+function artStopDrag(e) {
+	e.preventDefault();
+	e.stopPropagation();
+	if (draggingArt) {
+		draggingArt = false;
+	}
+}
 //SET SYMBOL TAB
 function uploadSetSymbol(imageSource, otherParams) {
 	setSymbol.src = imageSource;
@@ -1546,3 +1591,4 @@ document.querySelector('#autoLoadFrameVersion').checked = 'true' == localStorage
 document.querySelector('#info-number').value = date.getFullYear();
 loadScript('/js/frames/groupStandard-3.js');
 loadAvailableCards();
+initDraggableArt();