Our pure JavaScript Scheduler component


Post by Softhouse »

Hi!
We recently got around to bumping our Bryntum version from 5.1.3 to 5.2.10.
But I noticed that our resize functionality started giving issues.
To drag or resize events in our application we need to press and hold Ctrl.
This causes the resize feature to be enabled "disabled = false". (PlanScheduler, line 62)
First nothing really happened when doing this in the new version, until I tried adding "refreshWithTransition" after the feature toggle. That made it so that we can resize the events, but no resize handle is displayed.
To get the handle to display I need to move the cursor from the event to another or just out and back, this causes the handle to be displayed.

Steps to reproduce:

  1. Hover over an event
  2. Press and hold Ctrl
  3. No handles to resize are visible but you can still resize if the cursor is moved to either side of the event.
  4. Move the cursor to another event.
  5. The handles to resize will become visible.

Hope this gives some indication of what can be the issue.

Thanks in advance!

Attachments
bryntum-resize-example.zip
(355.14 KiB) Downloaded 18 times

Post by tasnim »

Hi,

Upgrading to 5.3 seems solved the issue.

Please check the attached video

Attachments
Recording 2023-03-15 200824.mp4
(2.33 MiB) Downloaded 17 times

Post by Softhouse »

Thanks for the reply!
I have updated to 5.3.1 but I still have to call "refreshWithTransition()" to get the resize handle to appear on the bar.
I have attached two videos showing the issue. The first one noRefresh shows when I don't use refreshWithTransition() and that I have to move an event before it can be resized.
The other video, Refresh, shows how it looks when refreshWithTransition() is used. I still have to resize or move outside of the event to get the handles to appear.

Attachments
Vue App - noRefresh.mp4
(17.52 MiB) Downloaded 16 times
Vue App - Refresh.mp4
(17.46 MiB) Downloaded 17 times

Post by tasnim »

Are you able to reproduce it with one of our vanilla js examples here https://bryntum.com/products/schedulerpro/examples/?


Post by Softhouse »

Hi!
I can still reproduce it in your example.
Used this example: https://bryntum.com/products/schedulerpro/examples-scheduler/basic/
And added this code to the "new Scheduler(...)" part.

    features : {
       eventDrag: { disabled: true },
       eventResize: { disabled: true }
    },
    listeners : {
        eventKeyDown(object) {
           console.log(scheduler.features.eventResize.disabled);
           scheduler.features.eventResize.disabled=false;
           console.log(scheduler.features.eventResize.disabled);
           scheduler.refreshWithTransition();
        },
        eventKeyUp(object) {
           console.log(scheduler.features.eventResize.disabled);
           scheduler.features.eventResize.disabled=true;
           console.log(scheduler.features.eventResize.disabled);
           scheduler.refreshWithTransition();
        }
    }

Post by mats »

So the core issue here is that we do not show the resize handles for a currently hovered event bar when setting disabled = false for EventResize? Sounds like a minor bug yes.


Post by Softhouse »

Yes, that is correct.
But we also needed to add "scheduler.refreshWithTransition();" to get the resize functionality to start working.
That we need to call the refresh is not really a problem, it is just that it was not needed in the previous versions.


Post by mats »

Reproduced, we'll get it tested and fixed. Thanks for reporting and trevlig helg! :)

https://github.com/bryntum/support/issues/6593


Post by Animal »

Try this:

    listeners : {
        eventKeyDown({ event }) {
            // keydown repeats while the key is down, so only do it once
            if (this.features.eventResize.disabled) {
                const eventEl = event.target;

                scheduler.features.eventResize.disabled = false;

                // Changing disabled adds the class but does not refresh the events
                // each of which needs a `b-sch-event-resizable-true` class to be resizable
                scheduler.refresh();

                // After the refresh, the hover class will need re-adding
                eventEl.classList.add(this.overScheduledEventClass);
            }
        },
        eventKeyUp(object) {
            scheduler.features.eventResize.disabled=true;
        }
    }

Post Reply