backups/Fantasy-Map-Generator
1
0
Fork 0
mirror of https://github.com/Azgaar/Fantasy-Map-Generator.git synced 2025-12-17 09:41:24 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

v1.5.04 - Emblems auto-hide and hightlighting

Browse source
This commit is contained in:
Azgaar 2021-01-30 18:47:43 +03:00
parent 56b6eb2a13
commit 32c4566aa7
9 changed files with 125 additions and 54 deletions
Download patch file Download diff file Expand all files Collapse all files

43
modules/ui/general.js
View file

@ -94,11 +94,18 @@ function showMapTooltip(point, e, i, g) {
tip(e.target.parentNode.dataset.name + ". Click to edit");
return;
}
if (group === "emblems" && e.target.__data__?.el) {
const el = d3.select(e.target);
el.raise();
const name = el.datum().el.fullName || el.datum().el.name || "";
const type = el.datum().type || "";
if (group === "emblems") {
const parent = e.target.parentNode;
const [g, type] = parent.id === "burgEmblems" ? [pack.burgs, "burg"] :
parent.id === "provinceEmblems" ? [pack.provinces, "province"] :
[pack.states, "state"];
const i = +e.target.dataset.i;
highlightEmblemElement(type, g[i]);
d3.select(e.target).raise();
d3.select(parent).raise();
const name = g[i].fullName || g[i].name;
tip(`${name} ${type} emblem. Click to edit`);
return;
}
@ -289,6 +296,32 @@ function getPopulationTip(i) {
return `Cell population: ${si(rural+urban)}; Rural: ${si(rural)}; Urban: ${si(urban)}`;
}
function highlightEmblemElement(type, el) {
if (emblems.selectAll("line, circle").size()) return;
const i = el.i, cells = pack.cells;
const animation = d3.transition().duration(1000).ease(d3.easeSinIn);
if (type === "burg") {
const {x, y} = el;
emblems.append("circle").attr("cx", x).attr("cy", y).attr("r", 0)
.attr("fill", "none").attr("stroke", "#d0240f").attr("stroke-width", 1).attr("opacity", 1)
.transition(animation).attr("r", 20).attr("opacity", .1).attr("stroke-width", 0).remove();
return;
}
const [x, y] = el.pole;
const obj = type === "state" ? cells.state : cells.province;
const borderCells = cells.i.filter(id => obj[id] === i && cells.c[id].some(n => obj[n] !== i));
const data = Array.from(borderCells).filter((c, i) => !(i%2)).map(i => cells.p[i]).map(i => [i[0], i[1], Math.hypot(i[0]-x, i[1]-y)]);
emblems.selectAll("line").data(data).enter().append("line")
.attr("x1", x).attr("y1", y).attr("x2", d => d[0]).attr("y2", d => d[1])
.attr("stroke", "#d0240f").attr("stroke-width", .5).attr("opacity", .2)
.attr("stroke-dashoffset", d => d[2]).attr("stroke-dasharray", d => d[2])
.transition(animation).attr("stroke-dashoffset", 0).attr("opacity", 1)
.transition(animation).delay(1000).attr("stroke-dashoffset", d => d[2]).attr("opacity", 0).remove();
}
// assign lock behavior
document.querySelectorAll("[data-locked]").forEach(function(e) {
e.addEventListener("mouseover", function(event) {