change how timegrid size is updated

src/agenda/TimeGrid.ts

@@ -473,12 +473,13 @@ export default class TimeGrid extends DateComponent {
 
   updateSize(totalHeight, isAuto, isResize) {
     super.updateSize(totalHeight, isAuto, isResize)
-
     this.buildCoordCaches()
 
-    if (isResize) {
-      this.updateSegVerticals(this.eventRenderer.getSegs())
-    }
+    this.eventRenderer.computeFgSizes()
+    this.fillRenderer.computeSizes()
+
+    this.eventRenderer.assignFgSizes()
+    this.fillRenderer.assignSizes()
   }
 
 
@@ -525,14 +526,6 @@ export default class TimeGrid extends DateComponent {
   }
 
 
-  // Refreshes the CSS top/bottom coordinates for each segment element.
-  // Works when called after initial render, after a window resize/zoom for example.
-  updateSegVerticals(segs) {
-    this.computeSegVerticals(segs)
-    this.assignSegVerticals(segs)
-  }
-
-
   // For each segment in an array, computes and assigns its top and bottom properties
   computeSegVerticals(segs) {
     let eventMinHeight = this.opt('agendaEventMinHeight')

src/agenda/TimeGridEventRenderer.ts

@@ -13,6 +13,7 @@ Does not own rendering. Use for low-level util methods by TimeGrid.
 export default class TimeGridEventRenderer extends EventRenderer {
 
   timeGrid: any
+  segsByCol: any
 
 
   constructor(timeGrid, fillRenderer) {
@@ -29,16 +30,8 @@ export default class TimeGridEventRenderer extends EventRenderer {
   // Given an array of foreground segments, render a DOM element for each, computes position,
   // and attaches to the column inner-container elements.
   renderFgSegsIntoContainers(segs: Seg[], containerEls) {
-    let segsByCol
-    let col
-
-    segsByCol = this.timeGrid.groupSegsByCol(segs)
-
-    for (col = 0; col < this.timeGrid.colCnt; col++) {
-      this.updateFgSegCoords(segsByCol[col])
-    }
-
-    this.timeGrid.attachSegsByCol(segsByCol, containerEls)
+    this.segsByCol = this.timeGrid.groupSegsByCol(segs)
+    this.timeGrid.attachSegsByCol(this.segsByCol, containerEls)
   }
 
 
@@ -48,6 +41,32 @@ export default class TimeGridEventRenderer extends EventRenderer {
         removeElement(seg.el)
       })
     }
+
+    this.segsByCol = null
+  }
+
+
+  computeFgSizes() {
+    let { timeGrid } = this
+
+    for (let col = 0; col < timeGrid.colCnt; col++) {
+      let segs = this.segsByCol[col]
+
+      timeGrid.computeSegVerticals(segs) // horizontals relies on this
+      this.computeFgSegHorizontals(segs) // compute horizontal coordinates, z-index's, and reorder the array
+    }
+  }
+
+
+  assignFgSizes() {
+    let { timeGrid } = this
+
+    for (let col = 0; col < timeGrid.colCnt; col++) {
+      let segs = this.segsByCol[col]
+
+      timeGrid.assignSegVerticals(segs)
+      this.assignFgSegHorizontals(segs)
+    }
   }
 
 
@@ -145,16 +164,6 @@ export default class TimeGridEventRenderer extends EventRenderer {
   }
 
 
-  // Given segments that are assumed to all live in the *same column*,
-  // compute their verical/horizontal coordinates and assign to their elements.
-  updateFgSegCoords(segs: Seg[]) {
-    this.timeGrid.computeSegVerticals(segs) // horizontals relies on this
-    this.computeFgSegHorizontals(segs) // compute horizontal coordinates, z-index's, and reorder the array
-    this.timeGrid.assignSegVerticals(segs)
-    this.assignFgSegHorizontals(segs)
-  }
-
-
   // Given an array of segments that are all in the same column, sets the backwardCoord and forwardCoord on each.
   // NOTE: Also reorders the given array by date!
   computeFgSegHorizontals(segs: Seg[]) {
@@ -162,7 +171,7 @@ export default class TimeGridEventRenderer extends EventRenderer {
     let level0
     let i
 
-    this.sortEventSegs(segs) // order by certain criteria
+    segs = this.sortEventSegs(segs) // order by certain criteria
     levels = buildSlotSegLevels(segs)
     computeForwardSlotSegs(levels)
 

src/agenda/TimeGridFillRenderer.ts

@@ -17,7 +17,6 @@ export default class TimeGridFillRenderer extends FillRenderer {
       containerEls = timeGrid.highlightContainerEls
     }
 
-    timeGrid.updateSegVerticals(segs)
     timeGrid.attachSegsByCol(timeGrid.groupSegsByCol(segs), containerEls)
 
     return segs.map(function(seg) {
@@ -25,4 +24,12 @@ export default class TimeGridFillRenderer extends FillRenderer {
     })
   }
 
+  computeSizes() {
+    this.component.computeSegVerticals(this.getSegs())
+  }
+
+  assignSizes() {
+    this.component.assignSegVerticals(this.getSegs())
+  }
+
 }

src/basic/DayGrid.ts

@@ -740,7 +740,7 @@ export default class DayGrid extends DateComponent {
 
     // force an order because eventsToSegs doesn't guarantee one
     // TODO: research if still needed
-    this.eventRenderer.sortEventSegs(newSegs)
+    newSegs = this.eventRenderer.sortEventSegs(newSegs)
 
     return newSegs
   }

src/basic/DayGridEventRenderer.ts

@@ -174,7 +174,7 @@ export default class DayGridEventRenderer extends EventRenderer {
 
     // Give preference to elements with certain criteria, so they have
     // a chance to be closer to the top.
-    this.sortEventSegs(segs)
+    segs = this.sortEventSegs(segs)
 
     for (i = 0; i < segs.length; i++) {
       seg = segs[i]

src/component/renderers/BusinessHourRenderer.ts

@@ -3,7 +3,6 @@ export default class BusinessHourRenderer {
 
   component: any
   fillRenderer: any
-  segs: any
 
 
   constructor(component, fillRenderer) {
@@ -27,13 +26,6 @@ export default class BusinessHourRenderer {
     if (this.fillRenderer) {
       this.fillRenderer.unrender('businessHours')
     }
-
-    this.segs = null
-  }
-
-
-  getSegs() {
-    return this.segs || []
   }
 
 }

src/component/renderers/EventRenderer.ts

@@ -414,8 +414,10 @@ export default class EventRenderer {
   }
 
 
-  sortEventSegs(segs) {
+  sortEventSegs(segs): Seg[] {
+    segs = segs.slice() // copy
     segs.sort(this.compareEventSegs.bind(this))
+    return segs
   }
 
 

src/component/renderers/FillRenderer.ts

@@ -7,36 +7,42 @@ export default class FillRenderer { // use for highlight, background events, bus
 
   fillSegTag: string = 'div'
   component: any
-  elsByFill: any // a hash of element sets used for rendering each fill. Keyed by fill name.
+  containerElsByType: any // a hash of element sets used for rendering each fill. Keyed by fill name.
+  renderedSegsByType: any
 
 
   constructor(component) {
     this.component = component
-    this.elsByFill = {}
+    this.containerElsByType = {}
+    this.renderedSegsByType = {}
   }
 
 
   renderSegs(type, segs: Seg[], props) {
-    let els
+    let renderedSegs = this.buildSegEls(type, segs, props) // assignes `.el` to each seg. returns successfully rendered segs
+    let containerEls = this.attachSegEls(type, renderedSegs)
 
-    segs = this.buildSegEls(type, segs, props) // assignes `.el` to each seg. returns successfully rendered segs
-    els = this.attachSegEls(type, segs)
-
-    if (els) {
-      this.reportEls(type, els)
+    if (containerEls) {
+      (this.containerElsByType[type] || (this.containerElsByType[type] = []))
+        .push(...containerEls)
     }
 
-    return segs
+    this.renderedSegsByType[type] = renderedSegs
+
+    return renderedSegs
   }
 
 
   // Unrenders a specific type of fill that is currently rendered on the grid
   unrender(type) {
-    let els = this.elsByFill[type]
-    if (els) {
-      els.forEach(removeElement)
-      delete this.elsByFill[type]
+    let containerEls = this.containerElsByType[type]
+
+    if (containerEls) {
+      containerEls.forEach(removeElement)
+      delete this.containerElsByType[type]
     }
+
+    delete this.renderedSegsByType[type]
   }
 
 
@@ -90,14 +96,21 @@ export default class FillRenderer { // use for highlight, background events, bus
 
 
   // Should return wrapping DOM structure
-  attachSegEls(type, segs: Seg[]) {
+  attachSegEls(type, segs: Seg[]): HTMLElement[] {
     // subclasses must implement
+    return null
   }
 
 
-  reportEls(type, els) {
-    (this.elsByFill[type] || (this.elsByFill[type] = []))
-      .push(...els)
+  getSegs() {
+    let { renderedSegsByType } = this
+    let segs = []
+
+    for (let type in renderedSegsByType) {
+      segs.push(...renderedSegsByType[type])
+    }
+
+    return segs
   }
 
 }

src/list/ListView.ts

@@ -172,7 +172,7 @@ export default class ListView extends View {
         // append a day header
         tbodyEl.appendChild(this.buildDayHeaderRow(this.dayDates[dayIndex]))
 
-        this.eventRenderer.sortEventSegs(daySegs)
+        daySegs = this.eventRenderer.sortEventSegs(daySegs)
 
         for (i = 0; i < daySegs.length; i++) {
           tbodyEl.appendChild(daySegs[i].el) // append event row