Implements custom scroll and event logging
Adds custom scroll management for the calendar week view, replacing native scrollbars with a custom handle. Introduces categorized event logging with console grouping and styling, enhancing debug output. It also allows configuring logging for specific event categories.
This commit is contained in:
Janus Knudsen
parent
001443ce11
commit
9f6d4333cb
7 changed files with 606 additions and 63 deletions
|
|
@ -49,16 +49,10 @@ export class EventRenderer {
|
|||
}
|
||||
|
||||
private renderEvents(events: CalendarEvent[]): void {
|
||||
console.log(`EventRenderer: Rendering ${events.length} events`);
|
||||
|
||||
// Clear existing events first
|
||||
this.clearEvents();
|
||||
|
||||
// For now, just log events - proper rendering will be implemented later
|
||||
events.forEach(event => {
|
||||
console.log(`EventRenderer: Event "${event.title}" from ${event.start} to ${event.end}`);
|
||||
});
|
||||
|
||||
// For now, just emit event rendered - proper rendering will be implemented later
|
||||
this.eventBus.emit(EventTypes.EVENT_RENDERED, {
|
||||
count: events.length
|
||||
});
|
||||
|
|
|
|||
|
|
@ -94,7 +94,9 @@ export class GridManager {
|
|||
this.renderGrid();
|
||||
|
||||
// Emit grid rendered event
|
||||
console.log('GridManager: Emitting GRID_RENDERED event');
|
||||
eventBus.emit(EventTypes.GRID_RENDERED);
|
||||
console.log('GridManager: GRID_RENDERED event emitted');
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -115,15 +117,48 @@ export class GridManager {
|
|||
// Clear existing grid and rebuild POC structure
|
||||
this.grid.innerHTML = '';
|
||||
|
||||
// Create POC structure: time-axis + week-container
|
||||
// Create POC structure: header-spacer + time-axis + week-container + right-side
|
||||
this.createHeaderSpacer();
|
||||
this.createRightHeaderSpacer();
|
||||
this.createTimeAxis();
|
||||
this.createRightColumn();
|
||||
this.createWeekContainer();
|
||||
|
||||
console.log('GridManager: Grid rendered successfully with POC structure');
|
||||
}
|
||||
|
||||
/**
|
||||
* Create time axis (left column) like in POC
|
||||
* Create header spacer to align time axis with week content
|
||||
*/
|
||||
private createHeaderSpacer(): void {
|
||||
if (!this.grid) return;
|
||||
|
||||
const headerSpacer = document.createElement('swp-header-spacer');
|
||||
this.grid.appendChild(headerSpacer);
|
||||
}
|
||||
|
||||
/**
|
||||
* Create right header spacer to align right column with week content
|
||||
*/
|
||||
private createRightHeaderSpacer(): void {
|
||||
if (!this.grid) return;
|
||||
|
||||
const rightHeaderSpacer = document.createElement('swp-right-header-spacer');
|
||||
this.grid.appendChild(rightHeaderSpacer);
|
||||
}
|
||||
|
||||
/**
|
||||
* Create right column beside week container
|
||||
*/
|
||||
private createRightColumn(): void {
|
||||
if (!this.grid) return;
|
||||
|
||||
const rightColumn = document.createElement('swp-right-column');
|
||||
this.grid.appendChild(rightColumn);
|
||||
}
|
||||
|
||||
/**
|
||||
* Create time axis (positioned beside week container) like in POC
|
||||
*/
|
||||
private createTimeAxis(): void {
|
||||
if (!this.grid) return;
|
||||
|
|
@ -132,7 +167,7 @@ export class GridManager {
|
|||
const startHour = calendarConfig.get('dayStartHour');
|
||||
const endHour = calendarConfig.get('dayEndHour');
|
||||
|
||||
for (let hour = startHour; hour <= endHour; hour++) {
|
||||
for (let hour = startHour; hour < endHour; hour++) {
|
||||
const marker = document.createElement('swp-hour-marker');
|
||||
const period = hour >= 12 ? 'PM' : 'AM';
|
||||
const displayHour = hour > 12 ? hour - 12 : (hour === 0 ? 12 : hour);
|
||||
|
|
@ -221,7 +256,6 @@ export class GridManager {
|
|||
const column = document.createElement('swp-day-column');
|
||||
(column as any).dataset.date = this.formatDate(date);
|
||||
|
||||
console.log(`GridManager: Creating day column ${dayIndex} for date ${this.formatDate(date)}`);
|
||||
|
||||
// Add dummy content to force column width (temporary test)
|
||||
const dummyContent = document.createElement('div');
|
||||
|
|
|
|||
356
src/managers/ScrollManager.ts
Normal file
356
src/managers/ScrollManager.ts
Normal file
|
|
@ -0,0 +1,356 @@
|
|||
// Custom scroll management for calendar week container
|
||||
|
||||
import { eventBus } from '../core/EventBus';
|
||||
import { calendarConfig } from '../core/CalendarConfig';
|
||||
import { EventTypes } from '../constants/EventTypes';
|
||||
|
||||
/**
|
||||
* Manages custom scrolling functionality for the calendar
|
||||
*/
|
||||
export class ScrollManager {
|
||||
private rightColumn: HTMLElement | null = null;
|
||||
private scrollHandle: HTMLElement | null = null;
|
||||
private scrollableContent: HTMLElement | null = null;
|
||||
private calendarContainer: HTMLElement | null = null;
|
||||
private timeAxis: HTMLElement | null = null;
|
||||
private resizeObserver: ResizeObserver | null = null;
|
||||
private isDragging: boolean = false;
|
||||
private dragStartY: number = 0;
|
||||
private scrollStartTop: number = 0;
|
||||
private maxScrollTop: number = 0;
|
||||
private handleHeight: number = 40;
|
||||
|
||||
constructor() {
|
||||
this.init();
|
||||
}
|
||||
|
||||
private init(): void {
|
||||
this.subscribeToEvents();
|
||||
}
|
||||
|
||||
private subscribeToEvents(): void {
|
||||
// Initialize scroll when grid is rendered
|
||||
eventBus.on(EventTypes.GRID_RENDERED, () => {
|
||||
console.log('ScrollManager: Received GRID_RENDERED event');
|
||||
this.setupScrolling();
|
||||
});
|
||||
|
||||
// Handle mouse events for dragging
|
||||
document.addEventListener('mousemove', this.handleMouseMove.bind(this));
|
||||
document.addEventListener('mouseup', this.handleMouseUp.bind(this));
|
||||
|
||||
// Handle window resize
|
||||
window.addEventListener('resize', () => {
|
||||
this.updateScrollableHeight();
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Setup scrolling functionality after grid is rendered
|
||||
*/
|
||||
private setupScrolling(): void {
|
||||
this.findElements();
|
||||
|
||||
if (this.rightColumn && this.scrollableContent && this.calendarContainer) {
|
||||
this.setupResizeObserver();
|
||||
this.updateScrollableHeight();
|
||||
this.createScrollHandle();
|
||||
this.hideNativeScrollbar();
|
||||
this.setupScrollSynchronization();
|
||||
this.calculateScrollBounds();
|
||||
this.updateHandlePosition();
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Find DOM elements needed for scrolling
|
||||
*/
|
||||
private findElements(): void {
|
||||
this.rightColumn = document.querySelector('swp-right-column');
|
||||
this.scrollableContent = document.querySelector('swp-scrollable-content');
|
||||
this.calendarContainer = document.querySelector('swp-calendar-container');
|
||||
this.timeAxis = document.querySelector('swp-time-axis');
|
||||
}
|
||||
|
||||
/**
|
||||
* Create and add scroll handle to right column
|
||||
*/
|
||||
private createScrollHandle(): void {
|
||||
if (!this.rightColumn) return;
|
||||
|
||||
// Remove existing handle if any
|
||||
const existingHandle = this.rightColumn.querySelector('swp-scroll-handle');
|
||||
if (existingHandle) {
|
||||
existingHandle.remove();
|
||||
}
|
||||
|
||||
// Create new handle
|
||||
this.scrollHandle = document.createElement('swp-scroll-handle');
|
||||
this.scrollHandle.addEventListener('mousedown', this.handleMouseDown.bind(this));
|
||||
|
||||
this.rightColumn.appendChild(this.scrollHandle);
|
||||
}
|
||||
|
||||
/**
|
||||
* Calculate scroll bounds based on content and container heights
|
||||
*/
|
||||
private calculateScrollBounds(): void {
|
||||
if (!this.scrollableContent || !this.rightColumn) return;
|
||||
|
||||
const contentHeight = this.scrollableContent.scrollHeight;
|
||||
const containerHeight = this.scrollableContent.clientHeight;
|
||||
// Use container height as track height since right column should match scrollable area
|
||||
const trackHeight = containerHeight;
|
||||
|
||||
console.log('ScrollManager Debug:');
|
||||
console.log('- contentHeight (scrollHeight):', contentHeight);
|
||||
console.log('- containerHeight (clientHeight):', containerHeight);
|
||||
console.log('- trackHeight (using containerHeight):', trackHeight);
|
||||
console.log('- scrollableContent element:', this.scrollableContent);
|
||||
|
||||
this.maxScrollTop = Math.max(0, contentHeight - containerHeight);
|
||||
|
||||
// Calculate proportional handle height based on content ratio
|
||||
if (contentHeight > 0 && containerHeight > 0) {
|
||||
const visibleRatio = containerHeight / contentHeight;
|
||||
this.handleHeight = Math.max(20, Math.min(trackHeight * visibleRatio, trackHeight - 10));
|
||||
} else {
|
||||
this.handleHeight = 40; // fallback
|
||||
}
|
||||
|
||||
console.log('- maxScrollTop:', this.maxScrollTop);
|
||||
console.log('- visibleRatio:', (containerHeight / contentHeight).toFixed(3));
|
||||
console.log('- calculated handleHeight:', this.handleHeight);
|
||||
|
||||
// Update handle height in DOM
|
||||
if (this.scrollHandle) {
|
||||
this.scrollHandle.style.height = `${this.handleHeight}px`;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Handle mouse down on scroll handle
|
||||
*/
|
||||
private handleMouseDown(e: MouseEvent): void {
|
||||
e.preventDefault();
|
||||
this.isDragging = true;
|
||||
this.dragStartY = e.clientY;
|
||||
|
||||
if (this.scrollHandle && this.scrollableContent) {
|
||||
this.scrollHandle.classList.add('dragging');
|
||||
this.scrollStartTop = this.scrollableContent.scrollTop;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Handle mouse move during drag
|
||||
*/
|
||||
private handleMouseMove(e: MouseEvent): void {
|
||||
if (!this.isDragging || !this.scrollHandle || !this.scrollableContent) return;
|
||||
|
||||
e.preventDefault();
|
||||
|
||||
const deltaY = e.clientY - this.dragStartY;
|
||||
// Use container height as track height
|
||||
const trackHeight = this.scrollableContent.clientHeight - this.handleHeight;
|
||||
|
||||
// Ensure trackHeight is positive to avoid division by zero
|
||||
if (trackHeight <= 0) return;
|
||||
|
||||
const scrollRatio = deltaY / trackHeight;
|
||||
const newScrollTop = this.scrollStartTop + (scrollRatio * this.maxScrollTop);
|
||||
|
||||
// Clamp scroll position
|
||||
const clampedScrollTop = Math.max(0, Math.min(newScrollTop, this.maxScrollTop));
|
||||
|
||||
// Apply scroll to content
|
||||
this.scrollableContent.scrollTop = clampedScrollTop;
|
||||
|
||||
// Update handle position (this will also trigger time-axis sync via scroll event)
|
||||
this.updateHandlePosition();
|
||||
}
|
||||
|
||||
/**
|
||||
* Handle mouse up to end drag
|
||||
*/
|
||||
private handleMouseUp(e: MouseEvent): void {
|
||||
if (!this.isDragging) return;
|
||||
|
||||
this.isDragging = false;
|
||||
|
||||
if (this.scrollHandle) {
|
||||
this.scrollHandle.classList.remove('dragging');
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Update handle position based on current scroll
|
||||
*/
|
||||
private updateHandlePosition(): void {
|
||||
if (!this.scrollHandle || !this.scrollableContent) return;
|
||||
|
||||
const scrollTop = this.scrollableContent.scrollTop;
|
||||
const scrollRatio = this.maxScrollTop > 0 ? scrollTop / this.maxScrollTop : 0;
|
||||
// Use container height as track height
|
||||
const trackHeight = this.scrollableContent.clientHeight - this.handleHeight;
|
||||
const handleTop = Math.max(0, Math.min(scrollRatio * trackHeight, trackHeight));
|
||||
|
||||
this.scrollHandle.style.top = `${handleTop}px`;
|
||||
|
||||
// Debug logging for handle position
|
||||
if (scrollTop % 200 === 0) { // Log every 200px to avoid spam
|
||||
console.log(`ScrollManager: Handle position - scrollTop: ${scrollTop}, ratio: ${scrollRatio.toFixed(3)}, handleTop: ${handleTop.toFixed(1)}, trackHeight: ${trackHeight}`);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Scroll to specific position
|
||||
*/
|
||||
scrollTo(scrollTop: number): void {
|
||||
if (!this.scrollableContent) return;
|
||||
|
||||
const clampedScrollTop = Math.max(0, Math.min(scrollTop, this.maxScrollTop));
|
||||
this.scrollableContent.scrollTop = clampedScrollTop;
|
||||
this.updateHandlePosition();
|
||||
}
|
||||
|
||||
/**
|
||||
* Scroll to specific hour
|
||||
*/
|
||||
scrollToHour(hour: number): void {
|
||||
const hourHeight = calendarConfig.get('hourHeight');
|
||||
const dayStartHour = calendarConfig.get('dayStartHour');
|
||||
const scrollTop = (hour - dayStartHour) * hourHeight;
|
||||
|
||||
this.scrollTo(scrollTop);
|
||||
}
|
||||
|
||||
/**
|
||||
* Setup ResizeObserver to monitor container size changes
|
||||
*/
|
||||
private setupResizeObserver(): void {
|
||||
if (!this.calendarContainer) return;
|
||||
|
||||
// Clean up existing observer
|
||||
if (this.resizeObserver) {
|
||||
this.resizeObserver.disconnect();
|
||||
}
|
||||
|
||||
this.resizeObserver = new ResizeObserver((entries) => {
|
||||
for (const entry of entries) {
|
||||
console.log('ScrollManager: Container resized', entry.contentRect);
|
||||
this.updateScrollableHeight();
|
||||
}
|
||||
});
|
||||
|
||||
this.resizeObserver.observe(this.calendarContainer);
|
||||
}
|
||||
|
||||
/**
|
||||
* Calculate and update scrollable content height dynamically
|
||||
*/
|
||||
private updateScrollableHeight(): void {
|
||||
if (!this.scrollableContent || !this.calendarContainer) return;
|
||||
|
||||
// Get calendar container height
|
||||
const containerRect = this.calendarContainer.getBoundingClientRect();
|
||||
|
||||
// Find navigation height
|
||||
const navigation = document.querySelector('swp-calendar-nav');
|
||||
const navHeight = navigation ? navigation.getBoundingClientRect().height : 0;
|
||||
|
||||
// Find week header height
|
||||
const weekHeader = document.querySelector('swp-week-header');
|
||||
const headerHeight = weekHeader ? weekHeader.getBoundingClientRect().height : 80;
|
||||
|
||||
// Calculate available height for scrollable content
|
||||
const availableHeight = containerRect.height - headerHeight;
|
||||
|
||||
console.log('ScrollManager: Dynamic height calculation');
|
||||
console.log('- Container height:', containerRect.height);
|
||||
console.log('- Navigation height:', navHeight);
|
||||
console.log('- Header height:', headerHeight);
|
||||
console.log('- Available height:', availableHeight);
|
||||
|
||||
// Set the height on scrollable content
|
||||
if (availableHeight > 0) {
|
||||
this.scrollableContent.style.height = `${availableHeight}px`;
|
||||
|
||||
// Recalculate scroll bounds after height change
|
||||
setTimeout(() => {
|
||||
this.calculateScrollBounds();
|
||||
this.updateHandlePosition();
|
||||
}, 0);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Hide native scrollbar while keeping scroll functionality
|
||||
*/
|
||||
private hideNativeScrollbar(): void {
|
||||
if (!this.scrollableContent) return;
|
||||
|
||||
// Apply CSS to hide scrollbar
|
||||
this.scrollableContent.style.scrollbarWidth = 'none'; // Firefox
|
||||
(this.scrollableContent.style as any).msOverflowStyle = 'none'; // IE/Edge
|
||||
|
||||
// Add webkit scrollbar hiding
|
||||
const style = document.createElement('style');
|
||||
style.textContent = `
|
||||
swp-scrollable-content::-webkit-scrollbar {
|
||||
display: none; /* Chrome/Safari/Opera */
|
||||
}
|
||||
`;
|
||||
document.head.appendChild(style);
|
||||
}
|
||||
|
||||
/**
|
||||
* Setup scroll synchronization between scrollable content and time axis
|
||||
*/
|
||||
private setupScrollSynchronization(): void {
|
||||
if (!this.scrollableContent || !this.timeAxis) return;
|
||||
|
||||
console.log('ScrollManager: Setting up scroll synchronization');
|
||||
|
||||
// Throttle scroll events for better performance
|
||||
let scrollTimeout: number | null = null;
|
||||
|
||||
this.scrollableContent.addEventListener('scroll', () => {
|
||||
if (scrollTimeout) {
|
||||
cancelAnimationFrame(scrollTimeout);
|
||||
}
|
||||
|
||||
scrollTimeout = requestAnimationFrame(() => {
|
||||
this.syncTimeAxisPosition();
|
||||
this.updateHandlePosition();
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Synchronize time axis position with scrollable content
|
||||
*/
|
||||
private syncTimeAxisPosition(): void {
|
||||
if (!this.scrollableContent || !this.timeAxis) return;
|
||||
|
||||
const scrollTop = this.scrollableContent.scrollTop;
|
||||
|
||||
// Use transform for smooth performance
|
||||
this.timeAxis.style.transform = `translateY(-${scrollTop}px)`;
|
||||
|
||||
// Debug logging (can be removed later)
|
||||
if (scrollTop % 100 === 0) { // Only log every 100px to avoid spam
|
||||
console.log(`ScrollManager: Synced time-axis to scrollTop: ${scrollTop}px`);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Cleanup resources
|
||||
*/
|
||||
destroy(): void {
|
||||
if (this.resizeObserver) {
|
||||
this.resizeObserver.disconnect();
|
||||
this.resizeObserver = null;
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue