Index: lams_central/web/includes/javascript/canvg/StackBlur.js =================================================================== RCS file: /usr/local/cvsroot/lams_central/web/includes/javascript/canvg/StackBlur.js,v diff -u -r1.1 -r1.2 --- lams_central/web/includes/javascript/canvg/StackBlur.js 8 May 2014 12:07:26 -0000 1.1 +++ lams_central/web/includes/javascript/canvg/StackBlur.js 3 Sep 2015 05:42:43 -0000 1.2 @@ -39,573 +39,617 @@ OTHER DEALINGS IN THE SOFTWARE. */ -var mul_table = [ - 512,512,456,512,328,456,335,512,405,328,271,456,388,335,292,512, - 454,405,364,328,298,271,496,456,420,388,360,335,312,292,273,512, - 482,454,428,405,383,364,345,328,312,298,284,271,259,496,475,456, - 437,420,404,388,374,360,347,335,323,312,302,292,282,273,265,512, - 497,482,468,454,441,428,417,405,394,383,373,364,354,345,337,328, - 320,312,305,298,291,284,278,271,265,259,507,496,485,475,465,456, - 446,437,428,420,412,404,396,388,381,374,367,360,354,347,341,335, - 329,323,318,312,307,302,297,292,287,282,278,273,269,265,261,512, - 505,497,489,482,475,468,461,454,447,441,435,428,422,417,411,405, - 399,394,389,383,378,373,368,364,359,354,350,345,341,337,332,328, - 324,320,316,312,309,305,301,298,294,291,287,284,281,278,274,271, - 268,265,262,259,257,507,501,496,491,485,480,475,470,465,460,456, - 451,446,442,437,433,428,424,420,416,412,408,404,400,396,392,388, - 385,381,377,374,370,367,363,360,357,354,350,347,344,341,338,335, - 332,329,326,323,320,318,315,312,310,307,304,302,299,297,294,292, - 289,287,285,282,280,278,275,273,271,269,267,265,263,261,259]; - - -var shg_table = [ - 9, 11, 12, 13, 13, 14, 14, 15, 15, 15, 15, 16, 16, 16, 16, 17, - 17, 17, 17, 17, 17, 17, 18, 18, 18, 18, 18, 18, 18, 18, 18, 19, - 19, 19, 19, 19, 19, 19, 19, 19, 19, 19, 19, 19, 19, 20, 20, 20, - 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 21, - 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, - 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 22, 22, 22, 22, 22, 22, - 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, - 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 23, - 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, - 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, - 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, - 23, 23, 23, 23, 23, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, - 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, - 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, - 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, - 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24 ]; +(function ( global ) { -function stackBlurImage( imageID, canvasID, radius, blurAlphaChannel ) -{ + var mul_table = [ + 512,512,456,512,328,456,335,512,405,328,271,456,388,335,292,512, + 454,405,364,328,298,271,496,456,420,388,360,335,312,292,273,512, + 482,454,428,405,383,364,345,328,312,298,284,271,259,496,475,456, + 437,420,404,388,374,360,347,335,323,312,302,292,282,273,265,512, + 497,482,468,454,441,428,417,405,394,383,373,364,354,345,337,328, + 320,312,305,298,291,284,278,271,265,259,507,496,485,475,465,456, + 446,437,428,420,412,404,396,388,381,374,367,360,354,347,341,335, + 329,323,318,312,307,302,297,292,287,282,278,273,269,265,261,512, + 505,497,489,482,475,468,461,454,447,441,435,428,422,417,411,405, + 399,394,389,383,378,373,368,364,359,354,350,345,341,337,332,328, + 324,320,316,312,309,305,301,298,294,291,287,284,281,278,274,271, + 268,265,262,259,257,507,501,496,491,485,480,475,470,465,460,456, + 451,446,442,437,433,428,424,420,416,412,408,404,400,396,392,388, + 385,381,377,374,370,367,363,360,357,354,350,347,344,341,338,335, + 332,329,326,323,320,318,315,312,310,307,304,302,299,297,294,292, + 289,287,285,282,280,278,275,273,271,269,267,265,263,261,259]; - var img = document.getElementById( imageID ); - var w = img.naturalWidth; - var h = img.naturalHeight; - - var canvas = document.getElementById( canvasID ); - - canvas.style.width = w + "px"; - canvas.style.height = h + "px"; - canvas.width = w; - canvas.height = h; - - var context = canvas.getContext("2d"); - context.clearRect( 0, 0, w, h ); - context.drawImage( img, 0, 0 ); + + var shg_table = [ + 9, 11, 12, 13, 13, 14, 14, 15, 15, 15, 15, 16, 16, 16, 16, 17, + 17, 17, 17, 17, 17, 17, 18, 18, 18, 18, 18, 18, 18, 18, 18, 19, + 19, 19, 19, 19, 19, 19, 19, 19, 19, 19, 19, 19, 19, 20, 20, 20, + 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 21, + 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, + 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 22, 22, 22, 22, 22, 22, + 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, + 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 23, + 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, + 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, + 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, + 23, 23, 23, 23, 23, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, + 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, + 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, + 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, + 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24 ]; - if ( isNaN(radius) || radius < 1 ) return; - - if ( blurAlphaChannel ) - stackBlurCanvasRGBA( canvasID, 0, 0, w, h, radius ); - else - stackBlurCanvasRGB( canvasID, 0, 0, w, h, radius ); -} - - -function stackBlurCanvasRGBA( id, top_x, top_y, width, height, radius ) -{ - if ( isNaN(radius) || radius < 1 ) return; - radius |= 0; - - var canvas = document.getElementById( id ); - var context = canvas.getContext("2d"); - var imageData; - - try { - try { - imageData = context.getImageData( top_x, top_y, width, height ); - } catch(e) { - - // NOTE: this part is supposedly only needed if you want to work with local files - // so it might be okay to remove the whole try/catch block and just use - // imageData = context.getImageData( top_x, top_y, width, height ); - try { - netscape.security.PrivilegeManager.enablePrivilege("UniversalBrowserRead"); - imageData = context.getImageData( top_x, top_y, width, height ); - } catch(e) { - alert("Cannot access local image"); - throw new Error("unable to access local image data: " + e); - return; - } - } - } catch(e) { - alert("Cannot access image"); - throw new Error("unable to access image data: " + e); - } - - var pixels = imageData.data; - - var x, y, i, p, yp, yi, yw, r_sum, g_sum, b_sum, a_sum, - r_out_sum, g_out_sum, b_out_sum, a_out_sum, - r_in_sum, g_in_sum, b_in_sum, a_in_sum, - pr, pg, pb, pa, rbs; - - var div = radius + radius + 1; - var w4 = width << 2; - var widthMinus1 = width - 1; - var heightMinus1 = height - 1; - var radiusPlus1 = radius + 1; - var sumFactor = radiusPlus1 * ( radiusPlus1 + 1 ) / 2; - - var stackStart = new BlurStack(); - var stack = stackStart; - for ( i = 1; i < div; i++ ) + function premultiplyAlpha(imageData) { - stack = stack.next = new BlurStack(); - if ( i == radiusPlus1 ) var stackEnd = stack; - } - stack.next = stackStart; - var stackIn = null; - var stackOut = null; - - yw = yi = 0; - - var mul_sum = mul_table[radius]; - var shg_sum = shg_table[radius]; - - for ( y = 0; y < height; y++ ) - { - r_in_sum = g_in_sum = b_in_sum = a_in_sum = r_sum = g_sum = b_sum = a_sum = 0; + var pixels = imageData.data; + var size = imageData.width * imageData.height * 4; - r_out_sum = radiusPlus1 * ( pr = pixels[yi] ); - g_out_sum = radiusPlus1 * ( pg = pixels[yi+1] ); - b_out_sum = radiusPlus1 * ( pb = pixels[yi+2] ); - a_out_sum = radiusPlus1 * ( pa = pixels[yi+3] ); - - r_sum += sumFactor * pr; - g_sum += sumFactor * pg; - b_sum += sumFactor * pb; - a_sum += sumFactor * pa; - - stack = stackStart; - - for( i = 0; i < radiusPlus1; i++ ) + for (var i=0; i> shg_sum; - if ( pa != 0 ) + var a = pixels[i+3]; + if (a != 0) { - pa = 255 / pa; - pixels[yi] = ((r_sum * mul_sum) >> shg_sum) * pa; - pixels[yi+1] = ((g_sum * mul_sum) >> shg_sum) * pa; - pixels[yi+2] = ((b_sum * mul_sum) >> shg_sum) * pa; - } else { - pixels[yi] = pixels[yi+1] = pixels[yi+2] = 0; + a = 255 / a; + pixels[i ] *= a; + pixels[i+1] *= a; + pixels[i+2] *= a; } - - r_sum -= r_out_sum; - g_sum -= g_out_sum; - b_sum -= b_out_sum; - a_sum -= a_out_sum; - - r_out_sum -= stackIn.r; - g_out_sum -= stackIn.g; - b_out_sum -= stackIn.b; - a_out_sum -= stackIn.a; - - p = ( yw + ( ( p = x + radius + 1 ) < widthMinus1 ? p : widthMinus1 ) ) << 2; - - r_in_sum += ( stackIn.r = pixels[p]); - g_in_sum += ( stackIn.g = pixels[p+1]); - b_in_sum += ( stackIn.b = pixels[p+2]); - a_in_sum += ( stackIn.a = pixels[p+3]); - - r_sum += r_in_sum; - g_sum += g_in_sum; - b_sum += b_in_sum; - a_sum += a_in_sum; - - stackIn = stackIn.next; - - r_out_sum += ( pr = stackOut.r ); - g_out_sum += ( pg = stackOut.g ); - b_out_sum += ( pb = stackOut.b ); - a_out_sum += ( pa = stackOut.a ); - - r_in_sum -= pr; - g_in_sum -= pg; - b_in_sum -= pb; - a_in_sum -= pa; - - stackOut = stackOut.next; - - yi += 4; } - yw += width; } - - for ( x = 0; x < width; x++ ) + function stackBlurImage( imageID, canvasID, radius, blurAlphaChannel ) { - g_in_sum = b_in_sum = a_in_sum = r_in_sum = g_sum = b_sum = a_sum = r_sum = 0; + + var img = document.getElementById( imageID ); + var w = img.naturalWidth; + var h = img.naturalHeight; + + var canvas = document.getElementById( canvasID ); + + canvas.style.width = w + "px"; + canvas.style.height = h + "px"; + canvas.width = w; + canvas.height = h; - yi = x << 2; - r_out_sum = radiusPlus1 * ( pr = pixels[yi]); - g_out_sum = radiusPlus1 * ( pg = pixels[yi+1]); - b_out_sum = radiusPlus1 * ( pb = pixels[yi+2]); - a_out_sum = radiusPlus1 * ( pa = pixels[yi+3]); + var context = canvas.getContext("2d"); + context.clearRect( 0, 0, w, h ); + context.drawImage( img, 0, 0 ); + + if ( isNaN(radius) || radius < 1 ) return; - r_sum += sumFactor * pr; - g_sum += sumFactor * pg; - b_sum += sumFactor * pb; - a_sum += sumFactor * pa; + if ( blurAlphaChannel ) + stackBlurCanvasRGBA( canvasID, 0, 0, w, h, radius ); + else + stackBlurCanvasRGB( canvasID, 0, 0, w, h, radius ); + } + + + function stackBlurCanvasRGBA( id, top_x, top_y, width, height, radius ) + { + if ( isNaN(radius) || radius < 1 ) return; + radius |= 0; - stack = stackStart; + var canvas = document.getElementById( id ); + var context = canvas.getContext("2d"); + var imageData; - for( i = 0; i < radiusPlus1; i++ ) + try { + try { + imageData = context.getImageData( top_x, top_y, width, height ); + } catch(e) { + + // NOTE: this part is supposedly only needed if you want to work with local files + // so it might be okay to remove the whole try/catch block and just use + // imageData = context.getImageData( top_x, top_y, width, height ); + try { + netscape.security.PrivilegeManager.enablePrivilege("UniversalBrowserRead"); + imageData = context.getImageData( top_x, top_y, width, height ); + } catch(e) { + alert("Cannot access local image"); + throw new Error("unable to access local image data: " + e); + return; + } + } + } catch(e) { + alert("Cannot access image"); + throw new Error("unable to access image data: " + e); + } + + premultiplyAlpha(imageData); + + var pixels = imageData.data; + + var x, y, i, p, yp, yi, yw, r_sum, g_sum, b_sum, a_sum, + r_out_sum, g_out_sum, b_out_sum, a_out_sum, + r_in_sum, g_in_sum, b_in_sum, a_in_sum, + pr, pg, pb, pa, rbs; + + var div = radius + radius + 1; + var w4 = width << 2; + var widthMinus1 = width - 1; + var heightMinus1 = height - 1; + var radiusPlus1 = radius + 1; + var sumFactor = radiusPlus1 * ( radiusPlus1 + 1 ) / 2; + + var stackStart = new BlurStack(); + var stack = stackStart; + for ( i = 1; i < div; i++ ) { - stack.r = pr; - stack.g = pg; - stack.b = pb; - stack.a = pa; - stack = stack.next; + stack = stack.next = new BlurStack(); + if ( i == radiusPlus1 ) var stackEnd = stack; } + stack.next = stackStart; + var stackIn = null; + var stackOut = null; - yp = width; + yw = yi = 0; - for( i = 1; i <= radius; i++ ) + var mul_sum = mul_table[radius]; + var shg_sum = shg_table[radius]; + + for ( y = 0; y < height; y++ ) { - yi = ( yp + x ) << 2; + r_in_sum = g_in_sum = b_in_sum = a_in_sum = r_sum = g_sum = b_sum = a_sum = 0; - r_sum += ( stack.r = ( pr = pixels[yi])) * ( rbs = radiusPlus1 - i ); - g_sum += ( stack.g = ( pg = pixels[yi+1])) * rbs; - b_sum += ( stack.b = ( pb = pixels[yi+2])) * rbs; - a_sum += ( stack.a = ( pa = pixels[yi+3])) * rbs; - - r_in_sum += pr; - g_in_sum += pg; - b_in_sum += pb; - a_in_sum += pa; + r_out_sum = radiusPlus1 * ( pr = pixels[yi] ); + g_out_sum = radiusPlus1 * ( pg = pixels[yi+1] ); + b_out_sum = radiusPlus1 * ( pb = pixels[yi+2] ); + a_out_sum = radiusPlus1 * ( pa = pixels[yi+3] ); - stack = stack.next; - - if( i < heightMinus1 ) + r_sum += sumFactor * pr; + g_sum += sumFactor * pg; + b_sum += sumFactor * pb; + a_sum += sumFactor * pa; + + stack = stackStart; + + for( i = 0; i < radiusPlus1; i++ ) { - yp += width; + stack.r = pr; + stack.g = pg; + stack.b = pb; + stack.a = pa; + stack = stack.next; } + + for( i = 1; i < radiusPlus1; i++ ) + { + p = yi + (( widthMinus1 < i ? widthMinus1 : i ) << 2 ); + r_sum += ( stack.r = ( pr = pixels[p])) * ( rbs = radiusPlus1 - i ); + g_sum += ( stack.g = ( pg = pixels[p+1])) * rbs; + b_sum += ( stack.b = ( pb = pixels[p+2])) * rbs; + a_sum += ( stack.a = ( pa = pixels[p+3])) * rbs; + + r_in_sum += pr; + g_in_sum += pg; + b_in_sum += pb; + a_in_sum += pa; + + stack = stack.next; + } + + stackIn = stackStart; + stackOut = stackEnd; + for ( x = 0; x < width; x++ ) + { + pixels[yi] = (r_sum * mul_sum) >> shg_sum; + pixels[yi+1] = (g_sum * mul_sum) >> shg_sum; + pixels[yi+2] = (b_sum * mul_sum) >> shg_sum; + pixels[yi+3] = (a_sum * mul_sum) >> shg_sum; + + r_sum -= r_out_sum; + g_sum -= g_out_sum; + b_sum -= b_out_sum; + a_sum -= a_out_sum; + + r_out_sum -= stackIn.r; + g_out_sum -= stackIn.g; + b_out_sum -= stackIn.b; + a_out_sum -= stackIn.a; + + p = ( yw + ( ( p = x + radius + 1 ) < widthMinus1 ? p : widthMinus1 ) ) << 2; + + r_in_sum += ( stackIn.r = pixels[p]); + g_in_sum += ( stackIn.g = pixels[p+1]); + b_in_sum += ( stackIn.b = pixels[p+2]); + a_in_sum += ( stackIn.a = pixels[p+3]); + + r_sum += r_in_sum; + g_sum += g_in_sum; + b_sum += b_in_sum; + a_sum += a_in_sum; + + stackIn = stackIn.next; + + r_out_sum += ( pr = stackOut.r ); + g_out_sum += ( pg = stackOut.g ); + b_out_sum += ( pb = stackOut.b ); + a_out_sum += ( pa = stackOut.a ); + + r_in_sum -= pr; + g_in_sum -= pg; + b_in_sum -= pb; + a_in_sum -= pa; + + stackOut = stackOut.next; + + yi += 4; + } + yw += width; } + - yi = x; - stackIn = stackStart; - stackOut = stackEnd; - for ( y = 0; y < height; y++ ) + for ( x = 0; x < width; x++ ) { - p = yi << 2; - pixels[p+3] = pa = (a_sum * mul_sum) >> shg_sum; - if ( pa > 0 ) - { - pa = 255 / pa; - pixels[p] = ((r_sum * mul_sum) >> shg_sum ) * pa; - pixels[p+1] = ((g_sum * mul_sum) >> shg_sum ) * pa; - pixels[p+2] = ((b_sum * mul_sum) >> shg_sum ) * pa; - } else { - pixels[p] = pixels[p+1] = pixels[p+2] = 0; - } + g_in_sum = b_in_sum = a_in_sum = r_in_sum = g_sum = b_sum = a_sum = r_sum = 0; - r_sum -= r_out_sum; - g_sum -= g_out_sum; - b_sum -= b_out_sum; - a_sum -= a_out_sum; - - r_out_sum -= stackIn.r; - g_out_sum -= stackIn.g; - b_out_sum -= stackIn.b; - a_out_sum -= stackIn.a; + yi = x << 2; + r_out_sum = radiusPlus1 * ( pr = pixels[yi]); + g_out_sum = radiusPlus1 * ( pg = pixels[yi+1]); + b_out_sum = radiusPlus1 * ( pb = pixels[yi+2]); + a_out_sum = radiusPlus1 * ( pa = pixels[yi+3]); - p = ( x + (( ( p = y + radiusPlus1) < heightMinus1 ? p : heightMinus1 ) * width )) << 2; + r_sum += sumFactor * pr; + g_sum += sumFactor * pg; + b_sum += sumFactor * pb; + a_sum += sumFactor * pa; - r_sum += ( r_in_sum += ( stackIn.r = pixels[p])); - g_sum += ( g_in_sum += ( stackIn.g = pixels[p+1])); - b_sum += ( b_in_sum += ( stackIn.b = pixels[p+2])); - a_sum += ( a_in_sum += ( stackIn.a = pixels[p+3])); - - stackIn = stackIn.next; + stack = stackStart; - r_out_sum += ( pr = stackOut.r ); - g_out_sum += ( pg = stackOut.g ); - b_out_sum += ( pb = stackOut.b ); - a_out_sum += ( pa = stackOut.a ); + for( i = 0; i < radiusPlus1; i++ ) + { + stack.r = pr; + stack.g = pg; + stack.b = pb; + stack.a = pa; + stack = stack.next; + } - r_in_sum -= pr; - g_in_sum -= pg; - b_in_sum -= pb; - a_in_sum -= pa; + yp = width; - stackOut = stackOut.next; + for( i = 1; i <= radius; i++ ) + { + yi = ( yp + x ) << 2; + + r_sum += ( stack.r = ( pr = pixels[yi])) * ( rbs = radiusPlus1 - i ); + g_sum += ( stack.g = ( pg = pixels[yi+1])) * rbs; + b_sum += ( stack.b = ( pb = pixels[yi+2])) * rbs; + a_sum += ( stack.a = ( pa = pixels[yi+3])) * rbs; + + r_in_sum += pr; + g_in_sum += pg; + b_in_sum += pb; + a_in_sum += pa; + + stack = stack.next; - yi += width; + if( i < heightMinus1 ) + { + yp += width; + } + } + + yi = x; + stackIn = stackStart; + stackOut = stackEnd; + for ( y = 0; y < height; y++ ) + { + p = yi << 2; + pixels[p] = (r_sum * mul_sum) >> shg_sum; + pixels[p+1] = (g_sum * mul_sum) >> shg_sum; + pixels[p+2] = (b_sum * mul_sum) >> shg_sum; + pixels[p+3] = (a_sum * mul_sum) >> shg_sum; + + r_sum -= r_out_sum; + g_sum -= g_out_sum; + b_sum -= b_out_sum; + a_sum -= a_out_sum; + + r_out_sum -= stackIn.r; + g_out_sum -= stackIn.g; + b_out_sum -= stackIn.b; + a_out_sum -= stackIn.a; + + p = ( x + (( ( p = y + radiusPlus1) < heightMinus1 ? p : heightMinus1 ) * width )) << 2; + + r_sum += ( r_in_sum += ( stackIn.r = pixels[p])); + g_sum += ( g_in_sum += ( stackIn.g = pixels[p+1])); + b_sum += ( b_in_sum += ( stackIn.b = pixels[p+2])); + a_sum += ( a_in_sum += ( stackIn.a = pixels[p+3])); + + stackIn = stackIn.next; + + r_out_sum += ( pr = stackOut.r ); + g_out_sum += ( pg = stackOut.g ); + b_out_sum += ( pb = stackOut.b ); + a_out_sum += ( pa = stackOut.a ); + + r_in_sum -= pr; + g_in_sum -= pg; + b_in_sum -= pb; + a_in_sum -= pa; + + stackOut = stackOut.next; + + yi += width; + } } + + unpremultiplyAlpha(imageData); + + context.putImageData( imageData, top_x, top_y ); } - - context.putImageData( imageData, top_x, top_y ); - -} -function stackBlurCanvasRGB( id, top_x, top_y, width, height, radius ) -{ - if ( isNaN(radius) || radius < 1 ) return; - radius |= 0; - - var canvas = document.getElementById( id ); - var context = canvas.getContext("2d"); - var imageData; - - try { - try { - imageData = context.getImageData( top_x, top_y, width, height ); - } catch(e) { - - // NOTE: this part is supposedly only needed if you want to work with local files - // so it might be okay to remove the whole try/catch block and just use - // imageData = context.getImageData( top_x, top_y, width, height ); + function stackBlurCanvasRGB( id, top_x, top_y, width, height, radius ) + { + if ( isNaN(radius) || radius < 1 ) return; + radius |= 0; + + var canvas = document.getElementById( id ); + var context = canvas.getContext("2d"); + var imageData; + try { - netscape.security.PrivilegeManager.enablePrivilege("UniversalBrowserRead"); + try { imageData = context.getImageData( top_x, top_y, width, height ); + } catch(e) { + + // NOTE: this part is supposedly only needed if you want to work with local files + // so it might be okay to remove the whole try/catch block and just use + // imageData = context.getImageData( top_x, top_y, width, height ); + try { + netscape.security.PrivilegeManager.enablePrivilege("UniversalBrowserRead"); + imageData = context.getImageData( top_x, top_y, width, height ); + } catch(e) { + alert("Cannot access local image"); + throw new Error("unable to access local image data: " + e); + return; + } + } } catch(e) { - alert("Cannot access local image"); - throw new Error("unable to access local image data: " + e); - return; + alert("Cannot access image"); + throw new Error("unable to access image data: " + e); } - } - } catch(e) { - alert("Cannot access image"); - throw new Error("unable to access image data: " + e); - } - - var pixels = imageData.data; - - var x, y, i, p, yp, yi, yw, r_sum, g_sum, b_sum, - r_out_sum, g_out_sum, b_out_sum, - r_in_sum, g_in_sum, b_in_sum, - pr, pg, pb, rbs; - - var div = radius + radius + 1; - var w4 = width << 2; - var widthMinus1 = width - 1; - var heightMinus1 = height - 1; - var radiusPlus1 = radius + 1; - var sumFactor = radiusPlus1 * ( radiusPlus1 + 1 ) / 2; - - var stackStart = new BlurStack(); - var stack = stackStart; - for ( i = 1; i < div; i++ ) - { - stack = stack.next = new BlurStack(); - if ( i == radiusPlus1 ) var stackEnd = stack; - } - stack.next = stackStart; - var stackIn = null; - var stackOut = null; - - yw = yi = 0; - - var mul_sum = mul_table[radius]; - var shg_sum = shg_table[radius]; - - for ( y = 0; y < height; y++ ) - { - r_in_sum = g_in_sum = b_in_sum = r_sum = g_sum = b_sum = 0; + + var pixels = imageData.data; + + var x, y, i, p, yp, yi, yw, r_sum, g_sum, b_sum, + r_out_sum, g_out_sum, b_out_sum, + r_in_sum, g_in_sum, b_in_sum, + pr, pg, pb, rbs; + + var div = radius + radius + 1; + var w4 = width << 2; + var widthMinus1 = width - 1; + var heightMinus1 = height - 1; + var radiusPlus1 = radius + 1; + var sumFactor = radiusPlus1 * ( radiusPlus1 + 1 ) / 2; - r_out_sum = radiusPlus1 * ( pr = pixels[yi] ); - g_out_sum = radiusPlus1 * ( pg = pixels[yi+1] ); - b_out_sum = radiusPlus1 * ( pb = pixels[yi+2] ); - - r_sum += sumFactor * pr; - g_sum += sumFactor * pg; - b_sum += sumFactor * pb; - - stack = stackStart; - - for( i = 0; i < radiusPlus1; i++ ) + var stackStart = new BlurStack(); + var stack = stackStart; + for ( i = 1; i < div; i++ ) { - stack.r = pr; - stack.g = pg; - stack.b = pb; - stack = stack.next; + stack = stack.next = new BlurStack(); + if ( i == radiusPlus1 ) var stackEnd = stack; } + stack.next = stackStart; + var stackIn = null; + var stackOut = null; - for( i = 1; i < radiusPlus1; i++ ) - { - p = yi + (( widthMinus1 < i ? widthMinus1 : i ) << 2 ); - r_sum += ( stack.r = ( pr = pixels[p])) * ( rbs = radiusPlus1 - i ); - g_sum += ( stack.g = ( pg = pixels[p+1])) * rbs; - b_sum += ( stack.b = ( pb = pixels[p+2])) * rbs; - - r_in_sum += pr; - g_in_sum += pg; - b_in_sum += pb; - - stack = stack.next; - } + yw = yi = 0; + var mul_sum = mul_table[radius]; + var shg_sum = shg_table[radius]; - stackIn = stackStart; - stackOut = stackEnd; - for ( x = 0; x < width; x++ ) + for ( y = 0; y < height; y++ ) { - pixels[yi] = (r_sum * mul_sum) >> shg_sum; - pixels[yi+1] = (g_sum * mul_sum) >> shg_sum; - pixels[yi+2] = (b_sum * mul_sum) >> shg_sum; + r_in_sum = g_in_sum = b_in_sum = r_sum = g_sum = b_sum = 0; - r_sum -= r_out_sum; - g_sum -= g_out_sum; - b_sum -= b_out_sum; + r_out_sum = radiusPlus1 * ( pr = pixels[yi] ); + g_out_sum = radiusPlus1 * ( pg = pixels[yi+1] ); + b_out_sum = radiusPlus1 * ( pb = pixels[yi+2] ); - r_out_sum -= stackIn.r; - g_out_sum -= stackIn.g; - b_out_sum -= stackIn.b; + r_sum += sumFactor * pr; + g_sum += sumFactor * pg; + b_sum += sumFactor * pb; - p = ( yw + ( ( p = x + radius + 1 ) < widthMinus1 ? p : widthMinus1 ) ) << 2; + stack = stackStart; - r_in_sum += ( stackIn.r = pixels[p]); - g_in_sum += ( stackIn.g = pixels[p+1]); - b_in_sum += ( stackIn.b = pixels[p+2]); + for( i = 0; i < radiusPlus1; i++ ) + { + stack.r = pr; + stack.g = pg; + stack.b = pb; + stack = stack.next; + } - r_sum += r_in_sum; - g_sum += g_in_sum; - b_sum += b_in_sum; + for( i = 1; i < radiusPlus1; i++ ) + { + p = yi + (( widthMinus1 < i ? widthMinus1 : i ) << 2 ); + r_sum += ( stack.r = ( pr = pixels[p])) * ( rbs = radiusPlus1 - i ); + g_sum += ( stack.g = ( pg = pixels[p+1])) * rbs; + b_sum += ( stack.b = ( pb = pixels[p+2])) * rbs; + + r_in_sum += pr; + g_in_sum += pg; + b_in_sum += pb; + + stack = stack.next; + } - stackIn = stackIn.next; - r_out_sum += ( pr = stackOut.r ); - g_out_sum += ( pg = stackOut.g ); - b_out_sum += ( pb = stackOut.b ); - - r_in_sum -= pr; - g_in_sum -= pg; - b_in_sum -= pb; - - stackOut = stackOut.next; + stackIn = stackStart; + stackOut = stackEnd; + for ( x = 0; x < width; x++ ) + { + pixels[yi] = (r_sum * mul_sum) >> shg_sum; + pixels[yi+1] = (g_sum * mul_sum) >> shg_sum; + pixels[yi+2] = (b_sum * mul_sum) >> shg_sum; + + r_sum -= r_out_sum; + g_sum -= g_out_sum; + b_sum -= b_out_sum; + + r_out_sum -= stackIn.r; + g_out_sum -= stackIn.g; + b_out_sum -= stackIn.b; + + p = ( yw + ( ( p = x + radius + 1 ) < widthMinus1 ? p : widthMinus1 ) ) << 2; + + r_in_sum += ( stackIn.r = pixels[p]); + g_in_sum += ( stackIn.g = pixels[p+1]); + b_in_sum += ( stackIn.b = pixels[p+2]); + + r_sum += r_in_sum; + g_sum += g_in_sum; + b_sum += b_in_sum; + + stackIn = stackIn.next; + + r_out_sum += ( pr = stackOut.r ); + g_out_sum += ( pg = stackOut.g ); + b_out_sum += ( pb = stackOut.b ); + + r_in_sum -= pr; + g_in_sum -= pg; + b_in_sum -= pb; + + stackOut = stackOut.next; - yi += 4; + yi += 4; + } + yw += width; } - yw += width; - } - - for ( x = 0; x < width; x++ ) - { - g_in_sum = b_in_sum = r_in_sum = g_sum = b_sum = r_sum = 0; - yi = x << 2; - r_out_sum = radiusPlus1 * ( pr = pixels[yi]); - g_out_sum = radiusPlus1 * ( pg = pixels[yi+1]); - b_out_sum = radiusPlus1 * ( pb = pixels[yi+2]); - - r_sum += sumFactor * pr; - g_sum += sumFactor * pg; - b_sum += sumFactor * pb; - - stack = stackStart; - - for( i = 0; i < radiusPlus1; i++ ) + for ( x = 0; x < width; x++ ) { - stack.r = pr; - stack.g = pg; - stack.b = pb; - stack = stack.next; - } - - yp = width; - - for( i = 1; i <= radius; i++ ) - { - yi = ( yp + x ) << 2; + g_in_sum = b_in_sum = r_in_sum = g_sum = b_sum = r_sum = 0; - r_sum += ( stack.r = ( pr = pixels[yi])) * ( rbs = radiusPlus1 - i ); - g_sum += ( stack.g = ( pg = pixels[yi+1])) * rbs; - b_sum += ( stack.b = ( pb = pixels[yi+2])) * rbs; + yi = x << 2; + r_out_sum = radiusPlus1 * ( pr = pixels[yi]); + g_out_sum = radiusPlus1 * ( pg = pixels[yi+1]); + b_out_sum = radiusPlus1 * ( pb = pixels[yi+2]); - r_in_sum += pr; - g_in_sum += pg; - b_in_sum += pb; + r_sum += sumFactor * pr; + g_sum += sumFactor * pg; + b_sum += sumFactor * pb; - stack = stack.next; - - if( i < heightMinus1 ) + stack = stackStart; + + for( i = 0; i < radiusPlus1; i++ ) { - yp += width; + stack.r = pr; + stack.g = pg; + stack.b = pb; + stack = stack.next; } - } - - yi = x; - stackIn = stackStart; - stackOut = stackEnd; - for ( y = 0; y < height; y++ ) - { - p = yi << 2; - pixels[p] = (r_sum * mul_sum) >> shg_sum; - pixels[p+1] = (g_sum * mul_sum) >> shg_sum; - pixels[p+2] = (b_sum * mul_sum) >> shg_sum; - r_sum -= r_out_sum; - g_sum -= g_out_sum; - b_sum -= b_out_sum; + yp = width; - r_out_sum -= stackIn.r; - g_out_sum -= stackIn.g; - b_out_sum -= stackIn.b; + for( i = 1; i <= radius; i++ ) + { + yi = ( yp + x ) << 2; + + r_sum += ( stack.r = ( pr = pixels[yi])) * ( rbs = radiusPlus1 - i ); + g_sum += ( stack.g = ( pg = pixels[yi+1])) * rbs; + b_sum += ( stack.b = ( pb = pixels[yi+2])) * rbs; + + r_in_sum += pr; + g_in_sum += pg; + b_in_sum += pb; + + stack = stack.next; - p = ( x + (( ( p = y + radiusPlus1) < heightMinus1 ? p : heightMinus1 ) * width )) << 2; + if( i < heightMinus1 ) + { + yp += width; + } + } - r_sum += ( r_in_sum += ( stackIn.r = pixels[p])); - g_sum += ( g_in_sum += ( stackIn.g = pixels[p+1])); - b_sum += ( b_in_sum += ( stackIn.b = pixels[p+2])); - - stackIn = stackIn.next; - - r_out_sum += ( pr = stackOut.r ); - g_out_sum += ( pg = stackOut.g ); - b_out_sum += ( pb = stackOut.b ); - - r_in_sum -= pr; - g_in_sum -= pg; - b_in_sum -= pb; - - stackOut = stackOut.next; - - yi += width; + yi = x; + stackIn = stackStart; + stackOut = stackEnd; + for ( y = 0; y < height; y++ ) + { + p = yi << 2; + pixels[p] = (r_sum * mul_sum) >> shg_sum; + pixels[p+1] = (g_sum * mul_sum) >> shg_sum; + pixels[p+2] = (b_sum * mul_sum) >> shg_sum; + + r_sum -= r_out_sum; + g_sum -= g_out_sum; + b_sum -= b_out_sum; + + r_out_sum -= stackIn.r; + g_out_sum -= stackIn.g; + b_out_sum -= stackIn.b; + + p = ( x + (( ( p = y + radiusPlus1) < heightMinus1 ? p : heightMinus1 ) * width )) << 2; + + r_sum += ( r_in_sum += ( stackIn.r = pixels[p])); + g_sum += ( g_in_sum += ( stackIn.g = pixels[p+1])); + b_sum += ( b_in_sum += ( stackIn.b = pixels[p+2])); + + stackIn = stackIn.next; + + r_out_sum += ( pr = stackOut.r ); + g_out_sum += ( pg = stackOut.g ); + b_out_sum += ( pb = stackOut.b ); + + r_in_sum -= pr; + g_in_sum -= pg; + b_in_sum -= pb; + + stackOut = stackOut.next; + + yi += width; + } } + + context.putImageData( imageData, top_x, top_y ); + } - - context.putImageData( imageData, top_x, top_y ); - -} -function BlurStack() -{ - this.r = 0; - this.g = 0; - this.b = 0; - this.a = 0; - this.next = null; -} \ No newline at end of file + function BlurStack() + { + this.r = 0; + this.g = 0; + this.b = 0; + this.a = 0; + this.next = null; + } + + var stackBlur = { + image: stackBlurImage, + canvasRGBA: stackBlurCanvasRGBA, + canvasRGB: stackBlurCanvasRGB + }; + + // export as AMD... + if ( typeof define !== 'undefined' && define.amd ) { + define( function () { return stackBlur; }); + } + + // ...or as browserify + else if ( typeof module !== 'undefined' && module.exports ) { + module.exports = stackBlur; + } + + global.stackBlur = stackBlur; + +}( typeof window !== 'undefined' ? window : this )); \ No newline at end of file Index: lams_central/web/includes/javascript/canvg/canvg.js =================================================================== RCS file: /usr/local/cvsroot/lams_central/web/includes/javascript/canvg/canvg.js,v diff -u -r1.2 -r1.3 --- lams_central/web/includes/javascript/canvg/canvg.js 12 May 2014 12:11:26 -0000 1.2 +++ lams_central/web/includes/javascript/canvg/canvg.js 3 Sep 2015 05:42:43 -0000 1.3 @@ -1,12 +1,29 @@ /* * canvg.js - Javascript SVG parser and renderer on Canvas - * MIT Licensed + * MIT Licensed * Gabe Lerner (gabelerner@gmail.com) * http://code.google.com/p/canvg/ * * Requires: rgbcolor.js - http://www.phpied.com/rgb-color-parser-in-javascript/ */ -(function(){ + (function ( global, factory ) { + + 'use strict'; + + // export as AMD... + if ( typeof define !== 'undefined' && define.amd ) { + define('canvgModule', [ 'rgbcolor', 'stackblur' ], factory ); + } + + // ...or as browserify + else if ( typeof module !== 'undefined' && module.exports ) { + module.exports = factory( require( 'rgbcolor' ), require( 'stackblur' ) ); + } + + global.canvg = factory( global.RGBColor, global.stackBlur ); + +}( typeof window !== 'undefined' ? window : this, function ( RGBColor, stackBlur ) { + // canvg(target, s) // empty parameters: replace all 'svg' elements on page with 'canvas' elements // target: canvas element or the id of a canvas element @@ -22,10 +39,10 @@ // scaleHeight: int => scales vertically to height // renderCallback: function => will call the function after the first render is completed // forceRedraw: function => will call the function on every frame, if it returns true, will redraw - this.canvg = function (target, s, opts) { + var canvg = function (target, s, opts) { // no parameters if (target == null && s == null && opts == null) { - var svgTags = document.getElementsByTagName('svg'); + var svgTags = document.querySelectorAll('svg'); for (var i=0; i~\.\[:]+)/g; + var classRegex = /(\.[^\s\+>~\.\[:]+)/g; + var pseudoElementRegex = /(::[^\s\+>~\.\[:]+|:first-line|:first-letter|:before|:after)/gi; + var pseudoClassWithBracketsRegex = /(:[\w-]+\([^\)]*\))/gi; + var pseudoClassRegex = /(:[^\s\+>~\.\[:]+)/g; + var elementRegex = /([^\s\+>~\.\[:]+)/g; + function getSelectorSpecificity(selector) { + var typeCount = [0, 0, 0]; + var findMatch = function(regex, type) { + var matches = selector.match(regex); + if (matches == null) { + return; + } + typeCount[type] += matches.length; + selector = selector.replace(regex, ' '); + }; + + selector = selector.replace(/:not\(([^\)]*)\)/g, ' $1 '); + selector = selector.replace(/{[^]*/gm, ' '); + findMatch(attributeRegex, 1); + findMatch(idRegex, 0); + findMatch(classRegex, 1); + findMatch(pseudoElementRegex, 2); + findMatch(pseudoClassWithBracketsRegex, 1); + findMatch(pseudoClassRegex, 1); + selector = selector.replace(/[\*\s\+>~]/g, ' '); + selector = selector.replace(/[#\.]/g, ' '); + findMatch(elementRegex, 2); + return typeCount.join(''); + } + + function build(opts) { + var svg = { opts: opts }; + svg.FRAMERATE = 30; svg.MAX_VIRTUAL_PIXELS = 30000; - + + svg.log = function(msg) {}; + if (svg.opts['log'] == true && typeof(console) != 'undefined') { + svg.log = function(msg) { console.log(msg); }; + }; + // globals svg.init = function(ctx) { var uniqueId = 0; svg.UniqueId = function () { uniqueId++; return 'canvg' + uniqueId; }; svg.Definitions = {}; svg.Styles = {}; + svg.StylesSpecificity = {}; svg.Animations = []; svg.Images = []; svg.ctx = ctx; @@ -94,14 +187,14 @@ if (d != null && typeof(d) == 'number') return d; if (d == 'x') return this.width(); if (d == 'y') return this.height(); - return Math.sqrt(Math.pow(this.width(), 2) + Math.pow(this.height(), 2)) / Math.sqrt(2); + return Math.sqrt(Math.pow(this.width(), 2) + Math.pow(this.height(), 2)) / Math.sqrt(2); } }); } svg.init(); - + // images loaded - svg.ImagesLoaded = function() { + svg.ImagesLoaded = function() { for (var i=0; i]*>/, ''); var xmlDoc = new ActiveXObject('Microsoft.XMLDOM'); xmlDoc.async = 'false'; - xmlDoc.loadXML(xml); + xmlDoc.loadXML(xml); return xmlDoc; - } + } } - + svg.Property = function(name, value) { this.name = name; this.value = value; - } + } svg.Property.prototype.getValue = function() { return this.value; } - + svg.Property.prototype.hasValue = function() { return (this.value != null && this.value !== ''); } - + // return the numerical value of the property svg.Property.prototype.numValue = function() { if (!this.hasValue()) return 0; - + var n = parseFloat(this.value); if ((this.value + '').match(/%$/)) { n = n / 100.0; } return n; } - + svg.Property.prototype.valueOrDefault = function(def) { if (this.hasValue()) return this.value; return def; } - + svg.Property.prototype.numValueOrDefault = function(def) { if (this.hasValue()) return this.numValue(); return def; } - + // color extensions // augment the current color value with the opacity - svg.Property.prototype.addOpacity = function(opacity) { + svg.Property.prototype.addOpacity = function(opacityProp) { var newValue = this.value; - if (opacity != null && opacity != '' && typeof(this.value)=='string') { // can only add opacity to colors, not patterns + if (opacityProp.value != null && opacityProp.value != '' && typeof(this.value)=='string') { // can only add opacity to colors, not patterns var color = new RGBColor(this.value); if (color.ok) { - newValue = 'rgba(' + color.r + ', ' + color.g + ', ' + color.b + ', ' + opacity + ')'; + newValue = 'rgba(' + color.r + ', ' + color.g + ', ' + color.b + ', ' + opacityProp.numValue() + ')'; } } return new svg.Property(this.name, newValue); } - + // definition extensions // get the definition from the definitions table svg.Property.prototype.getDefinition = function() { @@ -204,19 +298,19 @@ if (!name) { name = this.value; } return svg.Definitions[name]; } - + svg.Property.prototype.isUrlDefinition = function() { return this.value.indexOf('url(') == 0 } - + svg.Property.prototype.getFillStyleDefinition = function(e, opacityProp) { var def = this.getDefinition(); - + // gradient if (def != null && def.createGradient) { return def.createGradient(svg.ctx, e, opacityProp); } - + // pattern if (def != null && def.createPattern) { if (def.getHrefAttribute().hasValue()) { @@ -226,29 +320,29 @@ } return def.createPattern(svg.ctx, e); } - + return null; } - + // length extensions svg.Property.prototype.getDPI = function(viewPort) { return 96.0; // TODO: compute? } - + svg.Property.prototype.getEM = function(viewPort) { var em = 12; - + var fontSize = new svg.Property('fontSize', svg.Font.Parse(svg.ctx.font).fontSize); if (fontSize.hasValue()) em = fontSize.toPixels(viewPort); - + return em; } - + svg.Property.prototype.getUnits = function() { var s = this.value+''; return s.replace(/[0-9\.\-]/g,''); } - + // get the length as pixels svg.Property.prototype.toPixels = function(viewPort, processPercent) { if (!this.hasValue()) return 0; @@ -276,7 +370,7 @@ if (s.match(/ms$/)) return this.numValue(); return this.numValue(); } - + // angle extensions // get the angle as radians svg.Property.prototype.toRadians = function() { @@ -287,25 +381,45 @@ if (s.match(/rad$/)) return this.numValue(); return this.numValue() * (Math.PI / 180.0); } - + + // text extensions + // get the text baseline + var textBaselineMapping = { + 'baseline': 'alphabetic', + 'before-edge': 'top', + 'text-before-edge': 'top', + 'middle': 'middle', + 'central': 'middle', + 'after-edge': 'bottom', + 'text-after-edge': 'bottom', + 'ideographic': 'ideographic', + 'alphabetic': 'alphabetic', + 'hanging': 'hanging', + 'mathematical': 'alphabetic' + }; + svg.Property.prototype.toTextBaseline = function () { + if (!this.hasValue()) return null; + return textBaselineMapping[this.value]; + } + // fonts svg.Font = new (function() { this.Styles = 'normal|italic|oblique|inherit'; this.Variants = 'normal|small-caps|inherit'; this.Weights = 'normal|bold|bolder|lighter|100|200|300|400|500|600|700|800|900|inherit'; - - this.CreateFont = function(fontStyle, fontVariant, fontWeight, fontSize, fontFamily, inherit) { + + this.CreateFont = function(fontStyle, fontVariant, fontWeight, fontSize, fontFamily, inherit) { var f = inherit != null ? this.Parse(inherit) : this.CreateFont('', '', '', '', '', svg.ctx.font); - return { - fontFamily: fontFamily || f.fontFamily, - fontSize: fontSize || f.fontSize, - fontStyle: fontStyle || f.fontStyle, - fontWeight: fontWeight || f.fontWeight, + return { + fontFamily: fontFamily || f.fontFamily, + fontSize: fontSize || f.fontSize, + fontStyle: fontStyle || f.fontStyle, + fontWeight: fontWeight || f.fontWeight, fontVariant: fontVariant || f.fontVariant, - toString: function () { return [this.fontStyle, this.fontVariant, this.fontWeight, this.fontSize, this.fontFamily].join(' ') } - } + toString: function () { return [this.fontStyle, this.fontVariant, this.fontWeight, this.fontSize, this.fontFamily].join(' ') } + } } - + var that = this; this.Parse = function(s) { var f = {}; @@ -322,23 +436,23 @@ return f; } }); - + // points and paths svg.ToNumberArray = function(s) { var a = svg.trim(svg.compressSpaces((s || '').replace(/,/g, ' '))).split(' '); for (var i=0; i this.x2) this.x2 = x; } - + if (y != null) { if (isNaN(this.y1) || isNaN(this.y2)) { this.y1 = y; @@ -389,41 +503,41 @@ if (y < this.y1) this.y1 = y; if (y > this.y2) this.y2 = y; } - } + } this.addX = function(x) { this.addPoint(x, null); } this.addY = function(y) { this.addPoint(null, y); } - + this.addBoundingBox = function(bb) { this.addPoint(bb.x1, bb.y1); this.addPoint(bb.x2, bb.y2); } - + this.addQuadraticCurve = function(p0x, p0y, p1x, p1y, p2x, p2y) { var cp1x = p0x + 2/3 * (p1x - p0x); // CP1 = QP0 + 2/3 *(QP1-QP0) var cp1y = p0y + 2/3 * (p1y - p0y); // CP1 = QP0 + 2/3 *(QP1-QP0) var cp2x = cp1x + 1/3 * (p2x - p0x); // CP2 = CP1 + 1/3 *(QP2-QP0) var cp2y = cp1y + 1/3 * (p2y - p0y); // CP2 = CP1 + 1/3 *(QP2-QP0) this.addBezierCurve(p0x, p0y, cp1x, cp2x, cp1y, cp2y, p2x, p2y); } - + this.addBezierCurve = function(p0x, p0y, p1x, p1y, p2x, p2y, p3x, p3y) { // from http://blog.hackers-cafe.net/2009/06/how-to-calculate-bezier-curves-bounding.html var p0 = [p0x, p0y], p1 = [p1x, p1y], p2 = [p2x, p2y], p3 = [p3x, p3y]; this.addPoint(p0[0], p0[1]); this.addPoint(p3[0], p3[1]); - + for (i=0; i<=1; i++) { - var f = function(t) { + var f = function(t) { return Math.pow(1-t, 3) * p0[i] + 3 * Math.pow(1-t, 2) * t * p1[i] + 3 * (1-t) * Math.pow(t, 2) * p2[i] + Math.pow(t, 3) * p3[i]; } - + var b = 6 * p0[i] - 12 * p1[i] + 6 * p2[i]; var a = -3 * p0[i] + 9 * p1[i] - 9 * p2[i] + 3 * p3[i]; var c = 3 * p1[i] - 3 * p0[i]; - + if (a == 0) { if (b == 0) continue; var t = -c / b; @@ -433,7 +547,7 @@ } continue; } - + var b2ac = Math.pow(b, 2) - 4 * c * a; if (b2ac < 0) continue; var t1 = (-b + Math.sqrt(b2ac)) / (2 * a); @@ -448,23 +562,23 @@ } } } - + this.isPointInBox = function(x, y) { return (this.x1 <= x && x <= this.x2 && this.y1 <= y && y <= this.y2); } - + this.addPoint(x1, y1); this.addPoint(x2, y2); } - + // transforms - svg.Transform = function(v) { + svg.Transform = function(v) { var that = this; this.Type = {} - + // translate this.Type.translate = function(s) { - this.p = svg.CreatePoint(s); + this.p = svg.CreatePoint(s); this.apply = function(ctx) { ctx.translate(this.p.x || 0.0, this.p.y || 0.0); } @@ -475,7 +589,7 @@ p.applyTransform([1, 0, 0, 1, this.p.x || 0.0, this.p.y || 0.0]); } } - + // rotate this.Type.rotate = function(s) { var a = svg.ToNumberArray(s); @@ -497,9 +611,9 @@ p.applyTransform([1, 0, 0, 1, this.p.x || 0.0, this.p.y || 0.0]); p.applyTransform([Math.cos(a), Math.sin(a), -Math.sin(a), Math.cos(a), 0, 0]); p.applyTransform([1, 0, 0, 1, -this.p.x || 0.0, -this.p.y || 0.0]); - } + } } - + this.Type.scale = function(s) { this.p = svg.CreatePoint(s); this.apply = function(ctx) { @@ -510,61 +624,81 @@ } this.applyToPoint = function(p) { p.applyTransform([this.p.x || 0.0, 0, 0, this.p.y || 0.0, 0, 0]); - } + } } - + this.Type.matrix = function(s) { this.m = svg.ToNumberArray(s); this.apply = function(ctx) { ctx.transform(this.m[0], this.m[1], this.m[2], this.m[3], this.m[4], this.m[5]); } + this.unapply = function(ctx) { + var a = this.m[0]; + var b = this.m[2]; + var c = this.m[4]; + var d = this.m[1]; + var e = this.m[3]; + var f = this.m[5]; + var g = 0.0; + var h = 0.0; + var i = 1.0; + var det = 1 / (a*(e*i-f*h)-b*(d*i-f*g)+c*(d*h-e*g)); + ctx.transform( + det*(e*i-f*h), + det*(f*g-d*i), + det*(c*h-b*i), + det*(a*i-c*g), + det*(b*f-c*e), + det*(c*d-a*f) + ); + } this.applyToPoint = function(p) { p.applyTransform(this.m); - } + } } - + this.Type.SkewBase = function(s) { this.base = that.Type.matrix; this.base(s); this.angle = new svg.Property('angle', s); } this.Type.SkewBase.prototype = new this.Type.matrix; - + this.Type.skewX = function(s) { this.base = that.Type.SkewBase; this.base(s); this.m = [1, 0, Math.tan(this.angle.toRadians()), 1, 0, 0]; } this.Type.skewX.prototype = new this.Type.SkewBase; - + this.Type.skewY = function(s) { this.base = that.Type.SkewBase; this.base(s); this.m = [1, Math.tan(this.angle.toRadians()), 0, 1, 0, 0]; } this.Type.skewY.prototype = new this.Type.SkewBase; - + this.transforms = []; - + this.apply = function(ctx) { for (var i=0; i=0; i--) { this.transforms[i].unapply(ctx); } } - + this.applyToPoint = function(p) { for (var i=0; i existingSpecificity) { + this.styles[name] = styles[name]; + this.stylesSpecificity[name] = specificity; + } + } } } } - + }; + + if (node != null && node.nodeType == 1) { //ELEMENT_NODE // add attributes for (var i=0; i= this.tokens.length - 1; } - + this.isCommandOrEnd = function() { if (this.isEnd()) return true; return this.tokens[this.i + 1].match(/^[A-Za-z]$/) != null; } - + this.isRelativeCommand = function() { switch(this.command) { @@ -1219,72 +1350,72 @@ } return false; } - + this.getToken = function() { this.i++; return this.tokens[this.i]; } - + this.getScalar = function() { return parseFloat(this.getToken()); } - + this.nextCommand = function() { this.previousCommand = this.command; this.command = this.getToken(); - } - + } + this.getPoint = function() { var p = new svg.Point(this.getScalar(), this.getScalar()); return this.makeAbsolute(p); } - + this.getAsControlPoint = function() { var p = this.getPoint(); this.control = p; return p; } - + this.getAsCurrentPoint = function() { var p = this.getPoint(); this.current = p; - return p; + return p; } - + this.getReflectedControlPoint = function() { - if (this.previousCommand.toLowerCase() != 'c' && + if (this.previousCommand.toLowerCase() != 'c' && this.previousCommand.toLowerCase() != 's' && - this.previousCommand.toLowerCase() != 'q' && + this.previousCommand.toLowerCase() != 'q' && this.previousCommand.toLowerCase() != 't' ){ return this.current; } - + // reflect point - var p = new svg.Point(2 * this.current.x - this.control.x, 2 * this.current.y - this.control.y); + var p = new svg.Point(2 * this.current.x - this.control.x, 2 * this.current.y - this.control.y); return p; } - + this.makeAbsolute = function(p) { if (this.isRelativeCommand()) { p.x += this.current.x; p.y += this.current.y; } return p; } - + this.addMarker = function(p, from, priorTo) { // if the last angle isn't filled in because we didn't have this point yet ... if (priorTo != null && this.angles.length > 0 && this.angles[this.angles.length-1] == null) { this.angles[this.angles.length-1] = this.points[this.points.length-1].angleTo(priorTo); } this.addMarkerAngle(p, from == null ? null : from.angleTo(p)); } - + this.addMarkerAngle = function(p, a) { this.points.push(p); this.angles.push(a); - } - + } + this.getMarkerPoints = function() { return this.points; } this.getMarkerAngles = function() { for (var i=0; i 1) this.offset = 1; - - var stopColor = this.style('stop-color'); - if (this.style('stop-opacity').hasValue()) stopColor = stopColor.addOpacity(this.style('stop-opacity').value); + + var stopColor = this.style('stop-color', true); + if (stopColor.value === '') stopColor.value = '#000'; + if (this.style('stop-opacity').hasValue()) stopColor = stopColor.addOpacity(this.style('stop-opacity')); this.color = stopColor.value; } svg.Element.stop.prototype = new svg.Element.ElementBase; - + // animation base element svg.Element.AnimateBase = function(node) { this.base = svg.Element.ElementBase; this.base(node); - + svg.Animations.push(this); - + this.duration = 0.0; this.begin = this.attribute('begin').toMilliseconds(); this.maxDuration = this.begin + this.attribute('dur').toMilliseconds(); - + this.getProperty = function() { var attributeType = this.attribute('attributeType').value; var attributeName = this.attribute('attributeName').value; - + if (attributeType == 'CSS') { return this.parent.style(attributeName, true); } - return this.parent.attribute(attributeName, true); + return this.parent.attribute(attributeName, true); }; - + this.initialValue = null; this.initialUnits = ''; - this.removed = false; + this.removed = false; this.calcValue = function() { // OVERRIDE ME! return ''; } - - this.update = function(delta) { + + this.update = function(delta) { // set initial value if (this.initialValue == null) { this.initialValue = this.getProperty().value; this.initialUnits = this.getProperty().getUnits(); } - + // if we're past the end time if (this.duration > this.maxDuration) { // loop for indefinitely repeating animations if (this.attribute('repeatCount').value == 'indefinite' || this.attribute('repeatDur').value == 'indefinite') { this.duration = 0.0 } + else if (this.attribute('fill').valueOrDefault('remove') == 'freeze' && !this.frozen) { + this.frozen = true; + this.parent.animationFrozen = true; + this.parent.animationFrozenValue = this.getProperty().value; + } else if (this.attribute('fill').valueOrDefault('remove') == 'remove' && !this.removed) { this.removed = true; - this.getProperty().value = this.initialValue; + this.getProperty().value = this.parent.animationFrozen ? this.parent.animationFrozenValue : this.initialValue; return true; } - else { - return false; // no updates made - } - } + return false; + } this.duration = this.duration + delta; - + // if we're past the begin time var updated = false; if (this.begin < this.duration) { var newValue = this.calcValue(); // tween - + if (this.attribute('type').hasValue()) { // for transform, etc. var type = this.attribute('type').value; newValue = type + '(' + newValue + ')'; } - + this.getProperty().value = newValue; updated = true; } - + return updated; } - + this.from = this.attribute('from'); this.to = this.attribute('to'); this.values = this.attribute('values'); if (this.values.hasValue()) this.values.value = this.values.value.split(';'); - + // fraction of duration we've covered this.progress = function() { var ret = { progress: (this.duration - this.begin) / (this.maxDuration - this.begin) }; @@ -1841,25 +2002,25 @@ ret.to = this.to; } return ret; - } + } } svg.Element.AnimateBase.prototype = new svg.Element.ElementBase; - + // animate element svg.Element.animate = function(node) { this.base = svg.Element.AnimateBase; this.base(node); - + this.calcValue = function() { var p = this.progress(); - + // tween value linearly - var newValue = p.from.numValue() + (p.to.numValue() - p.from.numValue()) * p.progress; + var newValue = p.from.numValue() + (p.to.numValue() - p.from.numValue()) * p.progress; return newValue + this.initialUnits; }; } svg.Element.animate.prototype = new svg.Element.AnimateBase; - + // animate color element svg.Element.animateColor = function(node) { this.base = svg.Element.AnimateBase; @@ -1869,7 +2030,7 @@ var p = this.progress(); var from = new RGBColor(p.from.value); var to = new RGBColor(p.to.value); - + if (from.ok && to.ok) { // tween color linearly var r = from.r + (to.r - from.r) * p.progress; @@ -1881,15 +2042,15 @@ }; } svg.Element.animateColor.prototype = new svg.Element.AnimateBase; - + // animate transform element svg.Element.animateTransform = function(node) { this.base = svg.Element.AnimateBase; this.base(node); - + this.calcValue = function() { var p = this.progress(); - + // tween value linearly var from = svg.ToNumberArray(p.from.value); var to = svg.ToNumberArray(p.to.value); @@ -1901,19 +2062,19 @@ }; } svg.Element.animateTransform.prototype = new svg.Element.animate; - + // font element svg.Element.font = function(node) { this.base = svg.Element.ElementBase; this.base(node); - this.horizAdvX = this.attribute('horiz-adv-x').numValue(); - + this.horizAdvX = this.attribute('horiz-adv-x').numValue(); + this.isRTL = false; this.isArabic = false; this.fontFace = null; this.missingGlyph = null; - this.glyphs = []; + this.glyphs = []; for (var i=0; i0 && text[i-1]!=' ' && i0 && text[i-1]!=' ' && (i == text.length-1 || text[i+1]==' ')) arabicForm = 'initial'; if (typeof(font.glyphs[c]) != 'undefined') { @@ -2065,15 +2232,15 @@ if (glyph == null) glyph = font.missingGlyph; return glyph; } - + this.renderChildren = function(ctx) { var customFont = this.parent.style('font-family').getDefinition(); if (customFont != null) { var fontSize = this.parent.style('font-size').numValueOrDefault(svg.Font.Parse(svg.ctx.font).fontSize); var fontStyle = this.parent.style('font-style').valueOrDefault(svg.Font.Parse(svg.ctx.font).fontStyle); var text = this.getText(); if (customFont.isRTL) text = text.split("").reverse().join(""); - + var dx = svg.ToNumberArray(this.parent.attribute('dx').value); for (var i=0; i 0) { return ''; } return this.text; } } svg.Element.tspan.prototype = new svg.Element.TextElementBase; - + // tref svg.Element.tref = function(node) { this.base = svg.Element.TextElementBase; this.base(node); - + this.getText = function() { var element = this.getHrefAttribute().getDefinition(); if (element != null) return element.children[0].getText(); } } - svg.Element.tref.prototype = new svg.Element.TextElementBase; - + svg.Element.tref.prototype = new svg.Element.TextElementBase; + // a element svg.Element.a = function(node) { this.base = svg.Element.TextElementBase; this.base(node); - - this.hasText = true; + + this.hasText = node.childNodes.length > 0; for (var i=0; i 0) { // render as temporary group var g = new svg.Element.g(); g.children = this.children; g.parent = this; g.render(ctx); } } - + this.onclick = function() { window.open(this.getHrefAttribute().value); } - + this.onmousemove = function() { svg.ctx.canvas.style.cursor = 'pointer'; } } - svg.Element.a.prototype = new svg.Element.TextElementBase; - + svg.Element.a.prototype = new svg.Element.TextElementBase; + // image element svg.Element.image = function(node) { this.base = svg.Element.RenderedElementBase; this.base(node); - + var href = this.getHrefAttribute().value; + if (href == '') { return; } var isSvg = href.match(/\.svg$/) - + svg.Images.push(this); this.loaded = false; if (!isSvg) { this.img = document.createElement('img'); + if (svg.opts['useCORS'] == true) { this.img.crossOrigin = 'Anonymous'; } var self = this; this.img.onload = function() { self.loaded = true; } - this.img.onerror = function() { if (typeof(console) != 'undefined') { console.log('ERROR: image "' + href + '" not found'); self.loaded = true; } } + this.img.onerror = function() { svg.log('ERROR: image "' + href + '" not found'); self.loaded = true; } this.img.src = href; } else { this.img = svg.ajax(href); this.loaded = true; } - + this.renderChildren = function(ctx) { var x = this.attribute('x').toPixels('x'); var y = this.attribute('y').toPixels('y'); - + var width = this.attribute('width').toPixels('x'); - var height = this.attribute('height').toPixels('y'); + var height = this.attribute('height').toPixels('y'); if (width == 0 || height == 0) return; - + ctx.save(); if (isSvg) { ctx.drawSvg(this.img, x, y, width, height); @@ -2254,12 +2425,12 @@ height, this.img.height, 0, - 0); - ctx.drawImage(this.img, 0, 0); + 0); + ctx.drawImage(this.img, 0, 0); } ctx.restore(); } - + this.getBoundingBox = function() { var x = this.attribute('x').toPixels('x'); var y = this.attribute('y').toPixels('y'); @@ -2269,12 +2440,12 @@ } } svg.Element.image.prototype = new svg.Element.RenderedElementBase; - + // group element svg.Element.g = function(node) { this.base = svg.Element.RenderedElementBase; this.base(node); - + this.getBoundingBox = function() { var bb = new svg.BoundingBox(); for (var i=0; i 255) ? 255 : this.r); - this.g = (this.g < 0 || isNaN(this.g)) ? 0 : ((this.g > 255) ? 255 : this.g); - this.b = (this.b < 0 || isNaN(this.b)) ? 0 : ((this.b > 255) ? 255 : this.b); + // validate/cleanup values + this.r = (this.r < 0 || isNaN(this.r)) ? 0 : ((this.r > 255) ? 255 : this.r); + this.g = (this.g < 0 || isNaN(this.g)) ? 0 : ((this.g > 255) ? 255 : this.g); + this.b = (this.b < 0 || isNaN(this.b)) ? 0 : ((this.b > 255) ? 255 : this.b); - // some getters - this.toRGB = function () { - return 'rgb(' + this.r + ', ' + this.g + ', ' + this.b + ')'; - } - this.toHex = function () { - var r = this.r.toString(16); - var g = this.g.toString(16); - var b = this.b.toString(16); - if (r.length == 1) r = '0' + r; - if (g.length == 1) g = '0' + g; - if (b.length == 1) b = '0' + b; - return '#' + r + g + b; - } + // some getters + this.toRGB = function () { + return 'rgb(' + this.r + ', ' + this.g + ', ' + this.b + ')'; + } + this.toHex = function () { + var r = this.r.toString(16); + var g = this.g.toString(16); + var b = this.b.toString(16); + if (r.length == 1) r = '0' + r; + if (g.length == 1) g = '0' + g; + if (b.length == 1) b = '0' + b; + return '#' + r + g + b; + } - // help - this.getHelpXML = function () { + // help + this.getHelpXML = function () { - var examples = new Array(); - // add regexps - for (var i = 0; i < color_defs.length; i++) { - var example = color_defs[i].example; - for (var j = 0; j < example.length; j++) { - examples[examples.length] = example[j]; - } - } - // add type-in colors - for (var sc in simple_colors) { - examples[examples.length] = sc; - } + var examples = new Array(); + // add regexps + for (var i = 0; i < color_defs.length; i++) { + var example = color_defs[i].example; + for (var j = 0; j < example.length; j++) { + examples[examples.length] = example[j]; + } + } + // add type-in colors + for (var sc in simple_colors) { + examples[examples.length] = sc; + } - var xml = document.createElement('ul'); - xml.setAttribute('id', 'rgbcolor-examples'); - for (var i = 0; i < examples.length; i++) { - try { - var list_item = document.createElement('li'); - var list_color = new RGBColor(examples[i]); - var example_div = document.createElement('div'); - example_div.style.cssText = - 'margin: 3px; ' - + 'border: 1px solid black; ' - + 'background:' + list_color.toHex() + '; ' - + 'color:' + list_color.toHex() - ; - example_div.appendChild(document.createTextNode('test')); - var list_item_value = document.createTextNode( - ' ' + examples[i] + ' -> ' + list_color.toRGB() + ' -> ' + list_color.toHex() - ); - list_item.appendChild(example_div); - list_item.appendChild(list_item_value); - xml.appendChild(list_item); + var xml = document.createElement('ul'); + xml.setAttribute('id', 'rgbcolor-examples'); + for (var i = 0; i < examples.length; i++) { + try { + var list_item = document.createElement('li'); + var list_color = new RGBColor(examples[i]); + var example_div = document.createElement('div'); + example_div.style.cssText = + 'margin: 3px; ' + + 'border: 1px solid black; ' + + 'background:' + list_color.toHex() + '; ' + + 'color:' + list_color.toHex() + ; + example_div.appendChild(document.createTextNode('test')); + var list_item_value = document.createTextNode( + ' ' + examples[i] + ' -> ' + list_color.toRGB() + ' -> ' + list_color.toHex() + ); + list_item.appendChild(example_div); + list_item.appendChild(list_item_value); + xml.appendChild(list_item); - } catch(e){} - } - return xml; + } catch(e){} + } + return xml; + } + + } + + // export as AMD... + if ( typeof define !== 'undefined' && define.amd ) { + define( function () { return RGBColor; }); } -} + // ...or as browserify + else if ( typeof module !== 'undefined' && module.exports ) { + module.exports = RGBColor; + } + global.RGBColor = RGBColor; + +}( typeof window !== 'undefined' ? window : this )); \ No newline at end of file