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, 737 insertions, 696 deletions

diff --git a/js/lib/geom/circle.js b/js/lib/geom/circle.js
index 0f1f49a9..425b869a 100755
--- a/js/lib/geom/circle.js
+++ b/js/lib/geom/circle.js
@@ -4,9 +4,9 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
 (c) Copyright 2011 Motorola Mobility, Inc.  All Rights Reserved.
 </copyright> */
 
-var GeomObj                     = require("js/lib/geom/geom-obj").GeomObj;
-var ShapePrimitive      = require("js/lib/geom/shape-primitive").ShapePrimitive;
-var MaterialsModel      = require("js/models/materials-model").MaterialsModel;
+var GeomObj =           require("js/lib/geom/geom-obj").GeomObj;
+var ShapePrimitive =    require("js/lib/geom/shape-primitive").ShapePrimitive;
+var MaterialsModel = require("js/models/materials-model").MaterialsModel;
 var drawUtils           = require("js/helper-classes/3D/draw-utils").DrawUtils;
 var vecUtils            = require("js/helper-classes/3D/vec-utils").VecUtils;
 
@@ -16,744 +16,790 @@ var vecUtils		= require("js/helper-classes/3D/vec-utils").VecUtils;
 //      Derived from class GLGeomObj
 //              The position and dimensions of the stroke, fill, and inner Radius should be in pixels
 ///////////////////////////////////////////////////////////////////////
