backups/Fantasy-Map-Generator
1
0
Fork 0
mirror of https://github.com/Azgaar/Fantasy-Map-Generator.git synced 2025-12-17 09:41:24 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

slightly optimize onZoom

Browse source
This commit is contained in:
Azgaar 2022-05-12 23:54:19 +03:00
parent decfbc1337
commit aab27ca673
4 changed files with 25 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

21
main.js
View file

@ -131,20 +131,21 @@ let scale = 1;
let viewX = 0;
let viewY = 0;
const zoomThrottled = throttle(doWorkOnZoom, 100);
function zoomed() {
function onZoom() {
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();

2
modules/ui/editors.js
View file

@ -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));
}

4
modules/ui/general.js
View file

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

10
modules/ui/options.js
View file

@ -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
viewbox.attr("shape-rendering", shapeRendering.value);
setRendering(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