github.com/justinjmoses/evergreen@v0.0.0-20170530173719-1d50e381ff0d/public/static/js/directives/directives.svg.js (about)

     1  var directives = directives || {};
     2  
     3  directives.svg = angular.module('directives.svg', []);
     4  
     5  // mciCanvas defines an abstraction layer around the actual size of the SVG
     6  // element. Since style overrides the 'height' and 'width' attributes, we can
     7  // use the 'height' and 'width' attributes to specify the size of the logical
     8  // canvas, and use the X() and Y() to map coordinates on the constant-size
     9  // logical canvas to coordinates on the variably-sized SVG.
    10  directives.svg.directive('mciCanvas', function() {
    11    return function(scope, element, attrs) {
    12      var projected = {
    13        height: attrs.height,
    14        width: attrs.width
    15      };
    16  
    17      var actual = {
    18        height: $(element).height(),
    19        width: $(element).width()
    20      };
    21  
    22      $(window).resize(function() {
    23        actual = {
    24          height: $(element).height(),
    25          width: $(element).width()
    26        };
    27        scope.$apply();
    28      });
    29  
    30      scope.X = function(x) {
    31        return x / projected.width * actual.width;
    32      };
    33  
    34      scope.Y = function(y) {
    35        return y / projected.height * actual.height;
    36      }
    37    };
    38  });
    39  
    40  /* X-coordinate based attributes. Wraps these attributes in a call to the
    41   * corresponding X() function (see mciCanvas directive) in the element's scope.
    42   */
    43  _.each(['Width', 'X', 'X1', 'X2', 'R', 'Cx'], function(attr) {
    44    var directiveAttribute = 'mciAttr' + attr;
    45    var elementAttribute = attr.toLowerCase();
    46    directives.svg.directive(directiveAttribute, function() {
    47      return function(scope, element, attrs) {
    48        scope.$watch('X(' + attrs[directiveAttribute] + ')', function(v) {
    49          $(element).attr(elementAttribute, v);
    50        });
    51      };
    52    });
    53  });
    54  
    55  /* Y-coordinate based attributes. Wraps these attributes in a call to the
    56   * corresponding X() function (see mciCanvas directive) in the element's scope.
    57   */
    58  _.each(['Height', 'Y', 'Y1', 'Y2', 'Cy'], function(attr) {
    59    var directiveAttribute = 'mciAttr' + attr;
    60    var elementAttribute = attr.toLowerCase();
    61    directives.svg.directive(directiveAttribute, function() {
    62      return function(scope, element, attrs) {
    63        scope.$watch('Y(' + attrs[directiveAttribute] + ')', function(v) {
    64          $(element).attr(elementAttribute, v);
    65        });
    66      };
    67    });
    68  });