PageRenderTime 29ms CodeModel.GetById 10ms RepoModel.GetById 0ms app.codeStats 0ms

/timeline/scripts/overview-painter.js

http://showslow.googlecode.com/
JavaScript | 258 lines | 193 code | 52 blank | 13 comment | 29 complexity | 5053df6c08fa6498a3228e4158f4e1ca MD5 | raw file
  1. /*==================================================
  2. * Overview Event Painter
  3. *==================================================
  4. */
  5. Timeline.OverviewEventPainter = function(params) {
  6. this._params = params;
  7. this._onSelectListeners = [];
  8. this._filterMatcher = null;
  9. this._highlightMatcher = null;
  10. };
  11. Timeline.OverviewEventPainter.prototype.initialize = function(band, timeline) {
  12. this._band = band;
  13. this._timeline = timeline;
  14. this._eventLayer = null;
  15. this._highlightLayer = null;
  16. };
  17. Timeline.OverviewEventPainter.prototype.getType = function() {
  18. return 'overview';
  19. };
  20. Timeline.OverviewEventPainter.prototype.addOnSelectListener = function(listener) {
  21. this._onSelectListeners.push(listener);
  22. };
  23. Timeline.OverviewEventPainter.prototype.removeOnSelectListener = function(listener) {
  24. for (var i = 0; i < this._onSelectListeners.length; i++) {
  25. if (this._onSelectListeners[i] == listener) {
  26. this._onSelectListeners.splice(i, 1);
  27. break;
  28. }
  29. }
  30. };
  31. Timeline.OverviewEventPainter.prototype.getFilterMatcher = function() {
  32. return this._filterMatcher;
  33. };
  34. Timeline.OverviewEventPainter.prototype.setFilterMatcher = function(filterMatcher) {
  35. this._filterMatcher = filterMatcher;
  36. };
  37. Timeline.OverviewEventPainter.prototype.getHighlightMatcher = function() {
  38. return this._highlightMatcher;
  39. };
  40. Timeline.OverviewEventPainter.prototype.setHighlightMatcher = function(highlightMatcher) {
  41. this._highlightMatcher = highlightMatcher;
  42. };
  43. Timeline.OverviewEventPainter.prototype.paint = function() {
  44. var eventSource = this._band.getEventSource();
  45. if (eventSource == null) {
  46. return;
  47. }
  48. this._prepareForPainting();
  49. var eventTheme = this._params.theme.event;
  50. var metrics = {
  51. trackOffset: eventTheme.overviewTrack.offset,
  52. trackHeight: eventTheme.overviewTrack.height,
  53. trackGap: eventTheme.overviewTrack.gap,
  54. trackIncrement: eventTheme.overviewTrack.height + eventTheme.overviewTrack.gap
  55. }
  56. var minDate = this._band.getMinDate();
  57. var maxDate = this._band.getMaxDate();
  58. var filterMatcher = (this._filterMatcher != null) ?
  59. this._filterMatcher :
  60. function(evt) { return true; };
  61. var highlightMatcher = (this._highlightMatcher != null) ?
  62. this._highlightMatcher :
  63. function(evt) { return -1; };
  64. var iterator = eventSource.getEventReverseIterator(minDate, maxDate);
  65. while (iterator.hasNext()) {
  66. var evt = iterator.next();
  67. if (filterMatcher(evt)) {
  68. this.paintEvent(evt, metrics, this._params.theme, highlightMatcher(evt));
  69. }
  70. }
  71. this._highlightLayer.style.display = "block";
  72. this._eventLayer.style.display = "block";
  73. // update the band object for max number of tracks in this section of the ether
  74. this._band.updateEventTrackInfo(this._tracks.length, metrics.trackIncrement);
  75. };
  76. Timeline.OverviewEventPainter.prototype.softPaint = function() {
  77. };
  78. Timeline.OverviewEventPainter.prototype._prepareForPainting = function() {
  79. var band = this._band;
  80. this._tracks = [];
  81. if (this._highlightLayer != null) {
  82. band.removeLayerDiv(this._highlightLayer);
  83. }
  84. this._highlightLayer = band.createLayerDiv(105, "timeline-band-highlights");
  85. this._highlightLayer.style.display = "none";
  86. if (this._eventLayer != null) {
  87. band.removeLayerDiv(this._eventLayer);
  88. }
  89. this._eventLayer = band.createLayerDiv(110, "timeline-band-events");
  90. this._eventLayer.style.display = "none";
  91. };
  92. Timeline.OverviewEventPainter.prototype.paintEvent = function(evt, metrics, theme, highlightIndex) {
  93. if (evt.isInstant()) {
  94. this.paintInstantEvent(evt, metrics, theme, highlightIndex);
  95. } else {
  96. this.paintDurationEvent(evt, metrics, theme, highlightIndex);
  97. }
  98. };
  99. Timeline.OverviewEventPainter.prototype.paintInstantEvent = function(evt, metrics, theme, highlightIndex) {
  100. var startDate = evt.getStart();
  101. var startPixel = Math.round(this._band.dateToPixelOffset(startDate));
  102. var color = evt.getColor(),
  103. klassName = evt.getClassName();
  104. if (klassName) {
  105. color = null;
  106. } else {
  107. color = color != null ? color : theme.event.duration.color;
  108. }
  109. var tickElmtData = this._paintEventTick(evt, startPixel, color, 100, metrics, theme);
  110. this._createHighlightDiv(highlightIndex, tickElmtData, theme);
  111. };
  112. Timeline.OverviewEventPainter.prototype.paintDurationEvent = function(evt, metrics, theme, highlightIndex) {
  113. var latestStartDate = evt.getLatestStart();
  114. var earliestEndDate = evt.getEarliestEnd();
  115. var latestStartPixel = Math.round(this._band.dateToPixelOffset(latestStartDate));
  116. var earliestEndPixel = Math.round(this._band.dateToPixelOffset(earliestEndDate));
  117. var tapeTrack = 0;
  118. for (; tapeTrack < this._tracks.length; tapeTrack++) {
  119. if (earliestEndPixel < this._tracks[tapeTrack]) {
  120. break;
  121. }
  122. }
  123. this._tracks[tapeTrack] = earliestEndPixel;
  124. var color = evt.getColor(),
  125. klassName = evt.getClassName();
  126. if (klassName) {
  127. color = null;
  128. } else {
  129. color = color != null ? color : theme.event.duration.color;
  130. }
  131. var tapeElmtData = this._paintEventTape(evt, tapeTrack, latestStartPixel, earliestEndPixel,
  132. color, 100, metrics, theme, klassName);
  133. this._createHighlightDiv(highlightIndex, tapeElmtData, theme);
  134. };
  135. Timeline.OverviewEventPainter.prototype._paintEventTape = function(
  136. evt, track, left, right, color, opacity, metrics, theme, klassName) {
  137. var top = metrics.trackOffset + track * metrics.trackIncrement;
  138. var width = right - left;
  139. var height = metrics.trackHeight;
  140. var tapeDiv = this._timeline.getDocument().createElement("div");
  141. tapeDiv.className = 'timeline-small-event-tape'
  142. if (klassName) {tapeDiv.className += ' small-' + klassName;}
  143. tapeDiv.style.left = left + "px";
  144. tapeDiv.style.width = width + "px";
  145. tapeDiv.style.top = top + "px";
  146. tapeDiv.style.height = height + "px";
  147. if (color) {
  148. tapeDiv.style.backgroundColor = color; // set color here if defined by event. Else use css
  149. }
  150. // tapeDiv.style.overflow = "hidden"; // now set in css
  151. // tapeDiv.style.position = "absolute";
  152. if(opacity<100) SimileAjax.Graphics.setOpacity(tapeDiv, opacity);
  153. this._eventLayer.appendChild(tapeDiv);
  154. return {
  155. left: left,
  156. top: top,
  157. width: width,
  158. height: height,
  159. elmt: tapeDiv
  160. };
  161. }
  162. Timeline.OverviewEventPainter.prototype._paintEventTick = function(
  163. evt, left, color, opacity, metrics, theme) {
  164. var height = theme.event.overviewTrack.tickHeight;
  165. var top = metrics.trackOffset - height;
  166. var width = 1;
  167. var tickDiv = this._timeline.getDocument().createElement("div");
  168. tickDiv.className = 'timeline-small-event-icon'
  169. tickDiv.style.left = left + "px";
  170. tickDiv.style.top = top + "px";
  171. // tickDiv.style.width = width + "px";
  172. // tickDiv.style.position = "absolute";
  173. // tickDiv.style.height = height + "px";
  174. // tickDiv.style.backgroundColor = color;
  175. // tickDiv.style.overflow = "hidden";
  176. var klassName = evt.getClassName()
  177. if (klassName) {tickDiv.className +=' small-' + klassName};
  178. if(opacity<100) {SimileAjax.Graphics.setOpacity(tickDiv, opacity)};
  179. this._eventLayer.appendChild(tickDiv);
  180. return {
  181. left: left,
  182. top: top,
  183. width: width,
  184. height: height,
  185. elmt: tickDiv
  186. };
  187. }
  188. Timeline.OverviewEventPainter.prototype._createHighlightDiv = function(highlightIndex, dimensions, theme) {
  189. if (highlightIndex >= 0) {
  190. var doc = this._timeline.getDocument();
  191. var eventTheme = theme.event;
  192. var color = eventTheme.highlightColors[Math.min(highlightIndex, eventTheme.highlightColors.length - 1)];
  193. var div = doc.createElement("div");
  194. div.style.position = "absolute";
  195. div.style.overflow = "hidden";
  196. div.style.left = (dimensions.left - 1) + "px";
  197. div.style.width = (dimensions.width + 2) + "px";
  198. div.style.top = (dimensions.top - 1) + "px";
  199. div.style.height = (dimensions.height + 2) + "px";
  200. div.style.background = color;
  201. this._highlightLayer.appendChild(div);
  202. }
  203. };
  204. Timeline.OverviewEventPainter.prototype.showBubble = function(evt) {
  205. // not implemented
  206. };