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

Tracks original column during drag and drop

Browse source 
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
Download patch file Download diff file Expand all files Collapse all files

24
src/renderers/EventRendererManager.ts
View file

@ -161,7 +161,7 @@ export class EventRenderingService {
private setupDragEndListener(): void {
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 finalY = finalPosition.snappedY;
const eventId = draggedElement.dataset.eventId || '';
@ -196,7 +196,7 @@ export class EventRenderingService {
}
// 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
@ -308,29 +308,29 @@ export class EventRenderingService {
/**
* 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>();
// Add source column if exists
if (sourceColumn) {
columnsToRender.add(sourceColumn.date);
// Add original source column if exists
if (originalSourceColumn) {
columnsToRender.add(originalSourceColumn.date);
}
// 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);
}
// Re-render each affected column
columnsToRender.forEach(columnDate => {
this.renderSingleColumn(columnDate);
});
for (const columnDate of columnsToRender) {
await this.renderSingleColumn(columnDate);
}
}
/**
* 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
const columnElement = document.querySelector(`swp-day-column[data-date="${columnDate}"]`) as HTMLElement;
if (!columnElement) {
@ -359,7 +359,7 @@ export class EventRenderingService {
const endDate = this.dateService.parseISO(`${lastColumnDate}T23:59:59.999`);
// Re-render entire container (this will recalculate stacking for all columns)
this.renderEvents({
await this.renderEvents({
container,
startDate,
endDate