Givanildo_Silva
-
Total de itens
1 -
Registro em
-
Última visita
Sobre Givanildo_Silva
-
Função Javascript não reconhece Class de Polyline SGV criada dinamicamente com Javascript
Givanildo_Silva postou um tópico no fórum 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.