cory/tildefriends
4
5
Fork 1
Code Issues 33 Pull Requests 1 Actions Releases 27 Wiki Activity

Some gg snapping fixes.

Browse Source 
git-svn-id: https://www.unprompted.com/svn/projects/tildefriends/trunk@4483 ed5197a5-7fde-0310-b194-c3ffbd925b24
This commit is contained in:
Cory McWilliams 2023-09-29 02:27:41 +00:00
parent c2e2ba2a40
commit cda724b2da
1 changed files with 17 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
apps/gg/script.js
View File

@ -21,7 +21,7 @@ const k_store = {
'⛰': 10, '⛰': 10,
}; };
const k_marker_snap = {x: 5, y: 1}; const k_marker_snap = {x: 5, y: 4};
class GgAppElement extends LitElement { class GgAppElement extends LitElement {
static get properties() { static get properties() {
@ -367,11 +367,11 @@ class GgAppElement extends LitElement {
.openOn(this.leaflet); .openOn(this.leaflet);
} }
snap_to_grid(latlng, fudge) { snap_to_grid(latlng, fudge, zoom) {
let position = this.leaflet.options.crs.latLngToPoint(latlng, this.leaflet.getZoom()); let position = this.leaflet.options.crs.latLngToPoint(latlng, zoom ?? this.leaflet.getZoom());
position.x = Math.round(position.x / 16) * 16 + (fudge?.x ?? 0); position.x = Math.round(position.x / 16) * 16 + (fudge?.x ?? 0);
position.y = Math.round(position.y / 16) * 16 + (fudge?.y ?? 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; 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) { on_mouse_down(event) {
if (this.marker) { if (this.marker) {
this.marker.remove(); this.marker.remove();
@ -407,6 +413,7 @@ class GgAppElement extends LitElement {
this.leaflet = L.map(map, {attributionControl: false, maxZoom: 16, bounceAtZoomLimits: false}); this.leaflet = L.map(map, {attributionControl: false, maxZoom: 16, bounceAtZoomLimits: false});
this.leaflet.on({contextmenu: this.on_click.bind(this)}); this.leaflet.on({contextmenu: this.on_click.bind(this)});
this.leaflet.on({click: this.on_mouse_down.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 self = this;
let grid_layer = L.GridLayer.extend({ 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); self.draw_activity_to_tile(image_data, mini.width, mini.height, ul, lr, activity);
} }
context.textAlign = 'left'; context.textAlign = 'left';
context.textBaseline = 'top'; context.textBaseline = 'bottom';
for (let x = 0; x < mini.width; x++) { for (let x = 0; x < mini.width; x++) {
for (let y = 0; y < mini.height; y++) { for (let y = 0; y < mini.height; y++) {
let start = (y * mini.width + x) * 4; let start = (y * mini.width + x) * 4;
let pixel = self.color_to_emoji(image_data.data.slice(start, start + 4)); let pixel = self.color_to_emoji(image_data.data.slice(start, start + 4));
if (pixel) { 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) { 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_x = Math.floor(position.x / size.x);
let tile_y = Math.floor(position.y / size.y); let tile_y = Math.floor(position.y / size.y);
position.x = position.x - tile_x * size.x; position.x = position.x - tile_x * size.x;
position.y = position.y - tile_y * size.y; position.y = position.y - tile_y * size.y;
if (tile_x == coords.x && tile_y == coords.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; return tile;