improvements to daygrid event print rendering

packages/common/src/event-placement.ts

@@ -4,7 +4,6 @@ export interface SegInput {
   spanStart: number
   spanEnd: number
   thickness: number
-  forceAbsolute?: boolean // TODO: kill. not used within this file
 }
 
 export interface SegEntry {

packages/daygrid/src/Table.tsx

@@ -160,6 +160,7 @@ export class Table extends DateComponent<TableProps, TableState> {
                       onMoreClick={(arg) => {
                         this.handleMoreLinkClick({ ...arg, fromRow: row })
                       }}
+                      forPrint={props.forPrint}
                     />
                   ))}
                 </tbody>

packages/daygrid/src/TableCell.tsx

@@ -17,9 +17,6 @@ import {
   ViewApi,
   Dictionary,
   MountArg,
-  addDays,
-  intersectRanges,
-  EventRenderRange,
 } from '@fullcalendar/common'
 import { TableSeg } from './TableSeg'
 import { TableCellTop } from './TableCellTop'
@@ -45,7 +42,7 @@ export interface TableCellProps {
   todayRange: DateRange
   buildMoreLinkText: (num: number) => string
   onMoreClick?: (arg: MoreLinkArg) => void
-  segPlacements: TableSegPlacement[]
+  singlePlacements: TableSegPlacement[]
 }
 
 export interface TableCellModel { // TODO: move somewhere else. combine with DayTableCell?
@@ -186,22 +183,17 @@ export class TableCell extends DateComponent<TableCellProps> {
   }
 
   handleMoreLinkClick = (ev: VUIEvent) => {
-    let { segPlacements, onMoreClick, date, moreCnt } = this.props
-    let dayRange: DateRange = { start: date, end: addDays(date, 1) }
+    let { singlePlacements, onMoreClick, date, moreCnt } = this.props
 
     if (onMoreClick) {
       let allSegs: TableSeg[] = []
       let hiddenSegs: TableSeg[] = []
 
-      for (let placement of segPlacements) {
-        let reslicedSeg = resliceSeg(placement.seg, dayRange)
+      for (let placement of singlePlacements) {
+        allSegs.push(placement.seg)
 
-        if (reslicedSeg) {
-          allSegs.push(reslicedSeg)
-
-          if (placement.isHidden) {
-            hiddenSegs.push(reslicedSeg)
-          }
+        if (placement.isHidden) {
+          hiddenSegs.push(placement.seg)
         }
       }
 
@@ -224,27 +216,3 @@ TableCell.addPropsEquality({
 function renderMoreLinkInner(props) {
   return props.text
 }
-
-function resliceSeg(seg: TableSeg, constraint: DateRange): TableSeg | null {
-  let eventRange = seg.eventRange
-  let origRange = eventRange.range
-  let slicedRange = intersectRanges(origRange, constraint)
-
-  if (slicedRange) {
-    return {
-      ...seg,
-      firstCol: -1, // we don't know. caller doesn't care
-      lastCol: -1, // we don't know. caller doesn't care
-      eventRange: {
-        def: eventRange.def,
-        ui: { ...eventRange.ui, durationEditable: false }, // hack to disable resizing
-        instance: eventRange.instance,
-        range: slicedRange,
-      } as EventRenderRange,
-      isStart: seg.isStart && slicedRange.start.valueOf() === origRange.start.valueOf(),
-      isEnd: seg.isEnd && slicedRange.end.valueOf() === origRange.end.valueOf(),
-    }
-  }
-
-  return null
-}

packages/daygrid/src/TableRow.tsx

@@ -46,6 +46,7 @@ export interface TableRowProps {
   showDayNumbers: boolean
   showWeekNumbers: boolean
   buildMoreLinkText: (num: number) => string
+  forPrint: boolean
 }
 
 interface TableRowState {
@@ -76,13 +77,13 @@ export class TableRow extends DateComponent<TableRowProps, TableRowState> {
     let highlightSegsByCol = splitSegsByFirstCol(this.getHighlightSegs(), colCnt)
     let mirrorSegsByCol = splitSegsByFirstCol(this.getMirrorSegs(), colCnt)
 
-    let { placementsByFirstCol, placementsByEachCol, moreCnts, moreMarginTops, cellPaddingBottoms } = computeFgSegPlacement(
+    let { singleColPlacements, multiColPlacements, moreCnts, moreMarginTops, cellPaddingBottoms } = computeFgSegPlacement(
       sortEventSegs(props.fgEventSegs, context.options.eventOrder) as TableSeg[],
       props.dayMaxEvents,
       props.dayMaxEventRows,
       state.eventInstanceHeights,
       state.maxContentHeight,
-      colCnt,
+      props.cells
     )
 
     let selectedInstanceHash = // TODO: messy way to compute this
@@ -94,14 +95,14 @@ export class TableRow extends DateComponent<TableRowProps, TableRowState> {
       <tr ref={this.rootElRef}>
         {props.renderIntro && props.renderIntro()}
         {props.cells.map((cell, col) => {
-          let [normalFgNodes, topsByInstanceId] = this.renderFgSegs(
-            placementsByFirstCol[col],
+          let normalFgNodes = this.renderFgSegs(
+            props.forPrint ? singleColPlacements[col] : multiColPlacements[col],
             selectedInstanceHash,
             props.todayRange,
           )
 
-          let [mirrorFgNodes] = this.renderFgSegs(
-            buildMirrorPlacements(mirrorSegsByCol[col], topsByInstanceId),
+          let mirrorFgNodes = this.renderFgSegs(
+            buildMirrorPlacements(mirrorSegsByCol[col], multiColPlacements),
             {},
             props.todayRange,
             Boolean(props.eventDrag),
@@ -129,7 +130,7 @@ export class TableRow extends DateComponent<TableRowProps, TableRowState> {
                 props.onMoreClick({ ...arg, fromCol: col })
               }}
               moreMarginTop={moreMarginTops[col]}
-              segPlacements={placementsByEachCol[col]}
+              singlePlacements={singleColPlacements[col]}
               fgPaddingBottom={cellPaddingBottoms[col]}
               fgContentElRef={this.fgElRefs.createRef(cell.key)}
               fgContent={( // Fragment scopes the keys
@@ -195,13 +196,12 @@ export class TableRow extends DateComponent<TableRowProps, TableRowState> {
     isDragging?: boolean,
     isResizing?: boolean,
     isDateSelecting?: boolean,
-  ): [VNode[], { [instanceId: string]: number }] { // [nodes, topsByInstanceId]
+  ): VNode[] {
     let { context } = this
     let { eventSelection } = this.props
     let { framePositions } = this.state
     let defaultDisplayEventEnd = this.props.cells.length === 1 // colCnt === 1
     let nodes: VNode[] = []
-    let topsByInstanceId: { [instanceId: string]: number } = {}
 
     if (framePositions) {
       for (let placement of segPlacements) {
@@ -227,6 +227,7 @@ export class TableRow extends DateComponent<TableRowProps, TableRowState> {
 
         /*
         known bug: events that are force to be list-item but span multiple days still take up space in later columns
+        todo: in print view, for multi-day events, don't display title within non-start/end segs
         */
         nodes.push(
           <div
@@ -262,12 +263,10 @@ export class TableRow extends DateComponent<TableRowProps, TableRowState> {
             )}
           </div>,
         )
-
-        topsByInstanceId[instanceId] = placement.absoluteTop
       }
     }
 
-    return [nodes, topsByInstanceId]
+    return nodes
   }
 
   renderFillSegs(segs: TableSeg[], fillType: string): VNode {
@@ -306,7 +305,10 @@ export class TableRow extends DateComponent<TableRowProps, TableRowState> {
   updateSizing(isExternalSizingChange) {
     let { props, frameElRefs } = this
 
-    if (props.clientWidth !== null) { // positioning ready?
+    if (
+      !props.forPrint &&
+      props.clientWidth !== null // positioning ready?
+    ) {
       if (isExternalSizingChange) {
         let frameEls = props.cells.map((cell) => frameElRefs.currentMap[cell.key])
 
@@ -371,7 +373,11 @@ TableRow.addStateEquality({
   eventInstanceHeights: isPropsEqual,
 })
 
-function buildMirrorPlacements(mirrorSegs: TableSeg[], topsByInstanceId: { [instanceId: string]: number }): TableSegPlacement[] {
+function buildMirrorPlacements(mirrorSegs: TableSeg[], colPlacements: TableSegPlacement[][]): TableSegPlacement[] {
+  if (!mirrorSegs.length) {
+    return []
+  }
+  let topsByInstanceId = buildAbsoluteTopHash(colPlacements)
   return mirrorSegs.map((seg: TableSeg) => ({
     seg,
     partIndex: 0,
@@ -381,3 +387,15 @@ function buildMirrorPlacements(mirrorSegs: TableSeg[], topsByInstanceId: { [inst
     marginTop: 0
   }))
 }
+
+function buildAbsoluteTopHash(colPlacements: TableSegPlacement[][]) {
+  let topsByInstanceId: { [instanceId: string]: number } = {}
+
+  for (let placements of colPlacements) {
+    for (let placement of placements) {
+      topsByInstanceId[placement.seg.eventRange.instance.instanceId] = placement.absoluteTop
+    }
+  }
+
+  return colPlacements
+}