backups/Fantasy-Map-Generator
1
0
Fork 0
mirror of https://github.com/Azgaar/Fantasy-Map-Generator.git synced 2026-03-25 08:37:23 +01:00
Code Issues Projects Releases Packages Wiki Activity

Improve Merge States dialog: add hover highlight and clearer instructions

Browse source 
Co-authored-by: Azgaar <26469650+Azgaar@users.noreply.github.com>
This commit is contained in:
copilot-swe-agent[bot] 2026-02-26 17:15:11 +00:00
parent cbee12293c
commit 59fe113ba3
1 changed files with 44 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

47
public/modules/dynamic/editors/states-editor.js
View file

@ -1290,9 +1290,9 @@ function openStateMergeDialog() {
const statesSelector = validStates const statesSelector = validStates
.map( .map(
s => /* html */ ` s => /* html */ `
<div data-tip="${s.fullName}"> <div data-id="${s.i}" data-tip="${s.fullName}" style="cursor:default">
<input type="radio" name="rulingState" value="${s.i}" /> <input type="radio" name="rulingState" value="${s.i}" />
<input id="selectState${s.i}" class="checkbox" type="checkbox" name="statesToMerge" value="${s.i}"} /> <input id="selectState${s.i}" class="checkbox" type="checkbox" name="statesToMerge" value="${s.i}" />
<label for="selectState${s.i}" class="checkbox-label">${emblem(s.i)}${s.fullName}</label> <label for="selectState${s.i}" class="checkbox-label">${emblem(s.i)}${s.fullName}</label>
</div> </div>
` `
@ -1301,16 +1301,57 @@ function openStateMergeDialog() {
alertMessage.innerHTML = /* html */ ` alertMessage.innerHTML = /* html */ `
<form id='mergeStatesForm' style="overflow: hidden; display: flex; flex-direction: column; gap: 1em;"> <form id='mergeStatesForm' style="overflow: hidden; display: flex; flex-direction: column; gap: 1em;">
<header style='font-weight:bold;'>Select multiple states to merge and the ruling state to merge into</header> <header style='font-weight:bold;'>Merge states</header>
<p style="margin:0">
Check the <b>checkbox</b> next to each state you want to merge.
Use the <b>radio button</b> to pick the <em>ruling state</em> that will absorb all others (its name, color, and capital will be kept).
Hover over a row to highlight the state on the map.
</p>
<main style='display: grid; grid-template-columns: 1fr 1fr; gap: .3em;'> <main style='display: grid; grid-template-columns: 1fr 1fr; gap: .3em;'>
${statesSelector} ${statesSelector}
</main> </main>
</form> </form>
`; `;
byId("mergeStatesForm")
.querySelectorAll("div[data-id]")
.forEach(el => {
el.addEventListener("mouseenter", highlightStateOnMergeHover);
el.addEventListener("mouseleave", stateHighlightOff);
});
function highlightStateOnMergeHover(event) {
if (!layerIsOn("toggleStates")) return;
const state = +event.currentTarget.dataset.id;
if (!state) return;
const d = regions.select("#state" + state).attr("d");
if (!d) return;
stateHighlightOff();
const path = debug
.append("path")
.attr("class", "highlight")
.attr("d", d)
.attr("fill", "none")
.attr("stroke", "red")
.attr("stroke-width", 1)
.attr("opacity", 1)
.attr("filter", "url(#blur1)");
const totalLength = path.node().getTotalLength();
const duration = (totalLength + 5000) / 2;
const interpolate = d3.interpolateString(`0, ${totalLength}`, `${totalLength}, ${totalLength}`);
path
.transition()
.duration(duration)
.attrTween("stroke-dasharray", () => interpolate);
}
$("#alert").dialog({ $("#alert").dialog({
width: fitContent(), width: fitContent(),
title: `Merge states`, title: `Merge states`,
close: stateHighlightOff,
buttons: { buttons: {
Merge: function () { Merge: function () {
const formData = new FormData(byId("mergeStatesForm")); const formData = new FormData(byId("mergeStatesForm"));