Skip to content

Commit

Permalink
[VSPC-193] Fixed space link, module link and external link placement …
Browse files Browse the repository at this point in the history 
…issues (#288)

* [VSPC-116] Fixed space link and module link placement issues

* [VSPC-193] Fixed space link and module link placement issues

* [VSPC-193] Fixed external link placement issues

* [VSPC-193] Fixed issue for space, module and external links.

When trying to create a new link and cancelling and trying to modify an existing link, the new link was retained and positioned at the same point as the existing link.

Co-authored-by: Tushar Anand <[email protected]>
  • Loading branch information
@tusanand
tusanand and Tushar Anand authored Apr 11, 2022
1 parent 455245b commit ea0e3cb
Showing 1 changed file with 57 additions and 33 deletions.
90 changes: 57 additions & 33 deletions vspace/src/main/webapp/WEB-INF/views/staff/spaces/space.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,8 +27,8 @@
var selectedExternalLinkId;
const displaceUnpublishedOnX = 25
const displaceUnpublishedOnY = 13
const displaceUnpublishedOnXModal = 75
const displaceUnpublishedOnYModal = 35
const displaceUnpublishedOnXModal = 50
const displaceUnpublishedOnYModal = 13
const displaceLableOnX = 10
const displaceLableOnY = 35

Expand Down Expand Up @@ -261,6 +261,7 @@
function showSpaceLink(spaceLink, show, x, y) {
$("#space_label").remove();
$("#link").remove();
$("#undefined").remove();
var posX = $("#bgImage").position().left;
var posY = $("#bgImage").position().top;
var space_label = $("<p id='space_label' class='tooltiptext'></p>");
Expand All @@ -277,7 +278,7 @@
'transform': 'rotate(0deg)',
'color': 'grey'
});
link = $('<span data-link-id="' + spaceLink["id"] + '" class="spaceLink-' + spaceLink["id"] + '"><div id="link" class="Info_cz_Class"><svg class="Ellipse_8_c ellipse_class"><ellipse fill="rgba(222,222,222,1)" class="Ellipse_8_c_Class" rx="14.5" ry="14.5" cx="14.5" cy="14.5"></ellipse></svg><svg class="Ellipse_10_c ellipse_class"><ellipse fill="rgba(240,240,240,1)" class="Ellipse_10_c_Class" rx="12.5" ry="12.5" cx="12.5" cy="12.5"></ellipse></svg><svg class="Ellipse_9_c ellipse_class"><ellipse fill="rgba(255,255,255,1)" class="Ellipse_9_c_Class" rx="10.5" ry="10.5" cx="10.5" cy="10.5"></ellipse></svg><span class="icon-move Icon_awesome_info_staff_c "></span></div></span>');
link = $('<span id="' + spaceLink["id"] +'" data-link-id="' + spaceLink["id"] + '" class="spaceLink-' + spaceLink["id"] + '"><div id="link" class="Info_cz_Class"><svg class="Ellipse_8_c ellipse_class"><ellipse fill="rgba(222,222,222,1)" class="Ellipse_8_c_Class" rx="14.5" ry="14.5" cx="14.5" cy="14.5"></ellipse></svg><svg class="Ellipse_10_c ellipse_class"><ellipse fill="rgba(240,240,240,1)" class="Ellipse_10_c_Class" rx="12.5" ry="12.5" cx="12.5" cy="12.5"></ellipse></svg><svg class="Ellipse_9_c ellipse_class"><ellipse fill="rgba(255,255,255,1)" class="Ellipse_9_c_Class" rx="10.5" ry="10.5" cx="10.5" cy="10.5"></ellipse></svg><span class="icon-move Icon_awesome_info_staff_c "></span></div></span>');
}
if(show) {
var unpublishedSpaceElement;
Expand All @@ -290,12 +291,14 @@
unpublishedSpaceElement.css('font-size', "24px");
}else{
$('[data-link-id="unpublished-' + spaceLink["id"] + '"]').remove();
}
}
link.css('top', spaceLink["y"] + posY);
} else {
link.css('top', spaceLink["y"]);
}

