_Indicator.js

define(["dojo/_base/lang","dojo/_base/declare","dojo/_base/fx","dojo/_base/html","dojo/_base/connect","dijit/_Widget","dojo/dom-construct", "dojo/dom-class"], 
function(lang,declare,fx,html,connect,Widget,dom,domClass) {

return declare("dojox.gauges._Indicator",[Widget],{
	// summary:
	//		An indicator to be used in a gauge
	//
	// description:
	//		An indicator widget, which has given properties.  drawn by a gauge.
	//
	// example:
	//	|	<script type="text/javascript">
	//	|		require(["dojox/gauges/AnalogGauge","dojox/gauges/Indicator"]);
	//	|	</script>
	//	|	...
	//	|	<div	dojoType="dojox.gauges.AnalogGauge"
	//	|			id="testGauge"
	//	|			width="300"
	//	|			height="200"
	//	|			cx=150
	//	|			cy=175
	//	|			radius=125
	//	|			image="gaugeOverlay.png"
	//	|			imageOverlay="false"
	//	|			imageWidth="280"
	//	|			imageHeight="155"
	//	|			imageX="12"
	//	|			imageY="38">
	//	|		<div 	dojoType="dojox.gauges.Indicator"
	//	|				value=17
	//	|				type="arrow"
	//	|				length=135
	//	|				width=3
	//	|				hover="Value: 17"
	//	|				onDragMove="handleDragMove">
	//	|		</div>
	//	|	</div>

	// value: Number
	//		The value (on the gauge) that this indicator should be placed at
	value: 0,

	// type: String
	//		The type of indicator to draw.  Varies by gauge type.  Some examples include
	//		"line", "arrow", and "bar"
	type: '',

	// color: String
	//		The color of the indicator.
	color: 'black',
	
	// strokeColor: String
	//		The color to stroke the outline of the indicator.
	strokeColor: '',

	// label: String
	//		The text label for the indicator.
	label: '',

	// font: Object
	//		The font for the indicator. The font is enerally in a format similar to:
	//		{family: "Helvetica", weight: "bold", style: "italic", size: "18pt", rotated: true}
	font: {family: "sans-serif", size: "12px"},

	// length: Number
	//		The length of the indicator.  In the above example, the radius of the AnalogGauge
	//		is 125, but the length of the indicator is 135, meaning it would project beyond
	//		the edge of the AnalogGauge
	length: 0,

	// width: Number
	//		The width of the indicator.
	width: 0,

	// offset: Number
	//		The offset of the indicator
	offset: 0,

	// hover: String
	//		The string to put in the tooltip when this indicator is hovered over.
	hover: '',

	// front: boolean
	//		Keep this indicator at the front
	front: false,

	// onDragMove: String
	//		The function to call when this indicator is moved by dragging.
	//		onDragMove: '',

	// easing: String|Object
	//		indicates the easing function to be used when animating the of an indicator.
	easing: fx._defaultEasing,

	// duration: Number
	//		indicates how long an animation of the indicator should take
	duration: 1000,

	// hideValues: Boolean
	//		Indicates whether the text boxes showing the value of the indicator (as text
	//		content) should be hidden or shown.  Default is not hidden, aka shown.
	hideValue: false,

	// noChange: Boolean
	//		Indicates whether the indicator's value can be changed.  Useful for
	//		a static target indicator.  Default is false (that the value can be changed).
	noChange: false,

	// interactionMode: String
	//		The interactionMode can have two values: "indicator" (the default) or "gauge".
	//		When the value is "indicator", the user must click on the indicator to change the value.
	//		When the value is "gauge", the user can click on the gauge to change the indicator value.
	//		If a gauge contains several indicators with the indicatorMode property set to "gauge", then
	//		only the first indicator will be moved when clicking the gauge.
	interactionMode: "indicator",
	
	_gauge: null,
	
	// title: String
	//		 The title of the indicator, to be displayed next to it's input box for the text-representation.
	title: "",

	startup: function(){
		if(this.onDragMove){
			this.onDragMove = lang.hitch(this.onDragMove);
		}
		if (this.strokeColor === ""){
			this.strokeColor = undefined;
		}
	},

	postCreate: function(){
		if(this.title === ""){
			html.style(this.domNode, "display", "none");
		}
		if(lang.isString(this.easing)){
			this.easing = lang.getObject(this.easing);
		}
	},
		
	buildRendering: function(){
		// summary:
		//		Overrides _Widget.buildRendering
		
		var n = this.domNode = this.srcNodeRef ? this.srcNodeRef: dom.create("div");
		domClass.add(n, "dojoxGaugeIndicatorDiv");
		var title = dom.create("label");
		if (this.title) title.innerHTML = this.title + ":";
		dom.place(title, n);
		this.valueNode = dom.create("input", {
			className: "dojoxGaugeIndicatorInput",
			size: 5,
			value: this.value
		});
		
		dom.place(this.valueNode, n);
		connect.connect(this.valueNode, "onchange", this, this._update);
	},
	
	_update: function(){
		// summary:
		//		A private function, handling the updating of the gauge

		this._updateValue(true);
	},
	
	_updateValue: function(animate){
		// summary:
		//		A private function, handling the updating of the gauge
		var value = this.valueNode.value;
		if(value === ''){
			this.value = null;
		}else{
			this.value = Number(value);
			this.hover = this.title+': '+value;
		}
		if(this._gauge){
			this.draw(this._gauge._indicatorsGroup, animate || animate==undefined ? false: true);
			this.valueNode.value = this.value;
			if((this.title == 'Target' || this.front) && this._gauge.moveIndicator){
				// if re-drawing value, make sure target is still on top
				this._gauge.moveIndicatorToFront(this);
			}
			this.valueChanged();
		}
	},
	
	valueChanged: function(){
		// summary:
		//		Invoked every time the value of the indicator changes.
	
	},
	 
	update: function(value, animate){
		// summary:
		//		Updates the value of the indicator, including moving/re-drawing at it's new location and
		//		updating the text box
		if(!this.noChange){
			this.valueNode.value = value;
			this._updateValue(animate);
		}
	},

	handleMouseOver: function(e){
		// summary:
		//		Handles mouse-over events in the indicator.
		this._gauge._handleMouseOverIndicator(this, e);
	},
	
	handleMouseOut: function(e){
		// summary:
		//		Handles mouse-out events in the indicator.
		this._gauge._handleMouseOutIndicator(this,e);
		this._gauge.gaugeContent.style.cursor = '';
	},
	
	handleMouseDown: function(e){
		// summary:
		//		Handles mouse-down events in the indicator.
		this._gauge._handleMouseDownIndicator(this,e);
	},
	
	handleTouchStart: function(e){
		// summary:
		//		Handles touch start events in the indicator.
		this._gauge.handleTouchStartIndicator(this, e);
	},	
	
	onDragMove: function(){
		// summary:
		//		Handles updating the text box and the hover text while dragging an indicator
		this.value = Math.floor(this.value);
		this.valueNode.value = this.value;
		this.hover = this.title+': '+this.value;
	},

	draw: function(/* Boolean? */ dontAnimate){
		// summary:
		//		Performs the initial drawing of the indicator.
		// dontAnimate: Boolean
		//		Indicates if the drawing should not be animated (rather than teh default, to animate)
	},

	remove: function(){
		// summary:
		//		Removes the indicator's shape from the gauge surface.
		if (this.shape)
			this.shape.parent.remove(this.shape);
		this.shape = null;
		if(this.text){
			this.text.parent.remove(this.text);
		}
		this.text = null;
	}
});
});