move root event rendering into ChronoComponent

src/agenda/AgendaView.js

@@ -298,31 +298,8 @@ var AgendaView = FC.AgendaView = View.extend({
 	------------------------------------------------------------------------------------------------------------------*/
 
 
-	// Renders events onto the view and populates the View's segment array
 	renderEventsPayload: function(eventsPayload) {
-		var dayEventsPayload = {};
-		var timedEventsPayload = {};
-		var daySegs = [];
-		var timedSegs;
-		var id, eventInstanceGroup;
-
-		// separate the events into all-day and timed
-		for (id in eventsPayload) {
-			eventInstanceGroup = eventsPayload[id];
-
-			if (eventInstanceGroup.getEventDef().isAllDay()) {
-				dayEventsPayload[id] = eventInstanceGroup;
-			}
-			else {
-				timedEventsPayload[id] = eventInstanceGroup;
-			}
-		}
-
-		// render the events in the subcomponents
-		timedSegs = this.timeGrid.renderEventsPayload(timedEventsPayload);
-		if (this.dayGrid) {
-			daySegs = this.dayGrid.renderEventsPayload(dayEventsPayload);
-		}
+		ChronoComponent.prototype.renderEventsPayload.apply(this, arguments);
 
 		// the all-day area is flexible and might have a lot of events, so shift the height
 		// TODO: how will ChronoComponent handle this?
@@ -330,6 +307,28 @@ var AgendaView = FC.AgendaView = View.extend({
 	},
 
 
+	renderFgEventFootprints: function(eventFootprints) {
+		var res = sortEventFootprintsByAllDay(eventFootprints);
+
+		this.timeGrid.renderFgEventFootprints(res.timed);
+
+		if (this.dayGrid) {
+			this.dayGrid.renderFgEventFootprints(res.allDay);
+		}
+	},
+
+
+	renderBgEventFootprints: function(eventFootprints) {
+		var res = sortEventFootprintsByAllDay(eventFootprints);
+
+		this.timeGrid.renderBgEventFootprints(res.timed);
+
+		if (this.dayGrid) {
+			this.dayGrid.renderBgEventFootprints(res.allDay);
+		}
+	},
+
+
 	/* Dragging (for events and external elements)
 	------------------------------------------------------------------------------------------------------------------*/
 
@@ -437,3 +436,22 @@ var agendaDayGridMethods = {
 	}
 
 };
+
+
+function sortEventFootprintsByAllDay(eventFootprints) {
+	var allDay = [];
+	var timed = [];
+	var i;
+
+	for (i = 0; i < eventFootprints.length; i++) {
+
+		if (eventFootprints[i].componentFootprint.isAllDay) {
+			allDay.push(eventFootprints[i]);
+		}
+		else {
+			timed.push(eventFootprints[i]);
+		}
+	}
+
+	return { allDay: allDay, timed: timed };
+}

src/basic/BasicView.js

@@ -258,7 +258,7 @@ var BasicView = FC.BasicView = View.extend({
 
 	// Renders the given events onto the view and populates the segments array
 	renderEventsPayload: function(eventsPayload) {
-		this.dayGrid.renderEventsPayload(eventsPayload);
+		ChronoComponent.prototype.renderEventsPayload.apply(this, arguments);
 
 		// must compensate for events that overflow the row
 		// TODO: how will ChronoComponent handle this?

src/common/DayGrid.js

@@ -316,15 +316,14 @@ var DayGrid = FC.DayGrid = ChronoComponent.extend(CoordChronoComponentMixin, Seg
 	------------------------------------------------------------------------------------------------------------------*/
 
 
-	// Renders the given background event segments onto the grid
-	renderBgSegs: function(segs) {
+	renderBgEventFootprints: function(eventFootprints) {
 
 		// don't render timed background events
-		var allDaySegs = $.grep(segs, function(seg) {
-			return seg.footprint.componentFootprint.isAllDay;
+		var allDayEventFootprints = $.grep(eventFootprints, function(eventFootprint) {
+			return eventFootprint.componentFootprint.isAllDay;
 		});
 
-		return SegChronoComponentMixin.renderBgSegs.call(this, allDaySegs); // call the super-method
+		return SegChronoComponentMixin.renderBgEventFootprints.call(this, allDayEventFootprints);
 	},
 
 
@@ -332,7 +331,7 @@ var DayGrid = FC.DayGrid = ChronoComponent.extend(CoordChronoComponentMixin, Seg
 	unrenderEvents: function() {
 		this.removeSegPopover(); // removes the "more.." events popover
 
-		SegChronoComponentMixin.unrenderEvents.apply(this, arguments);
+		ChronoComponent.prototype.unrenderEvents.apply(this, arguments);
 	},
 
 

src/common/TimeGrid.js

@@ -35,8 +35,6 @@ var TimeGrid = FC.TimeGrid = ChronoComponent.extend(CoordChronoComponentMixin, S
 	businessContainerEls: null,
 
 	// arrays of different types of displayed segments
-	fgSegs: null,
-	bgSegs: null,
 	helperSegs: null,
 	highlightSegs: null,
 	businessSegs: null,
@@ -586,25 +584,16 @@ var TimeGrid = FC.TimeGrid = ChronoComponent.extend(CoordChronoComponentMixin, S
 
 	/* Event Rendering
 	------------------------------------------------------------------------------------------------------------------*/
+	// fg event rendering happens in TimeGridEventRenderer
 
 
-	renderFgSegs: function(segs) {
-		segs = this.eventRenderer.renderFgSegsIntoContainers(segs, this.fgContainerEls);
-
-		this.fgSegs = segs;
-
-		return segs; // needed for Grid::renderEvents
-	},
-
-
-	renderBgSegs: function(segs) {
+	renderBgEventSegs: function(segs) {
 		segs = this.fillSystem.buildSegEls('bgEvent', segs);
 
 		this.updateSegVerticals(segs);
 		this.attachSegsByCol(this.groupSegsByCol(segs), this.bgContainerEls);
-		this.bgSegs = segs;
 
-		return segs; // needed for Grid::renderEvents
+		return segs;
 	},
 
 

src/common/TimeGridEventRenderer.js

@@ -15,6 +15,11 @@ var TimeGridEventRenderer = EventRenderer.extend({
 	},
 
 
+	renderFgSegs: function(segs) {
+		return this.renderFgSegsIntoContainers(segs, this.timeGrid.fgContainerEls);
+	},
+
+
 	// Given an array of foreground segments, render a DOM element for each, computes position,
 	// and attaches to the column inner-container elements.
 	renderFgSegsIntoContainers: function(segs, containerEls) {

src/common/View.js

@@ -59,6 +59,11 @@ var View = FC.View = ChronoComponent.extend({
 	},
 
 
+	_getView: function() {
+		return this;
+	},
+
+
 	buildRenderQueue: function() {
 		var _this = this;
 		var renderQueue = new RenderQueue({

src/component/ChronoComponent.js

@@ -153,26 +153,70 @@ var ChronoComponent = Model.extend({
 	},
 
 
-	// Event Low-level Rendering
+	// Event Rendering
 	// -----------------------------------------------------------------------------------------------------------------
 
 
-	// Renders the events onto the view.
 	// TODO: eventually rename to `renderEvents` once legacy is gone.
 	renderEventsPayload: function(eventsPayload) {
-		this.callChildren('renderEventsPayload', eventsPayload);
+		var view = this._getView();
+		var id, eventInstanceGroup;
+		var eventRenderRanges;
+		var eventFootprints;
+		var bgFootprints = [];
+		var fgFootprints = [];
+
+		for (id in eventsPayload) {
+			eventInstanceGroup = eventsPayload[id];
+			eventRenderRanges = eventInstanceGroup.sliceRenderRanges(view.activeUnzonedRange);
+			eventFootprints = this.eventRangesToEventFootprints(eventRenderRanges);
+
+			if (eventInstanceGroup.getEventDef().hasBgRendering()) {
+				bgFootprints.push.apply(bgFootprints, eventFootprints);
+			}
+			else {
+				fgFootprints.push.apply(fgFootprints, eventFootprints);
+			}
+		}
+
+		this.renderBgEventFootprints(bgFootprints);
+		this.renderFgEventFootprints(fgFootprints);
 	},
 
 
-	// Removes event elements from the view.
+	// Unrenders all events currently rendered on the grid
 	unrenderEvents: function() {
-		this.callChildren('unrenderEvents');
+
+		this.unrenderFgEventFootprints();
+		this.unrenderBgEventFootprints();
 
 		// we DON'T need to call updateHeight() because
 		// a renderEventsPayload() call always happens after this, which will eventually call updateHeight()
 	},
 
 
+	renderFgEventFootprints: function(segs) {
+		this.callChildren('renderFgEventFootprints', segs);
+	},
+
+
+	renderBgEventFootprints: function(segs) {
+		this.callChildren('renderBgEventFootprints', segs);
+	},
+
+
+	// Removes event elements from the view.
+	unrenderFgEventFootprints: function() {
+		this.callChildren('unrenderFgEventFootprints');
+	},
+
+
+	// Removes event elements from the view.
+	unrenderBgEventFootprints: function() {
+		this.callChildren('unrenderBgEventFootprints');
+	},
+
+
 	// Retrieves all segment objects that are rendered in the view
 	getEventSegs: function() {
 		var children = this.children;

src/component/SegChronoComponentMixin.js

@@ -3,8 +3,6 @@
 Caller must:
 - call initSegChronoComponent
 - implement componentFootprintToSegs
-- implement renderFgSegs
-- implement unrenderFgSegs
 
 This mixin can depend on ChronoComponent:
 - opt
@@ -17,11 +15,13 @@ var SegChronoComponentMixin = {
 	eventRendererClass: EventRenderer,
 	businessHourRendererClass: null,
 
-	segs: null, // the *event* segments currently rendered in the grid. TODO: rename to `eventSegs`
 	eventRenderer: null,
 	businessHourRenderer: null,
 	fillSystem: null,
 
+	bgSegs: null,
+	fgSegs: null,
+
 
 	initSegChronoComponent: function() {
 		this.eventRenderer = new this.eventRendererClass(this);
@@ -34,94 +34,66 @@ var SegChronoComponentMixin = {
 	},
 
 
-	renderEventsPayload: function(eventsPayload) {
-		var view = this._getView();
-		var id, eventInstanceGroup;
-		var eventRenderRanges;
-		var eventFootprints;
-		var eventSegs;
-		var bgSegs = [];
-		var fgSegs = [];
+	// Event Rendering
+	// ---------------------------------------------------------------------------------------------------------------
 
-		for (id in eventsPayload) {
-			eventInstanceGroup = eventsPayload[id];
 
-			eventRenderRanges = eventInstanceGroup.sliceRenderRanges(view.activeUnzonedRange);
-			eventFootprints = this.eventRangesToEventFootprints(eventRenderRanges);
-			eventSegs = this.eventFootprintsToSegs(eventFootprints);
+	renderFgEventFootprints: function(eventFootprints) {
+		var segs = this.eventFootprintsToSegs(eventFootprints);
 
-			if (eventInstanceGroup.getEventDef().hasBgRendering()) {
-				bgSegs.push.apply(bgSegs, // append
-					eventSegs
-				);
-			}
-			else {
-				fgSegs.push.apply(fgSegs, // append
-					eventSegs
-				);
-			}
-		}
-
-		this.segs = [].concat( // record all segs
-			this.renderBgSegs(bgSegs) || bgSegs,
-			this.renderFgSegs(fgSegs) || fgSegs
-		);
+		this.fgSegs = this.renderFgEventSegs(segs) || segs;
 	},
 
 
-	// Unrenders all events currently rendered on the grid
-	unrenderEvents: function() {
-
-		// ensure a mouseout on the manipulated event has been reported
-		// TODO: okay to call this?
-		this.eventPointing.handleMouseout();
+	renderBgEventFootprints: function(eventFootprints) {
+		var segs = this.eventFootprintsToSegs(eventFootprints);
 
-		this.unrenderFgSegs();
-		this.unrenderBgSegs();
-
-		this.segs = null;
+		this.bgSegs = this.renderBgEventSegs(segs) || segs;
 	},
 
 
-	// Retrieves all rendered segment objects currently rendered on the grid
-	getEventSegs: function() {
-		return this.segs || [];
+	unrenderFgEventFootprints: function() {
+		this.unrenderFgEventSegs();
+		this.fgSegs = null;
 	},
 
 
-	// Foreground Segment Rendering
-	// ---------------------------------------------------------------------------------------------------------------
+	unrenderBgEventFootprints: function() {
+		this.unrenderBgEventSegs();
+		this.bgSegs = null;
+	},
 
 
 	// Renders foreground event segments onto the grid. May return a subset of segs that were rendered.
-	renderFgSegs: function(segs) {
+	renderFgEventSegs: function(segs) {
 		return this.eventRenderer.renderFgSegs(segs);
 	},
 
 
 	// Unrenders all currently rendered foreground segments
-	unrenderFgSegs: function() {
+	unrenderFgEventSegs: function() {
 		this.eventRenderer.unrenderFgSegs();
 	},
 
 
-	/* Background Segment Rendering
-	------------------------------------------------------------------------------------------------------------------*/
-
-
 	// Renders the given background event segments onto the grid.
 	// Returns a subset of the segs that were actually rendered.
-	renderBgSegs: function(segs) {
+	renderBgEventSegs: function(segs) {
 		return this.fillSystem.render('bgEvent', segs);
 	},
 
 
 	// Unrenders all the currently rendered background event segments
-	unrenderBgSegs: function() {
+	unrenderBgEventSegs: function() {
 		this.fillSystem.unrender('bgEvent');
 	},
 
 
+	getEventSegs: function() {
+		return (this.bgSegs || []).concat(this.fgSegs || []);
+	},
+
+
 	/* Business Hours
 	------------------------------------------------------------------------------------------------------------------*/
 

src/component/interaction/EventPointing.js

@@ -56,8 +56,6 @@ var EventPointing = Interaction.extend({
 	// Can be given no arguments, in which case it will mouseout the segment that was previously moused over.
 	handleMouseout: function(seg, ev) {
 		if (this.mousedOverSeg) {
-
-			seg = seg || this.mousedOverSeg; // if given no args, use the currently moused-over segment
 			this.mousedOverSeg = null;
 
 			// TODO: move to EventSelecting's responsibility
@@ -74,6 +72,13 @@ var EventPointing = Interaction.extend({
 				]
 			});
 		}
+	},
+
+
+	end: function() {
+		if (this.mousedOverSeg) {
+			this.handleMouseout(this.mousedOverSeg);
+		}
 	}
 
 });

src/list/ListView.js

@@ -26,11 +26,6 @@ var ListView = View.extend(CoordChronoComponentMixin, SegChronoComponentMixin, {
 	},
 
 
-	_getView: function() {
-		return this;
-	},
-
-
 	renderSkeleton: function() {
 		this.el.addClass(
 			'fc-list-view ' +
@@ -230,7 +225,7 @@ var ListView = View.extend(CoordChronoComponentMixin, SegChronoComponentMixin, {
 
 
 	// returns list of foreground segs that were actually rendered
-	renderFgSegs: function(segs) {
+	renderFgEventSegs: function(segs) {
 		segs = this.eventRenderer.renderFgSegEls(segs); // might filter away hidden events
 
 		if (!segs.length) {