-var Circle = function GLCircle() {
-
-        this.init = function( world, xOffset, yOffset, width, height, strokeSize, strokeColor, fillColor, innerRadius, strokeMaterial, fillMaterial, strokeStyle) {
-                ///////////////////////////////////////////////////////////////////////
-                // Instance variables
-                ///////////////////////////////////////////////////////////////////////
-                this._width = 2.0;
-                this._height = 2.0;
-                this._xOffset = 0;
-                this._yOffset = 0;
-
-                this._radius = 2.0;
-                this._strokeWidth = 0.25;
-                this._innerRadius = 0;
-
-                this._ovalHeight = this._ovalHeight = 2.0 * this._radius;
-
-                this._strokeStyle = "Solid";
-
-                this._aspectRatio = 1.0;
-
-                if (arguments.length > 0) {
-                        this._width = width;
-                        this._height = height;
-                        this._xOffset = xOffset;
-                        this._yOffset = yOffset;
-        
-                        this._strokeWidth = strokeSize;
-                        this._innerRadius = innerRadius;
-                        this._strokeColor = strokeColor;
-                        this._fillColor = fillColor;
-
-                        this._strokeStyle = strokeStyle;
-
-                        this._matrix = Matrix.I(4);
-                        //this._matrix[12] = xOffset;
-                        //this._matrix[13] = yOffset;
-                }
-
-                this.m_world = world;
-
-                if(strokeMaterial){
-                        this._strokeMaterial = strokeMaterial;
-        } else {
-                        this._strokeMaterial = MaterialsModel.getMaterial( MaterialsModel.getDefaultMaterialName() );
-        }
+exports.Circle = Object.create(GeomObj, {
+
+    ///////////////////////////////////////////////////////////////////////
+    // Instance variables
+    ///////////////////////////////////////////////////////////////////////
+    _width: { value : 2.0, writable: true },
+    _height: { value : 2.0, writable: true },
+    _xOffset: { value : 0, writable: true },
+    _yOffset: { value : 0, writable: true },
+
+    _radius: { value : 2.0, writable: true },
+    _strokeWidth: { value : 0.25, writable: true },
+    _innerRadius: { value : 0, writable: true },
+    _ovalHeight: { value : 4.0, writable: true },
+    _strokeStyle: { value : "Solid", writable: true },
+    _aspectRatio: { value : 1.0, writable: true },
+
+        init: {
+        value: function(world, xOffset, yOffset, width, height, strokeSize, strokeColor, fillColor, innerRadius, strokeMaterial, fillMaterial, strokeStyle) {
+            if(arguments.length > 0) {
+                this._width = width;
+                this._height = height;
+                this._xOffset = xOffset;
+                this._yOffset = yOffset;
+                this._ovalHeight = 2.0 * this._radius;
+
+                this._strokeWidth = strokeSize;
+                this._innerRadius = innerRadius;
+                this._strokeColor = strokeColor;
+                this._fillColor = fillColor;
+
+                this._strokeStyle = strokeStyle;
+
+                this._matrix = Matrix.I(4);
+                //this._matrix[12] = xOffset;
+                //this._matrix[13] = yOffset;
+            }
+
+            this.m_world = world;
 
-                if(fillMaterial) {
-                        this._fillMaterial = fillMaterial;
-        } else {
-                        this._fillMaterial = 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() );
+            }
         }
-        };
+    },
 
     ///////////////////////////////////////////////////////////////////////
     // Property Accessors
     ///////////////////////////////////////////////////////////////////////
-        this.getStrokeWidth = function() {
-        return this._strokeWidth;
-    };
-
-        this.setStrokeWidth = function(w) {
-        this._strokeWidth = w;
-    };
-
-        this.getStrokeMaterial = function() {
-        return this._strokeMaterial;
-    };
+    // TODO - Use getters/setters in the future
+    getStrokeWidth: {
+        value: function() {
+            return this._strokeWidth;
+        }
+    },
 
-        this.setStrokeMaterial = function(m) {
-        this._strokeMaterial = m;
-    };
+    setStrokeWidth: {
+        value: function(w) {
+            this._strokeWidth = w;
+        }
+    },
 
-        this.getFillMaterial = function() {
-        return this._fillMaterial;
-    };
+    getStrokeMaterial: {
+        value: function() {
+            return this._strokeMaterial;
+        }
+    },
 
-        this.setFillMaterial = function(m) {
-        this._fillMaterial = m;
-    };
+    setStrokeMaterial: {
+        value: function(m) {
+            this._strokeMaterial = m;
+        }
+    },
 
-        this.getRadius = function() {
-        return this._radius;
-    };
+    getFillMaterial: {
+        value: function() {
+            return this._fillMaterial;
+        }
+    },
 
-        this.setRadius = function(r) {
-        this._radius = r;
-    };
+    setFillMaterial: {
+        value: function(m) {
+            this._fillMaterial = m;
+        }
+    },
 
-        this.getWorld = function() {
-        return this._world;
-    };
+    getRadius: {
+        value: function() {
+            return this._radius;
+        }
+    },
 
-        this.setWorld = function(w) {
-        this._world = w;
-    };
+    setRadius: {
+        value: function(r) {
+            this._radius = r;
+        }
+    },
 
-    this.getInnerRadius = function() {
-        return this._innerRadius;
-    };
+    getInnerRadius: {
+        value: function() {
+            return this._innerRadius;
+        }
+    },
 
-        this.setInnerRadius = function(r) {
-        this._innerRadius = r;
-    };
+    setInnerRadius: {
+        value: function(r) {
+            this._innerRadius = r;
+        }
+    },
 
-    this.getStrokeStyle = function() {
-        return this._strokeStyle;
-    };
-        this.setStrokeStyle     = function(s) {
-        this._strokeStyle = s;
-    };
+    getStrokeStyle: {
+        value: function() {
+            return this._strokeStyle;
+        }
+    },
 
-        this.getWidth = function() {
-        return this._width;
-    };
+    setStrokeStyle: {
+        value: function(s) {
+            this._strokeStyle = s;
+        }
+    },
 
-        this.setWidth = function(w) {
-        this._width = w;
-    };
+    getWidth: {
+        value: function() {
+            return this._width;
+        }
+    },
 
-        this.getHeight = function() {
-        return this._height;
-    };
+    setWidth: {
+        value: function(w) {
+            this._width = w;
+        }
+    },
 
-        this.setHeight = function(h) {
-        this._height = h;
-    };
+    getHeight: {
+        value: function() {
+            return this._height;
+        }
+    },