dojox/sketch/UnderlineAnnotation.js

Dojo eXtensions, a rollup of many useful sub-projects and varying states of maturity – from very stable and robust, to alpha and experimental. See individual projects contain README files for details.

define(["./Annotation", "./Anchor"], function(){
	var ta=dojox.sketch;
	ta.UnderlineAnnotation=function(figure, id){
		ta.Annotation.call(this, figure, id);
		this.transform={dx:0, dy:0};
		this.start={x:0, y:0};
		this.property('label','#');
		this.labelShape=null;
		this.lineShape=null;
		//this.anchors.start=new ta.Anchor(this, "start");
	};
	ta.UnderlineAnnotation.prototype=new ta.Annotation;
	var p=ta.UnderlineAnnotation.prototype;
	p.constructor=ta.UnderlineAnnotation;

	p.type=function(){ return 'Underline'; };
	p.getType=function(){ return ta.UnderlineAnnotation; };

	p.apply=function(obj){
		if(!obj){ return; }
		if(obj.documentElement){ obj=obj.documentElement; }
		this.readCommonAttrs(obj);
		
		for(var i=0; i<obj.childNodes.length; i++){
			var c=obj.childNodes[i];
			if(c.localName=="text"){
				this.property('label',c.childNodes[0].nodeValue);
				var style=c.getAttribute('style');
				var m=style.match(/fill:([^;]+);/);
				if(m){
					var stroke=this.property('stroke');
					stroke.collor=m[1];
					this.property('stroke',stroke);
					this.property('fill',stroke.collor);
				}
			}/*else if(c.localName=="line"){
				var stroke=this.property('stroke');
				var style=c.getAttribute('style');
				var m=style.match(/stroke:([^;]+);/)[1];
				if(m){
					stroke.color=m;
					this.property('fill',m);
				}
				m=style.match(/stroke-width:([^;]+);/)[1];
				if(m){
					stroke.width=m;
				}
				this.property('stroke',stroke);
			}*/
		}
	};
	
	p.initialize=function(obj){
		//var font=(ta.Annotation.labelFont)?ta.Annotation.labelFont:{family:"Times", size:"16px"};
		this.apply(obj);

		//	create either from scratch or based on the passed node
		this.shape=this.figure.group.createGroup();
		this.shape.getEventSource().setAttribute("id", this.id);
		//if(this.transform.dx || this.transform.dy){ this.shape.setTransform(this.transform); }

		this.labelShape=this.shape.createText({
				x:0,
				y:0,
				text:this.property('label'),
				decoration:"underline",
				align:"start"
			})
			//.setFont(font)
			//.setFill(this.property('fill'));
		this.labelShape.getEventSource().setAttribute('id',this.id+"-labelShape");

		this.lineShape=this.shape.createLine({
				x1:1,
				x2:this.labelShape.getTextWidth(),
				y1:2,
				y2:2
			})
			//.setStroke({ color:this.property('fill'), width:1 });
		this.lineShape.getEventSource().setAttribute("shape-rendering","crispEdges");
		this.draw();
	};
	p.destroy=function(){
		if(!this.shape){ return; }
		this.shape.remove(this.labelShape);
		this.shape.remove(this.lineShape);
		this.figure.group.remove(this.shape);
		this.shape=this.lineShape=this.labelShape=null;
	};
	p.getBBox=function(){
		var b=this.getTextBox();
		var z=this.figure.zoomFactor;

		return { x:0, y:(b.h*-1+4)/z, width:(b.w+2)/z, height:b.h/z };
	};
	p.draw=function(obj){
		this.apply(obj);
		this.shape.setTransform(this.transform);
		this.labelShape.setShape({ x:0, y:0, text:this.property('label') })
			.setFill(this.property('fill'));
		this.zoom();
	};
	p.zoom=function(pct){
		if(this.labelShape){
			pct = pct || this.figure.zoomFactor;
			var textwidthadj=dojox.gfx.renderer=='vml'?0:2/pct;
			ta.Annotation.prototype.zoom.call(this,pct);
			pct = dojox.gfx.renderer=='vml'?1:pct;
			this.lineShape.setShape({ x1:0, x2:this.getBBox().width-textwidthadj, y1:2, y2:2 })
				.setStroke({ color:this.property('fill'), width:1/pct });
			if(this.mode==ta.Annotation.Modes.Edit){
				this.drawBBox(); //the bbox is dependent on the size of the text, so need to update it here
			}
		}
	};
	p.serialize=function(){
		var s=this.property('stroke');
		return '<g '+this.writeCommonAttrs()+'>'
			//+ '<line x1="1" x2="'+this.labelShape.getTextWidth()+1+'" y1="5" y2="5" style="stroke:'+s.color+';stroke-width:'+s.width+';" />'
			+ '<text style="fill:'+this.property('fill')+';" font-weight="bold" text-decoration="underline" '
			+ 'x="0" y="0">'
			+ this.property('label')
			+ '</text>'
			+ '</g>';
	};
    
    //customize AnnotationTool to place a underlilne shape onmouseup, no need
	//to drag a box (like other shapes)
    dojo.declare("dojox.sketch.UnderlineAnnotationTool", ta.AnnotationTool, {
		onMouseDown: function(){},
		onMouseUp: function(){
			var f=this.figure;
			if(!f._start){
				return;
			}
			//zero out end so that the clickover is shown at the right pos
			f._end={x:0,y:0};
			this._create(f._start,{x:f._start.x+10,y:f._start.y+10});
		},
		onMouseMove: function(){}
	});
	ta.Annotation.register("Underline", ta.UnderlineAnnotationTool);
	return dojox.sketch.UnderlineAnnotation;
});