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');
-
Position/scale your art (X, Y, Scale)
+
Position/scale your art (X, Y, Scale)
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.
@@ -472,5 +472,5 @@ include('../globalHTML/header-1.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();