?? detailed-painter.js
字號:
/*==================================================
* Detailed Event Painter
*==================================================
*/
// Note: a number of features from original-painter
// are not yet implemented in detailed painter.
// Eg classname, id attributes for icons, labels, tapes
Timeline.DetailedEventPainter = function(params) {
this._params = params;
this._onSelectListeners = [];
this._filterMatcher = null;
this._highlightMatcher = null;
this._frc = null;
this._eventIdToElmt = {};
};
Timeline.DetailedEventPainter.prototype.initialize = function(band, timeline) {
this._band = band;
this._timeline = timeline;
this._backLayer = null;
this._eventLayer = null;
this._lineLayer = null;
this._highlightLayer = null;
this._eventIdToElmt = null;
};
Timeline.DetailedEventPainter.prototype.getType = function() {
return 'detailed';
};
Timeline.DetailedEventPainter.prototype.addOnSelectListener = function(listener) {
this._onSelectListeners.push(listener);
};
Timeline.DetailedEventPainter.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.DetailedEventPainter.prototype.getFilterMatcher = function() {
return this._filterMatcher;
};
Timeline.DetailedEventPainter.prototype.setFilterMatcher = function(filterMatcher) {
this._filterMatcher = filterMatcher;
};
Timeline.DetailedEventPainter.prototype.getHighlightMatcher = function() {
return this._highlightMatcher;
};
Timeline.DetailedEventPainter.prototype.setHighlightMatcher = function(highlightMatcher) {
this._highlightMatcher = highlightMatcher;
};
Timeline.DetailedEventPainter.prototype.paint = function() {
var eventSource = this._band.getEventSource();
if (eventSource == null) {
return;
}
this._eventIdToElmt = {};
this._prepareForPainting();
var eventTheme = this._params.theme.event;
var trackHeight = Math.max(eventTheme.track.height, this._frc.getLineHeight());
var metrics = {
trackOffset: Math.round(this._band.getViewWidth() / 2 - trackHeight / 2),
trackHeight: trackHeight,
trackGap: eventTheme.track.gap,
trackIncrement: trackHeight + eventTheme.track.gap,
icon: eventTheme.instant.icon,
iconWidth: eventTheme.instant.iconWidth,
iconHeight: eventTheme.instant.iconHeight,
labelWidth: eventTheme.label.width
}
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._lineLayer.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._lowerTracks.length + this._upperTracks.length,
metrics.trackIncrement);
};
Timeline.DetailedEventPainter.prototype.softPaint = function() {
};
Timeline.DetailedEventPainter.prototype._prepareForPainting = function() {
var band = this._band;
if (this._backLayer == null) {
this._backLayer = this._band.createLayerDiv(0, "timeline-band-events");
this._backLayer.style.visibility = "hidden";
var eventLabelPrototype = document.createElement("span");
eventLabelPrototype.className = "timeline-event-label";
this._backLayer.appendChild(eventLabelPrototype);
this._frc = SimileAjax.Graphics.getFontRenderingContext(eventLabelPrototype);
}
this._frc.update();
this._lowerTracks = [];
this._upperTracks = [];
if (this._highlightLayer != null) {
band.removeLayerDiv(this._highlightLayer);
}
this._highlightLayer = band.createLayerDiv(105, "timeline-band-highlights");
this._highlightLayer.style.display = "none";
if (this._lineLayer != null) {
band.removeLayerDiv(this._lineLayer);
}
this._lineLayer = band.createLayerDiv(110, "timeline-band-lines");
this._lineLayer.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.DetailedEventPainter.prototype.paintEvent = function(evt, metrics, theme, highlightIndex) {
if (evt.isInstant()) {
this.paintInstantEvent(evt, metrics, theme, highlightIndex);
} else {
this.paintDurationEvent(evt, metrics, theme, highlightIndex);
}
};
Timeline.DetailedEventPainter.prototype.paintInstantEvent = function(evt, metrics, theme, highlightIndex) {
if (evt.isImprecise()) {
this.paintImpreciseInstantEvent(evt, metrics, theme, highlightIndex);
} else {
this.paintPreciseInstantEvent(evt, metrics, theme, highlightIndex);
}
}
Timeline.DetailedEventPainter.prototype.paintDurationEvent = function(evt, metrics, theme, highlightIndex) {
if (evt.isImprecise()) {
this.paintImpreciseDurationEvent(evt, metrics, theme, highlightIndex);
} else {
this.paintPreciseDurationEvent(evt, metrics, theme, highlightIndex);
}
}
Timeline.DetailedEventPainter.prototype.paintPreciseInstantEvent = function(evt, metrics, theme, highlightIndex) {
var doc = this._timeline.getDocument();
var text = evt.getText();
var startDate = evt.getStart();
var startPixel = Math.round(this._band.dateToPixelOffset(startDate));
var iconRightEdge = Math.round(startPixel + metrics.iconWidth / 2);
var iconLeftEdge = Math.round(startPixel - metrics.iconWidth / 2);
var labelSize = this._frc.computeSize(text);
var iconTrack = this._findFreeTrackForSolid(iconRightEdge, startPixel);
var iconElmtData = this._paintEventIcon(evt, iconTrack, iconLeftEdge, metrics, theme);
var labelLeft = iconRightEdge + theme.event.label.offsetFromLine;
var labelTrack = iconTrack;
var iconTrackData = this._getTrackData(iconTrack);
if (Math.min(iconTrackData.solid, iconTrackData.text) >= labelLeft + labelSize.width) { // label on the same track, to the right of icon
iconTrackData.solid = iconLeftEdge;
iconTrackData.text = labelLeft;
} else { // label on a different track, below icon
iconTrackData.solid = iconLeftEdge;
labelLeft = startPixel + theme.event.label.offsetFromLine;
labelTrack = this._findFreeTrackForText(iconTrack, labelLeft + labelSize.width, function(t) { t.line = startPixel - 2; });
this._getTrackData(labelTrack).text = iconLeftEdge;
this._paintEventLine(evt, startPixel, iconTrack, labelTrack, metrics, theme);
}
var labelTop = Math.round(
metrics.trackOffset + labelTrack * metrics.trackIncrement +
metrics.trackHeight / 2 - labelSize.height / 2);
var labelElmtData = this._paintEventLabel(evt, text, labelLeft, labelTop, labelSize.width, labelSize.height, theme);
var self = this;
var clickHandler = function(elmt, domEvt, target) {
return self._onClickInstantEvent(iconElmtData.elmt, domEvt, evt);
};
SimileAjax.DOM.registerEvent(iconElmtData.elmt, "mousedown", clickHandler);
SimileAjax.DOM.registerEvent(labelElmtData.elmt, "mousedown", clickHandler);
this._createHighlightDiv(highlightIndex, iconElmtData, theme);
this._eventIdToElmt[evt.getID()] = iconElmtData.elmt;
};
Timeline.DetailedEventPainter.prototype.paintImpreciseInstantEvent = function(evt, metrics, theme, highlightIndex) {
var doc = this._timeline.getDocument();
var text = evt.getText();
var startDate = evt.getStart();
var endDate = evt.getEnd();
var startPixel = Math.round(this._band.dateToPixelOffset(startDate));
var endPixel = Math.round(this._band.dateToPixelOffset(endDate));
var iconRightEdge = Math.round(startPixel + metrics.iconWidth / 2);
var iconLeftEdge = Math.round(startPixel - metrics.iconWidth / 2);
var labelSize = this._frc.computeSize(text);
var iconTrack = this._findFreeTrackForSolid(endPixel, startPixel);
var tapeElmtData = this._paintEventTape(evt, iconTrack, startPixel, endPixel,
theme.event.instant.impreciseColor, theme.event.instant.impreciseOpacity, metrics, theme);
var iconElmtData = this._paintEventIcon(evt, iconTrack, iconLeftEdge, metrics, theme);
var iconTrackData = this._getTrackData(iconTrack);
iconTrackData.solid = iconLeftEdge;
var labelLeft = iconRightEdge + theme.event.label.offsetFromLine;
var labelRight = labelLeft + labelSize.width;
var labelTrack;
if (labelRight < endPixel) {
labelTrack = iconTrack;
} else {
labelLeft = startPixel + theme.event.label.offsetFromLine;
labelRight = labelLeft + labelSize.width;
labelTrack = this._findFreeTrackForText(iconTrack, labelRight, function(t) { t.line = startPixel - 2; });
this._getTrackData(labelTrack).text = iconLeftEdge;
this._paintEventLine(evt, startPixel, iconTrack, labelTrack, metrics, theme);
}
var labelTop = Math.round(
metrics.trackOffset + labelTrack * metrics.trackIncrement +
metrics.trackHeight / 2 - labelSize.height / 2);
var labelElmtData = this._paintEventLabel(evt, text, labelLeft, labelTop, labelSize.width, labelSize.height, theme);
var self = this;
var clickHandler = function(elmt, domEvt, target) {
return self._onClickInstantEvent(iconElmtData.elmt, domEvt, evt);
};
SimileAjax.DOM.registerEvent(iconElmtData.elmt, "mousedown", clickHandler);
SimileAjax.DOM.registerEvent(tapeElmtData.elmt, "mousedown", clickHandler);
SimileAjax.DOM.registerEvent(labelElmtData.elmt, "mousedown", clickHandler);
this._createHighlightDiv(highlightIndex, iconElmtData, theme);
this._eventIdToElmt[evt.getID()] = iconElmtData.elmt;
};
Timeline.DetailedEventPainter.prototype.paintPreciseDurationEvent = function(evt, metrics, theme, highlightIndex) {
var doc = this._timeline.getDocument();
var text = evt.getText();
var startDate = evt.getStart();
var endDate = evt.getEnd();
var startPixel = Math.round(this._band.dateToPixelOffset(startDate));
var endPixel = Math.round(this._band.dateToPixelOffset(endDate));
var labelSize = this._frc.computeSize(text);
var tapeTrack = this._findFreeTrackForSolid(endPixel);
var color = evt.getColor();
color = color != null ? color : theme.event.duration.color;
var tapeElmtData = this._paintEventTape(evt, tapeTrack, startPixel, endPixel, color, 100, metrics, theme);
var tapeTrackData = this._getTrackData(tapeTrack);
tapeTrackData.solid = startPixel;
var labelLeft = startPixel + theme.event.label.offsetFromLine;
var labelTrack = this._findFreeTrackForText(tapeTrack, labelLeft + labelSize.width, function(t) { t.line = startPixel - 2; });
this._getTrackData(labelTrack).text = startPixel - 2;
this._paintEventLine(evt, startPixel, tapeTrack, labelTrack, metrics, theme);
var labelTop = Math.round(
metrics.trackOffset + labelTrack * metrics.trackIncrement +
metrics.trackHeight / 2 - labelSize.height / 2);
var labelElmtData = this._paintEventLabel(evt, text, labelLeft, labelTop, labelSize.width, labelSize.height, theme);
var self = this;
var clickHandler = function(elmt, domEvt, target) {
return self._onClickDurationEvent(tapeElmtData.elmt, domEvt, evt);
};
SimileAjax.DOM.registerEvent(tapeElmtData.elmt, "mousedown", clickHandler);
SimileAjax.DOM.registerEvent(labelElmtData.elmt, "mousedown", clickHandler);
this._createHighlightDiv(highlightIndex, tapeElmtData, theme);
this._eventIdToElmt[evt.getID()] = tapeElmtData.elmt;
};
Timeline.DetailedEventPainter.prototype.paintImpreciseDurationEvent = function(evt, metrics, theme, highlightIndex) {
var doc = this._timeline.getDocument();
var text = evt.getText();
var startDate = evt.getStart();
var latestStartDate = evt.getLatestStart();
var endDate = evt.getEnd();
var earliestEndDate = evt.getEarliestEnd();
var startPixel = Math.round(this._band.dateToPixelOffset(startDate));
var latestStartPixel = Math.round(this._band.dateToPixelOffset(latestStartDate));
var endPixel = Math.round(this._band.dateToPixelOffset(endDate));
var earliestEndPixel = Math.round(this._band.dateToPixelOffset(earliestEndDate));
var labelSize = this._frc.computeSize(text);
var tapeTrack = this._findFreeTrackForSolid(endPixel);
var color = evt.getColor();
color = color != null ? color : theme.event.duration.color;
var impreciseTapeElmtData = this._paintEventTape(evt, tapeTrack, startPixel, endPixel,
theme.event.duration.impreciseColor, theme.event.duration.impreciseOpacity, metrics, theme);
var tapeElmtData = this._paintEventTape(evt, tapeTrack, latestStartPixel, earliestEndPixel, color, 100, metrics, theme);
var tapeTrackData = this._getTrackData(tapeTrack);
tapeTrackData.solid = startPixel;
?? 快捷鍵說明
復(fù)制代碼
Ctrl + C
搜索代碼
Ctrl + F
全屏模式
F11
切換主題
Ctrl + Shift + D
顯示快捷鍵
?
增大字號
Ctrl + =
減小字號
Ctrl + -