Premium support for our pure JavaScript UI components


Post by tomerPlanit »

Hi I use scheduler 5.3.1 with angular 14

I get a problem when I am trying change zoom in rtl mode with "zoomToLevel()"

I am trying on change the zoom to show specific date in the same offset(specific date that always in the view in specific place in the scheduler).

In "LTR" It works fine but in "RTL" I lose the date.

Explain:
I use the "zoomToLevel()" with the zoomDate and zoomPosition properties.
In the zoom date I put the date that I want to save in the view and the offset I calculate like this:

calculateOfsset(scheduler) {

    // Get date X.
    const x = scheduler.getCoordinateFromDate(this.timeRangeDate);

    // Calculate new click offset 0-1.
    let clickOffset: number = x / scheduler.timelineScroller.scrollWidth;
    if (this.direction === 'rtl') {
        clickOffset = 1 - clickOffset;
    }

    // Calculate offset in px.
    this.clickClientOffset = clickOffset * scheduler.timelineScroller.scrollWidth;
}

I create a demo for you for show the problem.

angular14-5.3.1-zoom-to-level-rtl.rar
(112.22 KiB) Downloaded 22 times

Reproduce:
1) I add some time range that need be always in the same place after zoom.
2) on first load you start as "LTR" mode.
3) Click on the "ZOOM+/ZOOM-" You will see that the time range stay in the same place.
4) I add button that change the scheduler direction(Click).
5) Play again with the "ZOOM+/ZOOM-" you will see that it is broken.

צילום מסך 2023-03-20 150237.png
צילום מסך 2023-03-20 150237.png (36.24 KiB) Viewed 511 times

How can I solve this issue?


Post by mats »

Please share the code showing how you call zoomToLevel and we'll take a look.


Post by tomerPlanit »

The code is attached in the original post..
Adding the link here:

download/file.php?id=21272&sid=cec4c3468c39a099e4836584a034fe6a


Post by alex.l »

I've reproduced it. Here is a ticket for this problem https://github.com/bryntum/support/issues/6415
Thank you for the test case!

All the best,
Alex


Post by alex.l »

Hi tomerPlanit,

We checked this bug deeply and found that it works as expected if we don't use your custom offset calculation method.
Could you please tell us what exactly you want to achieve using that offset? We need to understand the logic of this code to know expected result and confirm a bug in our code or fix that method algorithm.
But, we confirmed that timeline doesn't keep center as it should when we do zoomIn/zoomOut many times, I've opened another ticket for that case https://github.com/bryntum/support/issues/6436

All the best,
Alex


Post by tomerPlanit »

Hi Alex,
I want to achieve, that on any my zoom action specific date must be fixed in specific place(offset) of the scheduler view time line.
Like you can see in the demo that I created in "LTR"(The time range always stay in the same offset of the view).


Post by alex.l »

Ok, but what it calculates?

I missed one important thing in your template.
Officially we do not support RTL now, we have it ready 95% but it's not officially released, so it is not documented yet.
To enable rtl mode you need to set rtl: true in the Scheduler config (not with CSS, please remove that), or at runtime. Since it's not documented yet, our wrappers and typings won't support this property, so the way to enable it, as example inside your schedulerPaint method:

    // Init scheduler data when finish pain the scheduler.
    schedulerPaint(event: object) {

    // If it is first paint.
    if (event['firstPaint'] === true) {
        this.scheduler = event['source'];
        this.scheduler.on('selectionchange', this.resourceSelectionChange.bind(this));
        
        // @ts-ignore
        this.scheduler.rtl = true;
        
        this.calculateOfsset(this.scheduler);
    }
}

But, there is a bug with infiniteScroll and changing direction at runtime, and timeline position will jump and needs to be centered again after switch. I've opened another ticket for that https://github.com/bryntum/support/issues/6439

Regarding to your initial bug, please adjust your solution according to last notes and try to reproduce the problem again.

All the best,
Alex


Post by tomerPlanit »

Hi Alex,
After apply the scheduler rtl as you explained the problem is still happened, and the date jumps any scheduler direction change as you show above.

The thing that I calculate is the new fixed date position because the time line changed and it is not must be the same time line width(So I need to calculate the new date position for be in the same offset in the view time line).

You can see the result in "ltr" mode that works perfect.

Add new demo after change that you ask for.

Attachments
angular14-5.3.1-zoom-to-level-rtl.rar
(112.28 KiB) Downloaded 16 times

Post by alex.l »

I am still not sure what that code should do, it just makes no sense to me.
You get offset before zooming and repositioning. After that you set zoomDate to center it by this date, and add offset value for position before re-positioning to date.

I guess you want to center timeline by timeRange startDate position?
This code works great to me.


zoomOut() {
    const offset = this.scheduler.getCoordinateFromDate(this.timeRangeDate);
    this.scheduler.zoomToLevel(this.scheduler.zoomLevel + 1, {
        zoomPosition: this.direction === 'rtl' ? -offset : offset
    });
}
zoomIn() {
    const offset = this.scheduler.getCoordinateFromDate(this.timeRangeDate);
    this.scheduler.zoomToLevel(this.scheduler.zoomLevel - 1, {
        zoomPosition: this.direction === 'rtl' ? -offset : offset
    });
}

There is some moving to side when zoomIn/zoomOut with RTL direction, I opened a ticket to fix that https://github.com/bryntum/support/issues/6436

All the best,
Alex


Post by tomerPlanit »

Wanted Behavior:
The time range must stay in the same position in the view for each Zoom:

zoom1.gif
zoom1.gif (5.99 MiB) Viewed 316 times

Yours Behavior:
The time range move from the position:

zoom2.gif
zoom2.gif (2.83 MiB) Viewed 316 times

I create new demo that use your code above with add the date for zoom like this:


zoomOut() {
    const offset = this.scheduler.getCoordinateFromDate(this.timeRangeDate);
    this.scheduler.zoomToLevel(this.scheduler.zoomLevel + 1, {
        zoomDate:this.timeRangeDate,
        zoomPosition: this.direction === 'rtl' ? -offset : offset
    });
}

zoomIn() {
    const offset = this.scheduler.getCoordinateFromDate(this.timeRangeDate);
    this.scheduler.zoomToLevel(this.scheduler.zoomLevel - 1, {
        zoomDate:this.timeRangeDate,
        zoomPosition: this.direction === 'rtl' ? -offset : offset
    });
}

And it still works fine in "ltr" and not in "rtl":

zoom3.gif
zoom3.gif (5.95 MiB) Viewed 316 times

Post Reply