97 lines
2.8 KiB
JavaScript
97 lines
2.8 KiB
JavaScript
Math.clamp = Math.clamp || function(number, min, max) {
|
|
return Math.max(Math.min(number, max), min);
|
|
}
|
|
|
|
var Previewer = function(renderer, scene) {
|
|
this.domElement = document.createElement('canvas');
|
|
this.ctx = this.domElement.getContext('2d');
|
|
this.renderer = renderer;
|
|
this.fixed = false;
|
|
this.scene = scene;
|
|
this.drawn = false;
|
|
this.drawnBefore = false;
|
|
}
|
|
|
|
Previewer.prototype.render = function(prev, container_width, container_height) {
|
|
var width, height, left, bottom;
|
|
|
|
if (prev.go) {
|
|
width = Math.floor(container_width / 5);
|
|
height = Math.floor(container_height / 5);
|
|
if (!this.fixed) {
|
|
left = Math.floor(prev.x - width/2);
|
|
bottom = Math.floor(this.renderer.domElement.height - prev.y + height/5);
|
|
|
|
// Translate box if too high
|
|
if (bottom + height > this.renderer.domElement.height) {
|
|
bottom -= 7 * height / 5;
|
|
}
|
|
|
|
// Translate box if too on the side
|
|
left = Math.clamp(left, width / 5, this.renderer.domElement.width - 6 * width / 5);
|
|
|
|
} else {
|
|
left = 0;
|
|
bottom = 0;
|
|
}
|
|
|
|
// Draw border
|
|
var can_bottom = container_height - bottom - height ;
|
|
this.ctx.strokeStyle = "#ffffff";
|
|
this.ctx.beginPath();
|
|
this.ctx.moveTo(left-1, can_bottom);
|
|
this.ctx.lineTo(left-1, can_bottom + height);
|
|
this.ctx.lineTo(left + width-1, can_bottom + height);
|
|
this.ctx.lineTo(left + width-1, can_bottom);
|
|
this.ctx.closePath();
|
|
this.ctx.stroke();
|
|
|
|
this.ctx.strokeStyle = "#000000";
|
|
this.ctx.beginPath();
|
|
this.ctx.moveTo(left, can_bottom + 1);
|
|
this.ctx.lineTo(left, can_bottom + height - 1);
|
|
this.ctx.lineTo(left + width - 2 , can_bottom + height-1);
|
|
this.ctx.lineTo(left + width - 2, can_bottom+1);
|
|
this.ctx.closePath();
|
|
this.ctx.stroke();
|
|
|
|
// Do render in previsualization
|
|
prev.camera.look();
|
|
this.renderer.setScissor(left, bottom, width, height);
|
|
this.renderer.enableScissorTest(true);
|
|
this.renderer.setViewport(left, bottom, width, height);
|
|
this.renderer.render(this.scene, prev.camera);
|
|
|
|
this.update(true);
|
|
|
|
if (this.prevCamera !== prev.camera) {
|
|
this.clearNeeded = true;
|
|
}
|
|
|
|
this.prevCamera = prev.camera;
|
|
} else {
|
|
this.update(false);
|
|
}
|
|
|
|
if (this.drawnBefore && !this.drawn) {
|
|
this.clearNeeded = true;
|
|
}
|
|
|
|
}
|
|
|
|
Previewer.prototype.clear = function() {
|
|
if (this.clearNeeded) {
|
|
this.domElement.width = this.domElement.width;
|
|
this.clearNeeded = false;
|
|
}
|
|
}
|
|
|
|
Previewer.prototype.fixedRecommendation = function(bool) {
|
|
this.fixed = bool;
|
|
}
|
|
|
|
Previewer.prototype.update = function(arg) {
|
|
this.drawnBefore = this.drawn;
|
|
this.drawn = arg;
|
|
}
|