Extracts event layout calculations
Moves complex layout determination logic (grid grouping, stack levels, positioning) from `EventRenderer` to a new `EventLayoutCoordinator` class. Delegates layout responsibilities to the coordinator, significantly simplifying the `EventRenderer`'s `renderColumnEvents` method. Refines `EventStackManager` by removing deprecated layout methods, consolidating its role to event grouping and core stack level management. Improves modularity and separation of concerns within the rendering pipeline.
This commit is contained in:
Janus C. H. Knudsen
parent
2f58ceccd4
commit
c788a1695e
5 changed files with 166 additions and 248 deletions
122
src/managers/EventLayoutCoordinator.ts
Normal file
122
src/managers/EventLayoutCoordinator.ts
Normal file
|
|
@ -0,0 +1,122 @@
|
|||
/**
|
||||
* EventLayoutCoordinator - Coordinates event layout calculations
|
||||
*
|
||||
* Separates layout logic from rendering concerns.
|
||||
* Calculates stack levels, groups events, and determines rendering strategy.
|
||||
*/
|
||||
|
||||
import { CalendarEvent } from '../types/CalendarTypes';
|
||||
import { EventStackManager, EventGroup, StackLink } from './EventStackManager';
|
||||
import { PositionUtils } from '../utils/PositionUtils';
|
||||
|
||||
export interface GridGroupLayout {
|
||||
events: CalendarEvent[];
|
||||
stackLevel: number;
|
||||
position: { top: number };
|
||||
}
|
||||
|
||||
export interface StackedEventLayout {
|
||||
event: CalendarEvent;
|
||||
stackLink: StackLink;
|
||||
position: { top: number; height: number };
|
||||
}
|
||||
|
||||
export interface ColumnLayout {
|
||||
gridGroups: GridGroupLayout[];
|
||||
stackedEvents: StackedEventLayout[];
|
||||
}
|
||||
|
||||
export class EventLayoutCoordinator {
|
||||
private stackManager: EventStackManager;
|
||||
|
||||
constructor() {
|
||||
this.stackManager = new EventStackManager();
|
||||
}
|
||||
|
||||
/**
|
||||
* Calculate complete layout for a column of events
|
||||
*/
|
||||
public calculateColumnLayout(columnEvents: CalendarEvent[]): ColumnLayout {
|
||||
if (columnEvents.length === 0) {
|
||||
return { gridGroups: [], stackedEvents: [] };
|
||||
}
|
||||
|
||||
// Step 1: Calculate stack levels for ALL events first (to understand overlaps)
|
||||
const allStackLinks = this.stackManager.createOptimizedStackLinks(columnEvents);
|
||||
|
||||
// Step 2: Find grid candidates (start together ±15 min)
|
||||
const groups = this.stackManager.groupEventsByStartTime(columnEvents);
|
||||
const gridGroups = groups.filter(group => {
|
||||
if (group.events.length <= 1) return false;
|
||||
group.containerType = this.stackManager.decideContainerType(group);
|
||||
return group.containerType === 'GRID';
|
||||
});
|
||||
|
||||
// Step 3: Build grid group layouts
|
||||
const gridGroupLayouts: GridGroupLayout[] = [];
|
||||
const renderedEventIds = new Set<string>();
|
||||
|
||||
gridGroups.forEach(group => {
|
||||
const gridStackLevel = this.calculateGridGroupStackLevel(group, columnEvents, allStackLinks);
|
||||
const earliestEvent = group.events[0];
|
||||
const position = PositionUtils.calculateEventPosition(earliestEvent.start, earliestEvent.end);
|
||||
|
||||
gridGroupLayouts.push({
|
||||
events: group.events,
|
||||
stackLevel: gridStackLevel,
|
||||
position: { top: position.top + 1 }
|
||||
});
|
||||
|
||||
group.events.forEach(e => renderedEventIds.add(e.id));
|
||||
});
|
||||
|
||||
// Step 4: Build stacked event layouts for remaining events
|
||||
const remainingEvents = columnEvents.filter(e => !renderedEventIds.has(e.id));
|
||||
const stackedEventLayouts: StackedEventLayout[] = remainingEvents.map(event => {
|
||||
const stackLink = allStackLinks.get(event.id)!;
|
||||
const position = PositionUtils.calculateEventPosition(event.start, event.end);
|
||||
|
||||
return {
|
||||
event,
|
||||
stackLink,
|
||||
position: { top: position.top + 1, height: position.height - 3 }
|
||||
};
|
||||
});
|
||||
|
||||
return {
|
||||
gridGroups: gridGroupLayouts,
|
||||
stackedEvents: stackedEventLayouts
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Calculate stack level for a grid group based on what it overlaps OUTSIDE the group
|
||||
*/
|
||||
private calculateGridGroupStackLevel(
|
||||
group: EventGroup,
|
||||
allEvents: CalendarEvent[],
|
||||
stackLinks: Map<string, StackLink>
|
||||
): number {
|
||||
const groupEventIds = new Set(group.events.map(e => e.id));
|
||||
|
||||
// Find all events OUTSIDE this group
|
||||
const outsideEvents = allEvents.filter(e => !groupEventIds.has(e.id));
|
||||
|
||||
// Find the highest stackLevel of any event that overlaps with ANY event in the grid group
|
||||
let maxOverlappingLevel = -1;
|
||||
|
||||
for (const gridEvent of group.events) {
|
||||
for (const outsideEvent of outsideEvents) {
|
||||
if (this.stackManager.doEventsOverlap(gridEvent, outsideEvent)) {
|
||||
const outsideLink = stackLinks.get(outsideEvent.id);
|
||||
if (outsideLink) {
|
||||
maxOverlappingLevel = Math.max(maxOverlappingLevel, outsideLink.stackLevel);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Grid group should be one level above the highest overlapping event
|
||||
return maxOverlappingLevel + 1;
|
||||
}
|
||||
}
|
||||
|
|
@ -68,13 +68,6 @@ export class EventStackManager {
|
|||
return groups;
|
||||
}
|
||||
|
||||
/**
|
||||
* Check if two events should share flexbox (within ±15 min)
|
||||
*/
|
||||
public shouldShareFlexbox(event1: CalendarEvent, event2: CalendarEvent): boolean {
|
||||
const diffMinutes = Math.abs(event1.start.getTime() - event2.start.getTime()) / (1000 * 60);
|
||||
return diffMinutes <= EventStackManager.FLEXBOX_START_THRESHOLD_MINUTES;
|
||||
}
|
||||
|
||||
// ============================================
|
||||
// PHASE 2: Container Type Decision
|
||||
|
|
@ -98,19 +91,6 @@ export class EventStackManager {
|
|||
return 'GRID';
|
||||
}
|
||||
|
||||
/**
|
||||
* Check if events within a group overlap each other
|
||||
*/
|
||||
private hasInternalOverlaps(events: CalendarEvent[]): boolean {
|
||||
for (let i = 0; i < events.length; i++) {
|
||||
for (let j = i + 1; j < events.length; j++) {
|
||||
if (this.doEventsOverlap(events[i], events[j])) {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
/**
|
||||
* Check if two events overlap in time
|
||||
|
|
@ -119,117 +99,11 @@ export class EventStackManager {
|
|||
return event1.start < event2.end && event1.end > event2.start;
|
||||
}
|
||||
|
||||
// ============================================
|
||||
// PHASE 3: Late Arrivals (Nested Stacking)
|
||||
// ============================================
|
||||
|
||||
/**
|
||||
* Find events that start outside threshold (late arrivals)
|
||||
*/
|
||||
public findLateArrivals(groups: EventGroup[], allEvents: CalendarEvent[]): CalendarEvent[] {
|
||||
const eventsInGroups = new Set(groups.flatMap(g => g.events.map(e => e.id)));
|
||||
return allEvents.filter(event => !eventsInGroups.has(event.id));
|
||||
}
|
||||
|
||||
/**
|
||||
* Find primary parent column for a late event (longest duration or first overlapping)
|
||||
*/
|
||||
public findPrimaryParentColumn(lateEvent: CalendarEvent, flexboxGroup: CalendarEvent[]): string | null {
|
||||
// Find all overlapping events in the flexbox group
|
||||
const overlapping = flexboxGroup.filter(event => this.doEventsOverlap(lateEvent, event));
|
||||
|
||||
if (overlapping.length === 0) {
|
||||
return null;
|
||||
}
|
||||
|
||||
// Sort by duration (longest first)
|
||||
overlapping.sort((a, b) => {
|
||||
const durationA = b.end.getTime() - b.start.getTime();
|
||||
const durationB = a.end.getTime() - a.start.getTime();
|
||||
return durationA - durationB;
|
||||
});
|
||||
|
||||
return overlapping[0].id;
|
||||
}
|
||||
|
||||
/**
|
||||
* Calculate marginLeft for nested event (always 15px)
|
||||
*/
|
||||
public calculateNestedMarginLeft(): number {
|
||||
return EventStackManager.STACK_OFFSET_PX;
|
||||
}
|
||||
|
||||
/**
|
||||
* Calculate stackLevel for nested event (parent + 1)
|
||||
*/
|
||||
public calculateNestedStackLevel(parentStackLevel: number): number {
|
||||
return parentStackLevel + 1;
|
||||
}
|
||||
|
||||
// ============================================
|
||||
// Flexbox Layout Calculations
|
||||
// Stack Level Calculation
|
||||
// ============================================
|
||||
|
||||
/**
|
||||
* Calculate flex width for flexbox columns
|
||||
*/
|
||||
public calculateFlexWidth(columnCount: number): string {
|
||||
if (columnCount === 1) return '100%';
|
||||
if (columnCount === 2) return '50%';
|
||||
if (columnCount === 3) return '33.33%';
|
||||
if (columnCount === 4) return '25%';
|
||||
|
||||
// For 5+ columns, calculate percentage
|
||||
const percentage = (100 / columnCount).toFixed(2);
|
||||
return `${percentage}%`;
|
||||
}
|
||||
|
||||
// ============================================
|
||||
// Existing Methods (from original TDD tests)
|
||||
// ============================================
|
||||
|
||||
/**
|
||||
* Find all events that overlap with a given event
|
||||
*/
|
||||
public findOverlappingEvents(targetEvent: CalendarEvent, columnEvents: CalendarEvent[]): CalendarEvent[] {
|
||||
return columnEvents.filter(event => this.doEventsOverlap(targetEvent, event));
|
||||
}
|
||||
|
||||
/**
|
||||
* Create stack links for overlapping events (naive sequential stacking)
|
||||
*/
|
||||
public createStackLinks(events: CalendarEvent[]): Map<string, StackLink> {
|
||||
const stackLinks = new Map<string, StackLink>();
|
||||
|
||||
if (events.length === 0) return stackLinks;
|
||||
|
||||
// Sort by start time (and by end time if start times are equal)
|
||||
const sorted = [...events].sort((a, b) => {
|
||||
const startDiff = a.start.getTime() - b.start.getTime();
|
||||
if (startDiff !== 0) return startDiff;
|
||||
return a.end.getTime() - b.end.getTime();
|
||||
});
|
||||
|
||||
// Create sequential stack
|
||||
sorted.forEach((event, index) => {
|
||||
const link: StackLink = {
|
||||
stackLevel: index
|
||||
};
|
||||
|
||||
if (index > 0) {
|
||||
link.prev = sorted[index - 1].id;
|
||||
}
|
||||
|
||||
if (index < sorted.length - 1) {
|
||||
link.next = sorted[index + 1].id;
|
||||
}
|
||||
|
||||
stackLinks.set(event.id, link);
|
||||
});
|
||||
|
||||
return stackLinks;
|
||||
}
|
||||
|
||||
/**
|
||||
* Create optimized stack links (events share levels when possible)
|
||||
*/
|
||||
|
|
@ -248,20 +122,16 @@ export class EventStackManager {
|
|||
other !== event && this.doEventsOverlap(event, other)
|
||||
);
|
||||
|
||||
console.log(`[EventStackManager] Event ${event.id} overlaps with:`, overlapping.map(e => e.id));
|
||||
|
||||
// Find the MINIMUM required level (must be above all overlapping events)
|
||||
let minRequiredLevel = 0;
|
||||
for (const other of overlapping) {
|
||||
const otherLink = stackLinks.get(other.id);
|
||||
if (otherLink) {
|
||||
console.log(` ${other.id} has stackLevel ${otherLink.stackLevel}`);
|
||||
// Must be at least one level above the overlapping event
|
||||
minRequiredLevel = Math.max(minRequiredLevel, otherLink.stackLevel + 1);
|
||||
}
|
||||
}
|
||||
|
||||
console.log(` → Assigned stackLevel ${minRequiredLevel} (must be above all overlapping events)`);
|
||||
stackLinks.set(event.id, { stackLevel: minRequiredLevel });
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue