From 218887b435cf48838ed6d7b02c50f778082cdaaf Mon Sep 17 00:00:00 2001
From: Azgaar <maxganiev@yandex.com>
Date: Sun, 19 Mar 2023 15:46:53 +0400
Subject: [PATCH] feat(religions editor): debouce center dragging

---
 modules/dynamic/editors/cultures-editor.js  | 15 ++++++++++----
 modules/dynamic/editors/religions-editor.js | 22 ++++++++++++++++-----
 2 files changed, 28 insertions(+), 9 deletions(-)

diff --git a/modules/dynamic/editors/cultures-editor.js b/modules/dynamic/editors/cultures-editor.js
index 15fe1f32..5e66941d 100644
--- a/modules/dynamic/editors/cultures-editor.js
+++ b/modules/dynamic/editors/cultures-editor.js
@@ -590,16 +590,23 @@ function drawCultureCenters() {
 }
 
 function cultureCenterDrag() {
-  const $el = d3.select(this);
   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;
-    $el.attr("cx", x).attr("cy", y);
+    this.setAttribute("transform", `translate(${x0 + x},${y0 + y})`);
     const cell = findCell(x, y);
     if (pack.cells.h[cell] < 20) return; // ignore dragging on water
+
     pack.cultures[cultureId].center = cell;
     recalculateCultures();
-  });
+  }
+
+  const dragDebounced = debounce(handleDrag, 50);
+  d3.event.on("drag", dragDebounced);
 }
 
 function toggleLegend() {
diff --git a/modules/dynamic/editors/religions-editor.js b/modules/dynamic/editors/religions-editor.js
index 46e50f24..a441c793 100644
--- a/modules/dynamic/editors/religions-editor.js
+++ b/modules/dynamic/editors/religions-editor.js
@@ -267,6 +267,7 @@ function religionsEditorAddLines() {
     $body.dataset.type = "absolute";
     togglePercentageMode();
   }
+
   applySorting(religionsHeader);
   $("#religionsEditor").dialog({width: fitContent()});
 }
@@ -533,7 +534,10 @@ function drawReligionCenters() {
     .attr("stroke", "#444444")
     .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
     .selectAll("circle")
     .data(data)
@@ -557,16 +561,23 @@ function drawReligionCenters() {
 }
 
 function religionCenterDrag() {
-  const $el = d3.select(this);
   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;
-    $el.attr("cx", x).attr("cy", y);
+    this.setAttribute("transform", `translate(${x0 + x},${y0 + y})`);
     const cell = findCell(x, y);
     if (pack.cells.h[cell] < 20) return; // ignore dragging on water
+
     pack.religions[religionId].center = cell;
     recalculateReligions();
-  });
+  }
+
+  const dragDebounced = debounce(handleDrag, 50);
+  d3.event.on("drag", dragDebounced);
 }
 
 function toggleLegend() {
@@ -637,6 +648,7 @@ async function showHierarchy() {
 function toggleExtinct() {
   $body.dataset.extinct = $body.dataset.extinct !== "show" ? "show" : "hide";
   religionsEditorAddLines();
+  drawReligionCenters();
 }
 
 function enterReligionsManualAssignent() {