feat(religions editor): debouce center dragging

This commit is contained in:
Azgaar 2023-03-19 15:46:53 +04:00
parent 3ce0481a49
commit 218887b435
2 changed files with 28 additions and 9 deletions

View file

@ -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() {

View file

@ -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() {