link.css('position', 'absolute');
link.css('left', spaceLink["x"] + posX);
link.css('top', spaceLink["y"] + posY);
link.css('color', 'rgba(128,128,128,1)');
link.css('transform', 'rotate(' +$('#spaceLinkRotation').val()+ 'deg)');
link.css('font-size', "12px");
Expand Down Expand Up @@ -323,6 +326,7 @@
function showModuleLink(moduleLink, show, x, y) {
$("#module_label").remove();
$("#link").remove();
$("#undefined").remove();
var posX = $("#bgImage").position().left;
var posY = $("#bgImage").position().top;
var module_label = $("<p id='module_label' class='tooltiptext'></p>");
Expand All @@ -338,18 +342,18 @@
'position': 'absolute',
'font-size': "10px",
'transform': 'rotate(0deg)',
'left': x + posX - displaceLableOnX,
'top': y + posY + displaceLableOnY,
'color': 'red'
});
link = $('<span data-link-id="' + moduleLink["id"] + '" class="moduleLink-' + moduleLink["id"] + '"><div id="link" class="Info_cz_Class"><svg class="Ellipse_8_c ellipse_class"><ellipse fill="rgba(222,222,222,1)" class="Ellipse_8_c_Class" rx="14.5" ry="14.5" cx="14.5" cy="14.5"></ellipse></svg><svg class="Ellipse_10_c ellipse_class"><ellipse fill="rgba(240,240,240,1)" class="Ellipse_10_c_Class" rx="12.5" ry="12.5" cx="12.5" cy="12.5"></ellipse></svg><svg class="Ellipse_9_c ellipse_class"><ellipse fill="rgba(255,255,255,1)" class="Ellipse_9_c_Class" rx="10.5" ry="10.5" cx="10.5" cy="10.5"></ellipse></svg><span class="icon-info Icon_awesome_info_staff_m"></span></div></span>');
link = $('<span id="' + moduleLink["id"] +'" data-link-id="' + moduleLink["id"] + '" class="moduleLink-' + moduleLink["id"] + '"><div id="link" class="Info_cz_Class"><svg class="Ellipse_8_c ellipse_class"><ellipse fill="rgba(222,222,222,1)" class="Ellipse_8_c_Class" rx="14.5" ry="14.5" cx="14.5" cy="14.5"></ellipse></svg><svg class="Ellipse_10_c ellipse_class"><ellipse fill="rgba(240,240,240,1)" class="Ellipse_10_c_Class" rx="12.5" ry="12.5" cx="12.5" cy="12.5"></ellipse></svg><svg class="Ellipse_9_c ellipse_class"><ellipse fill="rgba(255,255,255,1)" class="Ellipse_9_c_Class" rx="10.5" ry="10.5" cx="10.5" cy="10.5"></ellipse></svg><span class="icon-info Icon_awesome_info_staff_m"></span></div></span>');
}
if(show) {
link.find("div").css('fill', 'red');
link.css('top', moduleLink["y"] + posY);
} else {
link.css('top', moduleLink["y"]);
}
link.css('position', 'absolute');
link.css('left', moduleLink["x"] + posX);
link.css('top', moduleLink["y"] + posY);
link.css('color', 'red');
link.css('transform', 'rotate(' +$('#moduleLinkRotation').val()+ 'deg)');
link.css('font-size', "12px");
Expand Down Expand Up @@ -402,7 +406,7 @@
}
$(selectedUnpublishedIconClass).css({ 'transform': 'rotate(' + parseInt(spaceLink["rotation"]) + 'deg)'});
$(selectedUnpublishedIconClass).css({ 'position': 'absolute'});
$(selectedUnpublishedIconClass).css({ 'left': posX - displaceUnpublishedOnXModal});
$(selectedUnpublishedIconClass).css({ 'left': posX + displaceUnpublishedOnXModal});
$(selectedUnpublishedIconClass).css({ 'top': posY - displaceUnpublishedOnYModal});
updateLinkProperties(selectedLinkClass,selectedLabelClass,spaceLink["rotation"],posX,posY,spaceLink["spaceLinkLabel"]);
}
Expand All @@ -418,12 +422,12 @@
function updateLinkProperties(selectedLinkClass,selectedLabelClass,rotation,x,y,linkLabel, show){
var posX, posY;
if(show) {
posx = $("#main-bgImage").position().left;
posX = $("#main-bgImage").position().left;
posY = $("#main-bgImage").position().top;
}
else{
posX = $("#bgImage").position().left;
posY = $("#bgImage").position().top;
posY = 0
}
$(selectedLinkClass).css({ 'transform': 'rotate(' + rotation + 'deg)'});
$(selectedLinkClass).css({ 'position': 'absolute'});
Expand All @@ -448,6 +452,7 @@
function showExternalLinks(externalLink, show, x, y) {
$("#ext_label").remove();
$("#link").remove();
$("#undefined").remove();
var posX = $("#bgImage").position().left;
var posY = $("#bgImage").position().top;
var ext_label = $("<p id='ext_label' class='tooltiptext'></p>");
Expand All @@ -461,16 +466,19 @@
'position': 'absolute',
'font-size': "12px",
'transform': 'rotate(0deg)',
'left': x + posX - displaceLableOnX,
'top': y + posY + displaceLableOnY,
'color': 'blue'
});
link = $('<span data-link-id="' + externalLink["id"] + '" class="externalLink-' + externalLink["id"] + '"><div id="link" class="Info_cz_Class"><svg class="Ellipse_8_c ellipse_class"><ellipse fill="rgba(222,222,222,1)" class="Ellipse_8_c_Class" rx="14.5" ry="14.5" cx="14.5" cy="14.5"></ellipse></svg><svg class="Ellipse_10_c ellipse_class"><ellipse fill="rgba(240,240,240,1)" class="Ellipse_10_c_Class" rx="12.5" ry="12.5" cx="12.5" cy="12.5"></ellipse></svg><svg class="Ellipse_9_c ellipse_class"><ellipse fill="rgba(255,255,255,1)" class="Ellipse_9_c_Class" rx="10.5" ry="10.5" cx="10.5" cy="10.5"></ellipse></svg><span class="icon-ext-link Icon_awesome_info_staff_e"></span></div></span>');
link = $('<span id="' + externalLink["id"] +'" data-link-id="' + externalLink["id"] + '" class="externalLink-' + externalLink["id"] + '"><div id="link" class="Info_cz_Class"><svg class="Ellipse_8_c ellipse_class"><ellipse fill="rgba(222,222,222,1)" class="Ellipse_8_c_Class" rx="14.5" ry="14.5" cx="14.5" cy="14.5"></ellipse></svg><svg class="Ellipse_10_c ellipse_class"><ellipse fill="rgba(240,240,240,1)" class="Ellipse_10_c_Class" rx="12.5" ry="12.5" cx="12.5" cy="12.5"></ellipse></svg><svg class="Ellipse_9_c ellipse_class"><ellipse fill="rgba(255,255,255,1)" class="Ellipse_9_c_Class" rx="10.5" ry="10.5" cx="10.5" cy="10.5"></ellipse></svg><span class="icon-ext-link Icon_awesome_info_staff_e"></span></div></span>');
}

