yellow team mailing list archive

[Francesco Banconi <francesco.banconi@xxxxxxxxxxxxx>]

Francesco Banconi has proposed merging lp:~frankban/juju-gui/preserve-zoom into lp:juju-gui.

Requested reviews:
  Juju GUI Hackers (juju-gui)

For more details, see:
https://code.launchpad.net/~frankban/juju-gui/preserve-zoom/+merge/130087

Preserve zoom settings in the environment view.

The zoom scale and translate are preserved after a scene redraw
(e.g. when adding/removing relations, destroying services,
navigating to the service view and back to the front page).

https://codereview.appspot.com/6720048/

-- 
https://code.launchpad.net/~frankban/juju-gui/preserve-zoom/+merge/130087
Your team Juju GUI Hackers is requested to review the proposed merge of lp:~frankban/juju-gui/preserve-zoom into lp:juju-gui.

=== modified file 'app/views/environment.js'
--- app/views/environment.js	2012-10-15 19:22:40 +0000
+++ app/views/environment.js	2012-10-17 11:01:20 +0000
@@ -237,6 +237,13 @@
         .y(this.yscale)
         .scaleExtent([0.25, 2.0])
         .on('zoom', function() {
+                var sourceEvent = d3.event.sourceEvent;
+                // Avoid spurious zooming if the event is a double click inside
+                // a service box.
+                if (sourceEvent.type === 'dblclick' &&
+                    Y.one(sourceEvent.target).ancestor('.service')) {
+                  return;
+                }
                 // Keep the slider up to date with the scale on other sorts
                 // of zoom interactions
                 var s = self.slider;
@@ -386,7 +393,7 @@
         },
 
         /*
-         * Sync view models with curent db.models.
+         * Sync view models with current db.models.
          */
         updateData: function() {
           //model data
@@ -872,14 +879,17 @@
           });
         },
         renderSlider: function() {
-          var self = this;
+          var self = this,
+              value = 100,
+              currentScale = this.get('scale');
           // Build a slider to control zoom level
-          // TODO once we have a stored value in view models, use that
-          // for the value property, but for now, zoom to 100%
+          if (currentScale) {
+            value = currentScale * 100;
+          }
           var slider = new Y.Slider({
             min: 25,
             max: 200,
-            value: 100
+            value: value
           });
           slider.render('#slider-parent');
           slider.after('valueChange', function(evt) {
@@ -949,6 +959,22 @@
               .setAttribute('x', -width / 2);
           });
 
+          // Preserve zoom when the scene is updated.
+          var changed = false,
+              currentScale = this.get('scale'),
+              currentTranslate = this.get('translate');
+          if (currentTranslate && currentTranslate !== this.zoom.translate()) {
+            this.zoom.translate(currentTranslate);
+            changed = true;
+          }
+          if (currentScale && currentScale !== this.zoom.scale()) {
+            this.zoom.scale(currentScale);
+            changed = true;
+          }
+          if (changed) {
+            this._fire_zoom(0);
+          }
+
           // Render the slider after the view is attached.
           // Although there is a .syncUI() method on sliders, it does not
           // seem to play well with the app framework: the slider will render
@@ -1134,6 +1160,9 @@
             evt.scale = this.get('scale');
           }
           this.set('scale', evt.scale);
+          // Store the current value of translate by copying the event array
+          // in order to avoid reference sharing.
+          this.set('translate', evt.translate.slice(0));
           vis.attr('transform', 'translate(' + evt.translate + ')' +
               ' scale(' + evt.scale + ')');
           this.updateServiceMenuLocation();