Our pure JavaScript Scheduler component


Post by burnit »

Good day!

I am facing an issue with the notesTooltip.
When the tooltip is displayed and i scroll on x-axis to fast, then it shows multiple tooltips buth there is no event?

Unbenanntes Video – Mit Clipchamp erstellt.mp4
(14.06 MiB) Downloaded 25 times
if (eventRecord.name) {
        eventRecord.meta.mutationObserver?.disconnect();
        if (!eventRecord.meta.notesTooltip) {
          const t = (eventRecord.meta.notesTooltip = new Tooltip({
            appendTo: this.timeAxisSubGridElement,
            constrainTo: this.timeAxisSubGridElement,
            floating: false,
            positioned: true,
            style: {
              zIndex: 10,
              fontSize: '8pt',
            },
            html: `Notes for ${eventRecord.name}`,
            autoClose: false,
          }));
          document.addEventListener(
            'scroll',
            () => t.alignTo({ target: t.lastAlignSpec.target, ...t.align }),
            true
          );
          eventRecord.meta.mutationObserver = new MutationObserver(() => t.realign());
        }
        eventRecord.meta.notesTooltip.showBy(element);
        // Make the tip follow the element upon mutation of attributes
        eventRecord.meta.mutationObserver.observe(element, { attributes: true });
      }

Post by Animal »

I'm guessing this is the experimental incantation which I suggested a few weeks ago.

I worked out a more reliable way. The rendered element is overflow:visible so you could render the tooltip directly into it. The align process will still work:

    listeners : {
        renderEvent({ eventRecord, element }) {
            if (!eventRecord.meta.notesTooltip) {
                const t = eventRecord.meta.notesTooltip = new Tooltip({
                    constrainTo  : null,
                    floating     : false,
                    positioned   : true,
                    scrollAction : 'realign',
                    style        : {
                        zIndex      : 10,
                        'font-size' : 'initial'
                    },
                    html         : `Notes for ${eventRecord.name}`,
                    autoClose    : false
                });
            }
            eventRecord.meta.notesTooltip.render(element);
            eventRecord.meta.notesTooltip.showBy(element);
        }
    }

Post by burnit »

Hi @Animal,

sorry for bringing up this old topic ;)
The problem is, that my tooltip will be hidden when the event is out of view.
If is scroll back the event does not fire every time, so the tooltip will not coming up every time.
It looks like if i scroll the event out of view just for a bit and then scroll back, the event is still in DOM and the event doesn't fire again, because it is still there. But the tooltip is not visible anymore.

Any idea how to solve this?

Many thanks!


Post by burnit »

burnit wrote: Sun May 28, 2023 7:23 pm

Hi @Animal,

sorry for bringing up this old topic ;)
The problem is, that my tooltip will be hidden when the event is out of view.
If is scroll back the event does not fire every time, so the tooltip will not coming up every time.
It looks like if i scroll the event out of view just for a bit and then scroll back, the event is still in DOM and the event doesn't fire again, because it is still there. But the tooltip is not visible anymore.

Any idea how to solve this?

Many thanks!

Does anyone else have an idea how to get it solved?

Many thanks :)


Post by Animal »

It works here. The render event does fire whenever an event is rendered.

tooltips.mov
(4.18 MiB) Downloaded 20 times

Post by burnit »

@Animal Yes i can confirm. But can you change zoom? is it still visible?


Post by alex.l »

Hi, it works fine after zooming, please see video attached

Screen Recording 2023-06-01 at 17.57.31.mov
(9.01 MiB) Downloaded 22 times

All the best,
Alex


Post by burnit »

Looks like a bug.
Your code works fine until version 5.2.10!
Starting with version 5.3.0 and later it is not working anymore.
But from version renderEvent is fired only sporadically.

I also found out, that a change of an custom field in the EventModel triggers eventRender only one time.
If i change the field again, it does not trigger eventRender.

Please find attached the test case.
Please check console there you can see value changes but renderEvent is not triggered again after the first click.

Can you please verify this once?

Attachments
drag-from-grid.zip
(2.16 MiB) Downloaded 20 times

Post by alex.l »

Hi burnit,

There are few moment I can say regarding to this point.
Event rendering is quite complex algorithm with main goal - optimization and performance. Event will be re-rendered only when it's required, as example If its DOM object needs to be updated. So, if you will use your test field value somewhere in event DOM, it definitely will be re-rendered after each change. Or if you will use value of test field somewhere in event renderer https://bryntum.com/products/scheduler/docs/api/Scheduler/view/mixin/SchedulerEventRendering#config-eventRenderer

Actually test is not a field on EventModel. You need to declare it in data model to have all functionality working as expected. Please see https://bryntum.com/products/scheduler/docs/api/Scheduler/model/EventModel#subclassing-the-event-model-class

class MyEvent extends EventModel {

static get fields() {
    return [
       { name: 'test', type : 'string' },

    ];
},
...
});

All the best,
Alex


Post by burnit »

HI alex,

i added it to the eventModel but still the same issues:

Issue 1: Tolltip won't be displayed on version 5.3.0 an later, 5.2.10 is working. Please test it.

Issue 2: Content is not updating in DOM. Please watch the attached video and demo code.

Greetings,
André

Attachments
Bryntum Scheduler - Drag from grid demo (React) - Google Chrome 2023-06-06 16-52-49.mp4
(25.78 MiB) Downloaded 20 times
drag-from-grid.zip
(2.28 MiB) Downloaded 17 times

Post Reply