mirror of
https://github.com/placeAtlas/atlas.git
synced 2024-09-28 21:49:06 +02:00
Support editing, return to previous step instead of resetting
This commit is contained in:
parent
d6ea3c82cb
commit
dd5e809e4f
4 changed files with 111 additions and 40 deletions
|
@ -508,6 +508,16 @@ .object p {
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.object p:last-of-type {
|
||||||
|
float: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.object .objectEdit {
|
||||||
|
float: right;
|
||||||
|
padding-left: 1em;
|
||||||
|
padding-right: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
p.edit {
|
p.edit {
|
||||||
color: #FFFF00;
|
color: #FFFF00;
|
||||||
}
|
}
|
||||||
|
@ -548,19 +558,19 @@ #drawBackButton {
|
||||||
width: 170px;
|
width: 170px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#drawControls > * {
|
#drawControls > div > * {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
margin-bottom: 5px;
|
margin-bottom: 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#drawControls > * > * {
|
#drawControls > div > * > * {
|
||||||
flex-grow: 1;
|
flex-grow: 1;
|
||||||
margin-right: 5px;
|
margin-right: 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#drawControls > * > *:last-child {
|
#drawControls > div > * > *:last-child {
|
||||||
margin-right: 0;
|
margin-right: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -666,7 +676,14 @@ #exportString {
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
#exportCloseButton {
|
.exportButtons {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 1em
|
||||||
|
}
|
||||||
|
|
||||||
|
#exportButtons > * {
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
width: 100px;
|
width: 100px;
|
||||||
align-self: flex-end;
|
align-self: flex-end;
|
||||||
|
|
|
@ -26,6 +26,7 @@ function initDraw(){
|
||||||
var undoButton = document.getElementById("undoButton");
|
var undoButton = document.getElementById("undoButton");
|
||||||
var redoButton = document.getElementById("redoButton");
|
var redoButton = document.getElementById("redoButton");
|
||||||
var highlightUnchartedLabel = document.getElementById("highlightUnchartedLabel");
|
var highlightUnchartedLabel = document.getElementById("highlightUnchartedLabel");
|
||||||
|
var entryId = 0
|
||||||
|
|
||||||
var objectInfoBox = document.getElementById("objectInfo");
|
var objectInfoBox = document.getElementById("objectInfo");
|
||||||
var hintText = document.getElementById("hint");
|
var hintText = document.getElementById("hint");
|
||||||
|
@ -35,6 +36,7 @@ function initDraw(){
|
||||||
|
|
||||||
var exportOverlay = document.getElementById("exportOverlay");
|
var exportOverlay = document.getElementById("exportOverlay");
|
||||||
var exportCloseButton = document.getElementById("exportCloseButton");
|
var exportCloseButton = document.getElementById("exportCloseButton");
|
||||||
|
var exportBackButton = document.getElementById("exportBackButton")
|
||||||
|
|
||||||
var rShiftPressed = false;
|
var rShiftPressed = false;
|
||||||
var lShiftPressed = false;
|
var lShiftPressed = false;
|
||||||
|
@ -56,8 +58,8 @@ function initDraw(){
|
||||||
|
|
||||||
container.addEventListener("mousedown", function(e){
|
container.addEventListener("mousedown", function(e){
|
||||||
lastPos = [
|
lastPos = [
|
||||||
e.clientX
|
e.clientX,
|
||||||
,e.clientY
|
e.clientY
|
||||||
];
|
];
|
||||||
});
|
});
|
||||||
|
|
||||||
|
@ -66,8 +68,8 @@ function initDraw(){
|
||||||
y = y - container.offsetTop;
|
y = y - container.offsetTop;
|
||||||
|
|
||||||
var pos = [
|
var pos = [
|
||||||
~~((x - (container.clientWidth/2 - innerContainer.clientWidth/2 + zoomOrigin[0]))/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
|
~~((y - (container.clientHeight/2 - innerContainer.clientHeight/2 + zoomOrigin[1]))/zoom)+0.5
|
||||||
];
|
];
|
||||||
|
|
||||||
if(shiftPressed && path.length > 0){
|
if(shiftPressed && path.length > 0){
|
||||||
|
@ -162,7 +164,7 @@ function initDraw(){
|
||||||
});
|
});
|
||||||
|
|
||||||
cancelButton.addEventListener("click", function(e){
|
cancelButton.addEventListener("click", function(e){
|
||||||
reset();
|
back();
|
||||||
});
|
});
|
||||||
|
|
||||||
document.getElementById("nameField").addEventListener("keyup", function(e){
|
document.getElementById("nameField").addEventListener("keyup", function(e){
|
||||||
|
@ -192,9 +194,10 @@ function initDraw(){
|
||||||
exportOverlay.style.display = "none";
|
exportOverlay.style.display = "none";
|
||||||
});
|
});
|
||||||
|
|
||||||
exportCloseButton.addEventListener("click", function(e){
|
exportBackButton.addEventListener("click", function(e){
|
||||||
exportDirectPost();
|
finish();
|
||||||
})
|
exportOverlay.style.display = "none";
|
||||||
|
});
|
||||||
|
|
||||||
document.getElementById("highlightUncharted").addEventListener("click", function(e){
|
document.getElementById("highlightUncharted").addEventListener("click", function(e){
|
||||||
highlightUncharted = this.checked;
|
highlightUncharted = this.checked;
|
||||||
|
@ -203,13 +206,13 @@ function initDraw(){
|
||||||
|
|
||||||
function exportJson(){
|
function exportJson(){
|
||||||
var exportObject = {
|
var exportObject = {
|
||||||
id: 0
|
id: entryId,
|
||||||
,name: document.getElementById("nameField").value
|
name: document.getElementById("nameField").value,
|
||||||
,description: document.getElementById("descriptionField").value
|
description: document.getElementById("descriptionField").value,
|
||||||
,website: document.getElementById("websiteField").value
|
website: document.getElementById("websiteField").value,
|
||||||
,subreddit: document.getElementById("subredditField").value
|
subreddit: document.getElementById("subredditField").value,
|
||||||
,center: calculateCenter(path)
|
center: calculateCenter(path),
|
||||||
,path: path
|
path: path
|
||||||
};
|
};
|
||||||
var jsonString = JSON.stringify(exportObject, null, "\t");
|
var jsonString = JSON.stringify(exportObject, null, "\t");
|
||||||
var textarea = document.getElementById("exportString");
|
var textarea = document.getElementById("exportString");
|
||||||
|
@ -219,6 +222,9 @@ function initDraw(){
|
||||||
textarea.value = jsonString;
|
textarea.value = jsonString;
|
||||||
console.log("a");
|
console.log("a");
|
||||||
var directPostUrl = "https://www.reddit.com/r/placeAtlas2/submit?selftext=true&title=New%20Submission&text="+encodeURIComponent(document.getElementById("exportString").value);
|
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;
|
document.getElementById("exportDirectPost").href=directPostUrl;
|
||||||
|
|
||||||
exportOverlay.style.display = "flex";
|
exportOverlay.style.display = "flex";
|
||||||
|
@ -278,12 +284,8 @@ function initDraw(){
|
||||||
drawing = false;
|
drawing = false;
|
||||||
render(path);
|
render(path);
|
||||||
objectInfoBox.style.display = "block";
|
objectInfoBox.style.display = "block";
|
||||||
|
objectDraw.style.display = "none";
|
||||||
hintText.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();
|
document.getElementById("nameField").focus();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -296,12 +298,8 @@ function initDraw(){
|
||||||
drawing = true;
|
drawing = true;
|
||||||
render(path);
|
render(path);
|
||||||
objectInfoBox.style.display = "none";
|
objectInfoBox.style.display = "none";
|
||||||
|
objectDraw.style.display = "block";
|
||||||
hintText.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("nameField").value = "";
|
||||||
document.getElementById("descriptionField").value = "";
|
document.getElementById("descriptionField").value = "";
|
||||||
|
@ -309,6 +307,14 @@ function initDraw(){
|
||||||
document.getElementById("subredditField").value = "";
|
document.getElementById("subredditField").value = "";
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function back(){
|
||||||
|
drawing = true;
|
||||||
|
render(path);
|
||||||
|
objectInfoBox.style.display = "none";
|
||||||
|
objectDraw.style.display = "block";
|
||||||
|
hintText.style.display = "block";
|
||||||
|
}
|
||||||
|
|
||||||
function renderBackground(){
|
function renderBackground(){
|
||||||
|
|
||||||
backgroundContext.clearRect(0, 0, canvas.width, canvas.height);
|
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();
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
|
@ -85,5 +85,11 @@ function createInfoBlock(entry) {
|
||||||
idElement.style.fontFamily = "Dejavu Sans Mono, sans, Sans-Serif;";
|
idElement.style.fontFamily = "Dejavu Sans Mono, sans, Sans-Serif;";
|
||||||
element.appendChild(idElement);
|
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;
|
return element;
|
||||||
}
|
}
|
|
@ -183,15 +183,17 @@ <h1 id="title">The 2022 /r/place Atlas</h1>
|
||||||
<div id="drawControlsContainer">
|
<div id="drawControlsContainer">
|
||||||
<a id="drawBackButton" class="button" href="./">< Back to the Atlas</a>
|
<a id="drawBackButton" class="button" href="./">< Back to the Atlas</a>
|
||||||
<div id="drawControls">
|
<div id="drawControls">
|
||||||
<div>
|
<div id="objectDraw">
|
||||||
<button id="undoButton" disabled>Undo</button>
|
<div>
|
||||||
<button disabled id="redoButton">Redo</button>
|
<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>
|
</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">
|
<div id="objectInfo">
|
||||||
<label for="nameField">Name</label>
|
<label for="nameField">Name</label>
|
||||||
<input id="nameField" type="text" value="" placeholder="A short title">
|
<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>
|
<label for="subredditField">Subreddit</label>
|
||||||
<input id="subredditField" type="text" value="" placeholder="/r/example">
|
<input id="subredditField" type="text" value="" placeholder="/r/example">
|
||||||
<div id="infoButtons">
|
<div id="infoButtons">
|
||||||
<button id="cancelButton">Cancel</button>
|
<button id="cancelButton">Back</button>
|
||||||
<button id="exportButton">OK</button>
|
<button id="exportButton">OK</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -227,7 +229,7 @@ <h1 id="title">The 2022 /r/place Atlas</h1>
|
||||||
<div id="exportOverlay" class="overlay">
|
<div id="exportOverlay" class="overlay">
|
||||||
<div id="exportWindow">
|
<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>
|
<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>
|
<a href="_blank" id="exportDirectPost" class="button">Post Direct to Reddit</a>
|
||||||
</div>
|
</div>
|
||||||
<hr style="border-bottom: solid black 1px"/>
|
<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>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>
|
<p>We will then check it and add it to the atlas.</p>
|
||||||
<textarea cols="20" rows="5" id="exportString"></textarea>
|
<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>
|
<button id="exportCloseButton">Done</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
Loading…
Reference in a new issue