215 lines
2.8 KiB
JavaScript
215 lines
2.8 KiB
JavaScript
// eventManager.js
|
|
|
|
import sdl from '@kmamal/sdl'
|
|
|
|
var isNode = true;
|
|
|
|
if ( typeof window === 'undefined' ) {
|
|
|
|
//isNode = false;
|
|
|
|
}
|
|
|
|
console.log("isNode", isNode);
|
|
|
|
export default class EventManager {
|
|
|
|
isDragging = false;
|
|
|
|
lastX = 0;
|
|
|
|
lastY = 0;
|
|
|
|
camera;
|
|
|
|
canvas;
|
|
|
|
setCanvas( canvas ) {
|
|
|
|
this.canvas = canvas;
|
|
|
|
|
|
//this.registerEventListeners();
|
|
|
|
//this.handleResize();
|
|
|
|
}
|
|
|
|
setup( canvas, camera ) {
|
|
|
|
this.canvas = canvas;
|
|
|
|
this.camera = camera;
|
|
|
|
//this.registerEventListeners();
|
|
|
|
//this.handleResize();
|
|
|
|
}
|
|
|
|
registerEventListeners() {
|
|
|
|
this.canvas.addEventListener( "mousedown", this.onMouseDown.bind(this) );
|
|
|
|
this.canvas.addEventListener( "mouseup", this.onMouseUp.bind(this) );
|
|
|
|
this.canvas.addEventListener( "mouseleave", this.onMouseLeave.bind(this) );
|
|
|
|
this.canvas.addEventListener( "mousemove", this.onMouseMove.bind(this) );
|
|
|
|
this.canvas.addEventListener( "wheel", this.onWheel.bind(this), { passive: false } );
|
|
|
|
}
|
|
|
|
registerEventListenersNode() {
|
|
|
|
var that = this;
|
|
|
|
this.canvas.on('mouseMove', function( event ) {
|
|
|
|
that.mousemove( event )
|
|
|
|
});
|
|
|
|
this.canvas.on('mouseButtonDown', function( event ) {
|
|
|
|
that.mousedown( event )
|
|
|
|
});
|
|
|
|
this.canvas.on('mouseButtonUp', function( event ) {
|
|
|
|
that.mouseup( event )
|
|
|
|
});
|
|
|
|
|
|
/*
|
|
this.canvas.on( "mouseButtonDown", this.onMouseDown.bind(this) );
|
|
|
|
this.canvas.on( "mouseButtonUp", this.onMouseUp.bind(this) );
|
|
|
|
//this.canvas.on( "mouseleave", this.onMouseLeave.bind(this) );
|
|
|
|
this.canvas.on( "mouseMove", this.onMouseMove.bind(this) );
|
|
|
|
this.canvas.on( "mouseWheel", this.onWheel.bind(this), { passive: false } );
|
|
*/
|
|
}
|
|
|
|
resize( event ) {
|
|
|
|
this.canvas.width = event.width;
|
|
|
|
this.canvas.height = event.height;
|
|
|
|
//this.canvas.width = window.innerWidth;
|
|
|
|
//this.canvas.height = window.innerHeight;
|
|
|
|
}
|
|
|
|
mousedown( event ) {
|
|
|
|
|
|
|
|
this.isDragging = true;
|
|
|
|
if( isNode ) {
|
|
|
|
var mouseX = event.x;
|
|
|
|
var mouseY = event.y;
|
|
|
|
} else {
|
|
|
|
var mouseX = event.clientX;
|
|
|
|
var mouseY = event.clientY;
|
|
|
|
}
|
|
|
|
//console.log("mouseDownHandler", mouseX, mouseY);
|
|
|
|
if( isNode ) {
|
|
|
|
this.lastX = mouseX;
|
|
|
|
this.lastY = mouseY;
|
|
|
|
} else {
|
|
|
|
this.lastX = mouseX;
|
|
|
|
this.lastY = mouseY;
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
mouseup( event ) {
|
|
|
|
this.isDragging = false;
|
|
|
|
}
|
|
|
|
mouseleave( event ) {
|
|
|
|
this.isDragging = false;
|
|
|
|
}
|
|
|
|
mousemove( event ) {
|
|
|
|
if( isNode ) {
|
|
|
|
var mouseX = event.x;
|
|
|
|
var mouseY = event.y;
|
|
|
|
} else {
|
|
|
|
var mouseX = event.clientX;
|
|
|
|
var mouseY = event.clientY;
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if ( !this.isDragging ) return;
|
|
|
|
const deltaX = ( mouseX - this.lastX ) * 0.005;
|
|
|
|
const deltaY = ( mouseY - this.lastY ) * 0.005;
|
|
|
|
//console.log("mousemove", mouseX, mouseY);
|
|
|
|
this.camera.rotate( deltaX, -deltaY );
|
|
|
|
this.lastX = mouseX;
|
|
|
|
this.lastY = mouseY;
|
|
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
wheel( event ) {
|
|
|
|
|
|
const delta = event.deltaY * 0.01;
|
|
|
|
this.camera.zoom( delta );
|
|
|
|
}
|
|
|
|
}
|