fix slatCoords bug

packages/timegrid/src/TimeCols.tsx

@@ -24,7 +24,7 @@ import TimeColsSlats from './TimeColsSlats'
 import TimeColsContent from './TimeColsContent'
 import TimeColsBg from './TimeColsBg'
 import { __assign } from 'tslib'
-import TimeColsSlatsCoords from './TimeColsSlatsCoords'
+import TimeColsSlatsCoords, { TimeColsSlatsCoordsProps } from './TimeColsSlatsCoords'
 
 
 export interface TimeColsProps {
@@ -60,7 +60,7 @@ export interface TimeColsSeg extends Seg {
 export const TIME_COLS_NOW_INDICATOR_UNIT = 'minute'
 
 interface TimeColsState {
-  slatCoords?: TimeColsSlatsCoords
+  slatPositions?: PositionCache
 }
 
 
@@ -70,21 +70,30 @@ interface TimeColsState {
 export default class TimeCols extends BaseComponent<TimeColsProps, TimeColsState> {
 
   private processSlotOptions = memoize(processSlotOptions)
-  private colCoords: PositionCache
-  private slotDuration: Duration
+  private buildSlatCoords = memoize(buildSlatCoords)
   private snapDuration: Duration
   private snapsPerSlot: number
   private scrollResponder: ScrollResponder
+  private colCoords: PositionCache
+  private slatCoords: TimeColsSlatsCoords
 
 
   render(props: TimeColsProps, state: TimeColsState, context: ComponentContext) {
+    let { options } = context
     let { dateProfile } = props
 
-    let { slotDuration, snapDuration, snapsPerSlot } = this.processSlotOptions(context.options)
-    this.slotDuration = slotDuration
+    let { slotDuration, snapDuration, snapsPerSlot } = this.processSlotOptions(options)
     this.snapDuration = snapDuration
     this.snapsPerSlot = snapsPerSlot
 
+    this.slatCoords = this.buildSlatCoords({
+      positions: state.slatPositions,
+      dateProfile: props.dateProfile,
+      slotDuration,
+      cells: props.cells,
+      eventMinHeight: options.timeGridEventMinHeight
+    })
+
     return (
       <div class='fc-time-grid' ref={props.rootElRef}>
         <TimeColsBg
@@ -120,7 +129,7 @@ export default class TimeCols extends BaseComponent<TimeColsProps, TimeColsState
           clientWidth={props.clientWidth}
           tableMinWidth={props.tableMinWidth}
           tableColGroupNode={props.tableColGroupNode}
-          coords={state.slatCoords}
+          coords={this.slatCoords}
           forPrint={props.forPrint}
         />
       </div>
@@ -145,7 +154,7 @@ export default class TimeCols extends BaseComponent<TimeColsProps, TimeColsState
 
   handleScrollRequest = (request: ScrollRequest) => {
     let { onScrollTopRequest } = this.props
-    let { slatCoords } = this.state
+    let { slatCoords } = this
 
     if (onScrollTopRequest && slatCoords) {
 
@@ -167,32 +176,22 @@ export default class TimeCols extends BaseComponent<TimeColsProps, TimeColsState
   }
 
 
-  handleSlatCoords = (coords: PositionCache | null) => {
-    let { props } = this
-
-    let slatCoords = coords ? new TimeColsSlatsCoords(
-      coords,
-      props.dateProfile,
-      this.slotDuration,
-      props.cells,
-      this.context
-    ) : null
-
-    this.setState({ slatCoords })
+  handleSlatCoords = (slatPositions: PositionCache | null) => {
+    this.setState({ slatPositions })
   }
 
 
   positionToHit(positionLeft, positionTop) {
     let { dateEnv } = this.context
-    let { slatCoords } = this.state
     let { snapsPerSlot, snapDuration, colCoords } = this
+    let { slatPositions } = this.state
 
     let colIndex = colCoords.leftToIndex(positionLeft)
-    let slatIndex = slatCoords.positions.topToIndex(positionTop)
+    let slatIndex = slatPositions.topToIndex(positionTop)
 
     if (colIndex != null && slatIndex != null) {
-      let slatTop = slatCoords.positions.tops[slatIndex]
-      let slatHeight = slatCoords.positions.getHeight(slatIndex)
+      let slatTop = slatPositions.tops[slatIndex]
+      let slatHeight = slatPositions.getHeight(slatIndex)
       let partial = (positionTop - slatTop) / slatHeight // floating point number between 0 and 1
       let localSnapIndex = Math.floor(partial * snapsPerSlot) // the snap # relative to start of slat
       let snapIndex = slatIndex * snapsPerSlot + localSnapIndex
@@ -288,3 +287,12 @@ function processSlotOptions(options) {
 
   return { slotDuration, snapDuration, snapsPerSlot }
 }
+
+
+function buildSlatCoords(slatCoordProps: TimeColsSlatsCoordsProps) {
+  if (slatCoordProps.positions) {
+    return new TimeColsSlatsCoords(slatCoordProps)
+  } else {
+    return null
+  }
+}

packages/timegrid/src/TimeColsEvents.ts

@@ -65,7 +65,7 @@ export default class TimeColsEvents extends FgEventRenderer<TimeColsEventsProps>
 
   computeSegSizes(allSegs: Seg[], slatCoords: TimeColsSlatsCoords) {
     let { segsByCol } = this
-    let colCnt = slatCoords.cells.length
+    let colCnt = this.props.containerEls.length
 
     slatCoords.computeSegVerticals(allSegs) // horizontals relies on this
 
@@ -77,7 +77,7 @@ export default class TimeColsEvents extends FgEventRenderer<TimeColsEventsProps>
 
   assignSegSizes(allSegs: Seg[], slatCoords: TimeColsSlatsCoords) {
     let { segsByCol } = this
-    let colCnt = slatCoords.cells.length
+    let colCnt = this.props.containerEls.length
 
     slatCoords.assignSegVerticals(allSegs) // horizontals relies on this
 

packages/timegrid/src/TimeColsSlatsCoords.ts

@@ -1,22 +1,25 @@
-import { PositionCache, DateMarker, startOfDay, createDuration, asRoughMs, DateProfile, Duration, Seg, applyStyle, ComponentContext, rangeContainsMarker } from '@fullcalendar/core'
+import { PositionCache, DateMarker, startOfDay, createDuration, asRoughMs, DateProfile, Duration, Seg, applyStyle, rangeContainsMarker } from '@fullcalendar/core'
 import { DayBgCellModel } from '@fullcalendar/daygrid'
 
 
+export interface TimeColsSlatsCoordsProps {
+  positions: PositionCache
+  dateProfile: DateProfile
+  slotDuration: Duration
+  cells: DayBgCellModel[]
+  eventMinHeight: number
+}
+
+
 export default class TimeColsSlatsCoords {
 
 
-  constructor(
-    public positions: PositionCache,
-    private dateProfile: DateProfile,
-    private slotDuration: Duration,
-    public cells: DayBgCellModel[],
-    private context: ComponentContext
-  ) {
+  constructor(private props: TimeColsSlatsCoordsProps) {
   }
 
 
   safeComputeTop(date: DateMarker | null) {
-    if (date && rangeContainsMarker(this.dateProfile.currentRange, date)) {
+    if (date && rangeContainsMarker(this.props.dateProfile.currentRange, date)) {
       return this.computeDateTop(date)
     }
   }
@@ -34,9 +37,9 @@ export default class TimeColsSlatsCoords {
 
   // Computes the top coordinate, relative to the bounds of the grid, of the given time (a Duration).
   computeTimeTop(duration: Duration) {
-    let { positions, dateProfile } = this
+    let { positions, dateProfile, slotDuration } = this.props
     let len = positions.els.length
-    let slatCoverage = (duration.milliseconds - asRoughMs(dateProfile.minTime)) / asRoughMs(this.slotDuration) // floating-point value of # of slots covered
+    let slatCoverage = (duration.milliseconds - asRoughMs(dateProfile.minTime)) / asRoughMs(slotDuration) // floating-point value of # of slots covered
     let slatIndex
     let slatRemainder
 
@@ -62,15 +65,14 @@ export default class TimeColsSlatsCoords {
 
   // For each segment in an array, computes and assigns its top and bottom properties
   computeSegVerticals(segs: Seg[]) {
-    let { options } = this.context
-    let eventMinHeight = options.timeGridEventMinHeight
+    let { eventMinHeight, cells } = this.props
     let i
     let seg
     let dayDate
 
     for (i = 0; i < segs.length; i++) {
       seg = segs[i]
-      dayDate = this.cells[seg.col].date
+      dayDate = cells[seg.col].date
 
       seg.top = this.computeDateTop(seg.start, dayDate)
       seg.bottom = Math.max(