if(show) {
link.css('top', externalLink["y"] + posY);
} else {
link.css('top', externalLink["y"]);
}

link.css('position', 'absolute');
link.css('left', externalLink["x"] + posX);
link.css('top', externalLink["y"] + posY);
link.css('color', 'blue');
link.css('font-size', "12px");

Expand Down Expand Up @@ -592,7 +600,7 @@
var posX = $(this).position().left;
var posY = $(this).position().top;
storeX = e.pageX - $(this).offset().left;
storeY = e.pageY - $(this).offset().top;
storeY = e.pageY - $(this).offset().top + 25;
showSpaceLinkEdit(editSpaceLinkInfo(),false, storeX,storeY);
});
hideLinkInfoTabs();
Expand Down Expand Up @@ -630,7 +638,7 @@
var posX = $(this).position().left;
var posY = $(this).position().top;
storeX = e.pageX - $(this).offset().left;
storeY = e.pageY - $(this).offset().top;
storeY = e.pageY - $(this).offset().top + 25;
showModuleLinkEdit(editModuleLinkInfo(), false, storeX,storeY);
});
hideLinkInfoTabs();
Expand Down Expand Up @@ -662,7 +670,7 @@
var posX = $(this).position().left;
var posY = $(this).position().top;
storeX = e.pageX - $(this).offset().left;
storeY = e.pageY - $(this).offset().top;
storeY = e.pageY - $(this).offset().top + 25;
showExternalLinkEdit(editExternalLinkInfo(), false, storeX,storeY);
});
hideLinkInfoTabs();
Expand Down Expand Up @@ -711,8 +719,8 @@
var posX = $(this).position().left;
var posY = $(this).position().top;
storeX = e.pageX - $(this).offset().left;
storeY = e.pageY - $(this).offset().top;
showSpaceLink(createSpaceLinkInfo(), false, storeX+$("#space").scrollLeft(), storeY+$("#space").scrollTop());
storeY = e.pageY - $(this).offset().top + 25;
showSpaceLink(createSpaceLinkInfo(), false, storeX, storeY);
});
hideLinkInfoTabs();
displayForms("#createSpaceLinkAlert");
Expand All @@ -730,9 +738,9 @@
var posX = $(this).position().left;
var posY = $(this).position().top;
storeX = e.pageX - $(this).offset().left;
storeY = e.pageY - $(this).offset().top;
storeY = e.pageY - $(this).offset().top + 25;

