Reviewers: mp+130087_code.launchpad.net, Message: Please take a look.
Description: 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://code.launchpad.net/~frankban/juju-gui/preserve-zoom/+merge/130087 (do not edit description out of merge proposal) Please review this at https://codereview.appspot.com/6720048/ Affected files: A [revision details] M app/views/environment.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 protected] +New revision: [email protected] Index: app/views/environment.js === modified file 'app/views/environment.js' --- app/views/environment.js 2012-10-15 19:22:40 +0000 +++ app/views/environment.js 2012-10-17 10:43:51 +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(); -- 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. -- Mailing list: https://launchpad.net/~yellow Post to : [email protected] Unsubscribe : https://launchpad.net/~yellow More help : https://help.launchpad.net/ListHelp
