Função Javascript não reconhece Class de Polyline SGV criada dinamicamente com Javascript
Srs sou principiante na Linguagem Javascript e estou tendo dificuldades em implementar um projeto, peço ajuda .
Neste projeto crio dinamicamente com Javascript polylines dentro de um SVG, cada polyline e criada com duas Classes (draggable e tooltip), a Class draggable é reconhecida normalmente, mas a tooltip não é reconhecida, quando a tag polyline com as classes é adicionada normalmente dentro do index funciona corretamente.
abaixo códigos do projeto:
Função ocultar polyline:
let valor;
let checagem;
function teste(checkbox) {
valor = checkbox.value;
checagem = checkbox.checked;
}
function ocultar(){
let polyline = document.getElementsByTagName("polyline");
let equipe = document.getElementsByName("equipe");
if(checagem === true){
for(j=0;j<polyline.length;j++){
if(polyline[j].getAttribute("name")=== valor){
polyline[j].setAttributeNS(null, "visibility", "hidden");
}
}
}
if(checagem ===false){
for(j=0;j<polyline.length;j++){
if(polyline[j].getAttribute("name")===valor){
polyline[j].setAttributeNS(null, "visibility", "visible");
}
}
}
}<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="_css/estilo_principal.css">
<script src="js/arrastar.js"></script>
<script src="js/tooltip.js"></script>
<script src="js/ocultar.js"></script>
<title>Painel Diagrama</title>
</head>
<body>
<div id="painel">
<input type="button" value="Desenhar" onclick="criarlinha()"/>
<div id="itens" class="w3-container">
<div class="w3-dropdown-hover">
<input type="button" id="equipe-1" value="Equipes" title="Selecione uma Equipe para oculta-lá"/>
<div class="w3-dropdown-content w3-bar-block w3-border">
<ul id="equipes">
</ul>
</div>
</div>
</div>
</div>
<div id="diagrama" >
<svg id="tela" width="14800px" height="2640px" viewBox="0 0 14800 2640" onload="makeDraggable(evt); tooltip(evt)">
<g id="tooltip" visibility="hidden" >
<rect x="2" y="2" width="80" height="85" fill="black" opacity="0.4" rx="2" ry="2"/>
<rect width="80" height="85" fill="grey" rx="2" ry="2"/>
<text x="4" y="6">Tooltip</text>
<line x1="2" y1="23" x2="170" y2="23" stroke="black" stroke-width="2"></line>
<text x="4" y="26">Tooltip</text>
<line x1="2" y1="43" x2="170" y2="43" stroke="black" stroke-width="2"></line>
<text x="4" y="46">Tooltip</text>
<line x1="2" y1="63" x2="170" y2="63" stroke="black" stroke-width="2"></line>
<text x="4" y="66">Tooltip</text>
</g>
<polyline class="draggable tooltip" name="teste" points="885 980 1200 980" stroke="green" stroke-width="10" fill="none" equipe="Equipe: Teste" os="os: 27493/2019" trecho="Trecho: Teste1" fiscal="Fiscal: Fulano de Tal"/>
</svg>
</div>
<script src="js/linhasvg.js"></script>
</body>
</html>
Função tooltip:
function tooltip(evt) {
var svg = document.getElementById('tela');
var tooltip = svg.getElementById('tooltip');
var tooltipText = tooltip.getElementsByTagName('text')[1];
var tooltipText1 = tooltip.getElementsByTagName('text')[0];
var tooltipText2 = tooltip.getElementsByTagName('text')[2];
var tooltipText3 = tooltip.getElementsByTagName('text')[3];
var tooltipRects = tooltip.getElementsByTagName('rect');
var triggers = svg.getElementsByClassName('tooltip');
var line = svg.getElementsByTagName('line');
for (var i = 0; i < triggers.length; i++) {
triggers[i].addEventListener('mousemove', showTooltip);
triggers[i].addEventListener('mouseout', hideTooltip);
}
function showTooltip(evt) {
var CTM = svg.getScreenCTM();
var x = (evt.clientX - CTM.e + 6) / CTM.a;
var y = (evt.clientY - CTM.f + 20) / CTM.d;
tooltip.setAttributeNS(null, "transform", "translate(" + x + " " + y + ")");
tooltip.setAttributeNS(null, "visibility", "visible");
tooltipText.firstChild.data = evt.target.getAttributeNS(null, "equipe");
tooltipText1.firstChild.data = evt.target.getAttributeNS(null, "os");
tooltipText2.firstChild.data = evt.target.getAttributeNS(null, "trecho");
tooltipText3.firstChild.data = evt.target.getAttributeNS(null, "fiscal");
var length = tooltipText.getComputedTextLength();
for (var i = 0; i < tooltipRects.length; i++) {
tooltipRects[i].setAttributeNS(null, "width", length + 15);
line[i].setAttributeNS(null,"x2",length + 15)
}
}
Função linhasvg:
let svg = document.querySelector("svg");
let status = true;
function criarlinha(){
let linha = document.createElementNS("http://www.w3.org/2000/svg","polyline");
let pontos = [];
let equipes = document.getElementsByTagName("li")
let equipe = prompt("Informe o nome do Setor.")
let checar = document.getElementsByClassName("equipe")
for (let i = 0; i < 4; i ++ ){
pontos.push(Number(prompt("Informe os valor")));
}
linha.setAttribute("class","draggable tooltip");
linha.setAttribute("name",equipe);
linha.setAttribute( "points", pontos);
linha.setAttribute("fill", "none");
linha.setAttribute("stroke","green");
linha.setAttribute("stroke-width", 6);
linha.setAttribute("equipe",equipe)
linha.setAttribute("os","2997/2019")
linha.setAttribute("trecho","POA/CVN")
linha.setAttribute("fiscal","Fiscal: Fulano de Tal")
svg.appendChild(linha);
pontos = [];
let quantidade_li = equipes.length
if (quantidade_li > 0) {
for (let i = 0; i < checar.length; i++) {
if ( checar[i].value === equipe){
status = false;
}
}
}
if(status !== false){
let lis;
let ul = document.getElementById("equipes");
let l1 = document.getElementsByTagName("li");
let li = document.createElement("li");
let span = document.createElement("span");
var input = document.createElement("input");
input.type ="checkbox";
input.value = equipe;
input.className="equipe";
input.name="equipe";
input.setAttribute("onclick","teste(this), ocultar()")
span.innerText= equipe;
ul.appendChild(li);
if (l1.length > 0) {
lis = l1.length - 1;
}
else{
lis = l1.length;
}
l1[lis].appendChild(span);
l1[lis].before(input, span);
}
let item = document.getElementsByClassName("equipe")
let poly = document.getElementsByTagName("polyline")
for (let i = 0; i < item.length;i++){
for(j = 0; j < poly.length; j++){
if (item[i].attributes[1].value === poly[j].attributes[1].value){
if(item[i].checked === true){
poly[j].setAttribute( "visibility", "hidden")
}
}
}
}
}
Função arrastar:
function makeDraggable(evt) {
let svg = evt.target;
svg.addEventListener('mousedown', startDrag);
svg.addEventListener('mousemove', drag);
svg.addEventListener('mouseup', endDrag);
svg.addEventListener('mouseleave', endDrag);
svg.addEventListener('touchstart', startDrag);
svg.addEventListener('touchmove', drag);
svg.addEventListener('touchend', endDrag);
svg.addEventListener('touchleave', endDrag);
svg.addEventListener('touchcancel', endDrag);
svg.addEventListener('click', clicar);
function getMousePosition(evt) {
let CTM = svg.getScreenCTM();
if (evt.touches) { evt = evt.touches[0]; }
return {
x: (evt.clientX - CTM.e) / CTM.a,
y: (evt.clientY - CTM.f) / CTM.d
};
}
let selectedElement, offset, transform;
function startDrag(evt) {
if (evt.target.classList.contains('draggable')) {
selectedElement = evt.target;
offset = getMousePosition(evt);
// Make sure the first transform on the element is a translate transform
let transforms = selectedElement.transform.baseVal;
if (transforms.length === 0 || transforms.getItem(0).type !== SVGTransform.SVG_TRANSFORM_TRANSLATE) {
// Create an transform that translates by (0, 0)
let translate = svg.createSVGTransform();
translate.setTranslate(0, 0);
selectedElement.transform.baseVal.insertItemBefore(translate, 0);
}
// Get initial translation
transform = transforms.getItem(0);
offset.x -= transform.matrix.e;
offset.y -= transform.matrix.f;
}
}
function drag(evt) {
if (selectedElement) {
evt.preventDefault();
let coord = getMousePosition(evt);
transform.setTranslate(coord.x - offset.x, coord.y - offset.y);
}
}
function clicar(evt) {
if (selectedElement) {
evt.preventDefault();
let coord = getMousePosition(evt);
transform.setTranslate(coord.x - offset.x, coord.y - offset.y);
}
alert("X= " + getMousePosition(evt).x + " Y= " + getMousePosition(evt).y)
}
function endDrag(evt) {
selectedElement = false;
}
}
Estilo estilo_principal:
@charset "utf-8";svg#tela{
background: url("_imagens/diagrama.png") no-repeat;
}div#diagrama{
position: absolute;
border: 2px solid black;
top: 180px;
left: 30px;
width: 95%;
height: 80%;
overflow: auto;
}div#painel{
position: absolute;
border: 1px solid black;
padding: 10px;
left: 30px;
}div#painel input{
text-align: center;
}input#equipe-1{
width: 150px;
margin-left: -10px;
}div#itens{
float: right;
width: 165px;
}
.equipe{
margin-left: 5px;
}span{
margin-left: 5px;
}ul#equipes{
padding-left: 0px;
padding-top: -15x;
}ul#equipes li{
list-style: none;
padding: 1px;
}svg text{
fill: white;
}
#tooltip {
dominant-baseline: hanging;
}
.draggable{
cursor: move;
}
Desde já agradeço a atenção e colaboração.Discussão (1)
Carregando comentários...