Commit 4ca08c4ca891ec1c91848fb056505b423037de56

Authored by Edmar Moretti
1 parent c7193a1d

Nova ferramenta que permite filtrar os temas da árvore de camadas

classesjs/classe_arvoredecamadas.js
... ... @@ -47,6 +47,18 @@ Exemplos:
47 47 */
48 48 i3GEO.arvoreDeCamadas = {
49 49 /*
  50 + Propriedade: FILTRO
  51 +
  52 + Filtro que será aplicado para restringir os tipos de camadas mostradas na árvore
  53 +
  54 + Default:
  55 + {""}
  56 +
  57 + Type:
  58 + {string} - ligados|desligados|selecionados|download|wms|raster|toponimia
  59 + */
  60 + FILTRO: "",
  61 + /*
50 62 Propriedade: VERIFICAABRANGENCIATEMAS
51 63  
52 64 Verifica ou não se um tema da árvore está dentro da abrangência do mapa atual
... ... @@ -133,6 +145,18 @@ i3GEO.arvoreDeCamadas = {
133 145 */
134 146 LIGARDESLIGARTODOS: true,
135 147 /*
  148 + Propriedade: FILTRAR
  149 +
  150 + Mostra o ícone para filtrar as camadas.
  151 +
  152 + Default:
  153 + {true}
  154 +
  155 + Type:
  156 + {boolean}
  157 + */
  158 + FILTRAR: true,
  159 + /*
136 160 Propriedade: EXPANDIDA
137 161  
138 162 Indica se a árvore será montada de forma expandida ou não. Se true, os nós do primeiro nível serão abertos na inicialização da árvore.
... ... @@ -370,21 +394,27 @@ i3GEO.arvoreDeCamadas = {
370 394 Parametro:
371 395  
372 396 temas {JSON} - Objeto com a lista de camadas e propriedades (veja CAMADAS). Se não existir, a árvore é redesenhada
  397 +
  398 + forca {boolean} - força a atualização da árvore, sem verificar automaticamente se a atualização deve ou não ser feita
373 399 */
374   - atualiza: function(temas){
  400 + atualiza: function(temas,forca){
375 401 if(typeof(console) !== 'undefined'){console.info("i3GEO.arvoreDeCamadas.atualiza()");}
376 402 if(arguments.length === 0){
377 403 temas = i3GEO.arvoreDeCamadas.CAMADAS;
378 404 i3GEO.arvoreDeCamadas.CAMADAS = "";
  405 + forca = false;
379 406 }
380 407 var estilo,temp,currentIconMode,newVal,root,tempNode,titulo,d,c,ltema,temaNode,grupoNode,i,j,n,nk,k,
381 408 incluidos=[],
382   - grupoLayers = i3GEO.configura.grupoLayers;
  409 + grupoLayers = i3GEO.configura.grupoLayers,
  410 + textoTema = "";
383 411 //
384 412 //essa verificacao é necessaria quando a arvore é criada fora dos padrões normais
385 413 //
386 414 temp = $i(i3GEO.arvoreDeCamadas.IDHTML);
387 415 if(temp){
  416 + if(forca === true)
  417 + {temp.innerHTML = "";}
388 418 if(temp.innerHTML !== ""){
389 419 if(i3GEO.arvoreDeCamadas.comparaTemas(temas,i3GEO.arvoreDeCamadas.CAMADAS)){
390 420 if(typeof(console) !== 'undefined'){console.info("Nao é necessario atualizar arvoreDeCamadas - return");}
... ... @@ -413,6 +443,8 @@ i3GEO.arvoreDeCamadas = {
413 443 titulo = "<table><tr><td><b>"+$trad("a7")+"</b></td><td>";
414 444 if(this.ARRASTARLIXEIRA === true)
415 445 {titulo += "<img id='i3geo_lixeira' title='"+$trad("t2")+"' src='"+i3GEO.util.$im("branco.gif")+"' />";}
  446 + if(this.FILTRAR === true)
  447 + {titulo += "<img onclick='i3GEO.arvoreDeCamadas.dialogo.filtro();' id='i3geo_filtro' title='"+$trad("t2a")+"' src='"+i3GEO.util.$im("branco.gif")+"' />";}
416 448 if(this.LIGARDESLIGARTODOS === true){
417 449 titulo += "&nbsp;<img onclick='i3GEO.arvoreDeCamadas.aplicaTemas(\"ligartodos\");' id='olhoAberto' title='"+$trad("t3a")+"' src='"+i3GEO.util.$im("branco.gif")+"' />";
418 450 titulo += "&nbsp;<img onclick='i3GEO.arvoreDeCamadas.aplicaTemas(\"desligartodos\");' id='olhoFechado' title='"+$trad("t3b")+"' src='"+i3GEO.util.$im("branco.gif")+"' />";
... ... @@ -434,15 +466,18 @@ i3GEO.arvoreDeCamadas = {
434 466 ltema = temas[i];
435 467 try{
436 468 if(ltema.escondido !== "sim"){
437   - temaNode = new YAHOO.widget.HTMLNode(
438   - {expanded:this.EXPANDIDA,html:i3GEO.arvoreDeCamadas.montaTextoTema(ltema),id:ltema.name,tipo:"tema",enableHighlight:false},
439   - tempNode
440   - );
441   - if(this.PERMITEEXPANDIRTEMAS === true){
442   - if(this.EXPANDESOLEGENDA === false)
443   - {temaNode.setDynamicLoad(i3GEO.arvoreDeCamadas.montaOpcoes, currentIconMode);}
444   - else
445   - {temaNode.setDynamicLoad(i3GEO.arvoreDeCamadas.mostraLegenda, 1);}
  469 + textoTema = i3GEO.arvoreDeCamadas.montaTextoTema(ltema);
  470 + if(textoTema !== ""){
  471 + temaNode = new YAHOO.widget.HTMLNode(
  472 + {expanded:this.EXPANDIDA,html:textoTema,id:ltema.name,tipo:"tema",enableHighlight:false},
  473 + tempNode
  474 + );
  475 + if(this.PERMITEEXPANDIRTEMAS === true){
  476 + if(this.EXPANDESOLEGENDA === false)
  477 + {temaNode.setDynamicLoad(i3GEO.arvoreDeCamadas.montaOpcoes, 1);}
  478 + else
  479 + {temaNode.setDynamicLoad(i3GEO.arvoreDeCamadas.mostraLegenda, 1);}
  480 + }
446 481 }
447 482 }
448 483 }
... ... @@ -472,13 +507,16 @@ i3GEO.arvoreDeCamadas = {
472 507 for(k=0;k<nk; k += 1){
473 508 ltema = temas[k];
474 509 if(ltema.name === grupoLayers[i].layers[j] && ltema.escondido === "nao"){
475   - d = {enableHighlight:false,expanded:i3GEO.arvoreDeCamadas.EXPANDIDA,html:i3GEO.arvoreDeCamadas.montaTextoTema(ltema),id:ltema.name,tipo:"tema"};
476   - if(grupoLayers[i].dinamico && grupoLayers[i].dinamico === true)
477   - {temaNode = new YAHOO.widget.HTMLNode(d, grupoNode);}
478   - else
479   - {temaNode = new YAHOO.widget.HTMLNode(d, tempNode);}
480   - temaNode.setDynamicLoad(i3GEO.arvoreDeCamadas.montaOpcoes, currentIconMode);
481   - incluidos.push(ltema.name);
  510 + textoTema = i3GEO.arvoreDeCamadas.montaTextoTema(ltema);
  511 + if(textoTema !== ""){
  512 + d = {enableHighlight:false,expanded:i3GEO.arvoreDeCamadas.EXPANDIDA,html:textoTema,id:ltema.name,tipo:"tema"};
  513 + if(grupoLayers[i].dinamico && grupoLayers[i].dinamico === true)
  514 + {temaNode = new YAHOO.widget.HTMLNode(d, grupoNode);}
  515 + else
  516 + {temaNode = new YAHOO.widget.HTMLNode(d, tempNode);}
  517 + temaNode.setDynamicLoad(i3GEO.arvoreDeCamadas.montaOpcoes, 1);
  518 + incluidos.push(ltema.name);
  519 + }
482 520 }
483 521 }
484 522 }
... ... @@ -495,7 +533,7 @@ i3GEO.arvoreDeCamadas = {
495 533 }
496 534 if (n === false){
497 535 temaNode = new YAHOO.widget.HTMLNode({enableHighlight:false,expanded:false,html:i3GEO.arvoreDeCamadas.montaTextoTema(ltema),id:ltema.name,tipo:"tema"}, grupoNode, i3GEO.arvoreDeCamadas.EXPANDIDA,true);
498   - temaNode.setDynamicLoad(i3GEO.arvoreDeCamadas.montaOpcoes, currentIconMode);
  536 + temaNode.setDynamicLoad(i3GEO.arvoreDeCamadas.montaOpcoes, 1);
499 537 }
500 538 }
501 539 }
... ... @@ -712,7 +750,7 @@ i3GEO.arvoreDeCamadas = {
712 750 var d,conteudo,opcoesNode,idtema,ltema,farol,mfarol,tnome,iconesNode;
713 751 idtema = node.data.id;
714 752 ltema = i3GEO.arvoreDeCamadas.pegaTema(idtema);
715   - if(this.OPCOESICONES === true){
  753 + if(i3GEO.arvoreDeCamadas.OPCOESICONES === true){
716 754 //
717 755 //define o farol indicativo da compatibilidade de escala do mapa com a fonte do layer
718 756 //
... ... @@ -746,11 +784,11 @@ i3GEO.arvoreDeCamadas = {
746 784 iconesNode = new YAHOO.widget.HTMLNode({html:tnome,enableHighlight:false,isLeaf:true,expanded:false},node);
747 785 }
748 786 }
749   - if(this.OPCOESTEMAS === true){
  787 + if(i3GEO.arvoreDeCamadas.OPCOESTEMAS === true){
750 788 opcoesNode = new YAHOO.widget.HTMLNode({html:$trad("t18a"),idopcoes:ltema.name,identifica:ltema.identifica,enableHighlight:false,expanded:false}, node);
751 789 opcoesNode.setDynamicLoad(i3GEO.arvoreDeCamadas.mostraOpcoes, 1);
752 790 }
753   - if(this.OPCOESLEGENDA === true){
  791 + if(i3GEO.arvoreDeCamadas.OPCOESLEGENDA === true){
754 792 opcoesNode = new YAHOO.widget.HTMLNode({html:$trad("p3"),idlegenda:ltema.name,enableHighlight:false,expanded:i3GEO.arvoreDeCamadas.LEGENDAEXPANDIDA}, node);
755 793 opcoesNode.setDynamicLoad(i3GEO.arvoreDeCamadas.mostraLegenda, 1);
756 794 }
... ... @@ -786,7 +824,7 @@ i3GEO.arvoreDeCamadas = {
786 824 if(i3GEO.Interface.ATUAL !== "flamingo")
787 825 {i3GEO.arvoreDeCamadas.adicionaOpcaoTema($trad("t22"),$trad("t23"),'i3GEO.tema.dialogo.procuraratrib(\"'+ltema.name+'\")',node);}
788 826 i3GEO.arvoreDeCamadas.adicionaOpcaoTema($trad("t24"),$trad("t25"),'i3GEO.tema.dialogo.toponimia(\"'+ltema.name+'\")',node);
789   - if(ltema.identificatoLowerCase() === "sim" || ltema.identifica === "")
  827 + if(ltema.identifica.toLowerCase() === "sim" || ltema.identifica === "")
790 828 {i3GEO.arvoreDeCamadas.adicionaOpcaoTema($trad("t26"),$trad("t27"),'i3GEO.tema.dialogo.etiquetas(\"'+ltema.name+'\")',node);}
791 829 i3GEO.arvoreDeCamadas.adicionaOpcaoTema($trad("t28"),$trad("t29"),'i3GEO.tema.dialogo.filtro(\"'+ltema.name+'\")',node);
792 830 i3GEO.arvoreDeCamadas.adicionaOpcaoTema($trad("t30"),$trad("t31"),'i3GEO.tema.dialogo.tabela(\"'+ltema.name+'\")',node);
... ... @@ -806,7 +844,7 @@ i3GEO.arvoreDeCamadas = {
806 844 //as opções SLD foram migradas para a ferramenta de edição de legenda
807 845 //i3GEO.arvoreDeCamadas.adicionaOpcaoTema($trad("t38"),$trad("t39"),'i3GEO.tema.dialogo.sld(\"'+ltema.name+'\")',node);
808 846 //i3GEO.arvoreDeCamadas.adicionaOpcaoTema($trad("t43"),$trad("t43"),'i3GEO.tema.dialogo.aplicarsld(\"'+ltema.name+'\")',node);
809   - if(ltema.editorsqltoLowerCase() === "sim")
  847 + if(ltema.editorsql.toLowerCase() === "sim")
810 848 {i3GEO.arvoreDeCamadas.adicionaOpcaoTema($trad("t40"),$trad("t41"),'i3GEO.tema.dialogo.editorsql(\"'+ltema.name+'\")',node);}
811 849 if(ltema.permitecomentario.toLowerCase() !== "nao" && i3GEO.arvoreDeTemas.OPCOESADICIONAIS.comentarios === true)
812 850 {i3GEO.arvoreDeCamadas.adicionaOpcaoTema($trad("t45"),$trad("t45"),'i3GEO.tema.dialogo.comentario(\"'+ltema.name+'\")',node);}
... ... @@ -1016,6 +1054,25 @@ i3GEO.arvoreDeCamadas = {
1016 1054 {ck = ' CHECKED ';}
1017 1055 else
1018 1056 {ck = "";}
  1057 + //
  1058 + //verifica se o filtro de camadas está ativo
  1059 + //
  1060 + if(this.FILTRO !== ""){
  1061 + if(this.FILTRO === "desligados" && ck !== "")
  1062 + {return "";}
  1063 + if(this.FILTRO === "ligados" && ck === "")
  1064 + {return "";}
  1065 + if(this.FILTRO === "selecionados" && tema.sel !== "sim")
  1066 + {return "";}
  1067 + if(this.FILTRO === "download" && tema.download.toLowerCase() !== "sim")
  1068 + {return "";}
  1069 + if(this.FILTRO === "wms" && tema.connectiontype*1 !== 7)
  1070 + {return "";}
  1071 + if(this.FILTRO === "raster" && tema.type*1 !== 3)
  1072 + {return "";}
  1073 + if(this.FILTRO === "toponimia" && tema.type*1 !== 4)
  1074 + {return "";}
  1075 + }
1019 1076 estilo = navm ? "text-align:left;font-size:11px;vertical-align:middle;display:table-cell;" : "text-align:left;font-size:11px;vertical-align:vertical-align:top;padding-top:4px;";
1020 1077 html = "<p onclick='i3GEO.mapa.ativaTema(\""+tema.name+"\")' id='arrastar_"+tema.name+"' style='"+estilo+"' ><input class=inputsb style='cursor:pointer;' onmouseover=\"javascript:i3GEO.ajuda.mostraJanela('"+$trad("t3")+"','ligadesliga')\" onmouseout=\"javascript:i3GEO.ajuda.mostraJanela('')\" type='checkbox' name=\"layer\" value='"+tema.name+"' "+ ck ;
1021 1078 if(i3GEO.arvoreDeCamadas.ATIVATEMA !== "")
... ... @@ -1430,5 +1487,20 @@ i3GEO.arvoreDeCamadas = {
1430 1487 }
1431 1488 catch(e){return "";}
1432 1489 return temp;
  1490 + },
  1491 + /*
  1492 + Classe: i3GEO.arvoreDeCamadas.dialogo
  1493 +
  1494 + Abre as telas de diálogo das opções de manipulação da árvore
  1495 + */
  1496 + dialogo: {
  1497 + /*
  1498 + Function: abreFiltro
  1499 +
  1500 + Abre a janela de diálogo para o usuário escolher ou alterar o filtro aplicado à árvore
  1501 + */
  1502 + filtro: function(){
  1503 + i3GEO.util.dialogoFerramenta("i3GEO.arvoreDeCamadas.dialogo.filtro()","filtroarvore","filtroarvore");
  1504 + }
1433 1505 }
1434 1506 };
1435 1507 \ No newline at end of file
... ...
classesjs/dicionario.js
... ... @@ -412,11 +412,18 @@ it:&quot;Strati&quot;
412 412 }],
413 413 "t2":[
414 414 {
415   -pt:"arraste o tema aqui para excluir",
  415 +pt:"Arraste o tema aqui para excluir",
416 416 en:"Drag the layer here to remove",
417 417 es:"Arrastre el tema aqui para excluirlo",
418 418 it:"Trascina qui per rimuovere"
419 419 }],
  420 +"t2a":[
  421 +{
  422 +pt:"Filtra a lista de camadas",
  423 +en:"filtra a lista de camadas",
  424 +es:"filtra a lista de camadas",
  425 +it:"filtra a lista de camadas"
  426 +}],
420 427 "t3":[
421 428 {
422 429 pt:"Clique para ligar ou desligar esse tema, mostrando-o ou n&atilde;o no mapa. Ap&oacute;s alterar o estado do tema, aguarde alguns instantes para o mapa ser redesenhado, ou clique no bot&atilde;o aplicar que ser&aacute; mostrado.",
... ...
classesjs/dicionario_ajuda.js
... ... @@ -821,6 +821,15 @@ g_traducao_ajuda = {
821 821 complemento:"Os valores de Z podem ser obtidos de um tema ou de um serviço do tipo Google API",
822 822 tela:"",
823 823 apijs:"i3GEO.analise"
  824 + },
  825 + "97": {
  826 + titulo: "Filtro de camadas",
  827 + diretorio:"",
  828 + categoria:"7",
  829 + pt:"Filtra as camadas que são mostradas na árvore de camadas conforme as características de cada uma",
  830 + complemento:"",
  831 + tela:"",
  832 + apijs:"i3GEO.arvoreDeCamadas"
824 833 }
825 834 }
826 835 };
... ...
css/botoes2.css
... ... @@ -425,9 +425,9 @@
425 425 {
426 426 background-image:URL('../imagens/visual/default/sprite.png');
427 427 background-repeat: no-repeat;
428   - background-position: 0px -1075px;
429   - width:22px;
430   - height:22px;
  428 + background-position: 0px -1078px;
  429 + width:14px;
  430 + height:18px;
431 431 }
432 432 .upload
433 433 {
... ... @@ -714,6 +714,14 @@
714 714 border: 1px solid #DCDCDC;
715 715 cursor:pointer;
716 716 }
  717 +#i3geo_filtro
  718 +{
  719 + background-image:URL('../imagens/visual/default/sprite.png');
  720 + background-repeat: no-repeat;
  721 + background-position: 0px -2075px;
  722 + width:16px;
  723 + height:16px;
  724 +}
717 725 button{background:url(../imagens/tic2.png) 98% 50% no-repeat;}
718 726 #encolheFerramentas
719 727 {background-image:URL('../imagens/encolhe.png');background-repeat: no-repeat;background-position:center;cursor:pointer;}
720 728 \ No newline at end of file
... ...
ferramentas/filtroarvore/index.js.php 0 → 100644
... ... @@ -0,0 +1,131 @@
  1 +<?php error_reporting(0);if(extension_loaded('zlib')){ob_start('ob_gzhandler');} header("Content-type: text/javascript"); ?>
  2 +/*jslint plusplus:false,white:false,undef: false, rhino: true, onevar: true, evil: true */
  3 +/*
  4 +Title: Filtro da árvore de camadas
  5 +
  6 +Veja:
  7 +
  8 +<i3GEO.arvoreDeCamadas.dialogo.filtro>
  9 +
  10 +Arquivo:
  11 +
  12 +i3geo/ferramentas/filtroarvore/index.js.php
  13 +
  14 +Licenca:
  15 +
  16 +GPL2
  17 +
  18 +i3Geo Interface Integrada de Ferramentas de Geoprocessamento para Internet
  19 +
  20 +Direitos Autorais Reservados (c) 2006 Ministério do Meio Ambiente Brasil
  21 +Desenvolvedor: Edmar Moretti edmar.moretti@mma.gov.br
  22 +
  23 +Este programa é software livre; você pode redistribuí-lo
  24 +e/ou modificá-lo sob os termos da Licença Pública Geral
  25 +GNU conforme publicada pela Free Software Foundation;
  26 +
  27 +Este programa é distribuído na expectativa de que seja útil,
  28 +porém, SEM NENHUMA GARANTIA; nem mesmo a garantia implícita
  29 +de COMERCIABILIDADE OU ADEQUAÇÃO A UMA FINALIDADE ESPECÍFICA.
  30 +Consulte a Licença Pública Geral do GNU para mais detalhes.
  31 +Você deve ter recebido uma cópia da Licença Pública Geral do
  32 +GNU junto com este programa; se não, escreva para a
  33 +Free Software Foundation, Inc., no endereço
  34 +59 Temple Street, Suite 330, Boston, MA 02111-1307 USA.
  35 +*/
  36 +if(typeof(i3GEOF) === 'undefined'){
  37 + i3GEOF = [];
  38 +}
  39 +/*
  40 +Classe: i3GEOF.filtroarvore
  41 +
  42 +*/
  43 +i3GEOF.filtroarvore = {
  44 + /*
  45 + Variavel: aguarde
  46 +
  47 + Estilo do objeto DOM com a imagem de aguarde existente no cabeçalho da janela.
  48 + */
  49 + aguarde: "",
  50 + /*
  51 + Function: inicia
  52 +
  53 + Inicia a ferramenta. É chamado por criaJanelaFlutuante
  54 +
  55 + Parametro:
  56 +
  57 + iddiv {String} - id do div que receberá o conteudo HTML da ferramenta
  58 + */
  59 + inicia: function(iddiv){
  60 + var box;
  61 + try{
  62 + $i(iddiv).innerHTML += i3GEOF.filtroarvore.html();
  63 + }
  64 + catch(erro){alert(erro);}
  65 + },
  66 + /*
  67 + Function: html
  68 +
  69 + Gera o código html para apresentação das opções da ferramenta
  70 +
  71 + Retorno:
  72 +
  73 + String com o código html
  74 + */
  75 + html:function(){
  76 + var ins = '<p class=paragrafo >Escolha o tipo de filtro ou "nenhum" para não filtrar<br><br>' +
  77 + '<select onchange="i3GEO.arvoreDeCamadas.ARVORE = null;i3GEO.arvoreDeCamadas.FILTRO = this.value;i3GEO.arvoreDeCamadas.atualiza(i3GEO.arvoreDeCamadas.CAMADAS,true)"><option value="">Nenhum</option>' +
  78 + '<option value="ligados">ligados</option>' +
  79 + '<option value="desligados">desligados</option>' +
  80 + '<option value="selecionados">com seleção</option>' +
  81 + '<option value="download">permitem download</option>' +
  82 + '<option value="wms">são do tipo WMS</option>' +
  83 + '<option value="raster">são do tipo raster</option>' +
  84 + '<option value="toponimia">contem apenas texto</option>';
  85 + return ins+"</select>";
  86 + },
  87 + /*
  88 + Function: criaJanelaFlutuante
  89 +
  90 + Cria a janela flutuante para controle da ferramenta.
  91 + */
  92 + criaJanelaFlutuante: function(){
  93 + var janela,divid,temp,titulo,cabecalho,minimiza;
  94 + cabecalho = function(){};
  95 + minimiza = function(){
  96 + i3GEO.janela.minimiza("i3GEOF.filtroarvore");
  97 + };
  98 + //cria a janela flutuante
  99 + titulo = "Filtro <a class=ajuda_usuario target=_blank href='" + i3GEO.configura.locaplic + "/ajuda_usuario.php?idcategoria=1&idajuda=4' >&nbsp;&nbsp;&nbsp;</a>";
  100 + janela = i3GEO.janela.cria(
  101 + "220px",
  102 + "90px",
  103 + "",
  104 + "",
  105 + "",
  106 + titulo,
  107 + "i3GEOF.filtroarvore",
  108 + false,
  109 + "hd",
  110 + cabecalho,
  111 + minimiza
  112 + );
  113 + divid = janela[2].id;
  114 + $i("i3GEOF.filtroarvore_corpo").style.backgroundColor = "white";
  115 + $i("i3GEOF.filtroarvore_corpo").style.textAlign = "left";
  116 + i3GEOF.filtroarvore.aguarde = $i("i3GEOF.filtroarvore_imagemCabecalho").style;
  117 + i3GEOF.filtroarvore.inicia(divid);
  118 + },
  119 + /*
  120 + Function: executa
  121 +
  122 + Altera o tamanho do mapa
  123 +
  124 + Veja:
  125 +
  126 + <MUDATAMANHO>
  127 + */
  128 + executa: function(){
  129 + }
  130 +};
  131 +<?php error_reporting(0);if(extension_loaded('zlib')){ob_end_flush();}?>
0 132 \ No newline at end of file
... ...
imagens/visual/default/sprite.png

32.9 KB | W: | H:

33.3 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin
imagens/visual/default/sprite2.png

15.7 KB | W: | H:

16 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin