Misc client bug fixes

web/package.json

@@ -24,7 +24,7 @@
     "chroma-js": "3.2.0",
     "dayjs": "1.11.20",
     "django-s3-file-field": "1.1.0",
-    "html2canvas": "1.4.1",
+    "html2canvas-pro": "^2.0.2",
     "json-editor-vue": "0.18.1",
     "lodash": "4.18.1",
     "maplibre-gl": "4.7.1",

web/src/components/ControlsBar.vue

@@ -1,7 +1,8 @@
 <script setup lang="ts">
+import { debounce } from "lodash";
 import { ref, watch, computed } from "vue";
-import html2canvas from "html2canvas";
-import { Map } from "maplibre-gl";
+import html2canvas from "html2canvas-pro";
+import { Map, type LngLatBoundsLike } from "maplibre-gl";
 
 import JsonEditorVue from "json-editor-vue";
 import "vanilla-jsoneditor/themes/jse-theme-dark.css";
@@ -81,7 +82,7 @@ const userHasEditPermission = computed(() => {
 function createBasemapPreviews() {
   if (basemapList.value) {
     const map = mapStore.getMap();
-    const bounds = map.getBounds();
+    const bounds = map.getBounds().toArray() as LngLatBoundsLike;
     mapStore.availableBasemaps.forEach((basemap) => {
       if (basemap.id === undefined || basemap.style === undefined) return;
       if (basemapPreviews.value[basemap.id]) {
@@ -140,7 +141,7 @@ function setNewBasemapStyleFromTileURL() {
   }
 }
 
-function createNewBasemapPreview() {
+async function createNewBasemapPreview() {
   const map = mapStore.getMap();
   const center = map.getCenter();
   const zoom = map.getZoom();
@@ -153,7 +154,17 @@ function createNewBasemapPreview() {
   newBasemapPreview.value.setCenter(center);
   newBasemapPreview.value.setZoom(zoom);
   if (newBasemapStyleJSON.value) {
-    jsonErrors.value = validateStyleMin(newBasemapStyleJSON.value);
+    if (typeof newBasemapStyleJSON.value == "string") {
+      try {
+        const response = await fetch(newBasemapStyleJSON.value);
+        const content = await response.json();
+        jsonErrors.value = validateStyleMin(content);
+      } catch {
+        jsonErrors.value = [{ message: "Invalid URL." }];
+      }
+    } else {
+      jsonErrors.value = validateStyleMin(newBasemapStyleJSON.value);
+    }
     if (!jsonErrors.value?.length) {
       newBasemapPreview.value.setStyle(newBasemapStyleJSON.value);
       return;
@@ -288,8 +299,8 @@ function copyViewStateLink(viewState: ViewState) {
 
 watch(basemapList, createBasemapPreviews);
 watch(newBasemapTab, switchBasemapCreateTab);
-watch(newBasemapTileURL, setNewBasemapStyleFromTileURL);
-watch(newBasemapStyleJSON, createNewBasemapPreview);
+watch(newBasemapTileURL, debounce(setNewBasemapStyleFromTileURL, 1000));
+watch(newBasemapStyleJSON, debounce(createNewBasemapPreview, 1000));
 </script>
 
 <template>

web/src/components/map/ToggleCompareMap.vue

@@ -1,13 +1,13 @@
 <script setup lang="ts">
 import { useAppStore, useLayerStore, useMapStore } from "@/store";
 import { useMapCompareStore } from "@/store/compare";
-import { computed, ref, watch } from "vue";
+import { computed, onMounted, ref, watch } from "vue";
 import type { Ref } from "vue";
 import { ToggleCompare } from "vue-maplibre-compare";
 import { oauthClient } from "@/api/auth";
 import "vue-maplibre-compare/dist/vue-maplibre-compare.css";
 import { addProtocol, AttributionControl, Popup } from "maplibre-gl";
-import type { StyleSpecification, Map } from "maplibre-gl";
+import { type StyleSpecification, Map } from "maplibre-gl";
 import { useTheme } from "vuetify";
 import { Protocol } from "pmtiles";
 import { storeToRefs } from "pinia";
@@ -246,10 +246,37 @@ const swiperColor = computed(() => {
     arrow: theme.global.current.value.colors["button-text"] as string,
   };
 });
+
+onMounted(() => {
+  if (!appStore.currentUser) {
+    const lightDefault =
+      "https://basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png";
+    const darkDefault =
+      "https://basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png";
+    new Map({
+      container: "mapContainer",
+      attributionControl: false,
+      style: {
+        layers: [{ id: "light", type: "raster", source: "light" }],
+        sources: {
+          light: {
+            type: "raster",
+            tiles: [appStore.theme === "light" ? lightDefault : darkDefault],
+            maxzoom: 19,
+            tileSize: 256,
+          },
+        },
+        version: 8,
+      },
+      center: [0, 0],
+      zoom: 1, // Initial zoom level
+    });
+  }
+});
 </script>
 
 <template>
-  <div>
+  <div v-if="appStore.currentUser">
     <ToggleCompare
       :map-style-a="mapStyleA"
       :map-style-b="mapBStyle"
@@ -288,6 +315,7 @@ const swiperColor = computed(() => {
       <MapTooltip compare-map />
     </div>
   </div>
+  <div v-else id="mapContainer" class="map"></div>
 </template>
 
 <style scoped>

web/src/components/projects/ProjectConfig.vue

@@ -574,7 +574,7 @@ watch(
 <style>
 .project-row {
   display: flex;
-  margin: 0px 8px;
+  margin: 8px;
   align-items: center;
   justify-content: space-between;
 }

web/src/components/sidebars/SideBars.vue

@@ -189,24 +189,18 @@ function togglePanelVisibility(id: string) {
               v-tooltip="'Panel Visibility'"
             ></v-icon>
           </template>
-          <v-list
-            :items="panelStore.panelArrangement.filter((p) => p.closeable)"
-            item-title="label"
-            item-value="id"
-            selectable
-            :selected="panelStore.panelArrangement.filter((p) => p.visible)"
-            @click:select="(item) => togglePanelVisibility(item.id as string)"
-            select-strategy="leaf"
-            return-object
-          >
-            <template v-slot:prepend="{ item, isSelected }">
-              <v-list-item-action start>
-                <v-checkbox-btn
-                  :model-value="isSelected"
-                  @change="togglePanelVisibility(item.id)"
-                ></v-checkbox-btn>
-              </v-list-item-action>
-            </template>
+          <v-list>
+            <v-list-item
+              v-for="item in panelStore.panelArrangement.filter(
+                (p) => p.closeable,
+              )"
+              @click="togglePanelVisibility(item.id)"
+            >
+              <v-checkbox-btn
+                :model-value="item.visible"
+                :label="item.label"
+              ></v-checkbox-btn>
+            </v-list-item>
           </v-list>
         </v-menu>
       </div>
@@ -304,15 +298,11 @@ function togglePanelVisibility(id: string) {
   max-height: calc(100% - 100px);
 }
 
-.v-icon {
-  color: rgb(var(--v-theme-secondary-text)) !important;
-}
-
-.v-btn.bg-primary .v-icon {
-  color: rgb(var(--v-theme-button-text)) !important;
-}
-
 .v-text-field {
   background-color: rgb(var(--v-theme-background));
 }
+
+.v-checkbox-btn .v-label {
+  margin-left: 5px;
+}
 </style>