Preserve zoom settings in the environment view.

app/views/environment.js

 'use strict';
 
 YUI.add('juju-view-environment', function(Y) {
 
   var views = Y.namespace('juju.views'),
       Templates = views.Templates,
       models = Y.namespace('juju.models');
 
   /*
    * Utility function to get a number from a computed style.
@@ skipping 219 matching lines @@
           this.yscale = d3.scale.linear()
               .domain([-height / 2, height / 2])
               .range([height, 0]);
 
           // Create a pan/zoom behavior manager.
           var zoom = d3.behavior.zoom()
         .x(this.xscale)
         .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' &&

[benjamin.saller, 2012/10/17 14:35:11]

.on("dblclick.zoom", null) during the bind will remove the dblclick behavior.

[frankban, 2012/10/17 14:56:54]

Done.

+                    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;
                 s.set('value', Math.floor(d3.event.scale * 100));
                 self.rescale(vis, d3.event);
               });
           self.zoom = zoom;
 
           // Set up the visualization with a pack layout.
           var vis = d3.select(container.getDOMNode())
@@ skipping 129 matching lines @@
           // Just show the service on double-click.
           var service = self.serviceForBox(d);
           (self.service_click_actions.show_service)(service, self);
         },
 
         relationClick: function(d, self) {
           self.removeRelationConfirm(d, this, self);
         },
 
         /*
-         * Sync view models with curent db.models.
+         * Sync view models with current db.models.
          */
         updateData: function() {
           //model data
           var vis = this.vis,
               app = this.get('app'),
               db = this.get('db'),
               relations = db.relations.toArray(),
               services = db.services.map(views.toBoundingBox);
 
           this.services = services;
@@ skipping 465 matching lines @@
         /*
          * Utility function to get subordinate relations for a service.
          */
         subordinateRelationsForService: function(service) {
           return this.rel_pairs.filter(function(p) {
             return p.modelIds().indexOf(service.modelId()) !== -1 &&
                 p.scope === 'container';
           });
         },
         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) {
             // Don't fire a zoom if there's a zoom event already in progress;
             // that will run rescale for us.
             if (d3.event && d3.event.scale && d3.event.translate) {
               return;
             }
             self._fire_zoom((evt.newVal - evt.prevVal) / 100);
           });
@@ skipping 49 matching lines @@
           // Set the sizes from the viewport.
           this.setSizesFromViewport();
 
           // Ensure relation labels are sized properly.
           container.all('.rel-label').each(function(label) {
             var width = label.one('text').getClientRect().width + 10;
             label.one('rect').setAttribute('width', width)
               .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
           // the first time, but on navigation away and back, will not
           // re-render within the view.
           this.renderSlider();
 
           // Chainable method.
           return this;
         },
@@ skipping 164 matching lines @@
          */
         rescale: function(vis, evt) {
           // Make sure we don't scale outside of our bounds.
           // This check is needed because we're messing with d3's zoom
           // behavior outside of mouse events (e.g.: with the slider),
           // and can't trust that zoomExtent will play well.
           var new_scale = Math.floor(evt.scale * 100);
           if (new_scale < 25 || new_scale > 200) {
             evt.scale = this.get('scale');
           }
+          // Store the current value of scale so that it can be restored later.
           this.set('scale', evt.scale);
+          // Store the current value of translate as well, 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();
         },
 
         /*
          * Event handler to show the graph-list picker
          */
         showGraphListPicker: function(evt) {
           var container = this.get('container'),
@@ skipping 317 matching lines @@
     'juju-models',
     'd3',
     'base-build',
     'handlebars-base',
     'node',
     'svg-layouts',
     'event-resize',
     'slider',
     'view']
 });