From 648ee61ae84216d0236e0dbc211addc13b2cfa3a Mon Sep 17 00:00:00 2001 From: Kris Kowal Date: Fri, 6 Jul 2012 11:52:06 -0700 Subject: Expand tabs --- assets/canvas-runtime.js | 4052 +++++++++++++++++++++++----------------------- 1 file changed, 2026 insertions(+), 2026 deletions(-) (limited to 'assets/canvas-runtime.js') diff --git a/assets/canvas-runtime.js b/assets/canvas-runtime.js index ce392f34..42d90333 100644 --- a/assets/canvas-runtime.js +++ b/assets/canvas-runtime.js @@ -36,42 +36,42 @@ var NinjaCvsRt = NinjaCvsRt || {}; window.addEventListener('load', loadCanvasData, false); //Load data function (on document loaded) function loadCanvasData (e) { - //Cleaning up events - window.removeEventListener('load', loadCanvasData, false); + //Cleaning up events + window.removeEventListener('load', loadCanvasData, false); //Getting tag with data, MUST contain attribute var xhr, tag = document.querySelectorAll(['script[data-ninja-canvas-lib]'])[0]; - //Checking for data to be external file - if (tag.getAttribute('data-ninja-canvas-json') !== null) { - //Loading JSON data - xhr = new XMLHttpRequest(); + //Checking for data to be external file + if (tag.getAttribute('data-ninja-canvas-json') !== null) { + //Loading JSON data + xhr = new XMLHttpRequest(); xhr.open("GET", tag.getAttribute('data-ninja-canvas-json'), false); xhr.send(); - //Checking for data - if (xhr.readyState === 4) { - //Calling method to initialize all webGL/canvas(es) - NinjaCvsRt.initWebGl(document.body, tag.getAttribute('data-ninja-canvas-libpath'), xhr.response); - } else { - //TODO: Add error for users - } - } else {//Data in document itself - //Calling method to initialize all webGL/canvas(es) - NinjaCvsRt.initWebGl(document.body, tag.getAttribute('data-ninja-canvas-libpath'), document.querySelectorAll(['script[data-ninja-canvas]'])[0].innerHTML); - } + //Checking for data + if (xhr.readyState === 4) { + //Calling method to initialize all webGL/canvas(es) + NinjaCvsRt.initWebGl(document.body, tag.getAttribute('data-ninja-canvas-libpath'), xhr.response); + } else { + //TODO: Add error for users + } + } else {//Data in document itself + //Calling method to initialize all webGL/canvas(es) + NinjaCvsRt.initWebGl(document.body, tag.getAttribute('data-ninja-canvas-libpath'), document.querySelectorAll(['script[data-ninja-canvas]'])[0].innerHTML); + } } /////////////////////////////////////////////////////////////////////// //Loading webGL/canvas data NinjaCvsRt.initWebGl = function (rootElement, directory, data) { - var cvsDataMngr, ninjaWebGlData = JSON.parse((data.replace('(', '')).replace(')', '')); - if (ninjaWebGlData && ninjaWebGlData.data) { - for (var n=0; ninjaWebGlData.data[n]; n++) { - ninjaWebGlData.data[n] = unescape(ninjaWebGlData.data[n]); - } - } - //Creating data manager - cvsDataMngr = Object.create(NinjaCvsRt.CanvasDataManager, {}); - //Loading data to canvas(es) - cvsDataMngr.loadGLData(rootElement, ninjaWebGlData.data, directory); + var cvsDataMngr, ninjaWebGlData = JSON.parse((data.replace('(', '')).replace(')', '')); + if (ninjaWebGlData && ninjaWebGlData.data) { + for (var n=0; ninjaWebGlData.data[n]; n++) { + ninjaWebGlData.data[n] = unescape(ninjaWebGlData.data[n]); + } + } + //Creating data manager + cvsDataMngr = Object.create(NinjaCvsRt.CanvasDataManager, {}); + //Loading data to canvas(es) + cvsDataMngr.loadGLData(rootElement, ninjaWebGlData.data, directory); }; /////////////////////////////////////////////////////////////////////// @@ -80,64 +80,64 @@ NinjaCvsRt.initWebGl = function (rootElement, directory, data) { /////////////////////////////////////////////////////////////////////// NinjaCvsRt.CanvasDataManager = Object.create(Object.prototype, { - loadGLData: { - value: 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 ); - } - } - }, - - 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") { - var ww = w - 2*lw, hh = h - 2*lw; - gradient = ctx.createRadialGradient(w/2, h/2, 0, w/2, h/2, Math.max(ww, hh)/2); - } else { - gradient = ctx.createLinearGradient(inset, h/2, w-inset, h/2); - } - colors = this._fillColor.color; - - len = colors.length; - - for(n=0; n 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 ); + } + } + }, + + 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") { + var ww = w - 2*lw, hh = h - 2*lw; + gradient = ctx.createRadialGradient(w/2, h/2, 0, w/2, h/2, Math.max(ww, hh)/2); + } else { + gradient = ctx.createLinearGradient(inset, h/2, w-inset, h/2); + } + colors = this._fillColor.color; + + len = colors.length; + + 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]; - } - - // draw the line - ctx.moveTo( p0[0], p0[1] ); - ctx.lineTo( p1[0], p1[1] ); - ctx.stroke(); - } - } - } + importJSON: { + value: function(jObj) { + this._xOffset = jObj.xoff; + this._yOffset = jObj.yoff; + this._width = jObj.width; + this._height = jObj.height; + this._xAdj = jObj.xAdj; + this._yAdj = jObj.yAdj; + this._strokeWidth = jObj.strokeWidth; + this._slope = jObj.slope; + this._strokeStyle = jObj.strokeStyle; + this._strokeColor = jObj.strokeColor; + var strokeMaterialName = jObj.strokeMat; + 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; + + // set up the stroke style + var lineWidth = this._strokeWidth, + w = this._width, + h = this._height; + + var c, + gradient, + colors, + len, + n, + position, + cs; + + ctx.beginPath(); + ctx.lineWidth = lineWidth; + if (this._strokeColo