Janus007/Calendar
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Improves event layout and stacking logic

Browse source 
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 2025-10-06 21:16:29 +02:00
parent b590467f60
commit faa59f6a3c
19 changed files with 1502 additions and 55 deletions
Download patch file Download diff file Expand all files Collapse all files

69
scenarios/scenario-6.html Normal file
View file

@ -0,0 +1,69 @@
<!DOCTYPE html>
<html lang="da">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Scenario 6: Overlapping Pairs</title>
<link rel="stylesheet" href="scenario-styles.css">
</head>
<body>
<div class="scenario-container">
<a href="../stacking-visualization-new.html" class="back-link">← Back to All Scenarios</a>
<div class="scenario-header">
<h1 class="scenario-title">Scenario 6: Overlapping Pairs</h1>
<div id="test-results"></div>
</div>
<div class="scenario-description">
<h3>Description</h3>
<p>Two separate pairs of overlapping events: (A, B) and (C, D). Each pair should be independent with their own stack levels.</p>
<div class="expected-result">
<strong>Expected Result:</strong><br>
Event A: stackLevel=0 (stacked)<br>
Event B: stackLevel=1 (stacked)<br>
Event C: stackLevel=0 (stacked)<br>
Event D: stackLevel=1 (stacked)
</div>
</div>
<div class="calendar-column">
<swp-event data-event-id="S6A" data-title="Scenario 6: Event A" data-start="2025-10-08T08:00:00.000Z" data-end="2025-10-08T10:00:00.000Z" data-type="work" data-duration="120" data-stack-link="{&quot;stackLevel&quot;:0}" style="position: absolute; top: 161px; height: 157px; left: 2px; right: 2px; margin-left: 0px; z-index: 100;">
<swp-event-time data-duration="120">10:00 - 12:00</swp-event-time>
<swp-event-title>Scenario 6: Event A</swp-event-title>
</swp-event>
<swp-event data-event-id="S6B" data-title="Scenario 6: Event B" data-start="2025-10-08T09:00:00.000Z" data-end="2025-10-08T10:00:00.000Z" data-type="work" data-duration="60" data-stack-link="{&quot;stackLevel&quot;:1}" style="position: absolute; top: 241px; height: 77px; left: 2px; right: 2px; margin-left: 15px; z-index: 101;">
<swp-event-time data-duration="60">11:00 - 12:00</swp-event-time>
<swp-event-title>Scenario 6: Event B</swp-event-title>
</swp-event>
<swp-event data-event-id="S6C" data-title="Scenario 6: Event C" data-start="2025-10-08T11:00:00.000Z" data-end="2025-10-08T13:00:00.000Z" data-type="work" data-duration="120" data-stack-link="{&quot;stackLevel&quot;:0}" style="position: absolute; top: 401px; height: 157px; left: 2px; right: 2px; margin-left: 0px; z-index: 100;">
<swp-event-time data-duration="120">13:00 - 15:00</swp-event-time>
<swp-event-title>Scenario 6: Event C</swp-event-title>
</swp-event>
<swp-event data-event-id="S6D" data-title="Scenario 6: Event D" data-start="2025-10-08T12:00:00.000Z" data-end="2025-10-08T13:00:00.000Z" data-type="work" data-duration="60" data-stack-link="{&quot;stackLevel&quot;:1}" style="position: absolute; top: 481px; height: 77px; left: 2px; right: 2px; margin-left: 15px; z-index: 101;">
<swp-event-time data-duration="60">14:00 - 15:00</swp-event-time>
<swp-event-title>Scenario 6: Event D</swp-event-title>
</swp-event>
</div>
</div>
<script type="module">
import { ScenarioTestRunner } from './scenario-test-runner.js';
window.scenarioTests = {
id: 'scenario-6',
expected: [
{ eventId: 'S6A', stackLevel: 0, type: 'stacked' },
{ eventId: 'S6B', stackLevel: 1, type: 'stacked' },
{ eventId: 'S6C', stackLevel: 0, type: 'stacked' },
{ eventId: 'S6D', stackLevel: 1, type: 'stacked' }
]
};
</script>
<script type="module" src="scenario-test-runner.js"></script>
</body>
</html>