Refactoring(layout): move infobox to right modal; fix minimap

Logic/GeoOperations.ts

@@ -4,6 +4,7 @@ import * as turf from "@turf/turf"
 import { AllGeoJSON, booleanWithin, Coord, Lines } from "@turf/turf"
 import {
     Feature,
+    FeatureCollection,
     GeoJSON,
     Geometry,
     LineString,
@@ -243,7 +244,7 @@ export class GeoOperations {
         })
     }
 
-    static bbox(feature: any): Feature<LineString, {}> {
+    static bbox(feature: Feature | FeatureCollection): Feature<LineString, {}> {
         const [lon, lat, lon0, lat0] = turf.bbox(feature)
         return {
             type: "Feature",

UI/Base/FloatOver.svelte

@@ -9,7 +9,7 @@
 </script>
 
 <div class="absolute top-0 right-0 w-screen h-screen overflow-auto" style="background-color: #00000088">
-  <div class="flex flex-col m-4 sm:m-6 md:m-8 p-4 sm:p-6 md:m-8 normal-background rounded normal-background">
+  <div class="flex flex-col m-4 sm:m-6 p-4 sm:p-6 md:m-8 rounded normal-background">
     <slot name="close-button">
       <div class="w-8 h-8 absolute right-10 top-10 cursor-pointer" on:click={() => dispatch("close")}>
         <XCircleIcon />

UI/Base/ModalRight.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+  import { createEventDispatcher } from "svelte";
+  import { XCircleIcon } from "@rgossiaux/svelte-heroicons/solid";
+
+  /**
+   * The slotted element will be shown on the right side
+   */
+  const dispatch = createEventDispatcher<{ close }>();
+</script>
+
+<div class="absolute top-0 right-0 h-screen overflow-auto w-full md:w-6/12 lg:w-5/12 xl:w-4/12">
+  <div class="flex flex-col m-0 p-4 sm:p-6 normal-background normal-background">
+    <slot name="close-button">
+      <div class="w-8 h-8 absolute right-10 top-10 cursor-pointer" on:click={() => dispatch("close")}>
+        <XCircleIcon />
+      </div>
+    </slot>
+    <slot></slot>
+  </div>
+</div>

UI/Popup/MinimapViz.ts

@@ -6,6 +6,9 @@ import { MapLibreAdaptor } from "../Map/MapLibreAdaptor"
 import SvelteUIElement from "../Base/SvelteUIElement"
 import MaplibreMap from "../Map/MaplibreMap.svelte"
 import ShowDataLayer from "../Map/ShowDataLayer"
+import LayerConfig from "../../Models/ThemeConfig/LayerConfig"
+import { GeoOperations } from "../../Logic/GeoOperations"
+import { BBox } from "../../Logic/BBox"
 
 export class MinimapViz implements SpecialVisualization {
     funcName = "minimap"
@@ -27,7 +30,9 @@ export class MinimapViz implements SpecialVisualization {
     constr(
         state: SpecialVisualizationState,
         tagSource: UIEventSource<Record<string, string>>,
-        args: string[]
+        args: string[],
+        feature: Feature,
+        layer: LayerConfig
     ) {
         if (state === undefined) {
             return undefined
@@ -77,6 +82,12 @@ export class MinimapViz implements SpecialVisualization {
                 zoom = parsed
             }
         }
+        featuresToShow.addCallbackAndRunD((features) => {
+            const bboxGeojson = GeoOperations.bbox({ features, type: "FeatureCollection" })
+            const [lon, lat] = GeoOperations.centerpointCoordinates(bboxGeojson)
+            mla.bounds.setData(BBox.get(bboxGeojson))
+            mla.location.setData({ lon, lat })
+        })
         mla.zoom.setData(zoom)
         mla.allowMoving.setData(false)
         mla.allowZooming.setData(false)
@@ -87,8 +98,8 @@ export class MinimapViz implements SpecialVisualization {
             state.layout.layers
         )
 
-        return new SvelteUIElement(MaplibreMap, { map: mlmap }).SetStyle(
+        return new SvelteUIElement(MaplibreMap, { map: mlmap })
-            "overflow: hidden; pointer-events: none;"
+            .SetClass("h-40 rounded")
-        )
+            .SetStyle("overflow: hidden; pointer-events: none;")
     }
 }

UI/ThemeViewGUI.svelte

@@ -30,6 +30,7 @@
   import LoginButton from "./Base/LoginButton.svelte";
   import CopyrightPanel from "./BigComponents/CopyrightPanel";
   import { DownloadPanel } from "./BigComponents/DownloadPanel";
+  import ModalRight from "./Base/ModalRight.svelte";
 
   export let state: ThemeViewState;
   let layout = state.layout;
@@ -99,10 +100,10 @@
 </div>
 
 {#if $selectedElement !== undefined && $selectedLayer !== undefined}
-  <FloatOver on:close={() => {selectedElement.setData(undefined)}}>
+  <ModalRight on:close={() => {selectedElement.setData(undefined)}}>
     <SelectedElementView layer={$selectedLayer} selectedElement={$selectedElement}
                          tags={$selectedElementTags} state={state} />
-  </FloatOver>
+  </ModalRight>
 
 {/if}
 

css/index-tailwind-output.css

@@ -683,13 +683,6 @@ video {
   position: sticky;
 }
 
-.inset-0 {
-  top: 0px;
-  right: 0px;
-  bottom: 0px;
-  left: 0px;
-}
-
 .left-24 {
   left: 6rem;
 }
@@ -702,26 +695,6 @@ video {
   top: 14rem;
 }
 
-.top-12 {
-  top: 3rem;
-}
-
-.left-3 {
-  left: 0.75rem;
-}
-
-.top-3 {
-  top: 0.75rem;
-}
-
-.right-2 {
-  right: 0.5rem;
-}
-
-.bottom-3 {
-  bottom: 0.75rem;
-}
-
 .top-2 {
   top: 0.5rem;
 }
@@ -730,10 +703,6 @@ video {
   right: 0.75rem;
 }
 
-.bottom-0 {
-  bottom: 0px;
-}
-
 .top-0 {
   top: 0px;
 }
@@ -742,6 +711,10 @@ video {
   left: 0px;
 }
 
+.bottom-0 {
+  bottom: 0px;
+}
+
 .right-0 {
   right: 0px;
 }
@@ -843,6 +816,11 @@ video {
   margin-bottom: 0.5rem;
 }
 
+.mx-1 {
+  margin-left: 0.25rem;
+  margin-right: 0.25rem;
+}
+
 .my-4 {
   margin-top: 1rem;
   margin-bottom: 1rem;
@@ -863,6 +841,10 @@ video {
   margin-bottom: 0.75rem;
 }
 
+.mb-4 {
+  margin-bottom: 1rem;
+}
+
 .mr-2 {
   margin-right: 0.5rem;
 }
@@ -879,6 +861,10 @@ video {
   margin-top: 1rem;
 }
 
+.mt-6 {
+  margin-top: 1.5rem;
+}
+
 .mt-2 {
   margin-top: 0.5rem;
 }
@@ -887,18 +873,10 @@ video {
   margin-left: 0.5rem;
 }
 
-.mb-4 {
-  margin-bottom: 1rem;
-}
-
 .ml-4 {
   margin-left: 1rem;
 }
 
-.mt-6 {
-  margin-top: 1.5rem;
-}
-
 .mb-24 {
   margin-bottom: 6rem;
 }
@@ -975,10 +953,6 @@ video {
   box-sizing: border-box;
 }
 
-.box-content {
-  box-sizing: content-box;
-}
-
 .block {
   display: block;
 }
@@ -1083,6 +1057,10 @@ video {
   height: 12rem;
 }
 
+.h-40 {
+  height: 10rem;
+}
+
 .max-h-20vh {
   max-height: 20vh;
 }
@@ -1095,10 +1073,6 @@ video {
   max-height: 1.75rem;
 }
 
-.max-h-8 {
-  max-height: 2rem;
-}
-
 .max-h-24 {
   max-height: 6rem;
 }
@@ -1107,14 +1081,6 @@ video {
   min-height: 8rem;
 }
 
-.w-full {
-  width: 100%;
-}
-
-.w-6 {
-  width: 1.5rem;
-}
-
 .w-8 {
   width: 2rem;
 }
@@ -1135,6 +1101,14 @@ video {
   width: 3rem;
 }
 
+.w-6 {
+  width: 1.5rem;
+}
+
+.w-full {
+  width: 100%;
+}
+
 .w-screen {
   width: 100vw;
 }
@@ -1389,6 +1363,14 @@ video {
   word-break: break-all;
 }
 
+.rounded-xl {
+  border-radius: 0.75rem;
+}
+
+.rounded-lg {
+  border-radius: 0.5rem;
+}
+
 .rounded-3xl {
   border-radius: 1.5rem;
 }
@@ -1401,14 +1383,6 @@ video {
   border-radius: 9999px;
 }
 
-.rounded-xl {
-  border-radius: 0.75rem;
-}
-
-.rounded-lg {
-  border-radius: 0.5rem;
-}
-
 .rounded-md {
   border-radius: 0.375rem;
 }
@@ -1462,6 +1436,11 @@ video {
   border-style: dotted;
 }
 
+.border-gray-500 {
+  --tw-border-opacity: 1;
+  border-color: rgb(107 114 128 / var(--tw-border-opacity));
+}
+
 .border-black {
   --tw-border-opacity: 1;
   border-color: rgb(0 0 0 / var(--tw-border-opacity));
@@ -1497,21 +1476,6 @@ video {
   border-color: rgb(59 130 246 / var(--tw-border-opacity));
 }
 
-.border-gray-200 {
-  --tw-border-opacity: 1;
-  border-color: rgb(229 231 235 / var(--tw-border-opacity));
-}
-
-.border-gray-500 {
-  --tw-border-opacity: 1;
-  border-color: rgb(107 114 128 / var(--tw-border-opacity));
-}
-
-.border-red-500 {
-  --tw-border-opacity: 1;
-  border-color: rgb(239 68 68 / var(--tw-border-opacity));
-}
-
 .border-opacity-50 {
   --tw-border-opacity: 0.5;
 }
@@ -1566,14 +1530,14 @@ video {
   background-color: rgb(254 202 202 / var(--tw-bg-opacity));
 }
 
-.p-4 {
-  padding: 1rem;
-}
-
 .p-1 {
   padding: 0.25rem;
 }
 
+.p-4 {
+  padding: 1rem;
+}
+
 .p-2 {
   padding: 0.5rem;
 }
@@ -1609,10 +1573,6 @@ video {
   padding-right: 1rem;
 }
 
-.pl-3 {
-  padding-left: 0.75rem;
-}
-
 .pb-12 {
   padding-bottom: 3rem;
 }
@@ -1669,6 +1629,10 @@ video {
   padding-right: 1rem;
 }
 
+.pl-3 {
+  padding-left: 0.75rem;
+}
+
 .pl-1 {
   padding-left: 0.25rem;
 }
@@ -1701,10 +1665,6 @@ video {
   text-align: justify;
 }
 
-.align-baseline {
-  vertical-align: baseline;
-}
-
 .align-middle {
   vertical-align: middle;
 }
@@ -1714,16 +1674,16 @@ video {
   line-height: 1.75rem;
 }
 
-.text-lg {
-  font-size: 1.125rem;
-  line-height: 1.75rem;
-}
-
 .text-2xl {
   font-size: 1.5rem;
   line-height: 2rem;
 }
 
+.text-lg {
+  font-size: 1.125rem;
+  line-height: 1.75rem;
+}
+
 .text-4xl {
   font-size: 2.25rem;
   line-height: 2.5rem;
@@ -2503,10 +2463,6 @@ input {
 }
 
 @media (min-width: 640px) {
-  .sm\:top-3 {
-    top: 0.75rem;
-  }
-
   .sm\:m-6 {
     margin: 1.5rem;
   }
@@ -2532,12 +2488,6 @@ input {
     height: 6rem;
   }
 
-  .sm\:w-fit {
-    width: -webkit-fit-content;
-    width: -moz-fit-content;
-    width: fit-content;
-  }
-
   .sm\:w-24 {
     width: 6rem;
   }
@@ -2566,30 +2516,10 @@ input {
     padding: 1.5rem;
   }
 
-  .sm\:p-0\.5 {
-    padding: 0.125rem;
-  }
-
-  .sm\:p-1\.5 {
-    padding: 0.375rem;
-  }
-
-  .sm\:p-0 {
-    padding: 0px;
-  }
-
-  .sm\:p-1 {
-    padding: 0.25rem;
-  }
-
   .sm\:p-2 {
     padding: 0.5rem;
   }
 
-  .sm\:pl-0 {
-    padding-left: 0px;
-  }
-
   .sm\:pt-1 {
     padding-top: 0.25rem;
   }
@@ -2659,12 +2589,12 @@ input {
     height: 3rem;
   }
 
-  .md\:w-1\/3 {
+  .md\:w-2\/6 {
     width: 33.333333%;
   }
 
-  .md\:w-2\/6 {
+  .md\:w-6\/12 {
-    width: 33.333333%;
+    width: 50%;
   }
 
   .md\:w-auto {
@@ -2687,14 +2617,6 @@ input {
     border-top-width: 2px;
   }
 
-  .md\:p-1 {
-    padding: 0.25rem;
-  }
-
-  .md\:p-2 {
-    padding: 0.5rem;
-  }
-
   .md\:p-4 {
     padding: 1rem;
   }
@@ -2753,6 +2675,10 @@ input {
     width: 16.666667%;
   }
 
+  .lg\:w-5\/12 {
+    width: 41.666667%;
+  }
+
   .lg\:w-1\/3 {
     width: 33.333333%;
   }
@@ -2770,4 +2696,8 @@ input {
   .xl\:inline {
     display: inline;
   }
+
+  .xl\:w-4\/12 {
+    width: 33.333333%;
+  }
 }