Versão 1.4 - Adição do Changelog, exportações reformuladas e interface mobile melhorada

Author: JuniorRedWolf

CHANGELOG.md

@@ -0,0 +1,19 @@
+# Changelog
+
+Todas as mudanças notáveis no projeto InvMap serão documentadas neste arquivo.
+
+## [v1.4] - 09/01/2026
+### ✔Adicionado
+- **Changelog:** Adicionado arquivo de changelog para documentar todas as mudanças notáveis no projeto InvMap.
+- **Interface Mobile Melhorada:** Novo sistema de menu "hambúrguer" para dispositivos móveis. Os botões agora ficam organizados em uma coluna flutuante com rolagem, melhorando a área de visualização do mapa.
+
+### ⚙ Corrigido
+- **Motor de Exportação:** Substituição do método antigo pela biblioteca `html-to-image`. Agora:
+    - Imagens dentro dos nós são renderizadas corretamente.
+    - Textos digitados em `inputs` e `textareas` aparecem na exportação.
+    - Ícones e estilos CSS são preservados.
+- **Exportação SVG:** Agora gera um arquivo vetorial híbrido (com foreignObject) que mantém a editabilidade e a fidelidade visual.
+- **Correção de Bugs:** Corrigido varios bugs que afetavam negativamente a experiência do mapa.
+
+### 🖊 Alterado
+- Reorganização visual da barra de ferramentas (agora utiliza um wrapper flutuante para melhor posicionamento).

README.md

@@ -12,7 +12,7 @@
 
 <p align="center">
   <img src="https://img.shields.io/badge/license-MIT-blue.svg" alt="License">
-  <img src="https://img.shields.io/badge/version-1.1-brightgreen" alt="Version">
+  <img src="https://img.shields.io/badge/version-1.4-orange" alt="Version">
   <img src="https://img.shields.io/badge/status-ativo-success" alt="Status">
 </p>
 
@@ -36,6 +36,10 @@ Acesse a ferramenta diretamente no seu navegador:
 
 Não há necessidade de instalação ou cadastro. Para um guia detalhado de todas as funcionalidades e atalhos, consulte nosso [artigo](https://sniff.wolfsecurity.com.br/invmap-intro) na wiki do Projeto Sniff.
 
+## 📝 Histórico de Versões
+
+Para ver todas as mudanças e atualizações, consulte o [CHANGELOG](CHANGELOG.md).
+
 ### 🛠️ Desenvolvimento Local
 
 Para executar o InvMap localmente, basta clonar este repositório e abrir o arquivo `index.html` em qualquer navegador.

css/style.css

@@ -72,7 +72,11 @@ body {
     opacity: 0.7;
 }
 
-/* Container principal do mapa */
+/* =================================================== */
+/* ||      ESTILOS PARA OS ELEMENTOS DO MAPA        || */
+/* =================================================== */
+
+/* --- Container principal do mapa --- */
 #svg-container {
     flex-grow: 1;
     background-color: #1a1a1f;
@@ -85,30 +89,58 @@ body {
     stroke-width: 1px;
 }
 
-/* Container flutuante */
-#controls-container {
+/* --- Container flutuante --- */
+#main-controls-wrapper {
     position: absolute;
-    top: 20px;
-    left: 20px;
-    z-index: 5;
-    background-color: rgba(41, 41, 48, 0.1);
-    padding: 8px;
-    border-radius: 25px;
+    top: 10px;
+    left: 10px;
+    z-index: 100;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 10px;
+    pointer-events: none;
+}
+
+#main-controls-wrapper > * {
+    pointer-events: auto;
+}
+
+#mobile-menu-toggle {
+    display: none;
+    width: 40px;
+    height: 40px;
+    background-color: var(--sniff-bg-widget);
+    color: var(--sniff-text-primary);
     border: 1px solid var(--sniff-border-color);
