Tracks original column during drag and drop

Introduces originalSourceColumn to accurately track the starting column during drag events

Improves event rendering by ensuring correct column updates and maintaining drag context
Modifies drag end handling to use original source column for re-rendering
Adds async support for column rendering methods
This commit is contained in:
Janus C. H. Knudsen 2025-11-06 16:18:31 +01:00
parent fb174e7403
commit fba85094d7
3 changed files with 17 additions and 14 deletions

View file

@ -161,6 +161,7 @@ export class DragDropManager {
private draggedClone!: HTMLElement | null; private draggedClone!: HTMLElement | null;
private currentColumn: IColumnBounds | null = null; private currentColumn: IColumnBounds | null = null;
private previousColumn: IColumnBounds | null = null; private previousColumn: IColumnBounds | null = null;
private originalSourceColumn: IColumnBounds | null = null; // Track original start column
private isDragStarted = false; private isDragStarted = false;
// Movement threshold to distinguish click from drag // Movement threshold to distinguish click from drag
@ -360,6 +361,7 @@ export class DragDropManager {
const originalElement = this.originalElement as BaseSwpEventElement; const originalElement = this.originalElement as BaseSwpEventElement;
this.currentColumn = ColumnDetectionUtils.getColumnBounds(currentPosition); this.currentColumn = ColumnDetectionUtils.getColumnBounds(currentPosition);
this.originalSourceColumn = this.currentColumn; // Store original source column at drag start
this.draggedClone = originalElement.createClone(); this.draggedClone = originalElement.createClone();
const dragStartPayload: IDragStartEventPayload = { const dragStartPayload: IDragStartEventPayload = {
@ -459,7 +461,7 @@ export class DragDropManager {
originalElement: this.originalElement, originalElement: this.originalElement,
draggedClone: this.draggedClone, draggedClone: this.draggedClone,
mousePosition, mousePosition,
sourceColumn: this.previousColumn!!, originalSourceColumn: this.originalSourceColumn!!,
finalPosition: { column, snappedY }, // Where drag ended finalPosition: { column, snappedY }, // Where drag ended
target: dropTarget target: dropTarget
}; };
@ -625,6 +627,7 @@ export class DragDropManager {
this.originalElement = null; this.originalElement = null;
this.draggedClone = null; this.draggedClone = null;
this.currentColumn = null; this.currentColumn = null;
this.originalSourceColumn = null;
this.isDragStarted = false; this.isDragStarted = false;
this.scrollDeltaY = 0; this.scrollDeltaY = 0;
this.lastScrollTop = 0; this.lastScrollTop = 0;

View file

@ -161,7 +161,7 @@ export class EventRenderingService {
private setupDragEndListener(): void { private setupDragEndListener(): void {
this.eventBus.on('drag:end', async (event: Event) => { this.eventBus.on('drag:end', async (event: Event) => {
const { originalElement: draggedElement, sourceColumn, finalPosition, target } = (event as CustomEvent<IDragEndEventPayload>).detail; const { originalElement: draggedElement, originalSourceColumn, finalPosition, target } = (event as CustomEvent<IDragEndEventPayload>).detail;
const finalColumn = finalPosition.column; const finalColumn = finalPosition.column;
const finalY = finalPosition.snappedY; const finalY = finalPosition.snappedY;
const eventId = draggedElement.dataset.eventId || ''; const eventId = draggedElement.dataset.eventId || '';
@ -196,7 +196,7 @@ export class EventRenderingService {
} }
// Re-render affected columns for stacking/grouping (now with updated data) // Re-render affected columns for stacking/grouping (now with updated data)
this.reRenderAffectedColumns(sourceColumn, finalColumn); await this.reRenderAffectedColumns(originalSourceColumn, finalColumn);
} }
// Clean up any remaining day event clones // Clean up any remaining day event clones
@ -308,29 +308,29 @@ export class EventRenderingService {
/** /**
* Re-render affected columns after drag to recalculate stacking/grouping * Re-render affected columns after drag to recalculate stacking/grouping
*/ */
private reRenderAffectedColumns(sourceColumn: IColumnBounds | null, targetColumn: IColumnBounds | null): void { private async reRenderAffectedColumns(originalSourceColumn: IColumnBounds | null, targetColumn: IColumnBounds | null): Promise<void> {
const columnsToRender = new Set<string>(); const columnsToRender = new Set<string>();
// Add source column if exists // Add original source column if exists
if (sourceColumn) { if (originalSourceColumn) {
columnsToRender.add(sourceColumn.date); columnsToRender.add(originalSourceColumn.date);
} }
// Add target column if exists and different from source // Add target column if exists and different from source
if (targetColumn && targetColumn.date !== sourceColumn?.date) { if (targetColumn && targetColumn.date !== originalSourceColumn?.date) {
columnsToRender.add(targetColumn.date); columnsToRender.add(targetColumn.date);
} }
// Re-render each affected column // Re-render each affected column
columnsToRender.forEach(columnDate => { for (const columnDate of columnsToRender) {
this.renderSingleColumn(columnDate); await this.renderSingleColumn(columnDate);
}); }
} }
/** /**
* Render events for a single column by re-rendering entire container * Render events for a single column by re-rendering entire container
*/ */
private renderSingleColumn(columnDate: string): void { private async renderSingleColumn(columnDate: string): Promise<void> {
// Find the column element // Find the column element
const columnElement = document.querySelector(`swp-day-column[data-date="${columnDate}"]`) as HTMLElement; const columnElement = document.querySelector(`swp-day-column[data-date="${columnDate}"]`) as HTMLElement;
if (!columnElement) { if (!columnElement) {
@ -359,7 +359,7 @@ export class EventRenderingService {
const endDate = this.dateService.parseISO(`${lastColumnDate}T23:59:59.999`); const endDate = this.dateService.parseISO(`${lastColumnDate}T23:59:59.999`);
// Re-render entire container (this will recalculate stacking for all columns) // Re-render entire container (this will recalculate stacking for all columns)
this.renderEvents({ await this.renderEvents({
container, container,
startDate, startDate,
endDate endDate

View file

@ -40,7 +40,7 @@ export interface IDragEndEventPayload {
originalElement: HTMLElement; originalElement: HTMLElement;
draggedClone: HTMLElement | null; draggedClone: HTMLElement | null;
mousePosition: IMousePosition; mousePosition: IMousePosition;
sourceColumn: IColumnBounds; originalSourceColumn: IColumnBounds; // Original column where drag started
finalPosition: { finalPosition: {
column: IColumnBounds | null; // Where drag ended column: IColumnBounds | null; // Where drag ended
snappedY: number; snappedY: number;