Our state of the art Gantt chart


Post by beotech »

When we use CTRL + wheel to zoom in the gantt chart area, it is difficult to keep track of the tasks we want to follow.

We can see 2 reasons for that :

  1. the timespan stays centered on the same date
  2. the zoom speed is too high

Is there a way to center the zoom on the position of the mouse ?
Is there a way to decrease the zoom speed ?


Post by pmiklashevich »

It's not supported out of the box, but you can easily implement it yourself. Please follow the steps:

  • disable zoomOnMouseWheel
  • subscribe to the "wheel" on the timeaxis element
  • implement zooming to center date using zoomToLevel function which supports extra params including center date. You check sources to see how TimelineZoomable.onWheel works.
  • increase preventScrollZoom timeout to get more control over the scroll speed

You can check the following code in Scheduler Basic demo:

import EventHelper from '../../lib/Core/helper/EventHelper.js';

....

const scheduler = new Scheduler({
    zoomOnMouseWheel : false,
    
listeners : { paint() { EventHelper.on({ element : this.timeAxisSubGridElement, wheel : 'onMouseWheelHandler', // Throttle zooming with the wheel a bit to have greater control of it throttled : { buffer : 100, // Prevent events from slipping through the throttle, causing scroll alt(event) { if (event.ctrlKey) { event.preventDefault(); } } }, thisObj : this, capture : true, passive : false }); } }, onMouseWheelHandler(event) { const me = this; if (event.ctrlKey) { event.preventDefault(); if (!me.preventScrollZoom) { const currentZoomLevelIndex = this.zoomLevel; const centerDate = me.getDateFromDomEvent(event); let level; if (event.deltaY > 0 && currentZoomLevelIndex > this.minZoomLevel) { level = currentZoomLevelIndex - 1; } else if (event.deltaY < 0 && currentZoomLevelIndex < this.maxZoomLevel) { level = currentZoomLevelIndex + 1; } console.log(level); if (level != null) { me.zoomToLevel(level, { centerDate }); me.preventScrollZoom = true; me.setTimeout(() => me.preventScrollZoom = false, 500); } } } },

Here is a feature request to improve zoom on mouse wheel: https://github.com/bryntum/support/issues/2253

Thank you for your feedback!

Pavlo Miklashevych
Sr. Frontend Developer


Post by oleh »

Hello all!

Is it possible to do like this: when I hover some event and then start zooming in/out, the event will stay under the mouse cursor?

Thanks in advance


Post by mats »

I have updated the ticket above with your request, it sounds reasonable and we'll discuss internally. Thanks for the feedback!


Post Reply