You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
79 lines
2.3 KiB
79 lines
2.3 KiB
class ZoomManager {
|
|
constructor(horizontalZoom, verticalZoom) {
|
|
this.x = 0
|
|
this.y = 0
|
|
this.scaleX = 1
|
|
this.scaleY = 1
|
|
this.horizontalZoom = horizontalZoom
|
|
this.verticalZoom = verticalZoom
|
|
}
|
|
|
|
/**
|
|
* Convert world coordinates to screen coordinates.
|
|
*
|
|
* @param {number} worldX - The x-coordinate in world space.
|
|
* @param {number} worldY - The y-coordinate in world space.
|
|
* @returns {Array} The screen coordinates [screenX, screenY].
|
|
*/
|
|
worldToScreen(worldX, worldY) {
|
|
let screenX = (worldX - this.x) * this.scaleX
|
|
let screenY = (worldY - this.y) * this.scaleY
|
|
return {
|
|
x: screenX,
|
|
y: screenY
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Convert screen coordinates to world coordinates.
|
|
*
|
|
* @param {number} screenX - The x-coordinate on the screen.
|
|
* @param {number} screenY - The y-coordinate on the screen.
|
|
* @returns {Array} The world coordinates [worldX, worldY].
|
|
*/
|
|
screenToWorld(screenX, screenY) {
|
|
let worldX = screenX / this.scaleX + this.x
|
|
let worldY = screenY / this.scaleY + this.y
|
|
return {
|
|
x: worldX,
|
|
y: worldY
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Recalculates zoom based on mouse wheel event.
|
|
* @param {MouseEvent} event - The mouse wheel event object.
|
|
*/
|
|
recalculate(event) {
|
|
// Get mouse position
|
|
const pos = {
|
|
x: event.clientX,
|
|
y: event.clientY
|
|
}
|
|
|
|
// Calculate world coordinates before zoom
|
|
let beforeZoom, afterZoom
|
|
beforeZoom = this.screenToWorld(pos.x, pos.y)
|
|
|
|
// Adjust zoom scale based on mouse wheel delta
|
|
if (this.horizontalZoom)
|
|
this.scaleX -= (10 * this.scaleX) / event.deltaY;
|
|
if (this.verticalZoom)
|
|
this.scaleY -= (10 * this.scaleY) / event.deltaY;
|
|
|
|
// Calculate world coordinates after zoom
|
|
afterZoom = this.screenToWorld(pos.x, pos.y)
|
|
|
|
// Adjust zoom position to keep zoom centered around mouse position
|
|
this.x += beforeZoom.x - afterZoom.x
|
|
this.y += beforeZoom.y - afterZoom.y
|
|
|
|
// Reset zoom if it goes below 1
|
|
if (this.scaleX < 1 || this.scaleY < 1) {
|
|
this.x = 0
|
|
this.y = 0
|
|
this.scaleX = 1
|
|
this.scaleY = 1
|
|
}
|
|
}
|
|
} |