2017-01-10 17:04:30 +01:00
|
|
|
/**
|
|
|
|
* Input parent class
|
|
|
|
* @param graphics GameLib.D3.Graphics
|
|
|
|
* @param apiInputEditor GameLib.D3.API.Input.Editor
|
2017-01-12 17:40:17 +01:00
|
|
|
* @param dom GameLib.DOM
|
2017-01-10 17:04:30 +01:00
|
|
|
* @constructor
|
|
|
|
*/
|
|
|
|
GameLib.D3.Input.Editor = function (
|
|
|
|
graphics,
|
2017-01-12 17:40:17 +01:00
|
|
|
apiInputEditor,
|
|
|
|
dom
|
2017-01-10 17:04:30 +01:00
|
|
|
) {
|
|
|
|
|
|
|
|
this.graphics = graphics;
|
|
|
|
this.graphics.isNotThreeThrow();
|
|
|
|
|
2017-01-12 17:40:17 +01:00
|
|
|
if (GameLib.Utils.UndefinedOrNull(apiInputEditor)) {
|
|
|
|
apiInputEditor = {};
|
|
|
|
}
|
|
|
|
|
2017-01-10 17:04:30 +01:00
|
|
|
GameLib.D3.API.Input.Editor.call(
|
|
|
|
this,
|
|
|
|
apiInputEditor.id,
|
|
|
|
apiInputEditor.name,
|
2017-01-12 17:40:17 +01:00
|
|
|
apiInputEditor.domElementId,
|
|
|
|
apiInputEditor.domContainerId,
|
|
|
|
apiInputEditor.editor,
|
2017-01-10 17:04:30 +01:00
|
|
|
apiInputEditor.camera,
|
2017-01-12 17:40:17 +01:00
|
|
|
apiInputEditor.widthOffset,
|
|
|
|
apiInputEditor.heightOffset,
|
|
|
|
apiInputEditor.containerWidthOffset,
|
|
|
|
apiInputEditor.containerHeightOffset,
|
2017-01-10 17:04:30 +01:00
|
|
|
apiInputEditor.parentEntity
|
|
|
|
);
|
2017-01-11 16:09:06 +01:00
|
|
|
|
2017-01-12 17:40:17 +01:00
|
|
|
if (GameLib.Utils.UndefinedOrNull(dom)) {
|
|
|
|
console.warn('Cannot create Input without an handle to the DOM');
|
|
|
|
throw new Error('Cannot create Input without an handle to the DOM');
|
|
|
|
}
|
|
|
|
this.dom = dom;
|
|
|
|
|
|
|
|
this.element = null;
|
|
|
|
this.container = null;
|
|
|
|
|
2017-01-13 16:19:51 +01:00
|
|
|
this.meshMoveMode = false;
|
|
|
|
this.meshMoveXMode = false;
|
|
|
|
this.meshMoveYMode = false;
|
|
|
|
this.meshMoveZMode = false;
|
|
|
|
|
2017-01-12 17:40:17 +01:00
|
|
|
/**
|
|
|
|
* We need new function pointers with scope bound to this so we can remove the
|
|
|
|
* window event handlers when we need to
|
|
|
|
* @type {function()}
|
|
|
|
*/
|
|
|
|
this.resize = this.onWindowResize.bind(this);
|
|
|
|
this.mouseMove = this.onMouseMove.bind(this);
|
|
|
|
this.mouseDown = this.onMouseDown.bind(this);
|
|
|
|
this.keyPress = this.onKeyPress.bind(this);
|
|
|
|
this.contextMenu = this.onContextMenu.bind(this);
|
2017-01-11 16:09:06 +01:00
|
|
|
|
2017-01-10 17:04:30 +01:00
|
|
|
this.instance = this.createInstance();
|
|
|
|
};
|
|
|
|
|
|
|
|
GameLib.D3.Input.Editor.prototype = Object.create(GameLib.D3.API.Input.Editor.prototype);
|
|
|
|
GameLib.D3.Input.Editor.prototype.constructor = GameLib.D3.Input.Editor;
|
|
|
|
|
|
|
|
GameLib.D3.Input.Editor.prototype.createInstance = function(update) {
|
|
|
|
|
2017-01-13 16:19:51 +01:00
|
|
|
this.element = this.dom.document.getElementById(this.domElementId);
|
|
|
|
if (!this.element) {
|
2017-01-12 17:40:17 +01:00
|
|
|
console.warn('Could not locate DOM element with ID: ' + this.domElementId);
|
|
|
|
throw new Error('Could not locate DOM element with ID: ' + this.domElementId);
|
|
|
|
}
|
2017-01-10 17:04:30 +01:00
|
|
|
|
2017-01-12 17:40:17 +01:00
|
|
|
this.container = this.dom.document.getElementById(this.domContainerId);
|
|
|
|
if (!this.container) {
|
|
|
|
console.warn('Could not locate DOM container with ID: ' + this.domContainerId);
|
|
|
|
throw new Error('Could not locate DOM container with ID: ' + this.domContainerId);
|
|
|
|
}
|
2017-01-10 17:04:30 +01:00
|
|
|
|
2017-01-13 16:19:51 +01:00
|
|
|
var instance = null;
|
|
|
|
|
|
|
|
if (update) {
|
|
|
|
instance = this.instance;
|
|
|
|
instance.camera = this.camera.instance;
|
|
|
|
return instance;
|
|
|
|
} else {
|
|
|
|
instance = new THREE.EditorControls(
|
|
|
|
this.camera.instance,
|
|
|
|
this.element
|
|
|
|
)
|
|
|
|
}
|
|
|
|
|
|
|
|
this.element.addEventListener(
|
2017-01-12 17:40:17 +01:00
|
|
|
'mousemove',
|
|
|
|
this.mouseMove,
|
|
|
|
false
|
|
|
|
);
|
2017-01-10 17:04:30 +01:00
|
|
|
|
2017-01-13 16:19:51 +01:00
|
|
|
this.element.addEventListener(
|
2017-01-12 17:40:17 +01:00
|
|
|
'contextmenu',
|
|
|
|
this.contextMenu,
|
|
|
|
false
|
|
|
|
);
|
2017-01-10 17:04:30 +01:00
|
|
|
|
2017-01-13 16:19:51 +01:00
|
|
|
this.element.addEventListener(
|
2017-01-12 17:40:17 +01:00
|
|
|
'mousedown',
|
|
|
|
this.mouseDown,
|
|
|
|
false
|
|
|
|
);
|
2017-01-10 17:04:30 +01:00
|
|
|
|
2017-01-13 16:19:51 +01:00
|
|
|
this.element.addEventListener(
|
2017-01-12 17:40:17 +01:00
|
|
|
'keydown',
|
|
|
|
this.keyPress,
|
|
|
|
false
|
|
|
|
);
|
|
|
|
|
|
|
|
this.dom.window.addEventListener(
|
|
|
|
'resize',
|
|
|
|
this.resize,
|
|
|
|
false
|
|
|
|
);
|
2017-01-10 17:04:30 +01:00
|
|
|
|
|
|
|
return instance;
|
|
|
|
};
|
|
|
|
|
|
|
|
GameLib.D3.Input.Editor.prototype.updateInstance = function() {
|
|
|
|
this.instance = this.createInstance(true);
|
|
|
|
};
|
|
|
|
|
|
|
|
/**
|
|
|
|
* GameLib.D3.Input.Editor to GameLib.D3.API.Input.Editor
|
|
|
|
* @returns {GameLib.D3.API.Input.Editor}
|
|
|
|
*/
|
|
|
|
GameLib.D3.Input.Editor.prototype.toApiComponent = function() {
|
|
|
|
|
|
|
|
var apiInputEditor = new GameLib.D3.API.Input.Editor(
|
|
|
|
this.id,
|
|
|
|
this.name,
|
|
|
|
this.domElementId,
|
2017-01-13 16:19:51 +01:00
|
|
|
this.domContainerId,
|
2017-01-12 17:40:17 +01:00
|
|
|
GameLib.Utils.IdOrNull(this.editor),
|
|
|
|
GameLib.Utils.IdOrNull(this.camera),
|
2017-01-13 16:19:51 +01:00
|
|
|
this.widthOffset,
|
|
|
|
this.heightOffset,
|
|
|
|
this.containerWidthOffset,
|
|
|
|
this.containerHeightOffset,
|
2017-01-12 17:40:17 +01:00
|
|
|
GameLib.Utils.IdOrNull(this.parentEntity)
|
2017-01-10 17:04:30 +01:00
|
|
|
);
|
|
|
|
|
|
|
|
return apiInputEditor;
|
|
|
|
};
|
|
|
|
|
|
|
|
GameLib.D3.Input.Editor.FromObjectComponent = function(graphics, objectComponent) {
|
|
|
|
|
|
|
|
var apiInputEditor = GameLib.D3.API.Input.Editor.FromObjectComponent(objectComponent);
|
|
|
|
|
|
|
|
return new GameLib.D3.Input.Editor(
|
|
|
|
graphics,
|
|
|
|
apiInputEditor
|
|
|
|
);
|
|
|
|
};
|
|
|
|
|
2017-01-12 17:40:17 +01:00
|
|
|
GameLib.D3.Input.Editor.prototype.onWindowResize = function() {
|
|
|
|
|
|
|
|
this.container.style.height = (this.window.innerHeight - this.containerHeightOffset) + 'px';
|
|
|
|
this.container.style.width = (this.window.innerWidth - this.containerWidthOffset) + 'px';
|
|
|
|
|
2017-01-13 16:19:51 +01:00
|
|
|
var width = this.window.innerWidth - this.widthOffset;
|
|
|
|
|
|
|
|
var height = this.window.innerHeight - this.heightOffset;
|
|
|
|
|
|
|
|
//TODO: map the relative viewport sizes and offsets with the size differences
|
|
|
|
|
|
|
|
this.editor.viewports.map(
|
|
|
|
function(viewport) {
|
|
|
|
viewport.width = width;
|
|
|
|
viewport.height = height;
|
|
|
|
viewport.updateInstance();
|
|
|
|
}
|
|
|
|
);
|
|
|
|
|
|
|
|
this.editor.game.viewports.map(
|
|
|
|
function(viewport) {
|
|
|
|
viewport.width = width;
|
|
|
|
viewport.height = height;
|
|
|
|
viewport.updateInstance();
|
|
|
|
}
|
2017-01-12 17:40:17 +01:00
|
|
|
);
|
|
|
|
//
|
|
|
|
// this.scene.cameras[this.scene.activeCameraIndex].aspect = () / window.innerHeight;
|
|
|
|
// this.scene.cameras[this.scene.activeCameraIndex].updateInstance();
|
|
|
|
//
|
|
|
|
// this.scene.renderers[this.scene.activeRendererIndex].width = window.innerWidth - 400;
|
|
|
|
// this.scene.renderers[this.scene.activeRendererIndex].height = window.innerHeight;
|
|
|
|
// this.scene.renderers[this.scene.activeRendererIndex].updateInstance();
|
|
|
|
};
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Keypress events
|
|
|
|
* @param event
|
|
|
|
*/
|
|
|
|
GameLib.D3.Input.Editor.prototype.onKeyPress = function(event) {
|
|
|
|
|
|
|
|
if (event.code == "KeyQ") {
|
|
|
|
|
|
|
|
this.editor.allSelected = !this.editor.allSelected;
|
|
|
|
|
|
|
|
if (this.editor.allSelected) {
|
|
|
|
|
|
|
|
this.editor.games.map(
|
|
|
|
function(game) {
|
|
|
|
|
|
|
|
for (var property in game.idToObject) {
|
|
|
|
if (game.idToObject.hasOwnProperty(property)) {
|
|
|
|
this.editor.selectedObjects.push(
|
|
|
|
new GameLib.D3.SelectedObject(
|
|
|
|
this.graphics,
|
|
|
|
game.idToObject(property)
|
|
|
|
)
|
|
|
|
)
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
}.bind(this)
|
|
|
|
);
|
|
|
|
|
|
|
|
} else {
|
|
|
|
this.editor.selectedObjects = [];
|
|
|
|
}
|
|
|
|
|
|
|
|
if (this.editor.onSelectionChange) {
|
|
|
|
this.editor.onSelectionChange(this.editor);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
if (event.code == 'KeyG') {
|
|
|
|
if (!this.meshMoveMode) {
|
|
|
|
console.log('move mode');
|
|
|
|
this.meshMoveMode = true;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
if (event.code == 'KeyX') {
|
|
|
|
if (this.meshMoveMode) {
|
|
|
|
console.log('move along x');
|
|
|
|
this.meshMoveXMode = true;
|
|
|
|
this.meshMoveYMode = false;
|
|
|
|
this.meshMoveZMode = false;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
if (event.code == 'KeyY') {
|
|
|
|
if (this.meshMoveMode) {
|
|
|
|
console.log('move along y');
|
|
|
|
this.meshMoveXMode = false;
|
|
|
|
this.meshMoveYMode = true;
|
|
|
|
this.meshMoveZMode = false;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
if (event.code == 'KeyZ') {
|
|
|
|
if (this.meshMoveMode) {
|
|
|
|
console.log('move along z');
|
|
|
|
this.meshMoveXMode = false;
|
|
|
|
this.meshMoveYMode = false;
|
|
|
|
this.meshMoveZMode = true;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
if (event.code == 'Escape') {
|
|
|
|
if (this.meshMoveMode) {
|
|
|
|
this.meshMoveMode = false;
|
|
|
|
console.log('TODO: implement restore positions');
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
if (event.code == 'Enter') {
|
|
|
|
if (this.meshMoveMode) {
|
|
|
|
this.meshMoveMode = false;
|
|
|
|
console.log('TODO: implement apply positions');
|
|
|
|
}
|
|
|
|
}
|
|
|
|
};
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Mouse click events
|
|
|
|
* @param event
|
|
|
|
* @returns {boolean}
|
|
|
|
*/
|
|
|
|
GameLib.D3.Input.Editor.prototype.onMouseDown = function(event) {
|
|
|
|
|
|
|
|
if (event.button == 2) {
|
|
|
|
|
|
|
|
event.cancelBubble = true;
|
|
|
|
|
|
|
|
event.preventDefault();
|
|
|
|
|
|
|
|
if (event.stopPropagation) {
|
|
|
|
event.stopPropagation();
|
|
|
|
}
|
|
|
|
|
|
|
|
var meshInstances = [];
|
|
|
|
|
|
|
|
for (var m = 0; m < this.scene.meshes.length; m++) {
|
|
|
|
meshInstances.push(this.scene.meshes[m].instance);
|
|
|
|
}
|
|
|
|
|
|
|
|
var intersects = this.scene.raycaster.instance.intersectObjects(meshInstances);
|
|
|
|
|
|
|
|
if (intersects.length > 0) {
|
|
|
|
|
|
|
|
var index = -1;
|
|
|
|
|
|
|
|
for (var s = 0; s < this.selectedObjects.length; s++) {
|
|
|
|
if (this.selectedObjects[s].object.instance == intersects[0].object) {
|
|
|
|
index = s;
|
|
|
|
break;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
if (index == -1) {
|
|
|
|
/**
|
|
|
|
* The object is not selected, select it
|
|
|
|
*/
|
|
|
|
this.selectObject(intersects[0].object.gameLibObject);
|
|
|
|
|
|
|
|
this.buildSelectedObjects();
|
|
|
|
|
|
|
|
this.buildGUI();
|
|
|
|
|
|
|
|
} else {
|
|
|
|
/**
|
|
|
|
* De-select the objec
|
|
|
|
*/
|
|
|
|
var delta = Date.now() - this.selectedObjects[index].lastUpdate;
|
|
|
|
if (delta > 300) {
|
|
|
|
|
|
|
|
this.unselectObject(intersects[0].object.gameLibObject);
|
|
|
|
|
|
|
|
this.buildSelectedObjects();
|
|
|
|
|
|
|
|
this.buildGUI();
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
return false;
|
|
|
|
}
|
|
|
|
|
|
|
|
if (event.button == 0) {
|
|
|
|
if (this.meshMoveMode) {
|
|
|
|
this.meshMoveMode = false;
|
|
|
|
this.meshMoveXMode = false;
|
|
|
|
this.meshMoveYMode = false;
|
|
|
|
this.meshMoveZMode = false;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
};
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Mouse move events
|
|
|
|
* @param event
|
|
|
|
*/
|
|
|
|
GameLib.D3.Input.Editor.prototype.onMouseMove = function(event) {
|
|
|
|
var clientX = event.clientX - 400;
|
|
|
|
|
|
|
|
this.scene.mouse.x = ((clientX/ (window.innerWidth - 400))) * 2 - 1;
|
|
|
|
this.scene.mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
|
|
|
|
|
|
|
|
this.scene.raycaster.instance.setFromCamera(
|
|
|
|
this.scene.mouse,
|
|
|
|
this.scene.cameras[this.scene.activeCameraIndex].instance
|
|
|
|
);
|
|
|
|
|
|
|
|
if (this.meshMoveMode) {
|
|
|
|
|
|
|
|
var units = event.movementY;
|
|
|
|
|
|
|
|
if (this.meshMoveXMode) {
|
|
|
|
this.moveSelectedObjects('x', units);
|
|
|
|
}
|
|
|
|
|
|
|
|
if (this.meshMoveYMode) {
|
|
|
|
this.moveSelectedObjects('y', units);
|
|
|
|
}
|
|
|
|
|
|
|
|
if (this.meshMoveZMode) {
|
|
|
|
this.moveSelectedObjects('z', units);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
};
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Prevent Context Menu creation
|
|
|
|
* @param event
|
|
|
|
* @returns {boolean}
|
|
|
|
*/
|
|
|
|
GameLib.D3.Input.Editor.prototype.onContextMenu = function(event){
|
|
|
|
|
|
|
|
if (event.stopPropagation) {
|
|
|
|
event.stopPropagation();
|
|
|
|
}
|
|
|
|
|
|
|
|
if (event.preventDefault) {
|
|
|
|
event.preventDefault();
|
|
|
|
}
|
|
|
|
|
|
|
|
event.cancelBubble = true;
|
|
|
|
return false;
|
|
|
|
};
|
|
|
|
|
2017-01-10 17:04:30 +01:00
|
|
|
GameLib.D3.Input.Editor.prototype.update = function(deltaTime) {
|
|
|
|
if (this.pathFollowingComponent) {
|
|
|
|
|
|
|
|
this.pathFollowingComponent.mesh.localPosition.x = (this.heightOffset * this.pathFollowingComponent.rotationMatrix.up.x);
|
|
|
|
this.pathFollowingComponent.mesh.localPosition.y = (this.heightOffset * this.pathFollowingComponent.rotationMatrix.up.y);
|
|
|
|
this.pathFollowingComponent.mesh.localPosition.z = (this.heightOffset * this.pathFollowingComponent.rotationMatrix.up.z);
|
|
|
|
|
|
|
|
if (this.keyLeft) {
|
|
|
|
this.distance -= this.distanceGrain;
|
|
|
|
}
|
|
|
|
|
|
|
|
if (this.keyRight) {
|
|
|
|
this.distance += this.distanceGrain;
|
|
|
|
}
|
|
|
|
|
|
|
|
this.pathFollowingComponent.mesh.localPosition.x += (this.distance * this.pathFollowingComponent.rotationMatrix.left.x);
|
|
|
|
this.pathFollowingComponent.mesh.localPosition.y += (this.distance * this.pathFollowingComponent.rotationMatrix.left.y);
|
|
|
|
this.pathFollowingComponent.mesh.localPosition.z += (this.distance * this.pathFollowingComponent.rotationMatrix.left.z);
|
|
|
|
|
|
|
|
this.wheelFL.localRotation.x += this.rotationFactor * this.pathFollowingComponent.currentSpeed;
|
|
|
|
this.wheelFR.localRotation.x += this.rotationFactor * this.pathFollowingComponent.currentSpeed;
|
|
|
|
|
|
|
|
this.wheelFL.localRotation.x += this.rotationFactor * this.pathFollowingComponent.currentSpeed;
|
|
|
|
this.wheelFR.localRotation.x += this.rotationFactor * this.pathFollowingComponent.currentSpeed;
|
|
|
|
|
|
|
|
this.wheelRL.localRotation.x += this.rotationFactor * this.pathFollowingComponent.currentSpeed;
|
|
|
|
this.wheelRR.localRotation.x += this.rotationFactor * this.pathFollowingComponent.currentSpeed;
|
|
|
|
}
|
|
|
|
};
|