use function instead of class for camera
This commit is contained in:
parent
e9129cf049
commit
158c710572
1 changed files with 55 additions and 54 deletions
109
public/Camera.js
109
public/Camera.js
|
|
@ -1,43 +1,41 @@
|
||||||
"use strict"
|
"use strict"
|
||||||
|
|
||||||
export default class Camera {
|
const MIN_ZOOM = .1
|
||||||
constructor() {
|
const MAX_ZOOM = 6
|
||||||
this.x = 0
|
const ZOOM_STEP = .05
|
||||||
this.y = 0
|
|
||||||
|
|
||||||
this.curZoom = 1
|
export default function Camera () {
|
||||||
this.minZoom = .1
|
let x = 0
|
||||||
this.maxZoom = 6
|
let y = 0
|
||||||
this.zoomStep = .05
|
let curZoom = 1
|
||||||
|
|
||||||
|
const move = (byX, byY) => {
|
||||||
|
x += byX / curZoom
|
||||||
|
y += byY / curZoom
|
||||||
}
|
}
|
||||||
|
|
||||||
move(x, y) {
|
const calculateNewZoom = (inout) => {
|
||||||
this.x += x / this.curZoom
|
|
||||||
this.y += y / this.curZoom
|
|
||||||
}
|
|
||||||
|
|
||||||
canZoom(inout) {
|
|
||||||
return this.curZoom != this.calculateNewZoom(inout)
|
|
||||||
}
|
|
||||||
|
|
||||||
calculateNewZoom(inout) {
|
|
||||||
const factor = inout === 'in' ? 1 : -1
|
const factor = inout === 'in' ? 1 : -1
|
||||||
const newzoom = this.curZoom + this.zoomStep * this.curZoom * factor
|
const newzoom = curZoom + ZOOM_STEP * curZoom * factor
|
||||||
const capped = Math.min(Math.max(newzoom, this.minZoom), this.maxZoom)
|
const capped = Math.min(Math.max(newzoom, MIN_ZOOM), MAX_ZOOM)
|
||||||
return capped
|
return capped
|
||||||
}
|
}
|
||||||
|
|
||||||
setZoom(newzoom, viewportCoordCenter) {
|
const canZoom = (inout) => {
|
||||||
if (this.curZoom == newzoom) {
|
return curZoom != calculateNewZoom(inout)
|
||||||
|
}
|
||||||
|
|
||||||
|
const setZoom = (newzoom, viewportCoordCenter) => {
|
||||||
|
if (curZoom == newzoom) {
|
||||||
return false
|
return false
|
||||||
}
|
}
|
||||||
|
|
||||||
const zoomFactor = 1 - (this.curZoom / newzoom)
|
const zoomFactor = 1 - (curZoom / newzoom)
|
||||||
this.move(
|
move(
|
||||||
-viewportCoordCenter.x * zoomFactor,
|
-viewportCoordCenter.x * zoomFactor,
|
||||||
-viewportCoordCenter.y * zoomFactor,
|
-viewportCoordCenter.y * zoomFactor,
|
||||||
)
|
)
|
||||||
this.curZoom = newzoom
|
curZoom = newzoom
|
||||||
return true
|
return true
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -45,8 +43,8 @@ export default class Camera {
|
||||||
* Zooms towards/away from the provided coordinate, if possible.
|
* Zooms towards/away from the provided coordinate, if possible.
|
||||||
* If at max or min zoom respectively, no zooming is performed.
|
* If at max or min zoom respectively, no zooming is performed.
|
||||||
*/
|
*/
|
||||||
zoom(inout, viewportCoordCenter) {
|
const zoom = (inout, viewportCoordCenter) => {
|
||||||
return this.setZoom(this.calculateNewZoom(inout), viewportCoordCenter)
|
return setZoom(calculateNewZoom(inout), viewportCoordCenter)
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
@ -54,12 +52,9 @@ export default class Camera {
|
||||||
* coordinate in the world, rounded
|
* coordinate in the world, rounded
|
||||||
* @param {x, y} viewportCoord
|
* @param {x, y} viewportCoord
|
||||||
*/
|
*/
|
||||||
viewportToWorld(viewportCoord) {
|
const viewportToWorld = (viewportCoord) => {
|
||||||
const worldCoord = this.viewportToWorldRaw(viewportCoord)
|
const { x, y } = viewportToWorldRaw(viewportCoord)
|
||||||
return {
|
return { x: Math.round(x), y: Math.round(y) }
|
||||||
x: Math.round(worldCoord.x),
|
|
||||||
y: Math.round(worldCoord.y),
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
@ -67,10 +62,10 @@ export default class Camera {
|
||||||
* coordinate in the world, not rounded
|
* coordinate in the world, not rounded
|
||||||
* @param {x, y} viewportCoord
|
* @param {x, y} viewportCoord
|
||||||
*/
|
*/
|
||||||
viewportToWorldRaw(viewportCoord) {
|
const viewportToWorldRaw = (viewportCoord) => {
|
||||||
return {
|
return {
|
||||||
x: (viewportCoord.x / this.curZoom) - this.x,
|
x: (viewportCoord.x / curZoom) - x,
|
||||||
y: (viewportCoord.y / this.curZoom) - this.y,
|
y: (viewportCoord.y / curZoom) - y,
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -79,12 +74,9 @@ export default class Camera {
|
||||||
* coordinate in the viewport, rounded
|
* coordinate in the viewport, rounded
|
||||||
* @param {x, y} worldCoord
|
* @param {x, y} worldCoord
|
||||||
*/
|
*/
|
||||||
worldToViewport(worldCoord) {
|
const worldToViewport = (worldCoord) => {
|
||||||
const viewportCoord = this.worldToViewportRaw(worldCoord)
|
const { x, y } = worldToViewportRaw(worldCoord)
|
||||||
return {
|
return { x: Math.round(x), y: Math.round(y) }
|
||||||
x: Math.round(viewportCoord.x),
|
|
||||||
y: Math.round(viewportCoord.y),
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
@ -92,10 +84,10 @@ export default class Camera {
|
||||||
* coordinate in the viewport, not rounded
|
* coordinate in the viewport, not rounded
|
||||||
* @param {x, y} worldCoord
|
* @param {x, y} worldCoord
|
||||||
*/
|
*/
|
||||||
worldToViewportRaw(worldCoord) {
|
const worldToViewportRaw = (worldCoord) => {
|
||||||
return {
|
return {
|
||||||
x: (worldCoord.x + this.x) * this.curZoom,
|
x: (worldCoord.x + x) * curZoom,
|
||||||
y: (worldCoord.y + this.y) * this.curZoom,
|
y: (worldCoord.y + y) * curZoom,
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -104,12 +96,9 @@ export default class Camera {
|
||||||
* one in the viewport, rounded
|
* one in the viewport, rounded
|
||||||
* @param {w, h} worldDim
|
* @param {w, h} worldDim
|
||||||
*/
|
*/
|
||||||
worldDimToViewport(worldDim) {
|
const worldDimToViewport = (worldDim) => {
|
||||||
const viewportDim = this.worldDimToViewportRaw(worldDim)
|
const { w, h } = worldDimToViewportRaw(worldDim)
|
||||||
return {
|
return { w: Math.round(w), h: Math.round(h) }
|
||||||
w: Math.round(viewportDim.w),
|
|
||||||
h: Math.round(viewportDim.h),
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -118,10 +107,22 @@ export default class Camera {
|
||||||
* one in the viewport, not rounded
|
* one in the viewport, not rounded
|
||||||
* @param {w, h} worldDim
|
* @param {w, h} worldDim
|
||||||
*/
|
*/
|
||||||
worldDimToViewportRaw(worldDim) {
|
const worldDimToViewportRaw = (worldDim) => {
|
||||||
return {
|
return {
|
||||||
w: worldDim.w * this.curZoom,
|
w: worldDim.w * curZoom,
|
||||||
h: worldDim.h * this.curZoom,
|
h: worldDim.h * curZoom,
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
move,
|
||||||
|
canZoom,
|
||||||
|
zoom,
|
||||||
|
worldToViewport,
|
||||||
|
worldToViewportRaw,
|
||||||
|
worldDimToViewport, // not used outside
|
||||||
|
worldDimToViewportRaw,
|
||||||
|
viewportToWorld,
|
||||||
|
viewportToWorldRaw, // not used outside
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue