aboutsummaryrefslogtreecommitdiffstats
path: root/app/map.js
diff options
context:
space:
mode:
authorPetri Hienonen <petri.hienonen@gmail.com>2025-11-13 18:12:17 +0200
committerPetri Hienonen <petri.hienonen@gmail.com>2025-11-13 18:12:17 +0200
commite4fdd8457d2d320eea502f0801fc22eceb8947b1 (patch)
tree110530c498b276085bb409a537a3e2174d53d435 /app/map.js
parent2113f8269423932fa76ae4f822f77a07dd703266 (diff)
downloadhousing-e4fdd8457d2d320eea502f0801fc22eceb8947b1.tar.zst
Nothing
Diffstat (limited to 'app/map.js')
-rw-r--r--app/map.js34
1 files changed, 17 insertions, 17 deletions
diff --git a/app/map.js b/app/map.js
index 2c95fb9..5e69d4e 100644
--- a/app/map.js
+++ b/app/map.js
@@ -53,10 +53,12 @@ export class MapMath {
* Panning and inertia configuration
*/
export class PanningConfig {
- static DEFAULT_FRICTION = 0.995;
+ static DEFAULT_FRICTION = 0.85;
static DEFAULT_SPEED_THRESHOLD = 0.001;
- static DEFAULT_BOUNCE_FACTOR = 0.5;
+ static DEFAULT_BOUNCE_FACTOR = 0.3;
static DEFAULT_VIEWBOX_SCALE = 1;
+ static PAN_SENSITIVITY = 0.7; // Lower = less sensitive panning (0-1)
+ static ZOOM_SENSITIVITY = 0.1; // Lower = less sensitive zooming (0-1)
}
export class MapEl {
@@ -68,7 +70,7 @@ export class MapEl {
#housesGroup = null;
/** @type {SVGGElement|null} */
#statAreasGroup = null;
- /** @type {Function|null} */
+ /** @type {Function} */
#onHouseClick;
/** @type {Function} */
#onHouseHover;
@@ -479,12 +481,15 @@ export class MapEl {
pointers.set(e.pointerId, { clientX: e.clientX, clientY: e.clientY });
if (isPinching && pointers.size === 2) {
- // Handle pinch zoom
const [p1, p2] = Array.from(pointers.values());
const currentDistance = Math.hypot(p2.clientX - p1.clientX, p2.clientY - p1.clientY);
if (initialDistance > 0) {
- const scaleFactor = currentDistance / initialDistance;
+ const rawScaleFactor = currentDistance / initialDistance;
+
+ // Apply zoom sensitivity to pinch gestures
+ const sensitivity = PanningConfig.ZOOM_SENSITIVITY;
+ const scaleFactor = 1 + (rawScaleFactor - 1) * sensitivity;
// Calculate center point between the two pointers in SVG coordinates
const centerX = (p1.clientX + p2.clientX) / 2;
@@ -513,8 +518,9 @@ export class MapEl {
throw new Error("Unexpected");
}
- const svgDx = dx * ctm.a + dy * ctm.c;
- const svgDy = dx * ctm.b + dy * ctm.d;
+ const sensitivity = PanningConfig.PAN_SENSITIVITY;
+ const svgDx = dx * ctm.a + dy * ctm.c * sensitivity;
+ const svgDy = dx * ctm.b + dy * ctm.d * sensitivity;
vx = svgDx / dt;
vy = svgDy / dt;
}
@@ -649,9 +655,7 @@ export class MapEl {
circle.addEventListener("mouseenter", () => {
circle.setAttribute("r", "0.005");
clearTimeout(this.#modalTimer);
- if (this.#onHouseHover) {
- this.#onHouseHover(house.id, false);
- }
+ this.#onHouseHover(house.id, false);
});
circle.addEventListener("mouseleave", () => {
@@ -661,18 +665,14 @@ export class MapEl {
if (!this.#persistentModal && this.#onHouseHover) {
this.#modalTimer = window.setTimeout(() => {
- if (this.#onHouseHover) {
- this.#onHouseHover(house.id, true);
- }
+ this.#onHouseHover(house.id, true);
}, 200);
}
});
circle.addEventListener("click", (e) => {
e.stopPropagation();
- if (this.#onHouseClick) {
- this.#onHouseClick(house.id, true);
- this.#persistentModal = true;
- }
+ this.#onHouseClick(house.id, true);
+ this.#persistentModal = true;
});
return circle;
});