tforgione/3d-interface
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Improved undo / redo

Browse Source
This commit is contained in:
Thomas FORGIONE 2015-04-30 14:53:55 +02:00
parent c5f07757aa
commit 2e482079e1
5 changed files with 163 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
prototype/arrows/index.md
View File

@ -26,7 +26,14 @@ button.
<button class="btn btn-primary" id="full" style="margin-bottom: 10px; display: none;">Fullscreen</button>
<button class="btn btn-primary" id="reset" style="margin-bottom:10px">Reset camera</button>
<button class="btn btn-primary" id="undo" style="margin-bottom:10px">Undo</button>
<button class="btn btn-danger" id="undo" style="margin-bottom:10px">
<span class="glyphicon glyphicon-triangle-left" aria-hidden="true"></span>
</button>
<button class="btn btn-danger" id="redo" style="margin-bottom:10px">
<span class="glyphicon glyphicon-triangle-right" aria-hidden="true"></span>
</button>
<input type="checkbox" id="fullarrow" style="margin-bottom:10px">
<label for="fullarrow">Full arrow</label>
<input type="checkbox" id="collisions" style="margin-bottom:10px" checked>

11
prototype/viewport/index.md
View File

@ -1,5 +1,5 @@
---
title: Prototype
title: Prototype with old cameras
layout: withjs
extrajs: <script src="/static/js/prototype/viewport/main.js"></script>
extrahead: <link rel="stylesheet" href="/static/css/prototype.css" />
@ -26,7 +26,14 @@ button.
<button class="btn btn-primary" id="full" style="margin-bottom: 10px; display: none;">Fullscreen</button>
<button class="btn btn-primary" id="reset" style="margin-bottom:10px">Reset camera</button>
<button class="btn btn-primary" id="undo" style="margin-bottom:10px">Undo</button>
<button class="btn btn-danger" id="undo" style="margin-bottom:10px">
<span class="glyphicon glyphicon-triangle-left" aria-hidden="true"></span>
</button>
<button class="btn btn-danger" id="redo" style="margin-bottom:10px">
<span class="glyphicon glyphicon-triangle-right" aria-hidden="true"></span>
</button>
<input type="checkbox" id="fullarrow" style="margin-bottom:10px">
<label for="fullarrow">Full arrow</label>
<input type="checkbox" id="collisions" style="margin-bottom:10px" checked>

104
static/js/PointerCamera.js
View File

