Merge remote-tracking branch 'ninja-jduran/TimelineUber' into timeline-local

1 files changed, 261 insertions, 177 deletions

diff --git a/assets/canvas-runtime.js b/assets/canvas-runtime.js
index a35f473d..ee9f24a4 100644
--- a/assets/canvas-runtime.js
+++ b/assets/canvas-runtime.js
@@ -121,13 +121,12 @@ NinjaCvsRt.GLRuntime = function ( canvas, jObj,  assetPath )
         // all "live" materials
         this._materials = [];
 
-        // provide the mapping for the asset directory
-        if (assetPath)
-        {
-                this._assetPath = assetPath.slice();
-                if (this._assetPath[this._assetPath.length-1] != '/')
-                        this._assetPath += '/';
-        }
+    // provide the mapping for the asset directory
+    if (assetPath) {
+        this._assetPath = assetPath.slice();
+        if (this._assetPath[this._assetPath.length - 1] != '/')
+            this._assetPath += '/';
+    }
 
         if(this._assetPath !== undefined) {
                 RDGE.globals.engine.setAssetPath(this._assetPath);
@@ -289,23 +288,23 @@ NinjaCvsRt.GLRuntime = function ( canvas, jObj,  assetPath )
 
         this.importObject = function( jObj,  parent )
         {
-                var type = jObj.type
+                var type = jObj.type;
                 var obj;
                 switch (type)
                 {
                         case 1:
                                 obj = new NinjaCvsRt.RuntimeRectangle();
-                                obj.importJSON( jObj, parent );
+                                obj.importJSON( jObj );
                                 break;
 
                         case 2:         // circle
                                 obj = new NinjaCvsRt.RuntimeOval();
-                                obj.importJSON( jObj, parent );
+                                obj.importJSON( jObj );
                                 break;
 
                         case 3:         // line
                                 obj = new NinjaCvsRt.RuntimeLine();
-                                obj.importJSON( jObj, parent );
+                                obj.importJSON( jObj );
                                 break;
 
                         default:
@@ -514,7 +513,7 @@ NinjaCvsRt.RuntimeGeomObj = function ()
                                 case "pulse":                   mat = new NinjaCvsRt.RuntimePulseMaterial();                            break;
 
                                 default:
-                                        console.log( "material type: " + materialType + " is not supported" );
+                                        console.log( "material type: " + shaderName + " is not supported" );
                                         break;
                         }
 
@@ -638,7 +637,7 @@ NinjaCvsRt.RuntimeGeomObj = function ()
         
                 return mat;     
         };
-        
+
         this.MatrixRotationZ = function( angle )
         {
                 var mat = this.MatrixIdentity(4);
@@ -742,7 +741,7 @@ NinjaCvsRt.RuntimeRectangle = function ()
                                 ctx.quadraticCurveTo( width-inset, inset,  width-inset-rad, inset );
 
                         // do the top of the rectangle
-                        pt = [inset, inset]
+                        pt = [inset, inset];
                         rad = tlRad - inset;
                         if (rad < 0)  rad = 0;
                         pt[0] += rad;
@@ -771,34 +770,81 @@ NinjaCvsRt.RuntimeRectangle = function ()
                 var     w = world.getViewportWidth(),
                         h = world.getViewportHeight();
                 
-                // render the fill
-                ctx.beginPath();
-        var c = null, inset = 0;
-                if (this._fillColor)
-                {
-                        c = "rgba(" + 255*this._fillColor[0] + "," + 255*this._fillColor[1] + "," + 255*this._fillColor[2] + "," + this._fillColor[3] + ")";  
-                        ctx.fillStyle = c;
-
-                        ctx.lineWidth   = lw;
-                        inset = Math.ceil( lw ) + 0.5;
-                        this.renderPath( inset, ctx );
-                        ctx.fill();
-                        ctx.closePath();
-                }
+        var c,
+            inset,
+            gradient,
+            colors,
+            len,
+            n,
+            position,
+            cs;
+        // render the fill
+        ctx.beginPath();
+        if (this._fillColor) {
+            inset = Math.ceil( lw ) + 0.5;
+
+            if(this._fillColor.gradientMode) {
+                if(this._fillColor.gradientMode === "radial") {
+                    gradient = ctx.createRadialGradient(w/2, h/2, 0, w/2, h/2, Math.max(w/2, h/2)-inset);
+                } else {
+                    gradient = ctx.createLinearGradient(inset, h/2, w-2*inset, h/2);
+                }
+                colors = this._fillColor.color;
 
-                // render the stroke
-                ctx.beginPath();
-                if (this._strokeColor)
-                {
-                        c = "rgba(" + 255*this._strokeColor[0] + "," + 255*this._strokeColor[1] + "," + 255*this._strokeColor[2] + "," + this._strokeColor[3] + ")";  
-                        ctx.strokeStyle = c;
+                len = colors.length;
 
-                        ctx.lineWidth   = lw;
-                        inset = Math.ceil( 0.5*lw ) + 0.5;
-                        this.renderPath( inset, ctx );
-                        ctx.stroke();
-                        ctx.closePath();
-                }
+                for(n=0; n<len; n++) {
+                    position = colors[n].position/100;
+                    cs = colors[n].value;
+                    gradient.addColorStop(position, "rgba(" + cs.r + "," + cs.g + "," + cs.b + "," + cs.a + ")");
+                }
+
+                ctx.fillStyle = gradient;
+
+            } else {
+                c = "rgba(" + 255*this._fillColor[0] + "," + 255*this._fillColor[1] + "," + 255*this._fillColor[2] + "," + this._fillColor[3] + ")";
+                ctx.fillStyle = c;
+            }
+
+            ctx.lineWidth       = lw;
+            this.renderPath( inset, ctx );
+            ctx.fill();
+            ctx.closePath();
+        }
+
+        // render the stroke
+        ctx.beginPath();
+        if (this._strokeColor) {
+            inset = Math.ceil( 0.5*lw ) + 0.5;
+
+            if(this._strokeColor.gradientMode) {
+                if(this._strokeColor.gradientMode === "radial") {
+                    gradient = ctx.createRadialGradient(w/2, h/2, Math.min(h/2, w/2)-inset, w/2, h/2, Math.max(h/2, w/2));
+                } else {
+                    gradient = ctx.createLinearGradient(0, h/2, w, h/2);
+                }
+                colors = this._strokeColor.color;
+
+                len = colors.length;
+
+                for(n=0; n<len; n++) {
+                    position = colors[n].position/100;
+                    cs = colors[n].value;
+                    gradient.addColorStop(position, "rgba(" + cs.r + "," + cs.g + "," + cs.b + "," + cs.a + ")");
+                }
+
+                ctx.strokeStyle = gradient;
+
+            } else {
+                c = "rgba(" + 255*this._strokeColor[0] + "," + 255*this._strokeColor[1] + "," + 255*this._strokeColor[2] + "," + this._strokeColor[3] + ")";
+                ctx.strokeStyle = c;
+            }
+
+            ctx.lineWidth       = lw;
+            this.renderPath( inset, ctx );
+            ctx.stroke();
+            ctx.closePath();
+        }
     };
 };
 
@@ -964,126 +1010,163 @@ NinjaCvsRt.RuntimeOval = function ()
                 if (bezPts)
                 {
                         var n = bezPts.length;
+            var gradient,
+                colors,
+                len,
+                j,
+                position,
+                cs,
+                c;
+
+            // set up the fill style
+            ctx.beginPath();
+            ctx.lineWidth = 0;
+            if (this._fillColor) {
+                if(this._fillColor.gradientMode) {
+                    if(this._fillColor.gradientMode === "radial") {
+                        gradient = ctx.createRadialGradient(xCtr, yCtr, 0,
+                                                            xCtr, yCtr, Math.max(yScale, xScale));
+                    } else {
+                        gradient = ctx.createLinearGradient(0, this._height/2, this._width, this._height/2);
+                    }
+                    colors = this._fillColor.color;
+
+                    len = colors.length;
+
+                    for(j=0; j<len; j++) {
+                        position = colors[j].position/100;
+                        cs = colors[j].value;
+                        gradient.addColorStop(position, "rgba(" + cs.r + "," + cs.g + "," + cs.b + "," + cs.a + ")");
+                    }
+
+                    ctx.fillStyle = gradient;
 
-                        // set up the fill style
+                } else {