move seg utils out of DateComponent. fixup Tile

src/basic/DayGrid.ts

@@ -16,7 +16,7 @@ import DayGridMirrorRenderer from './DayGridMirrorRenderer'
 import DayGridFillRenderer from './DayGridFillRenderer'
 import { addDays } from '../datelib/marker'
 import { createFormatter } from '../datelib/formatting'
-import DateComponent, { Seg } from '../component/DateComponent'
+import DateComponent, { Seg, DateComponentProps } from '../component/DateComponent'
 import { EventStore } from '../structs/event-store'
 import DayTile from './DayTile'
 import { Hit } from '../interactions/HitDragging'
@@ -105,6 +105,26 @@ export default class DayGrid extends DateComponent {
   }
 
 
+  render(props: DateComponentProps) {
+    super.render(props)
+
+    if (this.segPopoverTile) {
+      this.updateSegPopoverTile()
+    }
+  }
+
+
+  updateSegPopoverTile(date?, segs?) {
+    this.segPopoverTile.receiveProps({
+      date: date || (this.segPopoverTile.props as any).date,
+      segs: segs || (this.segPopoverTile.props as any).segs,
+      eventSelection: this.props.eventSelection,
+      eventDrag: this.props.eventDrag,
+      eventResize: this.props.eventResize
+    } as any) // HACK
+  }
+
+
   /* Date Rendering
   ------------------------------------------------------------------------------------------------------------------*/
 
@@ -381,17 +401,6 @@ export default class DayGrid extends DateComponent {
   }
 
 
-  // Retrieves all rendered segment objects currently rendered on the grid
-  getAllEventSegs() {
-    // append the segments from the "more..." popover
-    return super.getAllEventSegs().concat(
-      this.segPopoverTile ?
-        this.segPopoverTile.getAllEventSegs() :
-        []
-    )
-  }
-
-
   /* Event Resize Visualization
   ------------------------------------------------------------------------------------------------------------------*/
 