@ -37,6 +37,9 @@ var PointerCamera = function() {
// Raycaster for collisions
this.raycaster = new THREE.Raycaster();
// Create history object
this.history = new History();
// Set events from the document
var self = this;
var onKeyDown = function(event) {self.onKeyDown(event);};
@ -76,10 +79,10 @@ PointerCamera.prototype.update = function() {
} else {
// Update angles
if (this.increasePhi) this.phi += this.sensitivity;
if (this.decreasePhi) this.phi -= this.sensitivity;
if (this.increaseTheta) this.theta += this.sensitivity;
if (this.decreaseTheta) this.theta -= this.sensitivity;
if (this.increasePhi) {this.phi += this.sensitivity; this.changed = true; }
if (this.decreasePhi) {this.phi -= this.sensitivity; this.changed = true; }
if (this.increaseTheta) {this.theta += this.sensitivity; this.changed = true; }
if (this.decreaseTheta) {this.theta -= this.sensitivity; this.changed = true; }
if (this.dragging) {
this.theta += this.mouseMove.x;
@ -87,6 +90,8 @@ PointerCamera.prototype.update = function() {
this.mouseMove.x = 0;
this.mouseMove.y = 0;
this.changed = true;
}
// Clamp phi and theta
@ -110,10 +115,10 @@ PointerCamera.prototype.update = function() {
var direction = new THREE.Vector3();
if (this.boost) speed *= 10;
if (this.moveForward) direction.add(Tools.mul(forward, speed));
if (this.moveBackward) direction.sub(Tools.mul(forward, speed));
if (this.moveLeft) direction.add(Tools.mul(left, speed));
if (this.moveRight) direction.sub(Tools.mul(left, speed));
if (this.moveForward) {direction.add(Tools.mul(forward, speed)); this.changed = true;}
if (this.moveBackward) {direction.sub(Tools.mul(forward, speed)); this.changed = true;}
if (this.moveLeft) {direction.add(Tools.mul(left, speed)); this.changed = true;}
if (this.moveRight) {direction.sub(Tools.mul(left, speed)); this.changed = true;}
if (!this.collisions || !this.isColliding(direction)) {
this.position.add(direction);
@ -129,6 +134,7 @@ PointerCamera.prototype.reset = function() {
this.position.copy(new THREE.Vector3(-8.849933489419644, 9.050627639459208, 0.6192960680432451));
this.target.copy(new THREE.Vector3(17.945323228767702, -15.156828589982375, -16.585740412769756));
this.anglesFromVectors();
this.save();
}
PointerCamera.prototype.vectorsFromAngles = function() {
@ -154,7 +160,10 @@ PointerCamera.prototype.anglesFromVectors = function() {
this.theta = Math.atan2(forward.x, forward.z);
}
PointerCamera.prototype.move = function(otherCamera) {
PointerCamera.prototype.move = function(otherCamera, toSave) {
if (toSave === undefined)
toSave = true;
this.moving = true;
this.new_target = otherCamera.target.clone();
this.new_position = otherCamera.position.clone();
@ -163,6 +172,14 @@ PointerCamera.prototype.move = function(otherCamera) {
var fp = [Tools.diff(this.target, this.position), Tools.diff(this.new_target, this.new_position)];
this.hermite = new Hermite.Polynom(t,f,fp);
this.t = 0;
if (toSave) {
if (this.changed) {
this.save();
this.changed = false;
}
this.history.addState({position: otherCamera.position.clone(), target: otherCamera.target.clone()});
}
}
PointerCamera.prototype.isColliding = function(direction) {
@ -248,15 +265,74 @@ PointerCamera.prototype.log = function() {
}
PointerCamera.prototype.save = function() {
this.backup = {};
this.backup.position = this.position.clone();
this.backup.target = this.target.clone();
var backup = {};
backup.position = this.position.clone();
backup.target = this.target.clone();
this.history.addState(backup);
}
PointerCamera.prototype.load = function() {
this.move(this.backup);
PointerCamera.prototype.undo = function() {
var move = this.history.undo();
if (move !== undefined)
this.move(move, false);
}
PointerCamera.prototype.redo = function() {
var move = this.history.redo();
if (move !== undefined)
this.move(move, false);
}
PointerCamera.prototype.undoable = function() {
return this.history.undoable();
}
PointerCamera.prototype.redoable = function() {
return this.history.redoable();
}
// Static members
PointerCamera.DISTANCE_X = 1000;
PointerCamera.DISTANCE_Z = 300;
var History = function() {
this.states = new Array();
this.index = -1;
this.size = 0;
console.log('New state ' + this.index + ' / ' + this.size);
}
History.prototype.addState = function(state) {
++this.index;
this.size = this.index + 1;
this.states[this.size-1] = state;
console.log('New state ' + this.index + ' / ' + this.size);
}
History.prototype.undo = function() {
if (this.undoable()) {
this.index--;
console.log('New state ' + this.index + ' / ' + this.size);
return this.currentState();
}
}
History.prototype.redo = function() {
if (this.redoable()) {
this.index++;
console.log('New state ' + this.index + ' / ' + this.size);
return this.currentState();
}
}
History.prototype.undoable = function() {
return this.index > 0;
}
History.prototype.redoable = function() {
return this.index < this.size - 1;
}
History.prototype.currentState = function() {
return this.states[this.index];
}

31
static/js/prototype/arrows/main.js vendored
View File

@ -35,6 +35,24 @@ var prev = {x:0, y:0, go:false};
var showArrows = true;
var beenFullscreen = false;
var undoElement = document.getElementById('undo');
var redoElement = document.getElementById('redo');
function updateElements() {
// Update icon
if (!cameras.mainCamera().undoable()) {
undoElement.className = "btn btn-danger";
} else {
undoElement.className = "btn btn-primary";
}
if (!cameras.mainCamera().redoable()) {
redoElement.className = "btn btn-danger";
} else {
redoElement.className = "btn btn-primary";
}
}
init();
animate();
@ -65,8 +83,15 @@ function init() {
showArrows = showarrows.checked;
}
document.getElementById('undo').onclick = function() {
cameras.mainCamera().load();
undoElement.onclick = function() {
cameras.mainCamera().undo();
updateElements();
}
redoElement.onclick = function() {
cameras.mainCamera().redo();
updateElements();
}
// on initialise le moteur de rendu
@ -479,8 +504,8 @@ function updateMouse(event) {
function click(event) {
var newCamera = pointedCamera(event);
if (newCamera !== undefined) {
cameras.mainCamera().save();
cameras.mainCamera().move(newCamera);
updateElements();
}
}

31
static/js/prototype/viewport/main.js vendored
View File

@ -35,6 +35,24 @@ var prev = {x:0, y:0, go:false};
var showArrows = true;
var beenFullscreen = false;
var undoElement = document.getElementById('undo');
var redoElement = document.getElementById('redo');
function updateElements() {
// Update icon
if (!cameras.mainCamera().undoable()) {
undoElement.className = "btn btn-danger";
} else {
undoElement.className = "btn btn-primary";
}
if (!cameras.mainCamera().redoable()) {
redoElement.className = "btn btn-danger";
} else {
redoElement.className = "btn btn-primary";
}
}
init();
animate();
@ -65,8 +83,15 @@ function init() {
showArrows = showarrows.checked;
}
document.getElementById('undo').onclick = function() {
cameras.mainCamera().load();
undoElement.onclick = function() {
cameras.mainCamera().undo();
updateElements();
}
redoElement.onclick = function() {
cameras.mainCamera().redo();
updateElements();
}
// on initialise le moteur de rendu
@ -479,8 +504,8 @@ function updateMouse(event) {
function click(event) {
var newCamera = pointedCamera(event);
if (newCamera !== undefined) {
cameras.mainCamera().save();
cameras.mainCamera().move(newCamera);
updateElements();
}
}