RTL mode breaks drag drop events when TimeAxis filter is applied

[ghulamghousdev]

Forum post

Hi, I'm using Bryntum Scheduler 6.2.4 with Angular 19.

Some time ago, I reported a bug related to a console error when applying a filter on the Scheduler's TimeAxis:
viewtopic.php?f=51&t=29895&p=151530#p151530

It looks like that issue has been resolved — thank you!
However, after reapplying the same filtering logic from the previous ticket, I noticed a new issue:

When using RTL mode with a TimeAxis filter, the drop event is no longer fired.

Reproduction Steps:

1. I've prepared a minimal demo based on your basic example to demonstrate the problem.

2. Run the demo (RTL mode enabled).

3. Zoom in slightly (events might not appear until zoomed in — unclear why).

4. Try dragging and dropping an event.

5. The drop event does not fire (I added console.log in the drop handler to confirm).

This issue only happens when both RTL mode and a TimeAxis filter are applied. Without the filter, drop events work as expected.

Screen.Recording.2025-07-02.at.1.45.34.PM.mov

columns (1).zip

[ghulamghousdev]

Following override can be used as a patch untill the fix is released:

class DragBaseOverride {
    static get target() {
        return {
            class : DragBase
        };
    }

    resolveStartEndDates(draggedElement) {
        const timeline = this.currentOverClient,
            { timeAxis, rtl } = timeline,
            normalizedElement = this.normalizeDraggedElement(draggedElement),
            proxyRect = Rectangle.from(
                normalizedElement,
                !rtl && timeline.timeAxisSubGridElement
            ),
            dd = this.dragData,
            [record] = dd.draggedEntities,
            eventRecord = record.isAssignment ? record.event : record,
            fillSnap = timeline.fillTicks && timeline.snapRelativeToEventStartDate,
            // Cannot calculate using `eventRecord.duration`, since it in Pro does not include non-working time
            totalDurationMS = eventRecord.endDate - eventRecord.startDate;

        // Non-continuous time axis will return null instead of date for a rectangle outside of the view unless
        // told to estimate date.
        // When using fillTicks, we need exact dates for calculations below
        let { start: startDate, end: endDate } =
      timeline.getStartEndDatesFromRectangle(
          proxyRect,
          fillSnap ? null : 'round',
          totalDurationMS,
          true,
          !rtl
      );

        // if dragging is out of timeAxis rect bounds, we will not be able to get dates
        if (startDate && endDate) {
            // When filling ticks, proxy start does not represent actual start date.
            // Need to compensate to get expected result
            if (fillSnap) {
                const // Events offset into the tick, in MS
                    offsetMS =
            eventRecord.startDate -
            DateHelper.startOf(eventRecord.startDate, timeAxis.unit),
                    // Proxy length in MS
                    proxyMS = endDate - startDate,
                    // Part of proxy that is "filled" and needs to be removed
                    offsetPx = (offsetMS / proxyMS) * proxyRect.width;

                // Deflate top for vertical mode, left for horizontal mode
                proxyRect.deflate(
                    timeline.isVertical ? offsetPx : 0,
                    0,
                    0,
                    timeline.isHorizontal ? offsetPx : 0
                );

                const proxyStart = proxyRect.getStart(
                    timeline.rtl,
                    !timeline.isVertical
                );

                // Get date from offset proxy start
                startDate = timeline.getDateFromCoordinate(proxyStart, null, true);
                // Snap relative to event start date
                startDate = timeAxis.roundDate(startDate, eventRecord.startDate);
            }

            startDate = this.adjustStartDate(startDate, 0);

            if (!dd.startsOutsideView) {
                // Make sure we didn't target a start date that is filtered out, if we target last hour cell (e.g. 21:00) of
                // the time axis, and the next tick is 08:00 following day. Trying to drop at end of 21:00 cell should target start of next cell
                if (!timeAxis.dateInAxis(startDate, false)) {
                    const tick = timeAxis.getTickFromDate(startDate);

                    if (tick >= 0) {
                        startDate = timeAxis.getDateFromTick(tick);
                    }
                }

                // In RTL mode with non-continuous time axis, the "start" position actually represents
                // the end of the event in RTL. We need to swap startDate and endDate to maintain correct
                // chronological order: startDate becomes endDate, and we calculate the new startDate by subtracting duration.
                if (rtl) {
                    endDate = startDate;
                    startDate = endDate && DateHelper.add(endDate, -totalDurationMS);
                }
                else {
                    endDate = startDate && DateHelper.add(startDate, totalDurationMS);
                }
            }
            else if (!dd.endsOutsideView) {
                // In RTL mode with non-continuous time axis, the "end" position actually represents
                // the start of the event in RTL. We need to swap startDate and endDate to maintain correct
                // chronological order: endDate becomes startDate, and we calculate the new endDate by adding duration.
                if (rtl) {
                    startDate = endDate;
                    endDate = endDate && DateHelper.add(endDate, totalDurationMS);
                }
                else {
                    startDate = endDate && DateHelper.add(endDate, -totalDurationMS);
                }
            }
        }

        return {
            startDate,
            endDate
        };
    }
}
Override.apply(DragBaseOverride);

https://bryntum.com/products/scheduler/docs/api/Core/mixin/Override