invisible resource zones are displayed as 1px boxes on custom timeAxis

[jonathan]

Hello Bryntum team,

Our QA recently found sometimes might have unexpected 1px boxes at custom timeAxis, after troubleshooting, we found it relates to resource zones rendering on custom timeAxis, i.e., the invisible resource zones are not skipped to render on custom timeAxis, and will render as 1px box if the eventBorderWidth configuration is 0.

Steps to reproduce the issue.

1. Take https://www.bryntum.com/examples/scheduler-for-extjs/kitchensink/#examples/timeaxis as an example.

2. Open SchedulerCustomTimeAxis2.js. And add scripts below at the top.

   Ext.define('Sch.examples.resourcezones.store.Zones', {
       extend : 'Sch.data.EventStore',
       alias  : 'store.resourcezoneszonesstore',
       
   
       autoLoad : true,
       
   
       proxy : {
           type : 'memory',
           data : [
               {
                   ResourceId : 'r1',
                   Name       : 'Out of view',
                   StartDate  : '2017-02-15 05:00',
                   EndDate    : '2017-02-15 06:00'
               },
               {
                   ResourceId : 'r1',
                   Name       : 'Out of view',
                   StartDate  : '2017-02-16 05:00',
                   EndDate    : '2017-02-16 06:00'
               },
               {
                   ResourceId : 'r1',
                   Name       : 'Out of view',
                   StartDate  : '2017-02-16 22:00',
                   EndDate    : '2017-02-16 23:00'
               }
           ]
       }
   });
   

3. Add settings below to Sch.examples.timeaxis.view.SchedulerCustomTimeAxis2.

       ...
       eventBorderWidth: 0,
       resourceZones : {
           type : 'resourcezoneszonesstore'
       },
       ...
   

4. Open app.css, and add the following style.

   .sch-resourcezone {
       background-color: red !important;
   }
   

5. Refresh the page, and we can see there're unexpected red lines.

   

   issue1.jpg (123 KiB) Viewed 581 times

   It'll be more obvious after the browser zoom-in.

   

   issue2.jpg (138.19 KiB) Viewed 581 times

By checking the source codes, at Sch.view.Horizontal line #86,

data.width = M.max(1, M.abs(endX - startX)) - view.eventBorderWidth;

seems there's a bug from assuming eventBorderWidth is always 1.
And like eventStore, I think we should skip the resource zones if the zones are not visible on the custom timeAxis.

Thanks,
Jonathan

[mats]

Reproduced, we'll get that fixed! https://app.assembla.com/spaces/bryntum/tickets/9661-invisible-resource-zones-are-displayed-as-1px-wide-on-custom-timeaxis/details#