From 822193b2a364b3f1f76b9387870b46d21fc6c15b Mon Sep 17 00:00:00 2001
From: JanKS <71889336+VileEnd@users.noreply.github.com>
Date: Fri, 7 Jun 2024 07:52:00 +0200
Subject: [PATCH 1/2] Update index.html

fix multiple input error
---
 docs/index.html | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/docs/index.html b/docs/index.html
index 873791f..d2e3a43 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -41,6 +41,9 @@
                 <li class="max-lg:border-b max-lg:py-3 px-3">
                     <button onclick="undoLastOperation()" class="lg:hover:text-[#007bff] text-gray-500 block font-semibold text-[15px]">Undo Last Operation</button>
                 </li>
+                <li class="max-lg:border-b max-lg:py-3 px-3">
+                    <button onclick="recenterTree()" class="lg:hover:text-[#007bff] text-gray-500 block font-semibold text-[15px]">Recenter Tree</button>
+                </li>
             </ul>
         </div>
     </header>
@@ -69,7 +72,7 @@ <h2 class="text-xl font-bold mb-2 mt-4">Tree Stats</h2>
         </div>
         <div class="flex-1 p-4 lg:w-3/5">
             <div class="flex justify-center mb-4 sticky top-[70px] bg-gray-100 z-10 p-4">
-                <input id="valueInput" type="number" placeholder="Enter values..." class="p-2 border border-gray-300 rounded w-full max-w-md bg-white">
+                <input id="valueInput" type="text" placeholder="Enter values..." class="p-2 border border-gray-300 rounded w-full max-w-md bg-white">
             </div>
             <div id="tree-container" class="relative border border-gray-300 rounded p-4 mb-4 flex items-center justify-center" style="height: 400px; max-width: 100%; overflow-x: hidden;">
             </div>
@@ -110,6 +113,7 @@ <h2 class="text-xl font-bold mb-2">Operations</h2>
             <button onclick="searchValue()" class="px-4 py-2 font-bold text-white bg-blue-500 hover:bg-blue-600 rounded shadow-md">Search</button>
             <button onclick="undoLastOperation()" class="px-4 py-2 font-bold text-white bg-blue-500 hover:bg-blue-600 rounded shadow-md">Undo</button>
             <button onclick="resetTree()" class="px-4 py-2 font-bold text-white bg-red-500 hover:bg-red-600 rounded shadow-md">Reset Tree</button>
+            <button onclick="recenterTree()" class="px-4 py-2 font-bold text-white bg-green-500 hover:bg-green-600 rounded shadow-md">Recenter</button>
         </div>
         <button id="toggleBreadcrumb" title="Toggle Menu" class="w-12 h-12 bg-blue-500 text-white rounded-full flex items-center justify-center shadow-md transform transition-transform">
             <svg id="breadcrumbIcon" class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">

From 61280df3d14b70ca9a0c97d35eaab1192b2a3d10 Mon Sep 17 00:00:00 2001
From: JanKS <71889336+VileEnd@users.noreply.github.com>
Date: Fri, 7 Jun 2024 05:57:40 +0000
Subject: [PATCH 2/2] add render tree function

---
 docs/script.js | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/docs/script.js b/docs/script.js
index 93a4b38..1b3c223 100644
--- a/docs/script.js
+++ b/docs/script.js
@@ -613,6 +613,11 @@ function showWelcomeMessage() {
     });
 }
 
+function recenterTree() {
+    currentTransform = d3.zoomIdentity;
+    d3.select("#tree-container").select("svg").call(zoom.transform, currentTransform);
+}
+
 function saveZoomState() {
     const zoomState = {
         transform: currentTransform,