Keep current view state when editing or exiting edit

web/_js/draw.js

@@ -68,17 +68,23 @@ const periodClipboard = {
 	"path": null
 }
 
-	;[...document.querySelectorAll("#objectInfo textarea")].forEach(el => {
-		el.addEventListener("input", function () {
-			this.style.height = "auto"
-			this.style.height = (this.scrollHeight) + "px"
-		})
+const drawBackButton = document.createElement("a")
+drawBackButton.className = "btn btn-outline-primary"
+drawBackButton.id = "drawBackButton"
+drawBackButton.textContent = "Exit Draw Mode"
+
+;[...document.querySelectorAll("#objectInfo textarea")].forEach(el => {
+	el.addEventListener("input", function () {
+		this.style.height = "auto"
+		this.style.height = (this.scrollHeight) + "px"
 	})
+})
 
 window.initDraw = initDraw
 function initDraw() {
 	// Adds exit draw button and removes list button
-	showListButton.insertAdjacentHTML("afterend", '<button class="btn btn-outline-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasDraw" aria-controls="offcanvasDraw">Menu</button><a id="drawBackButton" class="btn btn-outline-primary" href="./">Exit Draw Mode</a>')
+	showListButton.insertAdjacentHTML("afterend", '<button class="btn btn-outline-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasDraw" aria-controls="offcanvasDraw">Menu</button>')
+	showListButton.parentElement.appendChild(drawBackButton)
 	showListButton.remove()
 
 	// Opens draw menu
@@ -694,6 +700,7 @@ function initDraw() {
 		inputGroup.appendChild(inputButton)
 	}
 
+	let entryId
 	if (params.has('id')) {
 		entryId = params.get('id')
 		const entry = getEntry(entryId)
@@ -775,6 +782,12 @@ function initDraw() {
 		initPeriodGroups()
 	})
 
+	drawBackButton.href = "./" + formatHash(entryId, currentPeriod, currentPeriod, currentVariation)
+
+	document.addEventListener('timeupdate', (event) => {
+		drawBackButton.href = "./" + formatHash(entryId, event.detail.period, event.detail.period, event.detail.variation)
+	})
+
 }
 
 function calculateCenter(path) {

web/_js/infoblock.js

@@ -46,11 +46,7 @@ function createInfoBlock(entry, isPreview) {
 	const linkElement = document.createElement("a")
 	linkElement.className = "text-decoration-none d-flex justify-content-between text-body"
 	if (isPreview) linkElement.href = "#"
-	else {
-		const targetPeriod = formatPeriod(currentPeriod, currentPeriod, currentVariation)
-		linkElement.href = "#" + entry.id
-		if (targetPeriod && targetPeriod !== defaultPeriod) linkElement.href += "/" + targetPeriod
-	}
+	else linkElement.href = formatHash(entry.id)
 	const linkNameElement = document.createElement("span")
 	linkNameElement.className = "flex-grow-1 text-break"
 	linkNameElement.textContent = entry.name
@@ -184,7 +180,7 @@ function createInfoBlock(entry, isPreview) {
 		const editElement = document.createElement("a")
 		editElement.textContent = "Edit"
 		editElement.className = "btn btn-sm btn-outline-primary"
-		editElement.href = "./?mode=draw&id=" + entry.id
+		editElement.href = "./?mode=draw&id=" + entry.id + formatHash(undefined)
 		editElement.title = "Edit " + entry.name
 		idElementContainer.appendChild(editElement)
 	}

web/_js/time.js

@@ -290,10 +290,12 @@ variantsEl.addEventListener("input", (event) => {
 	updateTime(-1, event.target.value)
 })
 
-const dispatchTimeUpdateEvent = (period = timelineSlider.value, atlas = atlas) => {
+const dispatchTimeUpdateEvent = (period = currentPeriod, variation = currentVariation, atlas = atlas) => {
 	const timeUpdateEvent = new CustomEvent('timeupdate', {
 		detail: {
 			period: period,
+			variation: variation,
+			periodString: formatPeriod(period, period, variation),
 			atlas: atlas
 		}
 	})
@@ -421,7 +423,7 @@ async function updateTime(newPeriod = currentPeriod, newVariation = currentVaria
 		})
 	}
 
-	dispatchTimeUpdateEvent(newPeriod, atlas)
+	dispatchTimeUpdateEvent(newPeriod, newVariation, atlas)
 	delete document.body.dataset.canvasLoading
 	tooltip.dataset.forceVisible = ""
 	clearTimeout(tooltipDelayHide)
@@ -477,6 +479,10 @@ function parsePeriod(periodString) {
 }
 
 function formatPeriod(start, end, variation) {
+	start ??= currentPeriod
+	end ??= currentPeriod
+	variation ??= currentVariation
+
 	let periodString, variationString
 	variationString = variationsConfig[variation].code
 	if (start > end) [start, end] = [end, start]
@@ -491,3 +497,15 @@ function formatPeriod(start, end, variation) {
 	if (variationString) return variationString
 	return periodString
 }
+
+function formatHash(id, start, end, variation) {
+	start ??= currentPeriod
+	end ??= currentPeriod
+	variation ??= currentVariation
+	
+	const result = [id]
+	const targetPeriod = formatPeriod(start, end, variation)
+	if (targetPeriod && targetPeriod !== defaultPeriod) result.push(targetPeriod)
+	if (!result.some(el => el || el === 0)) return ''
+	return '#' + result.join('/')
+}

web/_js/view.js

@@ -903,6 +903,12 @@ function initGlobal() {
 			updateHovering(e)
 		}
 	})
+
+	document.addEventListener('timeupdate', (event) => {
+		let hashData = window.location.hash.substring(1).split('/')
+		const targetHash = formatHash(hashData[0], event.detail.period, event.detail.period, event.detail.variation)
+		if (location.hash !== targetHash) history.replaceState({}, "", targetHash)
+	})
 }
 
 function initViewGlobal() {
@@ -952,4 +958,8 @@ function initViewGlobal() {
 	if (window.location.hash) { // both "/" and just "/#" will be an empty hash string
 		highlightEntryFromUrl()
 	}
+
+	document.addEventListener('timeupdate', (event) => {
+		drawButton.href = "./?mode=draw" + formatHash(undefined, event.detail.period, event.detail.period, event.detail.variation)
+	})
 }