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

Just some cleanup

Browse source
This commit is contained in:
Janus Knudsen 2025-08-13 23:05:58 +02:00
parent cdc7e55a92
commit b03707853a
3 changed files with 63 additions and 88 deletions
Download patch file Download diff file Expand all files Collapse all files

18
src/managers/EventRenderer.ts
View file

@ -50,24 +50,6 @@ export class EventRenderer {
// Use strategy to render events
eventRenderer.renderEvents(events, calendarConfig);
// Debug: Check if events are actually in DOM after rendering
setTimeout(() => {
const allRenderedEvents = document.querySelectorAll('swp-event');
console.log(`EventRenderer: DOM check - ${allRenderedEvents.length} swp-event elements found in DOM`);
if (allRenderedEvents.length > 0) {
const firstEvent = allRenderedEvents[0] as HTMLElement;
console.log('EventRenderer: First event DOM details:', {
visible: firstEvent.offsetWidth > 0 && firstEvent.offsetHeight > 0,
offsetParent: !!firstEvent.offsetParent,
computedDisplay: window.getComputedStyle(firstEvent).display,
computedVisibility: window.getComputedStyle(firstEvent).visibility,
computedOpacity: window.getComputedStyle(firstEvent).opacity,
parentElement: firstEvent.parentElement?.tagName
});
}
}, 100);
console.log(`EventRenderer: Successfully rendered ${events.length} events`);
}

58
src/managers/ScrollManager.ts
View file

