fix bug with daygrid event positioning

fullcalendar · May 19, 2020 · be10c8e · be10c8e
1 parent 0cd006b
commit be10c8e
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 14 deletions.
diff --git a/packages/__tests__/src/event-render/dayGrid-events.js b/packages/__tests__/src/event-render/dayGrid-events.js
@@ -0,0 +1,38 @@
+import { DayGridViewWrapper } from '../lib/wrappers/DayGridViewWrapper'
+import { rectsIntersect } from '../lib/geom'
+
+
+describe('dayGrid advanced event rendering', function() {
+
+  // https://github.com/fullcalendar/fullcalendar/issues/5408
+  it('renders without intersecting', function() {
+    let calendar = initCalendar({
+      initialView: 'dayGridMonth',
+      initialDate: '2020-05-01',
+      events: [
+        { start: '2020-05-02', end: '2020-05-04', title: 'event a' },
+        { start: '2020-05-02', end: '2020-05-04', title: 'event b' },
+        { start: '2020-05-03', end: '2020-05-05', title: 'event c' },
+        { start: '2020-05-04', title: 'event d' },
+        { start: '2020-05-04', title: 'event e' }
+      ]
+    })
+
+    let viewWrapper = new DayGridViewWrapper(calendar)
+    let eventEls = viewWrapper.dayGrid.getEventEls()
+    let rects = eventEls.map((el) => el.getBoundingClientRect())
+    let intersects = false
+
+    for (let i = 0; i < rects.length; i++) {
+      for (let j = i + 1; j < rects.length; j++) {
+        if (rectsIntersect(rects[i], rects[j])) {
+          console.log('rect intersection', eventEls[i], eventEls[j])
+          intersects = true
+        }
+      }
+    }
+
+    expect(intersects).toBe(false)
+  })
+
+})
diff --git a/packages/__tests__/src/lib/geom.js b/packages/__tests__/src/lib/geom.js
@@ -15,6 +15,10 @@ export function intersectRects(rect0, rect1) {
   )
 }
 
+export function rectsIntersect(rect0, rect1) {
+  return rect0.left < rect1.right && rect0.right > rect1.left && rect0.top < rect1.bottom && rect0.bottom > rect1.top
+}
+
 export function joinRects(rect1, rect2) {
   return {
     left: Math.min(rect1.left, rect2.left),

diff --git a/packages/daygrid/src/event-placement.ts b/packages/daygrid/src/event-placement.ts
@@ -36,18 +36,11 @@ export function computeFgSegPlacement( // for one row. TODO: print mode?
 
   segs = sortEventSegs(segs, eventOrderSpecs) as TableSeg[]
 
-  // TODO: try all seg placements and choose the topmost! dont quit after first
-  // SOLUTION: when placed, insert into colPlacements
   for (let seg of segs) {
     let { instanceId } = seg.eventRange.instance
     let eventHeight = eventHeights[instanceId]
 
-    placeSeg(seg, eventHeight || 0)
-  }
-
-  // sort. for dayMaxEvents and segTops computation
-  for (let placements of colPlacements) {
-    placements.sort(cmpPlacements) // sorts in-place
+    placeSeg(seg, eventHeight || 0) // will keep colPlacements sorted by top
   }
 
   if (dayMaxEvents === true || dayMaxEventRows === true) {
@@ -116,7 +109,15 @@ export function computeFgSegPlacement( // for one row. TODO: print mode?
   function tryPlaceSegAt(seg, segHeight, top) {
     if (canPlaceSegAt(seg, segHeight, top)) {
       for (let col = seg.firstCol; col <= seg.lastCol; col++) {
-        colPlacements[col].push({
+        let placements = colPlacements[col]
+        let insertionIndex = 0
+        while (
+          insertionIndex < placements.length &&
+          top > placements[insertionIndex].top
+        ) {
+          insertionIndex++
+        }
+        placements.splice(insertionIndex, 0, { // will keep it sorted by top
           seg,
           top,
           bottom: top + segHeight
@@ -182,11 +183,6 @@ function extractAllColSegs(oneColPlacements: TableSegPlacement[], col: number) {
 }
 
 
-function cmpPlacements(placement0, placement1) {
-  return placement0.top - placement1.top
-}
-
-
 function limitByMaxHeight(hiddenCnts, segIsHidden, colPlacements, maxContentHeight) {
   limitEvents(hiddenCnts, segIsHidden, colPlacements, true, (placement) => {
     return placement.bottom <= maxContentHeight