get cross-calendar dragging right

src/agenda/TimeGrid.ts

@@ -40,6 +40,8 @@ export default class TimeGrid extends DateComponent {
   getCellDate: DayTableInterface['getCellDate']
 
   isInteractable = true
+  doesDragHelper = true
+  doesDragHighlight = false
 
   view: any // TODO: make more general and/or remove
   helperRenderer: any
@@ -613,34 +615,6 @@ export default class TimeGrid extends DateComponent {
   }
 
 
-
-  /* Event Drag Visualization
-  ------------------------------------------------------------------------------------------------------------------*/
-
-
-  // Renders a visual indication of an event being dragged over the specified date(s).
-  // A returned value of `true` signals that a mock "helper" event has been rendered.
-  renderDrag(eventStore: EventStore, origSeg, willCreateEvent) {
-    let segs = this.eventStoreToSegs(eventStore)
-
-    // if from within the calendar OR external element that will create an event, render helper
-    if (origSeg || willCreateEvent) {
-      if (segs.length) {
-        this.helperRenderer.renderEventDraggingSegs(segs, origSeg)
-      }
-    } else { // otherwise, just render a highlight
-      this.renderHighlightSegs(segs)
-    }
-  }
-
-
-  // Unrenders any visual indication of an event being dragged
-  unrenderDrag() {
-    this.unrenderHighlight()
-    this.helperRenderer.unrender()
-  }
-
-
   /* Event Resize Visualization
   ------------------------------------------------------------------------------------------------------------------*/
 

src/basic/DayGrid.ts

@@ -46,6 +46,8 @@ export default class DayGrid extends DateComponent {
   breakOnWeeks: DayTableInterface['breakOnWeeks']
 
   isInteractable = true
+  doesDragHelper = false
+  doesDragHighlight = true
 
   view: View // TODO: make more general and/or remove
   helperRenderer: any
@@ -357,31 +359,6 @@ export default class DayGrid extends DateComponent {
   }
 
 
-  /* Event Drag Visualization
-  ------------------------------------------------------------------------------------------------------------------*/
-
-
-  // Renders a visual indication of an event or external element being dragged.
-  // `eventLocation` has zoned start and end (optional)
-  renderDrag(eventStore: EventStore, origSeg) {
-    let segs = this.eventStoreToSegs(eventStore)
-
-    this.renderHighlightSegs(segs)
-
-    // render drags from OTHER components as helpers
-    if (segs.length && origSeg && origSeg.component !== this) {
-      this.helperRenderer.renderEventDraggingSegs(segs, origSeg)
-    }
-  }
-
-
-  // Unrenders any visual indication of a hovering event
-  unrenderDrag() {
-    this.unrenderHighlight()
-    this.helperRenderer.unrender()
-  }
-
-
   /* Event Resize Visualization
   ------------------------------------------------------------------------------------------------------------------*/
 

src/component/DateComponent.ts

@@ -49,6 +49,8 @@ export default abstract class DateComponent extends Component {
 
   // self-config, overridable by subclasses
   isInteractable: boolean = false
+  doesDragHelper: boolean = false
+  doesDragHighlight: boolean = false
   segSelector: string = '.fc-event-container > *' // what constitutes an event element?
 
   // if defined, holds the unit identified (ex: "year" or "month") that determines the level of granularity
@@ -591,15 +593,31 @@ export default abstract class DateComponent extends Component {
 
   // Renders a visual indication of a event or external-element drag over the given drop zone.
   // If an external-element, seg will be `null`.
-  // Must return elements used for any mock events.
   renderDrag(eventStore: EventStore, origSeg, willCreateEvent) {
-    // subclasses can implement
+    let segs = this.eventStoreToSegs(eventStore)
+    let noEvent = !origSeg && !willCreateEvent
+
+    if (
+      !noEvent &&
+      (this.doesDragHelper || origSeg && origSeg.component.doesDragHelper) &&
+      this.helperRenderer
+    ) {
+      this.helperRenderer.renderEventDraggingSegs(segs, origSeg)
+    }
+
+    if (noEvent || this.doesDragHighlight) {
+      this.renderHighlightSegs(segs)
+    }
   }
 
 
   // Unrenders a visual indication of an event or external-element being dragged.
   unrenderDrag() {
-    // subclasses can implement
+    this.unrenderHighlight()
+
+    if (this.helperRenderer) {
+      this.helperRenderer.unrender()
+    }
   }
 
 

src/dnd/ElementMirror.ts

@@ -10,7 +10,7 @@ Must call start + handleMove + stop.
 */
 export default class ElementMirror {
 
-  isVisible: boolean = false
+  isVisible: boolean = false // must be explicitly enabled
   origX?: number
   origY?: number
   deltaX?: number

src/interactions/HitDragging.ts

@@ -17,7 +17,7 @@ export interface Hit {
 emits:
 - pointerdown
 - dragstart
-- hitchange
+- hitchange - fires initially, even if not over a hit
 - pointerup
 - (hitchange - again, to null, if ended over a hit)
 - dragend
@@ -105,7 +105,7 @@ export default class HitDragging {
 
   handleDragStart = (ev: PointerDragEvent) => {
     this.emitter.trigger('dragstart', ev)
-    this.handleMove(ev)
+    this.handleMove(ev, true) // force = fire even if initially null
   }
 
   handleDragMove = (ev: PointerDragEvent) => {
@@ -127,13 +127,13 @@ export default class HitDragging {
     this.emitter.trigger('dragend', ev)
   }
 
-  handleMove(ev: PointerDragEvent) {
+  handleMove(ev: PointerDragEvent, force?) {
     let hit = this.queryHit(
       ev.pageX + this.coordAdjust.left,
       ev.pageY + this.coordAdjust.top
     )
 
-    if (!isHitsEqual(this.movingHit, hit)) {
+    if (force || !isHitsEqual(this.movingHit, hit)) {
       this.movingHit = hit
       this.emitter.trigger('hitchange', hit, false, ev)
     }