@@ -656,13 +665,12 @@ export default class DayGrid extends DateComponent {
       content: (el) => {
         this.segPopoverTile = new DayTile(
           this.context,
-          el,
-          this.getCellDate(row, col)
+          el
+        )
+        this.updateSegPopoverTile(
+          this.getCellDate(row, col),
+          segs
         )
-        this.segPopoverTile.receiveProps({
-          dateProfile: this.props.dateProfile,
-          segs,
-        } as any) // HACK
       },
       hide: () => {
         this.segPopoverTile.destroy()

src/basic/DayTile.ts

@@ -7,33 +7,39 @@ import OffsetTracker from '../common/OffsetTracker'
 import { computeRect } from '../util/dom-geom'
 import { Rect, pointInsideRect } from '../util/geom'
 import { addDays, DateMarker } from '../datelib/marker'
-import { ComponentContext } from '../component/Component'
 import { removeElement } from '../util/dom-manip'
-
+import { EventInteractionUiState } from '../interactions/event-interaction-state'
+
+/*
+props:
+- date
+- segs
+- eventSelection
+- eventDrag
+- eventResize
+*/
 export default class DayTile extends DateComponent {
 
-  date: Date
   segContainerEl: HTMLElement
   width: number
   height: number
   offsetTracker: OffsetTracker // TODO: abstraction for tracking dims of whole element rect
 
-  constructor(context: ComponentContext, el: HTMLElement, date: DateMarker) {
-    super(context, el)
 
-    this.date = date // HACK
+  render(props) {
+    let dateId = this.subrender('renderFrame', [ props.date ])
+    let evId = this.subrender('renderCoolSegs', [ props.segs ], 'unrenderCoolSegs')
+    this.subrender('renderEventSelection', [ props.eventSelection, evId ], 'unrenderEventSelection')
+    this.subrender('renderEventDragState', [ props.eventDrag, dateId ], 'unrenderEventDragState')
+    this.subrender('renderEventResizeState', [ props.eventResize, dateId ], 'unrenderEventResizeState')
   }
 
-  /*
-  props:
-  - dateProfile
-  - segs
-  */
-  render(props) {
+  // needed to be a different name :/
+  renderFrame(date: DateMarker) {
     let { theme, dateEnv } = this
 
     let title = dateEnv.format(
-      this.date,
+      date,
       createFormatter(this.opt('dayPopoverFormat')) // TODO: cache
     )
 
@@ -50,14 +56,40 @@ export default class DayTile extends DateComponent {
       '</div>'
 
     this.segContainerEl = this.el.querySelector('.fc-event-container')
+  }
+
+  // needed to be a different name :/
+  renderCoolSegs(segs: Seg[]) {
+    this.eventRenderer.renderSegs(segs)
+  }
+
+  // needed to be a different name :/
+  unrenderCoolSegs(segs: Seg[]) {
+    this.eventRenderer.unrender()
+  }
 
-    this.eventRenderer.renderSegs(props.segs)
+  renderEventDragState(state: EventInteractionUiState) {
+    if (state) {
+      this.eventRenderer.hideByHash(state.affectedEvents.instances)
+    }
+  }
+
+  unrenderEventDragState(state: EventInteractionUiState) {
+    if (state) {
+      this.eventRenderer.showByHash(state.affectedEvents.instances)
+    }
   }
 
-  destroy() {
-    this.unrenderEvents() // HACK
+  renderEventResizeState(state: EventInteractionUiState) {
+    if (state) {
+      this.eventRenderer.hideByHash(state.affectedEvents.instances)
+    }
+  }
 
-    super.destroy()
+  unrenderEventResizeState(state: EventInteractionUiState) {
+    if (state) {
+      this.eventRenderer.showByHash(state.affectedEvents.instances)
+    }
   }
 
   prepareHits() {
@@ -82,11 +114,13 @@ export default class DayTile extends DateComponent {
     }
 
     if (pointInsideRect({ left: leftOffset, top: topOffset }, rect)) {
+      let date = (this.props as any).date // HACK
+
       return {
         component: this,
         dateSpan: {
           allDay: true,
-          range: { start: this.date, end: addDays(this.date, 1) }
+          range: { start: date, end: addDays(date, 1) }
         },
         dayEl: this.el,
         rect: rect,

src/component/DateComponent.ts

@@ -107,7 +107,7 @@ export default class DateComponent extends Component<DateComponentProps> {
     this.subrender('renderBusinessHours', [ props.businessHours, dateId ], 'unrenderBusinessHours', true)
     this.subrender('renderDateSelectionState', [ props.dateSelection, dateId ], 'unrenderDateSelectionState', true)
     let evId = this.subrender('renderEvents', [ props.eventStore, props.eventUis, dateId ], 'unrenderEvents', true)
-    this.subrender('selectEventsByInstanceId', [ props.eventSelection, evId ], 'unselectAllEvents', true)
+    this.subrender('renderEventSelection', [ props.eventSelection, evId ], 'unrenderEventSelection', true)
     this.subrender('renderEventDragState', [ props.eventDrag, dateId ], 'unrenderEventDragState', true)
     this.subrender('renderEventResizeState', [ props.eventResize, dateId ], 'unrenderEventResizeState', true)
   }
@@ -365,27 +365,15 @@ export default class DateComponent extends Component<DateComponentProps> {
   // -----------------------------------------------------------------------------------------------------------------
   // TODO: show/hide according to groupId?
 
-  selectEventsByInstanceId(instanceId) {
-    if (instanceId) {
-      this.getAllEventSegs().forEach(function(seg) {
-        let eventInstance = seg.eventRange.instance
-        if (
-          eventInstance && eventInstance.instanceId === instanceId &&
-          seg.el // necessary?
-        ) {
-          seg.el.classList.add('fc-selected')
-        }
-      })
+  renderEventSelection(instanceId) {
+    if (instanceId && this.eventRenderer) {
+      this.eventRenderer.selectByInstanceId(instanceId)
     }
   }
 
-  unselectAllEvents(instanceId) {
-    if (instanceId) {
-      this.getAllEventSegs().forEach(function(seg) {
-        if (seg.el) { // necessary?
-          seg.el.classList.remove('fc-selected')
-        }
-      })
+  unrenderEventSelection(instanceId) {
+    if (instanceId && this.eventRenderer) {
+      this.eventRenderer.unselectByInstanceId(instanceId)
     }
   }
 
@@ -395,7 +383,11 @@ export default class DateComponent extends Component<DateComponentProps> {
 
   renderEventDragState(state: EventInteractionUiState) {
     if (state) {
-      this.hideSegsByHash(state.affectedEvents.instances)
+
+      if (this.eventRenderer) {
+        this.eventRenderer.hideByHash(state.affectedEvents.instances)
+      }
+
       this.renderEventDrag(
         state.mutatedEvents,
         state.eventUis,
@@ -407,7 +399,11 @@ export default class DateComponent extends Component<DateComponentProps> {
 
   unrenderEventDragState(state: EventInteractionUiState) {
     if (state) {
-      this.showSegsByHash(state.affectedEvents.instances)
+
+      if (this.eventRenderer) {
+        this.eventRenderer.showByHash(state.affectedEvents.instances)
+      }
+
       this.unrenderEventDrag()
     }
   }
@@ -450,7 +446,11 @@ export default class DateComponent extends Component<DateComponentProps> {
 
   renderEventResizeState(state: EventInteractionUiState) {
     if (state) {
-      this.hideSegsByHash(state.affectedEvents.instances)
+
+      if (this.eventRenderer) {
+        this.eventRenderer.hideByHash(state.affectedEvents.instances)
+      }
+
       this.renderEventResize(
         state.mutatedEvents,
         state.eventUis,
@@ -461,7 +461,11 @@ export default class DateComponent extends Component<DateComponentProps> {
 
   unrenderEventResizeState(state: EventInteractionUiState) {
     if (state) {
-      this.showSegsByHash(state.affectedEvents.instances)
+
+      if (this.eventRenderer) {
+        this.eventRenderer.showByHash(state.affectedEvents.instances)
+      }
+
       this.unrenderEventResize()
     }
   }
@@ -594,33 +598,6 @@ export default class DateComponent extends Component<DateComponentProps> {
   }
 
 
-  // Seg Utils
-  // -----------------------------------------------------------------------------------------------------------------
-
-  hideSegsByHash(hash) {
-    this.getAllEventSegs().forEach(function(seg) {
-      if (hash[seg.eventRange.instance.instanceId]) {
-        seg.el.style.visibility = 'hidden'
-      }
-    })
-  }
-
-  showSegsByHash(hash) {
-    this.getAllEventSegs().forEach(function(seg) {
-      if (hash[seg.eventRange.instance.instanceId]) {
-        seg.el.style.visibility = ''
-      }
-    })
-  }
-
-  getAllEventSegs(): Seg[] {
-    return [].concat(
-      this.eventRenderer ? (this.eventRenderer.segs) : [],
-      this.fillRenderer ? (this.fillRenderer.renderedSegsByType['bgEvent'] || []) : []
-    )
-  }
-
-
   // Hit System
   // -----------------------------------------------------------------------------------------------------------------
 

src/component/renderers/FgEventRenderer.ts

@@ -244,6 +244,49 @@ export default abstract class FgEventRenderer {
   assignSizes() {
   }
 
+
+  // Manipulation on rendered segs
+
+
+  hideByHash(hash) {
+    for (let seg of this.segs) {
+      if (hash[seg.eventRange.instance.instanceId]) {
+        seg.el.style.visibility = 'hidden'
+      }
+    }
+  }
+
+
+  showByHash(hash) {
+    for (let seg of this.segs) {
+      if (hash[seg.eventRange.instance.instanceId]) {
+        seg.el.style.visibility = ''
+      }
+    }
+  }
+
+
+  selectByInstanceId(instanceId) {
+    for (let seg of this.segs) {
+      let eventInstance = seg.eventRange.instance
+      if (
+        eventInstance && eventInstance.instanceId === instanceId &&
+        seg.el // necessary?
+      ) {
+        seg.el.classList.add('fc-selected')
+      }
+    }
+  }
+
+
+  unselectByInstanceId(instanceId) {
+    for (let seg of this.segs) {
+      if (seg.el) { // necessary?
+        seg.el.classList.remove('fc-selected')
+      }
+    }
+  }
+
 }