Make zoom button cycle 100%, fit width, fit both.

When zoomed in manually, cycle downwards.

2 files changed, 94 insertions, 43 deletions

diff --git a/public/common/client.css b/public/common/client.css
index 2912f1c..081cb9f 100644
--- a/public/common/client.css
+++ b/public/common/client.css
@@ -117,6 +117,7 @@ main {
 	grid-row: 2/4;
 	overflow: auto;
 	scrollbar-width: none;
+	scrollbar-color: #888 #444;
 }
 
 aside {
@@ -439,7 +440,7 @@ menu li:hover img {
 	margin: 0 auto;
 }
 
-#mapwrap.fit {
+#mapwrap[data-fit="width"], #mapwrap[data-fit="both"] {
 	max-width: 100%;
 }
 
diff --git a/public/common/client.js b/public/common/client.js
index 02391ec..417efb2 100644
--- a/public/common/client.js
+++ b/public/common/client.js
@@ -944,6 +944,11 @@ var update_layout = function () {}
 	e_scroll.appendChild(e_outer)
 
 	const mapwrap = document.getElementById("mapwrap")
+	if (mapwrap) {
+		mapwrap.dataset.fit = "none"
+		mapwrap.dataset.scale = 1
+	}
+
 	const map = document.getElementById("map") || e_inner.querySelector("div")
 	var map_w = mapwrap ? mapwrap.clientWidth : map.clientWidth
 	var map_h = mapwrap ? mapwrap.clientHeight : map.clientHeight
@@ -1009,62 +1014,107 @@ var update_layout = function () {}
 		}
 	}
 
+	function should_fit_width(old) {
+		return (map_w <= map_h) && (e_scroll.clientWidth / map_w < old)
+	}
+
+	function should_fit_both(old) {
+		return (e_scroll.clientWidth / map_w < old) || (e_scroll.offsetHeight / map_h < old)
+	}
+
 	function toggle_zoom_imp() {
 		if (transform1.scale === 1) {
-			if (window.innerWidth > 800) {
-				if (mapwrap) {
-					mapwrap.classList.toggle("fit")
-					update_map_fit()
-					return
-				}
+			if (mapwrap && window.innerWidth > 800) {
+				cycle_map_fit()
+				return
 			}
-			let win_w = e_scroll.clientWidth
-			let win_h = e_scroll.offsetHeight
-			let min_z = Math.min(MIN_ZOOM, win_w / map_w, win_h / map_h)
-			zoom_to(min_z)
-		} else {
-			zoom_to(1)
 		}
-		return false
+
+		if (transform1.scale > 1)
+			zoom_to(1)
+		else if (should_fit_width(transform1.scale))
+			zoom_to(e_scroll.clientWidth / map_w)
+		else if (should_fit_both(transform1.scale))
+			zoom_to(Math.min(e_scroll.clientWidth / map_w, e_scroll.offsetHeight / map_h))
+		else
+			zoom_to(1)
 	}
 
 	function update_layout_imp() {
 		update_map_fit()
-		update_transform_resize()
+		update_transform_on_resize()
 		scroll_log_to_end()
 	}
 
-	function update_map_fit() {
-		let mapwrap = document.getElementById("mapwrap")
+	function disable_map_fit() {
 		if (mapwrap) {
-			let main = document.querySelector("main")
-			let map = document.getElementById("map")
-			map.style.transform = null
+			let scale = Number(mapwrap.dataset.scale)
+			if (scale !== 1) {
+				transform1.x = -e_scroll.scrollLeft
+				transform1.y = -e_scroll.scrollTop
+				transform1.scale = scale
+			}
+
+			mapwrap.dataset.fit = "none"
+			mapwrap.dataset.scale = 1
 			mapwrap.style.width = null
 			mapwrap.style.height = null
-			if (mapwrap.classList.contains("fit")) {
-				let cw = map.clientWidth
-				let ch = map.clientHeight
-				let scale = Math.min(
-					main.clientWidth / cw,
-					main.offsetHeight / ch
-				)
-				if (scale < 1) {
-					map.style.transform = "scale(" + scale + ")"
-					mapwrap.style.width = (cw * scale) + "px"
-					mapwrap.style.height = (ch * scale) + "px"
+			map.style.transform = null
+
+			if (scale !== 1)
+				update_transform()
+		}
+	}
+
+	function cycle_map_fit() {
+		switch (mapwrap.dataset.fit) {
+			default:
+			case "none":
+				if (should_fit_width(1)) {
+					mapwrap.dataset.fit = "width"
+					break
 				}
-			}
-			update_transform_resize()
+			case "width":
+				if (should_fit_both(1)) {
+					mapwrap.dataset.fit = "both"
+					break
+				}
+			case "both":
+				mapwrap.dataset.fit = "none"
 		}
+		update_map_fit()
 	}
 
-	function disable_map_fit() {
-		if (mapwrap && mapwrap.classList.contains("fit")) {
-			mapwrap.classList.remove("fit")
+	function update_map_fit() {
+		if (mapwrap) {
+			let map = document.getElementById("map")
 			map.style.transform = null
 			mapwrap.style.width = null
 			mapwrap.style.height = null
+
+			let sx = e_scroll.clientWidth / map_w
+			let sy = e_scroll.offsetHeight / map_h
+
+			let scale = 1
+			switch (mapwrap.dataset.fit) {
+				case "width":
+					scale = sx
+					break
+				case "both":
+					scale = Math.min(sx, sy)
+					break
+			}
+
+			if (scale < 1) {
+				map.style.transform = "scale(" + scale + ")"
+				mapwrap.style.width = (map.clientWidth * scale) + "px"
+				mapwrap.style.height = (map.clientHeight * scale) + "px"
+				mapwrap.dataset.scale = scale
+			} else {
+				mapwrap.dataset.scale = 1
+			}
+
+			update_transform_on_resize()
 		}
 	}
 
@@ -1103,7 +1153,6 @@ var update_layout = function () {}
 				e_inner.style.transform = null
 			} else {
 				e_inner.style.transform = `scale(${transform1.scale})`
-				disable_map_fit()
 			}
 			e_inner.style.width = (win_w / transform1.scale) + "px"
 			e_outer.style.width = (e_inner.clientWidth * transform1.scale) + "px"
@@ -1111,7 +1160,7 @@ var update_layout = function () {}
 		}
 	}
 
-	function update_transform_resize() {
+	function update_transform_on_resize() {
 		old_scale = 0
 		anchor_transform()
 		update_transform()
@@ -1184,6 +1233,8 @@ var update_layout = function () {}
 	}
 
 	e_scroll.ontouchstart = function (evt) {
+		if (evt.touches.length === 2)
+			disable_map_fit()
 		anchor_transform(evt.touches)
 		stop_momentum()
 		start_measure(evt.timeStamp)
@@ -1250,7 +1301,7 @@ var update_layout = function () {}
 		"wheel",
 		function (evt) {
 			if (evt.ctrlKey) {
-				anchor_transform(null)
+				disable_map_fit()
 
 				let win_w = e_scroll.clientWidth
 				let win_h = e_scroll.clientHeight
@@ -1317,13 +1368,12 @@ var update_layout = function () {}
 
 /* INITIALIZE */
 
+if (window.innerWidth <= 800)
+	document.querySelector("aside").classList.add("hide")
+
 window.addEventListener("resize", () => update_layout())
 
 window.addEventListener("load", function () {
-	if (window.innerWidth <= 800)
-		document.querySelector("aside").classList.add("hide")
-	update_layout()
-
 	if (params.mode === "debug")
 		init_replay()
 	else if (params.mode === "replay")