mirror of
https://github.com/Azgaar/Fantasy-Map-Generator.git
synced 2025-12-17 09:41:24 +01:00
feat(religions editor): debouce center dragging
This commit is contained in:
parent
3ce0481a49
commit
218887b435
2 changed files with 28 additions and 9 deletions
|
|
@ -590,16 +590,23 @@ function drawCultureCenters() {
|
||||||
}
|
}
|
||||||
|
|
||||||
function cultureCenterDrag() {
|
function cultureCenterDrag() {
|
||||||
const $el = d3.select(this);
|
|
||||||
const cultureId = +this.id.slice(13);
|
const cultureId = +this.id.slice(13);
|
||||||
d3.event.on("drag", () => {
|
const tr = parseTransform(this.getAttribute("transform"));
|
||||||
|
const x0 = +tr[0] - d3.event.x;
|
||||||
|
const y0 = +tr[1] - d3.event.y;
|
||||||
|
|
||||||
|
function handleDrag() {
|
||||||
const {x, y} = d3.event;
|
const {x, y} = d3.event;
|
||||||
$el.attr("cx", x).attr("cy", y);
|
this.setAttribute("transform", `translate(${x0 + x},${y0 + y})`);
|
||||||
const cell = findCell(x, y);
|
const cell = findCell(x, y);
|
||||||
if (pack.cells.h[cell] < 20) return; // ignore dragging on water
|
if (pack.cells.h[cell] < 20) return; // ignore dragging on water
|
||||||
|
|
||||||
pack.cultures[cultureId].center = cell;
|
pack.cultures[cultureId].center = cell;
|
||||||
recalculateCultures();
|
recalculateCultures();
|
||||||
});
|
}
|
||||||
|
|
||||||
|
const dragDebounced = debounce(handleDrag, 50);
|
||||||
|
d3.event.on("drag", dragDebounced);
|
||||||
}
|
}
|
||||||
|
|
||||||
function toggleLegend() {
|
function toggleLegend() {
|
||||||
|
|
|
||||||
|
|
@ -267,6 +267,7 @@ function religionsEditorAddLines() {
|
||||||
$body.dataset.type = "absolute";
|
$body.dataset.type = "absolute";
|
||||||
togglePercentageMode();
|
togglePercentageMode();
|
||||||
}
|
}
|
||||||
|
|
||||||
applySorting(religionsHeader);
|
applySorting(religionsHeader);
|
||||||
$("#religionsEditor").dialog({width: fitContent()});
|
$("#religionsEditor").dialog({width: fitContent()});
|
||||||
}
|
}
|
||||||
|
|
@ -533,7 +534,10 @@ function drawReligionCenters() {
|
||||||
.attr("stroke", "#444444")
|
.attr("stroke", "#444444")
|
||||||
.style("cursor", "move");
|
.style("cursor", "move");
|
||||||
|
|
||||||
const data = pack.religions.filter(r => r.i && r.center && !r.removed);
|
let data = pack.religions.filter(r => r.i && r.center && !r.removed);
|
||||||
|
const showExtinct = $body.dataset.extinct === "show";
|
||||||
|
if (!showExtinct) data = data.filter(r => r.cells > 0);
|
||||||
|
|
||||||
religionCenters
|
religionCenters
|
||||||
.selectAll("circle")
|
.selectAll("circle")
|
||||||
.data(data)
|
.data(data)
|
||||||
|
|
@ -557,16 +561,23 @@ function drawReligionCenters() {
|
||||||
}
|
}
|
||||||
|
|
||||||
function religionCenterDrag() {
|
function religionCenterDrag() {
|
||||||
const $el = d3.select(this);
|
|
||||||
const religionId = +this.dataset.id;
|
const religionId = +this.dataset.id;
|
||||||
d3.event.on("drag", () => {
|
const tr = parseTransform(this.getAttribute("transform"));
|
||||||
|
const x0 = +tr[0] - d3.event.x;
|
||||||
|
const y0 = +tr[1] - d3.event.y;
|
||||||
|
|
||||||
|
function handleDrag() {
|
||||||
const {x, y} = d3.event;
|
const {x, y} = d3.event;
|
||||||
$el.attr("cx", x).attr("cy", y);
|
this.setAttribute("transform", `translate(${x0 + x},${y0 + y})`);
|
||||||
const cell = findCell(x, y);
|
const cell = findCell(x, y);
|
||||||
if (pack.cells.h[cell] < 20) return; // ignore dragging on water
|
if (pack.cells.h[cell] < 20) return; // ignore dragging on water
|
||||||
|
|
||||||
pack.religions[religionId].center = cell;
|
pack.religions[religionId].center = cell;
|
||||||
recalculateReligions();
|
recalculateReligions();
|
||||||
});
|
}
|
||||||
|
|
||||||
|
const dragDebounced = debounce(handleDrag, 50);
|
||||||
|
d3.event.on("drag", dragDebounced);
|
||||||
}
|
}
|
||||||
|
|
||||||
function toggleLegend() {
|
function toggleLegend() {
|
||||||
|
|
@ -637,6 +648,7 @@ async function showHierarchy() {
|
||||||
function toggleExtinct() {
|
function toggleExtinct() {
|
||||||
$body.dataset.extinct = $body.dataset.extinct !== "show" ? "show" : "hide";
|
$body.dataset.extinct = $body.dataset.extinct !== "show" ? "show" : "hide";
|
||||||
religionsEditorAddLines();
|
religionsEditorAddLines();
|
||||||
|
drawReligionCenters();
|
||||||
}
|
}
|
||||||
|
|
||||||
function enterReligionsManualAssignent() {
|
function enterReligionsManualAssignent() {
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue