Multiple erasure and displacement of elements in visual console - #624

This commit is contained in:
enriquecd 2017-07-05 19:08:40 +02:00
parent ca45db3ba3
commit ce35af3e61
1 changed files with 147 additions and 9 deletions

View File

@ -15,6 +15,7 @@ var creationItem = null;
var is_opened_palette = false;
var idItem = 0;
var selectedItem = null;
var selectedItems = null;
var lines = Array();
var user_lines = Array();
var toolbuttonActive = null;
@ -1518,7 +1519,6 @@ function set_static_graph_status(idElement, image, status) {
data: parameter,
success: function (data) {
set_static_graph_status(idElement, image, data);
if($('#'+idElement+' table').css('float') == 'right' || $('#'+idElement+ ' table').css('float') == 'left'){
$('#'+idElement+ ' img').css('margin-top', parseInt($('#'+idElement).css('height'))/2 - parseInt($('#'+idElement+ ' img').css('height'))/2);
}
@ -1554,7 +1554,6 @@ function set_static_graph_status(idElement, image, status) {
suffix = ".png";
break;
}
set_image("image", idElement, image + suffix);
}
@ -2025,6 +2024,10 @@ function createItem(type, values, id_data) {
if($('#preview > img')[0].naturalWidth > 150 || $('#preview > img')[0].naturalHeight > 150){
$image.attr('width', '70')
.attr('height', '70');
}
else{
$image.attr('width', $('#preview > img')[0].naturalWidth)
.attr('height', $('#preview > img')[0].naturalHeight);
}
}
else {
@ -2761,10 +2764,19 @@ function activeToolboxButton(id, active) {
}
function click_delete_item_callback() {
activeToolboxButton('edit_item', false);
deleteDB(idItem);
idItem = 0;
selectedItem = null;
if(selectedItems == null){
activeToolboxButton('edit_item', false);
deleteDB(idItem);
idItem = 0;
selectedItem = null;
}
else{
idItem = 0;
selectedItem = null;
selectedItems.forEach( function(valor, indice, array) {
deleteDB(valor);
});
}
}
/**
@ -2783,6 +2795,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);
@ -2891,6 +2904,62 @@ function eventsItems(drag) {
enterprise_click_item_callback(divParent);
}
}
if(!event.ctrlKey){
firstItem = event.currentTarget.id;
selectedItems = null;
selectedItems = Array();
selectedItems.push(event.currentTarget.id);
}
else{
selectedItem = null;
unselectAll();
if(selectedItems.indexOf(event.currentTarget.id) > -1){
$('#'+event.currentTarget.id).css('left', '+=1');
$('#'+event.currentTarget.id).css('top', '+=1');
$('#'+event.currentTarget.id).css('border', '');
$('#'+event.currentTarget.id).attr('withborder') == 'false';
selectedItems.splice(selectedItems.indexOf(event.currentTarget.id),1);
}
else{
$('#'+event.currentTarget.id).css('left', '-=1');
$('#'+event.currentTarget.id).css('top', '-=1');
$('#'+event.currentTarget.id).css('border', '1px dotted rgb(0, 0, 255)');
$('#'+event.currentTarget.id).attr('withborder') == 'true';
selectedItems.push(event.currentTarget.id);
}
selectedItems.forEach( function(valor, indice, array) {
if(selectedItems.indexOf(valor) > -1 && $('#'+valor).css('border') != '1px dotted rgb(0, 0, 255)'){
// $('#'+valor).css('left', '-=1');
// $('#'+valor).css('top', '-=1');
$('#'+valor).css('border', '1px dotted rgb(0, 0, 255)');
$('#'+valor).attr('withborder') == 'true';
}
});
$('#'+firstItem).css('left', '-=1');
$('#'+firstItem).css('top', '-=1');
firstItem = null;
}
});
//Double click in the item
@ -2907,8 +2976,9 @@ function eventsItems(drag) {
$(".item").draggable({containment: "#background", grid: drag});
$('.item').bind('dragstart', function(event, ui) {
event.stopPropagation();
if(selectedItems == null || selectedItems.length < 2){
event.stopPropagation();
if (!is_opened_palette) {
unselectAll();
$(event.target).css('border', '1px blue dotted');
@ -2974,6 +3044,7 @@ function eventsItems(drag) {
break;
default:
idItem = $(event.target).attr('id');
break;
}
activeToolboxButton('copy_item', true);
@ -2981,10 +3052,17 @@ function eventsItems(drag) {
activeToolboxButton('delete_item', true);
}
}
}
else{
console.log('Dragstart');
multiDragStart(event);
}
});
$('.item').bind('dragstop', function(event, ui) {
if(selectedItems == null || selectedItems.length < 2){
event.stopPropagation();
var values = {};
@ -2992,9 +3070,16 @@ function eventsItems(drag) {
values['mov_top'] = ui.position.top;
updateDB(selectedItem, idItem, values, 'dragstop');
}
else{
console.log('Dragstop');
multidragStop(event);
}
});
$('.item').bind('drag', function(event, ui) {
if(selectedItems == null || selectedItems.length < 2){
if ($(event.target).hasClass('handler_start')) {
selectedItem = 'handler_start';
}
@ -3075,6 +3160,11 @@ function eventsItems(drag) {
draw_user_lines("", 0, 0, 0 , 0, 0, true);
break;
}
}
else{
console.log('Drag');
}
});
}
@ -3140,6 +3230,8 @@ function eventsBackground() {
// Event click for background
$("#background").click(function(event) {
selectedItems = null;
selectedItems = Array();
event.stopPropagation();
if (!is_opened_palette) {
unselectAll();
@ -3510,3 +3602,49 @@ function showGrid() {
eventsItems();
}
}
function multiDragStart(event){
multiDragMouse(event);
}
function multidragStop(event){
$('#background').off("mousemove");
values = [];
selectedItems.forEach( function(valor, indice, array) {
$('#'+valor).css('left','+=1');
$('#'+valor).css('top','+=1');
classItem = $('#'+valor).attr('class').replace(/item|ui-draggable|ui-draggable-dragging|-dragging/g, '').trim();
values['mov_left'] = parseInt($('#'+valor).css('left'));
values['mov_top'] = parseInt($('#'+valor).css('top'));
updateDB(classItem, valor, values,'dragstop');
});
}
function multiDragMouse(eventDrag){
var preX = [];
var preY = [];
selectedItems.forEach( function(valor, indice, array) {
preX[indice] = $('#'+valor).css('left');
preY[indice] = $('#'+valor).css('top');
});
$('#background').on('mousemove',function(event){
var moveDiffX = event.clientX - eventDrag.clientX;
var moveDiffY = event.clientY - eventDrag.clientY;
selectedItems.forEach( function(valor, indice, array) {
if(!(parseInt($('#'+valor).css('left')) < 0 && parseInt(moveDiffX)+parseInt(preX[indice]) < 0) &&
!(parseInt($('#'+valor).css('left')) + parseInt($('#'+valor).css('width')) > parseInt($('#background').css('width')) && parseInt(moveDiffX+preX[indice]) > 0)){
$('#'+valor).css('left',parseInt(moveDiffX)+parseInt(preX[indice])+'px');
}
if(!(parseInt($('#'+valor).css('top')) < 0 && parseInt(moveDiffY)+parseInt(preY[indice]) < 0) &&
!(parseInt($('#'+valor).css('top')) + parseInt($('#'+valor).css('height')) > parseInt($('#background').css('height')) && parseInt(moveDiffY+preY[indice]) > 0)){
$('#'+valor).css('top',parseInt(moveDiffY)+parseInt(preY[indice])+'px');
}
});
});
}