slightly optimize onZoom

main.js

@@ -131,20 +131,21 @@ let scale = 1;
 let viewX = 0;
 let viewY = 0;
 
-const zoomThrottled = throttle(doWorkOnZoom, 100);
+function onZoom() {
-function zoomed() {
   const {k, x, y} = d3.event.transform;
 
   const isScaleChanged = Boolean(scale - k);
   const isPositionChanged = Boolean(viewX - x || viewY - y);
+  if (!isScaleChanged && !isPositionChanged) return;
 
   scale = k;
   viewX = x;
   viewY = y;
 
-  zoomThrottled(isScaleChanged, isPositionChanged);
+  handleZoom(isScaleChanged, isPositionChanged);
 }
-const zoom = d3.zoom().scaleExtent([1, 20]).on("zoom", zoomed);
+const onZoomDebouced = debounce(onZoom, 50);
+const zoom = d3.zoom().scaleExtent([1, 20]).on("zoom", onZoomDebouced);
 
 // default options
 let options = {
@@ -449,7 +450,17 @@ function applyDefaultBiomesSystem() {
   return {i: d3.range(0, name.length), name, color, biomesMartix, habitability, iconsDensity, icons, cost};
 }
 
-function doWorkOnZoom(isScaleChanged, isPositionChanged) {
+let optimizedQuality = false;
+
+function handleZoom(isScaleChanged, isPositionChanged) {
+  if (!optimizedQuality) {
+    setRendering("optimizeSpeed");
+    setTimeout(() => {
+      optimizedQuality = false;
+      setRendering(shapeRendering.value);
+    }, 1000);
+  }
+
   viewbox.attr("transform", `translate(${viewX} ${viewY}) scale(${scale})`);
 
   if (isPositionChanged) drawCoordinates();

modules/ui/editors.js

@@ -6,7 +6,7 @@ modules.editors = true;
 // restore default viewbox events
 function restoreDefaultEvents() {
   svg.call(zoom);
-  viewbox.style("cursor", "default").on(".drag", null).on("click", clicked).on("touchmove mousemove", moved);
+  viewbox.style("cursor", "default").on(".drag", null).on("click", clicked).on("touchmove mousemove", onMouseMove);
   legend.call(d3.drag().on("start", dragLegendBox));
 }
 

modules/ui/general.js

@@ -65,8 +65,8 @@ function showElementLockTip(event) {
   }
 }
 
-const moved = debounce(mouseMove, 100);
+const onMouseMove = debounce(handleMouseMove, 100);
-function mouseMove() {
+function handleMouseMove() {
   const point = d3.mouse(this);
   const i = findCell(point[0], point[1]); // pack cell id
   if (i === undefined) return;

modules/ui/options.js

@@ -167,7 +167,7 @@ optionsContent.addEventListener("change", function (event) {
   if (id === "zoomExtentMin" || id === "zoomExtentMax") changeZoomExtent(value);
   else if (id === "optionsSeed") generateMapWithSeed("seed change");
   else if (id === "uiSizeInput" || id === "uiSizeOutput") changeUIsize(value);
-  if (id === "shapeRendering") viewbox.attr("shape-rendering", value);
+  else if (id === "shapeRendering") setRendering(value);
   else if (id === "yearInput") changeYear();
   else if (id === "eraInput") changeEra();
   else if (id === "stateLabelsModeInput") options.stateLabelsMode = value;
@@ -543,9 +543,7 @@ function applyStoredOptions() {
   const themeColor = localStorage.getItem("themeColor");
   changeDialogsTheme(themeColor, transparency);
 
-  // set shape rendering
+  setRendering(shapeRendering.value);
-  viewbox.attr("shape-rendering", shapeRendering.value);
-
   options.stateLabelsMode = stateLabelsModeInput.value;
 }
 
@@ -622,6 +620,10 @@ function randomizeCultureSet() {
   changeCultureSet();
 }
 
+function setRendering(value) {
+  viewbox.attr("shape-rendering", value);
+}
+
 // generate current year and era name
 function generateEra() {
   if (!stored("year")) yearInput.value = rand(100, 2000); // current year