closes #1 treeConfig => service:svg-environment

Author: Gastón I. Silva E

DESIGN.md

@@ -2,6 +2,12 @@
 
 General design of the application.
 
+## Services
+
+   svg-environment
+     Has all the values used to configure the SVG root and
+     the grid design being used to place each node.
+
 ## Models
 
     grid-node
@@ -12,13 +18,10 @@ General design of the application.
 ## Views
 
  * svg
-   Has the `treeConfig` property used to configure the SVG root and
-   the grid design being used to place each node.
    * svg-g
      Every node in the grid uses this view and the content changes by setting
      its `templateName` property.
 
-
 ## Mixins
 
  * tree-node

app/controllers/index.js

@@ -19,6 +19,41 @@ export default Ember.Controller.extend({
       }
       return 0;
     });
-  }.property('model')
+  }.property('model'),
+
+  gridLines: function() {
+    var svgenv = this.get('svgenv'),
+        w = svgenv.viewBoxW,
+        h = svgenv.viewBoxH,
+        gridLines = [];
+
+    for (var x = 0; x < w; x += svgenv.colW) {
+      gridLines.push('M' + x + ' 0 V' + h + ' Z');
+    }
+    for (var y = 0; y < h; y += svgenv.rowH) {
+      gridLines.push('M0 ' + y + ' H' + w + ' Z');
+    }
+
+    return gridLines;
+  }.property(),
+
+  yearLines: function() {
+    return [
+      this._buildYearLine(1980, 2),
+      this._buildYearLine(1990, 5),
+      this._buildYearLine(2000, 9),
+      this._buildYearLine(2010, 13)
+    ];
+  }.property(),
+
+  _buildYearLine: function(year, row) {
+    var svgenv = this.get('svgenv'),
+        x = svgenv.yearLineFontSize * 2, 
+        y = row * svgenv.rowH,
+        xLine = svgenv.yearLineFontSize * 4;
+
+    return {year: year, x: x, y: y,
+            path: 'M'+xLine+' '+y+' H' + svgenv.viewBoxW};
+  }
 
 });

app/initializers/svg-environment-service.js

@@ -0,0 +1,8 @@
+export function initialize(container, application) {
+  application.inject('controller', 'svgenv', 'service:svg-environment');
+}
+
+export default {
+  name: 'svg-environment-service',
+  initialize: initialize
+};

app/services/svg-environment.js

@@ -0,0 +1,32 @@
+import Ember from 'ember';
+
+export default Ember.Object.extend({
+  showGrid: false,
+
+  paddingT: 6,
+  paddingR: 6,
+  paddingB: 12,
+  paddingL: 6,
+
+  colW: 170 + 12,
+  rowH: 64 + 18,
+
+  maxCols: 7,
+  maxRows: 20,
+
+  viewBoxW: null,
+  viewBoxH: null,
+  viewBox: null,
+
+  yearLineFontSize: 12, // from CSS rule .year_line_txt
+
+  _calcViewBox: function() {
+    var viewBoxW = this.get('colW') * this.get('maxCols'),
+        viewBoxH = this.get('rowH') * this.get('maxRows');
+
+    this.set('viewBoxW', viewBoxW);
+    this.set('viewBoxH', viewBoxH);
+    this.set('viewBox', '0 0 ' + viewBoxW + ' ' + viewBoxH);
+  }.on('init')
+ 
+});

app/templates/svg.hbs

@@ -1,13 +1,13 @@
 
 <!-- Debug grid -->
