Support editing, return to previous step instead of resetting

web/_css/style.css

@@ -508,6 +508,16 @@ .object p {
 	margin-bottom: 10px;
 }
 
+.object p:last-of-type {
+	float: left;
+}
+
+.object .objectEdit {
+	float: right;
+	padding-left: 1em;
+	padding-right: 1em;
+}
+
 p.edit {
 	color: #FFFF00;
 }
@@ -548,19 +558,19 @@ #drawBackButton {
 	width: 170px;
 }
 
-#drawControls > * {
+#drawControls > div > * {
 	width: 100%;
 	display: flex;
 	justify-content: center;
 	margin-bottom: 5px;
 }
 
-#drawControls > * > * {
+#drawControls > div > * > * {
 	flex-grow: 1;
 	margin-right: 5px;
 }
 
-#drawControls > * > *:last-child {
+#drawControls > div > * > *:last-child {
 	margin-right: 0;
 }
 
@@ -666,7 +676,14 @@ #exportString {
 	flex-shrink: 0;
 }
 
-#exportCloseButton {
+.exportButtons {
+	display: flex; 
+	flex-direction: row;
+	justify-content: center;
+	gap: 1em
+}
+
+#exportButtons > * {
 	margin-bottom: 0;
 	width: 100px;
 	align-self: flex-end;

web/_js/draw.js

