nilix/felt
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

add popup with token name on click, add retry to token resize if img is not bound yet

Browse source
This commit is contained in:
Iris Lightshard 2023-07-14 22:59:31 -06:00
parent fa74c72a12
commit fdc675dd22
Signed by: Iris Lightshard
GPG key ID: 3B7FBC22144E6398
2 changed files with 34 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
static/map.js
View file

@ -27,8 +27,11 @@ function resizeMarkers() {
tokens.forEach(t=>{ tokens.forEach(t=>{
const icon = t.m.options.icon; const icon = t.m.options.icon;
const scaleFactor = mapImg._image.clientWidth / mapImg._image.naturalWidth; const scaleFactor = mapImg._image.clientWidth / mapImg._image.naturalWidth;
icon.options.iconSize = [scaleFactor * t.t.w, scaleFactor * t.t.h]; icon.options.iconSize = [scaleFactor * t.t.w, scaleFactor * t.t.h];
icon.options.iconAnchor = [scaleFactor * t.t.oX, scaleFactor * t.t.oY]; icon.options.iconAnchor = [scaleFactor * t.t.oX, scaleFactor * t.t.oY];
icon.options.popupAnchor = [0, -scaleFactor * t.t.oY];
t.m.setIcon(icon); t.m.setIcon(icon);
}); });
} }
@ -42,6 +45,7 @@ function processTokens(tokenChanges) {
if (t.x != null && t.y != null && !self.t.active && t.active) { if (t.x != null && t.y != null && !self.t.active && t.active) {
self.t.active = true; self.t.active = true;
self.m.addTo(map); self.m.addTo(map);
resizeMarkers();
// token was made inactive // token was made inactive
} else if (t.x != null && t.y != null && self.t.active && !t.active) { } else if (t.x != null && t.y != null && self.t.active && !t.active) {
self.t.active = false; self.t.active = false;
@ -70,6 +74,7 @@ function processTokens(tokenChanges) {
}); });
if (t.active) { if (t.active) {
self.m.addTo(map); self.m.addTo(map);
resizeMarkers();
} }
} }
} }
@ -87,14 +92,6 @@ function toggleActive(tokenId) {
} }
} }
function getCascadingPos() {
const topLeft = [0,0];
const n = tokens.length;
topLeft[1] += (n)*Math.random()*10 - 5;
topLeft[0] -= (n)*Math.random()*10 - 5;
return topLeft;
}
function moveToken(id) { function moveToken(id) {
const existing = tokens.find(t=>t.t.id == id); const existing = tokens.find(t=>t.t.id == id);
if (existing) { if (existing) {
@ -122,14 +119,17 @@ function NewToken(token) {
icon: L.icon({ icon: L.icon({
iconUrl: token.sprite, iconUrl: token.sprite,
iconSize: [token.w,token.h], iconSize: [token.w,token.h],
iconAnchor: [token.oX, token.oY] iconAnchor: [token.oX, token.oY],
popupAnchor: [0, -token.oY]
}), }),
title: token.name, title: token.name,
draggable: true, draggable: true,
autoPan: true autoPan: true
}); });
marker.on("moveend", ()=>{moveToken(token.id)}); marker.on("moveend", ()=>{moveToken(token.id)});
const node = document.createElement('div');
node.innerText = token.name;
marker.bindPopup(node);
return { return {
t: token, t: token,

24
static/style.css
View file

@ -126,6 +126,8 @@ pre {
background: var(--sub_color); background: var(--sub_color);
color: var(--fg_color); color: var(--fg_color);
white-space: pre-wrap; white-space: pre-wrap;
max-height: 80vh;
overflow-y: auto;
} }
#auxMsgZone { #auxMsgZone {
@ -346,6 +348,28 @@ input[type=range]::-moz-range-track {
color: var(--err_color); color: var(--err_color);
} }
.leaflet-popup-content-wrapper
{
color: var(--fg_color);
background: var(--bg_color);
border-radius: 0;
text-align: center;
}
.leaflet-popup-tip {
background: transparent;
box-shadow: none;
}
.leaflet-popup-close-button {
color: var(--err_color) !important;
}
.leaflet-popup-close-button:hover,
.leaflet-popup-close-button:focus {
color: var(--main_color) !important;
}
#noscript_container { #noscript_container {
z-index:999; z-index:999;
position: fixed; position: fixed;