[fix] Adds and Remove Layers properly (shift and pop array)

laravel_app/resources/views/livewire/projects/tabs/settings.blade.php

@@ -1,91 +1,92 @@
 <div class="flex flex-col divide-y space-y-4 m-2"
      x-data="{
-    processFile(file, action='add') {
+                processFile(file,type) {
-        let filetype = ['json','geojson'];
+                    let filetype = ['json','geojson'];
-        if(!filetype.includes(file.name.split('.').pop())) return;
+                    if(!filetype.includes(file.name.split('.').pop())) return;
-        const reader = new FileReader();
+                    const reader = new FileReader();
-        reader.onload = (event) => {
+                    reader.onload = (event) => {
-            const data = event.target.result;
+                        const data = event.target.result;
-            try {
+                        try {
-                switch(action){
+                            this.showMap(JSON.parse(data),type);
-                    case 'add':
+                        } catch (error) {
-                        this.showMap(JSON.parse(data));
+                            console.error('Error parsing GeoJSON:', error);
-                        break;
+                        }
-                    case 'remove':
+                    };
-                        this.removeLayer(JSON.parse(data));
+                    reader.readAsText(file);
-                        break;
+                },
-                    default:
+                initMap(){
-                        console.log('No action provided');
+                    if(window.geoJsonMap) return;
-                        break;
+                    try{
+                        let map = document.getElementById('map');
+                        map.style.height = '300px';
+                        window.geoJsonMap = L.map('map').setView([51.505, -0.09], 13);
+                        L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
+                                maxZoom: 19,
+                                attribution: '&copy; <a href=`http://www.openstreetmap.org/copyright`>OpenStreetMap</a>'
+                             }).addTo(window.geoJsonMap);
+                    }catch(err){
+                        console.log(err);
+                    }
+                },
+                initMapLayer(){
+                    if(window.geoJsonMap && window.geoJsonLayer) return;
+                    window.geoJsonLayer = L.geoJSON();
+                    window.geoJsonLayer.addTo(window.geoJsonMap);
+                    window.mapLayers=[];
+                },
+                showMap(data,type){
+                    this.initMap();
+                    this.initMapLayer();
+                    this.addLayer(data,type);
+                    console.log('GeoJson loaded on the map.');
+                },
+                addLayer(layerData,type){
+                    switch(type){
+                        case 'pivot_file':
+                            window.mapLayers.unshift(layerData);
+                            break;
+                        case 'span_file':
+                            window.mapLayers.push(layerData);
+                            break;
+                        default:
+                            break;
+                    }
+                    this.updateLayer(layerData);
+                    window.map.focus();
+                },
+                updateLayer(layerData){
+                    var basicColors = ['red', 'blue', 'orange', 'purple'];
+                    var randomIndex = Math.floor(Math.random() * basicColors.length);
+                    window.geoJsonLayer.addData(layerData);
+                    window.geoJsonLayer.setStyle(function(feature) {
+                        return {
+                            color: basicColors[randomIndex],
+                            weight: 2,
+                            opacity: 0.5,
+                            fillOpacity: 0.5
+                        };
+                    });
+                    window.geoJsonMap.fitBounds(geoJsonLayer.getBounds());
+
+                },
+                removeLayer(type){
+                    window.geoJsonLayer.clearLayers();
+                    switch(type){
+                        case 'pivot_file':
+                            window.mapLayers.shift();
+                            break;
+                        case 'span_file':
+                            window.mapLayers.pop();
+                            break;
+                        default:
+                            break;
+                    }
+                    window.mapLayers.forEach((data) => this.updateLayer(data));
+                    window.map.focus();
+
                 }
-
+             }"
-            } catch (error) {
+     x-on:livewire-upload-finish.document="processFile($event.target.files[0],$event.target.closest('[id]').id);"
-                console.error('Error parsing GeoJSON:', error);
-            }
-        };
-        reader.readAsText(file);
-    },
-    initMap(){
-        if(window.geoJsonMap) return;
-        try{
-            let map = document.getElementById('map');
-            map.style.height = '300px';
-            window.geoJsonMap = L.map('map').setView([51.505, -0.09], 13);
-            L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
-                    maxZoom: 19,
-                    attribution: '&copy; <a href=`http://www.openstreetmap.org/copyright`>OpenStreetMap</a>'
-                 }).addTo(window.geoJsonMap);
-        }catch(err){
-            console.log(err);
-        }
-    },
-    initMapLayer(){
-        if(window.geoJsonMap && window.geoJsonLayer) return;
-        window.geoJsonLayer = L.geoJSON();
-        window.geoJsonLayer.addTo(window.geoJsonMap);
-        window.mapLayers=[];
-    },
-    showMap(data){
-        this.initMap();
-        this.initMapLayer();
-        this.addLayer(data);
-        console.log('GeoJson loaded on the map.');
-    },
-    addLayer(layerData){
-        window.mapLayers.push(layerData);
-        this.updateLayer(layerData);
-    },
-    updateLayer(layerData){
-        var basicColors = ['red', 'blue', 'orange', 'purple'];
-        var randomIndex = Math.floor(Math.random() * basicColors.length);
-        window.geoJsonLayer.addData(layerData);
-        window.geoJsonLayer.setStyle(function(feature) {
-            return {
-                color: basicColors[randomIndex],
-                weight: 2,
-                opacity: 0.5,
-                fillOpacity: 0.5
-            };
-        });
-        window.geoJsonMap.fitBounds(geoJsonLayer.getBounds());
-    },
-    removeLayer(type){
-        window.geoJsonLayer.clearLayers();
-        switch(type){
-            case 'pivot_file':
-                window.mapLayers.shift();
-                break;
-            case 'span_file':
-                window.mapLayers.pop();
-                break;
-            default:
-                break;
-        }
-        window.mapLayers.forEach((data) => this.updateLayer(data));
-
-    }
- }"
-     x-on:livewire-upload-finish.document="processFile($event.target.files[0]);"
 >
     <div id="edit" class="flex flex-col md:flex-row gap-2">
         <div class="flex flex-col md:w-1/3">

laravel_app/resources/views/vendor/livewire-dropzone/livewire/dropzone.blade.php

@@ -8,7 +8,7 @@
     @dragenter.prevent="onDragenter($event)"
     @dragleave.prevent="onDragleave($event)"
     @dragover.prevent="onDragover($event)"
-    @drop.prevent="onDrop"
+    @drop.prevent="onDrop($event,$event.target.closest('[id]').id)"
     class="w-full antialiased"
 >
     <div class="flex flex-col items-start h-full w-full justify-center bg-white dark:bg-gray-800 dark:border-gray-600 dark:hover:border-gray-500">
@@ -136,7 +136,7 @@ class="hidden"
                 isDropped: false,
                 isLoading: false,
 
-                onDrop(e) {
+                onDrop(e,t) {
                     this.isDropped = true;
                     this.isDragging = false;
 
@@ -144,7 +144,7 @@ class="hidden"
                     const args = ['upload', file, () => {
                         // Upload completed
                         this.isLoading = false;
-                        this.processFile(file);
+                        this.processFile(file,t);
                     }, (error) => {
                         // An error occurred while uploading
                         console.log('livewire-dropzone upload error', error);