kill MirrorRenderer

src/agenda/TimeGrid.ts

@@ -629,12 +629,12 @@ export default class TimeGrid extends DateComponent {
 
 
   // Renders a visual indication of an event being resized
-  renderEventResize(eventStore: EventStore, eventUis: EventUiHash, origSeg) {
+  renderEventResize(eventStore: EventStore, eventUis: EventUiHash, sourceSeg) {
     let segs = this.eventRangesToSegs(
       this.eventStoreToRanges(eventStore, eventUis)
     )
 
-    this.mirrorRenderer.renderEventResizingSegs(segs, origSeg)
+    this.mirrorRenderer.renderSegs(segs, { isResizing: true, sourceSeg })
   }
 
 
@@ -652,7 +652,7 @@ export default class TimeGrid extends DateComponent {
   renderDateSelection(selection: DateSpan) {
     if (selection) {
       if (this.opt('selectMirror')) {
-        this.mirrorRenderer.renderEventSegs(this.selectionToSegs(selection, true))
+        this.mirrorRenderer.renderSegs(this.selectionToSegs(selection, true), { isSelecting: true })
       } else {
         this.renderHighlightSegs(this.selectionToSegs(selection, false))
       }

src/agenda/TimeGridEventRenderer.ts

@@ -30,16 +30,11 @@ export default class TimeGridEventRenderer extends FgEventRenderer {
   }
 
 
-  attachSegs(segs: Seg[]) {
-    this.renderFgSegsIntoContainers(segs, this.timeGrid.fgContainerEls)
-  }
-
-
   // 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) {
+  attachSegs(segs: Seg[], mirrorInfo) {
     this.segsByCol = this.timeGrid.groupSegsByCol(segs)
-    this.timeGrid.attachSegsByCol(this.segsByCol, containerEls)
+    this.timeGrid.attachSegsByCol(this.segsByCol, this.timeGrid.fgContainerEls)
   }
 
 
@@ -52,26 +47,30 @@ export default class TimeGridEventRenderer extends FgEventRenderer {
   }
 
 
-  computeFgSizes() {
-    let { timeGrid } = this
+  computeSizes() {
+    let { timeGrid, segsByCol } = this
 
-    for (let col = 0; col < timeGrid.colCnt; col++) {
-      let segs = this.segsByCol[col]
+    if (segsByCol) {
+      for (let col = 0; col < timeGrid.colCnt; col++) {
+        let segs = segsByCol[col]
 
-      timeGrid.computeSegVerticals(segs) // horizontals relies on this
-      this.computeFgSegHorizontals(segs) // compute horizontal coordinates, z-index's, and reorder the array
+        timeGrid.computeSegVerticals(segs) // horizontals relies on this
+        this.computeFgSegHorizontals(segs) // compute horizontal coordinates, z-index's, and reorder the array
+      }
     }
   }
 
 
-  assignFgSizes() {
-    let { timeGrid } = this
+  assignSizes() {
+    let { timeGrid, segsByCol } = this
 
-    for (let col = 0; col < timeGrid.colCnt; col++) {
-      let segs = this.segsByCol[col]
+    if (segsByCol) {
+      for (let col = 0; col < timeGrid.colCnt; col++) {
+        let segs = segsByCol[col]
 
-      timeGrid.assignSegVerticals(segs)
-      this.assignFgSegHorizontals(segs)
+        timeGrid.assignSegVerticals(segs)
+        this.assignFgSegHorizontals(segs)
+      }
     }
   }
 
@@ -93,15 +92,15 @@ export default class TimeGridEventRenderer extends FgEventRenderer {
 
 
   // Renders the HTML for a single event segment's default rendering
-  renderSegHtml(seg: Seg) {
+  renderSegHtml(seg: Seg, mirrorInfo) {
     let eventRange = seg.eventRange
     let eventDef = eventRange.def
     let eventUi = eventRange.ui
     let allDay = eventDef.allDay
     let isDraggable = eventUi.startEditable
     let isResizableFromStart = seg.isStart && eventUi.durationEditable && this.context.options.eventResizableFromStart
     let isResizableFromEnd = seg.isEnd && eventUi.durationEditable
-    let classes = this.getSegClasses(seg, isDraggable, isResizableFromStart || isResizableFromEnd)
+    let classes = this.getSegClasses(seg, isDraggable, isResizableFromStart || isResizableFromEnd, mirrorInfo)
     let skinCss = cssToStr(this.getSkinCss(eventUi))
     let timeText
     let fullTimeText // more verbose time text. for the print stylesheet

src/agenda/TimeGridMirrorRenderer.ts

@@ -1,30 +1,23 @@
 import { applyStyle } from '../util/dom-manip'
-import MirrorRenderer from '../component/renderers/MirrorRenderer'
 import { Seg } from '../component/DateComponent'
+import TimeGridEventRenderer from './TimeGridEventRenderer'
 
 
-export default class TimeGridMirrorRenderer extends MirrorRenderer {
+export default class TimeGridMirrorRenderer extends TimeGridEventRenderer {
 
-  renderSegs(segs: Seg[], sourceSeg) {
-    let mirrorNodes = []
-    let i
-    let seg: Seg
-    let sourceEl
-    let computedStyle
+  attachSegs(segs: Seg[], mirrorInfo) {
+    let { sourceSeg } = mirrorInfo
 
-    // TODO: not good to call eventRenderer this way
-    this.eventRenderer.renderFgSegsIntoContainers(
-      segs,
-      this.component.mirrorContainerEls
-    )
+    this.segsByCol = this.timeGrid.groupSegsByCol(segs)
+    this.timeGrid.attachSegsByCol(this.segsByCol, this.timeGrid.mirrorContainerEls)
 
     // Try to make the segment that is in the same row as sourceSeg look the same
-    for (i = 0; i < segs.length; i++) {
-      seg = segs[i]
+    for (let seg of segs) {
 
       if (sourceSeg && sourceSeg.col === seg.col) {
-        sourceEl = sourceSeg.el
-        computedStyle = window.getComputedStyle(sourceEl)
+        let sourceEl = sourceSeg.el
+        let computedStyle = window.getComputedStyle(sourceEl)
+
         applyStyle(seg.el, {
           left: computedStyle.left,
           right: computedStyle.right,
@@ -37,19 +30,7 @@ export default class TimeGridMirrorRenderer extends MirrorRenderer {
           right: 0
         })
       }
-
-      mirrorNodes.push(seg.el)
     }
-
-    return mirrorNodes // must return the elements rendered
-  }
-
-  computeSize() {
-    this.component.computeSegVerticals(this.segs || [])
-  }
-
-  assignSize() {
-    this.component.assignSegVerticals(this.segs || [])
   }
 
 }

src/basic/DayGrid.ts

@@ -397,14 +397,14 @@ export default class DayGrid extends DateComponent {
 
 
   // Renders a visual indication of an event being resized
-  renderEventResize(eventStore: EventStore, eventUis: EventUiHash, origSeg) {
+  renderEventResize(eventStore: EventStore, eventUis: EventUiHash, sourceSeg) {
     let segs = this.eventRangesToSegs(
       this.eventStoreToRanges(eventStore, eventUis)
     )
 
     this.renderHighlightSegs(segs)
 
-    this.mirrorRenderer.renderEventResizingSegs(segs, origSeg)
+    this.mirrorRenderer.renderSegs(segs, { isResizing: true, sourceSeg })
   }
 
 

src/basic/DayGridEventRenderer.ts

@@ -21,7 +21,7 @@ export default class DayGridEventRenderer extends SimpleDayGridEventRenderer {
 
 
   // Renders the given foreground event segments onto the grid
-  attachSegs(segs: Seg[]) {
+  attachSegs(segs: Seg[], mirrorInfo) {
     let rowStructs = this.rowStructs = this.renderSegRows(segs)
 
     // append to each row's content skeleton

src/basic/DayGridMirrorRenderer.ts

@@ -1,24 +1,16 @@
 import { htmlToElement } from '../util/dom-manip'
-import MirrorRenderer from '../component/renderers/MirrorRenderer'
-import DayGrid from './DayGrid'
 import { Seg } from '../component/DateComponent'
+import DayGridEventRenderer from './DayGridEventRenderer'
 
 
-export default class DayGridMirrorRenderer extends MirrorRenderer {
+export default class DayGridMirrorRenderer extends DayGridEventRenderer {
 
-  component: DayGrid
-
-
-  // Renders a mock "mirror" event. `sourceSeg` is the associated internal segment object. It can be null.
-  renderSegs(segs: Seg[], sourceSeg) {
-    let mirrorNodes = []
-    let rowStructs
-
-    // TODO: not good to call eventRenderer this way
-    rowStructs = this.eventRenderer.renderSegRows(segs)
+  attachSegs(segs: Seg[], mirrorInfo) {
+    let { sourceSeg } = mirrorInfo
+    let rowStructs = this.rowStructs = this.renderSegRows(segs)
 
     // inject each new event skeleton into each associated row
-    this.component.rowEls.forEach(function(rowNode, row) {
+    this.dayGrid.rowEls.forEach(function(rowNode, row) {
       let skeletonEl = htmlToElement('<div class="fc-mirror-skeleton"><table></table></div>') // will be absolutely positioned
       let skeletonTopEl: HTMLElement
       let skeletonTop
@@ -28,6 +20,7 @@ export default class DayGridMirrorRenderer extends MirrorRenderer {
         skeletonTopEl = sourceSeg.el
       } else {
         skeletonTopEl = rowNode.querySelector('.fc-content-skeleton tbody')
+
         if (!skeletonTopEl) { // when no events
           skeletonTopEl = rowNode.querySelector('.fc-content-skeleton table')
         }
@@ -40,10 +33,7 @@ export default class DayGridMirrorRenderer extends MirrorRenderer {
       skeletonEl.querySelector('table').appendChild(rowStructs[row].tbodyEl)
 
       rowNode.appendChild(skeletonEl)
-      mirrorNodes.push(skeletonEl)
     })
-
-    return mirrorNodes // must return the elements rendered
   }
 
 }

src/basic/SimpleDayGridEventRenderer.ts

@@ -10,7 +10,7 @@ export default abstract class SimpleDayGridEventRenderer extends FgEventRenderer
 
 
   // Builds the HTML to be used for the default element for an individual segment
-  renderSegHtml(seg: Seg) {
+  renderSegHtml(seg: Seg, mirrorInfo) {
     let { options } = this.context
     let eventRange = seg.eventRange
     let eventDef = eventRange.def
@@ -19,7 +19,7 @@ export default abstract class SimpleDayGridEventRenderer extends FgEventRenderer
     let isDraggable = eventUi.startEditable
     let isResizableFromStart = allDay && seg.isStart && eventUi.durationEditable && options.eventResizableFromStart
     let isResizableFromEnd = allDay && seg.isEnd && eventUi.durationEditable
-    let classes = this.getSegClasses(seg, isDraggable, isResizableFromStart || isResizableFromEnd)
+    let classes = this.getSegClasses(seg, isDraggable, isResizableFromStart || isResizableFromEnd, mirrorInfo)
     let skinCss = cssToStr(this.getSkinCss(eventUi))
     let timeHtml = ''
     let timeText

src/component/DateComponent.ts

@@ -83,7 +83,7 @@ export default class DateComponent extends Component<DateComponentProps> {
     }
 
     if (this.mirrorRendererClass && this.eventRenderer) {
-      this.mirrorRenderer = new this.mirrorRendererClass(this, this.eventRenderer)
+      this.mirrorRenderer = new this.mirrorRendererClass(this)
     }
 
     if (this.isInteractable) {
@@ -347,7 +347,7 @@ export default class DateComponent extends Component<DateComponentProps> {
     }
 
     if (this.eventRenderer) {
-      this.eventRenderer.computeFgSizes()
+      this.eventRenderer.computeSizes()
     }
   }
 
@@ -356,7 +356,7 @@ export default class DateComponent extends Component<DateComponentProps> {
       this.fillRenderer.assignSize('bgEvent')
     }
     if (this.eventRenderer) {
-      this.eventRenderer.assignFgSizes()
+      this.eventRenderer.assignSizes()
     }
   }
 
@@ -414,17 +414,17 @@ export default class DateComponent extends Component<DateComponentProps> {
 
   // 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, origSeg: Seg | null) {
+  renderEventDrag(eventStore: EventStore, eventUis: EventUiHash, isEvent: boolean, sourceSeg: Seg | null) {
     let segs = this.eventRangesToSegs(
       this.eventStoreToRanges(eventStore, eventUis)
     )
 
     // 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.
-    if (isEvent && (this.doesDragMirror || origSeg && origSeg.component.doesDragMirror)) {
+    if (isEvent && (this.doesDragMirror || sourceSeg && sourceSeg.component.doesDragMirror)) {
       if (this.mirrorRenderer) {
-        this.mirrorRenderer.renderEventDraggingSegs(segs, origSeg)
+        this.mirrorRenderer.renderSegs(segs, { isDragging: true, sourceSeg })
       }
     }
 
@@ -516,13 +516,13 @@ export default class DateComponent extends Component<DateComponentProps> {
 
   computeMirrorSize() {
     if (this.mirrorRenderer) {
-      this.mirrorRenderer.computeSize()
+      this.mirrorRenderer.computeSizes()
     }
   }
 
   assignMirrorSize() {
     if (this.mirrorRenderer) {
-      this.mirrorRenderer.assignSize()
+      this.mirrorRenderer.assignSizes()
     }
   }
 
@@ -704,7 +704,7 @@ export default class DateComponent extends Component<DateComponentProps> {
   }
 
 
-  triggerRenderedSegs(segs: Seg[], isMirrors: boolean = false) {
+  triggerRenderedSegs(segs: Seg[], isMirrors: boolean) {
     if (this.hasPublicHandlers('eventPositioned')) {
       let calendar = this.calendar