backups/Fantasy-Map-Generator
1
0
Fork 0
mirror of https://github.com/Azgaar/Fantasy-Map-Generator.git synced 2026-02-04 17:41:23 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

throttle work done on zoom

Browse source
This commit is contained in:
Azgaar 2021-07-12 22:08:17 +03:00
parent 9df7b2f7a5
commit e7b354e217
3 changed files with 278 additions and 162 deletions
Download patch file Download diff file Expand all files Collapse all files

48
main.js
View file

@ -128,9 +128,23 @@ let color = d3.scaleSequential(d3.interpolateSpectral); // default color scheme
const lineGen = d3.line().curve(d3.curveBasis); // d3 line generator with default curve interpolation
// d3 zoom behavior
let scale = 1,
viewX = 0,
viewY = 0;
let scale = 1;
let viewX = 0;
let viewY = 0;
const zoomThrottled = throttle(doWorkOnZoom, 100);
function zoomed() {
const {k, x, y} = d3.event.transform;
const isScaleChanged = Boolean(scale - k);
const isPositionChanged = Boolean(viewX - x || viewY - y);
scale = k;
viewX = x;
viewY = y;
zoomThrottled(isScaleChanged, isPositionChanged);
}
const zoom = d3.zoom().scaleExtent([1, 20]).on("zoom", zoomed);
// default options
@ -414,30 +428,24 @@ function showWelcomeMessage() {
});
}
function zoomed() {
const transform = d3.event.transform;
const scaleDiff = scale - transform.k;
const positionDiff = (viewX - transform.x) | (viewY - transform.y);
if (!positionDiff && !scaleDiff) return;
function doWorkOnZoom(isScaleChanged, isPositionChanged) {
viewbox.attr("transform", `translate(${viewX} ${viewY}) scale(${scale})`);
scale = transform.k;
viewX = transform.x;
viewY = transform.y;
viewbox.attr("transform", transform);
if (isPositionChanged) drawCoordinates();
// update grid only if view position
if (positionDiff) drawCoordinates();
// rescale only if zoom is changed
if (scaleDiff) {
if (isScaleChanged) {
invokeActiveZooming();
drawScaleBar();
}
// zoom image converter overlay
const canvas = document.getElementById("canvas");
if (canvas && +canvas.style.opacity) {
const img = document.getElementById("image");
if (customization === 1) {
const canvas = document.getElementById("canvas");
if (!canvas || canvas.style.opacity === "0") return;
const img = document.getElementById("imageToConvert");
if (!img) return;
const ctx = canvas.getContext("2d");
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.setTransform(scale, 0, 0, scale, viewX, viewY);