-{{#if view.treeConfig.showGrid}}
-  {{#each line in view.gridLines}}
+{{#if svgenv.showGrid}}
+  {{#each line in gridLines}}
     <path d="{{unbound line}}" fill="none" stroke="#909090"></path>
   {{/each}}
 {{/if}}
 
 <!-- Years lines -->
-{{#each line in view.yearLines}}
+{{#each line in yearLines}}
   <text x="{{unbound line.x}}" y="{{unbound line.y}}" class="year_line_txt">
     <tspan dy="4.233003616333008">
       {{line.year}}
@@ -19,15 +19,15 @@
 <!-- Design Patterns -->
 {{#each elem in model.dpatterns}}
   {{view 'svg-g' templateName='node-dpattern'
-                 treeConfig=view.treeConfig
+                 treeConfig=svgenv
                  elem=elem}}
 {{/each}}
 
 <!-- Technologies -->
 {{#each elem in model.technologies}}
   {{#each className in elem.classNames}}
     {{view 'svg-g' templateName='node-technology' 
-                   treeConfig=view.treeConfig 
+                   treeConfig=svgenv
                    elem=elem
                    classNameTech=className}}
   {{/each}}

app/views/svg.js

@@ -6,7 +6,6 @@ export default Ember.View.extend({
 
   elementId: 'mvc_tree',
 
-
   templateName: 'svg',
 
   attributeBindings: ['xmlns',
@@ -22,69 +21,8 @@ export default Ember.View.extend({
   preserveAspectRatio: 'xMinYMin',
   viewBox: null,
 
-  treeConfig: {
-    showGrid: false,
-
-    paddingT: 6,
-    paddingR: 6,
-    paddingB: 12,
-    paddingL: 6,
-
-    colW: 170 + 12,
-    rowH: 64 + 18,
-
-    maxCols: 7,
-    maxRows: 20,
-
-    viewBoxW: null,
-    viewBoxH: null,
-
-    yearLineFontSize: 12 // see CSS rules .year_line_txt
-  },
-
-  calcViewBox: function() {
-    var tc = this.get('treeConfig');
-        tc.viewBoxW = tc.colW * tc.maxCols;
-        tc.viewBoxH = tc.rowH * tc.maxRows;
-    var viewBox = '0 0 ' + tc.viewBoxW + ' ' + tc.viewBoxH;
-
-    this.set('treeConfig', tc);
-    this.set('viewBox', viewBox);
-  }.observes('treeConfig').on('init'),
-
-  gridLines: function() {
-    var tc = this.get('treeConfig'),
-        w = tc.viewBoxW,
-        h = tc.viewBoxH,
-        gridLines = [];
-
-    for (var x = 0; x < w; x += tc.colW) {
-      gridLines.push('M' + x + ' 0 V' + h + ' Z');
-    }
-    for (var y = 0; y < h; y += tc.rowH) {
-      gridLines.push('M0 ' + y + ' H' + w + ' Z');
-    }
-
-    return gridLines;
-  }.property('treeConfig'),
-
-  yearLines: function() {
-    var tc = this.get('treeConfig');
-
-    return [
-      this._buildYearLine(1980, 2, tc),
-      this._buildYearLine(1990, 5, tc),
-      this._buildYearLine(2000, 9, tc),
-      this._buildYearLine(2010, 13, tc)
-    ];
-  }.property('treeConfig'),
-
-  _buildYearLine: function(year, row, tc) {
-    var x = tc.yearLineFontSize * 2, 
-        y = row * tc.rowH,
-        xLine = tc.yearLineFontSize * 4;
+  _setViewBox: function() {
+    this.set('viewBox', this.get('controller.svgenv.viewBox'));
+  }.on('init'),
 
-    return {year: year, x: x, y: y,
-            path: 'M'+xLine+' '+y+' H' + tc.viewBoxW};
-  }
 });

tests/acceptance/index-test.js

@@ -22,7 +22,9 @@ test('visiting /#pac', function(assert) {
   assert.ok( ! $panel.isInView(), 'panel is not visible on screen');
 
   visit('/#pac');
-  window.location.hash = '#pac'; // TODO: revisit Ember url fragments support
+  // TODO: revisit Ember url fragments support
+  // https://github.com/emberjs/ember.js/issues/4098
+  window.location.hash = '#pac'; 
 
   andThen(function() {
     assert.equal(currentPath(), 'index');

tests/unit/controllers/index-test.js

@@ -0,0 +1,80 @@
+import {
+  moduleFor,
+  test
+} from 'ember-qunit';
+
+moduleFor('controller:index', {
+  // Specify the other units that are required for this test.
+  // needs: ['controller:foo']
+});
+
+// Replace this with your real tests.
+test('it exists', function(assert) {
+  var controller = this.subject();
+  assert.ok(controller);
+});
+
+test('gridLines 1x1', function(assert) {
+  var controller = this.subject({
+    svgenv: {
+      colW: 40, rowH: 50,
+      maxCols: 1, maxRows: 1,
+      viewBoxW: 40, viewBoxH: 50,
+    }
+  });
+
+  var gridLines = [
+    'M0 0 V50 Z',
+    'M0 0 H40 Z',
+  ];
+  assert.deepEqual(controller.get('gridLines'), gridLines, '1x1');
+});
+
+test('gridLines 2x2', function(assert) {
+  var controller = this.subject({
+    svgenv: {
+      colW: 20, rowH: 30,
+      maxCols: 2, maxRows: 2,
+      viewBoxW: 40, viewBoxH: 60
+    }
+  });
+  var gridLines = [
+    'M0 0 V60 Z',
+    'M20 0 V60 Z',
+    'M0 0 H40 Z',
+    'M0 30 H40 Z',
+  ];
+  assert.deepEqual(controller.get('gridLines'), gridLines, '2x2');
+});
+
+test('gridLines 0x0', function(assert) {
+  var controller = this.subject({
+    svgenv: {
+      colW: 0, rowH: 0,
+      maxCols: 2, maxRows: 2,
+      viewBoxW: 0, viewBoxH: 0
+    }
+  });
+  var gridLines = [];
+  assert.deepEqual(controller.get('gridLines'), gridLines, 'colW and rowH are 0');
+});
+
+test('_buildYearLine', function(assert) {
+  var controller = this.subject({
+    svgenv: {
+      colW: 30, rowH: 60,
+      maxCols: 1, maxRows: 1,
+      viewBoxW: 30, viewBoxH: 60,
+      yearLineFontSize: 12
+    }
+  });
+
+  var yearLine = {year: 1514, x: 24, y: 0,
+                  path: 'M48 0 H30'};
+  assert.deepEqual(controller._buildYearLine(1514, 0), yearLine);
+
+  yearLine = {year: 1514, x: 24, y: 60,
+              path: 'M48 60 H30'};
+  assert.deepEqual(controller._buildYearLine(1514, 1), yearLine);
+});
+

tests/unit/services/svg-environment-test.js

@@ -0,0 +1,28 @@
+import {
+  moduleFor,
+  test
+} from 'ember-qunit';
+
+moduleFor('service:svg-environment', {
+  // Specify the other units that are required for this test.
+  // needs: ['service:foo']
+});
+
+// Replace this with your real tests.
+test('it exists', function(assert) {
+  var service = this.subject();
+  assert.ok(service);
+});
+
+test('calcViewBox', function(assert) {
+  var service = this.subject({
+        colW: 10,
+        rowH: 5,
+        maxCols: 10,
+        maxRows: 10
+      });
+  
+  assert.equal(service.viewBoxW, 100);
+  assert.equal(service.viewBoxH, 50);
+  assert.equal(service.viewBox, '0 0 100 50');
+});