← Back to branch summary

~makyo/juju-gui/topology-panzoom

« back to all changes in this revision

Viewing changes to app/views/topology/mega.js

  • Committer: Benjamin Saller
  • Date: 2012-12-12 14:07:44 UTC
  • Revision ID: bcsaller@gmail.com-20121212140744-q1kq7zzndg7yz5db
wip

Show diffs side-by-side

added added

removed removed

Lines of Context:
app/views/topology/mega.js
82
82
          }}
83
83
        },
84
84
 
85
 
        '#zoom-out-btn': {click: 'zoom_out'},
86
 
        '#zoom-in-btn': {click: 'zoom_in'},
87
 
        '.graph-list-picker .picker-button': {
 
85
       '.graph-list-picker .picker-button': {
88
86
          click: 'showGraphListPicker'
89
87
        },
90
88
        '.graph-list-picker .picker-expanded': {
1171
1169
      this.set('currentServiceClickAction', 'ambiguousAddRelationCheck');
1172
1170
    },
1173
1171
 
1174
 
 
1175
 
    /*
1176
 
         * Zoom in event handler.
1177
 
         */
1178
 
    zoom_out: function(data, context) {
1179
 
      var slider = context.slider,
1180
 
              val = slider.get('value');
1181
 
      slider.set('value', val - 25);
1182
 
    },
1183
 
 
1184
 
    /*
1185
 
         * Zoom out event handler.
1186
 
         */
1187
 
    zoom_in: function(data, context) {
1188
 
      var slider = context.slider,
1189
 
              val = slider.get('value');
1190
 
      slider.set('value', val + 25);
1191
 
    },
1192
 
 
1193
 
    /*
1194
 
         * Wraper around the actual rescale method for zoom buttons.
1195
 
         */
1196
 
    _fire_zoom: function(delta) {
1197
 
      var vis = this.vis,
1198
 
              zoom = this.zoom,
1199
 
              evt = {};
1200
 
 
1201
 
      // Build a temporary event that rescale can use of a similar
1202
 
      // construction to d3.event.
1203
 
      evt.translate = zoom.translate();
1204
 
      evt.scale = zoom.scale() + delta;
1205
 
 
1206
 
      // Update the scale in our zoom behavior manager to maintain state.
1207
 
      zoom.scale(evt.scale);
1208
 
 
1209
 
      // Update the translate so that we scale from the center
1210
 
      // instead of the origin.
1211
 
      var rect = vis.select('rect');
1212
 
      evt.translate[0] -= parseInt(rect.attr('width'), 10) / 2 * delta;
1213
 
      evt.translate[1] -= parseInt(rect.attr('height'), 10) / 2 * delta;
1214
 
      zoom.translate(evt.translate);
1215
 
 
1216
 
      this.rescale(vis, evt);
1217
 
    },
1218
 
 
1219
 
    /*
1220
 
         * Rescale the visualization on a zoom/pan event.
1221
 
         */
1222
 
    rescale: function(vis, evt) {
1223
 
      // Make sure we don't scale outside of our bounds.
1224
 
      // This check is needed because we're messing with d3's zoom
1225
 
      // behavior outside of mouse events (e.g.: with the slider),
1226
 
      // and can't trust that zoomExtent will play well.
1227
 
      var new_scale = Math.floor(evt.scale * 100);
1228
 
      if (new_scale < 25 || new_scale > 200) {
1229
 
        evt.scale = this.get('scale');
1230
 
      }
1231
 
      // Store the current value of scale so that it can be restored later.
1232
 
      this.set('scale', evt.scale);
1233
 
      // Store the current value of translate as well, by copying the event
1234
 
      // array in order to avoid reference sharing.
1235
 
      this.set('translate', evt.translate.slice(0));
1236
 
      vis.attr('transform', 'translate(' + evt.translate + ')' +
1237
 
              ' scale(' + evt.scale + ')');
1238
 
      this.updateServiceMenuLocation();
1239
 
    },
1240
 
 
1241
1172
    /*
1242
1173
         * Event handler to show the graph-list picker
1243
1174
         */