feat(v2.2): Sistema de Histórico (Undo/Redo), Melhorias na Interface e no Sistema de Camadas

Author: JuniorRedWolf

CHANGELOG.md

@@ -2,6 +2,12 @@
 
 Todas as mudanças notáveis no projeto InvMap serão documentadas neste arquivo.
 
+## [v2.2] - 06/05/2026
+### ✔Adicionado
+- **Redo/Undo (Ctrl+Z/Ctrl+Y):** Adicionado sistema de redo e undo para o mapa. Agora é possível desfazer e refazer alterações feitas nos nós e conexões.
+### 🖊 Alterado
+- **Sistema de Camadas Melhorado:** Agora ao invés de usar o DOM para ordenar os elementos, é usado z-index.
+
 ## [v2.1] - 02/04/2026
 ### ✔Adicionado
 - **Detecção de Ambiente:** Adicionado sistema de detecção de ambiente, agora é possível saber se o mapa está sendo usado em modo desktop ou web.

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-2.1-orange" alt="Version">
+  <img src="https://img.shields.io/badge/version-2.2-orange" alt="Version">
   <img src="https://img.shields.io/badge/status-ativo-success" alt="Status">
 </p>
 

css/style.css

@@ -1,4 +1,4 @@
-/* =================================================== */
+/* =================================================== */
 /* ||          INVMAP v2.0 - DESIGN SYSTEM          || */
 /* =================================================== */
 
@@ -1755,4 +1755,72 @@ body.hide-grid-active .grid-pattern-path {
     background: rgba(255, 255, 255, 0.08) !important;
     color: var(--text-main) !important;
     transform: translateY(-2px);
-}
+}
+
+/* =================================================== */
+/* Wrapper de Ações do Mapa (Zoom, Histórico, etc) */
+/* =================================================== */
+
+#map-actions-wrapper {
+    position: absolute;
+    bottom: 20px;
+    right: 20px;
+    z-index: 50;
+    pointer-events: auto;
+    background: var(--bg-panel);
+    backdrop-filter: blur(var(--blur-strength));
+    -webkit-backdrop-filter: blur(var(--blur-strength));
+    border: var(--glass-border);
+    box-shadow: var(--glass-shadow);
+    border-radius: 12px;
+    padding: 6px;
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    transition: opacity 0.3s ease;
+}
+
+.map-action-btn {
+    width: 34px;
+    height: 34px;
+    border: none;
+    background: transparent;
+    color: var(--text-muted);
+    border-radius: 8px;
+    font-size: 0.95rem;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all 0.2s ease;
+}
+
+.map-action-btn:hover {
+    background: rgba(255, 255, 255, 0.08);
+    color: var(--text-main);
+    transform: translateY(-2px);
+    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
+}
+
+.separator-vertical {
+    width: 100%;
+    height: 1px;
+    background: var(--border-subtle);
+    margin: 2px 0;
+}
+
+@media (max-width: 768px) {
+    #map-actions-wrapper {
+        bottom: 15px;
+        right: 15px;
+        padding: 5px;
+        gap: 3px;
+        border-radius: 10px;
+    }
+    .map-action-btn {
+        width: 30px;
+        height: 30px;
+        font-size: 0.85rem;
+        border-radius: 6px;
+    }
+}

index.html

@@ -730,6 +730,25 @@ <h4 style="border: none; padding: 0; justify-content: center; display: flex;">At
             </div>
         </div>
 
+        <div id="map-actions-wrapper">
+            <button id="undo-btn" class="map-action-btn" title="Desfazer (Ctrl+Z)" style="opacity: 0.3; pointer-events: none;">
+                <i class="fas fa-undo"></i>
+            </button>
+            <button id="redo-btn" class="map-action-btn" title="Refazer (Ctrl+Y)" style="opacity: 0.3; pointer-events: none;">
+                <i class="fas fa-redo"></i>
+            </button>
+            <span class="separator-vertical"></span>
+            <button id="zoom-in-btn" class="map-action-btn" title="Aproximar">
+                <i class="fas fa-plus"></i>
+            </button>
+            <button id="zoom-out-btn" class="map-action-btn" title="Afastar">
+                <i class="fas fa-minus"></i>
+            </button>
+            <button id="center-map-btn" class="map-action-btn" title="Centralizar Mapa">
+                <i class="fas fa-crosshairs"></i>
+            </button>
+        </div>
+
         <svg id="mindmap-svg" width="100%" height="100%">
             <defs id="svg-defs">
                 <pattern id="grid-pattern" width="25" height="25" patternUnits="userSpaceOnUse">