Working in the center labels into the items in a visualmap. (not finished)

pandora_console/godmode/reporting/visual_console_builder.editor.js

@@ -86,6 +86,8 @@ function visual_map_main() {
 			draw_lines(lines, 'background', true);
 			
 			draw_user_lines("", 0, 0, 0 , 0, 0, true);
+			
+			//~ center_labels();
 		}
 	);
 	

pandora_console/include/functions_visual_map.php

@@ -113,6 +113,7 @@ function visual_map_print_item($mode = "read", $layoutData,
 	$imageSize = '';
 	
 	
+	
 	if (!empty($proportion)) {
 		$top = $top * $proportion['proportion_height'];
 		$left = $left * $proportion['proportion_width'];
@@ -782,9 +783,10 @@ function visual_map_print_item($mode = "read", $layoutData,
 	
 	echo '<div id="' . $id . '" class="' . $class . '" ' .
 		'style="z-index: ' .$z_index . ';' .
-			'position: absolute; top: ' . $top . 'px; ' .
+			'position: absolute; ' .
+			'top: ' . $top . 'px; ' .
 			'left: ' . $left . 'px;' .
-			'text-align: center;' .
+			'text-align: left;' .
 			'display: inline-block; ' . $sizeStyle . '">';
 	
 	if ($link) {
@@ -804,7 +806,7 @@ function visual_map_print_item($mode = "read", $layoutData,
 			break;
 		case STATIC_GRAPH:
 		case GROUP_ITEM:
-			echo "<div style='width:150px'>";
+			echo "<div>";
 			if ($layoutData['image'] != null) {
 				
 				
@@ -1776,6 +1778,7 @@ function visual_map_print_visual_map ($id_layout, $show_links = true,
 		$(window).load(function() {
 				draw_lines(lines, 'background');
 				draw_user_lines_read();
+				center_labels();
 			}
 		);
 		/* ]]> */
@@ -1873,20 +1876,25 @@ function visual_map_print_visual_map ($id_layout, $show_links = true,
 				continue;
 		}
 		
+		if (($dif_height === 0) && ($dif_width === 0)) {
+			$proportion = null;
+		}
+		else {
+			$proportion = array(
+				'dif_height' => $dif_height,
+				'dif_width' => $dif_width,
+				'proportion_height' => $proportion_height,
+				'proportion_width' => $proportion_width);
+		}
+		
 		switch ($layout_data['type']) {
 			case LINE_ITEM:
 				visual_map_print_user_lines("read", $layout_data,
-					array('dif_height' => $dif_height,
+					$proportion);
-						'dif_width' => $dif_width,
-						'proportion_height' => $proportion_height,
-						'proportion_width' => $proportion_width));
 				break;
 			default:
 				visual_map_print_item("read", $layout_data,
-					array('dif_height' => $dif_height,
+					$proportion, $show_links);
-						'dif_width' => $dif_width,
-						'proportion_height' => $proportion_height,
-						'proportion_width' => $proportion_width), $show_links);
 				break;
 		}
 	}

pandora_console/include/javascript/pandora_visual_console.js

@@ -17,6 +17,7 @@
  * @param editor Boolean variable to set other css selector in editor (when true).
  */
 function draw_line (line, id_div) {
+	
 	selector = '';
 	
 	//Check if the global var resize_map is defined
@@ -34,15 +35,20 @@ function draw_line (line, id_div) {
 	brush.setStroke (lineThickness);
 	brush.setColor (line['color']);
 	
-	have_node_begin_img = $('#'+line['node_begin'] + " img").length;
+	have_node_begin_img = $('#' + line['node_begin'] + " img").length;
-	have_node_end_img = $('#'+line['node_end'] + " img").length;
+	have_node_end_img = $('#' + line['node_end'] + " img").length;
 	
 	if (line['x1']) {
 		x1 = line['x'];
 	}
 	else {
-		width = $('#'+line['node_begin']).width();
+		if (have_node_begin_img) {
-		x1 = parseInt($('#'+line['node_begin']).css (selector + 'left')) + (width / 2);
+			width = $('#' + line['node_begin'] + " img").width();
+		}
+		else {
+			width = $('#' + line['node_begin']).width();
+		}
+		x1 = parseInt($('#' + line['node_begin']).css (selector + 'left')) + (width / 2);
 	}
 	
 	if (line['y1']) {
@@ -50,20 +56,25 @@ function draw_line (line, id_div) {
 	}
 	else {
 		if (have_node_begin_img) {
-			height = parseInt($('#'+line['node_begin'] + " img").css('height'));
+			height = parseInt($('#' + line['node_begin'] + " img").css('height'));
 		}
 		else {
-			height = $('#'+line['node_begin']).height();
+			height = $('#' + line['node_begin']).height();
 		}
-		y1 = parseInt($('#'+line['node_begin']).css (selector + 'top')) + (height / 2);
+		y1 = parseInt($('#' + line['node_begin']).css (selector + 'top')) + (height / 2);
 	}
 	
 	if (line['x2']) {
 		x2 = line['x2'];
 	}
 	else {
-		width = $('#'+line['node_end']).width();
+		if (have_node_end_img) {
-		x2 = parseInt($('#'+line['node_end']).css (selector + 'left')) + (width / 2);
+			width = $('#' + line['node_end'] + " img").width();
+		}
+		else {
+			width = $('#' + line['node_end']).width();
+		}
+		x2 = parseInt($('#' + line['node_end']).css (selector + 'left')) + (width / 2);
 	}
 	
 	if (line['y2']) {
@@ -71,12 +82,12 @@ function draw_line (line, id_div) {
 	}
 	else {
 		if (have_node_end_img) {
-			height = parseInt($('#'+line['node_end'] + " img").css('height'));
+			height = parseInt($('#' + line['node_end'] + " img").css('height'));
 		}
 		else {
-			height = $('#'+line['node_end']).height();
+			height = $('#' + line['node_end']).height();
 		}
-		y2 = parseInt($('#'+line['node_end']).css (selector + 'top')) + (height / 2);
+		y2 = parseInt($('#' + line['node_end']).css (selector + 'top')) + (height / 2);
 	}
 	
 	
@@ -143,4 +154,21 @@ function draw_user_lines_read() {
 	}
 	
 	obj_js_user_lines.paint();
+}
+
+function center_labels() {
+	jQuery.each($(".item"), function(i, item) {
+		
+		if ($(item).width() > $("img", item).width()) {
+			dif_width = $(item).width() - $("img", item).width();
+			
+			x = parseInt($(item).css("left"));
+			
+			x = x - (dif_width / 2)
+			
+			$(item)
+				.css("left", x + "px")
+				.css("text-align", "center");
+		}
+	});
 }