API Docs for:
Show:

File: app/views/topology/viewport.js

'use strict';

/**
 * Provide the ViewportModule class.
 *
 * @module topology
 * @submodule topology.viewport
 */

YUI.add('juju-topology-viewport', function(Y) {
  var views = Y.namespace('juju.views'),
      utils = Y.namespace('juju.views.utils'),
      models = Y.namespace('juju.models'),
      d3ns = Y.namespace('d3');

  /**
   * Manage panning and zooming events on the canvas.
   *
   * ## Emitted events:
   *
   * - *beforePageSizeRecalculation:*
   * - *afterPageSizeRecalculation:* events fired before and after the
   *   environment graph is resized to allow other sized itemsto
   *   calculate what they need.
   *
   * @class ViewportModule
   */
  views.ViewportModule = Y.Base.create('ViewportModule', d3ns.Module, [], {

    events: {
      yui: {
        windowresize: 'resized',
        rendered: 'resized'
      }
    },

    /**
     * Retrieve the DOM element that contains the UI.  This exists primarily to
     * make it easy for tests to substitute their own container.
     *
     * @return {Object} A DOM node.
     * @method getContainer
     */
    getContainer: function() {
      return this.get('container');
    },

    /**
     * Propagate new dimensions to all the places that need them.
     *
     * @method setAllTheDimensions
     * @static
     * @param {Object} dimensions The new height and width.
     * @param {Object} canvas The canvas to which impute new dimensions.
     * @param {Object} svg The SVG container to which impute new dimensions.
     * @param {Object} topo The topology view to which impute new dimensions.
     * @param {Object} zoomPlane The zoomPlane to which impute new dimensions.
     * @return {undefined} Nothing.  This function generates only side effects.
     */
    setAllTheDimensions: function(dimensions, canvas, svg, topo, zoomPlane) {
      // Get the canvas out of the way so we can calculate the size
      // correctly (the canvas contains the svg).  We want it to be the
      // smallest size we accept--no smaller or bigger--or else the
      // presence or absence of scrollbars may affect our calculations
      // incorrectly.  The real canvas size will be set in a moment.
      canvas.setStyles({height: '600px', width: '800px'});
      svg.setAttribute('width', dimensions.width);
      svg.setAttribute('height', dimensions.height);
      topo.vis.attr('width', dimensions.width);
      topo.vis.attr('height', dimensions.height);
      zoomPlane.setAttribute('width', dimensions.width);
      zoomPlane.setAttribute('height', dimensions.height);
      canvas.setStyles({
        width: dimensions.width + 'px',
        height: dimensions.height + 'px'});
      // Reset the scale parameters
      topo.set('size', [dimensions.width, dimensions.height]);
    },

    /**
     * Set the visualization size based on the viewport.
     *
     * The beforePageSizeRecalculation and afterPageSizeRecalculation events
     * allow other page components that may unintentionally affect the page
     * size, such as the charm panel, to get out of the way before we compute
     * sizes.
     *
     * @return {undefined} Nothing, this function generates only side effects.
     * @method resized
     */
    resized: function() {
      var container = this.getContainer();
      var svg = container.one('svg');
      var canvas = container.one('.topology-canvas');
      // Early out for tests that do not provide a full rendering environment.
      if (!Y.Lang.isValue(canvas) || !Y.Lang.isValue(svg)) {
        return;
      }
      var topo = this.get('component');
      var zoomPlane = container.one('.zoom-plane');
      topo.fire('beforePageSizeRecalculation');
      // This sets the minimum viewport size - y was reduced to 200 to render
      // properly on 7" tablets in horizontal view.
      var dimensions = utils.getEffectiveViewportSize(true, 800, 200);
      this.setAllTheDimensions(dimensions, canvas, svg, topo, zoomPlane);
      topo.fire('afterPageSizeRecalculation');
    }

  }, {
    ATTRS: {}
  });
}, '0.1.0', {
  requires: [
    'd3',
    'd3-components',
    'node',
    'event',
    'juju-models',
    'juju-env'
  ]
});