Major Saving Overhaul (Final Iteration 1)

Ensure restoration of event listeners on loading of network. Fixes issues #30 and #31 This Update mostly contains UI improvements to the saved coordinates container. *could still be added to the actual save data...
satellitecomponent · Jan 31, 2024 · 5ecb058 · 5ecb058
1 parent 39e021a
commit 5ecb058
Show file tree

Hide file tree

Showing 7 changed files with 371 additions and 244 deletions.
diff --git a/index.html b/index.html
diff --git a/js/dropdown/displaysavedcoords.js b/js/dropdown/displaysavedcoords.js
@@ -1,61 +1,86 @@
 let selectedCoordinateDiv = null;  // Global variable to keep track of the selected div
+let selectedCoordinateIndex = null; // Global variable to keep track of the selected index
 
-function displaySavedCoordinates() {
-    const savedViews = getSavedViewsFromCache();
-    const container = document.getElementById('savedCoordinatesContainer');
+function distributeCoordinates(savedViews) {
+    const mainCount = Math.round(savedViews.length * 0.50); // 50% for main
+    const topCount = Math.round(savedViews.length * 0.30); // 35% for top
+    // For the bottom, we use the remaining views
+    const bottomCount = savedViews.length - mainCount - topCount; // 15% for bottom
+
+    return {
+        mainViews: savedViews.slice(0, mainCount),
+        topViews: savedViews.slice(mainCount, mainCount + topCount),
+        bottomViews: savedViews.slice(mainCount + topCount)
+    };
+}
+
+function appendViewsToContainer(views, containerId, startIndex) {
+    const container = document.getElementById(containerId);
     container.innerHTML = '';
 
-    savedViews.forEach((view, index) => {
+    views.forEach((view, index) => {
+        const globalIndex = startIndex + index;
         const coordElement = document.createElement('div');
         coordElement.textContent = `${view.title}`;
         coordElement.classList.add('saved-coordinate-item');
 
         coordElement.addEventListener('click', () => {
             neuriteReturnToSavedView(view);
 
-            // Remove 'selected-coordinate' class from all divs
+            // Update selected state
             document.querySelectorAll('.saved-coordinate-item').forEach(div => {
                 div.classList.remove('selected-coordinate');
+                div.style.transform = ''; // Reset transform
             });
 
-            // Add 'selected-coordinate' class to the clicked div
             coordElement.classList.add('selected-coordinate');
-            selectedCoordinateIndex = index;
+            coordElement.style.transform = 'scale(0.95)'; // Scale down for selected
+            selectedCoordinateIndex = globalIndex;
+            selectedCoordinateDiv = coordElement;
+        });
+
+        // Reset the scale when mouse leaves the selected item
+        coordElement.addEventListener('mouseleave', () => {
+            if (coordElement.classList.contains('selected-coordinate')) {
+                coordElement.style.transform = 'scale(1)';
+            }
         });
 
         container.appendChild(coordElement);
     });
 }
 
+function displaySavedCoordinates() {
+    const savedViews = getSavedViewsFromCache();
+    const { mainViews, topViews, bottomViews } = distributeCoordinates(savedViews);
+
+    appendViewsToContainer(mainViews, 'savedCoordinatesContainer', 0);
+    appendViewsToContainer(topViews, 'savedCoordinatesContainerTop', mainViews.length);
+    appendViewsToContainer(bottomViews, 'savedCoordinatesContainerBottom', mainViews.length + topViews.length);
+}
+
 document.addEventListener('DOMContentLoaded', () => {
+    // Update the cache
+    updateSavedViewsCache();
+
     displaySavedCoordinates();
 });
 
 document.getElementById('deleteCoordinatesBtn').addEventListener('click', function () {
-    if (selectedCoordinateIndex !== null && savedViews[selectedCoordinateIndex]) {
-        // Remove the selected view from the array
-        savedViews.splice(selectedCoordinateIndex, 1);
-
-        // Update the cache
-        updateSavedViewsCache();
-
-        // Refresh the display of saved coordinates
-        displaySavedCoordinates();
-
-        // Reset the selected coordinate index and div
-        selectedCoordinateIndex = null;
-        selectedCoordinateDiv = null;
+    if (selectedCoordinateIndex !== null) {
+        neuriteDeleteSavedView(selectedCoordinateIndex);
     } else {
         alert('No coordinate selected for deletion.');
     }
 });
 
-document.addEventListener('click', function (event) {
-    if (!event.target.closest('#savedCoordinatesContainer')) {
-        if (selectedCoordinateDiv) {
-            selectedCoordinateDiv.classList.remove('selected-coordinate');
-            selectedCoordinateDiv = null;
-            selectedCoordinateIndex = null;
-        }
+function deselectCoordinate() {
+    // If there's no selected coordinate, exit the function immediately
+    if (!selectedCoordinateDiv) {
+        return;
     }
-});
+
+    selectedCoordinateDiv.classList.remove('selected-coordinate');
+    selectedCoordinateDiv = null;
+    selectedCoordinateIndex = null;
+}
diff --git a/js/dropdown/dropdown_v2_0_1.js b/js/dropdown/dropdown_v2_0_1.js
@@ -305,17 +305,6 @@ document.addEventListener('DOMContentLoaded', function () {
     let selects = document.querySelectorAll('select.custom-select');
     selects.forEach(setupCustomDropdown);
 
-    // Close dropdowns if clicked outside
-    window.addEventListener('click', function (event) {
-        if (!event.target.matches('.select-replacer > div')) {
-            let replacers = document.querySelectorAll('.options-replacer');
-            replacers.forEach(replacer => {
-                replacer.classList.remove('show');
-                replacer.parentNode.classList.add('closed');
-            });
-        }
-    });
-
     let modelSelect = document.querySelector('#model-select');
     if (modelSelect) {
         handleModelSelectChange(modelSelect); // Add specific change listener

diff --git a/js/interface/interface_v2.js b/js/interface/interface_v2.js
@@ -885,6 +885,8 @@ document.addEventListener('wheel', (event) => {
     }
     if (settings.scroll === "zoom") {
         autopilotSpeed = 0;
+        deselectCoordinate();
+
         coordsLive = true;
         let dest = toZ(mousePos);
         regenAmount += Math.abs(event.wheelDelta);

diff --git a/js/mandelbrot/mandelbrot_v1_0_1.js b/js/mandelbrot/mandelbrot_v1_0_1.js
@@ -318,6 +318,7 @@ function recalc_svg(oldSVGpan,oldSVGzoom) {
 
 document.getElementById("body").addEventListener("mousedown", (event) => {
     isPanning = true;
+    deselectCoordinate();
     document.body.style.userSelect = "none"; // Disable text selection
 }, false);
 

diff --git a/js/neuralapi.js b/js/neuralapi.js
@@ -595,6 +595,29 @@ function neuriteReturnToSavedView(savedView, animate = true, speed = 0.1) {
     }
 }
 
+function neuriteDeleteSavedView(index) {
+    // Check if the index is within bounds
+    if (index !== null && savedViews[index]) {
+        // Remove the selected view from the array
+        savedViews.splice(index, 1);
+
+        // Update the cache
+        updateSavedViewsCache();
+
+        // Refresh the display of saved coordinates
+        displaySavedCoordinates();
+
+        // Log the deletion
+        console.log("View deleted at index:", index);
+
+        // Reset the selected coordinate index and div if needed
+        selectedCoordinateIndex = null;
+        selectedCoordinateDiv = null;
+    } else {
+        console.error('No coordinate at index for deletion:', index);
+    }
+}
+
 function listSavedViews() {
     return savedViews.map(view => {
         return {

diff --git a/styles_v1.css b/styles_v1.css
@@ -410,6 +410,7 @@
 
                 .submenu a:hover {
                     background-color: #ddd;
+                    color: #222226;
                 }
 
         input[type="range"] {
@@ -611,6 +612,11 @@ input[type="text"i]:hover {
     display: flex;
     align-items: center; /* Aligns items vertically in the center */
     justify-content: flex-start; /* Aligns items to the start of the flex container */
+    background-color: #222226;
+    padding-left: 8px;
+    padding-right: 8px;
+    border-radius: 4px;
+    margin-bottom: 3px;
 }
 
     .coordinate-field span {
@@ -1024,12 +1030,12 @@ select-replacer > div:first-child {
 
 .scrollable-list {
     height: 149px; /* Adjust this value based on how tall you want your list to be */
-    width: 250px;
+    width: 255px;
     overflow-y: auto;
     overflow-x: hidden;
-    border: 1px solid #000;
     padding: 5px;
     margin-top: 10px;
+    border-top: 2px solid #727272;
 }
 
             .scrollable-list::-webkit-scrollbar {
@@ -1088,44 +1094,111 @@ select-replacer > div:first-child {
 }
 
 .selected-save {
-    background-color: #3b484d; /* Example style */
+    background-color: #3b484d;
     transform: scale(1.05); /* Slightly enlarge the selected save */
     transition: transform 0.3s ease;
 }
 
-#savedCoordinatesContainer {
-    /* Set height to auto to allow height expansion */
-    height: 140px;
+
+
+.top-section, .bottom-section {
+    display: flex;
+    justify-content: flex-start;
+}
+
+.buttons-left, .buttons-right {
+    display: flex;
+    flex-direction: column; /* Stack buttons vertically */
+}
+
+.buttons-right {
+    display: flex;
+    flex-direction: column; /* Stack buttons vertically */
+    border-left: 2px solid #727272;
+    background-color: #222226;
+}
+
+.buttons-left {
+    display: flex;
+    flex-direction: column; /* Stack buttons vertically */
+    width: 45%;
+    background-color: #222226;
+    border-left: 2px solid #727272; /* Thin left border */
+    border-bottom: 2px solid #727272; /* Thin bottom border */
+    margin-bottom: 15px;
+}
+
+.coordinates-container {
+    background-color: #222226; /* Replace with your desired background color */
+    border-top: 2px solid #727272;
+    border-right: 2px solid #727272;
+    border-left: none;
+    border-bottom: none; /* Add if you want a border at the bottom as well */
+    border-radius: 0px 15px 0 0;
+    overflow: hidden;
+    padding-top: 5px;
+}
+
+
+/* General styles for all containers */
+.saved-coordinates-container {
     /* Allow elements to wrap */
     display: flex;
     flex-wrap: wrap;
+}
+
+#savedCoordinatesContainer {
+    /* Specific styles for the main container */
+    height: 140px;
+    align-items: flex-start;
+}
+
+#savedCoordinatesContainerTop {
+    /* Specific styles for the top container */
+    align-items: center;
+    height: 90px;
+    justify-content: flex-end;
+}
+
+#savedCoordinatesContainerBottom {
+    /* Specific styles for the bottom container */
     align-items: center;
+    height: 60px;
+    width: 45%;
 }
 
-    #savedCoordinatesContainer div {
-        /* Styling for each saved view element */
-        background-color: #282828; /* Dark grey */
-        margin: 0; /* No spacing between elements */
-        padding: 3px;
-        border-radius: 0; /* No rounded corners */
-        /* Display settings */
-        white-space: nowrap;
-        font-size: 12px;
+.saved-coordinate-item {
+    /* Styling for each saved view element */
+    background-color: #282828;
+    margin-right: 6px;
+    padding: 3px;
+    border-radius: 5px;
+    white-space: nowrap;
+    font-size: 12px;
+    cursor: pointer;
+    transition: transform 0.3s ease, background-color 0.3s ease, color 0.3s ease;
+}
+
+    /* Hover state */
+    .saved-coordinate-item:hover {
+        background-color: #555;
+        color: #bbb;
+        transform: scale(1.1);
+    }
+
+    /* Selected state - increased specificity */
+    .saved-coordinate-item.selected-coordinate {
+        background-color: #333041;
+        color: white;
+        transform: scale(1); /* Return scale to normal for selected items */
     }
 
 .saved-coordinate-item {
     cursor: pointer; /* Change cursor to indicate clickability */
     transition: background-color 0.3s; /* Smooth transition for background color */
 }
 
-#savedCoordinatesContainer .saved-coordinate-item:hover {
-    background-color: #555; /* Darken on hover */
-}
 
-#savedCoordinatesContainer .selected-coordinate {
-    background-color: #444; /* Different color to indicate selection */
-    color: white;
-}
 
 .highlight {
     border: 2px dashed #aaa;