start to wire up new eventrange flow

src/Calendar.ts

@@ -61,7 +61,6 @@ export default class Calendar {
   optionsManager: OptionsManager
   viewSpecManager: ViewSpecManager
   businessHourGenerator: BusinessHourGenerator
-  loadingLevel: number = 0 // number of simultaneous loading tasks
 
   defaultAllDayEventDuration: Duration
   defaultTimedEventDuration: Duration
@@ -155,13 +154,13 @@ export default class Calendar {
       this.isReducing = false
 
       if (oldState.eventStore !== newState.eventStore) {
-        this.view.renderEventStore(newState.eventStore)
+        this.view.set('eventStore', newState.eventStore)
       }
 
       if (!oldState.loadingLevel && newState.loadingLevel) {
-        console.log('start loading...')
+        this.publiclyTrigger('loading', [ true, this.view ])
       } else if (oldState.loadingLevel && !newState.loadingLevel) {
-        console.log('...stopped loading')
+        this.publiclyTrigger('loading', [ false, this.view ])
       }
     }
   }
@@ -368,26 +367,6 @@ export default class Calendar {
   }
 
 
-  // Loading Triggering
-  // -----------------------------------------------------------------------------------------------------------------
-
-
-  // Should be called when any type of async data fetching begins
-  pushLoading() {
-    if (!(this.loadingLevel++)) {
-      this.publiclyTrigger('loading', [ true, this.view ])
-    }
-  }
-
-
-  // Should be called when any type of async data fetching completes
-  popLoading() {
-    if (!(--this.loadingLevel)) {
-      this.publiclyTrigger('loading', [ false, this.view ])
-    }
-  }
-
-
   // High-level Rendering
   // -----------------------------------------------------------------------------------
 
