Code review comment for lp://staging/~bcsaller/juju-gui/scrollwheel

Reviewers: mp+143003_code.launchpad.net,

Message:
Please take a look.

Description:
Restore Mouse Wheel In PanZoom

The default zoom behavior bound to mouse wheel was doing scaled
translation
that didn't play well with the rest of the pan/zoom math. This overrides
the
default behavior and fires a standard YUI zoom synthetic event. We are
then
able to manually apply the delta and manage scale/translate ourselves.

https://code.launchpad.net/~bcsaller/juju-gui/scrollwheel/+merge/143003

(do not edit description out of merge proposal)

Please review this at https://codereview.appspot.com/7099046/

Affected files:
   A [revision details]
   M app/views/login.js
   M app/views/topology/panzoom.js
   M app/views/topology/topology.js

Index: [revision details]
=== added file '[revision details]'
--- [revision details] 2012-01-01 00:00:00 +0000
+++ [revision details] 2012-01-01 00:00:00 +0000
@@ -0,0 +1,2 @@
+Old revision:
<email address hidden>
+New revision: <email address hidden>

Index: app/views/login.js
=== modified file 'app/views/login.js'
--- app/views/login.js 2013-01-09 21:28:04 +0000
+++ app/views/login.js 2013-01-11 23:51:26 +0000
@@ -71,6 +71,7 @@
              env.failedAuthentication ? 'Unknown user or password.' : ''),
          help_text: this.get('help_text')
        }));
+ this.get('container').one('input[type=password]').focus();
        return this;
      }

Index: app/views/topology/panzoom.js
=== modified file 'app/views/topology/panzoom.js'
--- app/views/topology/panzoom.js 2013-01-09 16:59:19 +0000
+++ app/views/topology/panzoom.js 2013-01-11 23:51:26 +0000
@@ -84,8 +84,23 @@
        if (!this.slider) {
          return;
        }
- slider.set('value', this.toSlider(evt.scale));
- this.rescale(d3.event);
+
+ // If this is a scroll wheel event translate
+ // delta and apply to scale.
+ if (evt.sourceEvent) {
+ // If we have a wrapped event facade extract the raw data,
+ // this is needed to properly handle wheel delta events below.
+ evt.stopPropogation();
+ evt.preventDefault();
+ evt = evt.sourceEvent;
+ }
+ if (evt.type === 'mousewheel') {
+ var delta = (evt.wheelDelta > 0) ? 0.1 : -0.1;
+ evt.scale = (topo.get('scale') + delta);
+ evt.translate = topo.get('translate');
+ }
+ slider._set('value', this.toSlider(evt.scale));
+ this.rescale(evt);
      },

      /*

Index: app/views/topology/topology.js
=== modified file 'app/views/topology/topology.js'
--- app/views/topology/topology.js 2013-01-09 17:21:35 +0000
+++ app/views/topology/topology.js 2013-01-11 23:51:26 +0000
@@ -94,9 +94,11 @@
                            .attr('width', width)
                            .attr('height', height)
                            .call(this.zoom)
- .on('mousewheel.zoom', null)
- .on('DOMMouseScroll.zoom', null)
- .on('dblclick.zoom', null);
+ .on('dblclick.zoom', null)
+ .on('DOMMouseScroll', function(evt) {
+ self.fire('zoom', d3.event);})
+ .on('mousewheel.zoom', function(evt) {
+ self.fire('zoom', d3.event);});

        vis = svg.append('svg:g');
        this.vis = vis;