TouchIndicator.js 6.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232
  1. define("dojox/charting/action2d/TouchIndicator", ["dojo/_base/lang", "dojo/_base/declare", "dojo/_base/event", "./ChartAction", "./_IndicatorElement", "dojox/lang/utils"],
  2. function(lang, declare, eventUtil, ChartAction, IndicatorElement, du){
  3. /*=====
  4. dojo.declare("dojox.charting.action2d.__TouchIndicatorCtorArgs", null, {
  5. // summary:
  6. // Additional arguments for Touch indicator.
  7. // series: String
  8. // Target series name for this chart action.
  9. series: "",
  10. // dualIndicator: Boolean?
  11. // Whether a double touch on the chart creates a dual indicator showing data trend between the two touch points. Default is false.
  12. dualIndicator: false,
  13. // autoScroll: Boolean?
  14. // Whether when moving indicator the chart is automatically scrolled. Default is true.
  15. autoScroll: true,
  16. // vertical: Boolean?
  17. // Whether the indicator is vertical or not. Default is true.
  18. vertical: true,
  19. // fixed: Boolean?
  20. // Whether a fixed precision must be applied to data values for display. Default is true.
  21. fixed: true,
  22. // precision: Number?
  23. // The precision at which to round data values for display. Default is 1.
  24. precision: 0,
  25. // lineStroke: gfx.Stroke?
  26. // An optional stroke to use for indicator line.
  27. lineStroke: {},
  28. // lineOutline: dojo.gfx.Stroke?
  29. // An optional outline to use for indicator line.
  30. lineOutline: {},
  31. // lineShadow: dojo.gfx.Stroke?
  32. // An optional shadow to use for indicator line.
  33. lineShadow: {},
  34. // stroke: dojo.gfx.Stroke?
  35. // An optional stroke to use for indicator label background.
  36. stroke: {},
  37. // outline: dojo.gfx.Stroke?
  38. // An optional outline to use for indicator label background.
  39. outline: {},
  40. // shadow: dojo.gfx.Stroke?
  41. // An optional shadow to use for indicator label background.
  42. shadow: {},
  43. // fill: dojo.gfx.Fill?
  44. // An optional fill to use for indicator label background.
  45. fill: {},
  46. // fillFunc: Function?
  47. // An optional function to use to compute label background fill. It takes precedence over
  48. // fill property when available.
  49. fillFunc: null,
  50. // labelFunc: Function?
  51. // An optional function to use to compute label text. It takes precedence over
  52. // the default text when available.
  53. labelFunc: {},
  54. // font: String?
  55. // A font definition to use for indicator label background.
  56. font: "",
  57. // fontColor: String|dojo.Color?
  58. // The color to use for indicator label background.
  59. fontColor: "",
  60. // markerStroke: dojo.gfx.Stroke?
  61. // An optional stroke to use for indicator marker.
  62. markerStroke: {},
  63. // markerOutline: dojo.gfx.Stroke?
  64. // An optional outline to use for indicator marker.
  65. markerOutline: {},
  66. // markerShadow: dojo.gfx.Stroke?
  67. // An optional shadow to use for indicator marker.
  68. markerShadow: {},
  69. // markerFill: dojo.gfx.Fill?
  70. // An optional fill to use for indicator marker.
  71. markerFill: {},
  72. // markerSymbol: String?
  73. // An optional symbol string to use for indicator marker.
  74. markerFill: {}
  75. });
  76. var ChartAction = dojox.charting.action2d.ChartAction;
  77. =====*/
  78. return declare("dojox.charting.action2d.TouchIndicator", ChartAction, {
  79. // summary:
  80. // Create a touch indicator action. You can touch over the chart to display a data indicator.
  81. // the data description block for the widget parser
  82. defaultParams: {
  83. series: "",
  84. dualIndicator: false,
  85. vertical: true,
  86. autoScroll: true,
  87. fixed: true,
  88. precision: 0
  89. },
  90. optionalParams: {
  91. lineStroke: {},
  92. outlineStroke: {},
  93. shadowStroke: {},
  94. stroke: {},
  95. outline: {},
  96. shadow: {},
  97. fill: {},
  98. fillFunc: null,
  99. labelFunc: null,
  100. font: "",
  101. fontColor: "",
  102. markerStroke: {},
  103. markerOutline: {},
  104. markerShadow: {},
  105. markerFill: {},
  106. markerSymbol: ""
  107. },
  108. constructor: function(chart, plot, kwArgs){
  109. // summary:
  110. // Create a new touch indicator action and connect it.
  111. // chart: dojox.charting.Chart
  112. // The chart this action applies to.
  113. // kwArgs: dojox.charting.action2d.__TouchIndicatorCtorArgs?
  114. // Optional arguments for the chart action.
  115. this._listeners = [{eventName: "ontouchstart", methodName: "onTouchStart"},
  116. {eventName: "ontouchmove", methodName: "onTouchMove"},
  117. {eventName: "ontouchend", methodName: "onTouchEnd"},
  118. {eventName: "ontouchcancel", methodName: "onTouchEnd"}];
  119. this.opt = lang.clone(this.defaultParams);
  120. du.updateWithObject(this.opt, kwArgs);
  121. du.updateWithPattern(this.opt, kwArgs, this.optionalParams);
  122. this._uName = "touchIndicator"+this.opt.series;
  123. this.connect();
  124. },
  125. connect: function(){
  126. // summary:
  127. // Connect this action to the chart. This adds a indicator plot
  128. // to the chart that's why Chart.render() must be called after connect.
  129. this.inherited(arguments);
  130. // add plot with unique name
  131. this.chart.addPlot(this._uName, {type: IndicatorElement, inter: this});
  132. },
  133. disconnect: function(){
  134. // summary:
  135. // Disconnect this action from the chart.
  136. var plot = this.chart.getPlot(this._uName);
  137. if(plot.pageCoord){
  138. // we might still have something drawn on the screen
  139. this.onTouchEnd();
  140. }
  141. this.chart.removePlot(this._uName);
  142. this.inherited(arguments);
  143. },
  144. onTouchStart: function(event){
  145. // summary:
  146. // Called when touch is started on the chart.
  147. if(event.touches.length==1){
  148. this._onTouchSingle(event, true);
  149. }else if(this.opt.dualIndicator && event.touches.length==2){
  150. this._onTouchDual(event);
  151. }
  152. },
  153. onTouchMove: function(event){
  154. // summary:
  155. // Called when touch is moved on the chart.
  156. if(event.touches.length==1){
  157. this._onTouchSingle(event);
  158. }else if(this.opt.dualIndicator && event.touches.length==2){
  159. this._onTouchDual(event);
  160. }
  161. },
  162. _onTouchSingle: function(event, delayed){
  163. // sync
  164. if(this.chart._delayedRenderHandle && !delayed){
  165. // we have pending rendering from a previous call, let's sync
  166. clearTimeout(this.chart._delayedRenderHandle);
  167. this.chart._delayedRenderHandle = null;
  168. this.chart.render();
  169. }
  170. var plot = this.chart.getPlot(this._uName);
  171. plot.pageCoord = {x: event.touches[0].pageX, y: event.touches[0].pageY};
  172. plot.dirty = true;
  173. if(delayed){
  174. this.chart.delayedRender();
  175. }else{
  176. this.chart.render();
  177. }
  178. eventUtil.stop(event);
  179. },
  180. _onTouchDual: function(event){
  181. var plot = this.chart.getPlot(this._uName);
  182. plot.pageCoord = {x: event.touches[0].pageX, y: event.touches[0].pageY};
  183. plot.secondCoord = {x: event.touches[1].pageX, y: event.touches[1].pageY};
  184. plot.dirty = true;
  185. this.chart.render();
  186. eventUtil.stop(event);
  187. },
  188. onTouchEnd: function(event){
  189. // summary:
  190. // Called when touch is ended or canceled on the chart.
  191. var plot = this.chart.getPlot(this._uName);
  192. plot.stopTrack();
  193. plot.pageCoord = null;
  194. plot.secondCoord = null;
  195. plot.dirty = true;
  196. this.chart.delayedRender();
  197. }
  198. });
  199. });