Adjust the zoom scale in Cytoscape.js trigered by the mouse wheel

I am using Cytoscape.js, to draw a Graph. The problem is I want to adjust the zooming scale that the zoom event receives which the mouse wheel triggers.

Now when I scroll forward or backward the zoom increases or decreases more than expected... resulting in a bad user experience...

I couldn't find in the docs how to achieve or set this scale values... I know that the wheel sensitivity is configurable but is not recommended to set.

Is there any way to establish how to scale in each wheel scroll?

Solution

The property you're looking for is wheelSensitivity. Adjust his value to change the zooming scale. Be careful with it because it can sometimes affect the render.

I put it at 0.4 in the example below:

    <!DOCTYPE>
    
    <html>
      <head>
    
        <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">
    
        <script src="https://unpkg.com/cytoscape/dist/cytoscape.min.js"></script>
    
        <style>
          body {
            font-family: helvetica;
            font-size: 14px;
          }
    
          #cy {
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
            z-index: 999;
          }
    
          h1 {
            opacity: 0.5;
            font-size: 1em;
          }
        </style>
    
        <script>
          window.addEventListener('DOMContentLoaded', function(){
    
            var cy = window.cy = cytoscape({
              container: document.getElementById('cy'),
    
              boxSelectionEnabled: false,
              autounselectify: true,
              wheelSensitivity: 0.4,
    
              style: [
                {
                  selector: 'node',
                  style: {
                    'background-color': '#11479e'
                  }
                },
    
              ],
    
              elements: {
                nodes: [
                  { data: { id: 'n0' } },
                  { data: { id: 'n1' } },
                  { data: { id: 'n2' } },
      
                ],
                edges: [
                  { data: { source: 'n0', target: 'n1' } },
                  { data: { source: 'n1', target: 'n2' } },
                  { data: { source: 'n0', target: 'n2' } }
    
                ]
              }
            });
    
          });
        </script>
      </head>
    
      <body>
        <div id="cy"></div>
      </body>
    
    </html>