-    backdrop-filter: blur(1px);
+    border-radius: 15px;
+    cursor: pointer;
+    font-size: 1.1rem;
+    box-shadow: 0 4px 6px rgba(0,0,0,0.3);
+    transition: all 0.2s;
+    justify-content: center;
+    align-items: center;
+}
+
+#controls-container {
+    background-color: rgba(41, 41, 48, 0.45);
+    backdrop-filter: blur(5px);
+    border: 1px solid var(--sniff-border-color);
+    border-radius: 20px;
+    padding: 5px;
+    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
 }
 
 #controls {
     display: flex;
+    flex-direction: row;
     align-items: center;
     gap: 8px;
 }
 
-/* Botões de ícone */
-#controls button,
-#controls label,
-#export-map-btn,
-#add-visuals-btn {
+#controls-container button,
+#controls-container label,
+.control-btn {
     width: 36px;
     height: 36px;
     border: none;
@@ -123,94 +155,104 @@ body {
     align-items: center;
 }
 
-#controls button:hover,
-#controls label:hover,
-#export-map-btn:hover,
-#add-visuals-btn:hover {
+#controls-container button:hover,
+#controls-container label:hover,
+.control-btn:hover {
     background-color: rgba(255, 255, 255, 0.1);
     color: var(--sniff-text-primary);
 }
 
-.btn-primary { /* Botão de Salvar */
-    background-color: var(--sniff-accent);
-    color: white;
-}
-.btn-primary:hover {
-    background-color: #e84627;
-    color: white;
-}
-
-.separator { /* Linha separadora */
+.separator {
     width: 1px;
     height: 20px;
     background-color: var(--sniff-border-color);
     margin: 0 4px;
 }
 
-#svg-container:active { cursor: grabbing; }
+@media (max-width: 768px) {
+    #mobile-menu-toggle {
+        display: flex;
+    }
+
+    #controls-container {
+        display: none;
+        width: 50px;
+        max-height: 60vh;
+        overflow-y: auto;
+        overflow-x: hidden;
+        border-radius: 20px;
+        padding: 10px 5px;
+        background-color: rgba(41, 41, 48, 0.45);
+        backdrop-filter: blur(5px);
+    }
+
+    #controls {
+        flex-direction: column;
+        gap: 12px;
+    }
+
+    #controls-container.show {
+        display: block;
+        animation: slideDown 0.3s ease;
+    }
+    
+    .separator { display: none; }
+}
+
+@keyframes slideDown {
+    from { opacity: 0; transform: translateY(-10px); }
+    to { opacity: 1; transform: translateY(0); }
+}
 
 /* =================================================== */
 /* ||      ESTILOS PARA OS ELEMENTOS DO MAPA        || */
 /* =================================================== */
 
-/* Estilo para o grupo do nó (retângulo + texto) */
 .node-group {
     cursor: pointer;
 }
-
-/* Estilo para o corpo do nó (o retângulo) */
 .node-rect {
     fill: #25252c;
     stroke: #2a2a30;
     stroke-width: 2px;
-    rx: 8px; /* Cantos arredondados */
+    rx: 8px;
 }
 .node-group:hover .node-rect {
     stroke: var(--sniff-accent);
 }
-
-/* Estilo para o texto do nó */
 .node-label {
-    fill: var(--sniff-text-primary); /* Cor do texto */
+    fill: var(--sniff-text-primary); 
     font-size: 14px;
-    text-anchor: middle; /* Centraliza o texto horizontalmente */
-    dominant-baseline: middle; /* Centraliza o texto verticalmente */
-    pointer-events: none; /* Faz o texto não interferir no clique do mouse */
+    text-anchor: middle; 
+    dominant-baseline: middle;
+    pointer-events: none;
 }
-
-/* Estilo para a seta */
 .arrowhead-path {
-    fill: #4a4a52; /* Mesma cor da linha */
+    fill: #4a4a52;
 }
