Skip to content

Commit

Permalink
Merge pull request #1744 from SCADA-LTS/patch/#1707_zindex_migration
Browse files Browse the repository at this point in the history
Patch/#1707 zindex fix
  • Loading branch information
radek2s authored Jun 17, 2021
2 parents c534b7a + 5290fc3 commit d21f2b4
Show file tree
Hide file tree
Showing 5 changed files with 139 additions and 125 deletions.
38 changes: 30 additions & 8 deletions WebContent/WEB-INF/jsp/viewEdit.jsp
Original file line number Diff line number Diff line change
Expand Up @@ -187,16 +187,26 @@
function moveUpComponent(viewComponentId) {
var div = $("c" + viewComponentId);
div.style.zIndex = Number(div.style.zIndex) + 1;
if(div.style.zIndex < 99) {
div.style.zIndex = Number(div.style.zIndex) + 1;
}
ViewDwr.setViewComponentZIndex(div.viewComponentId, Number(div.style.zIndex));
updateZIndexLabel(viewComponentId, div.style.zIndex);
}
function moveDownComponent(viewComponentId) {
var div = $("c" + viewComponentId);
if(div.style.zIndex > 0) {
if(div.style.zIndex > 1) {
div.style.zIndex = div.style.zIndex - 1;
}
ViewDwr.setViewComponentZIndex(div.viewComponentId, Number(div.style.zIndex));
updateZIndexLabel(viewComponentId, div.style.zIndex);
}
function updateZIndexLabel(viewComponentId, value) {
var spanIndex = document.getElementById("c" + viewComponentId + "zindex");
spanIndex.parentNode.parentNode.style.display = "initial";
spanIndex.innerText = Number(value);
}
function positionEditor(compId, editorId) {
Expand Down Expand Up @@ -384,6 +394,12 @@
}
function revealPointControls(viewComponentId) {
showLayer("c" + viewComponentId + "Controls");
var div = $("c" + viewComponentId);
updateZIndexLabel(viewComponentId, div.style.zIndex);
}
function deleteConfirm(){
if(document.getElementById("deleteCheckbox").checked) {
document.getElementById("deleteButton").style.visibility = 'visible';
Expand Down Expand Up @@ -564,7 +580,7 @@
</tr>
</table>

<div id="pointTemplate" onmouseover="showLayer('c'+ getViewComponentId(this) +'Controls');"
<div id="pointTemplate" onmouseover="revealPointControls(getViewComponentId(this))"
onmouseout="hideLayer('c'+ getViewComponentId(this) +'Controls');"
style="position:absolute;left:0px;top:0px;display:none;">
<div id="c_TEMPLATE_Content"><img src="images/icon_comp.png" alt=""/></div>
Expand All @@ -587,6 +603,7 @@
title="viewEdit.deletePointView"/></td></tr>
<tr><td><tag:img png="arrow_up_thin" onclick="moveUpComponent(getViewComponentId(this))"
title="viewEdit.moveUpComponent"/></td></tr>
<tr style="display:none;"><td style="text-align:center;"><span id="c_TEMPLATE_zindex"></span></td></tr>
<tr><td><tag:img png="arrow_down_thin" onclick="moveDownComponent(getViewComponentId(this))"
title="viewEdit.moveDownComponent"/></td></tr>
</table>
Expand All @@ -601,7 +618,7 @@
</div>
</div>

<div id="htmlTemplate" onmouseover="showLayer('c'+ getViewComponentId(this) +'Controls');"
<div id="htmlTemplate" onmouseover="revealPointControls(getViewComponentId(this))"
onmouseout="hideLayer('c'+ getViewComponentId(this) +'Controls');"
style="position:absolute;left:0px;top:0px;display:none;">
<div id="c_TEMPLATE_Content"></div>
Expand All @@ -613,14 +630,15 @@
title="viewEdit.deleteStaticView"/></td></tr>
<tr><td><tag:img png="arrow_up_thin" onclick="moveUpComponent(getViewComponentId(this))"
title="viewEdit.moveUpComponent"/></td></tr>
<tr style="display:none;"><td style="text-align:center;"><span id="c_TEMPLATE_zindex"></span></td></tr>
<tr><td><tag:img png="arrow_down_thin" onclick="moveDownComponent(getViewComponentId(this))"
title="viewEdit.moveDownComponent"/></td></tr>
</table>
</div>
</div>


<div id="imageChartTemplate" onmouseover="showLayer('c'+ getViewComponentId(this) +'Controls');"
<div id="imageChartTemplate" onmouseover="revealPointControls(getViewComponentId(this))"
onmouseout="hideLayer('c'+ getViewComponentId(this) +'Controls');"
style="position:absolute;left:0px;top:0px;display:none;">
<span id="c_TEMPLATE_Content"></span>
Expand All @@ -632,13 +650,14 @@
title="viewEdit.deletePointView"/></td></tr>
<tr><td><tag:img png="arrow_up_thin" onclick="moveUpComponent(getViewComponentId(this))"
title="viewEdit.moveUpComponent"/></td></tr>
<tr style="display:none;"><td style="text-align:center;"><span id="c_TEMPLATE_zindex"></span></td></tr>
<tr><td><tag:img png="arrow_down_thin" onclick="moveDownComponent(getViewComponentId(this))"
title="viewEdit.moveDownComponent"/></td></tr>
</table>
</div>
</div>

<div id="enhancedImageChartTemplate" onmouseover="showLayer('c'+ getViewComponentId(this) +'Controls');"
<div id="enhancedImageChartTemplate" onmouseover="revealPointControls(getViewComponentId(this))"
onmouseout="hideLayer('c'+ getViewComponentId(this) +'Controls');"
style="position:absolute;left:0px;top:0px;display:none;">
<div id="c_TEMPLATE_Content" style="display: none;"></div>
Expand All @@ -655,13 +674,14 @@
title="viewEdit.deletePointView"/></td></tr>
<tr><td><tag:img png="arrow_up_thin" onclick="moveUpComponent(getViewComponentId(this))"
title="viewEdit.moveUpComponent"/></td></tr>
<tr style="display:none;"><td style="text-align:center;"><span id="c_TEMPLATE_zindex"></span></td></tr>
<tr><td><tag:img png="arrow_down_thin" onclick="moveDownComponent(getViewComponentId(this))"
title="viewEdit.moveDownComponent"/></td></tr>
</table>
</div>
</div>

<div id="compoundTemplate" onmouseover="showLayer('c'+ getViewComponentId(this) +'Controls');"
<div id="compoundTemplate" onmouseover="revealPointControls(getViewComponentId(this))"
onmouseout="hideLayer('c'+ getViewComponentId(this) +'Controls');"
style="position:absolute;left:0px;top:0px;display:none;">
<span id="c_TEMPLATE_Content"></span>
Expand All @@ -682,6 +702,7 @@
title="viewEdit.deletePointView"/></td></tr>
<tr><td><tag:img png="arrow_up_thin" onclick="moveUpComponent(getViewComponentId(this))"
title="viewEdit.moveUpComponent"/></td></tr>
<tr style="display:none;"><td style="text-align:center;"><span id="c_TEMPLATE_zindex"></span></td></tr>
<tr><td><tag:img png="arrow_down_thin" onclick="moveDownComponent(getViewComponentId(this))"
title="viewEdit.moveDownComponent"/></td></tr>
</table>
Expand All @@ -694,7 +715,7 @@
<div id="c_TEMPLATE_Content"><img src="images/icon_comp.png" alt=""/></div>
</div>

<div id="customTemplate" onmouseover="showLayer('c'+ getViewComponentId(this) +'Controls');"
<div id="customTemplate" onmouseover="revealPointControls(getViewComponentId(this))"
onmouseout="hideLayer('c'+ getViewComponentId(this) +'Controls');"
style="position:absolute;left:0px;top:0px;display:none;">
<div id="c_TEMPLATE_Content"></div>
Expand All @@ -706,6 +727,7 @@
title="viewEdit.deleteStaticView"/></td></tr>
<tr><td><tag:img png="arrow_up_thin" onclick="moveUpComponent(getViewComponentId(this))"
title="viewEdit.moveUpComponent"/></td></tr>
<tr style="display:none;"><td style="text-align:center;"><span id="c_TEMPLATE_zindex"></span></td></tr>
<tr><td><tag:img png="arrow_down_thin" onclick="moveDownComponent(getViewComponentId(this))"
title="viewEdit.moveDownComponent"/></td></tr>
</table>
Expand Down
12 changes: 6 additions & 6 deletions WebContent/WEB-INF/tags/displayView.tag
Original file line number Diff line number Diff line change
Expand Up @@ -37,8 +37,8 @@
<c:when test="${!vc.visible}"><!-- vc ${vc.id} not visible --></c:when>

<c:when test="${vc.defName == 'simpleCompound'}">
<div id="c${vc.id}" class="viewComponent" style="position:absolute;left:${vc.x}px;top:${vc.y}px;"
onmouseover="vcOver('c${vc.id}', 5);" onmouseout="vcOut('c${vc.id}');">
<div id="c${vc.id}" class="viewComponent" style="position:absolute;left:${vc.x}px;top:${vc.y}px;z-index:${vc.z}"
onmouseover="vcOver('c${vc.id}', ${vc.z+1});" onmouseout="vcOut('c${vc.id}', ${vc.z});">
<tag:pointComponent vc="${vc.leadComponent}"/>
<c:choose>
<c:when test="${empty vc.backgroundColour}"><c:set var="bkgd"></c:set></c:when>
Expand All @@ -56,8 +56,8 @@
</c:when>

<c:when test="${vc.defName == 'imageChart'}">
<div id="c${vc.id}" class="viewComponent" style="position:absolute;left:${vc.x}px;top:${vc.y}px;"
onmouseover="vcOver('c${vc.id}', 10);" onmouseout="vcOut('c${vc.id}');">
<div id="c${vc.id}" class="viewComponent" style="position:absolute;left:${vc.x}px;top:${vc.y}px;z-index:${vc.z};"
onmouseover="vcOver('c${vc.id}', ${vc.z+1});" onmouseout="vcOut('c${vc.id}, ${vc.z}');">
<div id="c${vc.id}Content"><img src="images/icon_comp.png" alt=""/></div>
<div id="c${vc.id}Controls" class="controlContent">
<div id="c${vc.id}Info">
Expand Down Expand Up @@ -107,8 +107,8 @@
</c:when>

<c:when test="${vc.compoundComponent}">
<div id="c${vc.id}" class="viewComponent" style="position:absolute;left:${vc.x}px;top:${vc.y}px;"
onmouseover="vcOver('c${vc.id}', 5);" onmouseout="vcOut('c${vc.id}');">
<div id="c${vc.id}" class="viewComponent" style="position:absolute;left:${vc.x}px;top:${vc.y}px;z-index:${vc.z}"
onmouseover="vcOver('c${vc.id}', ${vc.z+1});" onmouseout="vcOut('c${vc.id}', ${vc.z});">
${vc.staticContent}
<div id="c${vc.id}Controls" class="controlsDiv">
<table cellpadding="0" cellspacing="1">
Expand Down
166 changes: 83 additions & 83 deletions WebContent/WEB-INF/tags/pointComponent.tag
Original file line number Diff line number Diff line change
@@ -1,84 +1,84 @@
<%--
Mango - Open Source M2M - http://mango.serotoninsoftware.com
Copyright (C) 2006-2011 Serotonin Software Technologies Inc.
@author Matthew Lohbihler
This program is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.
This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.
You should have received a copy of the GNU General Public License
along with this program. If not, see http://www.gnu.org/licenses/.
Used only for non-compound view components.
--%><%@include file="/WEB-INF/tags/decl.tagf"%><%--
--%><%@tag body-content="empty"%><%--
--%><%@attribute name="vc" type="com.serotonin.mango.view.component.ViewComponent" required="true" rtexprvalue="true"%>
<c:choose>
<c:when test="${vc.pointComponent && !vc.visible}"><!-- vc ${vc.id} not a point component or not visible --></c:when>
<c:when test="${vc.pointComponent}">
<div id="c${vc.id}" class="viewComponent" style="${vc.style}"
<c:if test="${vc.displayControls}">onmouseover="vcOver('c${vc.id}');" onmouseout="vcOut('c${vc.id}');"</c:if>>
<div id="c${vc.id}Content"><img src="images/icon_comp.png" alt=""/></div>
<c:if test="${vc.displayControls}">
<div id="c${vc.id}Controls" class="controlsDiv">
<table cellpadding="0" cellspacing="1">
<tr onmouseover="showMenu('c${vc.id}Info', 16, 0);" onmouseout="hideLayer('c${vc.id}Info');"><td>
<tag:img png="information"/>
<div id="c${vc.id}Info" onmouseout="hideLayer(this);">
<tag:img png="hourglass" title="common.gettingData"/>
</div>
</td></tr>
<c:if test="${vc.settable}">
<tr id="c${vc.id}ChangeMin" ondblclick="mango.view.hideChange('c${vc.id}Change');"
onclick="mango.view.showChange('c${vc.id}Change', 16, 0);"><td>
<img src="images/icon_edit.png" alt=""/>
<div id="c${vc.id}Change">
<tag:img png="hourglass" title="common.gettingData"/>
</div>
</td></tr>
</c:if>
<c:if test="${vc.chartRenderer}">
<tr onmouseover="mango.view.showChart('${vc.id}', event, this);"
onmouseout="mango.view.hideChart('${vc.id}', event, this);"><td>
<img src="images/icon_chart.png" alt=""/>
<div id="c${vc.id}ChartLayer"></div>
<textarea style="display:none;" id="c${vc.id}Chart"><tag:img png="hourglass" title="common.gettingData"/></textarea>
</td></tr>
</c:if>
</table>
</div>
</c:if>
<div style="position:absolute;left:-16px;top:0px;z-index:1;">
<div id="c${vc.id}Warning" style="display:none;" onmouseover="showMenu('c${vc.id}Messages', 16, 0);"
onmouseout="hideLayer('c${vc.id}Messages');">
<tag:img png="warn" title="common.warning"/>
<div id="c${vc.id}Messages" onmouseout="hideLayer(this);" class="controlContent"></div>
</div>
<div id="c${vc.id}Changing" style="display:none;"><tag:img png="icon_edit" title="common.settingValue"/></div>
</div>
</div>
</c:when>
<c:when test="${!vc.customComponent}">
<div style="${vc.style}">${vc.staticContent}</div>
</c:when>
<c:when test="${vc.customComponent}">
<div id="c${vc.id}" class="viewComponent" style="${vc.style}">
<div id="c${vc.id}Content"><img src="images/icon_comp.png" alt=""/></div>
<div style="position:absolute;left:-16px;top:0px;z-index:1;">
<div id="c${vc.id}Warning" style="display:none;" onmouseover="showMenu('c${vc.id}Messages', 16, 0);"
onmouseout="hideLayer('c${vc.id}Messages');">
<tag:img png="warn" title="common.warning"/>
<div id="c${vc.id}Messages" onmouseout="hideLayer(this);" class="controlContent"></div>
</div>
<div id="c${vc.id}Changing" style="display:none;"><tag:img png="icon_edit" title="common.settingValue"/></div>
</div>
</div>
</c:when>
<%--
Mango - Open Source M2M - http://mango.serotoninsoftware.com
Copyright (C) 2006-2011 Serotonin Software Technologies Inc.
@author Matthew Lohbihler
This program is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.
This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.
You should have received a copy of the GNU General Public License
along with this program. If not, see http://www.gnu.org/licenses/.
Used only for non-compound view components.
--%><%@include file="/WEB-INF/tags/decl.tagf"%><%--
--%><%@tag body-content="empty"%><%--
--%><%@attribute name="vc" type="com.serotonin.mango.view.component.ViewComponent" required="true" rtexprvalue="true"%>
<c:choose>
<c:when test="${vc.pointComponent && !vc.visible}"><!-- vc ${vc.id} not a point component or not visible --></c:when>
<c:when test="${vc.pointComponent}">
<div id="c${vc.id}" class="viewComponent" style="${vc.style}"
<c:if test="${vc.displayControls}">onmouseover="vcOver('c${vc.id}', ${vc.z+1});" onmouseout="vcOut('c${vc.id}', ${vc.z});"</c:if>>
<div id="c${vc.id}Content"><img src="images/icon_comp.png" alt=""/></div>
<c:if test="${vc.displayControls}">
<div id="c${vc.id}Controls" class="controlsDiv">
<table cellpadding="0" cellspacing="1">
<tr onmouseover="showMenu('c${vc.id}Info', 16, 0);" onmouseout="hideLayer('c${vc.id}Info');"><td>
<tag:img png="information"/>
<div id="c${vc.id}Info" onmouseout="hideLayer(this);">
<tag:img png="hourglass" title="common.gettingData"/>
</div>
</td></tr>
<c:if test="${vc.settable}">
<tr id="c${vc.id}ChangeMin" ondblclick="mango.view.hideChange('c${vc.id}Change');"
onclick="mango.view.showChange('c${vc.id}Change', 16, 0);"><td>
<img src="images/icon_edit.png" alt=""/>
<div id="c${vc.id}Change">
<tag:img png="hourglass" title="common.gettingData"/>
</div>
</td></tr>
</c:if>
<c:if test="${vc.chartRenderer}">
<tr onmouseover="mango.view.showChart('${vc.id}', event, this);"
onmouseout="mango.view.hideChart('${vc.id}', event, this);"><td>
<img src="images/icon_chart.png" alt=""/>
<div id="c${vc.id}ChartLayer"></div>
<textarea style="display:none;" id="c${vc.id}Chart"><tag:img png="hourglass" title="common.gettingData"/></textarea>
</td></tr>
</c:if>
</table>
</div>
</c:if>
<div style="position:absolute;left:-16px;top:0px;z-index:${vc.z+1};">
<div id="c${vc.id}Warning" style="display:none;" onmouseover="showMenu('c${vc.id}Messages', 16, 0);"
onmouseout="hideLayer('c${vc.id}Messages');">
<tag:img png="warn" title="common.warning"/>
<div id="c${vc.id}Messages" onmouseout="hideLayer(this);" class="controlContent"></div>
</div>
<div id="c${vc.id}Changing" style="display:none;"><tag:img png="icon_edit" title="common.settingValue"/></div>
</div>
</div>
</c:when>
<c:when test="${!vc.customComponent}">
<div style="${vc.style}">${vc.staticContent}</div>
</c:when>
<c:when test="${vc.customComponent}">
<div id="c${vc.id}" class="viewComponent" style="${vc.style}">
<div id="c${vc.id}Content"><img src="images/icon_comp.png" alt=""/></div>
<div style="position:absolute;left:-16px;top:0px;z-index:${vc.z+1};">
<div id="c${vc.id}Warning" style="display:none;" onmouseover="showMenu('c${vc.id}Messages', 16, 0);"
onmouseout="hideLayer('c${vc.id}Messages');">
<tag:img png="warn" title="common.warning"/>
<div id="c${vc.id}Messages" onmouseout="hideLayer(this);" class="controlContent"></div>
</div>
<div id="c${vc.id}Changing" style="display:none;"><tag:img png="icon_edit" title="common.settingValue"/></div>
</div>
</div>
</c:when>
</c:choose>
8 changes: 3 additions & 5 deletions WebContent/resources/view.js
Original file line number Diff line number Diff line change
Expand Up @@ -159,15 +159,13 @@ mango.view.hideChart = function(componentId, event, source) {
hideLayer('c'+ componentId +'ChartLayer');
}

function vcOver(base, amt) {
if (!amt)
amt = 10;
function vcOver(base, amt = 99) {
setZIndex(base, amt);
showLayer(base + 'Controls');
};

function vcOut(base) {
setZIndex(base, 0);
function vcOut(base, zIndex = 0) {
setZIndex(base, zIndex);
hideLayer(base +'Controls');
};

Expand Down
Loading

0 comments on commit d21f2b4

Please sign in to comment.