analytics/webcontent/dojo17/dojox/drawing/annotations/BoxShadow.js

// wrapped by build app
define("dojox/drawing/annotations/BoxShadow", ["dijit","dojo","dojox"], function(dijit,dojo,dojox){
dojo.provide("dojox.drawing.annotations.BoxShadow");

dojox.drawing.annotations.BoxShadow = dojox.drawing.util.oo.declare(
	// summary:
	//		Creates a box shadow under solid objects. Can change the
	//		shadow direction, color, size, and intensity. Can center
	//		the shadow and make it a Glow.
	// description:
	//		This is a psuedo shadow, created by duplicating the
	//		original stencil and increasing the line weight while
	//		reducing the opacity. Therefore it will not work with
	//		text. Also won't look very good if the Stencil has no
	//		fill or is transparent. Can't do knockouts or inner
	//		shadows. Currently can't do paths - while doable, it
	//		will most likely choke IE into certain death.
	//
	function(/*Object*/options){
		this.stencil = options.stencil;
		this.util = options.stencil.util;
		this.mouse = options.stencil.mouse;
		this.style = options.stencil.style;
		
		var shadowDefaults = {
			// summary:
			//		When passing a shadow object into a stencil, that shadow
			//		object will be mixed in with these defaults.
			//
			// size: Number, mult: Number
			//		These two props work together. Both affect the size and quality
			//		of the shadow. size affects the actual size and mult affects the
			//		lineWidths that overlap to make the shadow. Generally you want a
			//		bigger 'size' than 'mult'. The defaults are good for a shadow, but
			//		you will want to increase them when making a glow.
			//	TODO: Make this more clear or use other properties.
			size:6,
			mult:4,
			// alpha: Float
			//		Affects the alpha of the shadow. Because this is multiple shapes
			//		overlapped, you want much less than you may think. .1 is pretty
			//		dark and . is black. Higher numbers also give a sharper edge.
			alpha:.05,
			//	place: String
			//		Tells the position of the shadow:
			//			B: bottom
			//			T: top
			//			L: left
			//			R: right
			//			C: center, or a glow
			//		Can be used in combinations such as BR, BL, L, T, etc. 'C' should
			//		be used by itself.
			place:"BR",
			//	color: String
			//		The color of the shadow or glow.
			color:"#646464"
		}
		
		delete options.stencil;
		this.options = dojo.mixin(shadowDefaults, options);
		this.options.color = new dojo.Color(this.options.color)
		this.options.color.a = this.options.alpha;
		switch(this.stencil.shortType){
			case "image":
			case "rect":
				this.method = "createForRect"; break;
			case "ellipse":
				this.method = "createForEllipse"; break;
			case "line":
				this.method = "createForLine"; break;
			case "path":
				this.method = "createForPath"; break;
				// 	path is a bit of a hassle. Plus I think in IE it would be
				//slower than the political process. Maybe TODO.
			case "vector":
				this.method = "createForZArrow"; break;
			default:
				console.warn("A shadow cannot be made for Stencil type ", this.stencil.type);
		}
		
		if(this.method){
			this.render();
			this.stencil.connectMult([
				[this.stencil, "onTransform", this, "onTransform"],
				this.method=="createForZArrow"?[this.stencil, "render", this, "render"]:[this.stencil, "render", this, "onRender"],
				[this.stencil, "onDelete", this, "destroy"]
			]);
		}
	},
	{
		showing:true,
		render: function(){
			if(this.container){
				this.container.removeShape();
			}
			this.container = this.stencil.container.createGroup();
			this.container.moveToBack();
			
			var o = this.options,
				size = o.size,
				mult = o.mult,
				d = this.method == "createForPath"
					? this.stencil.points
					: this.stencil.data,
				r = d.r || 1,
				p = o.place,
				c = o.color;
				
			this[this.method](o, size, mult, d, r, p, c);
		},
		
		hide: function(){
			if(this.showing){
				this.showing = false;
				this.container.removeShape();
			}
		},
		
		show: function(){
			if(!this.showing){
				this.showing = true;
				this.stencil.container.add(this.container);
			}
		},
		
		createForPath: function(o, size, mult, pts, r, p, c){
			var sh = size * mult / 4,
				shy = /B/.test(p) ? sh : /T/.test(p) ? sh*-1 : 0,
				shx = /R/.test(p) ? sh : /L/.test(p) ? sh*-1 : 0;
			
			var closePath = true;
			
			for(var i=1;i<=size;i++){
				var lineWidth = i * mult;
				//var rect = this.container.createLine({x1:d.x1+shx, y1:d.y1+shy, x2:d.x2+shx, y2:d.y2+shy})
				//	.setStroke({width:lineWidth, color:c, cap:"round"})
			
				if(dojox.gfx.renderer=="svg"){
					var strAr = [];
					dojo.forEach(pts, function(o, i){
						if(i==0){
							strAr.push("M " + (o.x+shx) +" "+ (o.y+shy));
						}else{
							var cmd = o.t || "L ";
							strAr.push(cmd + (o.x+shx) +" "+ (o.y+shy)); // Z + undefined works here
						}
					}, this);
					if(closePath){
						strAr.push("Z");
					}
					this.container.createPath(strAr.join(", ")).setStroke({width:lineWidth, color:c, cap:"round"})
					
				}else{
					// Leaving this code for VML. It seems slightly faster but times vary.
					var pth = this.container.createPath({}).setStroke({width:lineWidth, color:c, cap:"round"})
					
					dojo.forEach(this.points, function(o, i){
						if(i==0 || o.t=="M"){
							pth.moveTo(o.x+shx, o.y+shy);
						}else if(o.t=="Z"){
							closePath && pth.closePath();
						}else{
							pth.lineTo(o.x+shx, o.y+shy);
						}
					}, this);
					
					closePath && pth.closePath();
				}
			
			
			}
		},
		
		createForLine: function(o, size, mult, d, r, p, c){
			
			var sh = size * mult / 4,
				shy = /B/.test(p) ? sh : /T/.test(p) ? sh*-1 : 0,
				shx = /R/.test(p) ? sh : /L/.test(p) ? sh*-1 : 0;
			for(var i=1;i<=size;i++){
				var lineWidth = i * mult;
				this.container.createLine({x1:d.x1+shx, y1:d.y1+shy, x2:d.x2+shx, y2:d.y2+shy})
					.setStroke({width:lineWidth, color:c, cap:"round"})
			}
		},
		createForEllipse: function(o, size, mult, d, r, p, c){
		
			var sh = size * mult / 8,
				shy = /B/.test(p) ? sh : /T/.test(p) ? sh*-1 : 0,
				shx = /R/.test(p) ? sh*.8 : /L/.test(p) ? sh*-.8 : 0;
			
			for(var i=1;i<=size;i++){
				var lineWidth = i * mult;
				this.container.createEllipse({cx:d.cx+shx, cy:d.cy+shy, rx:d.rx-sh, ry:d.ry-sh, r:r})
					.setStroke({width:lineWidth, color:c})
			}
		},
		
		createForRect: function(o, size, mult, d, r, p, c){
			
			var sh = size * mult / 2,
				shy = /B/.test(p) ? sh : /T/.test(p) ? 0 : sh /2,
				shx = /R/.test(p) ? sh : /L/.test(p) ? 0 : sh /2;
			
			for(var i=1;i<=size;i++){
				var lineWidth = i * mult;
				this.container.createRect({x:d.x+shx, y:d.y+shy, width:d.width-sh, height:d.height-sh, r:r})
					.setStroke({width:lineWidth, color:c})
			}
		},
		
		arrowPoints: function(){
			// summary:
			//	Creates data used to draw arrow head.
			//
			var d = this.stencil.data;
			var radius = this.stencil.getRadius();
			var angle = this.style.zAngle + 30;

			var pt = this.util.pointOnCircle(d.x1, d.y1, radius*.75, angle);
			
			var obj = {
				start:{
					x:d.x1,
					y:d.y1
				},
				x:pt.x,
				y:pt.y
			}
			var angle = this.util.angle(obj);
			var lineLength = this.util.length(obj);
			var al = this.style.arrows.length;
			var aw = this.style.arrows.width/3;
			if(lineLength<al){
				al = lineLength/2;
			}

			var p1 = this.util.pointOnCircle(obj.x, obj.y, -al, angle-aw);
			var p2 = this.util.pointOnCircle(obj.x, obj.y, -al, angle+aw);
			return [
				{x:obj.x, y:obj.y},
				p1,
				p2
			];
		},
		
		createForZArrow: function(o, size, mult, pts, r, p, c){
			if(this.stencil.data.cosphi<1 || !this.stencil.points[0]){ return; }
			var sh = size * mult / 4,
				shy = /B/.test(p) ? sh : /T/.test(p) ? sh*-1 : 0,
				shx = /R/.test(p) ? sh : /L/.test(p) ? sh*-1 : 0;
			var closePath = true;
			for(var i=1;i<=size;i++){
				var lineWidth = i * mult;
				pts = this.arrowPoints();
				if(!pts){ return; }
				if(dojox.gfx.renderer=="svg"){
					
					var strAr = [];
					dojo.forEach(pts, function(o, i){
						if(i==0){
							strAr.push("M " + (o.x+shx) +" "+ (o.y+shy));
						}else{
							var cmd = o.t || "L ";
							strAr.push(cmd + (o.x+shx) +" "+ (o.y+shy)); // Z + undefined works here
						}
					}, this);
					if(closePath){
						strAr.push("Z");
					}

					this.container.createPath(strAr.join(", ")).setStroke({width:lineWidth, color:c, cap:"round"}).setFill(c);
					
				}else{
					// Leaving this code for VML. It seems slightly faster but times vary.
					var pth = this.container.createPath({}).setStroke({width:lineWidth, color:c, cap:"round"})
					
					dojo.forEach(pts, function(o, i){
						if(i==0 || o.t=="M"){
							pth.moveTo(o.x+shx, o.y+shy);
						}else if(o.t=="Z"){
							closePath && pth.closePath();
						}else{
							pth.lineTo(o.x+shx, o.y+shy);
						}
					}, this);
					
					closePath && pth.closePath();
				}
				var sp = this.stencil.points;
				this.container.createLine({x1:sp[0].x, y1:sp[0].y, x2:pts[0].x, y2:pts[0].y})
					.setStroke({width:lineWidth, color:c, cap:"round"});
			
			}
		},
		
		
		onTransform: function(){
			this.render();
		},
		onRender: function(){
			this.container.moveToBack();
		},
		destroy: function(){
			if(this.container){
				this.container.removeShape();
			}
		}
	}
);
});