showModuleLink(createModuleLinkInfo(), false, storeX+$("#space").scrollLeft(), storeY+$("#space").scrollTop());
showModuleLink(createModuleLinkInfo(), false, storeX, storeY);
});
hideLinkInfoTabs();
displayForms("#createModuleLinkAlert");
Expand All @@ -751,9 +759,9 @@
var posX = $(this).position().left
var posY = $(this).position().top;
storeX = e.pageX - $(this).offset().left;
storeY = e.pageY - $(this).offset().top;
storeY = e.pageY - $(this).offset().top + 25;

showExternalLinks(createExternalLinkInfo(), false, storeX+$("#space").scrollLeft(), storeY+$("#space").scrollTop());
showExternalLinks(createExternalLinkInfo(), false, storeX, storeY);
});
hideLinkInfoTabs();
displayForms("#createExternalLinkAlert");
Expand All @@ -771,6 +779,7 @@
$("#createSpaceLinkBtn").click(function(e) {
e.preventDefault();
$('#errorAlert').hide();
$("#space").scrollTop(0);
var label = $("#spaceLinkLabel").val();
var spaceName = $("#linkedSpace option:selected").text();
var type = $("#type option:selected").text();
Expand Down Expand Up @@ -800,8 +809,8 @@
}

$("#spaceLinkX").val(storeX);
$("#spaceLinkY").val(storeY);

$("#spaceLinkY").val(storeY - 25);
var form = $("#createSpaceLinkForm");
var label = $("#spaceLinkLabel").val();
var spaceName = $("#linkedSpace option:selected").text();
Expand Down Expand Up @@ -854,6 +863,7 @@

$("#createModuleLinkBtn").click(function(e) {
e.preventDefault();
$("#space").scrollTop(0);
$('#errorAlert').hide();

if (storeX == undefined || storeY == undefined) {
Expand Down Expand Up @@ -885,7 +895,7 @@
}

$("#moduleLinkX").val(storeX);
$("#moduleLinkY").val(storeY);
$("#moduleLinkY").val(storeY - 25);

var form = $("#createModuleLinkForm");
var formData = new FormData(form[0]);
Expand Down Expand Up @@ -936,9 +946,10 @@
$('#errorAlert').show();
return;
}
$("#space").scrollTop(0);
var linkedModules = $("#moduleLinkIdEdit").val();
$("#moduleLinkXEdit").val(storeX);
$("#moduleLinkYEdit").val(storeY);
$("#moduleLinkYEdit").val(storeY - 25);
var form = $("#editModuleLinkForm");
var formData = new FormData(form[0]);
var moduleLinkInfo = editModuleLinkInfo();
Expand Down Expand Up @@ -984,9 +995,11 @@
$('#errorAlert').show();
return;
}
$("#space").scrollTop(0);
var linkedSpace = $("#spaceLinkIdEdit").val();
$("#spaceLinkXEdit").val(storeX);
$("#spaceLinkYEdit").val(storeY);
$("#spaceLinkYEdit").val(storeY - 25);


var form = $("#editSpaceLinkForm");
var formData = new FormData(form[0]);
Expand Down Expand Up @@ -1028,6 +1041,7 @@

$("#editExternalLinkBtn").click(function(e) {
e.preventDefault();
$("#space").scrollTop(0);
var linkId = $("#externalLinkIdEdit").val();
if (storeX == undefined || storeY == undefined) {
$("#errorMsg").text("Please click on the image to specify where the new link should be located.")
Expand All @@ -1036,7 +1050,7 @@
}
var linkedSpace = $("#externalLinkIdEdit").val();
$("#externalLinkXEdit").val(storeX);
$("#externalLinkYEdit").val(storeY);
$("#externalLinkYEdit").val(storeY - 25);
var form = $("#editExternalLinkForm");
var formData = new FormData(form[0]);
var externalLinkInfo = editExternalLinkInfo();
Expand Down Expand Up @@ -1075,6 +1089,7 @@

$("#createExternalLinkBtn").click(function(e) {
e.preventDefault();
$("#space").scrollTop(0);
var payload = {};

if (storeX == undefined || storeY == undefined) {
Expand Down Expand Up @@ -1106,7 +1121,7 @@
return;
}
$("#externalLinkX").val(storeX);
$("#externalLinkY").val(storeY);
$("#externalLinkY").val(storeY - 25);

var form = $("#createExternalLinkForm");
var formData = new FormData(form[0]);
Expand Down Expand Up @@ -1295,42 +1310,51 @@
storeX = null;
storeY = null;
linkIcon = null;
$("#space").scrollTop(0);
$("#link").remove();

$("#undefined").remove();
$("#space_label").remove();
$("#space").hide();
$("#createSpaceLinkAlert").hide();
$('#errorAlert').hide();
$("#bgImage").off("click");
drawLinks();
});

$(".cancelModuleLinkBtn").click(function() {
storeX = null;
storeY = null;
$("#space").scrollTop(0);
moduleLinkIcon=null;
$("#link").remove();
$("#undefined").remove();
$("#module_label").remove();
$("#space").hide();
$("#createModuleLinkAlert").hide();
$('#errorAlert').hide();
$("#bgImage").off("click");
drawLinks();
});

$(".cancelExternalLinkBtn").click(function() {
storeX = null;
storeY = null;
$("#space").scrollTop(0);
externalLinkIcon=null;
$("#external-link").remove();
$("#undefined").remove();
$("div#link").remove();
$("#external-arrow").remove();
$("#ext_label").remove();
$("#space").hide();
$("#createExternalLinkAlert").hide();
$('#errorAlert').hide();
$("#bgImage").off("click");
drawLinks();
});

$("#cancelBgImgBtn").click(function() {
$("#space").scrollTop(0);
drawLinks();
$("#file").val('');
$("#changeBgImgAlert").hide();
Expand Down

0 comments on commit ea0e3cb

Please sign in to comment.