AnalogIndicatorBase.js 5.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200
  1. define("dojox/gauges/AnalogIndicatorBase", ["dojo/_base/lang","dojo/_base/declare","dojo/_base/connect","dojo/_base/fx","dojox/gfx","./_Indicator"],
  2. function(lang, declare, connect, fx, gfx, Indicator) {
  3. /*=====
  4. Indicator = dojox.gauges._indicator;
  5. =====*/
  6. return declare("dojox.gauges.AnalogIndicatorBase",[Indicator],{
  7. // summary:
  8. // An abstract base class for indicators that can be used in an AnalogGauge.
  9. //
  10. draw: function(/*dojox.gfx.Group*/ group, /*Boolean?*/ dontAnimate){
  11. // summary:
  12. // Override of dojox.gauges._Indicator.draw
  13. // group: dojox.gfx.Group
  14. // The GFX group when the indicator must be drawn
  15. // dontAnimate: Boolean
  16. // Indicates if the drawing should not be animated (vs. the default of doing an animation)
  17. if(this.shape){
  18. this._move(dontAnimate);
  19. }else{
  20. if(this.text){
  21. this.text.parent.remove(this.text);
  22. this.text = null;
  23. }
  24. var a = this._gauge._getAngle(Math.min(Math.max(this.value, this._gauge.min), this._gauge.max));
  25. this.color = this.color || '#000000';
  26. this.length = this.length || this._gauge.radius;
  27. this.width = this.width || 1;
  28. this.offset = this.offset || 0;
  29. this.highlight = this.highlight || '#D0D0D0';
  30. var shapes = this._getShapes(group, this._gauge, this);
  31. if (shapes){
  32. if (shapes.length > 1){
  33. this.shape = group.createGroup();
  34. for (var s = 0; s < shapes.length; s++){
  35. this.shape.add(shapes[s]);
  36. }
  37. }
  38. else
  39. this.shape = shapes[0];
  40. this.shape.setTransform([{
  41. dx: this._gauge.cx,
  42. dy: this._gauge.cy
  43. }, gfx.matrix.rotateg(a)]);
  44. this.shape.connect("onmouseover", this, this.handleMouseOver);
  45. this.shape.connect("onmouseout", this, this.handleMouseOut);
  46. this.shape.connect("onmousedown", this, this.handleMouseDown);
  47. this.shape.connect("touchstart", this, this.handleTouchStart);
  48. }
  49. if(this.label){
  50. var direction = this.direction;
  51. if (!direction) direction = 'outside';
  52. var len;
  53. if (direction == 'inside')
  54. len=-this.length+this.offset - 5;
  55. else
  56. len=this.length+this.offset + 5;
  57. var rad=this._gauge._getRadians(90-a);
  58. this._layoutLabel(group, this.label+'', this._gauge.cx, this._gauge.cy,len ,rad , direction);
  59. }
  60. this.currentValue = this.value;
  61. }
  62. },
  63. _layoutLabel:function(group, txt, ox, oy, lrad, angle, labelPlacement){
  64. // summary:
  65. // Places the label on the side of the tick.
  66. var font = this.font ? this.font : gfx.defaultFont;
  67. var box = gfx._base._getTextBox(txt,
  68. {
  69. font: gfx.makeFontString(gfx.makeParameters(gfx.defaultFont,font))
  70. });
  71. var tw = box.w;
  72. var fz = font.size;
  73. var th = gfx.normalizedLength(fz);
  74. var tfx = ox + Math.cos(angle) * lrad - tw / 2;
  75. var tfy = oy - Math.sin(angle) * lrad - th / 2;
  76. var side;
  77. var intersections = [];
  78. // Intersection with top segment
  79. side = tfx;
  80. var ipx = side;
  81. var ipy = -Math.tan(angle) * side + oy + Math.tan(angle) * ox;
  82. // Verify if intersection is on segment
  83. if (ipy >= tfy && ipy <= tfy + th)
  84. intersections.push({
  85. x: ipx,
  86. y: ipy
  87. });
  88. // Intersection with bottom segment
  89. side = tfx + tw;
  90. ipx = side;
  91. ipy = -Math.tan(angle) * side + oy + Math.tan(angle) * ox;
  92. // Verify if intersection is on segment
  93. if (ipy >= tfy && ipy <= tfy + th) intersections.push({
  94. x: ipx,
  95. y: ipy
  96. });
  97. // Intersection with left segment
  98. side = tfy;
  99. ipx = -1 / Math.tan(angle) * side + ox + 1 / Math.tan(angle) * oy;
  100. ipy = side;
  101. // Verify if intersection is on segment
  102. if (ipx >= tfx && ipx <= tfx + tw)
  103. intersections.push({
  104. x: ipx,
  105. y: ipy
  106. });
  107. // Intersection with right segment
  108. side = tfy + th;
  109. ipx = -1 / Math.tan(angle) * side + ox + 1 / Math.tan(angle) * oy;
  110. ipy = side;
  111. // Verify if intersection is on segment
  112. if (ipx >= tfx && ipx <= tfx + tw)
  113. intersections.push({
  114. x: ipx,
  115. y: ipy
  116. });
  117. var dif;
  118. if (labelPlacement == "inside"){
  119. for (var it = 0; it < intersections.length; it++){
  120. var ip = intersections[it];
  121. dif = this._distance(ip.x, ip.y, ox, oy) - lrad;
  122. if (dif >= 0){
  123. // Place reference intersection point on reference circle
  124. tfx = ox + Math.cos(angle) * (lrad - dif) - tw / 2;
  125. tfy = oy - Math.sin(angle) * (lrad - dif) - th / 2;
  126. break;
  127. }
  128. }
  129. }
  130. else // "outside" placement
  131. {
  132. for (it = 0; it < intersections.length; it++){
  133. ip = intersections[it];
  134. dif = this._distance(ip.x, ip.y, ox, oy) - lrad;
  135. if (dif <= 0){
  136. // Place reference intersection point on reference circle
  137. tfx = ox + Math.cos(angle) * (lrad - dif) - tw / 2;
  138. tfy = oy - Math.sin(angle) * (lrad - dif) - th / 2;
  139. break;
  140. }
  141. }
  142. }
  143. // since the size computed by getTextBox is too big,
  144. // to lower the problem, we align this to the middle and
  145. // place at the middle of the computed size.
  146. this.text = this._gauge.drawText(group, txt, tfx + tw / 2, tfy + th, 'middle', this.color, this.font);
  147. },
  148. _distance: function(x1,y1,x2,y2){
  149. return Math.sqrt((x2-x1)*(x2-x1) + (y2-y1)*(y2-y1));
  150. },
  151. _move: function(/*Boolean?*/ dontAnimate){
  152. // summary:
  153. // dontAnimate: Boolean
  154. // Indicates if the drawing should not be animated (vs. the default of doing an animation)
  155. var v = Math.min(Math.max(this.value, this._gauge.min), this._gauge.max),
  156. c = this.currentValue
  157. ;
  158. if(dontAnimate){
  159. var angle = this._gauge._getAngle(v);
  160. this.shape.setTransform([{dx:this._gauge.cx,dy:this._gauge.cy}, gfx.matrix.rotateg(angle)]);
  161. this.currentValue = v;
  162. }else{
  163. if(c!=v){
  164. var anim = new fx.Animation({curve: [c, v], duration: this.duration, easing: this.easing});
  165. connect.connect(anim, "onAnimate", lang.hitch(this, function(step){
  166. this.shape.setTransform([{dx:this._gauge.cx,dy:this._gauge.cy}, gfx.matrix.rotateg(this._gauge._getAngle(step))]);
  167. this.currentValue = step;
  168. }));
  169. anim.play();
  170. }
  171. }
  172. }
  173. });
  174. });