From cda724b2da66cecc270c20a2da8285977a229160 Mon Sep 17 00:00:00 2001
From: Cory McWilliams <cory@unprompted.com>
Date: Fri, 29 Sep 2023 02:27:41 +0000
Subject: [PATCH] Some gg snapping fixes.

git-svn-id: https://www.unprompted.com/svn/projects/tildefriends/trunk@4483 ed5197a5-7fde-0310-b194-c3ffbd925b24
---
 apps/gg/script.js | 25 +++++++++++++++++--------
 1 file changed, 17 insertions(+), 8 deletions(-)

diff --git a/apps/gg/script.js b/apps/gg/script.js
index 0a60f45b..8aeb1f42 100644
--- a/apps/gg/script.js
+++ b/apps/gg/script.js
@@ -21,7 +21,7 @@ const k_store = {
 	'⛰': 10,
 };
 
-const k_marker_snap = {x: 5, y: 1};
+const k_marker_snap = {x: 5, y: 4};
 
 class GgAppElement extends LitElement {
 	static get properties() {
@@ -367,11 +367,11 @@ class GgAppElement extends LitElement {
 			.openOn(this.leaflet);
 	}
 
-	snap_to_grid(latlng, fudge) {
-		let position = this.leaflet.options.crs.latLngToPoint(latlng, this.leaflet.getZoom());
+	snap_to_grid(latlng, fudge, zoom) {
+		let position = this.leaflet.options.crs.latLngToPoint(latlng, zoom ?? this.leaflet.getZoom());
 		position.x = Math.round(position.x / 16) * 16 + (fudge?.x ?? 0);
 		position.y = Math.round(position.y / 16) * 16 + (fudge?.y ?? 0);
-		position = this.leaflet.options.crs.pointToLatLng(position, this.leaflet.getZoom());
+		position = this.leaflet.options.crs.pointToLatLng(position, zoom ?? this.leaflet.getZoom());
 		return position;
 	}
 
@@ -383,6 +383,12 @@ class GgAppElement extends LitElement {
 		}
 	}
 
+	on_zoom(event) {
+		if (this.marker) {
+			this.marker.setLatLng(this.snap_to_grid(this.marker.getLatLng(), k_marker_snap));
+		}
+	}
+
 	on_mouse_down(event) {
 		if (this.marker) {
 			this.marker.remove();
@@ -407,6 +413,7 @@ class GgAppElement extends LitElement {
 			this.leaflet = L.map(map, {attributionControl: false, maxZoom: 16, bounceAtZoomLimits: false});
 			this.leaflet.on({contextmenu: this.on_click.bind(this)});
 			this.leaflet.on({click: this.on_mouse_down.bind(this)});
+			this.leaflet.on({zoom: this.on_zoom.bind(this)});
 		}
 		let self = this;
 		let grid_layer = L.GridLayer.extend({
@@ -431,24 +438,26 @@ class GgAppElement extends LitElement {
 					self.draw_activity_to_tile(image_data, mini.width, mini.height, ul, lr, activity);
 				}
 				context.textAlign = 'left';
-				context.textBaseline = 'top';
+				context.textBaseline = 'bottom';
 				for (let x = 0; x < mini.width; x++) {
 					for (let y = 0; y < mini.height; y++) {
 						let start = (y * mini.width + x) * 4;
 						let pixel = self.color_to_emoji(image_data.data.slice(start, start + 4));
 						if (pixel) {
-							context.fillText(pixel, x * size.x / mini.width, y * size.y / mini.height);
+							//context.fillRect(x * size.x / mini.width, y * size.y / mini.height, size.x / mini.width, size.y / mini.height);
+							context.fillText(pixel, x * size.x / mini.width, y * size.y / mini.height + mini.height);
 						}
 					}
 				}
 				for (let placed of self.placed_emojis) {
-					let position = self.leaflet.options.crs.latLngToPoint(self.snap_to_grid(placed.position), coords.z);
+					let position = self.leaflet.options.crs.latLngToPoint(self.snap_to_grid(placed.position, undefined, coords.z), coords.z);
 					let tile_x = Math.floor(position.x / size.x);
 					let tile_y = Math.floor(position.y / size.y);
 					position.x = position.x - tile_x * size.x;
 					position.y = position.y - tile_y * size.y;
 					if (tile_x == coords.x && tile_y == coords.y) {
-						context.fillText(placed.emoji, position.x, position.y);
+						//context.fillRect(position.x, position.y, size.x / mini.width, size.y / mini.height);
+						context.fillText(placed.emoji, position.x, position.y + mini.height);
 					}
 				}
 				return tile;