?? overview-painter.js
字號:
/*==================================================
* Overview Event Painter
*==================================================
*/
Timeline.OverviewEventPainter = function(params) {
this._params = params;
this._onSelectListeners = [];
this._filterMatcher = null;
this._highlightMatcher = null;
};
Timeline.OverviewEventPainter.prototype.initialize = function(band, timeline) {
this._band = band;
this._timeline = timeline;
this._eventLayer = null;
this._highlightLayer = null;
};
Timeline.OverviewEventPainter.prototype.getType = function() {
return 'overview';
};
Timeline.OverviewEventPainter.prototype.addOnSelectListener = function(listener) {
this._onSelectListeners.push(listener);
};
Timeline.OverviewEventPainter.prototype.removeOnSelectListener = function(listener) {
for (var i = 0; i < this._onSelectListeners.length; i++) {
if (this._onSelectListeners[i] == listener) {
this._onSelectListeners.splice(i, 1);
break;
}
}
};
Timeline.OverviewEventPainter.prototype.getFilterMatcher = function() {
return this._filterMatcher;
};
Timeline.OverviewEventPainter.prototype.setFilterMatcher = function(filterMatcher) {
this._filterMatcher = filterMatcher;
};
Timeline.OverviewEventPainter.prototype.getHighlightMatcher = function() {
return this._highlightMatcher;
};
Timeline.OverviewEventPainter.prototype.setHighlightMatcher = function(highlightMatcher) {
this._highlightMatcher = highlightMatcher;
};
Timeline.OverviewEventPainter.prototype.paint = function() {
var eventSource = this._band.getEventSource();
if (eventSource == null) {
return;
}
this._prepareForPainting();
var eventTheme = this._params.theme.event;
var metrics = {
trackOffset: eventTheme.overviewTrack.offset,
trackHeight: eventTheme.overviewTrack.height,
trackGap: eventTheme.overviewTrack.gap,
trackIncrement: eventTheme.overviewTrack.height + eventTheme.overviewTrack.gap
}
var minDate = this._band.getMinDate();
var maxDate = this._band.getMaxDate();
var filterMatcher = (this._filterMatcher != null) ?
this._filterMatcher :
function(evt) { return true; };
var highlightMatcher = (this._highlightMatcher != null) ?
this._highlightMatcher :
function(evt) { return -1; };
var iterator = eventSource.getEventReverseIterator(minDate, maxDate);
while (iterator.hasNext()) {
var evt = iterator.next();
if (filterMatcher(evt)) {
this.paintEvent(evt, metrics, this._params.theme, highlightMatcher(evt));
}
}
this._highlightLayer.style.display = "block";
this._eventLayer.style.display = "block";
// update the band object for max number of tracks in this section of the ether
this._band.updateEventTrackInfo(this._tracks.length, metrics.trackIncrement);
};
Timeline.OverviewEventPainter.prototype.softPaint = function() {
};
Timeline.OverviewEventPainter.prototype._prepareForPainting = function() {
var band = this._band;
this._tracks = [];
if (this._highlightLayer != null) {
band.removeLayerDiv(this._highlightLayer);
}
this._highlightLayer = band.createLayerDiv(105, "timeline-band-highlights");
this._highlightLayer.style.display = "none";
if (this._eventLayer != null) {
band.removeLayerDiv(this._eventLayer);
}
this._eventLayer = band.createLayerDiv(110, "timeline-band-events");
this._eventLayer.style.display = "none";
};
Timeline.OverviewEventPainter.prototype.paintEvent = function(evt, metrics, theme, highlightIndex) {
if (evt.isInstant()) {
this.paintInstantEvent(evt, metrics, theme, highlightIndex);
} else {
this.paintDurationEvent(evt, metrics, theme, highlightIndex);
}
};
Timeline.OverviewEventPainter.prototype.paintInstantEvent = function(evt, metrics, theme, highlightIndex) {
var startDate = evt.getStart();
var startPixel = Math.round(this._band.dateToPixelOffset(startDate));
var color = evt.getColor(),
klassName = evt.getClassName();
if (klassName) {
color = null;
} else {
color = color != null ? color : theme.event.duration.color;
}
var tickElmtData = this._paintEventTick(evt, startPixel, color, 100, metrics, theme);
this._createHighlightDiv(highlightIndex, tickElmtData, theme);
};
Timeline.OverviewEventPainter.prototype.paintDurationEvent = function(evt, metrics, theme, highlightIndex) {
var latestStartDate = evt.getLatestStart();
var earliestEndDate = evt.getEarliestEnd();
var latestStartPixel = Math.round(this._band.dateToPixelOffset(latestStartDate));
var earliestEndPixel = Math.round(this._band.dateToPixelOffset(earliestEndDate));
var tapeTrack = 0;
for (; tapeTrack < this._tracks.length; tapeTrack++) {
if (earliestEndPixel < this._tracks[tapeTrack]) {
break;
}
}
this._tracks[tapeTrack] = earliestEndPixel;
var color = evt.getColor(),
klassName = evt.getClassName();
if (klassName) {
color = null;
} else {
color = color != null ? color : theme.event.duration.color;
}
var tapeElmtData = this._paintEventTape(evt, tapeTrack, latestStartPixel, earliestEndPixel,
color, 100, metrics, theme, klassName);
this._createHighlightDiv(highlightIndex, tapeElmtData, theme);
};
Timeline.OverviewEventPainter.prototype._paintEventTape = function(
evt, track, left, right, color, opacity, metrics, theme, klassName) {
var top = metrics.trackOffset + track * metrics.trackIncrement;
var width = right - left;
var height = metrics.trackHeight;
var tapeDiv = this._timeline.getDocument().createElement("div");
tapeDiv.className = 'timeline-small-event-tape'
if (klassName) {tapeDiv.className += ' small-' + klassName;}
tapeDiv.style.left = left + "px";
tapeDiv.style.width = width + "px";
tapeDiv.style.top = top + "px";
tapeDiv.style.height = height + "px";
if (color) {
tapeDiv.style.backgroundColor = color; // set color here if defined by event. Else use css
}
// tapeDiv.style.overflow = "hidden"; // now set in css
// tapeDiv.style.position = "absolute";
if(opacity<100) SimileAjax.Graphics.setOpacity(tapeDiv, opacity);
this._eventLayer.appendChild(tapeDiv);
return {
left: left,
top: top,
width: width,
height: height,
elmt: tapeDiv
};
}
Timeline.OverviewEventPainter.prototype._paintEventTick = function(
evt, left, color, opacity, metrics, theme) {
var height = theme.event.overviewTrack.tickHeight;
var top = metrics.trackOffset - height;
var width = 1;
var tickDiv = this._timeline.getDocument().createElement("div");
tickDiv.className = 'timeline-small-event-icon'
tickDiv.style.left = left + "px";
tickDiv.style.top = top + "px";
// tickDiv.style.width = width + "px";
// tickDiv.style.position = "absolute";
// tickDiv.style.height = height + "px";
// tickDiv.style.backgroundColor = color;
// tickDiv.style.overflow = "hidden";
var klassName = evt.getClassName()
if (klassName) {tickDiv.className +=' small-' + klassName};
if(opacity<100) {SimileAjax.Graphics.setOpacity(tickDiv, opacity)};
this._eventLayer.appendChild(tickDiv);
return {
left: left,
top: top,
width: width,
height: height,
elmt: tickDiv
};
}
Timeline.OverviewEventPainter.prototype._createHighlightDiv = function(highlightIndex, dimensions, theme) {
if (highlightIndex >= 0) {
var doc = this._timeline.getDocument();
var eventTheme = theme.event;
var color = eventTheme.highlightColors[Math.min(highlightIndex, eventTheme.highlightColors.length - 1)];
var div = doc.createElement("div");
div.style.position = "absolute";
div.style.overflow = "hidden";
div.style.left = (dimensions.left - 1) + "px";
div.style.width = (dimensions.width + 2) + "px";
div.style.top = (dimensions.top - 1) + "px";
div.style.height = (dimensions.height + 2) + "px";
div.style.background = color;
this._highlightLayer.appendChild(div);
}
};
Timeline.OverviewEventPainter.prototype.showBubble = function(evt) {
// not implemented
};
?? 快捷鍵說明
復制代碼
Ctrl + C
搜索代碼
Ctrl + F
全屏模式
F11
切換主題
Ctrl + Shift + D
顯示快捷鍵
?
增大字號
Ctrl + =
減小字號
Ctrl + -