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