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

Enhances event drag and resize functionality

Browse source 
Improves event dragging by tracking the source column and using the updated event data for re-rendering affected columns.

Also, enhances event resizing by updating the event data and re-rendering the column to recalculate stacking/grouping.

Uses snap interval as minimum duration when resizing.
This commit is contained in:
Janus C. H. Knudsen 2025-10-08 22:18:06 +02:00
parent e83753a7d2
commit ecb1729c28
4 changed files with 154 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

7
src/managers/DragDropManager.ts
View file

@ -40,6 +40,7 @@ export class DragDropManager {
private draggedElement!: HTMLElement | null;
private draggedClone!: HTMLElement | null;
private currentColumnBounds: ColumnBounds | null = null;
private initialColumnBounds: ColumnBounds | null = null; // Track source column
private isDragStarted = false;
// Hover state
@ -231,8 +232,9 @@ export class DragDropManager {
this.draggedElement.style.zIndex = '9999';
}
// Detect current column
// Detect current column and save as initial source column
this.currentColumnBounds = ColumnDetectionUtils.getColumnBounds(currentPosition);
this.initialColumnBounds = this.currentColumnBounds; // Save source column
// Cast to BaseSwpEventElement and create clone (works for both SwpEventElement and SwpAllDayEventElement)
const originalElement = this.draggedElement as BaseSwpEventElement;
@ -344,8 +346,9 @@ export class DragDropManager {
const dragEndPayload: DragEndEventPayload = {
originalElement: this.draggedElement,
draggedClone: this.draggedClone,
sourceColumn: this.initialColumnBounds, // Where drag started
mousePosition,
finalPosition: { column, snappedY },
finalPosition: { column, snappedY }, // Where drag ended
target: dropTarget
};
this.eventBus.emit('drag:end', dragEndPayload);

12
src/managers/ResizeHandleManager.ts
View file

@ -1,6 +1,7 @@
import { eventBus } from '../core/EventBus';
import { CoreEvents } from '../constants/CoreEvents';
import { calendarConfig } from '../core/CalendarConfig';
import { ResizeEndEventPayload } from '../types/EventTypes';
type SwpEventEl = HTMLElement & { updateHeight?: (h: number) => void };
@ -33,7 +34,7 @@ export class ResizeHandleManager {
const grid = calendarConfig.getGridSettings();
this.hourHeightPx = grid.hourHeight;
this.snapMin = grid.snapInterval;
this.minDurationMin = grid.minEventDuration ?? this.snapMin;
this.minDurationMin = this.snapMin; // Use snap interval as minimum duration
}
public initialize(): void {
@ -232,6 +233,15 @@ export class ResizeHandleManager {
this.targetEl.updateHeight?.(finalHeight);
// Emit resize:end event for re-stacking
const eventId = this.targetEl.dataset.eventId || '';
const resizeEndPayload: ResizeEndEventPayload = {
eventId,
element: this.targetEl,
finalHeight
};
eventBus.emit('resize:end', resizeEndPayload);
const group = this.targetEl.closest<HTMLElement>('swp-event-group') ?? this.targetEl;
group.style.zIndex = this.prevZ ?? '';
this.prevZ = undefined;