Merge pull request #215 from mqg734/WebGLFixes

Updated Line, Oval and Rectangle geom classes to use object literal notation.  Also, updated canvas-runtime.js to use object literal notation.

1 files changed, 738 insertions, 671 deletions

diff --git a/js/lib/geom/rectangle.js b/js/lib/geom/rectangle.js
index 490a9a6f..d75abb05 100755
--- a/js/lib/geom/rectangle.js
+++ b/js/lib/geom/rectangle.js
@@ -13,370 +13,428 @@ var MaterialsModel = require("js/models/materials-model").MaterialsModel;
 //      GL representation of a rectangle.
 //      Derived from class GeomObj
 ///////////////////////////////////////////////////////////////////////
-var Rectangle = function GLRectangle() {
+exports.Rectangle = Object.create(GeomObj, {
         // CONSTANTS
-        this.N_TRIANGLES = 15;
+        N_TRIANGLES: { value : 15, writable: false },       // TODO - This is not being used anywhere. Remove?
 
         ///////////////////////////////////////////////////////////////////////
         // Instance variables
         ///////////////////////////////////////////////////////////////////////
-        this._width = 2.0;
-        this._height = 2.0;
-        this._xOffset = 0;
-        this._yOffset = 0;
+    _width: { value : 2.0, writable: true },
+    _height: { value : 2.0, writable: true },
+    _xOffset: { value : 0, writable: true },
+    _yOffset: { value : 0, writable: true },
 
-        this._tlRadius = 0;
-        this._trRadius = 0;
-        this._blRadius = 0;
-        this._brRadius = 0;
+    _tlRadius: { value : 0, writable: true },
+    _trRadius: { value : 0, writable: true },
+    _blRadius: { value : 0, writable: true },
+    _brRadius: { value : 0, writable: true },
 
-        this._strokeWidth = 0.25;
+    _strokeWidth: { value : 0.25, writable: true },
+    _strokeStyle: { value : "Solid", writable: true },
 
-        this._strokeStyle = "Solid";
-        this.init = function(world, xOffset, yOffset, width, height, strokeSize, strokeColor, fillColor,
+    init: {
+        value: function(world, xOffset, yOffset, width, height, strokeSize, strokeColor, fillColor,
                       tlRadius, trRadius, blRadius, brRadius, strokeMaterial, fillMaterial, strokeStyle) {
+            this.m_world = world;
 
+            if (arguments.length > 0) {
+                this._width = width;
+                this._height = height;
+                this._xOffset = xOffset;
+                this._yOffset = yOffset;
 
-                this.m_world = world;
+                this._strokeWidth = strokeSize;
+                this._strokeColor = strokeColor;
+                this._fillColor = fillColor;
 
-                if (arguments.length > 0) {
-                        this._width = width;
-                        this._height = height;
-                        this._xOffset = xOffset;
-                        this._yOffset = yOffset;
+                this.setTLRadius(tlRadius);
+                this.setTRRadius(trRadius);
+                this.setBLRadius(blRadius);
+                this.setBRRadius(brRadius);
 
-                        this._strokeWidth = strokeSize;
-                        this._strokeColor = strokeColor;
-                        this._fillColor = fillColor;
-
-                        this.setTLRadius(tlRadius);
-                        this.setTRRadius(trRadius);
-                        this.setBLRadius(blRadius);
-                        this.setBRRadius(brRadius);
-
-                        this._strokeStyle = strokeStyle;
+                this._strokeStyle = strokeStyle;
 
                         this._matrix = Matrix.I(4);
                         //this._matrix[12] = xoffset;
                         //this._matrix[13] = yoffset;
-                }
+            }
 
-                // the overall radius includes the fill and the stroke.  separate the two based onthe stroke width
-                //  this._fillRad = this._radius - this._strokeWidth;
-                //    var err = 0.05;
-                var err = 0;
-                this._fillWidth = this._width - this._strokeWidth  + err;
-                this._fillHeight = this._height - this._strokeWidth + err;
+            // the overall radius includes the fill and the stroke.  separate the two based on the stroke width
+            //  this._fillRad = this._radius - this._strokeWidth;
+            //    var err = 0.05;
+            var err = 0;
+            this._fillWidth = this._width - this._strokeWidth  + err;
+            this._fillHeight = this._height - this._strokeWidth + err;
 
-                this._materialAmbient  = [0.2, 0.2, 0.2,  1.0];
-                this._materialDiffuse  = [0.4, 0.4, 0.4,  1.0];
-                this._materialSpecular = [0.4, 0.4, 0.4,  1.0];
+            this._materialAmbient  = [0.2, 0.2, 0.2,  1.0];
+            this._materialDiffuse  = [0.4, 0.4, 0.4,  1.0];
+            this._materialSpecular = [0.4, 0.4, 0.4,  1.0];
 
-                if(strokeMaterial) {
-                        this._strokeMaterial = strokeMaterial;
-        } else {
-                        this._strokeMaterial = MaterialsModel.getMaterial( MaterialsModel.getDefaultMaterialName() );
-        }
+            if(strokeMaterial) {
+                this._strokeMaterial = strokeMaterial;
+            } else {
+                this._strokeMaterial = MaterialsModel.getMaterial( MaterialsModel.getDefaultMaterialName() );
+            }
 
-                if(fillMaterial) {
-                        this._fillMaterial = fillMaterial;
-        } else {
-                        this._fillMaterial = MaterialsModel.getMaterial( MaterialsModel.getDefaultMaterialName() );
+            if(fillMaterial) {
+                this._fillMaterial = fillMaterial;
+            } else {
+                this._fillMaterial = MaterialsModel.getMaterial( MaterialsModel.getDefaultMaterialName() );
+            }
         }
-        };
+    },
 
         ///////////////////////////////////////////////////////////////////////
-        // Property Accessors
-        ///////////////////////////////////////////////////////////////////////
-        this.getStrokeWidth = function() {
-        return this._strokeWidth;
-    };
-
-        this.setStrokeWidth = function(w) {
-        this._strokeWidth = w;
-    };
-
-        this.getStrokeMaterial = function() {
-        return this._strokeMaterial;
-    };
-
-        this.setStrokeMaterial = function(m) {
-        this._strokeMaterial = m;
-    };
+    // Property Accessors
+    ///////////////////////////////////////////////////////////////////////
+    // TODO - Use getters/setters in the future
+    getStrokeWidth: {
+        value: function() {
+            return this._strokeWidth;
+        }
+    },
 
-        this.getFillMaterial = function() {
-        return this._fillMaterial;
-    };
+    setStrokeWidth: {
+        value: function(w) {
+            this._strokeWidth = w;
+        }
+    },
 
-        this.setFillMaterial = function(m) {
-        this._fillMaterial = m;
-    };
+    getStrokeMaterial: {
+        value: function() {
+            return this._strokeMaterial;
+        }
+    },
 
-        this.getStrokeColor = function() {
-        return this._strokeColor;
-    };
+    setStrokeMaterial: {
+        value: function(m) {
+            this._strokeMaterial = m;
+        }
+    },
 
-        //this.setStrokeColor = function(c) {
-        // this._strokeColor = c;
-        // };
+    getFillMaterial: {
+        value: function() {
+            return this._fillMaterial;
+        }
+    },
 
-        this.getFillColor = function() {
-        return this._fillColor;
-    };
+    setFillMaterial: {
+        value: function(m) {
+            this._fillMaterial = m;
+        }
+    },
 
-        //this.setFillColor = function(c) {
-        // this._fillColor = c.slice(0);
-        // };
+        ///////////////////////////////////////////////////////////////////////
+    // update the "color of the material
+    getFillColor: {
+        value: function() {
+            return this._fillColor;
+        }
+    },
 
-        this.getTLRadius = function() {
-        return this._tlRadius;
-    };
+//    setFillColor: {
+//        value: function(c) {
+//            this._fillColor = c;
+//        }
+//    },
 
-        this.setTLRadius = function(r) {
-        this._tlRadius = Math.min(r, (this._height - this._strokeWidth)/2, (this._width - this._strokeWidth)/2);
-    };
+    getStrokeColor: {
+        value: function() {
+            return this._strokeColor;
+        }
+    },
+
+//    setStrokeColor: {
+//        value: function(c) {
+//            this._strokeColor = c;
+//        }
+//    },
+    ///////////////////////////////////////////////////////////////////////
+    getTLRadius: {
+        value: function() {
+            return this._tlRadius;
+        }
+    },
 
-        this.getTRRadius = function() {
+    setTLRadius: {