A hell of a lot cleaning

js/l3d/src/canvases/MousePointer.js

@@ -0,0 +1,82 @@
+var MousePointer = function(camera) {
+
+    this.domElement = document.createElement('canvas');
+    this.domElement.style.position = 'absolute';
+    this.domElement.style.cssFloat = 'top-left';
+    this.ctx = this.domElement.getContext('2d');
+    this.size = 10;
+    this.drawn = false;
+    camera.mousePointer = this;
+    this.style = MousePointer.NONE;
+};
+
+MousePointer.NONE = 0;
+MousePointer.BLACK = 1;
+MousePointer.RED = 2;
+
+MousePointer.toColor = function(style) {
+
+    switch (style) {
+
+        case MousePointer.NONE:
+            return null;
+        case MousePointer.BLACK:
+            return '#000000';
+        case MousePointer.RED:
+            return '#ff0000';
+
+    }
+
+};
+
+MousePointer.prototype.render = function(style) {
+
+    if (this.style !== style) {
+
+        if (style === MousePointer.NONE) {
+
+            // Clear canvas
+            this.domElement.width = this.domElement.width;
+            this.style = MousePointer.NONE;
+
+        } else {
+
+            this.domElement.width = this.domElement.width;
+
+            var i = container_size.width() / 2;
+            var imin = i - this.size;
+            var imax = i + this.size;
+
+            var j = container_size.height() / 2;
+            var jmin = j - this.size;
+            var jmax = j + this.size;
+
+            this.ctx.beginPath();
+            this.ctx.moveTo(imin, j);
+            this.ctx.lineTo(imax, j);
+            this.ctx.moveTo(i, jmin);
+            this.ctx.lineTo(i, jmax);
+            this.ctx.closePath();
+
+
+            this.ctx.lineWidth = 5;
+            this.ctx.strokeStyle = '#ffffff';
+            this.ctx.stroke();
+
+            this.ctx.lineWidth = 2;
+            this.ctx.strokeStyle = MousePointer.toColor(style);
+            this.ctx.stroke();
+
+            this.style = style;
+
+        }
+
+    }
+
+};
+
+MousePointer.prototype.clear = function() {
+
+    this.render(MousePointer.NONE);
+
+};

js/l3d/src/canvases/Previewer.js

@@ -0,0 +1,96 @@
+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;
+};

js/l3d/src/canvases/StartCanvas.js

@@ -0,0 +1,44 @@
+var StartCanvas = function(camera) {
+
+    this.domElement = document.createElement('canvas');
+    this.domElement.style.position = 'absolute';
+    this.domElement.style.cssFloat = 'top-left';
+    this.ctx = this.domElement.getContext('2d');
+    this.shown = false;
+
+    camera.startCanvas = this;
+
+};
+
+StartCanvas.prototype.render = function() {
+
+    if (!this.shown) {
+
+        this.ctx.fillStyle = 'white';
+        this.ctx.globalAlpha = 0.7;
+        this.ctx.fillRect(0,0,this.domElement.width, this.domElement.height);
+
+        this.ctx.font = '30px Verdana';
+        this.ctx.globalAlpha = 1;
+        this.ctx.fillStyle = 'black';
+        this.ctx.fillText('Click here to lock the pointer !', container_size.width()/3.25, container_size.height()/2-10);
+
+
+        this.shown = true;
+
+    }
+
+};
+
+StartCanvas.prototype.clear = function() {
+
+    if (this.shown) {
+
+        // Clear canvas
+        this.domElement.width = this.domElement.width;
+
+        this.shown = false;
+
+    }
+
+};