@ -33,20 +33,14 @@ export class ScrollManager {
}
private subscribeToEvents(): void {
// State events removed - initialize() is now called directly after grid render
// Handle new period shown
//we need to subscribe to appropriate event and then call setupScrolling() again
// Handle window resize
window.addEventListener('resize', () => {
this.updateScrollableHeight();
});
// Handle config updates for scrollbar styling
eventBus.on(EventTypes.CONFIG_UPDATE, (event: Event) => {
const { key } = (event as CustomEvent).detail;
if (key.startsWith('scrollbar')) {
this.applyScrollbarStyling();
}
});
}
/**
@ -59,7 +53,6 @@ export class ScrollManager {
this.setupResizeObserver();
this.updateScrollableHeight();
this.setupScrollSynchronization();
this.applyScrollbarStyling();
}
// Setup horizontal scrolling synchronization
@ -68,45 +61,6 @@ export class ScrollManager {
}
}
/**
* Apply scrollbar styling from configuration
*/
private applyScrollbarStyling(): void {
if (!this.scrollableContent) return;
// Get scrollbar configuration
const scrollbarWidth = calendarConfig.get('scrollbarWidth');
const scrollbarColor = calendarConfig.get('scrollbarColor');
const scrollbarTrackColor = calendarConfig.get('scrollbarTrackColor');
const scrollbarHoverColor = calendarConfig.get('scrollbarHoverColor');
const scrollbarBorderRadius = calendarConfig.get('scrollbarBorderRadius');
// Apply CSS custom properties to both the element and document root
const root = document.documentElement;
// Set on scrollable content
this.scrollableContent.style.setProperty('--scrollbar-width', `${scrollbarWidth}px`);
this.scrollableContent.style.setProperty('--scrollbar-color', scrollbarColor);
this.scrollableContent.style.setProperty('--scrollbar-track-color', scrollbarTrackColor);
this.scrollableContent.style.setProperty('--scrollbar-hover-color', scrollbarHoverColor);
this.scrollableContent.style.setProperty('--scrollbar-border-radius', `${scrollbarBorderRadius}px`);
// Also set on root for global access
root.style.setProperty('--scrollbar-width', `${scrollbarWidth}px`);
root.style.setProperty('--scrollbar-color', scrollbarColor);
root.style.setProperty('--scrollbar-track-color', scrollbarTrackColor);
root.style.setProperty('--scrollbar-hover-color', scrollbarHoverColor);
root.style.setProperty('--scrollbar-border-radius', `${scrollbarBorderRadius}px`);
console.log('ScrollManager: Applied scrollbar styling', {
width: `${scrollbarWidth}px`,
color: scrollbarColor,
trackColor: scrollbarTrackColor,
hoverColor: scrollbarHoverColor,
borderRadius: `${scrollbarBorderRadius}px`
});
}
/**
* Find DOM elements needed for scrolling
*/
@ -116,12 +70,6 @@ export class ScrollManager {
this.timeAxis = document.querySelector('swp-time-axis');
this.calendarHeader = document.querySelector('swp-calendar-header');
console.log('ScrollManager: Found elements:', {
scrollableContent: !!this.scrollableContent,
calendarContainer: !!this.calendarContainer,
timeAxis: !!this.timeAxis,
calendarHeader: !!this.calendarHeader
});
}
/**

71
src/renderers/EventRenderer.ts
View file

@ -30,28 +30,35 @@ export abstract class BaseEventRenderer implements EventRendererStrategy {
// Events should already be filtered by DataManager - no need to filter here
console.log('BaseEventRenderer: Rendering', events.length, 'pre-filtered events');
// Render each event in the correct column
events.forEach(event => {
const column = this.findColumn(event);
// OPTIMIZATION: Column-first rendering instead of event-first
// This is much more efficient when there are many events
const columns = this.getColumns();
console.log(`BaseEventRenderer: Found ${columns.length} columns to render events in`);
if (column) {
const eventsLayer = column.querySelector('swp-events-layer');
if (eventsLayer) {
columns.forEach(column => {
const columnEvents = this.getEventsForColumn(column, events);
console.log(`BaseEventRenderer: Rendering ${columnEvents.length} events in column`);
const eventsLayer = column.querySelector('swp-events-layer');
if (eventsLayer) {
columnEvents.forEach(event => {
console.log(`BaseEventRenderer: Rendering event "${event.title}" in events layer`);
this.renderEvent(event, eventsLayer, config);
});
// Debug: Verify event was actually added
const renderedEvents = eventsLayer.querySelectorAll('swp-event');
console.log(`BaseEventRenderer: Events layer now has ${renderedEvents.length} events`);
} else {
console.warn('BaseEventRenderer: No events layer found in column for event', event.title, 'Column:', column);
}
// Debug: Verify events were actually added
const renderedEvents = eventsLayer.querySelectorAll('swp-event');
console.log(`BaseEventRenderer: Events layer now has ${renderedEvents.length} events`);
} else {
console.warn('BaseEventRenderer: No column found for event', event.title);
console.warn('BaseEventRenderer: No events layer found in column');
}
});
}
// Abstract methods that subclasses must implement for column-first rendering
protected abstract getColumns(): HTMLElement[];
protected abstract getEventsForColumn(column: HTMLElement, events: CalendarEvent[]): CalendarEvent[];
protected renderEvent(event: CalendarEvent, container: Element, config: CalendarConfig): void {
const eventElement = document.createElement('swp-event');
eventElement.dataset.eventId = event.id;
@ -160,6 +167,26 @@ export class DateEventRenderer extends BaseEventRenderer {
return dayColumn;
}
protected getColumns(): HTMLElement[] {
const columns = document.querySelectorAll('swp-day-column');
console.log('DateEventRenderer: Found', columns.length, 'day columns in DOM');
return Array.from(columns) as HTMLElement[];
}
protected getEventsForColumn(column: HTMLElement, events: CalendarEvent[]): CalendarEvent[] {
const columnDate = column.dataset.date;
if (!columnDate) return [];
const columnEvents = events.filter(event => {
const eventDate = new Date(event.start);
const eventDateStr = DateUtils.formatDate(eventDate);
return eventDateStr === columnDate;
});
console.log(`DateEventRenderer: Column ${columnDate} has ${columnEvents.length} events`);
return columnEvents;
}
}
/**
@ -177,4 +204,22 @@ export class ResourceEventRenderer extends BaseEventRenderer {
console.log('ResourceEventRenderer: Looking for resource column with name', resourceName, 'found:', !!resourceColumn);
return resourceColumn;
}
protected getColumns(): HTMLElement[] {
const columns = document.querySelectorAll('swp-resource-column');
console.log('ResourceEventRenderer: Found', columns.length, 'resource columns in DOM');
return Array.from(columns) as HTMLElement[];
}
protected getEventsForColumn(column: HTMLElement, events: CalendarEvent[]): CalendarEvent[] {
const resourceName = column.dataset.resource;
if (!resourceName) return [];
const columnEvents = events.filter(event => {
return event.resource?.name === resourceName;
});
console.log(`ResourceEventRenderer: Resource ${resourceName} has ${columnEvents.length} events`);
return columnEvents;
}
}