-
-/* Estilo para a linha de conexão (edge) */
 .edge-path {
     stroke: #4a4a52;
     stroke-width: 2px;
     fill: none;
-    marker-end: url(#arrowhead); /* Aplica a seta */
+    marker-end: url(#arrowhead);
 }
-
-/* Estilo para a linha de preview de conexão */
 .link-preview-path {
-    stroke: var(--sniff-accent); /* Laranja para destaque */
+    stroke: var(--sniff-accent); 
     stroke-width: 2px;
-    stroke-dasharray: 5, 5; /* Tracejada */
+    stroke-dasharray: 5, 5; 
     fill: none;
     opacity: 0.6;
-    pointer-events: none; /* Ignora cliques para não atrapalhar a seleção do alvo */
-    transition: d 0.05s linear; /* Suaviza levemente o movimento */
+    pointer-events: none;
+    transition: d 0.05s linear;
 }
 
-/* Estilo para o nó selecionado */
 .node-group.selected .node-rect {
     stroke: var(--sniff-accent);
     stroke-width: 3px;
 }
 
 /* Estilos para os elementos HTML dentro do nó SVG */
 .node-foreign-object {
-    /* Garante que o texto possa ser selecionado */
     pointer-events: none;
 }
 
@@ -256,7 +298,7 @@ body {
 
 #add-controls-container.visible {
     opacity: 1;
-    pointer-events: all; /* Ativa a interação quando visível */
+    pointer-events: all;
 }
 
 .add-node-context-btn {
@@ -272,8 +314,6 @@ body {
     font-weight: bold;
     line-height: 1;
     cursor: pointer;
-
-    /* Transição suave para todas as propriedades */
     transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
 }
 
@@ -282,23 +322,20 @@ body {
     transform-origin: center;
 }
 
-/* Estilos para os nós de imagem */
 .node-image-container {
     width: 100%;
     height: 100%;
     border-radius: 6px;
-    overflow: hidden; /* Corta as pontas da imagem */
-    position: relative; /* Contexto para a legenda */
+    overflow: hidden;
+    position: relative;
 }
 
-/* A imagem em si */
 .node-image {
     width: 100%;
     height: 100%;
     object-fit: cover;
 }
 
-/* A legenda da imagem */
 .image-node-label {
     position: absolute;
     bottom: 5px;
@@ -312,7 +349,7 @@ body {
     max-width: 90%;
     white-space: nowrap;
     overflow: hidden;
-    text-overflow: ellipsis; /* Adiciona "..." se o nome for muito longo */
+    text-overflow: ellipsis;
 }
 
 .view-image-btn {
@@ -333,14 +370,12 @@ body {
     transition: all 0.2s ease;
 }
 
-/* Legenda e botão ficam escondidos por padrão */
 .image-node-label,
 .view-image-btn {
     opacity: 0;
     transition: opacity 0.2s ease-in-out;
 }
 
-/* Mostra a legenda e o botão no hover ou quando selecionado */
 .node-group:hover .image-node-label,
 .node-group.selected .image-node-label,
 .node-group:hover .view-image-btn,
@@ -1250,4 +1285,41 @@ body {
 
 @keyframes fadeOut {
     to { opacity: 0; transform: scale(0.95); }
+}
+
+/* Temas */
+/* --- Override para Exportação em Tema Claro --- */
+.forcing-light-theme {
+    background-color: #ffffff !important;
+}
+
+.forcing-light-theme .node-group rect {
+    fill: #f2f2f2 !important;
+    stroke: #333 !important;
+}
+
+.forcing-light-theme text,
+.forcing-light-theme input,
+.forcing-light-theme textarea,
+.forcing-light-theme .text-sticker-label,
+.forcing-light-theme .node-foreign-object,
+.forcing-light-theme h4,
+.forcing-light-theme span,
+.forcing-light-theme div {
+    fill: #000000 !important;
+    color: #000000 !important;
+}
+
+.forcing-light-theme i {
+    color: #000000 !important;
+    text-shadow: none !important;
+}
+
+.forcing-light-theme path, 
+.forcing-light-theme line {
+    stroke: #333 !important;
+}
+.forcing-light-theme input::placeholder,
+.forcing-light-theme textarea::placeholder {
+    color: rgba(0, 0, 0, 0.5) !important;
 }