Improves event layout and stacking logic
Refactors the event layout and stacking logic based on review feedback. This includes: - Merging conflicting event groups to prevent inconsistencies. - Implementing minimal stack level assignment using a min-heap. - Consolidating styling and using DateService for drag operations. - Adding reflow after drag and drop. - Improving the column event filtering to include events overlapping midnight. - Ensuring explicit sorting of events for grid layout.
This commit is contained in:
Janus C. H. Knudsen
parent
b590467f60
commit
faa59f6a3c
19 changed files with 1502 additions and 55 deletions
150
stacking-visualization-new.html
Normal file
150
stacking-visualization-new.html
Normal file
|
|
@ -0,0 +1,150 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="da">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Event Stacking Scenarios - Test Suite</title>
|
||||
<link rel="stylesheet" href="scenarios/scenario-styles.css">
|
||||
<style>
|
||||
.scenario-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
|
||||
gap: 20px;
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
.scenario-card {
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
padding: 20px;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
|
||||
transition: transform 0.2s, box-shadow 0.2s;
|
||||
}
|
||||
|
||||
.scenario-card:hover {
|
||||
transform: translateY(-4px);
|
||||
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
|
||||
}
|
||||
|
||||
.scenario-card h3 {
|
||||
margin-top: 0;
|
||||
color: #b53f7a;
|
||||
}
|
||||
|
||||
.scenario-card p {
|
||||
color: #666;
|
||||
line-height: 1.6;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.scenario-link {
|
||||
display: inline-block;
|
||||
padding: 10px 20px;
|
||||
background: #b53f7a;
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
border-radius: 4px;
|
||||
font-weight: 500;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
|
||||
.scenario-link:hover {
|
||||
background: #8e3260;
|
||||
}
|
||||
|
||||
.intro {
|
||||
background: #f8f9fa;
|
||||
padding: 20px;
|
||||
border-left: 4px solid #b53f7a;
|
||||
margin-bottom: 30px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.intro h2 {
|
||||
margin-top: 0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="scenario-container">
|
||||
<h1>Event Stacking & Grid Layout - Test Scenarios</h1>
|
||||
|
||||
<div class="intro">
|
||||
<h2>About This Test Suite</h2>
|
||||
<p>
|
||||
This test suite validates the event layout algorithm for the Calendar Plantempus application.
|
||||
The algorithm determines how overlapping events should be rendered using two strategies:
|
||||
</p>
|
||||
<ul>
|
||||
<li><strong>GRID Layout:</strong> Events that start within a threshold (±30 minutes) are placed in a grid container where they can share columns</li>
|
||||
<li><strong>STACKED Layout:</strong> Events are stacked with horizontal offsets (15px per level)</li>
|
||||
</ul>
|
||||
<p>
|
||||
Each scenario tests a specific edge case or layout pattern. Click on a scenario below to view the visual representation and test results.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="scenario-grid">
|
||||
<div class="scenario-card">
|
||||
<h3>Scenario 1: No Overlap</h3>
|
||||
<p>Three sequential events with no time overlap. All should have stack level 0.</p>
|
||||
<a href="scenarios/scenario-1.html" class="scenario-link">View Test →</a>
|
||||
</div>
|
||||
|
||||
<div class="scenario-card">
|
||||
<h3>Scenario 2: Column Sharing (Grid)</h3>
|
||||
<p>Two events starting at same time (10:00) - should share columns in a grid with 2 columns.</p>
|
||||
<a href="scenarios/scenario-2.html" class="scenario-link">View Test →</a>
|
||||
</div>
|
||||
|
||||
<div class="scenario-card">
|
||||
<h3>Scenario 3: Nested Stacking</h3>
|
||||
<p>Events with progressive nesting: A contains B, B contains C, C and D overlap. Tests stack level calculation.</p>
|
||||
<a href="scenarios/scenario-3.html" class="scenario-link">View Test →</a>
|
||||
</div>
|
||||
|
||||
<div class="scenario-card">
|
||||
<h3>Scenario 4: Complex Stacking</h3>
|
||||
<p>Long event (A) with multiple shorter events (B, C, D) nested inside at different times.</p>
|
||||
<a href="scenarios/scenario-4.html" class="scenario-link">View Test →</a>
|
||||
</div>
|
||||
|
||||
<div class="scenario-card">
|
||||
<h3>Scenario 5: Three Column Share</h3>
|
||||
<p>Three events all starting at 10:00 - should create a 3-column grid layout.</p>
|
||||
<a href="scenarios/scenario-5.html" class="scenario-link">View Test →</a>
|
||||
</div>
|
||||
|
||||
<div class="scenario-card">
|
||||
<h3>Scenario 6: Overlapping Pairs</h3>
|
||||
<p>Two separate pairs of overlapping events. Each pair should be independent.</p>
|
||||
<a href="scenarios/scenario-6.html" class="scenario-link">View Test →</a>
|
||||
</div>
|
||||
|
||||
<div class="scenario-card">
|
||||
<h3>Scenario 7: Long Event Container</h3>
|
||||
<p>One long event (A) containing two shorter events (B, C) that don't overlap each other.</p>
|
||||
<a href="scenarios/scenario-7.html" class="scenario-link">View Test →</a>
|
||||
</div>
|
||||
|
||||
<div class="scenario-card">
|
||||
<h3>Scenario 8: Edge-Adjacent Events</h3>
|
||||
<p>Events that touch but don't overlap (A ends when B starts). Should not stack.</p>
|
||||
<a href="scenarios/scenario-8.html" class="scenario-link">View Test →</a>
|
||||
</div>
|
||||
|
||||
<div class="scenario-card">
|
||||
<h3>Scenario 9: End-to-Start Chain</h3>
|
||||
<p>Events linked by end-to-start conflicts within threshold. Tests conflict chain detection.</p>
|
||||
<a href="scenarios/scenario-9.html" class="scenario-link">View Test →</a>
|
||||
</div>
|
||||
|
||||
<div class="scenario-card">
|
||||
<h3>Scenario 10: Four Column Grid</h3>
|
||||
<p>Four events all starting at same time - maximum column sharing test.</p>
|
||||
<a href="scenarios/scenario-10.html" class="scenario-link">View Test →</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Add table
Add a link
Reference in a new issue