Refactor resize and event rendering with performance improvements
Optimizes event resize and rendering logic by: - Simplifying resize handle management - Improving single column event rendering - Reducing unnecessary DOM operations - Removing redundant event caching and subscriptions Improves performance and reduces complexity in event interaction flow
This commit is contained in:
parent
133cf34906
commit
34cf4fbfca
5 changed files with 597 additions and 262 deletions
|
|
@ -1,5 +1,4 @@
|
|||
import { eventBus } from '../core/EventBus';
|
||||
import { CoreEvents } from '../constants/CoreEvents';
|
||||
import { Configuration } from '../configurations/CalendarConfig';
|
||||
import { IResizeEndEventPayload } from '../types/EventTypes';
|
||||
import { PositionUtils } from '../utils/PositionUtils';
|
||||
|
|
@ -7,13 +6,11 @@ import { PositionUtils } from '../utils/PositionUtils';
|
|||
type SwpEventEl = HTMLElement & { updateHeight?: (h: number) => void };
|
||||
|
||||
export class ResizeHandleManager {
|
||||
private cachedEvents: SwpEventEl[] = [];
|
||||
private isResizing = false;
|
||||
private targetEl: SwpEventEl | null = null;
|
||||
|
||||
private startY = 0;
|
||||
private startDurationMin = 0;
|
||||
private direction: 'grow' | 'shrink' = 'grow';
|
||||
|
||||
private snapMin: number;
|
||||
private minDurationMin: number;
|
||||
|
|
@ -21,7 +18,6 @@ export class ResizeHandleManager {
|
|||
private currentHeight = 0;
|
||||
private targetHeight = 0;
|
||||
|
||||
private unsubscribers: Array<() => void> = [];
|
||||
private pointerCaptured = false;
|
||||
private prevZ?: string;
|
||||
|
||||
|
|
@ -40,39 +36,24 @@ export class ResizeHandleManager {
|
|||
}
|
||||
|
||||
public initialize(): void {
|
||||
this.refreshEventCache();
|
||||
this.attachHandles();
|
||||
this.attachGlobalListeners();
|
||||
this.subscribeToEventBus();
|
||||
}
|
||||
|
||||
public destroy(): void {
|
||||
this.removeEventListeners();
|
||||
this.unsubscribers.forEach(unsubscribe => unsubscribe());
|
||||
this.unsubscribers = [];
|
||||
}
|
||||
|
||||
private removeEventListeners(): void {
|
||||
const calendarContainer = document.querySelector('swp-calendar-container');
|
||||
if (calendarContainer) {
|
||||
calendarContainer.removeEventListener('mouseover', this.onMouseOver, true);
|
||||
}
|
||||
|
||||
document.removeEventListener('pointerdown', this.onPointerDown, true);
|
||||
document.removeEventListener('pointermove', this.onPointerMove, true);
|
||||
document.removeEventListener('pointerup', this.onPointerUp, true);
|
||||
}
|
||||
|
||||
private refreshEventCache(): void {
|
||||
this.cachedEvents = Array.from(
|
||||
document.querySelectorAll<SwpEventEl>('swp-day-columns swp-event')
|
||||
);
|
||||
}
|
||||
|
||||
private attachHandles(): void {
|
||||
this.cachedEvents.forEach(element => {
|
||||
if (!element.querySelector(':scope > swp-resize-handle')) {
|
||||
const handle = this.createResizeHandle();
|
||||
element.appendChild(handle);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
private createResizeHandle(): HTMLElement {
|
||||
const handle = document.createElement('swp-resize-handle');
|
||||
handle.setAttribute('aria-label', 'Resize event');
|
||||
|
|
@ -84,7 +65,7 @@ export class ResizeHandleManager {
|
|||
const calendarContainer = document.querySelector('swp-calendar-container');
|
||||
|
||||
if (calendarContainer) {
|
||||
calendarContainer.addEventListener('mouseenter', this.onMouseEnter, true);
|
||||
calendarContainer.addEventListener('mouseover', this.onMouseOver, true);
|
||||
}
|
||||
|
||||
document.addEventListener('pointerdown', this.onPointerDown, true);
|
||||
|
|
@ -92,38 +73,19 @@ export class ResizeHandleManager {
|
|||
document.addEventListener('pointerup', this.onPointerUp, true);
|
||||
}
|
||||
|
||||
private onMouseEnter = (e: Event): void => {
|
||||
private onMouseOver = (e: Event): void => {
|
||||
const target = e.target as HTMLElement;
|
||||
const eventElement = target.closest<SwpEventEl>('swp-event');
|
||||
|
||||
if (eventElement) {
|
||||
const handle = eventElement.querySelector('swp-resize-handle');
|
||||
if (handle) {
|
||||
console.log('Resize handle visible on event:', eventElement.dataset.eventId);
|
||||
if (eventElement && !this.isResizing) {
|
||||
// Check if handle already exists
|
||||
if (!eventElement.querySelector(':scope > swp-resize-handle')) {
|
||||
const handle = this.createResizeHandle();
|
||||
eventElement.appendChild(handle);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
private subscribeToEventBus(): void {
|
||||
const eventsToRefresh = [
|
||||
CoreEvents.GRID_RENDERED,
|
||||
CoreEvents.EVENTS_RENDERED,
|
||||
CoreEvents.EVENT_CREATED,
|
||||
CoreEvents.EVENT_UPDATED,
|
||||
CoreEvents.EVENT_DELETED
|
||||
];
|
||||
|
||||
const refresh = () => {
|
||||
this.refreshEventCache();
|
||||
this.attachHandles();
|
||||
};
|
||||
|
||||
eventsToRefresh.forEach(event => {
|
||||
eventBus.on(event, refresh);
|
||||
this.unsubscribers.push(() => eventBus.off(event, refresh));
|
||||
});
|
||||
}
|
||||
|
||||
private onPointerDown = (e: PointerEvent): void => {
|
||||
const handle = (e.target as HTMLElement).closest('swp-resize-handle');
|
||||
if (!handle) return;
|
||||
|
|
@ -172,7 +134,6 @@ export class ResizeHandleManager {
|
|||
|
||||
private updateResizeHeight(currentY: number): void {
|
||||
const deltaY = currentY - this.startY;
|
||||
this.direction = deltaY >= 0 ? 'grow' : 'shrink';
|
||||
|
||||
const startHeight = this.positionUtils.minutesToPixels(this.startDurationMin);
|
||||
const rawHeight = startHeight + deltaY;
|
||||
|
|
@ -260,7 +221,6 @@ export class ResizeHandleManager {
|
|||
this.targetEl = null;
|
||||
|
||||
document.documentElement.classList.remove('swp--resizing');
|
||||
this.refreshEventCache(); // TODO: Optimize to avoid full cache refresh
|
||||
}
|
||||
|
||||
private restoreZIndex(): void {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue