remove subrender handling sizing

fullcalendar · Nov 23, 2018 · 8c52aaa · 8c52aaa
1 parent 949d4ce
commit 8c52aaa
Show file tree

Hide file tree

Showing 10 changed files with 159 additions and 246 deletions.
diff --git a/src/CalendarComponent.ts b/src/CalendarComponent.ts
@@ -214,8 +214,6 @@ export default class CalendarComponent extends Component<CalendarComponentProps>
   }
 
   updateSize(totalHeight, isAuto, isResize) {
-    super.updateSize(totalHeight, isAuto, isResize)
-
     this.view.updateSize(this.viewHeight, this.isHeightAuto, isResize)
     this.view.updateNowIndicator() // we need to guarantee this will run after updateSize
   }

diff --git a/src/View.ts b/src/View.ts
@@ -44,6 +44,9 @@ export default abstract class View extends DateComponent<ViewProps> {
 
   queuedScroll: any
 
+  isDateSizeDirty: boolean = false
+  isEventSizeDirty: boolean = false
+
   eventOrderSpecs: any // criteria for ordering events when they have same date/time
   nextDayThreshold: Duration
 
@@ -109,46 +112,15 @@ export default abstract class View extends DateComponent<ViewProps> {
 
 
   render(props: ViewProps) {
-    this.subrender('afterSkeletonRender', [], 'beforeSkeletonUnrender', true)
-    let dateId = this.subrender('_renderDates', [ props.dateProfile ], '_unrenderDates', true)
-    this.subrender('renderBusinessHours', [ props.businessHours, props.dateProfile, dateId ], 'unrenderBusinessHours', true)
-    this.subrender('renderDateSelectionState', [ props.dateSelection, dateId ], 'unrenderDateSelection', true)
-    let evId = this.subrender('renderEvents', [ props.eventStore, props.eventUis, dateId ], 'unrenderEvents', 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)
-  }
-
-  _renderDates(dateProfile: DateProfile) {
-    this.renderDates(dateProfile)
-    this.afterDatesRender()
-  }
-
-  _unrenderDates() {
-    this.beforeDatesUnrender()
-    this.unrenderDates()
-  }
-
-  renderDates(dateProfile: DateProfile) {}
-  unrenderDates() {}
-  renderBusinessHours(businessHours: EventStore) {}
-  renderEvents(eventStore: EventStore, eventUis: EventUiHash) {}
-  renderEventSelection(instanceId: string) {}
-
-  renderEventDragState(state: EventInteractionUiState) {}
-  unrenderEventDragState() {}
-
-  renderEventResizeState(state: EventInteractionUiState) {}
-  unrenderEventResizeState() {}
-
-  renderDateSelectionState(selection: DateSpan) {
-    if (selection) {
-      this.renderDateSelection(selection)
-    }
+    let dateId = this.subrender('_renderDates', [ props.dateProfile ], '_unrenderDates')
+    this.subrender('renderBusinessHours', [ props.businessHours, props.dateProfile, dateId ], 'unrenderBusinessHours')
+    this.subrender('renderDateSelectionState', [ props.dateSelection, dateId ], 'unrenderDateSelection')
+    let evId = this.subrender('_renderEvents', [ props.eventStore, props.eventUis, dateId ], 'unrenderEvents')
+    this.subrender('renderEventSelection', [ props.eventSelection, evId ], 'unrenderEventSelection')
+    this.subrender('renderEventDragState', [ props.eventDrag, dateId ], 'unrenderEventDragState')
+    this.subrender('renderEventResizeState', [ props.eventResize, dateId ], 'unrenderEventResizeState')
   }
 
-  renderDateSelection(selection: DateSpan) {
-  }
 
   // util for subclasses
   sliceEvents(eventStore: EventStore, eventUis: EventUiHash, allDay: boolean): EventRenderRange[] {
@@ -165,82 +137,83 @@ export default abstract class View extends DateComponent<ViewProps> {
   // -----------------------------------------------------------------------------------------------------------------
 
 
-  // TODO: kill
   updateSize(viewHeight: number, isAuto: boolean, isResize: boolean) {
-    let map = this.dirtySizeMethodNames
+    let { fillRenderer, eventRenderer, mirrorRenderer } = this
 
-    if (isResize || map.has('afterSkeletonRender') || map.has('_renderDates') || map.has('renderEvents')) {
+    if (isResize || this.isDateSizeDirty || this.isEventSizeDirty) {
       // sort of the catch-all sizing
       // anything that might cause dimension changes
       this.updateBaseSize(viewHeight, isAuto, isResize)
     }
 
-    if (isResize || map.has('renderBusinessHours')) {
-      this.computeBusinessHoursSize()
-    }
-
-    if (isResize || map.has('renderDateSelectionState') || map.has('renderEventDragState') || map.has('renderEventResizeState')) {
-      if (this.mirrorRenderer) {
-        this.mirrorRenderer.computeSizes()
-      }
-      if (this.fillRenderer) {
-        this.fillRenderer.computeSizes('highlight')
-      }
-    }
-
-    if (isResize || map.has('renderEvents')) {
-      this.computeEventsSize()
-    }
+    this.isDateSizeDirty = false
+    this.isEventSizeDirty = false
 
-    if (isResize || map.has('renderBusinessHours')) {
-      this.assignBusinessHoursSize()
-    }
+    fillRenderer && fillRenderer.computeSizes(isResize)
+    eventRenderer && eventRenderer.computeSizes(isResize)
+    mirrorRenderer && mirrorRenderer.computeSizes(isResize)
 
-    if (isResize || map.has('renderDateSelectionState') || map.has('renderEventDragState') || map.has('renderEventResizeState')) {
-      if (this.mirrorRenderer) {
-        this.mirrorRenderer.assignSizes()
-      }
-      if (this.fillRenderer) {
-        this.fillRenderer.assignSizes('highlight')
-      }
-    }
-
-    if (isResize || map.has('renderEvents')) {
-      this.assignEventsSize()
-    }
-
-    this.dirtySizeMethodNames = new Map()
+    fillRenderer && fillRenderer.assignSizes(isResize)
+    eventRenderer && eventRenderer.assignSizes(isResize)
+    mirrorRenderer && mirrorRenderer.assignSizes(isResize)
   }
 
 
   updateBaseSize(viewHeight: number, isAuto: boolean, isResize: boolean) {
   }
 
 
-  // Skeleton Rendering
+  // Date Rendering
   // -----------------------------------------------------------------------------------------------------------------
 
 
-  afterSkeletonRender() {
+  _renderDates(dateProfile: DateProfile) {
+    this.renderDates(dateProfile)
+    this.addScroll({ isDateInit: true })
+    this.startNowIndicator() // shouldn't render yet because updateSize will be called soon
+    this.isDateSizeDirty = true
+  }
+
+  _unrenderDates() {
+    this.stopNowIndicator()
+    this.unrenderDates()
   }
 
+  renderDates(dateProfile: DateProfile) {}
+  unrenderDates() {}
+
+
+  // Event Rendering
+  // -----------------------------------------------------------------------------------------------------------------
 
-  beforeSkeletonUnrender() {
+  _renderEvents(eventStore: EventStore, eventUis: EventUiHash) {
+    this.isEventSizeDirty = true
+    this.renderEvents(eventStore, eventUis)
   }
 
+  renderEvents(eventStore: EventStore, eventUis: EventUiHash) {}
 
-  // Date Rendering
+
+  // Other Rendering (uses eventRenderer and fillRenderer)
   // -----------------------------------------------------------------------------------------------------------------
 
 
-  afterDatesRender() {
-    this.addScroll({ isDateInit: true })
-    this.startNowIndicator() // shouldn't render yet because updateSize will be called soon
-  }
+  renderBusinessHours(businessHours: EventStore) {}
+  renderEventSelection(instanceId: string) {}
 
+  renderEventDragState(state: EventInteractionUiState) {}
+  unrenderEventDragState() {}
 
-  beforeDatesUnrender() {
-    this.stopNowIndicator()
+  renderEventResizeState(state: EventInteractionUiState) {}
+  unrenderEventResizeState() {}
+
+  renderDateSelectionState(selection: DateSpan) {
+    if (selection) {
+      this.renderDateSelection(selection)
+    }
+  }
+
+  renderDateSelection(selection: DateSpan) {
   }
 
 

diff --git a/src/agenda/TimeGrid.ts b/src/agenda/TimeGrid.ts
@@ -71,6 +71,8 @@ export default class TimeGrid extends DateComponent<TimeGridProps> {
 
   colPositions: PositionCache
   slatPositions: PositionCache
+  isSlatSizesDirty: boolean = false
+  isColSizesDirty: boolean = false
 
   rootBgContainerEl: HTMLElement
   bottomRuleEl: HTMLElement // hidden by default
@@ -180,63 +182,37 @@ export default class TimeGrid extends DateComponent<TimeGridProps> {
     let cells = props.cells
     this.colCnt = cells.length
 
-    this.subrender('renderSlats', [ props.dateProfile ], null, true)
-    let dateId = this.subrender('renderColumns', [ props.cells, props.dateProfile ], 'unrenderColumns', true)
-    this.subrender('renderBusinessHourSegs', [ props.businessHourSegs, props.dateProfile, dateId ], 'unrenderBusinessHours', true)
-    this.subrender('renderDateSelectionSegs', [ props.dateSelectionSegs, dateId ], 'unrenderDateSelection', true)
-    let evId = this.subrender('renderEventSegs', [ props.eventSegs, dateId ], 'unrenderEvents', true)
-    this.subrender('renderEventSelection', [ props.eventSelection, evId ], 'unrenderEventSelection', true)
-    this.subrender('renderEventDragSegs', [ props.eventDrag, dateId ], 'unrenderEventDragSegs', true)
-    this.subrender('renderEventResizeSegs', [ props.eventResize, dateId ], 'unrenderEventResizeSegs', true)
+    this.subrender('renderSlats', [ props.dateProfile ])
+    let dateId = this.subrender('renderColumns', [ props.cells, props.dateProfile ], 'unrenderColumns')
+    this.subrender('renderBusinessHourSegs', [ props.businessHourSegs, props.dateProfile, dateId ], 'unrenderBusinessHours')
+    this.subrender('renderDateSelectionSegs', [ props.dateSelectionSegs, dateId ], 'unrenderDateSelection')
+    let evId = this.subrender('renderEventSegs', [ props.eventSegs, dateId ], 'unrenderEvents')
+    this.subrender('renderEventSelection', [ props.eventSelection, evId ], 'unrenderEventSelection')
+    this.subrender('renderEventDragSegs', [ props.eventDrag, dateId ], 'unrenderEventDragSegs')
+    this.subrender('renderEventResizeSegs', [ props.eventResize, dateId ], 'unrenderEventResizeSegs')
   }
 
-  // TODO: kill
+
   updateSize(viewHeight: number, isAuto: boolean, isResize: boolean) {
-    let map = this.dirtySizeMethodNames
+    let { fillRenderer, eventRenderer, mirrorRenderer } = this
 
-    if (isResize || map.has('renderSlats')) {
+    if (isResize || this.isSlatSizesDirty) {
       this.buildSlatPositions()
+      this.isSlatSizesDirty = false
     }
 
-    if (isResize || map.has('renderColumns')) {
+    if (isResize || this.isColSizesDirty) {
       this.buildColPositions()
+      this.isColSizesDirty = false
     }
 
-    if (isResize || map.has('renderBusinessHourSegs')) {
-      this.computeBusinessHoursSize()
-    }
+    fillRenderer.computeSizes(isResize)
+    eventRenderer.computeSizes(isResize)
+    mirrorRenderer.computeSizes(isResize)
 
-    if (isResize || map.has('renderDateSelectionSegs') || map.has('renderEventDragSegs') || map.has('renderEventResizeSegs')) {
-      if (this.mirrorRenderer) {
-        this.mirrorRenderer.computeSizes()
-      }
-      if (this.fillRenderer) {
-        this.fillRenderer.computeSizes('highlight')
-      }
-    }
-
-    if (isResize || map.has('renderEventSegs')) {
-      this.computeEventsSize()
-    }
-
-    if (isResize || map.has('renderBusinessHourSegs')) {
-      this.assignBusinessHoursSize()
-    }
-
-    if (isResize || map.has('renderDateSelectionSegs') || map.has('renderEventDragSegs') || map.has('renderEventResizeSegs')) {
-      if (this.mirrorRenderer) {
-        this.mirrorRenderer.assignSizes()
-      }
-      if (this.fillRenderer) {
-        this.fillRenderer.assignSizes('highlight')
-      }
-    }
-
-    if (isResize || map.has('renderEventSegs')) {
-      this.assignEventsSize()
-    }
-
-    this.dirtySizeMethodNames = new Map()
+    fillRenderer.assignSizes(isResize)
+    eventRenderer.assignSizes(isResize)
+    mirrorRenderer.assignSizes(isResize)
   }
 
 
@@ -256,6 +232,8 @@ export default class TimeGrid extends DateComponent<TimeGridProps> {
       false,
       true // vertical
     )
+
+    this.isSlatSizesDirty = true
   }
 
 
@@ -329,6 +307,7 @@ export default class TimeGrid extends DateComponent<TimeGridProps> {
     )
 
     this.renderContentSkeleton()
+    this.isColSizesDirty = true
   }
 
 

diff --git a/src/agenda/TimeGridEventRenderer.ts b/src/agenda/TimeGridEventRenderer.ts
@@ -47,31 +47,29 @@ export default class TimeGridEventRenderer extends FgEventRenderer {
   }
 
 
-  computeSizes() {
+  computeSegSizes(allSegs: Seg[]) {
     let { timeGrid, segsByCol } = this
     let colCnt = timeGrid.colCnt
 
+    timeGrid.computeSegVerticals(allSegs) // horizontals relies on this
+
     if (segsByCol) {
       for (let col = 0; col < colCnt; col++) {
-        let segs = segsByCol[col]
-
-        timeGrid.computeSegVerticals(segs) // horizontals relies on this
-        this.computeSegHorizontals(segs) // compute horizontal coordinates, z-index's, and reorder the array
+        this.computeSegHorizontals(segsByCol[col]) // compute horizontal coordinates, z-index's, and reorder the array
       }
     }
   }
 
 
-  assignSizes() {
+  assignSegSizes(allSegs: Seg[]) {
     let { timeGrid, segsByCol } = this
     let colCnt = timeGrid.colCnt
 
+    timeGrid.assignSegVerticals(allSegs) // horizontals relies on this
+
     if (segsByCol) {
       for (let col = 0; col < colCnt; col++) {
-        let segs = segsByCol[col]
-
-        timeGrid.assignSegVerticals(segs)
-        this.assignSegCss(segs)
+        this.assignSegCss(segsByCol[col])
       }
     }
   }

diff --git a/src/agenda/TimeGridFillRenderer.ts b/src/agenda/TimeGridFillRenderer.ts
@@ -33,12 +33,12 @@ export default class TimeGridFillRenderer extends FillRenderer {
     })
   }
 
-  computeSizes(type) {
-    this.timeGrid.computeSegVerticals(this.getSegsByType(type))
+  computeSegSizes(segs: Seg[]) {
+    this.timeGrid.computeSegVerticals(segs)
   }
 
-  assignSizes(type) {
-    this.timeGrid.assignSegVerticals(this.getSegsByType(type))
+  assignSegSizes(segs: Seg[]) {
+    this.timeGrid.assignSegVerticals(segs)
   }
 
 }