stable epoch
Hello, I have a class that encapsulates a document element and registers EventListeners for said element. The idea is that the callbacks from events will modify public field members which will then be accessible to other parts of the application. However, all modifications inside of the callback functions are not propagating to field members when accessed outside of the callbacks. I.e. If I set zoom (a field member) to be 4.0 in the callback and later call getZoom() public member function in some other part of my code, it returns 1.... What am I doing wrong?
code :
export class Canvas {
private canvas: HTMLCanvasElement
private view: mat4 = mat4.create();
private zoom: number = 1;
private camPos: number;
constructor() {
console.log("canvas constructed");
this.canvas = document.getElementById("c") as HTMLCanvasElement;
this.canvas.addEventListener('wheel', this.handleScroll);
this.canvas.addEventListener('click', this.handleClick);
}
private handleScroll(event: WheelEvent) {
if(event.deltaY != 0) {
if(this.zoom == undefined || this.zoom == 0) {
this.zoom = 1;
}
this.zoom += (event.deltaY / Math.abs(event.deltaY)) * -0.1; //zoom sensitvity
this.zoom = Math.min(Math.max(0.125, this.zoom), 4); //restrict the zoom level here
}
console.log(`zoom : ${this.zoom}`)
console.log(`view : ${this.view}`)
}
private handleClick() {
console.log("canvas clicked!")
}
public resizeCanvasToDisplay() {
this.canvas.width = this.canvas.clientWidth;
this.canvas.height = this.canvas.clientHeight;
}
public getCanvas() {
return this.canvas;
}
public getView() {
console.log(this.zoom) //this is returning 1 always....
}
}
near silo
young flame