Context Navigation

source: Dev/trunk/src/client/dojox/dgauges/RectangularSegmentedRangeIndicator.js

Last change on this file was 483, checked in by hendrikvanantwerpen, 11 years ago
Added Dojo 1.9.3 release.
Property svn:executable set to ``*
File size: 8.1 KB

Rev	Line
[483]	1	define(["dojo/_base/declare", "dojo/on", "dojox/gfx", "./IndicatorBase"], function(declare, on, gfx, IndicatorBase){
	2	return declare("dojox.dgauges.RectangularSegmentedRangeIndicator", IndicatorBase, {
	3	// summary:
	4	// A segmented-style range indicator for rectangular gauges.
	5	// This class will be replaced by a cleaner implementation in a future version.
	6
	7	start: 0,
	8	startThickness: 10,
	9	endThickness: 10,
	10	fill: null,
	11	stroke: null,
	12	paddingLeft: 0,
	13	paddingTop: 0,
	14	paddingRight: 0,
	15	paddingBottom: 0,
	16
	17	// segments: Number
	18	// The number of segments making the indicator.
	19	// By default it is 10.
	20	segments: 10,
	21
	22	// segmentSpacing: Number
	23	// The blank space between two segments. The default value is 2
	24	segmentSpacing: 2,
	25
	26	// rounded: Boolean
	27	// Indicates if the extremity segments are rounded.
	28	// Default is true.
	29	rounded: true,
	30
	31	// ranges: Array
	32	// An array containing objects to define color ranges. Example [{color:"#FF0000", size:20}, {color:"#FF8800", size:50}].
	33	ranges: null,
	34
	35	constructor: function(){
	36	// summary:
	37	// Constructor.
	38	// description:
	39	// Creates a segmented range indicator.
	40	this.fill = [255, 120, 0];
	41	this.stroke = {
	42	color: "black",
	43	width: .2
	44	};
	45
	46	this.addInvalidatingProperties(["start", "startThickness", "endThickness", "fill", "stroke","segments","segmentSpacing","ranges"]);
	47	},
	48
	49	_defaultHorizontalShapeFunc: function(indicator, group, scale, startX, startY, endPosition, startThickness, endThickness, fill, stroke){
	50	// summary:
	51	// Internal method.
	52	// tags:
	53	// private
	54	var length = scale._contentBox.w ;
	55	var shape, i, gp, radius;
	56
	57	if(this.ranges){
	58	// Configure gradient to represent the ranges
	59	fill = {type:"linear", colors:[]};
	60	fill.x1 = startX;
	61	fill.y1 = startY;
	62	fill.x2 = startX + length;
	63	fill.y2 = startY;
	64
	65	var rangeStart = this.start;
	66
	67	for(i = 0; i < this.ranges.length; i++){
	68	var entry1 = {
	69	color:this.ranges[i].color,
	70	offset: scale.scaler.positionForValue(rangeStart)
	71	};
	72	var entry2 = {
	73	color:this.ranges[i].color,
	74	offset: scale.scaler.positionForValue(rangeStart+this.ranges[i].size)
	75	};
	76	fill.colors.push(entry1);
	77	fill.colors.push(entry2);
	78	rangeStart += this.ranges[i].size;
	79	}
	80	}else if(fill && fill.colors){
	81	// Configure gradient
	82	fill.x1 = startX;
	83	fill.y1 = startY;
	84	fill.x2 = startX + length;
	85	fill.y2 = startY;
	86	}
	87
	88	var x = startX;
	89	var y = startY;
	90	var chicklet = (length / this.segments) - this.segmentSpacing;
	91	var visibleSegments = Math.abs( (endPosition - startX) / (chicklet+this.segmentSpacing) );
	92	var sw = this.startThickness;
	93	var inc = (this.endThickness - this.startThickness) /this.segments
	94	var ew = sw+inc;
	95	var remain = visibleSegments - Math.floor(visibleSegments);
	96
	97	for(i = 0; i < Math.floor(visibleSegments); i++){
	98	var path = group.createPath();
	99
	100	if(i == 0 && this.rounded && (sw/2) < chicklet){ // first segment rounded
	101	radius = sw/2;
	102	path.moveTo(x + radius, y);
	103	path.lineTo(x + chicklet, y);
	104	path.lineTo(x + chicklet, y + ew);
	105	path.lineTo(x + radius, y + sw);
	106	path.arcTo(radius, radius, 0, 0, 1, x + radius, y)
	107	}else{
	108	if(i == Math.floor(visibleSegments) - 1 && (remain == 0) && this.rounded && (ew/2) < chicklet){ // last segment rounded
	109	radius = ew/2;
	110	path.moveTo(x, y);
	111	path.lineTo(x + chicklet - radius, y);
	112	path.arcTo(radius, radius, 0, 0, 1, x + chicklet - radius, y + ew)
	113	path.lineTo(x, y + sw);
	114	path.lineTo(x, y);
	115	}else{
	116	path.moveTo(x, y);
	117	path.lineTo(x + chicklet, y);
	118	path.lineTo(x + chicklet, y + ew);
	119	path.lineTo(x, y + sw);
	120	path.lineTo(x, y);
	121	}
	122	}
	123
	124	path.setFill(fill).setStroke(stroke);
	125	sw = ew;
	126	ew += inc;
	127	x += chicklet + this.segmentSpacing;
	128	}
	129
	130	// draw the remaining segment part
	131	if(remain > 0){
	132	ew = sw+( (ew-sw)*remain );
	133	gp = [x, y, x+(chickletremain), y, x+(chickletremain), y + ew, x, y + sw, x, y]
	134	shape = group.createPolyline(gp).setFill(fill).setStroke(stroke);
	135	}
	136
	137	return shape;
	138	},
	139
	140	_defaultVerticalShapeFunc: function(indicator, group, scale, startX, startY, endPosition, startThickness, endThickness, fill, stroke){
	141	// summary:
	142	// Internal method.
	143	// tags:
	144	// private
	145	var length = scale._contentBox.h ;
	146	var shape, i,gp,radius;
	147	if(this.ranges){
	148	// Configure gradient to represent the ranges
	149	fill = {type:"linear", colors:[]};
	150	fill.x1 = startX;
	151	fill.y1 = startY;
	152	fill.x2 = startX;
	153	fill.y2 = startY + length;
	154
	155	var rangeStart = 0;
	156
	157	for(i = 0; i < this.ranges.length; i++){
	158	var entry1 = {
	159	color:this.ranges[i].color,
	160	offset: scale.scaler.positionForValue(rangeStart)
	161	};
	162	var entry2 = {
	163	color:this.ranges[i].color,
	164	offset: scale.scaler.positionForValue(rangeStart+this.ranges[i].size)
	165	};
	166	fill.colors.push(entry1);
	167	fill.colors.push(entry2);
	168	rangeStart += this.ranges[i].size
	169	}
	170	}else if(fill && fill.colors){
	171	// Configure gradient
	172	fill.x1 = startX;
	173	fill.y1 = startY;
	174	fill.x2 = startX;
	175	fill.y2 = startY + length;
	176	}
	177
	178	var x = startX;
	179	var y = startY;
	180	var chicklet = (length / this.segments) - this.segmentSpacing;
	181	var visibleSegments = Math.abs( (endPosition - startY) / (chicklet+this.segmentSpacing) );
	182	var sw = this.startThickness;
	183	var inc = (this.endThickness - this.startThickness) /this.segments
	184	var ew = sw+inc;
	185	var remain = visibleSegments - Math.floor(visibleSegments);
	186
	187	for(i = 0; i < Math.floor(visibleSegments); i++){
	188	var path = group.createPath();
	189
	190	if(i == 0 && this.rounded && (sw/2) < chicklet){ // first segment rounded
	191	radius = sw/2;
	192	path.moveTo(x , y+ radius);
	193	path.lineTo(x , y+ chicklet);
	194	path.lineTo(x + ew, y + chicklet);
	195	path.lineTo(x + sw, y + radius);
	196	path.arcTo(radius, radius, 0, 0, 0, x , y+ radius)
	197	}else{
	198	if(i == Math.floor(visibleSegments) - 1 && (remain == 0) && this.rounded && (ew/2) < chicklet){ // last segment rounded
	199	radius = ew/2;
	200	path.moveTo(x, y);
	201	path.lineTo(x , y+ chicklet - radius);
	202	path.arcTo(radius, radius, 0, 0, 0, x + ew, y + chicklet - radius)
	203	path.lineTo(x+ sw, y );
	204	path.lineTo(x, y);
	205	}else{
	206	path.moveTo(x, y);
	207	path.lineTo(x , y+ chicklet);
	208	path.lineTo(x + ew, y + chicklet);
	209	path.lineTo(x+ sw, y );
	210	path.lineTo(x, y);
	211	}
	212	}
	213
	214	path.setFill(fill).setStroke(stroke);
	215	sw = ew;
	216	ew += inc;
	217	y += chicklet + this.segmentSpacing;
	218	}
	219
	220	// draw the remaining segment part
	221	if(remain > 0){
	222	ew = sw+( (ew-sw)*remain );
	223	gp = [x, y, x, y+(chickletremain), x+ ew, y+(chickletremain), x+ sw, y , x, y];
	224	shape = group.createPolyline(gp).setFill(fill).setStroke(stroke);
	225	}
	226
	227	return shape;
	228	},
	229
	230	indicatorShapeFunc: function(group, indicator, startX, startY, endPosition, startThickness, endThickness, fill, stroke){
	231	// summary:
	232	// Internal method.
	233	// tags:
	234	// private
	235
	236	if(indicator.scale._gauge.orientation == "horizontal"){
	237	this._defaultHorizontalShapeFunc(indicator, group, indicator.scale, startX, startY, endPosition, startThickness, endThickness, fill, stroke);
	238	}else{
	239	this._defaultVerticalShapeFunc(indicator, group, indicator.scale, startX, startY, endPosition, startThickness, endThickness, fill, stroke);
	240	}
	241	},
	242
	243	refreshRendering: function(){
	244
	245	if(this._gfxGroup == null \|\| this.scale == null){
	246	return;
	247	}
	248	// gets position corresponding to the values
	249	var spos = this.scale.positionForValue(this.start);
	250	var pos = this.scale.positionForValue(this.value);
	251	this._gfxGroup.clear();
	252
	253	var startX;
	254	var startY;
	255	var endPosition;
	256	if(this.scale._gauge.orientation == "horizontal"){
	257	startX = spos;
	258	startY = this.paddingTop;
	259	endPosition = pos;
	260	}else{
	261	startX = this.paddingLeft;
	262	startY = spos ;
	263	endPosition = pos;
	264	}
	265	this.indicatorShapeFunc(this._gfxGroup, this, startX, startY, endPosition, this.startThickness, this.endThickness, this.fill, this.stroke);
	266	}
	267	})
	268	});

Note: See TracBrowser for help on using the repository browser.

Download in other formats: