Calendar/src/managers/ResizeHandleManager.ts

266 lines
7.9 KiB
TypeScript
Raw Normal View History

import { eventBus } from '../core/EventBus';
import { CoreEvents } from '../constants/CoreEvents';
2025-11-03 22:04:37 +01:00
import { Configuration } from '../configurations/CalendarConfig';
2025-11-03 21:30:50 +01:00
import { IResizeEndEventPayload } from '../types/EventTypes';
import { PositionUtils } from '../utils/PositionUtils';
type SwpEventEl = HTMLElement & { updateHeight?: (h: number) => void };
export class ResizeHandleManager {
private cachedEvents: SwpEventEl[] = [];
2025-10-08 00:58:38 +02:00
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;
private animationId: number | null = null;
private currentHeight = 0;
private targetHeight = 0;
private unsubscribers: Array<() => void> = [];
private pointerCaptured = false;
private prevZ?: string;
// Constants for better maintainability
private readonly ANIMATION_SPEED = 0.35;
private readonly Z_INDEX_RESIZING = '1000';
private readonly EVENT_REFRESH_THRESHOLD = 0.5;
constructor(
private config: Configuration,
private positionUtils: PositionUtils
) {
2025-11-03 22:04:37 +01:00
const grid = this.config.gridSettings;
this.snapMin = grid.snapInterval;
this.minDurationMin = this.snapMin;
2025-10-08 00:58:38 +02:00
}
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 {
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);
2025-10-08 00:58:38 +02:00
}
});
}
private createResizeHandle(): HTMLElement {
const handle = document.createElement('swp-resize-handle');
handle.setAttribute('aria-label', 'Resize event');
handle.setAttribute('role', 'separator');
return handle;
}
private attachGlobalListeners(): void {
document.addEventListener('pointerdown', this.onPointerDown, true);
document.addEventListener('pointermove', this.onPointerMove, true);
document.addEventListener('pointerup', this.onPointerUp, true);
}
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));
});
}
2025-10-08 00:58:38 +02:00
private onPointerDown = (e: PointerEvent): void => {
const handle = (e.target as HTMLElement).closest('swp-resize-handle');
if (!handle) return;
2025-10-08 00:58:38 +02:00
const element = handle.parentElement as SwpEventEl;
this.startResizing(element, e);
};
private startResizing(element: SwpEventEl, event: PointerEvent): void {
this.targetEl = element;
this.isResizing = true;
this.startY = event.clientY;
2025-10-08 00:58:38 +02:00
const startHeight = element.offsetHeight;
this.startDurationMin = Math.max(
this.minDurationMin,
Math.round(this.positionUtils.pixelsToMinutes(startHeight))
);
2025-10-08 00:58:38 +02:00
this.setZIndexForResizing(element);
this.capturePointer(event);
document.documentElement.classList.add('swp--resizing');
event.preventDefault();
}
2025-10-08 00:58:38 +02:00
private setZIndexForResizing(element: SwpEventEl): void {
const container = element.closest<HTMLElement>('swp-event-group') ?? element;
this.prevZ = container.style.zIndex;
container.style.zIndex = this.Z_INDEX_RESIZING;
}
private capturePointer(event: PointerEvent): void {
try {
(event.target as Element).setPointerCapture?.(event.pointerId);
this.pointerCaptured = true;
} catch (error) {
console.warn('Pointer capture failed:', error);
2025-10-08 00:58:38 +02:00
}
}
2025-10-08 00:58:38 +02:00
private onPointerMove = (e: PointerEvent): void => {
if (!this.isResizing || !this.targetEl) return;
2025-10-08 00:58:38 +02:00
this.updateResizeHeight(e.clientY);
};
private updateResizeHeight(currentY: number): void {
const deltaY = currentY - this.startY;
this.direction = deltaY >= 0 ? 'grow' : 'shrink';
2025-10-08 00:58:38 +02:00
const startHeight = this.positionUtils.minutesToPixels(this.startDurationMin);
const rawHeight = startHeight + deltaY;
const minHeight = this.positionUtils.minutesToPixels(this.minDurationMin);
2025-10-08 00:58:38 +02:00
this.targetHeight = Math.max(minHeight, rawHeight);
if (this.animationId == null) {
this.currentHeight = this.targetEl?.offsetHeight!!;
2025-10-08 00:58:38 +02:00
this.animate();
}
}
2025-10-08 00:58:38 +02:00
private animate = (): void => {
if (!this.isResizing || !this.targetEl) {
this.animationId = null;
return;
}
2025-10-08 00:58:38 +02:00
const diff = this.targetHeight - this.currentHeight;
if (Math.abs(diff) > this.EVENT_REFRESH_THRESHOLD) {
this.currentHeight += diff * this.ANIMATION_SPEED;
this.targetEl.updateHeight?.(this.currentHeight);
this.animationId = requestAnimationFrame(this.animate);
2025-10-08 00:58:38 +02:00
} else {
this.finalizeAnimation();
2025-10-08 00:58:38 +02:00
}
};
2025-10-08 00:58:38 +02:00
private finalizeAnimation(): void {
if (!this.targetEl) return;
2025-10-08 00:58:38 +02:00
this.currentHeight = this.targetHeight;
this.targetEl.updateHeight?.(this.currentHeight);
this.animationId = null;
}
private onPointerUp = (e: PointerEvent): void => {
if (!this.isResizing || !this.targetEl) return;
this.cleanupAnimation();
this.snapToGrid();
this.emitResizeEndEvent();
this.cleanupResizing(e);
};
private cleanupAnimation(): void {
if (this.animationId != null) {
cancelAnimationFrame(this.animationId);
this.animationId = null;
}
}
private snapToGrid(): void {
if (!this.targetEl) return;
2025-10-08 00:58:38 +02:00
const currentHeight = this.targetEl.offsetHeight;
const snapDistancePx = this.positionUtils.minutesToPixels(this.snapMin);
2025-10-08 00:58:38 +02:00
const snappedHeight = Math.round(currentHeight / snapDistancePx) * snapDistancePx;
const minHeight = this.positionUtils.minutesToPixels(this.minDurationMin);
const finalHeight = Math.max(minHeight, snappedHeight) - 3; // Small gap to grid lines
2025-10-08 00:58:38 +02:00
this.targetEl.updateHeight?.(finalHeight);
}
private emitResizeEndEvent(): void {
if (!this.targetEl) return;
2025-10-08 00:58:38 +02:00
const eventId = this.targetEl.dataset.eventId || '';
2025-11-03 21:30:50 +01:00
const resizeEndPayload: IResizeEndEventPayload = {
eventId,
element: this.targetEl,
finalHeight: this.targetEl.offsetHeight
};
eventBus.emit('resize:end', resizeEndPayload);
}
private cleanupResizing(event: PointerEvent): void {
this.restoreZIndex();
this.releasePointer(event);
2025-10-08 00:58:38 +02:00
this.isResizing = false;
this.targetEl = null;
document.documentElement.classList.remove('swp--resizing');
this.refreshEventCache(); // TODO: Optimize to avoid full cache refresh
}
private restoreZIndex(): void {
if (!this.targetEl || this.prevZ === undefined) return;
const container = this.targetEl.closest<HTMLElement>('swp-event-group') ?? this.targetEl;
container.style.zIndex = this.prevZ;
this.prevZ = undefined;
}
2025-10-08 00:58:38 +02:00
private releasePointer(event: PointerEvent): void {
if (!this.pointerCaptured) return;
try {
(event.target as Element).releasePointerCapture?.(event.pointerId);
this.pointerCaptured = false;
} catch (error) {
console.warn('Pointer release failed:', error);
}
}
}