Working in the new elements for the visualmap. Ticket #1478
This commit is contained in:
mdtrooper
parent
e63886e1e7
commit
7edad2cb1d
|
|
@ -16,12 +16,16 @@ var is_opened_palette = false;
|
|||
var idItem = 0;
|
||||
var selectedItem = null;
|
||||
var lines = Array();
|
||||
var user_lines = Array();
|
||||
var toolbuttonActive = null;
|
||||
var autosave = true;
|
||||
var list_actions_pending_save = [];
|
||||
var temp_id_item = 0;
|
||||
var parents = {};
|
||||
|
||||
var obj_js_user_lines = null;
|
||||
|
||||
|
||||
var SIZE_GRID = 16; //Const the size (for width and height) of grid.
|
||||
|
||||
function toggle_advance_options_palette(close) {
|
||||
|
|
@ -53,6 +57,8 @@ function visual_map_main() {
|
|||
}
|
||||
);
|
||||
|
||||
obj_js_user_lines = new jsGraphics("background");
|
||||
|
||||
$("input[name='radio_choice']").on('change', function() {
|
||||
var radio_value = $("input[name='radio_choice']:checked").val();
|
||||
|
||||
|
|
@ -260,6 +266,9 @@ function readFields() {
|
|||
values['border_width'] = parseInt(
|
||||
$("input[name='border_width']").val());
|
||||
values['fill_color'] = $("input[name='fill_color']").val();
|
||||
values['line_width'] = parseInt(
|
||||
$("input[name='line_width']").val());
|
||||
values['line_color'] = $("input[name='line_color']").val();
|
||||
|
||||
if (metaconsole != 0) {
|
||||
values['metaconsole'] = 1;
|
||||
|
|
@ -361,11 +370,133 @@ function create_button_palette_callback() {
|
|||
}
|
||||
|
||||
if (validate) {
|
||||
insertDB(creationItem, values);
|
||||
switch (creationItem) {
|
||||
case 'line_item':
|
||||
create_line('step_1', values);
|
||||
break;
|
||||
default:
|
||||
insertDB(creationItem, values);
|
||||
break;
|
||||
}
|
||||
|
||||
|
||||
toggle_item_palette();
|
||||
}
|
||||
}
|
||||
|
||||
function draw_user_lines(color, thickness, start_x, start_y , end_x, end_y) {
|
||||
|
||||
obj_js_user_lines.clear();
|
||||
|
||||
// Draw the previous lines
|
||||
for (iterator = 0; iterator < user_lines.length; iterator++) {
|
||||
|
||||
obj_js_user_lines.setStroke(user_lines[iterator]['line_width']);
|
||||
obj_js_user_lines.setColor(user_lines[iterator]['line_color']);
|
||||
obj_js_user_lines.drawLine(
|
||||
user_lines[iterator]['start_x'],
|
||||
user_lines[iterator]['start_y'],
|
||||
user_lines[iterator]['end_x'],
|
||||
user_lines[iterator]['end_y']);
|
||||
|
||||
}
|
||||
|
||||
obj_js_user_lines.setStroke(thickness);
|
||||
obj_js_user_lines.setColor(color);
|
||||
obj_js_user_lines.drawLine(start_x, start_y, end_x, end_y);
|
||||
|
||||
obj_js_user_lines.paint();
|
||||
}
|
||||
|
||||
function create_line(step, values) {
|
||||
|
||||
$('.item').unbind('click');
|
||||
$('.item').unbind('dblclick');
|
||||
$('.item').unbind('dragstop');
|
||||
$('.item').unbind('dragstart');
|
||||
|
||||
$('#background').unbind('click');
|
||||
$('#background').unbind('dblclick');
|
||||
|
||||
|
||||
switch (step) {
|
||||
case 'step_1':
|
||||
$("#background *").css("cursor", "crosshair");
|
||||
|
||||
|
||||
|
||||
$("#background *")
|
||||
.on('mousemove', function(e) {
|
||||
$('#div_step_1').css({
|
||||
left: e.pageX,
|
||||
top: e.pageY
|
||||
});
|
||||
$('#div_step_1').show();
|
||||
|
||||
// 2 for the black border of background
|
||||
values['line_start_x'] =
|
||||
e.pageX - $("#background").position().left - 2;
|
||||
values['line_start_y'] =
|
||||
e.pageY - $("#background").position().top - 2;
|
||||
|
||||
});
|
||||
|
||||
|
||||
$("#background *")
|
||||
.on('click', function(e) {
|
||||
create_line('step_2', values);
|
||||
});
|
||||
|
||||
break;
|
||||
case 'step_2':
|
||||
$('#div_step_1').hide();
|
||||
$("#background *").off('mousemove');
|
||||
$("#background *").off('click');
|
||||
|
||||
|
||||
$("#background *")
|
||||
.on('mousemove', function(e) {
|
||||
$('#div_step_2').css({
|
||||
left: e.pageX,
|
||||
top: e.pageY
|
||||
});
|
||||
$('#div_step_2').show();
|
||||
|
||||
// 2 for the black border of background
|
||||
values['line_end_x'] =
|
||||
e.pageX - $("#background").position().left - 2;
|
||||
values['line_end_y'] =
|
||||
e.pageY - $("#background").position().top - 2;
|
||||
|
||||
draw_user_lines(
|
||||
values['line_color'],
|
||||
values['line_width'],
|
||||
values['line_start_x'],
|
||||
values['line_start_y'],
|
||||
values['line_end_x'] - 3,
|
||||
values['line_end_y'] - 3);
|
||||
});
|
||||
|
||||
$("#background *")
|
||||
.on('click', function(e) {
|
||||
create_line('step_3', values);
|
||||
});
|
||||
break;
|
||||
case 'step_3':
|
||||
$('#div_step_2').hide();
|
||||
$("#background *").off('mousemove');
|
||||
$("#background *").off('click');
|
||||
|
||||
$("#background *").css("cursor", "");
|
||||
|
||||
insertDB("line_item", values);
|
||||
|
||||
eventsItems();
|
||||
eventsBackground();
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
function toggle_item_palette() {
|
||||
var item = null;
|
||||
|
||||
|
|
@ -641,6 +772,14 @@ function loadFieldsFromDB(item) {
|
|||
$("#fill_color_row .ColorPickerDivSample")
|
||||
.css('background-color', val);
|
||||
}
|
||||
if (key == 'line_width')
|
||||
$("input[name='line_width']").val(val);
|
||||
if (key == 'line_color') {
|
||||
$("input[name='line_color']").val(val);
|
||||
$("#line_color_row .ColorPickerDivSample")
|
||||
.css('background-color', val);
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
if (data.type == 1) {
|
||||
|
|
@ -813,6 +952,16 @@ function hiddenFields(item) {
|
|||
$("#fill_color_row").css('display', 'none');
|
||||
$("#fill_color_row." + item).css('display', '');
|
||||
|
||||
$("#line_color_row").css('display', 'none');
|
||||
$("#line_color_row." + item).css('display', '');
|
||||
|
||||
$("#line_width_row").css('display', 'none');
|
||||
$("#line_width_row." + item).css('display', '');
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
$("input[name='radio_choice']").trigger('change');
|
||||
|
||||
if (typeof(enterprise_hiddenFields) == 'function') {
|
||||
|
|
@ -852,6 +1001,8 @@ function cleanFields(item) {
|
|||
$("input[name='border_color']").val('#000000');
|
||||
$("input[name='border_width']").val(3);
|
||||
$("input[name='fill_color']").val('#ffffff');
|
||||
$("input[name='line_width']").val(3);
|
||||
$("input[name='line_color']").val('#000000');
|
||||
|
||||
|
||||
$("#preview").empty();
|
||||
|
|
@ -1447,6 +1598,21 @@ function insertDB(type, values) {
|
|||
addItemSelectParents(id, data['text']);
|
||||
//Reload all events for the item and new item.
|
||||
eventsItems();
|
||||
|
||||
switch (type) {
|
||||
case 'line_item':
|
||||
var line = {
|
||||
"id": id,
|
||||
"start_x": values['line_start_x'],
|
||||
"start_y": values['line_start_y'],
|
||||
"end_x": values['line_end_x'],
|
||||
"end_y": values['line_end_y'],
|
||||
"line_width": values['line_width'],
|
||||
"line_color": values['line_color']};
|
||||
|
||||
user_lines.push(line);
|
||||
break;
|
||||
}
|
||||
}
|
||||
else {
|
||||
//TODO
|
||||
|
|
@ -1822,6 +1988,7 @@ function eventsItems(drag) {
|
|||
//$(".item").resizable(); //Disable but run in ff and in the waste (aka micro$oft IE) show ungly borders
|
||||
|
||||
$('.item').bind('click', function(event, ui) {
|
||||
|
||||
event.stopPropagation();
|
||||
if (!is_opened_palette) {
|
||||
var divParent = $(event.target);
|
||||
|
|
@ -1913,6 +2080,7 @@ function eventsItems(drag) {
|
|||
|
||||
//Double click in the item
|
||||
$('.item').bind('dblclick', function(event, ui) {
|
||||
|
||||
event.stopPropagation();
|
||||
if ((!is_opened_palette) && (autosave)) {
|
||||
toggle_item_palette();
|
||||
|
|
@ -1924,6 +2092,7 @@ function eventsItems(drag) {
|
|||
$(".item").draggable({containment: "#background", grid: drag});
|
||||
|
||||
$('.item').bind('dragstart', function(event, ui) {
|
||||
|
||||
event.stopPropagation();
|
||||
if (!is_opened_palette) {
|
||||
unselectAll();
|
||||
|
|
@ -1973,6 +2142,7 @@ function eventsItems(drag) {
|
|||
});
|
||||
|
||||
$('.item').bind('dragstop', function(event, ui) {
|
||||
|
||||
event.stopPropagation();
|
||||
|
||||
var values = {};
|
||||
|
|
@ -2109,6 +2279,10 @@ function click_button_toolbox(id) {
|
|||
toolbuttonActive = creationItem = 'box_item';
|
||||
toggle_item_palette();
|
||||
break;
|
||||
case 'line_item':
|
||||
toolbuttonActive = creationItem = 'line_item';
|
||||
toggle_item_palette();
|
||||
break;
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 343 B |
Binary file not shown.
|
After Width: | Height: | Size: 331 B |
|
|
@ -78,6 +78,12 @@ $border_color = get_parameter('border_color', '');
|
|||
$fill_color = get_parameter('fill_color', '');
|
||||
$width_box = get_parameter('width_box', 0);
|
||||
$height_box = get_parameter('height_box', 0);
|
||||
$line_start_x = (int)get_parameter('line_start_x', 0);
|
||||
$line_start_y = (int)get_parameter('line_start_y', 0);
|
||||
$line_end_x = (int)get_parameter('line_end_x', 0);
|
||||
$line_end_y = (int)get_parameter('line_end_y', 0);
|
||||
$line_width = (int)get_parameter('line_width', 0);
|
||||
$line_color = get_parameter('line_color', '');
|
||||
|
||||
$get_element_status = get_parameter('get_element_status', 0);
|
||||
$get_image_path_status = get_parameter('get_image_path_status', 0);
|
||||
|
|
@ -648,6 +654,15 @@ switch ($action) {
|
|||
$values['id_custom_graph'] = $id_custom_graph;
|
||||
|
||||
switch ($type) {
|
||||
case 'line_item':
|
||||
$values['type'] = LINE_ITEM;
|
||||
$values['border_width'] = $line_width;
|
||||
$values['border_color'] = $line_color;
|
||||
$values['pos_x'] = $line_start_x;
|
||||
$values['pos_y'] = $line_start_y;
|
||||
$values['width'] = $line_end_x;
|
||||
$values['height'] = $line_end_y;
|
||||
break;
|
||||
case 'box_item':
|
||||
$values['type'] = BOX_ITEM;
|
||||
$values['border_width'] = $border_width;
|
||||
|
|
|
|||
|
|
@ -191,6 +191,7 @@ define('PERCENTILE_BUBBLE', 9);
|
|||
define('SERVICE', 10); //Enterprise Item.
|
||||
define('GROUP_ITEM', 11);
|
||||
define('BOX_ITEM', 12);
|
||||
define('LINE_ITEM', 13);
|
||||
//Some styles
|
||||
define('MIN_WIDTH', 300);
|
||||
define('MIN_HEIGHT', 120);
|
||||
|
|
|
|||
|
|
@ -1902,6 +1902,10 @@ function visual_map_create_internal_name_item($label = null, $type, $image, $age
|
|||
if (empty($label))
|
||||
{
|
||||
switch ($type) {
|
||||
case 'box_item':
|
||||
case BOX_ITEM:
|
||||
$text = __('Box');
|
||||
break;
|
||||
case 'module_graph':
|
||||
case MODULE_GRAPH:
|
||||
$text = __('Module graph');
|
||||
|
|
@ -2029,10 +2033,13 @@ function visual_map_type_in_js($type) {
|
|||
break;
|
||||
case GROUP_ITEM:
|
||||
return 'group_item';
|
||||
break;
|
||||
break;
|
||||
case BOX_ITEM:
|
||||
return 'box_item';
|
||||
break;
|
||||
break;
|
||||
case LINE_ITEM:
|
||||
return 'line_item';
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -58,7 +58,8 @@ function visual_map_editor_print_item_palette($visualConsole_id, $background) {
|
|||
'label' => __('Label'),
|
||||
'icon' => __('Icon'),
|
||||
'group_item' => __('Group'),
|
||||
'box_item' => __('Box'));
|
||||
'box_item' => __('Box'),
|
||||
'line_item' => __('Line'));
|
||||
|
||||
if (enterprise_installed()) {
|
||||
enterprise_visual_map_editor_add_title_palette($titles);
|
||||
|
|
@ -76,35 +77,62 @@ function visual_map_editor_print_item_palette($visualConsole_id, $background) {
|
|||
<?php
|
||||
$form_items = array();
|
||||
|
||||
$form_items['line_width_row'] = array();
|
||||
$form_items['line_width_row']['items'] = array('datos', 'line_item');
|
||||
$form_items['line_width_row']['html'] = '<td align="left">' . __('Width') . '</td>
|
||||
<td align="left">' .
|
||||
html_print_input_text('line_width', 3, '', 3, 5, true) .
|
||||
'</td>';
|
||||
|
||||
|
||||
$form_items['line_color_row'] = array();
|
||||
$form_items['line_color_row']['items'] = array('datos', 'line_item');
|
||||
$form_items['line_color_row']['html'] =
|
||||
'<td align="left" valign="top" style="">' .
|
||||
__('Border color') .
|
||||
'</td>' .
|
||||
'<td align="left" style="">' .
|
||||
html_print_input_text_extended ('line_color',
|
||||
'#000000', 'text-line_color', '', 7, 7, false,
|
||||
'', 'class="line_color"', true) .
|
||||
'</td>';
|
||||
|
||||
|
||||
$form_items['box_size_row'] = array();
|
||||
$form_items['box_size_row']['items'] = array('box_item');
|
||||
$form_items['box_size_row']['html'] = '<td align="left">' . __('Size') . '</td>
|
||||
$form_items['box_size_row']['items'] = array('datos', 'box_item');
|
||||
$form_items['box_size_row']['html'] =
|
||||
'<td align="left">' . __('Size') . '</td>
|
||||
<td align="left">' .
|
||||
html_print_input_text('width_box', 300, '', 3, 5, true) .
|
||||
' X ' .
|
||||
html_print_input_text('height_box', 180, '', 3, 5, true) .
|
||||
'</td>';
|
||||
|
||||
|
||||
$form_items['border_color_row'] = array();
|
||||
$form_items['border_color_row']['items'] = array('box_item');
|
||||
$form_items['border_color_row']['items'] = array('datos', 'box_item');
|
||||
$form_items['border_color_row']['html'] =
|
||||
'<td align="left" valign="top" style="">' . __('Border color') . '</td>' .
|
||||
'<td align="left" valign="top" style="">' .
|
||||
__('Border color') .
|
||||
'</td>' .
|
||||
'<td align="left" style="">' .
|
||||
html_print_input_text_extended ('border_color',
|
||||
'#000000', 'text-border_color', '', 7, 7, false, '',
|
||||
'class="border_color"', true) .
|
||||
html_print_input_text_extended ('border_color',
|
||||
'#000000', 'text-border_color', '', 7, 7, false,
|
||||
'', 'class="border_color"', true) .
|
||||
'</td>';
|
||||
|
||||
|
||||
$form_items['border_width_row'] = array();
|
||||
$form_items['border_width_row']['items'] = array('box_item');
|
||||
$form_items['border_width_row']['html'] = '<td align="left">' . __('Border width') . '</td>
|
||||
$form_items['border_width_row']['items'] = array('datos', 'box_item');
|
||||
$form_items['border_width_row']['html'] =
|
||||
'<td align="left">' . __('Border width') . '</td>
|
||||
<td align="left">' .
|
||||
html_print_input_text('border_width', 3, '', 3, 5, true) .
|
||||
'</td>';
|
||||
|
||||
|
||||
$form_items['fill_color_row'] = array();
|
||||
$form_items['fill_color_row']['items'] = array('box_item');
|
||||
$form_items['fill_color_row']['items'] = array('datos', 'box_item');
|
||||
$form_items['fill_color_row']['html'] =
|
||||
'<td align="left" valign="top" style="">' . __('Fill color') . '</td>' .
|
||||
'<td align="left" style="">' .
|
||||
|
|
@ -466,8 +494,23 @@ function visual_map_editor_print_item_palette($visualConsole_id, $background) {
|
|||
</table>
|
||||
<?php
|
||||
//------------------------------------------------------------------------------
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
echo '</div>';
|
||||
|
||||
echo '<div id="div_step_1" class="forced_title_layer"
|
||||
style="display: none; position: absolute; z-index: 99;">' .
|
||||
__('Click start point<br />of the line') .
|
||||
'</div>';
|
||||
|
||||
echo '<div id="div_step_2" class="forced_title_layer"
|
||||
style="display: none; position: absolute; z-index: 99;">' .
|
||||
__('Click end point<br />of the line') .
|
||||
'</div>';
|
||||
|
||||
ui_require_css_file ('color-picker');
|
||||
|
||||
ui_require_jquery_file ('colorpicker');
|
||||
|
|
@ -476,6 +519,7 @@ function visual_map_editor_print_item_palette($visualConsole_id, $background) {
|
|||
$(document).ready (function () {
|
||||
$(".border_color").attachColorPicker();
|
||||
$(".fill_color").attachColorPicker();
|
||||
$(".line_color").attachColorPicker();
|
||||
});
|
||||
</script>
|
||||
<?php
|
||||
|
|
@ -494,6 +538,7 @@ function visual_map_editor_print_toolbox() {
|
|||
visual_map_print_button_editor('icon', __('Icon'), 'left', false, 'icon_min', true);
|
||||
visual_map_print_button_editor('group_item', __('Group'), 'left', false, 'group_item_min', true);
|
||||
visual_map_print_button_editor('box_item', __('Box'), 'left', false, 'box_item_min', true);
|
||||
visual_map_print_button_editor('line_item', __('Line'), 'left', false, 'line_item_min', true);
|
||||
|
||||
enterprise_hook("enterprise_visual_map_editor_print_toolbox");
|
||||
|
||||
|
|
|
|||
|
|
@ -764,6 +764,12 @@ input.box_item {
|
|||
input.box_item[disabled] {
|
||||
background: #fefefe url(../../images/box_item.disabled.png) no-repeat center !important;
|
||||
}
|
||||
input.line_item {
|
||||
background: #fefefe url(../../images/line_item.png) no-repeat center !important;
|
||||
}
|
||||
input.line_item[disabled] {
|
||||
background: #fefefe url(../../images/line_item.disabled.png) no-repeat center !important;
|
||||
}
|
||||
input.copy_item {
|
||||
background: #fefefe url(../../images/copy_visualmap.png) no-repeat center !important;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue