From f9f8fdc3000042ba5b4504d91870dc9a32ef25eb Mon Sep 17 00:00:00 2001 From: Valerio Virgillito Date: Wed, 16 May 2012 01:00:22 -0700 Subject: Squashed master into dom-architecture Signed-off-by: Valerio Virgillito --- assets/canvas-runtime.js | 3028 ++++++++++---------- js/controllers/styles-controller.js | 4 +- js/controllers/tree-controller.js | 185 -- js/document/templates/banner/package.json | 3 +- js/io/system/ninjalibrary.js | 28 +- js/io/system/ninjalibrary.json | 4 +- js/lib/drawing/world.js | 6 +- js/lib/geom/brush-stroke.js | 2 +- js/lib/geom/circle.js | 1433 ++++----- js/lib/geom/geom-obj.js | 852 +++--- js/lib/geom/line.js | 914 +++--- js/lib/geom/rectangle.js | 1409 ++++----- js/lib/geom/sub-path.js | 2 +- .../materials-library-panel.html | 2 +- .../animations-presets.html | 5 +- .../presets/style-presets.reel/style-presets.html | 2 +- .../transitions-presets.html | 5 +- js/tools/LineTool.js | 3 +- js/tools/OvalTool.js | 2 +- js/tools/RectTool.js | 2 +- js/tools/TextTool.js | 40 +- node_modules/components-data/feed-reader.json | 2 +- node_modules/components-data/map.json | 2 +- node_modules/components-data/picasa-carousel.json | 2 +- node_modules/components-data/youtube-channel.json | 2 +- node_modules/descriptor.json | 580 ++-- .../feed-reader/feed-entry.reel/feed-entry.html | 89 + .../feed-reader/feed-entry.reel/feed-entry.js | 21 + .../feed-reader/feed-reader.reel/feed-reader.html | 79 + .../feed-reader/feed-reader.reel/feed-reader.js | 179 ++ node_modules/montage-google/map.reel/map.css | 9 + node_modules/montage-google/map.reel/map.html | 46 + node_modules/montage-google/map.reel/map.js | 289 ++ node_modules/montage-google/package.json | 14 + .../picasa-carousel.reel/image.reel/image.html | 39 + .../picasa-carousel.reel/image.reel/image.js | 20 + .../picasa-carousel.reel/picasa-carousel.css | 41 + .../picasa-carousel.reel/picasa-carousel.html | 169 ++ .../picasa-carousel.reel/picasa-carousel.js | 151 + .../youtube-channel.reel/youtube-channel.html | 126 + .../youtube-channel.reel/youtube-channel.js | 242 ++ .../youtube-player.reel/youtube-player.html | 25 + .../youtube-player.reel/youtube-player.js | 216 ++ .../ui/feed-reader/feed-entry.reel/feed-entry.html | 89 - .../ui/feed-reader/feed-entry.reel/feed-entry.js | 21 - .../feed-reader/feed-reader.reel/feed-reader.html | 79 - .../ui/feed-reader/feed-reader.reel/feed-reader.js | 180 -- node_modules/montage/ui/map.reel/map.css | 9 - node_modules/montage/ui/map.reel/map.html | 46 - node_modules/montage/ui/map.reel/map.js | 289 -- .../ui/picasa-carousel.reel/image.reel/image.html | 39 - .../ui/picasa-carousel.reel/image.reel/image.js | 20 - .../ui/picasa-carousel.reel/picasa-carousel.css | 41 - .../ui/picasa-carousel.reel/picasa-carousel.html | 169 -- .../ui/picasa-carousel.reel/picasa-carousel.js | 151 - .../ui/youtube-channel.reel/youtube-channel.html | 126 - .../ui/youtube-channel.reel/youtube-channel.js | 242 -- .../ui/youtube-player.reel/youtube-player.html | 25 - .../ui/youtube-player.reel/youtube-player.js | 216 -- 59 files changed, 6030 insertions(+), 5986 deletions(-) delete mode 100644 js/controllers/tree-controller.js create mode 100644 node_modules/montage-google/feed-reader/feed-entry.reel/feed-entry.html create mode 100644 node_modules/montage-google/feed-reader/feed-entry.reel/feed-entry.js create mode 100644 node_modules/montage-google/feed-reader/feed-reader.reel/feed-reader.html create mode 100644 node_modules/montage-google/feed-reader/feed-reader.reel/feed-reader.js create mode 100644 node_modules/montage-google/map.reel/map.css create mode 100644 node_modules/montage-google/map.reel/map.html create mode 100644 node_modules/montage-google/map.reel/map.js create mode 100755 node_modules/montage-google/package.json create mode 100644 node_modules/montage-google/picasa-carousel.reel/image.reel/image.html create mode 100644 node_modules/montage-google/picasa-carousel.reel/image.reel/image.js create mode 100755 node_modules/montage-google/picasa-carousel.reel/picasa-carousel.css create mode 100755 node_modules/montage-google/picasa-carousel.reel/picasa-carousel.html create mode 100644 node_modules/montage-google/picasa-carousel.reel/picasa-carousel.js create mode 100644 node_modules/montage-google/youtube-channel.reel/youtube-channel.html create mode 100644 node_modules/montage-google/youtube-channel.reel/youtube-channel.js create mode 100644 node_modules/montage-google/youtube-player.reel/youtube-player.html create mode 100644 node_modules/montage-google/youtube-player.reel/youtube-player.js delete mode 100644 node_modules/montage/ui/feed-reader/feed-entry.reel/feed-entry.html delete mode 100644 node_modules/montage/ui/feed-reader/feed-entry.reel/feed-entry.js delete mode 100644 node_modules/montage/ui/feed-reader/feed-reader.reel/feed-reader.html delete mode 100644 node_modules/montage/ui/feed-reader/feed-reader.reel/feed-reader.js delete mode 100644 node_modules/montage/ui/map.reel/map.css delete mode 100644 node_modules/montage/ui/map.reel/map.html delete mode 100644 node_modules/montage/ui/map.reel/map.js delete mode 100644 node_modules/montage/ui/picasa-carousel.reel/image.reel/image.html delete mode 100644 node_modules/montage/ui/picasa-carousel.reel/image.reel/image.js delete mode 100755 node_modules/montage/ui/picasa-carousel.reel/picasa-carousel.css delete mode 100755 node_modules/montage/ui/picasa-carousel.reel/picasa-carousel.html delete mode 100644 node_modules/montage/ui/picasa-carousel.reel/picasa-carousel.js delete mode 100644 node_modules/montage/ui/youtube-channel.reel/youtube-channel.html delete mode 100644 node_modules/montage/ui/youtube-channel.reel/youtube-channel.js delete mode 100644 node_modules/montage/ui/youtube-player.reel/youtube-player.html delete mode 100644 node_modules/montage/ui/youtube-player.reel/youtube-player.js diff --git a/assets/canvas-runtime.js b/assets/canvas-runtime.js index 104c22cc..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,1062 +26,870 @@ 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 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 ); - } - }; - - this.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); - } - colors = this._fillColor.color; + return sum; + } + }, + + vecMag: { + value: function(dimen, vec) { + var sum = 0.0; + for (var i=0; i= 0.001) + { + var scale = len/sum; + rtnVec = []; + for (i = 0; i 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(); - } - }; -}; /////////////////////////////////////////////////////////////////////// -// Class RuntimeOval +// Class RuntimeRectangle /////////////////////////////////////////////////////////////////////// -NinjaCvsRt.RuntimeOval = function () -{ - // inherit the members of NinjaCvsRt.RuntimeGeomObj - this.inheritedFrom = NinjaCvsRt.RuntimeGeomObj; - this.inheritedFrom(); - - this.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 ); - }; - - this.render = 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], - [ 0.0, 0.0, 0.0, 1.0] - ]; - */ - - // get a bezier representation of the circle - var bezPts = this.circularArcToBezier( [0,0,0], [1,0,0], 2.0*Math.PI ); - if (bezPts) - { - var n = bezPts.length; - var gradient, +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); + } + 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, - j, + n, position, - cs, - c; - - // set up the fill style + cs; + // render the fill ctx.beginPath(); - ctx.lineWidth = 0; if (this._fillColor) { + inset = Math.ceil( lw ) - 0.5; + if(this._fillColor.gradientMode) { if(this._fillColor.gradientMode === "radial") { - gradient = ctx.createRadialGradient(xCtr, yCtr, 0, - xCtr, yCtr, Math.max(this._width, this._height)/2); + gradient = ctx.createRadialGradient(w/2, h/2, 0, w/2, h/2, Math.max(w, h)/2); } else { - gradient = ctx.createLinearGradient(lineWidth/2, this._height/2, this._width-lineWidth, this._height/2); + gradient = ctx.createLinearGradient(inset/2, h/2, w-inset, h/2); } colors = this._fillColor.color; len = colors.length; - for(j=0; j