Improves all-day event layout calculation
Refactors all-day event rendering to use a layout engine for overlap detection and positioning, ensuring events are placed in available rows and columns. Removes deprecated method and adds unit tests.
This commit is contained in:
parent
274753936e
commit
a624394ffb
11 changed files with 2898 additions and 145 deletions
134
test/managers/AllDayManager.test.ts
Normal file
134
test/managers/AllDayManager.test.ts
Normal file
|
|
@ -0,0 +1,134 @@
|
|||
import { describe, it, expect, beforeEach } from 'vitest';
|
||||
import { AllDayManager } from '../../src/managers/AllDayManager';
|
||||
import { setupMockDOM, createMockEvent } from '../helpers/dom-helpers';
|
||||
|
||||
describe('AllDayManager - Layout Calculation', () => {
|
||||
let allDayManager: AllDayManager;
|
||||
|
||||
beforeEach(() => {
|
||||
setupMockDOM();
|
||||
allDayManager = new AllDayManager();
|
||||
});
|
||||
|
||||
describe('Overlap Detection Scenarios', () => {
|
||||
it('Scenario 1: Non-overlapping single-day events', () => {
|
||||
// Event 1: Sept 22 (column 1)
|
||||
const event1 = createMockEvent('1', 'Event 1', '2024-09-22', '2024-09-22');
|
||||
const layout1 = allDayManager.calculateAllDayEventLayout(event1);
|
||||
|
||||
expect(layout1.startColumn).toBe(1);
|
||||
expect(layout1.row).toBe(1);
|
||||
|
||||
// Event 2: Sept 24 (column 3) - different column, should be row 1
|
||||
const event2 = createMockEvent('2', 'Event 2', '2024-09-24', '2024-09-24');
|
||||
const layout2 = allDayManager.calculateAllDayEventLayout(event2);
|
||||
|
||||
expect(layout2.startColumn).toBe(3);
|
||||
expect(layout2.row).toBe(1);
|
||||
});
|
||||
|
||||
it('Scenario 2: Overlapping multi-day events - Autumn Equinox vs Teknisk Workshop', () => {
|
||||
// Autumn Equinox: Sept 22-23 (columns 1-2)
|
||||
const autumnEvent = createMockEvent('autumn', 'Autumn Equinox', '2024-09-22', '2024-09-23');
|
||||
const autumnLayout = allDayManager.calculateAllDayEventLayout(autumnEvent);
|
||||
|
||||
expect(autumnLayout.startColumn).toBe(1);
|
||||
expect(autumnLayout.endColumn).toBe(2);
|
||||
expect(autumnLayout.row).toBe(1);
|
||||
|
||||
// Teknisk Workshop: Sept 23-26 (columns 2-5) - overlaps on Sept 23
|
||||
const workshopEvent = createMockEvent('workshop', 'Teknisk Workshop', '2024-09-23', '2024-09-26');
|
||||
const workshopLayout = allDayManager.calculateAllDayEventLayout(workshopEvent);
|
||||
|
||||
expect(workshopLayout.startColumn).toBe(2);
|
||||
expect(workshopLayout.endColumn).toBe(5);
|
||||
expect(workshopLayout.row).toBe(2); // Should be row 2 due to overlap
|
||||
});
|
||||
|
||||
it('Scenario 3: Multiple events in same column', () => {
|
||||
// Event 1: Sept 23 only
|
||||
const event1 = createMockEvent('1', 'Event 1', '2024-09-23', '2024-09-23');
|
||||
const layout1 = allDayManager.calculateAllDayEventLayout(event1);
|
||||
|
||||
expect(layout1.startColumn).toBe(2);
|
||||
expect(layout1.row).toBe(1);
|
||||
|
||||
// Event 2: Sept 23 only - same column, should be row 2
|
||||
const event2 = createMockEvent('2', 'Event 2', '2024-09-23', '2024-09-23');
|
||||
const layout2 = allDayManager.calculateAllDayEventLayout(event2);
|
||||
|
||||
expect(layout2.startColumn).toBe(2);
|
||||
expect(layout2.row).toBe(2);
|
||||
|
||||
// Event 3: Sept 23 only - same column, should be row 3
|
||||
const event3 = createMockEvent('3', 'Event 3', '2024-09-23', '2024-09-23');
|
||||
const layout3 = allDayManager.calculateAllDayEventLayout(event3);
|
||||
|
||||
expect(layout3.startColumn).toBe(2);
|
||||
expect(layout3.row).toBe(3);
|
||||
});
|
||||
|
||||
it('Scenario 4: Partial overlaps', () => {
|
||||
// Event 1: Sept 22-23 (columns 1-2)
|
||||
const event1 = createMockEvent('1', 'Event 1', '2024-09-22', '2024-09-23');
|
||||
const layout1 = allDayManager.calculateAllDayEventLayout(event1);
|
||||
|
||||
expect(layout1.startColumn).toBe(1);
|
||||
expect(layout1.endColumn).toBe(2);
|
||||
expect(layout1.row).toBe(1);
|
||||
|
||||
// Event 2: Sept 23-24 (columns 2-3) - overlaps on Sept 23
|
||||
const event2 = createMockEvent('2', 'Event 2', '2024-09-23', '2024-09-24');
|
||||
const layout2 = allDayManager.calculateAllDayEventLayout(event2);
|
||||
|
||||
expect(layout2.startColumn).toBe(2);
|
||||
expect(layout2.endColumn).toBe(3);
|
||||
expect(layout2.row).toBe(2); // Should be row 2 due to overlap
|
||||
|
||||
// Event 3: Sept 25-26 (columns 4-5) - no overlap, should be row 1
|
||||
const event3 = createMockEvent('3', 'Event 3', '2024-09-25', '2024-09-26');
|
||||
const layout3 = allDayManager.calculateAllDayEventLayout(event3);
|
||||
|
||||
expect(layout3.startColumn).toBe(4);
|
||||
expect(layout3.endColumn).toBe(5);
|
||||
expect(layout3.row).toBe(1); // No overlap, back to row 1
|
||||
});
|
||||
|
||||
it('Scenario 5: Complex overlapping pattern', () => {
|
||||
// Event 1: Sept 22-25 (columns 1-4) - spans most of week
|
||||
const event1 = createMockEvent('1', 'Long Event', '2024-09-22', '2024-09-25');
|
||||
const layout1 = allDayManager.calculateAllDayEventLayout(event1);
|
||||
|
||||
expect(layout1.startColumn).toBe(1);
|
||||
expect(layout1.endColumn).toBe(4);
|
||||
expect(layout1.row).toBe(1);
|
||||
|
||||
// Event 2: Sept 23-24 (columns 2-3) - overlaps with Event 1
|
||||
const event2 = createMockEvent('2', 'Short Event', '2024-09-23', '2024-09-24');
|
||||
const layout2 = allDayManager.calculateAllDayEventLayout(event2);
|
||||
|
||||
expect(layout2.startColumn).toBe(2);
|
||||
expect(layout2.endColumn).toBe(3);
|
||||
expect(layout2.row).toBe(2);
|
||||
|
||||
// Event 3: Sept 24-26 (columns 3-5) - overlaps with both
|
||||
const event3 = createMockEvent('3', 'Another Event', '2024-09-24', '2024-09-26');
|
||||
const layout3 = allDayManager.calculateAllDayEventLayout(event3);
|
||||
|
||||
expect(layout3.startColumn).toBe(3);
|
||||
expect(layout3.endColumn).toBe(5);
|
||||
expect(layout3.row).toBe(3); // Should be row 3 due to overlaps with both
|
||||
});
|
||||
|
||||
it('Scenario 6: Drag-drop target date override', () => {
|
||||
// Multi-day event dragged to specific date should use single column
|
||||
const event = createMockEvent('drag', 'Dragged Event', '2024-09-22', '2024-09-25');
|
||||
const layout = allDayManager.calculateAllDayEventLayout(event, '2024-09-24');
|
||||
|
||||
expect(layout.startColumn).toBe(3); // Sept 24 is column 3
|
||||
expect(layout.endColumn).toBe(3); // Single column when targetDate specified
|
||||
expect(layout.columnSpan).toBe(1);
|
||||
expect(layout.row).toBe(1);
|
||||
});
|
||||
});
|
||||
});
|
||||
Loading…
Add table
Add a link
Reference in a new issue