From 9a282cbce48a6bb58ad699bfea6fb1a8a96cafef Mon Sep 17 00:00:00 2001 From: Pieter Vander Vennet Date: Sun, 16 Apr 2023 04:13:09 +0200 Subject: [PATCH] Refactoring(layout): move infobox to right modal; fix minimap --- Logic/GeoOperations.ts | 3 +- UI/Base/FloatOver.svelte | 2 +- UI/Base/ModalRight.svelte | 20 ++++ UI/Popup/MinimapViz.ts | 19 +++- UI/ThemeViewGUI.svelte | 5 +- css/index-tailwind-output.css | 202 +++++++++++----------------------- 6 files changed, 107 insertions(+), 144 deletions(-) create mode 100644 UI/Base/ModalRight.svelte diff --git a/Logic/GeoOperations.ts b/Logic/GeoOperations.ts index 038b18c81e..c9af7c6e2a 100644 --- a/Logic/GeoOperations.ts +++ b/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 { + static bbox(feature: Feature | FeatureCollection): Feature { const [lon, lat, lon0, lat0] = turf.bbox(feature) return { type: "Feature", diff --git a/UI/Base/FloatOver.svelte b/UI/Base/FloatOver.svelte index 934883a577..af28c54c5c 100644 --- a/UI/Base/FloatOver.svelte +++ b/UI/Base/FloatOver.svelte @@ -9,7 +9,7 @@
-
+
dispatch("close")}> diff --git a/UI/Base/ModalRight.svelte b/UI/Base/ModalRight.svelte new file mode 100644 index 0000000000..b0a11a3606 --- /dev/null +++ b/UI/Base/ModalRight.svelte @@ -0,0 +1,20 @@ + + +
+
+ +
dispatch("close")}> + +
+ + +
+
diff --git a/UI/Popup/MinimapViz.ts b/UI/Popup/MinimapViz.ts index a497fb0263..c6ca940b0e 100644 --- a/UI/Popup/MinimapViz.ts +++ b/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>, - 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( - "overflow: hidden; pointer-events: none;" - ) + return new SvelteUIElement(MaplibreMap, { map: mlmap }) + .SetClass("h-40 rounded") + .SetStyle("overflow: hidden; pointer-events: none;") } } diff --git a/UI/ThemeViewGUI.svelte b/UI/ThemeViewGUI.svelte index 9b66947ae0..02f64d1b67 100644 --- a/UI/ThemeViewGUI.svelte +++ b/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 @@
{#if $selectedElement !== undefined && $selectedLayer !== undefined} - {selectedElement.setData(undefined)}}> + {selectedElement.setData(undefined)}}> - + {/if} diff --git a/css/index-tailwind-output.css b/css/index-tailwind-output.css index 45090b5bfe..dbc66652c3 100644 --- a/css/index-tailwind-output.css +++ b/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 { - width: 33.333333%; + .md\:w-6\/12 { + 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%; + } }