Orientation

html/css/main.css

@@ -67,8 +67,8 @@ html, body {
 
 
 #canvas {
-    height: 90%;
-    padding-top: 10px;
+    height: calc(100% - 75px);
+    margin: 10px;
 }
 
 .full-height {

html/js/guiutils/MultiAction.js

@@ -8,8 +8,14 @@ GTE.TREE = (function(parentModule) {
     function MultiAction(level, nodesInLine) {
         this.shape = null;
         this.nodesInLine = nodesInLine;
-        this.x1 = nodesInLine[0].x;
-        this.x2 = nodesInLine[nodesInLine.length - 1].x;
+        if(GTE.STORAGE.settingsOrientation == 0){
+            this.x1 = nodesInLine[0].x;
+            this.x2 = nodesInLine[nodesInLine.length - 1].x;
+        }
+        else if(GTE.STORAGE.settingsOrientation == 1){
+            this.x1 = nodesInLine[nodesInLine.length - 1].y;
+            this.x2 = nodesInLine[0].y;
+        }
         this.containsLeaves = false;
         for (var i = 0; i < this.nodesInLine.length; i++) {
             if (this.nodesInLine[i].isLeaf()) {
@@ -23,16 +29,28 @@ GTE.TREE = (function(parentModule) {
     }
 
     MultiAction.prototype.draw = function() {
+
         var width = (this.x2 + GTE.CONSTANTS.CIRCLE_SIZE) - this.x1;
+        if(GTE.STORAGE.settingsOrientation == 0){
+            this.shape = GTE.canvas.rect(width, GTE.CONSTANTS.CIRCLE_SIZE)
+                .radius(GTE.CONSTANTS.CIRCLE_SIZE / 2)
+                .fill({
+                    color: '#9d9d9d'
+                })
+                .addClass('multiaction-rect');
+            this.shape.translate(this.x1,
+                this.y - GTE.CONSTANTS.CIRCLE_SIZE / 2);
+        }
+        else if(GTE.STORAGE.settingsOrientation == 1){
+            this.shape = GTE.canvas.rect(GTE.CONSTANTS.CIRCLE_SIZE,width)
+                .radius(GTE.CONSTANTS.CIRCLE_SIZE / 2)
+                .fill({
+                    color: '#9d9d9d'
+                })
+                .addClass('multiaction-rect');
+            this.shape.translate(this.y - GTE.CONSTANTS.CIRCLE_SIZE / 2,this.x1);
+        }
 
-        this.shape = GTE.canvas.rect(width, GTE.CONSTANTS.CIRCLE_SIZE)
-            .radius(GTE.CONSTANTS.CIRCLE_SIZE / 2)
-            .fill({
-                color: '#9d9d9d'
-            })
-            .addClass('multiaction-rect');
-        this.shape.translate(this.x1,
-            this.y - GTE.CONSTANTS.CIRCLE_SIZE / 2);
         var thisMultiAction = this;
         this.shape.mouseover(function() {
             thisMultiAction.interaction();

html/js/tree/Tree.js

@@ -41,10 +41,22 @@ GTE.TREE = (function (parentModule) {
         }
 
         if (!this.positionsUpdated || forced) {
+            // Calculate x and y assuming vertical orientation
             this.recursiveCalculateYs(this.root);
             this.centerParents(this.root);
+            // If the orientation is horizontal then adjust the x and y of the Nodes
+            if(GTE.STORAGE.settingsOrientation == 1){
+                for(var i in GTE.tree.nodes){
+                    GTE.tree.nodes[i].y = (GTE.canvas.viewbox().height - GTE.tree.nodes[i].x-GTE.STORAGE.settingsCircleSize);
+                    GTE.tree.nodes[i].x = GTE.tree.nodes[i].depth * parseInt(GTE.STORAGE.settingsDistLevels);
+                }
+            }
+
             this.positionsUpdated = true;
         }
+
+
+
         this.clear();
         // Draw MultiAction first so that nodes clicks have higher priority
         this.drawMultiactionLines();
@@ -309,11 +321,23 @@ GTE.TREE = (function (parentModule) {
     * @param {Node} node Node to expand through
     */
     Tree.prototype.recursiveCalculateYs = function (node) {
+        var canvasHeight;
+        //If orientation is vertical(0) then all calculation done normally
+        if(GTE.STORAGE.settingsOrientation == 0){
+            canvasHeight = GTE.canvas.viewbox().height;
+        }
+        /* 
+        * If orientation is horizontal then all calculations are done by
+        * transforming the grid (i.e considering width to be the height)
+        */
+        else if(GTE.STORAGE.settingsOrientation == 1){
+            canvasHeight = GTE.canvas.viewbox().width;
+        }
         for (var i = 0; i < node.children.length; i++) {
             this.recursiveCalculateYs(node.children[i]);
         }
         node.y = node.depth * parseInt(GTE.STORAGE.settingsDistLevels);
-        if ((node.y + parseInt(GTE.STORAGE.settingsCircleSize)) > GTE.canvas.viewbox().height) {
+        if ((node.y + parseInt(GTE.STORAGE.settingsCircleSize)) > canvasHeight) {
             this.zoomOut();
             this.updatePositions();
         }
@@ -431,14 +455,26 @@ GTE.TREE = (function (parentModule) {
     * Updates the positions (x and y) of the Tree leaves
     */
     Tree.prototype.updateLeavesPositions = function () {
+        var canvasWidth;
+        //If orientation is vertical(0) then all calculation done normally
+        if(GTE.STORAGE.settingsOrientation == 0){
+            canvasWidth = GTE.canvas.viewbox().width;
+        }
+        /* 
+        * If orientation is horizontal then all calculations are done by
+        * transforming the grid (i.e considering height to be the width)
+        */
+        else if(GTE.STORAGE.settingsOrientation == 1){
+            canvasWidth = GTE.canvas.viewbox().height;
+        }
         var numberLeaves = this.numberLeaves();
-        var widthPerNode = GTE.canvas.viewbox().width/numberLeaves;
+        var widthPerNode = canvasWidth/numberLeaves;
         var offset = 0;
         // Avoid nodes to be too spreaded out
         if (widthPerNode > GTE.CONSTANTS.MAX_HORIZONTAL_DISTANCE_BW_NODES) {
             widthPerNode = GTE.CONSTANTS.MAX_HORIZONTAL_DISTANCE_BW_NODES;
             // Calculate the offset so the nodes are centered on the screen
-            offset = (GTE.canvas.viewbox().width-widthPerNode*numberLeaves)/2;
+            offset = (canvasWidth-widthPerNode*numberLeaves)/2;
         }
         if (widthPerNode < parseInt(GTE.STORAGE.settingsCircleSize)) {
             this.zoomOut();