From 765e45ddab5c4ef41ac556173e308c00ec9a598c Mon Sep 17 00:00:00 2001 From: smitpatwa Date: Mon, 7 Mar 2016 22:57:23 +0530 Subject: [PATCH 1/3] User will now be able to change the orientation --- html/css/main.css | 4 ++-- html/js/guiutils/MultiAction.js | 38 ++++++++++++++++++++++++--------- html/js/tree/Tree.js | 32 ++++++++++++++++++++++++--- 3 files changed, 59 insertions(+), 15 deletions(-) diff --git a/html/css/main.css b/html/css/main.css index 49dc47d..7b99970 100644 --- a/html/css/main.css +++ b/html/css/main.css @@ -67,8 +67,8 @@ html, body { #canvas { - height: 90%; - padding-top: 10px; + height: calc(100% - 75px); + margin: 10px; } .full-height { diff --git a/html/js/guiutils/MultiAction.js b/html/js/guiutils/MultiAction.js index 8639ecc..81c677c 100644 --- a/html/js/guiutils/MultiAction.js +++ b/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(); diff --git a/html/js/tree/Tree.js b/html/js/tree/Tree.js index 024c596..3233e7c 100644 --- a/html/js/tree/Tree.js +++ b/html/js/tree/Tree.js @@ -43,8 +43,20 @@ GTE.TREE = (function (parentModule) { if (!this.positionsUpdated || forced) { this.recursiveCalculateYs(this.root); this.centerParents(this.root); + // added by me + 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.tree.nodes[i].x = GTE.tree.nodes[i].depth * parseInt(GTE.STORAGE.settingsDistLevels); + } + } + // added by me ======= + this.positionsUpdated = true; } + + + this.clear(); // Draw MultiAction first so that nodes clicks have higher priority this.drawMultiactionLines(); @@ -309,11 +321,18 @@ GTE.TREE = (function (parentModule) { * @param {Node} node Node to expand through */ Tree.prototype.recursiveCalculateYs = function (node) { + var canvasHeight; + if(GTE.STORAGE.settingsOrientation == 0){ + canvasHeight = GTE.canvas.viewbox().height; + } + 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 +450,21 @@ GTE.TREE = (function (parentModule) { * Updates the positions (x and y) of the Tree leaves */ Tree.prototype.updateLeavesPositions = function () { + var canvasWidth; + if(GTE.STORAGE.settingsOrientation == 0){ + canvasWidth = GTE.canvas.viewbox().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(); From aca00bbc142c952076ad4db2ac42866368969e71 Mon Sep 17 00:00:00 2001 From: smitpatwa Date: Mon, 7 Mar 2016 23:27:40 +0530 Subject: [PATCH 2/3] Added comments --- html/js/tree/Tree.js | 16 +++++++++++++--- 1 file changed, 13 insertions(+), 3 deletions(-) diff --git a/html/js/tree/Tree.js b/html/js/tree/Tree.js index 3233e7c..1577209 100644 --- a/html/js/tree/Tree.js +++ b/html/js/tree/Tree.js @@ -41,16 +41,16 @@ GTE.TREE = (function (parentModule) { } if (!this.positionsUpdated || forced) { + // Calculate x and y assuming vertical orientation this.recursiveCalculateYs(this.root); this.centerParents(this.root); - // added by me + // 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.tree.nodes[i].x = GTE.tree.nodes[i].depth * parseInt(GTE.STORAGE.settingsDistLevels); } } - // added by me ======= this.positionsUpdated = true; } @@ -322,10 +322,15 @@ GTE.TREE = (function (parentModule) { */ 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(GTE.STORAGE.settingsOrientation == 1){ + /* + * 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++) { @@ -451,9 +456,14 @@ GTE.TREE = (function (parentModule) { */ 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; } From 4ace21bc4ccaf12e79bb4e69ddffb8887619f9ba Mon Sep 17 00:00:00 2001 From: smitpatwa Date: Wed, 9 Mar 2016 00:02:18 +0530 Subject: [PATCH 3/3] Correction for vertical displacement in horizontal mode --- html/js/tree/Tree.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/html/js/tree/Tree.js b/html/js/tree/Tree.js index 1577209..5064109 100644 --- a/html/js/tree/Tree.js +++ b/html/js/tree/Tree.js @@ -47,7 +47,7 @@ GTE.TREE = (function (parentModule) { // 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.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); } }