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;