separate DateComponent seg rendering funcs

src/agenda/TimeGrid.ts

@@ -12,10 +12,7 @@ import { DateFormatter, createFormatter, formatIsoTimeString } from '../datelib/
 import { ComponentContext } from '../component/Component'
 import DateComponent, { Seg } from '../component/DateComponent'
 import OffsetTracker from '../common/OffsetTracker'
-import { DateSpan } from '../structs/date-span'
-import { EventStore } from '../structs/event-store'
 import { Hit } from '../interactions/HitDragging'
-import { EventUiHash } from '../component/event-rendering'
 import AgendaView from './AgendaView'
 
 /* A component that renders one or more columns of vertical time slots
@@ -633,44 +630,27 @@ export default class TimeGrid extends DateComponent {
   ------------------------------------------------------------------------------------------------------------------*/
 
 
-  // Renders a visual indication of an event being resized
-  renderEventResize(eventStore: EventStore, eventUis: EventUiHash, sourceSeg) {
-    let segs = this.eventRangesToSegs(
-      this.eventStoreToRanges(eventStore, eventUis)
-    )
+  renderEventResizeSegs(segs: Seg[], sourceSeg, affectedInstances) {
+    super.renderEventResizeSegs(segs, sourceSeg, affectedInstances)
 
     this.mirrorRenderer.renderSegs(segs, { isResizing: true, sourceSeg })
   }
 
 
-  // Unrenders any visual indication of an event being resized
-  unrenderEventResize() {
-    this.mirrorRenderer.unrender()
-  }
-
-
   /* Selection
   ------------------------------------------------------------------------------------------------------------------*/
 
 
   // Renders a visual indication of a selection. Overrides the default, which was to simply render a highlight.
-  renderDateSelection(selection: DateSpan) {
-    if (selection) {
-      if (this.opt('selectMirror')) {
-        this.mirrorRenderer.renderSegs(this.selectionToSegs(selection, true), { isSelecting: true })
-      } else {
-        this.renderHighlightSegs(this.selectionToSegs(selection, false))
-      }
+  renderDateSelectionSegs(segs: Seg[]) {
+    if (this.opt('selectMirror')) {
+      this.mirrorRenderer.renderSegs(segs, { isSelecting: true })
+    } else {
+      this.fillRenderer.renderSegs('highlight', segs)
     }
   }
 
 
-  // Unrenders any visual indication of a selection
-  unrenderDateSelection() {
-    this.mirrorRenderer.unrender()
-    this.unrenderHighlight()
-  }
-
 }
 
 TimeGrid.prototype.isInteractable = true

src/basic/DayGrid.ts

@@ -17,12 +17,11 @@ import DayGridFillRenderer from './DayGridFillRenderer'
 import { addDays } from '../datelib/marker'
 import { createFormatter } from '../datelib/formatting'
 import DateComponent, { Seg, DateComponentProps } from '../component/DateComponent'
-import { EventStore } from '../structs/event-store'
 import DayTile from './DayTile'
 import { Hit } from '../interactions/HitDragging'
 import { DateRange, rangeContainsMarker, intersectRanges } from '../datelib/date-range'
 import OffsetTracker from '../common/OffsetTracker'
-import { EventRenderRange, EventUiHash } from '../component/event-rendering'
+import { EventRenderRange } from '../component/event-rendering'
 import { buildGotoAnchorHtml, getDayClasses } from '../component/date-rendering'
 
 const DAY_NUM_FORMAT = createFormatter({ day: 'numeric' })
@@ -392,11 +391,13 @@ export default class DayGrid extends DateComponent {
   ------------------------------------------------------------------------------------------------------------------*/
 
 
-  filterBgEventRanges(bgEventRanges) {
-    // don't render timed background events
-    return bgEventRanges.filter(function(eventRange) {
-      return eventRange.def.allDay
-    })
+  renderBgEventSegs(segs: Seg[]) {
+    super.renderBgEventSegs(
+      // don't render timed background events
+      segs.filter(function(seg) {
+        return seg.eventRange.def.allDay
+      })
+    )
   }
 
 
@@ -411,25 +412,14 @@ export default class DayGrid extends DateComponent {
   ------------------------------------------------------------------------------------------------------------------*/
 
 
-  // Renders a visual indication of an event being resized
-  renderEventResize(eventStore: EventStore, eventUis: EventUiHash, sourceSeg) {
-    let segs = this.eventRangesToSegs(
-      this.eventStoreToRanges(eventStore, eventUis)
-    )
-
-    this.renderHighlightSegs(segs)
+  renderEventResizeSegs(segs: Seg[], sourceSeg, affectedInstances) {
+    super.renderEventResizeSegs(segs, sourceSeg, affectedInstances)
 
+    this.fillRenderer.renderSegs('highlight', segs)
     this.mirrorRenderer.renderSegs(segs, { isResizing: true, sourceSeg })
   }
 
 
-  // Unrenders a visual indication of an event being resized
-  unrenderEventResize() {
-    this.unrenderHighlight()
-    this.mirrorRenderer.unrender()
-  }
-
-
   /* More+ Link Popover
   ------------------------------------------------------------------------------------------------------------------*/
 

src/component/DateComponent.ts

@@ -5,7 +5,7 @@ import { EventUiHash, EventRenderRange, computeEventDefUis, sliceEventStore, com
 import { DateSpan } from '../structs/date-span'
 import { EventInteractionUiState } from '../interactions/event-interaction-state'
 import { createDuration, Duration } from '../datelib/duration'
-import { parseEventDef, createEventInstance } from '../structs/event'
+import { parseEventDef, createEventInstance, EventInstanceHash } from '../structs/event'
 import { DateRange, rangeContainsRange } from '../datelib/date-range'
 import { Hit } from '../interactions/HitDragging'
 import browserContext from '../common/browser-context'
@@ -113,8 +113,12 @@ export default class DateComponent extends Component<DateComponentProps> {
     }
 
     if (isResize || map.has('renderDateSelectionState') || map.has('renderEventDragState') || map.has('renderEventResizeState')) {
-      this.computeHighlightSize()
-      this.computeMirrorSize()
+      if (this.mirrorRenderer) {
+        this.mirrorRenderer.computeSizes()
+      }
+      if (this.fillRenderer) {
+        this.fillRenderer.computeSizes('highlight')
+      }
     }
 
     if (isResize || map.has('renderEvents')) {
@@ -126,8 +130,12 @@ export default class DateComponent extends Component<DateComponentProps> {
     }
 
     if (isResize || map.has('renderDateSelectionState') || map.has('renderEventDragState') || map.has('renderEventResizeState')) {
-      this.assignHighlightSize()
-      this.assignMirrorSize()
+      if (this.mirrorRenderer) {
+        this.mirrorRenderer.assignSizes()
+      }
+      if (this.fillRenderer) {
+        this.fillRenderer.assignSizes('highlight')
+      }
     }
 
     if (isResize || map.has('renderEvents')) {
@@ -199,12 +207,15 @@ export default class DateComponent extends Component<DateComponentProps> {
   }
 
   renderBusinessHourRanges(eventRanges: EventRenderRange[]) {
+    this.renderBusinessHourSegs(this.eventRangesToSegs(eventRanges))
+  }
+
+  renderBusinessHourSegs(segs: Seg[]) {
     if (this.fillRenderer) {
-      this.fillRenderer.renderSegs('businessHours', this.eventRangesToSegs(eventRanges))
+      this.fillRenderer.renderSegs('businessHours', segs)
     }
   }
 
-  // Unrenders previously-rendered business-hours
   unrenderBusinessHours() {
     if (this.fillRenderer) {
       this.fillRenderer.unrender('businessHours')
@@ -227,24 +238,32 @@ export default class DateComponent extends Component<DateComponentProps> {
   // Date Selection
   // ---------------------------------------------------------------------------------------------------------------
 
-  renderDateSelectionState(selection: DateSpan) {
+  renderDateSelectionState(selection: DateSpan | null) {
     if (selection) {
       this.renderDateSelection(selection)
     }
   }
 
-  unrenderDateSelectionState(selection: DateSpan) {
+  unrenderDateSelectionState(selection: DateSpan | null) {
     if (selection) {
-      this.unrenderDateSelection()
+      this.unrenderDateSelection(selection)
     }
   }
 
   renderDateSelection(selection: DateSpan) {
-    this.renderHighlightSegs(this.selectionToSegs(selection, false))
+    this.renderDateSelectionSegs(this.selectionToSegs(selection))
+  }
+
+  renderDateSelectionSegs(segs: Seg[]) {
+    if (this.fillRenderer) {
+      this.fillRenderer.renderSegs('highlight', segs)
+    }
   }
 
-  unrenderDateSelection() {
-    this.unrenderHighlight()
+  unrenderDateSelection(selection: DateSpan) {
+    if (this.fillRenderer) {
+      this.fillRenderer.unrender('highlight')
+    }
   }
 
 
@@ -252,42 +271,42 @@ export default class DateComponent extends Component<DateComponentProps> {
   // -----------------------------------------------------------------------------------------------------------------
 
   renderEvents(eventStore: EventStore, eventUis: EventUiHash) {
-    if (this.slicingType) { // can use eventStoreToRanges?
-      this.renderEventRanges(
-        this.eventStoreToRanges(eventStore, eventUis)
-      )
-    }
+    this.renderEventRanges(
+      this.eventStoreToRanges(eventStore, eventUis)
+    )
   }
 
   renderEventRanges(eventRanges: EventRenderRange[]) {
-    if (this.eventRenderer || this.fillRenderer) {
-
-      let bgRanges = []
-      let fgRanges = []
-
-      for (let eventRange of eventRanges) {
-        if (hasBgRendering(eventRange.ui)) {
-          bgRanges.push(eventRange)
-        } else {
-          fgRanges.push(eventRange)
-        }
+    let bgRanges = []
+    let fgRanges = []
+
+    for (let eventRange of eventRanges) {
+      if (hasBgRendering(eventRange.ui)) {
+        bgRanges.push(eventRange)
+      } else {
+        fgRanges.push(eventRange)
       }
+    }
 
-      if (this.eventRenderer) {
-        this.eventRenderer.renderSegs(
-          this.eventRangesToSegs(fgRanges)
-        )
-      }
+    this.renderFgEventSegs(
+      this.eventRangesToSegs(fgRanges)
+    )
 
-      if (this.fillRenderer) {
-        bgRanges = this.filterBgEventRanges(bgRanges)
-        this.fillRenderer.renderSegs('bgEvent', this.eventRangesToSegs(bgRanges))
-      }
+    this.renderBgEventSegs(
+      this.eventRangesToSegs(bgRanges)
+    )
+  }
+
+  renderFgEventSegs(segs: Seg[]) {
+    if (this.eventRenderer) {
+      this.eventRenderer.renderSegs(segs)
     }
   }
 
-  filterBgEventRanges(bgEventRanges) {
-    return bgEventRanges
+  renderBgEventSegs(segs: Seg[]) {
+    if (this.fillRenderer) {
+      this.fillRenderer.renderSegs('bgEvent', segs)
+    }
   }
 
   unrenderEvents() {
@@ -314,6 +333,7 @@ export default class DateComponent extends Component<DateComponentProps> {
     if (this.fillRenderer) {
       this.fillRenderer.assignSizes('bgEvent')
     }
+
     if (this.eventRenderer) {
       this.eventRenderer.assignSizes()
     }
@@ -340,40 +360,32 @@ export default class DateComponent extends Component<DateComponentProps> {
   // Event Drag-n-Drop Rendering (for both events and external elements)
   // ---------------------------------------------------------------------------------------------------------------
 
-  renderEventDragState(state: EventInteractionUiState) {
+  renderEventDragState(state: EventInteractionUiState | null) {
     if (state) {
-
-      if (this.eventRenderer) {
-        this.eventRenderer.hideByHash(state.affectedEvents.instances)
-      }
-
-      this.renderEventDrag(
-        state.mutatedEvents,
-        state.eventUis,
-        state.isEvent,
-        state.origSeg
-      )
+      this.renderEventDrag(state)
     }
   }
 
-  unrenderEventDragState(state: EventInteractionUiState) {
+  unrenderEventDragState(state: EventInteractionUiState | null) {
     if (state) {
-
-      if (this.eventRenderer) {
-        this.eventRenderer.showByHash(state.affectedEvents.instances)
-      }
-
-      this.unrenderEventDrag()
+      this.unrenderEventDrag(state)
     }
   }
 
-  // Renders a visual indication of a event or external-element drag over the given drop zone.
-  // If an external-element, seg will be `null`.
-  renderEventDrag(eventStore: EventStore, eventUis: EventUiHash, isEvent: boolean, sourceSeg: Seg | null) {
+  renderEventDrag(state: EventInteractionUiState) {
     let segs = this.eventRangesToSegs(
-      this.eventStoreToRanges(eventStore, eventUis)
+      this.eventStoreToRanges(state.mutatedEvents, state.eventUis)
     )
 
+    this.renderEventDragSegs(segs, state.isEvent, state.origSeg, state.affectedEvents.instances)
+  }
+
+  renderEventDragSegs(segs: Seg[], isEvent: boolean, sourceSeg: Seg | null, affectedInstances: EventInstanceHash) {
+
+    if (this.eventRenderer) {
+      this.eventRenderer.hideByHash(affectedInstances)
+    }
+
     // if the user is dragging something that is considered an event with real event data,
     // and this component likes to do drag mirrors OR the component where the seg came from
     // likes to do drag mirrors, then render a drag mirror.
@@ -386,102 +398,69 @@ export default class DateComponent extends Component<DateComponentProps> {
     // if it would be impossible to render a drag mirror OR this component likes to render
     // highlights, then render a highlight.
     if (!isEvent || this.doesDragHighlight) {
-      this.renderHighlightSegs(segs)
+      if (this.fillRenderer) {
+        this.fillRenderer.renderSegs('highlight', segs)
+      }
     }
   }
 
-  // Unrenders a visual indication of an event or external-element being dragged.
-  unrenderEventDrag() {
-    this.unrenderHighlight()
+  unrenderEventDrag(state: EventInteractionUiState) {
+    if (this.eventRenderer) {
+      this.eventRenderer.showByHash(state.affectedEvents.instances)
+    }
 
     if (this.mirrorRenderer) {
       this.mirrorRenderer.unrender()
     }
+
+    if (this.fillRenderer) {
+      this.fillRenderer.unrender('highlight')
+    }
   }
 
 
   // Event Resizing
   // ---------------------------------------------------------------------------------------------------------------
 
-  renderEventResizeState(state: EventInteractionUiState) {
+  renderEventResizeState(state: EventInteractionUiState | null) {
     if (state) {
-
-      if (this.eventRenderer) {
-        this.eventRenderer.hideByHash(state.affectedEvents.instances)
-      }
-
-      this.renderEventResize(
-        state.mutatedEvents,
-        state.eventUis,
-        state.origSeg
-      )
+      this.renderEventResize(state)
     }
   }
 
-  unrenderEventResizeState(state: EventInteractionUiState) {
+  unrenderEventResizeState(state: EventInteractionUiState | null) {
     if (state) {
-
-      if (this.eventRenderer) {
-        this.eventRenderer.showByHash(state.affectedEvents.instances)
-      }
-
-      this.unrenderEventResize()
+      this.unrenderEventResize(state)
     }
   }
 
-  // Renders a visual indication of an event being resized.
-  renderEventResize(eventStore: EventStore, eventUis: EventUiHash, origSeg: any) {
-    // subclasses can implement
-  }
+  renderEventResize(state: EventInteractionUiState) {
+    let segs = this.eventRangesToSegs(
+      this.eventStoreToRanges(state.mutatedEvents, state.eventUis)
+    )
 
-  // Unrenders a visual indication of an event being resized.
-  unrenderEventResize() {
-    // subclasses can implement
+    this.renderEventResizeSegs(segs, state.origSeg, state.affectedEvents.instances)
   }
 
-
-  // Highlight
-  // ---------------------------------------------------------------------------------------------------------------
-
-  // Renders an emphasis on the given date range. Given a span (unzoned start/end and other misc data)
-  renderHighlightSegs(segs) {
-    if (this.fillRenderer) {
-      this.fillRenderer.renderSegs('highlight', segs)
-    }
-  }
-
-  // Unrenders the emphasis on a date range
-  unrenderHighlight() {
-    if (this.fillRenderer) {
-      this.fillRenderer.unrender('highlight')
+  renderEventResizeSegs(segs: Seg[], sourceSeg, affectedInstances: EventInstanceHash) {
+    if (this.eventRenderer) {
+      this.eventRenderer.hideByHash(affectedInstances)
     }
-  }
 
-  computeHighlightSize() {
-    if (this.fillRenderer) {
-      this.fillRenderer.computeSizes('highlight')
-    }
+    // subclasses can override and do something with segs
   }
 
-  assignHighlightSize() {
-    if (this.fillRenderer) {
-      this.fillRenderer.assignSizes('highlight')
+  unrenderEventResize(state: EventInteractionUiState) {
+    if (this.eventRenderer) {
+      this.eventRenderer.showByHash(state.affectedEvents.instances)
     }
-  }
-
-
-  // Mirror
-  // ---------------------------------------------------------------------------------------------------------------
 
-  computeMirrorSize() {
     if (this.mirrorRenderer) {
-      this.mirrorRenderer.computeSizes()
+      this.mirrorRenderer.unrender()
     }
-  }
 
-  assignMirrorSize() {
-    if (this.mirrorRenderer) {
-      this.mirrorRenderer.assignSizes()
+    if (this.fillRenderer) {
+      this.fillRenderer.unrender('highlight')
     }
   }
 
@@ -516,32 +495,30 @@ export default class DateComponent extends Component<DateComponentProps> {
     return allSegs
   }
 
-  selectionToSegs(selection: DateSpan, fabricateEvents: boolean): Seg[] {
+  selectionToSegs(selection: DateSpan): Seg[] {
     let segs = this.rangeToSegs(selection.range, selection.allDay)
 
-    if (fabricateEvents) {
+    // fabricate an eventRange. important for mirror
+    // TODO: make a separate utility for this?
+    let def = parseEventDef(
+      { editable: false },
+      '', // sourceId
+      selection.allDay,
+      true, // hasEnd
+      this.calendar
+    )
 
-      // fabricate an eventRange. important for mirror
-      // TODO: make a separate utility for this?
-      let def = parseEventDef(
-        { editable: false },
-        '', // sourceId
-        selection.allDay,
-        true, // hasEnd
-        this.calendar
-      )
-      let eventRange = {
-        def,
-        ui: computeEventDefUi(def, {}, {}),
-        instance: createEventInstance(def.defId, selection.range),
-        range: selection.range,
-        isStart: true,
-        isEnd: true
-      }
+    let eventRange = {
+      def,
+      ui: computeEventDefUi(def, {}, {}),
+      instance: createEventInstance(def.defId, selection.range),
+      range: selection.range,
+      isStart: true,
+      isEnd: true
+    }
 
-      for (let seg of segs) {
-        seg.eventRange = eventRange
-      }
+    for (let seg of segs) {
+      seg.eventRange = eventRange
     }
 
     return segs