@@ -546,6 +525,7 @@ export default class Calendar {
         this.currentDate = dateProfile.date // might have been constrained by view dates
         this.updateToolbarButtons(dateProfile)
 
+        view.unset('eventStore')
         this.dispatch({
           type: 'SET_ACTIVE_RANGE',
           range: dateProfile.activeUnzonedRange

src/View.ts

@@ -13,7 +13,7 @@ import { DateMarker, addDays, addMs, diffWholeDays } from './datelib/marker'
 import { createDuration } from './datelib/duration'
 import { createFormatter } from './datelib/formatting'
 import { EventStore } from './reducers/event-store'
-import { EventRenderSegment, sliceEventSegments } from './reducers/event-rendering'
+import { sliceEventRanges } from './reducers/event-rendering'
 
 
 /* An abstract class from which other views inherit from
@@ -369,9 +369,9 @@ export default abstract class View extends InteractiveDateComponent {
   // -----------------------------------------------------------------------------------------------------------------
 
 
-  requestEventsRender(eventsPayload) {
+  requestEventStoreRender(eventStore) {
     this.requestRender(() => {
-      this.executeEventRender(eventsPayload)
+      this.renderEventStore(eventStore)
       this.whenSizeUpdated(
         this.triggerAfterEventsRendered
       )
@@ -382,15 +382,15 @@ export default abstract class View extends InteractiveDateComponent {
   requestEventsUnrender() {
     this.requestRender(() => {
       this.triggerBeforeEventsDestroyed()
-      this.executeEventUnrender()
+      this.unrenderEvents()
     }, 'event', 'destroy')
   }
 
 
   renderEventStore(eventStore: EventStore) {
-    let dateProfile = this.get('dateProfile')
-    let segs = sliceEventSegments(eventStore.instances, eventStore, dateProfile.activeUnzonedRange)
-    this.renderEventSegs(segs)
+    let activeUnzonedRange = this.get('dateProfile').activeUnzonedRange
+    let eventRanges = sliceEventRanges(eventStore.instances, eventStore, activeUnzonedRange)
+    this.renderEventRanges(eventRanges)
   }
 
 
@@ -1044,24 +1044,10 @@ View.watch('displayingBusinessHours', [ 'displayingDates', 'businessHourGenerato
 })
 
 
-View.watch('initialEvents', [ 'dateProfile' ], function(deps, callback) {
-  this.fetchInitialEvents(deps.dateProfile, callback)
-}, null, true) // async=true
-
-
-View.watch('bindingEvents', [ 'initialEvents' ], function(deps) {
-  this.setEvents(deps.initialEvents)
-  this.bindEventChanges()
-}, function() {
-  this.unbindEventChanges()
-  this.unsetEvents()
-})
-
-
-View.watch('displayingEvents', [ 'displayingDates', 'hasEvents' ], function() {
-  this.requestEventsRender(this.get('currentEvents'))
+View.watch('displayingEvents', [ 'displayingDates', 'eventStore' ], function(deps) {
+  this.requestEventStoreRender(deps.eventStore)
 }, function() {
-  this.requestEventsUnrender()
+  this.requestEventStoreUnrender()
 })
 
 

src/agenda/AgendaView.ts

@@ -13,6 +13,8 @@ import TimeGrid from './TimeGrid'
 import DayGrid from '../basic/DayGrid'
 import { createDuration } from '../datelib/duration'
 import { createFormatter } from '../datelib/formatting'
+import { EventStore } from '../reducers/event-store'
+import { sliceEventRanges } from '../reducers/event-rendering'
 
 const AGENDA_ALL_DAY_EVENT_LIMIT = 5
 const WEEK_HEADER_FORMAT = createFormatter({ week: 'short' })
@@ -304,27 +306,30 @@ export default class AgendaView extends View {
   ------------------------------------------------------------------------------------------------------------------*/
 
 
-  executeEventRender(eventsPayload) {
-    let dayEventsPayload = {}
-    let timedEventsPayload = {}
-    let id
-    let eventInstanceGroup
+  renderEventStore(eventStore: EventStore) {
+    let activeUnzonedRange = this.get('dateProfile').activeUnzonedRange
+    let { instances, defs } = eventStore
+    let allDayInstances = {}
+    let timedInstances = {}
 
-    // separate the events into all-day and timed
-    for (id in eventsPayload) {
-      eventInstanceGroup = eventsPayload[id]
+    for (let instanceId in instances) {
+      let instance = instances[instanceId]
 
-      if (eventInstanceGroup.getEventDef().isAllDay()) {
-        dayEventsPayload[id] = eventInstanceGroup
+      if (defs[instance.defId].isAllDay) {
+        allDayInstances[instanceId] = instance
       } else {
-        timedEventsPayload[id] = eventInstanceGroup
+        timedInstances[instanceId] = instance
       }
     }
 
-    this.timeGrid.executeEventRender(timedEventsPayload)
+    this.timeGrid.renderEventRanges(
+      sliceEventRanges(timedInstances, eventStore, activeUnzonedRange)
+    )
 
     if (this.dayGrid) {
-      this.dayGrid.executeEventRender(dayEventsPayload)
+      this.dayGrid.renderEventRanges(
+        sliceEventRanges(allDayInstances, eventStore, activeUnzonedRange)
+      )
     }
   }
 

src/component/DateComponent.ts

@@ -7,7 +7,7 @@ import EventFootprint from '../models/event/EventFootprint'
 import { DateProfile } from '../DateProfileGenerator'
 import { DateMarker, DAY_IDS, addDays, startOfDay, diffDays, diffWholeDays } from '../datelib/marker'
 import { Duration, createDuration, asRoughMs } from '../datelib/duration'
-import { EventRenderSegment } from '../reducers/event-rendering'
+import { EventRenderRange } from '../reducers/event-rendering'
 
 
 export default abstract class DateComponent extends Component {
@@ -206,20 +206,22 @@ export default abstract class DateComponent extends Component {
   // -----------------------------------------------------------------------------------------------------------------
 
 
-  executeEventRender(eventsPayload) {
+  renderEventRanges(eventRanges: EventRenderRange[]) {
+
     if (this.eventRenderer) {
       this.eventRenderer.rangeUpdated() // poorly named now
-      this.eventRenderer.render(eventsPayload)
+      this.eventRenderer.renderRanges(eventRanges)
     } else if (this['renderEvents']) { // legacy
-      this['renderEvents'](convertEventsPayloadToLegacyArray(eventsPayload, this._getCalendar()))
+      // TODO
+      // this['renderEvents'](convertEventsPayloadToLegacyArray(eventsPayload, this._getCalendar()))
     }
 
-    this.callChildren('executeEventRender', arguments)
+    this.callChildren('renderEventRanges', arguments)
   }
 
 
-  executeEventUnrender() {
-    this.callChildren('executeEventUnrender', arguments)
+  unrenderEvents() {
+    this.callChildren('unrenderEvents', arguments)
 
     if (this.eventRenderer) {
       this.eventRenderer.unrender()

src/reducers/event-rendering.ts

@@ -1,17 +1,17 @@
 import UnzonedRange from '../models/UnzonedRange'
 import { EventInstanceHash, EventStore, EventDef, EventInstance } from './event-store'
 
-export interface EventRenderSegment {
+export interface EventRenderRange {
   eventDef: EventDef
   eventInstance: EventInstance
   range: UnzonedRange
 }
 
-export function sliceEventSegments(instances: EventInstanceHash, store: EventStore, sliceRange: UnzonedRange): EventRenderSegment[] {
+export function sliceEventRanges(instances: EventInstanceHash, store: EventStore, sliceRange: UnzonedRange): EventRenderRange[] {
   let groupedInverseBg = {}
   let ungroupedInverseBg: EventInstance[] = []
   let normal: EventInstance[] = []
-  let segs: EventRenderSegment[] = []
+  let segs: EventRenderRange[] = []
 
   for (let instanceId in instances) {
     let instance = instances[instanceId]
@@ -75,8 +75,8 @@ function getInstanceRange(eventInstance: EventInstance) {
   return eventInstance.range
 }
 
-export function furtherSliceEventSegments(segs: EventRenderSegment[], sliceRange: UnzonedRange): EventRenderSegment[] {
-  let newSegs: EventRenderSegment[] = []
+export function furtherSliceEventSegments(segs: EventRenderRange[], sliceRange: UnzonedRange): EventRenderRange[] {
+  let newSegs: EventRenderRange[] = []
 
   for (let seg of segs) {
     let newRange = seg.range.intersect(sliceRange)