Mouse wheel doesn't seem to work

[msprotz]

Thanks for the fast turnaround time on my latest bug report! Here's another one.

I'm running https://blockly-demo.appspot.com/static/demos/code/index.html on both Firefox and Chrome. The mouse wheel doesn't seem to work in any of these settings.

While I do understand that the expected interaction is to drag&drop the background, which is I agree fairly natural, it's also a little bit unsettling that the mouse wheel should be non-functional.

From what I gathered, the scrollbars are custom-rendered SVG elements, so it may be a bit of work to make this work out, but perhaps it's worth filing and keeping on the radar.

Thanks,

Jonathan

[NeilFraser]

The mouse wheel should work on long flyouts from the toolbar (e.g. Math block in a small window). However, the lack of mouse wheel on the main workspace is intentional. The wheel is being reserved for zooming in and out (like on Google Maps). If we implement the wheel for scrolling in the mean time, users will murder us when the functionality changes. Thus we are not supporting the mouse wheel for now.

[msprotz]

Alright, makes sense. Thanks!

[okachobi]

I'm not sure it does make sense. In this case scrolling is the more prominent, highly used, and important control when compared to zooming. Zooming with +/- buttons/slider controls would be much preferred by all given that most people understand that the web browser should scroll with the mouse wheel. I think it would be a broken design element to not use the scroll wheel to scroll the blockly canvas. I've had several complaints about the app I've created with blockly not behaving this way. At a minimum, it would be nice to have a very easily modified method to re-enable the wheel-scroll behavior of the scrollbars and I think you'd find that most people would choose to do that for obvious reasons- most people expect it.

Please reconsider this decision, or give developers the option to choose without having to make significant modifications. Thanks...

[NeilFraser]

Zooming has now been implemented and the mouse wheel is currently fully functional. It behaves exactly as does Google Maps, Google Earth, Bing Maps, Yahoo Maps, AutoCAD, and similar user interfaces. To enable zooming and make use of the wheel, see https://developers.google.com/blockly/installation/zoom

[nywooz]

I do agree with "okachobi" . I do like the zoom in/ out,But, it will be also be good to allow developers to use the mouse wheel scroll as a pluging option to set.

[pelikhan]

A fun anecdote that speaks for the wheel used as a scroll: microsoft/pxt-microbit#208

[mehdi-yeganeh]

Just for someone doesn't like mouse wheel functionality in blockly

1. Set wheel to false (https://developers.google.com/blockly/guides/configure/web/zoom)
2. Run this code after inject your blockly:

function setBlocklyScrollBars(ws){
  Blockly.bindEvent_(ws.svgGroup_, 'wheel', ws, ev => {
      let e = ev;
      const delta = e.deltaY > 0 ? -1 : 1;
      const position = Blockly.utils.mouseToSvg(e, ws.getParentSvg());
      if (e.ctrlKey)
          ws.zoom(position.x, position.y, delta);
      else if (ws.scrollbar) {
          let y = parseFloat(ws.scrollbar.vScroll.svgHandle_.getAttribute("y") || "0");
          y /= ws.scrollbar.vScroll.ratio_;
          ws.scrollbar.vScroll.set(y + e.deltaY);

          let x = parseFloat(ws.scrollbar.hScroll.svgHandle_.getAttribute("x") || "0");
          x /= ws.scrollbar.hScroll.ratio_;
          ws.scrollbar.hScroll.set(x + e.deltaX);

          ws.scrollbar.resize();
      }
      e.preventDefault();
  });
}
setBlocklyScrollBars(Blockly.mainWorkspace);

Special thanks from @pelikhan and microsoft/pxt-microbit#208