From 78b3363a1ef802e95a158b5a3584305f84def09c Mon Sep 17 00:00:00 2001 From: Nivesh Rajbhandari Date: Thu, 10 May 2012 15:47:03 -0700 Subject: Updating canvas-runtime to use object literal notation. Signed-off-by: Nivesh Rajbhandari --- assets/canvas-runtime.js | 3088 +++++++++++++++++++++++----------------------- 1 file changed, 1558 insertions(+), 1530 deletions(-) diff --git a/assets/canvas-runtime.js b/assets/canvas-runtime.js index 17f8cda8..eeafaab6 100644 --- a/assets/canvas-runtime.js +++ b/assets/canvas-runtime.js @@ -17,7 +17,7 @@ NinjaCvsRt.initWebGl = function (rootElement, directory) { } } //Creating data manager - cvsDataMngr = new NinjaCvsRt.CanvasDataManager(); + cvsDataMngr = Object.create(NinjaCvsRt.CanvasDataManager, {}); //Loading data to canvas(es) cvsDataMngr.loadGLData(rootElement, ninjaWebGlData.data, directory); }; @@ -26,1111 +26,1202 @@ NinjaCvsRt.initWebGl = function (rootElement, directory) { // Class ShapeRuntime // Manages runtime shape display /////////////////////////////////////////////////////////////////////// -NinjaCvsRt.CanvasDataManager = function () -{ - this.loadGLData = function(root, valueArray, assetPath ) - { - if (assetPath) - this._assetPath = assetPath.slice(); - - var value = valueArray; - var nWorlds = value.length; - for (var i=0; i= 0.001) + { + var scale = len/sum; + rtnVec = []; + for (i = 0; i= 0.001) - { - var scale = len/sum; - rtnVec = []; - for (i = 0; i minDimen) tlRad = minDimen; - if (blRad > minDimen) blRad = minDimen; - if (brRad > minDimen) brRad = minDimen; - if (trRad > minDimen) trRad = minDimen; - - var world = this.getWorld(); - var vpw = world.getViewportWidth(), vph = world.getViewportHeight(); - var cop = [0.5*vpw, 0.5*vph, 0.0]; - var xCtr = cop[0] + this._xOffset, yCtr = cop[1] - this._yOffset; - var xLeft = xCtr - 0.5*this._width, yTop = yCtr - 0.5*this._height; - var xDist = cop[0] - xLeft, yDist = cop[1] - yTop; - var xOff = 0.5*vpw - xDist, yOff = 0.5*vph - yDist; - - if ((tlRad <= 0) && (blRad <= 0) && (brRad <= 0) && (trRad <= 0)) - { - ctx.rect(pt[0]+xOff, pt[1]+yOff, width - 2*inset, height - 2*inset); - } - else - { - // get the top left point - rad = tlRad - inset; - if (rad < 0) rad = 0; - pt[1] += rad; - if (Math.abs(rad) < 0.001) pt[1] = inset; - ctx.moveTo( pt[0]+xOff, pt[1]+yOff ); - - // get the bottom left point - pt = [inset, height - inset]; - rad = blRad - inset; - if (rad < 0) rad = 0; - pt[1] -= rad; - ctx.lineTo( pt[0]+xOff, pt[1]+yOff ); - - // get the bottom left curve - if (rad > 0.001) - ctx.quadraticCurveTo( inset+xOff, height-inset+yOff, inset+rad+xOff, height-inset+yOff ); - - // do the bottom of the rectangle - pt = [width - inset, height - inset]; - rad = brRad - inset; - if (rad < 0) rad = 0; - pt[0] -= rad; - ctx.lineTo( pt[0]+xOff, pt[1]+yOff ); - - // get the bottom right arc - if (rad > 0.001) - ctx.quadraticCurveTo( width-inset+xOff, height-inset+yOff, width-inset+xOff, height-inset-rad+yOff ); - - // get the right of the rectangle - pt = [width - inset, inset]; - rad = trRad - inset; - if (rad < 0) rad = 0; - pt[1] += rad; - ctx.lineTo( pt[0]+xOff, pt[1]+yOff ); - - // do the top right corner - if (rad > 0.001) - ctx.quadraticCurveTo( width-inset+xOff, inset+yOff, width-inset-rad+xOff, inset+yOff ); - - // do the top of the rectangle - pt = [inset, inset]; - rad = tlRad - inset; - if (rad < 0) rad = 0; - pt[0] += rad; - ctx.lineTo( pt[0]+xOff, pt[1]+yOff); - - // do the top left corner - if (rad > 0.001) - ctx.quadraticCurveTo( inset+xOff, inset+yOff, inset+xOff, inset+rad+yOff ); - else - ctx.lineTo( inset+xOff, 2*inset+yOff ); - } -}; - -NinjaCvsRt.RuntimeRectangle.prototype.render = function() -{ - // get the world - var world = this.getWorld(); - if (!world) throw( "null world in rectangle render" ); - - // get the context - var ctx = world.get2DContext(); - if (!ctx) return; - - // get some dimensions - var lw = this._strokeWidth; - var w = world.getViewportWidth(), - h = world.getViewportHeight(); - - 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, h)/2); - } else { - gradient = ctx.createLinearGradient(inset/2, h/2, w-inset, h/2); +NinjaCvsRt.RuntimeRectangle = Object.create(NinjaCvsRt.RuntimeGeomObj, { + + importJSON: { + value: function(jObj) { + this._xOffset = jObj.xoff; + this._yOffset = jObj.yoff; + this._width = jObj.width; + this._height = jObj.height; + this._strokeWidth = jObj.strokeWidth; + this._strokeColor = jObj.strokeColor; + this._fillColor = jObj.fillColor; + this._tlRadius = jObj.tlRadius; + this._trRadius = jObj.trRadius; + this._blRadius = jObj.blRadius; + this._brRadius = jObj.brRadius; + this._innerRadius = jObj.innerRadius; + this._strokeStyle = jObj.strokeStyle; + var strokeMaterialName = jObj.strokeMat; + var fillMaterialName = jObj.fillMat; + this.importMaterials( jObj.materials ); + } + }, + + renderPath: { + value: function(inset, ctx) { + // various declarations + var pt, rad, ctr, startPt, bPts; + var width = Math.round(this._width), + height = Math.round(this._height), + hw = 0.5*width, + hh = 0.5*height; + + pt = [inset, inset]; // top left corner + + var tlRad = this._tlRadius; //top-left radius + var trRad = this._trRadius; + var blRad = this._blRadius; + var brRad = this._brRadius; + // limit the radii to half the rectangle dimension + var minDimen = hw < hh ? hw : hh; + if (tlRad > minDimen) tlRad = minDimen; + if (blRad > minDimen) blRad = minDimen; + if (brRad > minDimen) brRad = minDimen; + if (trRad > minDimen) trRad = minDimen; + + var world = this.getWorld(); + var vpw = world.getViewportWidth(), vph = world.getViewportHeight(); + var cop = [0.5*vpw, 0.5*vph, 0.0]; + var xCtr = cop[0] + this._xOffset, yCtr = cop[1] - this._yOffset; + var xLeft = xCtr - 0.5*this._width, yTop = yCtr - 0.5*this._height; + var xDist = cop[0] - xLeft, yDist = cop[1] - yTop; + var xOff = 0.5*vpw - xDist, yOff = 0.5*vph - yDist; + + if ((tlRad <= 0) && (blRad <= 0) && (brRad <= 0) && (trRad <= 0)) + { + ctx.rect(pt[0]+xOff, pt[1]+yOff, width - 2*inset, height - 2*inset); } - colors = this._fillColor.color; - - len = colors.length; - - for(n=0; n 0.001) + ctx.quadraticCurveTo( inset+xOff, height-inset+yOff, inset+rad+xOff, height-inset+yOff ); + + // do the bottom of the rectangle + pt = [width - inset, height - inset]; + rad = brRad - inset; + if (rad < 0) rad = 0; + pt[0] -= rad; + ctx.lineTo( pt[0]+xOff, pt[1]+yOff ); + + // get the bottom right arc + if (rad > 0.001) + ctx.quadraticCurveTo( width-inset+xOff, height-inset+yOff, width-inset+xOff, height-inset-rad+yOff ); + + // get the right of the rectangle + pt = [width - inset, inset]; + rad = trRad - inset; + if (rad < 0) rad = 0; + pt[1] += rad; + ctx.lineTo( pt[0]+xOff, pt[1]+yOff ); + + // do the top right corner + if (rad > 0.001) + ctx.quadraticCurveTo( width-inset+xOff, inset+yOff, width-inset-rad+xOff, inset+yOff ); + + // do the top of the rectangle + pt = [inset, inset]; + rad = tlRad - inset; + if (rad < 0) rad = 0; + pt[0] += rad; + ctx.lineTo( pt[0]+xOff, pt[1]+yOff); + + // do the top left corner + if (rad > 0.001) + ctx.quadraticCurveTo( inset+xOff, inset+yOff, inset+xOff, inset+rad+yOff ); + else + ctx.lineTo( inset+xOff, 2*inset+yOff ); } + } + }, + + render: { + value: function() { + // get the world + var world = this.getWorld(); + if (!world) throw( "null world in rectangle render" ); + + // get the context + var ctx = world.get2DContext(); + if (!ctx) return; + + // get some dimensions + var lw = this._strokeWidth; + var w = world.getViewportWidth(), + h = world.getViewportHeight(); + + 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, h)/2); + } else { + gradient = ctx.createLinearGradient(inset/2, h/2, w-inset, h/2); + } + colors = this._fillColor.color; - ctx.fillStyle = gradient; + len = colors.length; - } else { - c = "rgba(" + 255*this._fillColor[0] + "," + 255*this._fillColor[1] + "," + 255*this._fillColor[2] + "," + this._fillColor[3] + ")"; - ctx.fillStyle = c; - } + for(n=0; n 0) { + p0 = [this._xAdj, this._yAdj]; + p1 = [w - this._xAdj, h - this._yAdj]; + } else { + p0 = [this._xAdj, h - this._yAdj]; + p1 = [w - this._xAdj, this._yAdj]; + } - // get the points - var p0, p1; - if(this._slope === "vertical") { - p0 = [0.5*w, 0]; - p1 = [0.5*w, h]; - } else if(this._slope === "horizontal") { - p0 = [0, 0.5*h]; - p1 = [w, 0.5*h]; - } else if(this._slope > 0) { - p0 = [this._xAdj, this._yAdj]; - p1 = [w - this._xAdj, h - this._yAdj]; - } else { - p0 = [this._xAdj, h - this._yAdj]; - p1 = [w - this._xAdj, this._yAdj]; + // draw the line + ctx.moveTo( p0[0], p0[1] ); + ctx.lineTo( p1[0], p1[1] ); + ctx.stroke(); + } } - - // draw the line - ctx.moveTo( p0[0], p0[1] ); - ctx.lineTo( p1[0], p1[1] ); - ctx.stroke(); } -}; +}); /////////////////////////////////////////////////////////////////////// // Class RuntimeOval /////////////////////////////////////////////////////////////////////// -NinjaCvsRt.RuntimeOval = function () -{ -}; - // inherit the members of NinjaCvsRt.RuntimeGeomObj -// this.inheritedFrom = NinjaCvsRt.RuntimeGeomObj; -// this.inheritedFrom(); -NinjaCvsRt.RuntimeOval.prototype = Object.create(NinjaCvsRt.RuntimeGeomObj.prototype, {}); - -NinjaCvsRt.RuntimeOval.prototype.importJSON = function( jObj ) -{ - this._xOffset = jObj.xoff; - this._yOffset = jObj.yoff; - this._width = jObj.width; - this._height = jObj.height; - this._strokeWidth = jObj.strokeWidth; - this._strokeColor = jObj.strokeColor; - this._fillColor = jObj.fillColor; - this._innerRadius = jObj.innerRadius; - this._strokeStyle = jObj.strokeStyle; - var strokeMaterialName = jObj.strokeMat; - var fillMaterialName = jObj.fillMat; - this.importMaterials( jObj.materials ); -}; +NinjaCvsRt.RuntimeOval = Object.create(NinjaCvsRt.RuntimeGeomObj, { + + importJSON: { + value: function(jObj) { + this._xOffset = jObj.xoff; + this._yOffset = jObj.yoff; + this._width = jObj.width; + this._height = jObj.height; + this._strokeWidth = jObj.strokeWidth; + this._strokeColor = jObj.strokeColor; + this._fillColor = jObj.fillColor; + this._innerRadius = jObj.innerRadius; + this._strokeStyle = jObj.strokeStyle; + var strokeMaterialName = jObj.strokeMat; + var fillMaterialName = jObj.fillMat; + this.importMaterials( jObj.materials ); + } + }, + + render: { + value: function() { + // get the world + var world = this.getWorld(); + if (!world) throw( "null world in buildBuffers" ); + + // get the context + var ctx = world.get2DContext(); + if (!ctx) return; + + // declare some variables + var p0, p1; + var x0, y0, x1, y1; + + // create the matrix + var lineWidth = this._strokeWidth; + var innerRad = this._innerRadius; + var xScale = 0.5*this._width - lineWidth, + yScale = 0.5*this._height - lineWidth; + + // translate + var xCtr = 0.5*world.getViewportWidth() + this._xOffset, + yCtr = 0.5*world.getViewportHeight() + this._yOffset; + var mat = this.MatrixIdentity( 4 ); + mat[0] = xScale; mat[12] = xCtr; + mat[5] = yScale; mat[13] = yCtr; + /* + var mat = [ + [ xScale, 0.0, 0.0, xCtr], + [ 0.0, yScale, 0.0, yCtr], + [ 0.0, 0.0, 1.0, 0.0], + [