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,7 +92,7 @@ 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
@@ -101,7 +100,7 @@ export default class TimeGridEventRenderer extends FgEventRenderer {
     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,7 +414,7 @@ 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)
     )
@@ -422,9 +422,9 @@ export default class DateComponent extends Component<DateComponentProps> {
     // 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
 

src/component/renderers/FgEventRenderer.ts

@@ -25,16 +25,16 @@ export default abstract class FgEventRenderer {
   }
 
 
-  renderSegs(segs: Seg[]) {
+  renderSegs(segs: Seg[], mirrorInfo?) {
     this.rangeUpdated() // called too frequently :(
 
     // render an `.el` on each seg
     // returns a subset of the segs. segs that were actually rendered
-    segs = this.renderSegEls(segs, false)
+    segs = this.renderSegEls(segs, mirrorInfo)
 
     this.segs = segs
-    this.attachSegs(segs)
-    this.context.view.triggerRenderedSegs(this.segs)
+    this.attachSegs(segs, mirrorInfo)
+    this.context.view.triggerRenderedSegs(this.segs, Boolean(mirrorInfo))
   }
 
 
@@ -45,8 +45,8 @@ export default abstract class FgEventRenderer {
   }
 
 
-  abstract renderSegHtml(seg: Seg): string
-  abstract attachSegs(segs: Seg[])
+  abstract renderSegHtml(seg: Seg, mirrorInfo): string
+  abstract attachSegs(segs: Seg[], mirrorInfo)
   abstract detachSegs(segs: Seg[])
 
 
@@ -78,7 +78,7 @@ export default abstract class FgEventRenderer {
 
   // Renders and assigns an `el` property for each foreground event segment.
   // Only returns segments that successfully rendered.
-  renderSegEls(segs: Seg[], isMirrors: boolean) {
+  renderSegEls(segs: Seg[], mirrorInfo) {
     let html = ''
     let i
 
@@ -86,7 +86,7 @@ export default abstract class FgEventRenderer {
 
       // build a large concatenation of event segment HTML
       for (i = 0; i < segs.length; i++) {
-        html += this.renderSegHtml(segs[i])
+        html += this.renderSegHtml(segs[i], mirrorInfo)
       }
 
       // Grab individual elements from the combined HTML string. Use each as the default rendering.
@@ -99,7 +99,7 @@ export default abstract class FgEventRenderer {
         }
       })
 
-      segs = filterSegsViaEls(this.context.view, segs, isMirrors)
+      segs = filterSegsViaEls(this.context.view, segs, Boolean(mirrorInfo))
     }
 
     return segs
@@ -107,7 +107,7 @@ export default abstract class FgEventRenderer {
 
 
   // Generic utility for generating the HTML classNames for an event segment's element
-  getSegClasses(seg: Seg, isDraggable, isResizable) {
+  getSegClasses(seg: Seg, isDraggable, isResizable, mirrorInfo) {
     let classes = [
       'fc-event',
       seg.isStart ? 'fc-start' : 'fc-not-start',
@@ -122,6 +122,18 @@ export default abstract class FgEventRenderer {
       classes.push('fc-resizable')
     }
 
+    if (mirrorInfo) {
+      classes.push('fc-mirror')
+
+      if (mirrorInfo.isDragging) {
+        classes.push('fc-dragging')
+      }
+
+      if (mirrorInfo.isResizing) {
+        classes.push('fc-resizing')
+      }
+    }
+
     return classes
   }
 
@@ -225,11 +237,11 @@ export default abstract class FgEventRenderer {
   }
 
 
-  computeFgSizes() {
+  computeSizes() {
   }
 
 
-  assignFgSizes() {
+  assignSizes() {
   }
 
 }

src/component/renderers/MirrorRenderer.ts

@@ -1,81 +0,0 @@
-import { removeElement } from '../../util/dom-manip'
-import { Seg } from '../DateComponent'
-
-
-export default abstract class MirrorRenderer {
-
-  view: any
-  component: any
-  eventRenderer: any
-  mirrorEls: HTMLElement[]
-  segs: Seg[]
-
-
-  constructor(component, eventRenderer) {
-    this.view = component.view || component
-    this.component = component
-    this.eventRenderer = eventRenderer
-  }
-
-
-  renderEventDraggingSegs(segs: Seg[], sourceSeg) {
-    this.renderEventSegs(
-      segs,
-      sourceSeg,
-      'fc-dragging'
-    )
-  }
-
-
-  renderEventResizingSegs(segs: Seg[], sourceSeg) {
-    this.renderEventSegs(
-      segs,
-      sourceSeg,
-      'fc-resizing'
-    )
-  }
-
-
-  renderEventSegs(segs: Seg[], sourceSeg?, extraClassName?) {
-    let i
-
-    // assigns each seg's el and returns a subset of segs that were rendered
-    segs = this.eventRenderer.renderSegEls(segs, true) // isMirrors=true
-
-    for (i = 0; i < segs.length; i++) {
-      let classList = segs[i].el.classList
-      classList.add('fc-mirror')
-      if (extraClassName) {
-        classList.add(extraClassName)
-      }
-    }
-
-    this.mirrorEls = this.renderSegs(segs, sourceSeg)
-    this.segs = segs
-
-    this.view.triggerRenderedSegs(segs, true) // isMirrors=true
-  }
-
-
-  computeSize() {
-  }
-
-
-  assignSize() {
-  }
-
-
-  /*
-  Must return all mock event elements
-  */
-  abstract renderSegs(segs: Seg[], sourceSeg?): HTMLElement[]
-
-
-  unrender() {
-    if (this.mirrorEls) {
-      this.mirrorEls.forEach(removeElement)
-      this.mirrorEls = null
-    }
-  }
-
-}

src/exports.ts

@@ -95,7 +95,6 @@ export { defineView, getViewConfig } from './ViewRegistry'
 export { default as DayTableMixin } from './component/DayTableMixin'
 export { default as FgEventRenderer } from './component/renderers/FgEventRenderer'
 export { default as FillRenderer } from './component/renderers/FillRenderer'
-export { default as MirrorRenderer } from './component/renderers/MirrorRenderer'
 export { default as AgendaView } from './agenda/AgendaView'
 export { default as TimeGrid } from './agenda/TimeGrid'
 export { default as DayGrid } from './basic/DayGrid'