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

Refactors drag and drop manager for performance

Browse source 
Improves drag and drop performance by caching DOM elements and consolidating position calculations.

This reduces redundant DOM queries and optimizes event handling for smoother user interaction.
Also leverages `DateCalculator` for date/time conversions.
This commit is contained in:
Janus Knudsen 2025-09-03 19:05:03 +02:00
parent 05bb074e9a
commit d0936d1838
2 changed files with 193 additions and 112 deletions
Download patch file Download diff file Expand all files Collapse all files

68
src/utils/PositionUtils.ts
View file

@ -1,8 +1,9 @@
import { CalendarConfig } from '../core/CalendarConfig.js';
import { DateCalculator } from './DateCalculator.js';
/**
* PositionUtils - Utility functions for pixel/minute conversion
* Handles positioning and size calculations for calendar events
* PositionUtils - Optimized positioning utilities using DateCalculator
* Focuses on pixel/position calculations while delegating date operations
*/
export class PositionUtils {
private config: CalendarConfig;
@ -30,11 +31,10 @@ export class PositionUtils {
}
/**
* Convert time (HH:MM) to pixels from day start
* Convert time (HH:MM) to pixels from day start using DateCalculator
*/
public timeToPixels(timeString: string): number {
const [hours, minutes] = timeString.split(':').map(Number);
const totalMinutes = (hours * 60) + minutes;
const totalMinutes = DateCalculator.timeToMinutes(timeString);
const gridSettings = this.config.getGridSettings();
const dayStartMinutes = gridSettings.dayStartHour * 60;
const minutesFromDayStart = totalMinutes - dayStartMinutes;
@ -43,12 +43,10 @@ export class PositionUtils {
}
/**
* Convert Date object to pixels from day start
* Convert Date object to pixels from day start using DateCalculator
*/
public dateToPixels(date: Date): number {
const hours = date.getHours();
const minutes = date.getMinutes();
const totalMinutes = (hours * 60) + minutes;
const totalMinutes = DateCalculator.getMinutesSinceMidnight(date);
const gridSettings = this.config.getGridSettings();
const dayStartMinutes = gridSettings.dayStartHour * 60;
const minutesFromDayStart = totalMinutes - dayStartMinutes;
@ -57,7 +55,7 @@ export class PositionUtils {
}
/**
* Konverter pixels til tid (HH:MM format)
* Convert pixels to time using DateCalculator
*/
public pixelsToTime(pixels: number): string {
const minutes = this.pixelsToMinutes(pixels);
@ -65,10 +63,7 @@ export class PositionUtils {
const dayStartMinutes = gridSettings.dayStartHour * 60;
const totalMinutes = dayStartMinutes + minutes;
const hours = Math.floor(totalMinutes / 60);
const mins = Math.round(totalMinutes % 60);
return `${hours.toString().padStart(2, '0')}:${mins.toString().padStart(2, '0')}`;
return DateCalculator.minutesToTime(totalMinutes);
}
/**
@ -116,19 +111,15 @@ export class PositionUtils {
}
/**
* Snap tid til interval
* Snap time to interval using DateCalculator
*/
public snapTimeToInterval(timeString: string): string {
const [hours, minutes] = timeString.split(':').map(Number);
const totalMinutes = (hours * 60) + minutes;
const totalMinutes = DateCalculator.timeToMinutes(timeString);
const gridSettings = this.config.getGridSettings();
const snapInterval = gridSettings.snapInterval;
const snappedMinutes = Math.round(totalMinutes / snapInterval) * snapInterval;
const snappedHours = Math.floor(snappedMinutes / 60);
const remainingMinutes = snappedMinutes % 60;
return `${snappedHours.toString().padStart(2, '0')}:${remainingMinutes.toString().padStart(2, '0')}`;
return DateCalculator.minutesToTime(snappedMinutes);
}
/**
@ -231,21 +222,21 @@ export class PositionUtils {
}
/**
* Konverter ISO datetime til lokal tid string
* Convert ISO datetime to time string using DateCalculator
*/
public isoToTimeString(isoString: string): string {
const date = new Date(isoString);
const hours = date.getHours();
const minutes = date.getMinutes();
return `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}`;
return DateCalculator.formatTime(date);
}
/**
* Konverter lokal tid string til ISO datetime for i dag
* Convert time string to ISO datetime using DateCalculator
*/
public timeStringToIso(timeString: string, date: Date = new Date()): string {
const [hours, minutes] = timeString.split(':').map(Number);
const totalMinutes = DateCalculator.timeToMinutes(timeString);
const hours = Math.floor(totalMinutes / 60);
const minutes = totalMinutes % 60;
const newDate = new Date(date);
newDate.setHours(hours, minutes, 0, 0);
@ -253,29 +244,14 @@ export class PositionUtils {
}
/**
* Beregn event varighed i minutter
* Calculate event duration using DateCalculator
*/
public calculateDuration(startTime: string | Date, endTime: string | Date): number {
let startMs: number;
let endMs: number;
if (typeof startTime === 'string') {
startMs = new Date(startTime).getTime();
} else {
startMs = startTime.getTime();
}
if (typeof endTime === 'string') {
endMs = new Date(endTime).getTime();
} else {
endMs = endTime.getTime();
}
return Math.round((endMs - startMs) / (1000 * 60)); // Minutter
return DateCalculator.getDurationMinutes(startTime, endTime);
}
/**
* Format varighed til læsbar tekst
* Format duration to readable text (Danish)
*/
public formatDuration(minutes: number): string {
if (minutes < 60) {