Merge pull request #1765 from wix/feat/timeline_eventRightSpacing

Support passing right spacing for overlapping Timeline events

Author: lidord-wix

example/src/screens/timelineCalendar.tsx

@@ -21,11 +21,46 @@ const EVENTS: TimelineEventProps[] = [
     title: 'Merge Request to React Native Calendars',
     summary: 'Merge Timeline Calendar to React Native Calendars'
   },
+  {
+    start: `${getDate()} 01:15:00`,
+    end: `${getDate()} 02:30:00`,
+    title: 'Meeting A',
+    summary: 'Summary for meeting A',
+    color: '#e6add8'
+  },
   {
     start: `${getDate()} 01:30:00`,
     end: `${getDate()} 02:30:00`,
-    title: 'Dr. Mariana Joseph',
-    summary: '3412 Piedmont Rd NE, GA 3032',
+    title: 'Meeting B',
+    summary: 'Summary for meeting B',
+    color: '#e6add8'
+  },
+  {
+    start: `${getDate()} 01:45:00`,
+    end: `${getDate()} 02:45:00`,
+    title: 'Meeting C',
+    summary: 'Summary for meeting C',
+    color: '#e6add8'
+  },
+  {
+    start: `${getDate()} 02:40:00`,
+    end: `${getDate()} 03:10:00`,
+    title: 'Meeting D',
+    summary: 'Summary for meeting D',
+    color: '#e6add8'
+  },
+  {
+    start: `${getDate()} 02:50:00`,
+    end: `${getDate()} 03:20:00`,
+    title: 'Meeting E',
+    summary: 'Summary for meeting E',
+    color: '#e6add8'
+  },
+  {
+    start: `${getDate()} 04:30:00`,
+    end: `${getDate()} 05:30:00`,
+    title: 'Meeting F',
+    summary: 'Summary for meeting F',
     color: '#e6add8'
   },
   {
@@ -185,10 +220,11 @@ export default class TimelineCalendarScreen extends Component {
   private timelineProps = {
     format24h: true,
     onBackgroundLongPress: this.createNewEvent,
-    onBackgroundLongPressOut: this.approveNewEvent
+    onBackgroundLongPressOut: this.approveNewEvent,
     // scrollToFirst: true,
     // start: 0,
-    // end: 24
+    // end: 24,
+    overlapEventsSpacing: 8
   };
 
   render() {
@@ -212,7 +248,7 @@ export default class TimelineCalendarScreen extends Component {
           events={eventsByDate}
           timelineProps={this.timelineProps}
           showNowIndicator
-          scrollToNow
+          // scrollToNow
           scrollToFirst
           initialTime={INITIAL_TIME}
         />

src/timeline/Packer.ts

@@ -1,65 +1,82 @@
 // @flow
 import XDate from 'xdate';
+import constants from '../commons/constants';
 import {Event, PackedEvent} from './EventBlock';
 
+type PartialPackedEvent = Event & {index: number};
+interface PopulateOptions {
+  screenWidth?: number;
+  dayStart?: number;
+  hourBlockHeight?: number;
+  overlapEventsSpacing?: number;
+}
+
 export const HOUR_BLOCK_HEIGHT = 100;
-const EVENT_BLOCK_RIGHT_MARGIN = 10;
+const OVERLAP_EVENTS_SPACINGS = 10;
 
-function buildEvent(column: any, left: number, width: number, dayStart: number) {
-  const startTime = new XDate(column.start);
-  const endTime = column.end ? new XDate(column.end) : new XDate(startTime).addHours(1);
+function buildEvent(event: Event & {index: number}, left: number, width: number, {dayStart = 0, hourBlockHeight = HOUR_BLOCK_HEIGHT}: PopulateOptions): PackedEvent {
+  const startTime = new XDate(event.start);
+  const endTime = event.end ? new XDate(event.end) : new XDate(startTime).addHours(1);
 
   const dayStartTime = new XDate(startTime).clearTime();
 
-  column.top = (dayStartTime.diffHours(startTime) - dayStart) * HOUR_BLOCK_HEIGHT;
-  column.height = startTime.diffHours(endTime) * HOUR_BLOCK_HEIGHT;
-  column.width = width;
-  column.left = left;
-  return column;
+  return {
+    ...event,
+    top: (dayStartTime.diffHours(startTime) - dayStart) * hourBlockHeight,
+    height: startTime.diffHours(endTime) * hourBlockHeight,
+    width,
+    left
+  };
 }
 
-function collision(a: Event, b: Event) {
+function hasCollision(a: Event, b: Event) {
   return a.end > b.start && a.start < b.end;
 }
 
-function expand(ev: Event, column: any, columns: any) {
+function calcColumnSpan(event: Event, columnIndex: number, columns: Event[][]) {
   let colSpan = 1;
 
-  for (let i = column + 1; i < columns.length; i++) {
-    const col = columns[i];
-    for (let j = 0; j < col.length; j++) {
-      const ev1 = col[j];
-      if (collision(ev, ev1)) {
-        return colSpan;
-      }
+  for (let i = columnIndex + 1; i < columns.length; i++) {
+    const column = columns[i];
+
+    const foundCollision = column.find(ev => hasCollision(event, ev));
+    if (foundCollision) {
+      return colSpan;
     }
+
     colSpan++;
   }
 
   return colSpan;
 }
 
-function pack(columns: any, width: number, calculatedEvents: Event[], dayStart: number) {
-  const colLength = columns.length;
-
-  for (let i = 0; i < colLength; i++) {
-    const col = columns[i];
-    for (let j = 0; j < col.length; j++) {
-      const colSpan = expand(col[j], i, columns);
-      const L = (i / colLength) * width;
-      const W = (width * colSpan) / colLength - EVENT_BLOCK_RIGHT_MARGIN;
+function packOverlappingEventGroup(
+  columns: PartialPackedEvent[][],
+  calculatedEvents: PackedEvent[],
+  populateOptions: PopulateOptions
+) {
+  const {screenWidth = constants.screenWidth, overlapEventsSpacing = OVERLAP_EVENTS_SPACINGS} = populateOptions;
+  columns.forEach((column, columnIndex) => {
+    column.forEach(event => {
+      const columnSpan = calcColumnSpan(event, columnIndex, columns);
+      const eventLeft = (columnIndex / columns.length) * screenWidth;
+      let eventWidth = screenWidth * (columnSpan / columns.length);
+
+      if (columnIndex + columnSpan <= columns.length -1) {
+        eventWidth -= overlapEventsSpacing;
+      }
 
-      calculatedEvents.push(buildEvent(col[j], L, W, dayStart));
-    }
-  }
+      calculatedEvents.push(buildEvent(event, eventLeft, eventWidth, populateOptions));
+    });
+  });
 }
 
-function populateEvents(events: Event[], screenWidth: number, dayStart: number) {
-  let lastEnd: any;
-  let columns: any;
-  const calculatedEvents: Event[] = [];
+function populateEvents(_events: Event[], populateOptions: PopulateOptions) {
+  let lastEnd: string | null = null;
+  let columns: PartialPackedEvent[][] = [];
+  const calculatedEvents: PackedEvent[] = [];
 
-  events = events
+  const events: PartialPackedEvent[] = _events
     .map((ev: Event, index: number) => ({...ev, index: index}))
     .sort(function (a: Event, b: Event) {
       if (a.start < b.start) return -1;
@@ -69,26 +86,26 @@ function populateEvents(events: Event[], screenWidth: number, dayStart: number)
       return 0;
     });
 
-  columns = [];
-  lastEnd = null;
-
-  events.forEach(function (ev: Event) {
+  events.forEach(function (ev) {
+    // Reset recent overlapping event group and start a new one
     if (lastEnd !== null && ev.start >= lastEnd) {
-      pack(columns, screenWidth, calculatedEvents, dayStart);
+      packOverlappingEventGroup(columns, calculatedEvents, populateOptions);
       columns = [];
       lastEnd = null;
     }
 
+    // Place current event in the right column where it doesn't overlap
     let placed = false;
     for (let i = 0; i < columns.length; i++) {
       const col = columns[i];
-      if (!collision(col[col.length - 1], ev)) {
+      if (!hasCollision(col[col.length - 1], ev)) {
         col.push(ev);
         placed = true;
         break;
       }
     }
 
+    // If curr event wasn't placed in any of the columns, create a new column for it
     if (!placed) {
       columns.push([ev]);
     }
@@ -99,9 +116,10 @@ function populateEvents(events: Event[], screenWidth: number, dayStart: number)
   });
 
   if (columns.length > 0) {
-    pack(columns, screenWidth, calculatedEvents, dayStart);
+    packOverlappingEventGroup(columns, calculatedEvents, populateOptions);
   }
-  return calculatedEvents as PackedEvent[];
+
+  return calculatedEvents;
 }
 
 export default populateEvents;

src/timeline/Timeline.tsx

@@ -83,6 +83,10 @@ export interface TimelineProps {
    * Listen to onScroll event of the timeline component
    */
   onChangeOffset?: (offset: number) => void;
+  /**
+   * Spacing between overlapping events
+   */
+  overlapEventsSpacing?: number;
 }
 
 const Timeline = (props: TimelineProps) => {
@@ -103,6 +107,7 @@ const Timeline = (props: TimelineProps) => {
     showNowIndicator,
     scrollOffset,
     onChangeOffset,
+    overlapEventsSpacing,
     eventTapped
   } = props;
 
@@ -114,7 +119,7 @@ const Timeline = (props: TimelineProps) => {
 
   const packedEvents = useMemo(() => {
     const width = constants.screenWidth - HOURS_SIDEBAR_WIDTH;
-    return populateEvents(events, width, start);
+    return populateEvents(events, {screenWidth: width, dayStart: start, overlapEventsSpacing});
   }, [events, start]);
 
   useEffect(() => {

src/timeline/__tests__/Packer.spec.js

@@ -1,3 +1,4 @@
+import _ from 'lodash';
 import uut from '../Packer';
 
 describe('Timeline Packer utils', () => {
@@ -22,56 +23,93 @@ describe('Timeline Packer utils', () => {
     }
   ];
   it('should sort events by start and end times', () => {
-    const packedEvents = uut(events, 300, 0);
+    const packedEvents = uut(events, {screenWidth: 300, dayStart: 0});
     expect(packedEvents[0].id).toBe('event_1');
     expect(packedEvents[1].id).toBe('event_3');
     expect(packedEvents[2].id).toBe('event_2');
   });
 
   describe('should set events block size', () => {
     it('should set event block height based on their duration', () => {
-      const packedEvents = uut(events, 300, 0);
+      const packedEvents = uut(events, {screenWidth: 300, dayStart: 0});
       expect(packedEvents[0].height).toBe(100); // event 1
       expect(packedEvents[1].height).toBeCloseTo(108.333); // event 3
       expect(packedEvents[2].height).toBe(50); // event 2
     });
 
     it('should set event block width based on overlaps of 3 events', () => {
-      const packedEvents = uut(events, 300, 0);
+      const packedEvents = uut(events, {screenWidth: 300, dayStart: 0});
       expect(packedEvents[0].width).toBe(90); // event 1
       expect(packedEvents[1].width).toBe(90); // event 3
-      expect(packedEvents[2].width).toBe(90); // event 2
+      expect(packedEvents[2].width).toBe(100); // event 2
     });
 
     it('should set event block width based on overlaps of 2 events', () => {
-      const packedEvents = uut([events[0], events[1]], 300, 0);
+      const packedEvents = uut([events[0], events[1]], {screenWidth: 300, dayStart: 0});
       expect(packedEvents[0].width).toBe(140); // event 1
-      expect(packedEvents[1].width).toBe(140); // event 2
+      expect(packedEvents[1].width).toBe(150); // event 2
     });
 
     it('should set event block width when there is not overlaps', () => {
-      const packedEvents = uut([events[0]], 300, 0);
-      expect(packedEvents[0].width).toBe(290); // event 1
+      const packedEvents = uut([events[0]], {screenWidth: 300, dayStart: 0});
+      expect(packedEvents[0].width).toBe(300); // event 1
+    });
+
+    it('should handle a complex case of overlapping events', () => {
+      const overlappingEvents = [
+        {
+          start: `2017-09-06 01:15:00`,
+          end: `2017-09-06 02:30:00`
+        },
+        {
+          start: `2017-09-06 01:30:00`,
+          end: `2017-09-06 02:30:00`
+        },
+        {
+          start: `2017-09-06 01:45:00`,
+          end: `2017-09-06 02:45:00`
+        },
+        {
+          start: `2017-09-06 02:40:00`,
+          end: `2017-09-06 03:10:00`
+        },
+        {
+          start: `2017-09-06 02:50:00`,
+          end: `2017-09-06 03:20:00`
+        },
+        {
+          start: `2017-09-06 04:30:00`,
+          end: `2017-09-06 05:30:00`
+        }
+      ];
+      let packedEvents = uut(overlappingEvents, {screenWidth: 300, dayStart: 0, overlapEventsSpacing: 4});
+      packedEvents = _.sortBy(packedEvents, 'index');
+      expect(packedEvents[0].width).toBe(96);
+      expect(packedEvents[1].width).toBe(96);
+      expect(packedEvents[2].width).toBe(100);
+      expect(packedEvents[3].width).toBe(96);
+      expect(packedEvents[4].width).toBe(200);
+      expect(packedEvents[5].width).toBe(300);
     });
   });
 
   describe('should set events block position', () => {
     it('should set top position base on the event start time', () => {
-      const packedEvents = uut(events, 300, 0);
+      const packedEvents = uut(events, {screenWidth: 300, dayStart: 0});
       expect(packedEvents[0].top).toBe(150); // event 1
       expect(packedEvents[1].top).toBeCloseTo(191.666); // event 3
       expect(packedEvents[2].top).toBe(225); // event 2
     });
 
     it('should set left position base when the 3 events overlap', () => {
-      const packedEvents = uut(events, 300, 0);
+      const packedEvents = uut(events, {screenWidth: 300, dayStart: 0});
       expect(packedEvents[0].left).toBe(0); // event 1
       expect(packedEvents[1].left).toBe(100); // event 3
       expect(packedEvents[2].left).toBe(200); // event 2
     });
 
     it('should set left position base when the 2 events overlap', () => {
-      const packedEvents = uut([events[0], events[1]], 300, 0);
+      const packedEvents = uut([events[0], events[1]], {screenWidth: 300, dayStart: 0});
       expect(packedEvents[0].left).toBe(0); // event 1
       expect(packedEvents[1].left).toBe(150); // event 3
     });