How to implement zoom out or zoom it up to two levels?

Gantt React Gantt
#1

const n = 34;

const zoomConfig = {
levels: [
{
name: “DefaultLevel”,
min_column_width: n,
scales: [
{ unit: ‘day’, step: 1, date: ‘%j’, css: daysStyle },
{ unit: “month”, step: 1, format: “%M %Y”, css: daysStyle },
]
},
{
name: “ZoomOutLevel1”,
min_column_width: n + 8,
scales: [
{ unit: ‘day’, step: 1, date: ‘%j’, css: daysStyle },
{ unit: “month”, step: 1, format: “%M %Y”, css: daysStyle },
]
},
{
name: “ZoomOutLevel2”,
min_column_width: n + 16,
scales: [
{ unit: ‘day’, step: 1, date: ‘%j’, css: daysStyle },
{ unit: “month”, step: 1, format: “%M %Y”, css: daysStyle },
]
},
{
name: “ZoomInLevel1”,
min_column_width: n - 8,
scales: [
{ unit: ‘day’, step: 1, date: ‘%j’, css: daysStyle },
{ unit: “month”, step: 1, format: “%M %Y”, css: daysStyle },
]
},
{
name: “ZoomInLevel2”,
min_column_width: n - 16,
scales: [
{ unit: ‘day’, step: 1, date: ‘%j’, css: daysStyle },
{ unit: “month”, step: 1, format: “%M %Y”, css: daysStyle },
]
},
],
element: function () {
return gantt.$root.querySelector(“.gantt_task”);
},
};

    showZoomInAlert: () => {
        gantt.ext.zoom.init(zoomConfig);
        if (currentZoomLevel === "DefaultLevel") {
            currentZoomLevel = "ZoomInLevel1";
        } else if (currentZoomLevel === "ZoomInLevel1") {
            currentZoomLevel = "ZoomInLevel2";
        } else {

        }
        gantt.ext.zoom.setLevel(currentZoomLevel);
    },
    showZoomOutAlert: () => {
        gantt.ext.zoom.init(zoomConfig);
        if (currentZoomLevel === "DefaultLevel") {
            currentZoomLevel = "ZoomOutLevel1";
        } else if (currentZoomLevel === "ZoomOutLevel1") {
            currentZoomLevel = "ZoomOutLevel2";
        } else {

        }
        gantt.ext.zoom.setLevel(currentZoomLevel);
    },

I want to implement a functionality where initially there is a default minimum column width. When someone clicks on the zoom out icon, it should increase the minimum column width by 8, and clicking again should further increase it by 8. When clicking on the zoom in icon, it should decrease the current column width by 8, and clicking again should decrease it by 8 again. Clicking again after reaching the minimum width should disable the action. To return to the normal view, clicking on zoom out should increase the width by 8, and vice versa.

plz help me @ramil @Anton_Marchenko @ArtyomBorisevich

#2

Hello,
I suppose you want to have the same functionality as with the mousewheel zoom when you can change the scale cell width several times before changing the zoom level.
To do that, you just need to change the gantt.config.min_column_width parameter. And if it is lower the minimal width or higher the maximal width, you change the Zoom level.

Here is an example of how it can be implemented: