cleaning up webgldrawer

src/webgldrawer.js

@@ -72,10 +72,10 @@
            this.viewer.addHandler("tile-ready", ev => this._tileReadyHandler(ev));
            this.viewer.addHandler("image-unloaded", ev => this._imageUnloadedHandler(ev));
 
-           // this.viewer is set by parent constructor
+           // this.viewer and this.canvas are part of the public DrawerBase API
-           // this.canvas is set by parent constructor, created and appended to the viewer container element
+           // and are set by the parent constructor. Additional setup is done by
+           // the private _setupCanvases and _setupRenderer functions.
            this._setupCanvases();
-
            this._setupRenderer();
 
            this.context = this._outputContext; // API required by tests
@@ -143,7 +143,6 @@
         }
 
         // Public API required by all Drawer implementations
-
         /**
         * @returns {Boolean} true if canvas and webgl are supported
         */
@@ -181,7 +180,7 @@
         */
         draw(tiledImages){
             let gl = this._gl;
-            let viewport = {
+            let view = {
                 bounds: this.viewport.getBoundsNoRotate(true),
                 center: this.viewport.getCenter(true),
                 rotation: this.viewport.getRotation(true) * Math.PI / 180
@@ -189,9 +188,9 @@
 
             let flipMultiplier = this.viewport.flipped ? -1 : 1;
             // calculate view matrix for viewer
-            let posMatrix = $.Mat3.makeTranslation(-viewport.center.x, -viewport.center.y);
+            let posMatrix = $.Mat3.makeTranslation(-view.center.x, -view.center.y);
-            let scaleMatrix = $.Mat3.makeScaling(2 / viewport.bounds.width * flipMultiplier, -2 / viewport.bounds.height);
+            let scaleMatrix = $.Mat3.makeScaling(2 / view.bounds.width * flipMultiplier, -2 / view.bounds.height);
-            let rotMatrix = $.Mat3.makeRotation(-viewport.rotation);
+            let rotMatrix = $.Mat3.makeRotation(-view.rotation);
             let viewMatrix = scaleMatrix.multiply(rotMatrix).multiply(posMatrix);
 
             gl.bindFramebuffer(gl.FRAMEBUFFER, null);
@@ -248,9 +247,6 @@
                     // no need to clear, just draw on top of the existing pixels
                 }
 
-
-
-
                 let overallMatrix = viewMatrix;
 
                 let imageRotation = tiledImage.getRotation(true);
@@ -418,6 +414,7 @@
 
             context.restore();
         }
+
         // private
         _getTextureDataFromTile(tile){
             return tile.getCanvasContext().canvas;
@@ -804,7 +801,7 @@
                     let bottom = tile.isBottomMost ? 1 : 1 - overlapFraction.y;
                     position = this._makeQuadVertexBuffer(left, right, top, bottom);
                 } else {
-                    // no overlap: this texture can use the unit quad as it's position data
+                    // no overlap: this texture can use the unit quad as its position data
                     position = this._unitQuad;
                 }
 
@@ -883,7 +880,6 @@
         }
 
         // private
-        // necessary for clip testing to pass (test uses spyOnce(drawer._setClip))
         _setClip(rect){
             this._clippingContext.beginPath();
             this._clippingContext.rect(rect.x, rect.y, rect.width, rect.height);
@@ -955,6 +951,7 @@
                 }
             }
         }
+
         // private
         _drawDebugInfoOnTile(tile, count, i, tiledImage, stroke, fill) {
 
@@ -1065,28 +1062,6 @@
 
         // modified from https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API/Tutorial/Adding_2D_content_to_a_WebGL_context
         static initShaderProgram(gl, vsSource, fsSource) {
-            const vertexShader = loadShader(gl, gl.VERTEX_SHADER, vsSource);
-            const fragmentShader = loadShader(gl, gl.FRAGMENT_SHADER, fsSource);
-
-            // Create the shader program
-
-            const shaderProgram = gl.createProgram();
-            gl.attachShader(shaderProgram, vertexShader);
-            gl.attachShader(shaderProgram, fragmentShader);
-            gl.linkProgram(shaderProgram);
-
-            // If creating the shader program failed, alert
-
-            if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
-            alert(
-                `Unable to initialize the shader program: ${gl.getProgramInfoLog(
-                shaderProgram
-                )}`
-            );
-            return null;
-            }
-
-            return shaderProgram;
 
             function loadShader(gl, type, source) {
                 const shader = gl.createShader(type);
@@ -1102,7 +1077,7 @@
                 // See if it compiled successfully
 
                 if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
-                        alert(
+                    $.console.error(
                         `An error occurred compiling the shaders: ${gl.getShaderInfoLog(shader)}`
                     );
                     gl.deleteShader(shader);
@@ -1111,6 +1086,29 @@
 
                 return shader;
             }
+
+            const vertexShader = loadShader(gl, gl.VERTEX_SHADER, vsSource);
+            const fragmentShader = loadShader(gl, gl.FRAGMENT_SHADER, fsSource);
+
+            // Create the shader program
+
+            const shaderProgram = gl.createProgram();
+            gl.attachShader(shaderProgram, vertexShader);
+            gl.attachShader(shaderProgram, fragmentShader);
+            gl.linkProgram(shaderProgram);
+
+            // If creating the shader program failed, alert
+
+            if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
+            $.console.error(
+                `Unable to initialize the shader program: ${gl.getProgramInfoLog(
+                shaderProgram
+                )}`
+            );
+            return null;
+            }
+
+            return shaderProgram;
         }
 
     };