Switching to SVG with Raphael

app/controllers/NavCtrl.js

@@ -0,0 +1,21 @@
+'use strict';
+
+openstudioApp.controller('NavCtrl', ['$scope', '$location', 'Shared', function ($scope, $location, Shared) {
+  $scope.tabs = [{
+    heading: 'Zones',
+    route: 'zones'
+  }, {
+    heading: 'Systems',
+    route: 'systems'
+  }];
+
+  function updateActiveTab() {
+    // Reset tabs if the page is refreshed
+    $scope.tabs.filter(function (element) {
+      var regex = new RegExp('^/' + element.route + '$');
+      if (regex.test($location.path())) element.active = true;
+    });
+  }
+
+  updateActiveTab();
+}]);

app/controllers/SystemsCtrl.js

@@ -1,46 +1,34 @@
 'use strict';
 
 openstudioApp.controller('SystemsCtrl', ['$scope', '$log', 'os', function ($scope, $log, os) {
-
-  var osshapes = {
-    standardUnit: 100.0,
-
-    getShape: function (modelObject) {
-      var result = {};
-      if (os.openstudio.model.toNode(modelObject).isNull()) {
-        result = new osshapes.StraightComponent();
-      } else {
-        result = new osshapes.Node();
-      }
-      return result;
-    },
-
-    StraightComponent: function () {
-      shape = new createjs.Shape();
-      shape.graphics.beginStroke("black").moveTo(0.0, 0.0).lineTo(osshapes.standardUnit, 0.0);
-      return shape;
-    },
-
-    Node: function () {
-      var shape = new createjs.Shape();
-      shape.graphics.beginStroke("black").moveTo(0.0, 0.0).lineTo(osshapes.standardUnit, 0.0);
-      shape.graphics.beginFill("black").drawCircle(osshapes.standardUnit / 2.0, 0, 7.0);
-      return shape;
-    }
+  $scope.standardUnit = 100;
+  $scope.width = 3000;
+  $scope.height = 300;
+  $scope.paper = Raphael('systems-canvas', $scope.width, $scope.height);
+  // Fix for subpixel aliasing
+  $scope.paper.setViewBox(0.5, 0.5, $scope.width, $scope.height);
+
+  $scope.addStraightComponent = function (x, y) {
+    var line = $scope.paper.path(['M', x, y, 'l', $scope.standardUnit, 0]);
+  };
+  $scope.addNode = function (x, y) {
+    var line = $scope.paper.path(['M', x, y, 'l', $scope.standardUnit, 0]);
+    var circle = $scope.paper.circle($scope.standardUnit / 2 + x, y, 7).attr('fill', 'black');
   };
 
   os.openstudio.model.addSystemType7(os.model);
   var plant = os.openstudio.model.getPlantLoops(os.model).get(0);
   var supplyComps = plant.supplyComponents();
 
-  var stage = new createjs.Stage("demoCanvas");
-
   for (var i = 0; i < supplyComps.size(); ++i) {
-    var shape = osshapes.getShape(supplyComps.get(i));
-    shape.x = i * (osshapes.standardUnit + 10.0);
-    shape.y = 50.0;
-    stage.addChild(shape);
+    var modelObject = supplyComps.get(i);
+    var x = i * ($scope.standardUnit + 10);
+    var y = 50;
+
+    if (os.openstudio.model.toNode(modelObject).isNull()) {
+      $scope.addStraightComponent(x, y);
+    } else {
+      $scope.addNode(x, y);
+    }
   }
-
-  stage.update();
 }]);

app/index.html

@@ -13,8 +13,8 @@
     <script src="bower_components/angular-spinner/angular-spinner.js"></script>
     <script src="bower_components/angular-ui-router/release/angular-ui-router.js"></script>
     <script src="bower_components/angular-ui-router.stateHelper/statehelper.js"></script>
-    <script src="bower_components/easeljs/lib/easeljs-0.8.1.combined.js"></script>
     <script src="bower_components/lodash/lodash.js"></script>
+    <script src="bower_components/raphael/raphael.js"></script>
     <!-- Production
     <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
     <script src="bower_components/jquery/dist/jquery.min.js"></script>
@@ -24,21 +24,23 @@
     <script src="bower_components/angular-spinner/angular-spinner.min.js"></script>
     <script src="bower_components/angular-ui-router/release/angular-ui-router.min.js"></script>
     <script src="bower_components/angular-ui-router.stateHelper/statehelper.min.js"></script>
-    <script src="bower_components/easeljs/lib/easeljs-0.8.1.min.js"></script>
     <script src="bower_components/lodash/lodash.min.js"></script>
+    <script src="bower_components/raphael/raphael-min.js"></script>
     -->
     <link href="css/style.css" rel="stylesheet">
     <script src="app.js"></script>
     <script src="services/os.js"></script>
     <script src="services/Shared.js"></script>
+    <script src="controllers/NavCtrl.js"></script>
     <script src="controllers/SystemsCtrl.js"></script>
     <script src="controllers/ZonesCtrl.js"></script>
   </head>
   <body ng-app="openstudioApp" class="container-fluid">
-    <tabset class="pad-top-20">
-      <tab heading="Zones" ui-sref="zones"></tab>
-      <tab heading="Systems" ui-sref="systems"></tab>
-    </tabset>
+    <div ng-controller="NavCtrl" class="pad-top-20">
+      <tabset>
+        <tab ng-repeat="tab in tabs" heading="{{tab.heading}}" active="tab.active" ui-sref="{{tab.route}}"></tab>
+      </tabset>
+    </div>
     <div ui-view></div>
   </body>
 </html>

app/partials/systems.html

@@ -1,5 +1,5 @@
 <div class="row pad-top-20">
   <div class="col-md-12">
-    <canvas id="demoCanvas" width="3000" height="3000"></canvas>
+    <div id="systems-canvas"></div>
   </div>
 </div>

bower.json

@@ -13,7 +13,7 @@
     "angular-ui-router": "latest",
     "angular-ui-router.stateHelper": "latest",
     "bootstrap": "latest",
-    "easeljs": "latest",
-    "lodash": "latest"
+    "lodash": "latest",
+    "raphael": "latest"
   }
 }

package.json

@@ -4,6 +4,7 @@
   "main"         : "main.js",
   "dependencies" : { 
     "node-gyp" : "latest",
-    "electron-prebuilt" : "latest"
+    "electron-prebuilt" : "latest",
+    "eve" : "latest"
   }
 }