dojo_app/js/library/dojox/sketch/Annotation.js

define([
	"dojo/_base/kernel",
	"dojo/_base/lang",
	"dojo/_base/declare",
	"dojo/_base/json",
	"./Anchor",
	"./_Plugin"
], function(dojo){
	dojo.declare("dojox.sketch.AnnotationTool", dojox.sketch._Plugin, {
		onMouseDown: function(e){
			this._omd=true;
		},
		onMouseMove: function(e,rect){
			if(!this._omd){
				return;
			}
			if(this._cshape){
				this._cshape.setShape(rect);
			} else {
				this._cshape=this.figure.surface.createRect(rect)
					.setStroke({color:"#999", width:1, style:"ShortDot"})
					.setFill([255,255,255,0.7]);
				this._cshape.getEventSource().setAttribute("shape-rendering","crispEdges");
			}
		},
		onMouseUp: function(e){
			if(!this._omd){
				return;
			}
			this._omd=false;
			var f=this.figure;
			if(this._cshape){
				f.surface.remove(this._cshape);
				delete this._cshape;
			}
			if(!(f._startPoint.x==e.pageX&&f._startPoint.y==e.pageY)){
				//	The minimum number of pixels one has to travel before a shape
				//		gets drawn.
				var limit=10;
				if(Math.max(
					limit,
					Math.abs(f._absEnd.x-f._start.x),
					Math.abs(f._absEnd.y-f._start.y)
				)>limit){
					this._create(f._start, f._end);
				}
			}
		},
		_create: function(start,end){
			//	create a new shape, needs to be accessible from the
			//		dragging functions.
			var f=this.figure;
			var _=f.nextKey();
			var a=new (this.annotation)(f, _);
			a.transform={
				dx:f._calCol(start.x/f.zoomFactor),
				dy:f._calCol(start.y/f.zoomFactor)
			};
			a.end={
				x:f._calCol(end.x/f.zoomFactor),
				y:f._calCol(end.y/f.zoomFactor)
			};
			if(a.control){
				a.control={
					x:f._calCol((end.x/2)/f.zoomFactor),
					y:f._calCol((end.y/2)/f.zoomFactor)
				};
			}
			f.onBeforeCreateShape(a);
			a.initialize();
			f.select(a);
			f.onCreateShape(a);
			f.history.add(dojox.sketch.CommandTypes.Create,a);
		}
	});

	dojox.sketch.Annotation=function(figure, id){
		//	for editing stuff.
		this.id=this._key=id;
		this.figure=figure;
		this.mode=dojox.sketch.Annotation.Modes.View;
		this.shape=null;	// dojox.gfx.Group
		this.boundingBox=null;	// rect for boundaries
		this.hasAnchors=true;
		this.anchors={};	//	dojox.sketch.Anchor
		this._properties={
			'stroke':{ color:"blue", width:2 },
			'font': {family:"Arial", size:16, weight:"bold"},
			'fill': "blue",
			'label': ""
		};

		if(this.figure){
			this.figure.add(this);
		}
	};

	var p=dojox.sketch.Annotation.prototype;
	p.constructor=dojox.sketch.Annotation;
	p.type=function(){ return ''; };
	p.getType=function(){ return dojox.sketch.Annotation; };
	p.onRemove=function(noundo){
		//this.figure._delete([this],noundo);
		this.figure.history.add(dojox.sketch.CommandTypes.Delete, this, this.serialize());
	};
	p.property=function(name,/*?*/value){
		var r;
		name=name.toLowerCase();
		if(this._properties[name]!==undefined){
			r=this._properties[name];
		}
		if(arguments.length>1){
			this._properties[name]=value;
			if(r!=value){
				this.onPropertyChange(name,r);
			}
		}
		return r;
	};
	p.onPropertyChange=function(name,oldvalue){};
	p.onCreate=function(){
		this.figure.history.add(dojox.sketch.CommandTypes.Create,this);
	}
	p.onDblClick=function(e){
		var l=prompt('Set new text:',this.property('label'));
		if(l!==false){
			this.beginEdit(dojox.sketch.CommandTypes.Modify);
			this.property('label',l);
			this.draw();
			this.endEdit();
		}
	}
	p.initialize=function(){ };
	p.destroy=function(){ };
	p.draw=function(){ };
	p.apply=function(obj){ };
	p.serialize=function(){ };
	p.getBBox=function(){ };
	p.beginEdit=function(type){
		if(!this._type){
			this._type=type||dojox.sketch.CommandTypes.Move;
			this._prevState=this.serialize();
		}
	};
	p.endEdit=function(){
		if(this._prevState!=this.serialize()){
			this.figure.history.add(this._type,this,this._prevState);
		}
		this._type=this._prevState='';
	};
	p.calculate={
		slope:function(p1, p2){
			if(!(p1.x-p2.x)){ return 0; }
			return ((p1.y-p2.y)/(p1.x-p2.x));
		},
		dx:function(p1, p2, dy){
			var s=this.slope(p1,p2);
			if(s==0){ return s; }
			return dy/s;
		},
		dy:function(p1, p2, dx){
			return this.slope(p1,p2)*dx;
		}
	};
	p.drawBBox=function(){
		var r=this.getBBox();
		if(!this.boundingBox){
			this.boundingBox=this.shape.createRect(r)
				.moveToBack()
				.setStroke({color:"#999", width:1, style:"Dash"})
				.setFill([238,238,238,0.3]);
			this.boundingBox.getEventSource().setAttribute("id",this.id+"-boundingBox");
			this.boundingBox.getEventSource().setAttribute("shape-rendering","crispEdges");
			this.figure._add(this);
		} else {
			this.boundingBox.setShape(r);
		}
	};
	p.setBinding=function(pt){
		this.transform.dx+=pt.dx;
		this.transform.dy+=pt.dy;
		this.draw();
	};
	//p.doChange=function(pt){ };
	p.getTextBox=function(zoomfactor){
		var fp=this.property('font');
		//_getTextBox expect style camlCase properties, do it manually here
		var f = {fontFamily:fp.family,fontSize:fp.size,fontWeight:fp.weight};
		if(zoomfactor){
			f.fontSize = Math.floor(f.fontSize/zoomfactor);
		}
		return dojox.gfx._base._getTextBox(this.property('label'),f);
	};
	p.setMode=function(m){
		if(this.mode==m){ return; }
		this.mode=m;
		var method="disable";
		if(m==dojox.sketch.Annotation.Modes.Edit){ method="enable"; }
		if(method=="enable"){
			//	draw the bounding box
			this.drawBBox();
			this.figure._add(this);
		} else {
			if(this.boundingBox){
				if(this.shape){ this.shape.remove(this.boundingBox); }
				this.boundingBox=null;
			}
		}
		for(var p in this.anchors){
			this.anchors[p][method]();
		}
	};
	p.zoom=function(pct){
		pct = pct || this.figure.zoomFactor;
		if(this.labelShape){
			var f=dojo.clone(this.property('font'));
			f.size=Math.ceil(f.size/pct)+"px";
			this.labelShape.setFont(f);
		}
		
		for(var n in this.anchors){
			this.anchors[n].zoom(pct);
		}
		
		//In VML, path are always the same width no matter scaling factors,
		//so aways use 1 for VML
		if(dojox.gfx.renderer=='vml'){
        	pct=1;
        }
		if(this.pathShape){
			var s=dojo.clone(this.property('stroke'));
			s.width=pct>1?s.width:Math.ceil(s.width/pct)+"px";
			this.pathShape.setStroke(s);
		}
	};
	p.writeCommonAttrs=function(){
		return 'id="' + this.id + '" dojoxsketch:type="' + this.type() + '"'
			+ ' transform="translate('+ this.transform.dx + "," + this.transform.dy + ')"'
			+ (this.data?(' ><![CDATA[data:'+dojo.toJson(this.data)+']]'):'');
	};
	p.readCommonAttrs=function(obj){
		var i=0,cs=obj.childNodes,c;
		while((c=cs[i++])){
			if(c.nodeType==4){ //CDATA
				if(c.nodeValue.substr(0,11)=='properties:'){
					this._properties=dojo.fromJson(c.nodeValue.substr(11));
				}else if(c.nodeValue.substr(0,5)=='data:'){
					this.data=dojo.fromJson(c.nodeValue.substr(5));
				}else{
					console.error('unknown CDATA node in node ',obj);
				}
			}
		}

		if(obj.getAttribute('transform')){
			var t=obj.getAttribute('transform').replace("translate(","");
			var pt=t.split(",");
			this.transform.dx=parseFloat(pt[0],10);
			this.transform.dy=parseFloat(pt[1],10);
		}
	};
	dojox.sketch.Annotation.Modes={ View:0, Edit:1 };
	dojox.sketch.Annotation.register=function(name,toolclass){
		var cls=dojox.sketch[name+'Annotation'];
		dojox.sketch.registerTool(name, function(p){
			dojo.mixin(p, {
				shape: name,
				annotation:cls
			});
			return new (toolclass || dojox.sketch.AnnotationTool)(p);
		});
	};

	return dojox.sketch.Annotation;
});