Our pure JavaScript Scheduler component


Post by tomerPlanit »

Hi,
I found other problem in the
scheduler.eventLayout = 'stack'
After I calculate the new row height got problem in the positions of the events.

My code:
 // Change the row height by largest job in this row.
    async changeRowHeight(scheduler: Scheduler, ganttId: number) {
        setTimeout(() => {
            const minHeight = this.findMinHeight((scheduler.eventStore.getRange() as GanttJob[]), ganttId);

            // Go over all resources.
            scheduler.resourceStore.getRange().forEach((resource: GanttResource) => {

                // For each resource find his max height by his jobs.
                let maxHeight = this.findMaxJobHeight(scheduler.eventStore.getEventsForResource(resource.get('id')), ganttId);

                // Change resource's height.
                // Has jobs.
                if (maxHeight) {
                    if (scheduler.eventLayout === 'stack') {
                        const maxCollisionHeight = this.findMaxCollisionHeight(scheduler.eventStore.getEventsForResource(resource.get('id')), ganttId);
                        maxHeight = maxHeight > maxCollisionHeight ? maxHeight : maxCollisionHeight;
                        maxHeight += (scheduler.resourceMargin * 2);
                        maxHeight += (scheduler.barMargin );
                        resource.beginBatch();
                        resource.set('rowHeight', maxHeight);
                        resource.endBatch();
                    } else {
                        maxHeight += (scheduler.resourceMargin * 2);
                        resource.beginBatch();
                        resource.set('rowHeight', maxHeight);
                        resource.endBatch();

                    }

                    // Give to resource minimum hieght if no has jobs
                } else {
                    resource.beginBatch();
                    resource.set('rowHeight', minHeight);
                    resource.endBatch();
                }
            });
        }, 2);
    }
    
    // For resource find his max height by his jobs.
    findMaxCollisionHeight(jobs: GanttJob[], ganttId: number): number {
        let maxHeigt = 0;
        let i = 0;
        jobs.sort((job1: GanttJob, job2: GanttJob) => job1.get('startDate').getTime() - job2.get('startDate').getTime());

        // Go over the jobs and return the max height.
        jobs.forEach((job: GanttJob) => {
            if (i < jobs.length - 2) {
                const height: number = this.findMaxChainHeight(jobs.slice(i, jobs.length), ganttId);
                if (maxHeigt < height) {
                    maxHeigt = height;
                }
                i++;
            }
        });
        return maxHeigt;
    }
    
    // For resource find his max collision chain height by his jobs.
    findMaxChainHeight(jobs: GanttJob[], ganttId: number): number {
        console.log(jobs);
        const element = (document.querySelector(`.scheduler${ganttId} .id${jobs[0].get('id')}`) as HTMLElement);
        let maxHeigt;
        if (element) {
            maxHeigt = element.getBoundingClientRect().height;
        }
        if (jobs.length > 1) {
            if (jobs[0].get('startDate').getTime() < jobs[1].get('startDate').getTime() &&
                jobs[0].get('endDate').getTime() > jobs[1].get('startDate').getTime()) {
                return maxHeigt += this.findMaxChainHeight(jobs.slice(1, jobs.length), ganttId);
            } else {
                return maxHeigt;
            }
        } else {
            return maxHeigt;
        }
    }
    
    
        // For resource find his max height by his jobs.
    findMaxJobHeight(jobs: GanttJob[], ganttId: number): number {
        let maxHeigt: number;

        // Go over the jobs and return the max height.
        jobs.forEach((job: GanttJob) => {
            const element = (document.querySelector(`.scheduler${ganttId} .id${job.get('id')}`) as HTMLElement);
            if (element) {
                const height: number = (document.querySelector(`.scheduler${ganttId} .id${job.get('id')}`) as HTMLElement).getBoundingClientRect().height;
                if (maxHeigt === undefined) {
                    maxHeigt = height;
                }
                if (maxHeigt < height) {
                    maxHeigt = height;
                }
            }
        });
        return maxHeigt;
    }
    
The row calculation looks right but the jobs positions not.

In the scheduler.eventLayout = 'none' all fine.

What i am doing wrong?
Attachments
3.png
3.png (55.31 KiB) Viewed 866 times

Post by tomerPlanit »

When i delete the css that you gave me:
::ng-deep .b-sch-event-wrap {
  height: auto !important;
}
It works but the events size doesn't change by his content.

Post by saki »

Ideally, we wouldn't let event height to be determined by css. When we set height: auto !important we override the hight scheduler sets on the event wrapper element.

Therefore, you can try to calculate the correct height of the event yourself, set it on the event wrapper element and remove the above css, as you already did.

This goes pretty deep into the Scheduler internals so you may consider "Feature Sponsorship" here: https://www.bryntum.com/services/

The feature request is here: https://github.com/bryntum/support/issues/489

Post Reply