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

Last change on this file since 532 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
Line 
1define(["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+(chicklet*remain), y, x+(chicklet*remain), 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+(chicklet*remain), x+ ew, y+(chicklet*remain), 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.