kill DateComponent render helper methos

src/View.ts

@@ -222,7 +222,7 @@ export default abstract class View extends DateComponent<ViewProps> {
       eventUis,
       this.props.dateProfile.activeRange,
       allDay ? this.nextDayThreshold : null
-    )
+    ).fg
   }
 
 

src/agenda/SimpleTimeGrid.ts

@@ -46,12 +46,14 @@ export default class SimpleTimeGrid extends DateComponent<SimpleTimeGridProps> {
     let { dateProfile, dayTable } = props
 
     let dayRanges = this.dayRanges = this.buildDayRanges(dayTable, dateProfile, this.dateEnv)
+    let segRes = slicer.eventStoreToSegs(props.eventStore, props.eventUis, dateProfile, null, dayRanges)
 
     this.timeGrid.receiveProps({
       dateProfile,
       cells: dayTable.cells[0],
       businessHourSegs: slicer.businessHoursToSegs(props.businessHours, dateProfile, null, dayRanges),
-      eventSegs: slicer.eventStoreToSegs(props.eventStore, props.eventUis, dateProfile, null, dayRanges),
+      bgEventSegs: segRes.bg,
+      fgEventSegs: segRes.fg,
       dateSelectionSegs: slicer.selectionToSegs(props.dateSelection, dayRanges),
       eventSelection: props.eventSelection,
       eventDrag: slicer.buildEventDrag(props.eventDrag, dateProfile, null, dayRanges),

src/agenda/TimeGrid.ts

@@ -47,7 +47,8 @@ export interface TimeGridProps {
   dateProfile: DateProfile
   cells: TimeGridCell[]
   businessHourSegs: TimeGridSeg[]
-  eventSegs: TimeGridSeg[]
+  bgEventSegs: TimeGridSeg[]
+  fgEventSegs: TimeGridSeg[]
   dateSelectionSegs: TimeGridSeg[]
   eventSelection: string
   eventDrag: EventSegUiInteractionState | null
@@ -91,7 +92,8 @@ export default class TimeGrid extends DateComponent<TimeGridProps> {
   private renderColumns: MemoizedRendering<[TimeGridCell[], DateProfile]>
   private renderBusinessHours: MemoizedRendering<[TimeGridSeg[]]>
   private renderDateSelection: MemoizedRendering<[TimeGridSeg[]]>
-  private renderEvents: MemoizedRendering<[TimeGridSeg[]]>
+  private renderBgEvents: MemoizedRendering<[TimeGridSeg[]]>
+  private renderFgEvents: MemoizedRendering<[TimeGridSeg[]]>
   private renderEventSelection: MemoizedRendering<[string]>
   private renderEventDrag: MemoizedRendering<[EventSegUiInteractionState]>
   private renderEventResize: MemoizedRendering<[EventSegUiInteractionState]>
@@ -121,16 +123,22 @@ export default class TimeGrid extends DateComponent<TimeGridProps> {
       [ renderColumns ]
     )
 
-    this.renderEvents = memoizeRendering(
-      this._renderEventSegs,
-      this._unrenderEventSegs,
+    this.renderFgEvents = memoizeRendering(
+      eventRenderer.renderSegs.bind(eventRenderer),
+      eventRenderer.unrender.bind(eventRenderer),
+      [ renderColumns ]
+    )
+
+    this.renderBgEvents = memoizeRendering(
+      fillRenderer.renderSegs.bind(fillRenderer, 'bgEvent'),
+      fillRenderer.unrender.bind(fillRenderer, 'bgEvent'),
       [ renderColumns ]
     )
 
     this.renderEventSelection = memoizeRendering(
       eventRenderer.selectByInstanceId.bind(eventRenderer),
       eventRenderer.unselectByInstanceId.bind(eventRenderer),
-      [ this.renderEvents ]
+      [ this.renderFgEvents ]
     )
 
     this.renderEventDrag = memoizeRendering(
@@ -237,7 +245,8 @@ export default class TimeGrid extends DateComponent<TimeGridProps> {
     this.renderColumns(props.cells, props.dateProfile)
     this.renderBusinessHours(props.businessHourSegs)
     this.renderDateSelection(props.dateSelectionSegs)
-    this.renderEvents(props.eventSegs)
+    this.renderFgEvents(props.fgEventSegs)
+    this.renderBgEvents(props.bgEventSegs)
     this.renderEventSelection(props.eventSelection)
     this.renderEventDrag(props.eventDrag)
     this.renderEventResize(props.eventResize)

src/basic/DayGrid.ts

@@ -54,7 +54,8 @@ export interface DayGridProps {
   dateProfile: DateProfile
   cells: DayGridCell[][]
   businessHourSegs: DayGridSeg[]
-  eventSegs: DayGridSeg[]
+  bgEventSegs: DayGridSeg[]
+  fgEventSegs: DayGridSeg[]
   dateSelectionSegs: DayGridSeg[]
   eventSelection: string
   eventDrag: EventSegUiInteractionState | null
@@ -88,7 +89,8 @@ export default class DayGrid extends DateComponentProps<DayGridProps> {
   private renderCells: MemoizedRendering<[DayGridCell[][], boolean]>
   private renderBusinessHours: MemoizedRendering<[DayGridSeg[]]>
   private renderDateSelection: MemoizedRendering<[DayGridSeg[]]>
-  private renderEvents: MemoizedRendering<[DayGridSeg[]]>
+  private renderBgEvents: MemoizedRendering<[DayGridSeg[]]>
+  private renderFgEvents: MemoizedRendering<[DayGridSeg[]]>
   private renderEventSelection: MemoizedRendering<[string]>
   private renderEventDrag: MemoizedRendering<[EventSegUiInteractionState]>
   private renderEventResize: MemoizedRendering<[EventSegUiInteractionState]>
@@ -118,16 +120,22 @@ export default class DayGrid extends DateComponentProps<DayGridProps> {
       [ renderCells ]
     )
 
-    this.renderEvents = memoizeRendering(
-      this._renderEventSegs,
-      this._unrenderEventSegs,
+    this.renderBgEvents = memoizeRendering(
+      fillRenderer.renderSegs.bind(fillRenderer, 'bgEvent'),
+      fillRenderer.unrender.bind(fillRenderer, 'bgEvent'),
+      [ renderCells ]
+    )
+
+    this.renderFgEvents = memoizeRendering(
+      eventRenderer.renderSegs.bind(eventRenderer),
+      eventRenderer.unrender.bind(eventRenderer),
       [ renderCells ]
     )
 
     this.renderEventSelection = memoizeRendering(
       eventRenderer.selectByInstanceId.bind(eventRenderer),
       eventRenderer.unselectByInstanceId.bind(eventRenderer),
-      [ this.renderEvents ]
+      [ this.renderFgEvents ]
     )
 
     this.renderEventDrag = memoizeRendering(
@@ -154,7 +162,8 @@ export default class DayGrid extends DateComponentProps<DayGridProps> {
     this.renderCells(cells, props.isRigid)
     this.renderBusinessHours(props.businessHourSegs)
     this.renderDateSelection(props.dateSelectionSegs)
-    this.renderEvents(props.eventSegs)
+    this.renderBgEvents(props.bgEventSegs)
+    this.renderFgEvents(props.fgEventSegs)
     this.renderEventSelection(props.eventSelection)
     this.renderEventDrag(props.eventDrag)
     this.renderEventResize(props.eventResize)
@@ -185,7 +194,7 @@ export default class DayGrid extends DateComponentProps<DayGridProps> {
 
     this.segPopoverTile.receiveProps({
       date: date || (this.segPopoverTile.props as any).date,
-      segs: segs || (this.segPopoverTile.props as any).segs,
+      fgSegs: segs || (this.segPopoverTile.props as any).fgSegs,
       eventSelection: ownProps.eventSelection,
       eventDragInstances: ownProps.eventDrag ? ownProps.eventDrag.affectedInstances : null,
       eventResizeInstances: ownProps.eventResize ? ownProps.eventResize.affectedInstances : null
@@ -461,28 +470,6 @@ export default class DayGrid extends DateComponentProps<DayGridProps> {
   }
 
 
-  /* Event Rendering
-  ------------------------------------------------------------------------------------------------------------------*/
-
-
-  _renderBgEventSegs(segs: Seg[]) {
-    super._renderBgEventSegs(
-      // don't render timed background events
-      segs.filter(function(seg) {
-        return seg.eventRange.def.allDay
-      })
-    )
-  }
-
-
-  // Unrenders all events currently rendered on the grid
-  _unrenderEventSegs() {
-    super._unrenderEventSegs()
-
-    this.removeSegPopover() // removes the "more.." events popover
-  }
-
-
   /* Event Drag Visualization
   ------------------------------------------------------------------------------------------------------------------*/
 

src/basic/DayGridEventRenderer.ts

@@ -30,6 +30,11 @@ export default class DayGridEventRenderer extends SimpleDayGridEventRenderer {
         rowStructs[i].tbodyEl
       )
     })
+
+    // removes the "more.." events popover
+    if (!mirrorInfo) {
+      this.dayGrid.removeSegPopover()
+    }
   }
 
 

src/basic/DayGridFillRenderer.ts

@@ -1,6 +1,6 @@
 import { htmlToElement, createElement, appendToElement, prependToElement } from '../util/dom-manip'
 import FillRenderer from '../component/renderers/FillRenderer'
-import DayGrid from './DayGrid'
+import DayGrid, { DayGridSeg } from './DayGrid'
 import { Seg } from '../component/DateComponent'
 
 
@@ -15,6 +15,18 @@ export default class DayGridFillRenderer extends FillRenderer {
     this.dayGrid = dayGrid
   }
 
+  renderSegs(type: string, segs: DayGridSeg[]) {
+
+    // don't render timed background events
+    if (type === 'bgEvent') {
+      segs = segs.filter(function(seg) {
+        return seg.eventRange.def.allDay
+      })
+    }
+
+    super.renderSegs(type, segs)
+  }
+
   attachSegs(type, segs: Seg[]) {
     let els = []
     let i

src/basic/DayTile.ts

@@ -14,7 +14,7 @@ import { memoizeRendering, MemoizedRendering } from '../component/memoized-rende
 
 export interface DayTileProps {
   date: DateMarker
-  segs: Seg[]
+  fgSegs: Seg[]
   eventSelection: string
   eventDragInstances: EventInstanceHash
   eventResizeInstances: EventInstanceHash
@@ -28,7 +28,7 @@ export default class DayTile extends DateComponent<DayTileProps> {
   offsetTracker: OffsetTracker // TODO: abstraction for tracking dims of whole element rect
 
   private renderFrame: MemoizedRendering<[DateMarker]>
-  private renderEvents: MemoizedRendering<[Seg[]]>
+  private renderFgEvents: MemoizedRendering<[Seg[]]>
   private renderEventSelection: MemoizedRendering<[string]>
   private renderEventDrag: MemoizedRendering<[EventInstanceHash]>
   private renderEventResize: MemoizedRendering<[EventInstanceHash]>
@@ -42,16 +42,16 @@ export default class DayTile extends DateComponent<DayTileProps> {
       this._renderFrame
     )
 
-    let renderEvents = this.renderEvents = memoizeRendering(
-      this._renderEventSegs,
-      this._unrenderEventSegs,
+    this.renderFgEvents = memoizeRendering(
+      eventRenderer.renderSegs.bind(eventRenderer),
+      eventRenderer.unrender.bind(eventRenderer),
       [ renderFrame ]
     )
 
     this.renderEventSelection = memoizeRendering(
       eventRenderer.selectByInstanceId.bind(eventRenderer),
       eventRenderer.unselectByInstanceId.bind(eventRenderer),
-      [ renderEvents ]
+      [ this.renderFgEvents ]
     )
 
     this.renderEventDrag = memoizeRendering(
@@ -69,7 +69,7 @@ export default class DayTile extends DateComponent<DayTileProps> {
 
   render(props: DayTileProps) {
     this.renderFrame(props.date)
-    this.renderEvents(props.segs)
+    this.renderFgEvents(props.fgSegs)
     this.renderEventSelection(props.eventSelection)
     this.renderEventDrag(props.eventDragInstances)
     this.renderEventResize(props.eventResizeInstances)

src/basic/SimpleDayGrid.ts

@@ -43,11 +43,14 @@ export default class SimpleDayGrid extends DateComponent<SimpleDayGridProps> {
     let { dayGrid, slicer, isRtl } = this
     let { dateProfile, dayTable, nextDayThreshold } = props
 
+    let segRes = slicer.eventStoreToSegs(props.eventStore, props.eventUis, dateProfile, nextDayThreshold, dayTable, isRtl)
+
     dayGrid.receiveProps({
       dateProfile,
       cells: dayTable.cells,
       businessHourSegs: slicer.businessHoursToSegs(props.businessHours, dateProfile, nextDayThreshold, dayTable, isRtl),
-      eventSegs: slicer.eventStoreToSegs(props.eventStore, props.eventUis, dateProfile, nextDayThreshold, dayTable, isRtl),
+      bgEventSegs: segRes.bg,
+      fgEventSegs: segRes.fg,
       dateSelectionSegs: slicer.selectionToSegs(props.dateSelection, dayTable, isRtl),
       eventSelection: props.eventSelection,
       eventDrag: slicer.buildEventDrag(props.eventDrag, dateProfile, nextDayThreshold, dayTable, isRtl),

src/common/slicing-utils.ts

@@ -43,15 +43,18 @@ export class Slicer<OtherArgsType extends any[], SegType extends Seg> {
     dateProfile: DateProfile,
     nextDayThreshold: Duration,
     ...otherArgs: OtherArgsType
-  ): SegType[] => {
-    if (!eventStore) {
-      return []
-    }
+  ): { bg: SegType[], fg: SegType[] } => {
+    if (eventStore) {
+      let rangeRes = sliceEventStore(eventStore, eventUis, dateProfile.activeRange, nextDayThreshold)
 
-    return this.eventRangesToCompleteSegs(
-      sliceEventStore(eventStore, eventUis, dateProfile.activeRange, nextDayThreshold),
-      otherArgs
-    )
+      return {
+        bg: this.eventRangesToCompleteSegs(rangeRes.bg, otherArgs),
+        fg: this.eventRangesToCompleteSegs(rangeRes.fg, otherArgs)
+      }
+
+    } else {
+      return { bg: [], fg: [] }
+    }
   }
 
   businessHoursToSegs = (
@@ -105,11 +108,10 @@ export class Slicer<OtherArgsType extends any[], SegType extends Seg> {
       return null
     }
 
+    let rangeRes = sliceEventStore(interaction.mutatedEvents, interaction.eventUis, dateProfile.activeRange, nextDayThreshold)
+
     return {
-      segs: this.eventRangesToCompleteSegs(
-        sliceEventStore(interaction.mutatedEvents, interaction.eventUis, dateProfile.activeRange, nextDayThreshold),
-        otherArgs
-      ),
+      segs: this.eventRangesToCompleteSegs(rangeRes.fg, otherArgs),
       affectedInstances: interaction.affectedEvents.instances,
       isEvent: interaction.isEvent,
       sourceSeg: interaction.origSeg

src/component/DateComponent.ts

@@ -79,55 +79,6 @@ export default class DateComponent<PropsType> extends Component<PropsType> {
   }
 
 
-  // Events
-  // -----------------------------------------------------------------------------------------------------------------
-
-  _renderEventSegs(segs: Seg[]) {
-    let bgSegs = []
-    let fgSegs = []
-
-    for (let seg of segs) {
-      if (hasBgRendering(seg.eventRange.ui)) {
-        bgSegs.push(seg)
-      } else {
-        fgSegs.push(seg)
-      }
-    }
-
-    this._renderFgEventSegs(fgSegs)
-    this._renderBgEventSegs(bgSegs)
-  }
-
-  _renderFgEventSegs(segs: Seg[]) {
-    if (this.eventRenderer) {
-      this.eventRenderer.renderSegs(segs)
-    }
-  }
-
-  _renderBgEventSegs(segs: Seg[]) {
-    if (this.fillRenderer) {
-      this.fillRenderer.renderSegs('bgEvent', segs)
-    }
-  }
-
-  _unrenderEventSegs() {
-    this._unrenderFgEventSegs()
-    this._unrenderBgEventSegs()
-  }
-
-  _unrenderFgEventSegs() {
-    if (this.eventRenderer) {
-      this.eventRenderer.unrender()
-    }
-  }
-
-  _unrenderBgEventSegs() {
-    if (this.fillRenderer) {
-      this.fillRenderer.unrender('bgEvent')
-    }
-  }
-
-
   // TODO: WHAT ABOUT (sourceSeg && sourceSeg.component.doesDragMirror)
   //
   // Event Drag-n-Drop Rendering (for both events and external elements)

src/component/event-rendering.ts

@@ -37,7 +37,8 @@ export function sliceEventStore(eventStore: EventStore, eventUis: EventUiHash, f
   let inverseBgByGroupId: { [groupId: string]: DateRange[] } = {}
   let inverseBgByDefId: { [defId: string]: DateRange[] } = {}
   let defByGroupId: { [groupId: string]: EventDef } = {}
-  let renderRanges: EventRenderRange[] = []
+  let bgRanges: EventRenderRange[] = []
+  let fgRanges: EventRenderRange[] = []
 
   for (let defId in eventStore.defs) {
     let def = eventStore.defs[defId]
@@ -77,7 +78,7 @@ export function sliceEventStore(eventStore: EventStore, eventUis: EventUiHash, f
           inverseBgByDefId[instance.defId].push(visibleRange)
         }
       } else {
-        renderRanges.push({
+        (ui.rendering === 'background' ? bgRanges : fgRanges).push({
           def,
           ui,
           instance,
@@ -89,7 +90,7 @@ export function sliceEventStore(eventStore: EventStore, eventUis: EventUiHash, f
     }
   }
 
-  for (let groupId in inverseBgByGroupId) {
+  for (let groupId in inverseBgByGroupId) { // BY GROUP
     let ranges = inverseBgByGroupId[groupId]
     let invertedRanges = invertRanges(ranges, framingRange)
 
@@ -97,7 +98,7 @@ export function sliceEventStore(eventStore: EventStore, eventUis: EventUiHash, f
       let def = defByGroupId[groupId]
       let ui = eventUis[def.defId]
 
-      renderRanges.push({
+      bgRanges.push({
         def,
         ui,
         instance: null,
@@ -113,7 +114,7 @@ export function sliceEventStore(eventStore: EventStore, eventUis: EventUiHash, f
     let invertedRanges = invertRanges(ranges, framingRange)
 
     for (let invertedRange of invertedRanges) {
-      renderRanges.push({
+      bgRanges.push({
         def: eventStore.defs[defId],
         ui: eventUis[defId],
         instance: null,
@@ -124,7 +125,7 @@ export function sliceEventStore(eventStore: EventStore, eventUis: EventUiHash, f
     }
   }
 
-  return renderRanges
+  return { bg: bgRanges, fg: fgRanges }
 }
 
 export function hasBgRendering(ui: EventUi) {

src/interactions/event-interaction-state.ts

@@ -2,7 +2,7 @@ import { EventStore } from '../structs/event-store'
 import { Seg } from '../component/DateComponent'
 import { EventUiHash } from '../component/event-rendering'
 
-export interface EventInteractionState {
+export interface EventInteractionState { // is this ever used alone?
   affectedEvents: EventStore
   mutatedEvents: EventStore
   isEvent: boolean

src/list/ListView.ts

@@ -12,7 +12,7 @@ import { buildGotoAnchorHtml } from '../component/date-rendering'
 import { ComponentContext } from '../component/Component'
 import { ViewSpec } from '../structs/view-spec'
 import { EventRenderRange, EventUiHash, sliceEventStore } from '../component/event-rendering'
-import { EventStore } from '../structs/event-store';
+import { EventStore } from '../structs/event-store'
 
 /*
 Responsible for the scroller, and forwarding event-related actions into the "grid".
@@ -100,20 +100,26 @@ export default class ListView extends View {
   }
 
 
+  // superclass calls this
   renderEvents(eventStore: EventStore, eventUis: EventUiHash) {
-    this._renderEventSegs(
+    this.eventRenderer.renderSegs(
       this.eventRangesToSegs(
         sliceEventStore(
           eventStore,
           eventUis,
           this.props.dateProfile.activeRange,
           this.nextDayThreshold
-        )
+        ).fg
       )
     )
   }
 
 
+  unrenderEvents() {
+    this.eventRenderer.unrender()
+  }
+
+
   eventRangesToSegs(eventRanges: EventRenderRange[]) {
     let segs = []
 

src/structs/business-hours.ts

@@ -65,5 +65,5 @@ export function sliceBusinessHours(businessHours: EventStore, range: DateRange,
     computeEventDefUis(expandedStore.defs, {}, {}),
     range,
     nextDayThreshold
-  )
+  ).bg
 }