From 79c802c6ed54498ba94b4d7dadb63a90c59cd8c1 Mon Sep 17 00:00:00 2001 From: Lorenzo Tilve Date: Wed, 12 Aug 2009 12:29:38 +0200 Subject: [PATCH] ItEr21S08CUVisualizacionModelosPlanificacionItErItEr20S10: Added end-end dependency type graphical support --- .../resources/web/js/ganttz/dependency.js | 67 +++++++-------- .../main/resources/web/js/ganttz/planner.js | 82 +++++++++++++++---- 2 files changed, 101 insertions(+), 48 deletions(-) diff --git a/navalplanner-gantt-zk/src/main/resources/web/js/ganttz/dependency.js b/navalplanner-gantt-zk/src/main/resources/web/js/ganttz/dependency.js index ea037a471..e0df24898 100644 --- a/navalplanner-gantt-zk/src/main/resources/web/js/ganttz/dependency.js +++ b/navalplanner-gantt-zk/src/main/resources/web/js/ganttz/dependency.js @@ -11,55 +11,56 @@ zkDependency.START_START = "START_START"; zkDependency.END_END = "END_END"; zkDependency.origin = function(dependency) { - var id = dependency.getAttribute("idTaskOrig"); - return document.getElementById(id); + var id = dependency.getAttribute("idTaskOrig"); + return document.getElementById(id); } zkDependency.destination = function(dependency) { - var id = dependency.getAttribute("idTaskEnd"); - return document.getElementById(id); + var id = dependency.getAttribute("idTaskEnd"); + return document.getElementById(id); } zkDependency.draw = function(dependency) { var orig = zkPlanner.findPos(this.origin(dependency)); var dest = zkPlanner.findPos(this.destination(dependency)); - // This corner case may depend on dependence type - offsetX = this.origin(dependency).offsetWidth - zkTask.CORNER_WIDTH; - separation = orig[0] + this.origin(dependency).offsetWidth - dest[0]; + // This corner case may depend on dependence type + offsetX = this.origin(dependency).offsetWidth - zkTask.CORNER_WIDTH; + separation = orig[0] + this.origin(dependency).offsetWidth - dest[0]; - if (separation > 0 ) { - offsetX = offsetX - separation; - } - if (dependency.getAttribute('type') == zkDependency.END_START || - dependency.getAttribute('type') == null ) { - orig[0] = orig[0] + Math.max( 0, offsetX ); - } + if (separation > 0) { + offsetX = offsetX - separation; + } + if (dependency.getAttribute('type') == zkDependency.END_START + || dependency.getAttribute('type') == null) { + orig[0] = orig[0] + Math.max(0, offsetX); + } else if (dependency.getAttribute('type') == zkDependency.END_END) { + orig[0] = orig[0] + this.origin(dependency).offsetWidth; + dest[0] = dest[0] + this.destination(dependency).offsetWidth; + } - orig[1] = orig[1] + zkTask.HEIGHT; - dest[1] = dest[1] + zkTask.HALF_HEIGHT; + orig[1] = orig[1] + zkTask.HEIGHT; + dest[1] = dest[1] + zkTask.HALF_HEIGHT; - if ( ( orig[1] > dest[1] ) ) { - - orig[1] = orig[1] - zkTask.HEIGHT; - } + if ((orig[1] > dest[1])) { + orig[1] = orig[1] - zkTask.HEIGHT; + } zkPlanner.drawArrow(dependency, orig, dest); } zkDependency.init = function(dependency) { - zkPlanner.setupArrow(dependency); - var parent = dependency.parentNode; - if(parent.id !== "listdependencies"){ - document.getElementById("listdependencies").appendChild(dependency); - } - YAHOO.util.Event.onDOMReady(function() { - var origin = zkDependency.origin(dependency); - var destination = zkDependency.destination(dependency); - zkDependency.draw(dependency); - zkTask.addRelatedDependency(origin, dependency); - zkTask.addRelatedDependency(destination, dependency); - }); + zkPlanner.setupArrow(dependency); + var parent = dependency.parentNode; + if (parent.id !== "listdependencies") { + document.getElementById("listdependencies").appendChild(dependency); + } + YAHOO.util.Event.onDOMReady(function() { + var origin = zkDependency.origin(dependency); + var destination = zkDependency.destination(dependency); + zkDependency.draw(dependency); + zkTask.addRelatedDependency(origin, dependency); + zkTask.addRelatedDependency(destination, dependency); + }); } - diff --git a/navalplanner-gantt-zk/src/main/resources/web/js/ganttz/planner.js b/navalplanner-gantt-zk/src/main/resources/web/js/ganttz/planner.js index 3fd46a0a2..b84376652 100644 --- a/navalplanner-gantt-zk/src/main/resources/web/js/ganttz/planner.js +++ b/navalplanner-gantt-zk/src/main/resources/web/js/ganttz/planner.js @@ -1,11 +1,15 @@ +/** + * Javascript behaviuor for Planner elements + * @author Lorenzo Tilve Álvaro + */ zkPlanner = {}; -zkPlanner.getImagesDir = function() { +zkPlanner.getImagesDir = function() { return webapp_context_path + "/zkau/web/ganttz/img/"; } -zkPlanner.init = function(planner){ - +zkPlanner.init = function(planner){ + } zkPlanner.findImageElement = function(arrow, name) { @@ -39,7 +43,7 @@ function getContextPath(element){ } zkPlanner.setupArrow = function(arrowDiv){ - + var image_data = [ [ "start", "pixel.gif" ], [ "mid", "pixel.gif" ], [ "end", "pixel.gif" ], [ "arrow", "arrow.png" ] ]; for ( var i = 0; i < image_data.length; i++) { @@ -53,12 +57,15 @@ zkPlanner.setupArrow = function(arrowDiv){ zkPlanner.drawArrow = function(dependency, orig, dest) { switch(dependency.getAttribute('type')) { - case zkDependency.START_START: + case zkDependency.START_START: zkPlanner.drawArrowStartStart(dependency, orig, dest); break; + case zkDependency.END_END: + zkPlanner.drawArrowEndEnd(dependency, orig, dest); + break; case zkDependency.END_START: - default: - zkPlanner.drawArrowEndStart(dependency, orig, dest); + default: + zkPlanner.drawArrowEndStart(dependency, orig, dest); } } @@ -70,8 +77,8 @@ zkPlanner.drawArrowStartStart = function(arrow, orig, dest){ width1 = zkTask.CORNER_WIDTH; width2 = Math.abs(xend - xorig) + zkTask.CORNER_WIDTH; - height = Math.abs(yend - yorig); - + height = Math.abs(yend - yorig); + if (xorig > xend) { width1 = width2; width2 = zkTask.CORNER_WIDTH; @@ -79,16 +86,16 @@ zkPlanner.drawArrowStartStart = function(arrow, orig, dest){ // First segment var depstart = this.findImageElement(arrow, 'start'); - depstart.style.left = (xorig - width1) + "px"; + depstart.style.left = (xorig - width1) + "px"; depstart.style.top = yorig + "px"; depstart.style.width = width1 + "px"; depstart.style.display = "inline"; // Second segment var depmid = this.findImageElement(arrow, 'mid'); - depmid.style.left = depstart.style.left; + depmid.style.left = depstart.style.left; if (yend > yorig) { - depmid.style.top = yorig + "px"; + depmid.style.top = yorig + "px"; } else { depmid.style.top = yend + "px"; } @@ -96,17 +103,62 @@ zkPlanner.drawArrowStartStart = function(arrow, orig, dest){ // Third segment var depend = this.findImageElement(arrow, 'end'); - depend.style.left = depstart.style.left; + depend.style.left = depstart.style.left; depend.style.top = yend + "px"; depend.style.width = width2 + "px"; var deparrow = this.findImageElement(arrow, 'arrow'); - deparrow.src = this.getImagesDir()+"arrow.png"; + deparrow.src = this.getImagesDir()+"arrow.png"; deparrow.style.top = yend - 5 + "px"; deparrow.style.left = xend - 15 + "px"; } +zkPlanner.drawArrowEndEnd = function(arrow, orig, dest){ + var xorig = orig[0] - zkTask.DEPENDENCY_PADDING; + var yorig = orig[1] - zkTask.CORNER_WIDTH/2 + zkTask.HALF_DEPENDENCY_PADDING; + var xend = dest[0] + zkTask.HALF_DEPENDENCY_PADDING; + var yend = dest[1] - zkTask.DEPENDENCY_PADDING; + + width1 = Math.abs(xend - xorig) + zkTask.CORNER_WIDTH; + width2 = zkTask.CORNER_WIDTH; + height = Math.abs(yend - yorig); + + if (xorig > xend) { + width2 = width1; + width1 = zkTask.CORNER_WIDTH; + } + + // First segment + var depstart = this.findImageElement(arrow, 'start'); + depstart.style.left = xorig + "px"; + depstart.style.top = yorig + "px"; + depstart.style.width = width1 + "px"; + depstart.style.display = "inline"; + + // Second segment + var depmid = this.findImageElement(arrow, 'mid'); + depmid.style.left = (xorig + width1) + "px"; + if (yend > yorig) { + depmid.style.top = yorig + "px"; + } else { + depmid.style.top = yend + "px"; + } + depmid.style.height = height + "px"; + + // Third segment + var depend = this.findImageElement(arrow, 'end'); + depend.style.left = (xorig + width1 - width2) + "px"; + depend.style.top = yend + "px"; + depend.style.width = width2 + "px"; + + var deparrow = this.findImageElement(arrow, 'arrow'); + deparrow.src = this.getImagesDir()+"arrow3.png"; + deparrow.style.top = yend - 5 + "px"; + deparrow.style.left = xend - 5 + "px"; + } + + zkPlanner.drawArrowEndStart = function(arrow, orig, dest){ var xorig = orig[0] - zkTask.DEPENDENCY_PADDING; var yorig = orig[1] - zkTask.HALF_DEPENDENCY_PADDING; @@ -159,5 +211,5 @@ zkPlanner.drawArrowEndStart = function(arrow, orig, dest){ deparrow.style.left = xend + "px"; deparrow.style.top = yend - 5 + "px"; } - } + } } \ No newline at end of file