more mask controls

creator/index.php

@@ -50,6 +50,15 @@ include('../globalHTML/header-1.php');
 					<span class='checkmark'></span>
 				</label>
 			</div>
+			<div>
+				<h5 class='input-description'>Select and remove masks</h5>
+				<select id='frame-editor-masks' class='input margin-bottom'></select>
+				<button onclick='frameElementMaskRemoved();' class='input'>Remove mask</button>
+			</div>
+			<div class='drop-area'>
+	            <h5 class='margin-bottom padding input-description'>Drag and drop masks to add</h5>
+	            <input type='file' multiple accept='.png, .svg, .jpg, .jpeg, .bmp' placeholder='File Upload' class='input' oninput='uploadFiles(event.target.files, uploadMaskOption);' data-dropFunction='uploadMaskOption' data-otherParams=''>
+			</div>
 		</div>
 		<div id='textbox-editor' class='textbox-editor'>
 			<h2 class='textbox-editor-title'>Textbox Editor</h2>
@@ -490,5 +499,5 @@ include('../globalHTML/header-1.php');
 			</h4>
 		</div>
 	</div>
-	<script defer src='/js/creator-18.js'></script>
+	<script defer src='/js/creator-19.js'></script>
 <?php include('../globalHTML/footer.php'); ?>

js/creator-19.js

@@ -46,10 +46,12 @@ var previewContext = previewCanvas.getContext('2d');
 var canvasList = [];
 //frame/mask picker stuff
 var availableFrames = [];
+var selectedFrame = null;
 var selectedFrameIndex = 0;
 var selectedMaskIndex = 0;
 var selectedTextIndex = 0;
 var replacementMasks = {};
+var customCount = 0;
 //for imports
 var scryfallArt;
 var scryfallCard;
@@ -491,12 +493,13 @@ function removeFrame(event) {
 function frameElementClicked(event) {
 	if (!event.target.classList.contains('frame-element-close')) {
 		var selectedFrameElement = event.target.closest('.frame-element');
-		var selectedFrame = card.frames[Array.from(selectedFrameElement.parentElement.children).indexOf(selectedFrameElement)];
+		selectedFrame = card.frames[Array.from(selectedFrameElement.parentElement.children).indexOf(selectedFrameElement)];
 		document.querySelector('#frame-element-editor').classList.add('opened');
 		selectedFrame.bounds = selectedFrame.bounds || {};
 		if (selectedFrame.ogBounds == undefined) {
 			selectedFrame.ogBounds = JSON.parse(JSON.stringify(selectedFrame.bounds));
 		}
+		// Basic manipulations
 		document.querySelector('#frame-editor-x').value = scaleWidth(selectedFrame.bounds.x || 0);
 		document.querySelector('#frame-editor-x').onchange = (event) => {selectedFrame.bounds.x = (event.target.value / card.width); drawFrames();}
 		document.querySelector('#frame-editor-y').value = scaleHeight(selectedFrame.bounds.y || 0);
@@ -511,10 +514,46 @@ function frameElementClicked(event) {
 		document.querySelector('#frame-editor-erase').onchange = (event) => {selectedFrame.erase = event.target.checked; drawFrames();}
 		document.querySelector('#frame-editor-alpha').checked = selectedFrame.preserveAlpha || false;
 		document.querySelector('#frame-editor-alpha').onchange = (event) => {selectedFrame.preserveAlpha = event.target.checked; drawFrames();}
+		// Removing masks
+		const selectMaskElement = document.querySelector('#frame-editor-masks');
+		selectMaskElement.innerHTML = null;
+		const maskOptionNone = document.createElement('option');
+		maskOptionNone.disabled = true;
+		maskOptionNone.innerHTML = 'None Selected';
+		selectMaskElement.appendChild(maskOptionNone);
+		selectedFrame.masks.forEach(mask => {
+			const maskOption = document.createElement('option');
+			maskOption.innerHTML = mask.name;
+			selectMaskElement.appendChild(maskOption);
+		});
+		selectMaskElement.selectedIndex = 0;
 	}
 }
+function frameElementMaskRemoved() {
+	const selectElement = document.querySelector('#frame-editor-masks');
+	const selectedOption = selectElement.value;
+	console.log(selectedOption)
+	if (selectedOption != 'None Selected') {
+		selectElement.remove(selectElement.selectedIndex);
+		selectElement.selectedIndex = 0;
+		selectedFrame.masks.forEach(mask => {
+			if (mask.name == selectedOption) {
+				selectedFrame.masks = selectedFrame.masks.filter(item => item.name != selectedOption);
+				drawFrames();
+			}
+		});
+	}
+}
+function uploadMaskOption(imageSource) {
+	const uploadedMask = {name:`Uploaded Image (${customCount})`, src:imageSource, noThumb:true, image: new Image()};
+	customCount ++;
+	selectedFrame.masks.push(uploadedMask);
+	uploadedMask.image.onload = drawFrames;
+	uploadedMask.image.src = imageSource;
+}
 function uploadFrameOption(imageSource) {
-	var uploadedFrame = {name:'Uploaded Image', src:imageSource, noThumb:true}
+	const uploadedFrame = {name:`Uploaded Image (${customCount})`, src:imageSource, noThumb:true};
+	customCount ++;
 	availableFrames.push(uploadedFrame);
 	loadFramePack();
 }