Scheduler - active area images flicker during scheduler resizing

Asked by Anonymous
2 years ago.

I'm using active areas to show icons (images) in the row headers and in a top frozen row. Everything works very well and as expected. However, when I change the scheduler's width or height the images flicker as you can see in the attached video. Is it possible to avoid this flickering?

Here is my code:

onBeforeRowHeaderRender: (args) => {
      const personResource = args.row.data as PersonResource;

      if (personResource.frozen !== undefined) {
        return;
      }

      // Status icons
      args.row.columns[1].areas = [];

      const leftOffset = 20
      let left = 60;
      // Same position for top and bottom
      // see https://forums.daypilot.org/question/5577/how-to-center-vertically-active-areas
      const topBottom = 5;

      if (personResource.tags.ignoreWorkProfileChangesToolTipText) {
        args.row.columns[1].areas.push(
          {
            left: left,
            top: topBottom,
            bottom: topBottom,
            style: "display: flex; align-items: center;",
            width: 16,
            html: '<img src="assets/icons/favorites.png" height="16" width="16">',
            toolTip: personResource.tags.ignoreWorkProfileChangesToolTipText
          });

        left = left - leftOffset;
      }

      if (personResource.tags.isIndirectlySubordinatedToolTipText) {
        args.row.columns[1].areas.push(
          {
            left: left,
            top: topBottom,
            bottom: topBottom,
            style: "display: flex; align-items: center;",
            width: 16,
            html: '<img src="assets/icons/subordinate.png" height="16" width="16">',
            toolTip: personResource.tags.isIndirectlySubordinatedToolTipText
          });

        left = left - leftOffset;
      }

      if (personResource.tags.personWillEnterToolTipText) {
        args.row.columns[1].areas.push(
          {
            left: left,
            top: topBottom,
            bottom: topBottom,
            style: "display: flex; align-items: center;",
            width: 16,
            html: '<img src="assets/icons/Enter.png" height="16" width="16">',
            toolTip: personResource.tags.personWillEnterToolTipText
          });

        left = left - leftOffset;
      }

      if (personResource.tags.personLeftCompanyToolTipText) {
        args.row.columns[1].areas.push(
          {
            left: left,
            top: topBottom,
            bottom: topBottom,
            style: "display: flex; align-items: center;",
            width: 16,
            html: '<img src="assets/icons/leave.png" height="16" width="16">',
            toolTip: personResource.tags.personLeftCompanyToolTipText
          });

        left = left - leftOffset;
      }

      if (personResource.tags.calculationStatusToolTipText) {
        args.row.columns[1].areas.push(
          {
            left: left,
            top: topBottom,
            bottom: topBottom,
            style: "display: flex; align-items: center;",
            width: 16,
            html: '<img src="assets/icons/Error.png" height="16" width="16">',
            toolTip: personResource.tags.calculationStatusToolTipText
          });

        left = left - leftOffset;
      }
    }

getPlanningCommentsResource() {
    let resource = this.personResources.find(r => r.frozen !== undefined);

    if (!resource) {
      resource = {
        id: DayPilot.guid(),
        name: '',
        frozen: 'top'
      };

      this.personResources.push(resource);
    }

    return resource;
  }

private createPlanningCommentEvent(item: PlanningComment) {
    return <AttendancePlanningEvent>
      {
        id: DayPilot.guid(),
        text: '',
        resource: this.getPlanningCommentsResource().id,
        start: new Date(item.date).date().addHours(12),
        end: new Date(item.date).date().addDays(1),
        backColor: 'transparent',
        borderColor: 'transparent',
        resizeDisabled: true,
        moveDisabled: true,
        toolTip: `<b>${this.dialogTextService.getTranslation('TitPlanComment')}</b><br>${item.comment}`,
        areas: [
          {
            css: "scheduler_centered-time-header-icon",
            html: '<img src="assets/icons/comment_small.png" height="16" width="16">',
          }
        ],
        tags: {
          type: 'PlanningComment',
          data: item
        }
      };
  }

29-11-2022-08-46-14.mp4

Answer posted by Dan Letecky [DayPilot]
2 years ago.

I'm not sure if you will be able to get rid of the flicker. During zoom, the Scheduler is re-rendered with the updated timeline and dimensions (including the row headers).

There are a couple of things you can try:
1. The active area images need to be loaded from the server. Check the server caching settings, or try using inline images (data URI instead of a remote address).
2. Turn off the row header width auto-fit feature (https://doc.daypilot.org/scheduler/row-header-width-auto-fit/). It takes some time to measure the row header width and that can cause a delay.

Comment posted by Anonymous
2 years ago.

Thank you for your answer. Indeed, using data URI solves the issue. Maybe you could consider adding a new property for this, as an alternative to the properties image, icon and html.

Comment posted by Dan Letecky [DayPilot]
2 years ago.

Great, thanks for the update.

You can specify it directly using the "image" property which inserts an <img> element with a "src" attribute set to this value.

args.row.columns[1].areas.push({
  image: "data:image/png;base64,...",
  // ...
});

This question is more than 1 months old and has been closed. Please create a new question if you have anything to add.

Scheduler - active area images flicker during scheduler resizing

Products

Learn

Get Support

DayPilot Pro