@@ -26,6 +26,7 @@ function initDraw(){
 	var undoButton = document.getElementById("undoButton");
 	var redoButton = document.getElementById("redoButton");
 	var highlightUnchartedLabel = document.getElementById("highlightUnchartedLabel");
+	var entryId = 0
 	
 	var objectInfoBox = document.getElementById("objectInfo");
 	var hintText = document.getElementById("hint");
@@ -35,6 +36,7 @@ function initDraw(){
 
 	var exportOverlay = document.getElementById("exportOverlay");
 	var exportCloseButton = document.getElementById("exportCloseButton");
+	var exportBackButton = document.getElementById("exportBackButton")
 
 	var rShiftPressed = false;
 	var lShiftPressed = false;
@@ -56,8 +58,8 @@ function initDraw(){
 
 	container.addEventListener("mousedown", function(e){
 		lastPos = [
-			 e.clientX
-			,e.clientY
+			 e.clientX,
+			e.clientY
 		];
 	});
 
@@ -66,8 +68,8 @@ function initDraw(){
 		y = y - container.offsetTop;
 
 		var pos = [
-			 ~~((x - (container.clientWidth/2  - innerContainer.clientWidth/2  + zoomOrigin[0]))/zoom)+0.5
-			,~~((y - (container.clientHeight/2 - innerContainer.clientHeight/2 + zoomOrigin[1]))/zoom)+0.5
+			~~((x - (container.clientWidth/2  - innerContainer.clientWidth/2  + zoomOrigin[0]))/zoom)+0.5,
+			~~((y - (container.clientHeight/2 - innerContainer.clientHeight/2 + zoomOrigin[1]))/zoom)+0.5
 		];
 		
 		if(shiftPressed && path.length > 0){
@@ -162,7 +164,7 @@ function initDraw(){
 	});
 	
 	cancelButton.addEventListener("click", function(e){
-		reset();
+		back();
 	});
 
 	document.getElementById("nameField").addEventListener("keyup", function(e){
@@ -192,9 +194,10 @@ function initDraw(){
 		exportOverlay.style.display = "none";
 	});
 
-	exportCloseButton.addEventListener("click", function(e){
-		exportDirectPost();
-	})
+	exportBackButton.addEventListener("click", function(e){
+		finish();
+		exportOverlay.style.display = "none";
+	});
 
 	document.getElementById("highlightUncharted").addEventListener("click", function(e){
 		highlightUncharted = this.checked;
@@ -203,13 +206,13 @@ function initDraw(){
 
 	function exportJson(){		
 		var exportObject = {
-			 id: 0
-			,name: document.getElementById("nameField").value
-			,description: document.getElementById("descriptionField").value
-			,website: document.getElementById("websiteField").value
-			,subreddit: document.getElementById("subredditField").value
-			,center: calculateCenter(path)
-			,path: path
+			id: entryId,
+			name: document.getElementById("nameField").value,
+			description: document.getElementById("descriptionField").value,
+			website: document.getElementById("websiteField").value,
+			subreddit: document.getElementById("subredditField").value,
+			center: calculateCenter(path),
+			path: path
 		};
 		var jsonString = JSON.stringify(exportObject, null, "\t");
 		var textarea = document.getElementById("exportString");
@@ -219,6 +222,9 @@ function initDraw(){
 		textarea.value = jsonString;
 		console.log("a");
 		var directPostUrl = "https://www.reddit.com/r/placeAtlas2/submit?selftext=true&title=New%20Submission&text="+encodeURIComponent(document.getElementById("exportString").value);
+		if (jsonString.length > 7493) {
+			directPostUrl = "https://www.reddit.com/r/placeAtlas2/submit?selftext=true&title=New%20Submission&text="+encodeURIComponent("    " + JSON.stringify(exportObject));
+		}
 		document.getElementById("exportDirectPost").href=directPostUrl;
 
 		exportOverlay.style.display = "flex";
@@ -278,12 +284,8 @@ function initDraw(){
 		drawing = false;
 		render(path);
 		objectInfoBox.style.display = "block";
+		objectDraw.style.display = "none";
 		hintText.style.display = "none";
-		finishButton.style.display = "none";
-		undoButton.style.display = "none";
-		redoButton.style.display = "none";
-		resetButton.style.display = "none";
-		highlightUnchartedLabel.style.display = "none";
 		document.getElementById("nameField").focus();
 	}
 
@@ -296,12 +298,8 @@ function initDraw(){
 		drawing = true;
 		render(path);
 		objectInfoBox.style.display = "none";
+		objectDraw.style.display = "block";
 		hintText.style.display = "block";
-		finishButton.style.display = "block";
-		undoButton.style.display = "block";
-		redoButton.style.display = "block";
-		resetButton.style.display = "block";
-		highlightUnchartedLabel.style.display = "block";
 
 		document.getElementById("nameField").value = "";
 		document.getElementById("descriptionField").value = "";
@@ -309,6 +307,14 @@ function initDraw(){
 		document.getElementById("subredditField").value = "";
 	}
 
+	function back(){
+		drawing = true;
+		render(path);
+		objectInfoBox.style.display = "none";
+		objectDraw.style.display = "block";
+		hintText.style.display = "block";
+	}
+
 	function renderBackground(){
 
 		backgroundContext.clearRect(0, 0, canvas.width, canvas.height);
@@ -384,6 +390,45 @@ function initDraw(){
 		}
 	}
 
+	const getEntry = id => {
+		const entries = atlas.filter(entry => entry.id === id)
+		if (entries.length === 1) return entries[0]
+		return {}
+	}
+
+	let params = new URLSearchParams(document.location.search)
+
+	if (params.has('id')) {
+		entry = getEntry(params.get('id'))
+		document.getElementById("nameField").value = entry.name
+		document.getElementById("descriptionField").value = entry.description
+		document.getElementById("websiteField").value = entry.website
+		document.getElementById("subredditField").value = entry.subreddit
+		path = entry.path
+		redoButton.disabled = true;
+		undoButton.disabled = false;
+		entryId = params.get('id')
+
+		if(path.length >= 3){
+			finishButton.disabled = false;
+		}
+		render(path)
+
+		zoom = 4;
+
+		zoomOrigin = [
+			innerContainer.clientWidth/2  - entry.center[0]* zoom,// + container.offsetLeft
+		   	innerContainer.clientHeight/2 - entry.center[1]* zoom// + container.offsetTop
+	   ];
+
+	   	scaleZoomOrigin = [
+		   2000/2 - entry.center[0],// + container.offsetLeft
+		   2000/2 - entry.center[1]// + container.offsetTop
+	   	];
+
+	   applyView();
+	}
+
 }
 
 

web/_js/infoblock.js

@@ -85,5 +85,11 @@ function createInfoBlock(entry) {
     idElement.style.fontFamily = "Dejavu Sans Mono, sans, Sans-Serif;";
     element.appendChild(idElement);
 
+    let editElement = document.createElement("a");
+    editElement.innerText = "Edit"
+    editElement.className = "objectEdit"
+    editElement.href = "./?mode=draw&id=" + entry.id
+    element.appendChild(editElement);
+
     return element;
 }

web/index.html

@@ -183,15 +183,17 @@ <h1 id="title">The 2022 /r/place Atlas</h1>
 			<div id="drawControlsContainer">
 				<a id="drawBackButton" class="button" href="./">&lt; Back to the Atlas</a>
 				<div id="drawControls">
-					<div>
-						<button id="undoButton" disabled>Undo</button>
-						<button disabled id="redoButton">Redo</button>
+					<div id="objectDraw">
+						<div>
+							<button id="undoButton" disabled>Undo</button>
+							<button disabled id="redoButton">Redo</button>
+						</div>
+						<button disabled id="finishButton">Finish (Enter)</button>
+						<button id="resetButton">Reset</button>
+						<label id="highlightUnchartedLabel" title="Highlight uncharted areas of the map" class="checkboxLabel">
+							<input type="checkbox" id="highlightUncharted" checked> Highlight Empty
+						</label>
 					</div>
-					<button disabled id="finishButton">Finish (Enter)</button>
-					<button id="resetButton">Reset</button>
-					<label id="highlightUnchartedLabel" title="Highlight uncharted areas of the map" class="checkboxLabel">
-						<input type="checkbox" id="highlightUncharted" checked> Highlight Empty
-					</label>
 					<div id="objectInfo">
 						<label for="nameField">Name</label>
 						<input id="nameField" type="text" value="" placeholder="A short title">
@@ -202,7 +204,7 @@ <h1 id="title">The 2022 /r/place Atlas</h1>
 						<label for="subredditField">Subreddit</label>
 						<input id="subredditField" type="text" value="" placeholder="/r/example">
 						<div id="infoButtons">
-							<button id="cancelButton">Cancel</button>
+							<button id="cancelButton">Back</button>
 							<button id="exportButton">OK</button>
 						</div>
 					</div>
@@ -227,7 +229,7 @@ <h1 id="title">The 2022 /r/place Atlas</h1>
 			<div id="exportOverlay" class="overlay">
 				<div id="exportWindow">
 					<p><b>Recommended:</b> Post directly after clicking this button. Don't forget to flair it with the "New Entry" tag. </p>
-					<div style="display:flex; flex-direction:column;align-items:center">
+					<div class="exportButtons">
 						<a href="_blank" id="exportDirectPost" class="button">Post Direct to Reddit</a>
 					</div>
 					<hr style="border-bottom: solid black 1px"/>
@@ -237,7 +239,8 @@ <h1 id="title">The 2022 /r/place Atlas</h1>
 					<p>Don't forget to flair it with the "New Entry" tag.</p>
 					<p>We will then check it and add it to the atlas.</p>
 					<textarea cols="20" rows="5" id="exportString"></textarea>
-					<div style="display:flex; flex-direction:column;align-items:center">
+					<div  class="exportButtons" id="exportButtons">
+						<button id="exportBackButton">Back</button>
 						<button id="exportCloseButton">Done</button>
 					</div>
 				</div>