Refactored dependencies implementation to support different appearance based on CSS class

FEA: ItEr68S04BugFixing

ganttzk/src/main/resources/web/js/ganttz/dependency.js

@@ -3,6 +3,7 @@
  *
  * Copyright (C) 2009-2010 Fundación para o Fomento da Calidade Industrial e
  *                         Desenvolvemento Tecnolóxico de Galicia
+ * Copyright (C) 2011 Igalia S.L.
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU Affero General Public License as published by
@@ -44,7 +45,7 @@ zkPlanner.init = function(planner){
 }
 
 zkPlanner.findImageElement = function(arrow, name) {
-    var children = arrow.getElementsByTagName("img");
+    var children = arrow.getElementsByTagName("div");
     for (var i = 0; i < children.length; i++) {
         var child = children[i];
         if (child.getAttribute("class").indexOf(name) != -1) {
@@ -78,8 +79,8 @@ 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++) {
-        var img = document.createElement('img');
-        img.setAttribute("class", image_data[i][0]+" extra_padding");
+        var img = document.createElement('div');
+        img.setAttribute("class", image_data[i][0] );
         img.src = this.getImagesDir() + image_data[i][1];
         arrowDiv.appendChild(img);
     }
@@ -142,7 +143,8 @@ zkPlanner.drawArrowStartStart = function(arrow, orig, dest){
 	depend.style.width = width2 - zkTask.HALF_HEIGHT + "px";
 
     var deparrow = this.findImageElement(arrow, 'arrow');
-    deparrow.src = this.getImagesDir()+"arrow.png";
+//    deparrow.src = this.getImagesDir()+"arrow.png";
+    deparrow.setAttribute("class", "arrow point-east");
     deparrow.style.top = yend - zkTask.HALF_HEIGHT + "px";
     deparrow.style.left = xend - 15 + "px";
     }
@@ -192,7 +194,8 @@ zkPlanner.drawArrowEndEnd = function(arrow, orig, dest){
 	depend.style.width = width2 + "px";
 
     var deparrow = this.findImageElement(arrow, 'arrow');
-    deparrow.src = this.getImagesDir()+"arrow3.png";
+//    deparrow.src = this.getImagesDir()+"arrow3.png";
+    deparrow.setAttribute("class",  "arrow point-west");
     deparrow.style.top = yend - 5 + "px";
     deparrow.style.left = xend - 8 + "px";
     }
@@ -233,20 +236,19 @@ zkPlanner.drawArrowEndStart = function(arrow, orig, dest){
     }
     var deparrow = this.findImageElement(arrow, 'arrow');
     if ( width == 0 ) {
-        deparrow.src = this.getImagesDir()+"arrow2.png";
+        deparrow.setAttribute("class", "arrow point-south");
         deparrow.style.top = yend - 10 + "px";
         deparrow.style.left = xend - 5 + "px";
         if ( yorig > yend ) {
-            deparrow.src = this.getImagesDir()+"arrow4.png";
+            deparrow.setAttribute("class", "arrow point-north");
             deparrow.style.top = yend + "px";
         }
     } else {
         deparrow.style.top = yend - 5 + "px";
         deparrow.style.left = xend - 10 + "px";
-        deparrow.src = this.getImagesDir()+"arrow.png";
-
+        deparrow.setAttribute("class", "arrow point-east");
         if (width < 0) {
-            deparrow.src = this.getImagesDir() + "arrow3.png";
+            deparrow.setAttribute("class", "arrow point-west");
             deparrow.style.left = xend + "px";
             deparrow.style.top = yend - 5 + "px";
         }

ganttzk/src/main/resources/web/js/ganttz/planner.js

@@ -38,7 +38,7 @@ zkPlanner.init = function(planner){
 }
 
 zkPlanner.findImageElement = function(arrow, name) {
-    var children = arrow.getElementsByTagName("img");
+    var children = arrow.getElementsByTagName("div");
     for (var i = 0; i < children.length; i++) {
         var child = children[i];
         if (child.getAttribute("class").indexOf(name) != -1) {
@@ -69,12 +69,13 @@ 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++) {
-        var img = document.createElement('img');
-        img.setAttribute("class", image_data[i][0]+" extra_padding");
-        img.src = this.getImagesDir() + image_data[i][1];
+    /* var image_data = [ [ "start", "pixel.gif" ], [ "mid", "pixel.gif" ],
+            [ "end", "pixel.gif" ], [ "arrow", "arrow.png" ] ]; */
+    var image_data2 = [ "start", "mid", "end", "arrow" ];
+    for ( var i = 0; i < image_data2.length; i++) {
+        var img = document.createElement('div');
+        img.setAttribute("class", image_data[i]+" extra_padding");
+        /* img.src = this.getImagesDir() + image_data[i][1]; */
         arrowDiv.appendChild(img);
     }
 }

ganttzk/src/main/resources/web/js/ganttz/tasklist.js

@@ -110,7 +110,8 @@ zkTasklist.hideTooltip = function(elem) {
 	if (zkTasklist.tooltipTimeout) {
 		clearTimeout(zkTasklist.tooltipTimeout);
 	}
-	document.getElementById(elem).style["display"] = "none";
+	node = document.getElementById(elem);
+	if (elem != null) node.style["display"] = "none";
 }
 
 zkTasklist.timeplotcontainer_rescroll = function(elem) {

navalplanner-webapp/src/main/webapp/planner/css/ganttzk.css

@@ -230,7 +230,7 @@
 
 .end,.start,.mid,.arrow {
     position: absolute;
-    padding: 4px;
+    /* padding: 4px; */
     cursor: crosshair;
     z-index:0;
 }
@@ -238,10 +238,18 @@
 #ganttpanel .end,
 #ganttpanel .start {
      height: 1px;
+     padding: 4px 0 2px 1px;
+     margin-left: 4px;
+     background-position: 0px 2px;
 }
 
 #ganttpanel .mid {
     width: 1px;
+    margin-top: 3px;
+    margin-bottom: 2px;
+    padding-right: 4px;
+    padding-left: 0px;
+    background-position: 4px 0;
 }
 
 
@@ -263,6 +271,11 @@
     height: 1px;
 }
 
+#listlimitingdependencies .arrow {
+    background-image: none;
+    padding:0px;
+}
+
 div.box.limiting-assigned {
     background-color: #61b598; /* LIMITING_RESOURCES_DARK_GREEN */
     -moz-border-radius: 15px;
@@ -1143,7 +1156,7 @@ height: 100%
     float:left;
     width:10px;
     height:22px;
-    background-image: url("../../zkau/web/ganttz/img/watermark_deadline.png");
+    background-image: url("../../zkau/web/ganttz/img/deadline.png");
 }
 
 
@@ -1256,4 +1269,61 @@ body .perspectives-column {
 
 div.z-grid-header .second_level_ tr {
     overflow: visible;
-}
+}
+
+
+.start, .end {
+    background-image:
+        url("../../zkau/web/ganttz/img/solid-black-hor.png");
+        background-repeat:repeat-x;
+}
+
+.mid {
+    background-image:
+        url("../../zkau/web/ganttz/img/solid-black-ver.png");
+        background-repeat:repeat-y;
+}
+
+.arrow {
+    height: 10px;
+    width: 10px;
+    background-image:
+        url("../../zkau/web/ganttz/img/solid-black-arrows.png");
+    background-repeat: no-repeat;
+    padding: 3px 4px 4px 4px;
+}
+
+
+.violated-dependency .start, .violated-dependency .end {
+    background-image: url("../../zkau/web/ganttz/img/solid-red-hor.png");
+}
+.violated-dependency .mid {
+    background-image: url("../../zkau/web/ganttz/img/solid-red-ver.png");
+}
+.violated-dependency .arrow {
+    background-image: url("../../zkau/web/ganttz/img/dashed-red-arrows.png");
+}
+
+.resources-dependency .start, .resources-dependency .end {
+    background-image: url("../../zkau/web/ganttz/img/dashed-black-hor.png");
+}
+.resources-dependency .mid {
+    background-image: url("../../zkau/web/ganttz/img/dashed-black-ver.png");
+}
+.resources-dependency .arrow {
+    background-image: url("../../zkau/web/ganttz/img/dashed-black-arrows.png");
+}
+
+
+.point-east {
+    background-position: 0 2px;
+}
+.point-south {
+    background-position: -18px 0;
+}
+.point-west {
+    background-position: -35px 2px;
+}
+.point-north {
+    background-position: -48px 0;
+}