Switch to a panel based UI, fix #552

Logic/Actors/StrayClickHandler.ts

@@ -53,18 +53,11 @@ export default class StrayClickHandler {
                     popupAnchor: [0, -45],
                 }),
             })
-            const popup = L.popup({
+
-                autoPan: true,
-                autoPanPaddingTopLeft: [15, 15],
-                closeOnEscapeKey: true,
-                autoClose: true,
-            }).setContent("<div id='strayclick' style='height: 65vh'></div>")
             self._lastMarker.addTo(leafletMap.data)
-            self._lastMarker.bindPopup(popup)
 
             self._lastMarker.on("click", () => {
                 if (leafletMap.data.getZoom() < Constants.userJourney.minZoomLevelToAddNewPoints) {
-                    self._lastMarker.closePopup()
                     leafletMap.data.flyTo(
                         clickCoor,
                         Constants.userJourney.minZoomLevelToAddNewPoints
@@ -72,7 +65,6 @@ export default class StrayClickHandler {
                     return
                 }
 
-                uiToShow.AttachTo("strayclick")
                 uiToShow.Activate()
             })
         })

Models/Constants.ts

@@ -1,7 +1,7 @@
 import { Utils } from "../Utils"
 
 export default class Constants {
-    public static vNumber = "0.24.1"
+    public static vNumber = "0.25.0"
 
     public static ImgurApiKey = "7070e7167f0a25a"
     public static readonly mapillary_client_token_v4 =

UI/Base/ScrollableFullScreen.ts

@@ -1,8 +1,7 @@
-import { UIElement } from "../UIElement"
 import Svg from "../../Svg"
 import Combine from "./Combine"
-import { FixedUiElement } from "./FixedUiElement"
+import {FixedUiElement} from "./FixedUiElement"
-import { UIEventSource } from "../../Logic/UIEventSource"
+import {UIEventSource} from "../../Logic/UIEventSource"
 import Hash from "../../Logic/Web/Hash"
 import BaseUIElement from "../BaseUIElement"
 import Title from "./Title"
@@ -16,12 +15,11 @@ import Title from "./Title"
  *
  *
  */
-export default class ScrollableFullScreen extends UIElement {
+export default class ScrollableFullScreen {
     private static readonly empty = new FixedUiElement("")
     private static _currentlyOpen: ScrollableFullScreen
     public isShown: UIEventSource<boolean>
     private hashToShow: string
-    private _component: BaseUIElement
     private _fullscreencomponent: BaseUIElement
     private _resetScrollSignal: UIEventSource<void> = new UIEventSource<void>(undefined)
 
@@ -37,7 +35,6 @@ export default class ScrollableFullScreen extends UIElement {
             setHash?: true | boolean
         }
     ) {
-        super()
         this.hashToShow = hashToShow
         this.isShown = isShown
 
@@ -45,20 +42,11 @@ export default class ScrollableFullScreen extends UIElement {
             throw "HashToShow should be defined as it is vital for the 'back' key functionality"
         }
 
-        const desktopOptions = {
-            mode: "desktop",
-            resetScrollSignal: this._resetScrollSignal,
-        }
-
         const mobileOptions = {
             mode: "mobile",
             resetScrollSignal: this._resetScrollSignal,
         }
 
-        this._component = this.BuildComponent(
-            title(desktopOptions),
-            content(desktopOptions)
-        ).SetClass("hidden md:block")
         this._fullscreencomponent = this.BuildComponent(
             title(mobileOptions),
             content(mobileOptions).SetClass("pb-20")
@@ -95,17 +83,15 @@ export default class ScrollableFullScreen extends UIElement {
         })
     }
 
-    InnerRender(): BaseUIElement {
-        return this._component
-    }
-
     Destroy() {
-        super.Destroy()
-        this._component.Destroy()
         this._fullscreencomponent.Destroy()
     }
 
-    Activate(): void {
+    /**
+     * Actually show this in the 'fullscreen'-div
+     * @constructor
+     */
+    public Activate(): void {
         this.isShown.setData(true)
         this._fullscreencomponent.AttachTo("fullscreen")
         const fs = document.getElementById("fullscreen")

UI/BigComponents/LeftControls.ts

@@ -45,30 +45,21 @@ export default class LeftControls extends Combine {
                     })
                 ).SetClass("inline-block w-full h-full")
 
-                const featureBox = new VariableUiElement(
-                    feature.map((feature) => {
-                        if (feature === undefined) {
-                            return undefined
-                        }
-                        return new Lazy(() => {
-                            const tagsSource = state.allElements.getEventSourceById(
-                                feature.properties.id
-                            )
-                            return new FeatureInfoBox(tagsSource, currentViewFL.layerDef, state, {
-                                hashToShow: "currentview",
-                                isShown: guiState.currentViewControlIsOpened,
-                            }).SetClass("md:floating-element-width")
-                        })
-                    })
-                )
-                    .SetStyle("width: 40rem")
-                    .SetClass("block")
 
-                return new Toggle(
+                feature.map((feature) => {
-                    featureBox,
+                    if (feature === undefined) {
-                    new MapControlButton(icon),
+                        return undefined
-                    guiState.currentViewControlIsOpened
+                    }
-                )
+                    const tagsSource = state.allElements.getEventSourceById(
+                        feature.properties.id
+                    )
+                    return new FeatureInfoBox(tagsSource, currentViewFL.layerDef, state, {
+                        hashToShow: "currentview",
+                        isShown: guiState.currentViewControlIsOpened,
+                    })
+                })
+
+                return new MapControlButton(icon)
             }).onClick(() => {
                 guiState.currentViewControlIsOpened.setData(true)
             }),
@@ -79,14 +70,9 @@ export default class LeftControls extends Combine {
             )
         )
 
-        const toggledDownload = new Toggle(
+        new AllDownloads(guiState.downloadControlIsOpened, state)
-            new AllDownloads(guiState.downloadControlIsOpened, state).SetClass(
+        const toggledDownload = new MapControlButton(Svg.download_svg()).onClick(() =>
-                "block p-1 rounded-full md:floating-element-width"
+            guiState.downloadControlIsOpened.setData(true)
-            ),
-            new MapControlButton(Svg.download_svg()).onClick(() =>
-                guiState.downloadControlIsOpened.setData(true)
-            ),
-            guiState.downloadControlIsOpened
         )
 
         const downloadButtonn = new Toggle(
@@ -98,21 +84,19 @@ export default class LeftControls extends Combine {
             )
         )
 
-        const toggledFilter = new Toggle(
+
-            new ScrollableFullScreen(
+        new ScrollableFullScreen(
-                () => Translations.t.general.layerSelection.title.Clone(),
+            () => Translations.t.general.layerSelection.title.Clone(),
-                () =>
+            () =>
-                    new FilterView(state.filteredLayers, state.overlayToggles, state).SetClass(
+                new FilterView(state.filteredLayers, state.overlayToggles, state).SetClass(
-                        "block p-1"
+                    "block p-1"
-                    ),
+                ),
-                "filters",
+            "filters",
-                guiState.filterViewIsOpened
-            ).SetClass("rounded-lg md:floating-element-width"),
-            new MapControlButton(Svg.layers_svg()).onClick(() =>
-                guiState.filterViewIsOpened.setData(true)
-            ),
             guiState.filterViewIsOpened
         )
+        const toggledFilter = new MapControlButton(Svg.layers_svg()).onClick(() =>
+                guiState.filterViewIsOpened.setData(true)
+            )
 
         const filterButton = new Toggle(toggledFilter, undefined, state.featureSwitchFilter)
 
@@ -127,18 +111,19 @@ export default class LeftControls extends Combine {
             undefined,
             new Lazy(
                 () =>
-                    new Toggle(
+                {
-                        new ScrollableFullScreen(
+
-                            () => Translations.t.general.attribution.attributionTitle,
+                    new ScrollableFullScreen(
-                            () => new CopyrightPanel(state),
+                        () => Translations.t.general.attribution.attributionTitle,
-                            "copyright",
+                        () => new CopyrightPanel(state),
-                            guiState.copyrightViewIsOpened
+                        "copyright",
-                        ),
-                        new MapControlButton(Svg.copyright_svg()).onClick(() =>
-                            guiState.copyrightViewIsOpened.setData(true)
-                        ),
                         guiState.copyrightViewIsOpened
-                    )
+                    );
+                 return                          new MapControlButton(Svg.copyright_svg()).onClick(() =>
+                            guiState.copyrightViewIsOpened.setData(true)
+                        )
+
+                }
             ),
             state.featureSwitchWelcomeMessage
         )

UI/DefaultGUI.ts

@@ -1,7 +1,7 @@
 import FeaturePipelineState from "../Logic/State/FeaturePipelineState"
 import State from "../State"
-import { Utils } from "../Utils"
+import {Utils} from "../Utils"
-import { UIEventSource } from "../Logic/UIEventSource"
+import {UIEventSource} from "../Logic/UIEventSource"
 import FullWelcomePaneWithTabs from "./BigComponents/FullWelcomePaneWithTabs"
 import MapControlButton from "./MapControlButton"
 import Svg from "../Svg"
@@ -17,7 +17,7 @@ import ScrollableFullScreen from "./Base/ScrollableFullScreen"
 import Translations from "./i18n/Translations"
 import SimpleAddUI from "./BigComponents/SimpleAddUI"
 import StrayClickHandler from "../Logic/Actors/StrayClickHandler"
-import { DefaultGuiState } from "./DefaultGuiState"
+import {DefaultGuiState} from "./DefaultGuiState"
 import LayerConfig from "../Models/ThemeConfig/LayerConfig"
 import * as home_location_json from "../assets/layers/home_location/home_location.json"
 import NewNoteUi from "./Popup/NewNoteUi"
@@ -27,9 +27,9 @@ import FilteredLayer from "../Models/FilteredLayer"
 import ExtraLinkButton from "./BigComponents/ExtraLinkButton"
 
 /**
- * The default MapComplete GUI initializor
+ * The default MapComplete GUI initializer
  *
- * Adds a welcome pane, contorl buttons, ... etc to index.html
+ * Adds a welcome pane, control buttons, ... etc to index.html
  */
 export default class DefaultGUI {
     private readonly guiState: DefaultGuiState
@@ -53,7 +53,7 @@ export default class DefaultGUI {
 
         Utils.downloadJson("./service-worker-version")
             .then((data) => console.log("Service worker", data))
-            .catch((e) => console.log("Service worker not active"))
+            .catch((_) => console.log("Service worker not active"))
     }
 
     public setupClickDialogOnMap(
@@ -218,7 +218,7 @@ export default class DefaultGUI {
 
     private InitWelcomeMessage(): BaseUIElement {
         const isOpened = this.guiState.welcomeMessageIsOpened
-        const fullOptions = new FullWelcomePaneWithTabs(
+        new FullWelcomePaneWithTabs(
             isOpened,
             this.guiState.welcomeMessageOpenedTab,
             this.state
@@ -242,10 +242,6 @@ export default class DefaultGUI {
             isOpened.setData(false)
         })
 
-        return new Toggle(
+       return help.SetClass("pointer-events-auto")
-            fullOptions.SetClass("welcomeMessage pointer-events-auto"),
-            help.SetClass("pointer-events-auto"),
-            isOpened
-        )
     }
 }

UI/ShowDataLayer/ShowDataLayerImplementation.ts

@@ -1,9 +1,11 @@
-import { Store, UIEventSource } from "../../Logic/UIEventSource"
+import {Store, UIEventSource} from "../../Logic/UIEventSource"
 import LayerConfig from "../../Models/ThemeConfig/LayerConfig"
-import { ShowDataLayerOptions } from "./ShowDataLayerOptions"
+import {ShowDataLayerOptions} from "./ShowDataLayerOptions"
-import { ElementStorage } from "../../Logic/ElementStorage"
+import {ElementStorage} from "../../Logic/ElementStorage"
 import RenderingMultiPlexerFeatureSource from "../../Logic/FeatureSource/Sources/RenderingMultiPlexerFeatureSource"
 import ScrollableFullScreen from "../Base/ScrollableFullScreen"
+import {LeafletMouseEvent} from "leaflet";
+import Hash from "../../Logic/Web/Hash";
 /*
 // import 'leaflet-polylineoffset';
 We don't actually import it here. It is imported in the 'MinimapImplementation'-class, which'll result in a patched 'L' object.
@@ -41,7 +43,7 @@ export default class ShowDataLayerImplementation {
      * Note: the key of this dictionary is 'feature.properties.id+features.geometry.type' as one feature might have multiple presentations
      * @private
      */
-    private readonly leafletLayersPerId = new Map<string, { feature: any; leafletlayer: any }>()
+    private readonly leafletLayersPerId = new Map<string, { feature: any; activateFunc: (event: LeafletMouseEvent) => void }>()
     private readonly showDataLayerid: number
     private readonly createPopup: (
         tags: UIEventSource<any>,
@@ -128,11 +130,7 @@ export default class ShowDataLayerImplementation {
         if (v === undefined) {
             return
         }
-        const leafletLayer = v.leafletlayer
         const feature = v.feature
-        if (leafletLayer.getPopup().isOpen()) {
-            return
-        }
         if (selected.properties.id !== feature.properties.id) {
             return
         }
@@ -143,11 +141,7 @@ export default class ShowDataLayerImplementation {
             console.log("Not opening the popup for", feature, "as probably renamed")
             return
         }
-        if (
+        v.activateFunc(null)
-            selected.geometry.type === feature.geometry.type // If a feature is rendered both as way and as point, opening one popup might trigger the other to open, which might trigger the one to open again
-        ) {
-            leafletLayer.openPopup()
-        }
     }
 
     private update(options: ShowDataLayerOptions): boolean {
@@ -323,64 +317,51 @@ export default class ShowDataLayerImplementation {
      * @param leafletLayer
      * @private
      */
-    private postProcessFeature(feature, leafletLayer: L.Layer) {
+    private postProcessFeature(feature, leafletLayer: L.Evented) {
         const layer: LayerConfig = this._layerToShow
         if (layer.title === undefined || !this._enablePopups) {
             // No popup action defined -> Don't do anything
             // or probably a map in the popup - no popups needed!
             return
         }
-
+        const key = feature.properties.id
-        const popup = L.popup(
+        if(this.leafletLayersPerId.has(key)){
-            {
+            const activate = this.leafletLayersPerId.get(key)
-                autoPan: true,
+            leafletLayer.addEventListener('click', activate.activateFunc)
-                closeOnEscapeKey: true,
+            if(Hash.hash.data === key ){
-                closeButton: false,
+                activate.activateFunc(null)
-                autoPanPaddingTopLeft: [15, 15],
+            }
-            },
+            return;
-            leafletLayer
+        }
-        )
-
-        leafletLayer.bindPopup(popup)
-
         let infobox: ScrollableFullScreen = undefined
-        const id = `popup-${feature.properties.id}-${feature.geometry.type}-${
+        const self = this
-            this.showDataLayerid
+
-        }-${this._cleanCount}-${feature.pointRenderingIndex ?? feature.lineRenderingIndex}-${
+        function activate (event: LeafletMouseEvent) {
-            feature.multiLineStringIndex ?? ""
+            console.log("Activating!")
-        }`
-        popup.setContent(
-            `<div style='height: 65vh' id='${id}'>Popup for ${feature.properties.id} ${feature.geometry.type} ${id} is loading</div>`
-        )
-        const createpopup = this.createPopup
-        leafletLayer.on("popupopen", () => {
             if (infobox === undefined) {
                 const tags =
-                    this.allElements?.getEventSourceById(feature.properties.id) ??
+                    self.allElements?.getEventSourceById(key) ??
                     new UIEventSource<any>(feature.properties)
-                infobox = createpopup(tags, layer)
+                infobox = self.createPopup(tags, layer)
 
-                infobox.isShown.addCallback((isShown) => {
+                self.unregister.push(() => {
-                    if (!isShown) {
+                    console.log("Destroying infobox")
-                        leafletLayer.closePopup()
+                    infobox.Destroy()
-                    }
                 })
             }
-            infobox.AttachTo(id)
             infobox.Activate()
-            this.unregister.push(() => {
+        }
-                console.log("Destroying infobox")
+
-                infobox.Destroy()
+        leafletLayer.addEventListener('click', activate)
-            })
+
-            if (this._selectedElement?.data?.properties?.id !== feature.properties.id) {
-                this._selectedElement?.setData(feature)
-            }
-        })
 
         // Add the feature to the index to open the popup when needed
-        this.leafletLayersPerId.set(feature.properties.id + feature.geometry.type, {
+        this.leafletLayersPerId.set(key, {
             feature: feature,
-            leafletlayer: leafletLayer,
+            activateFunc: activate,
         })
+        if(Hash.hash.data === key ){
+            activate(null)
+        }
     }
 }

css/index-tailwind-output.css

@@ -728,10 +728,6 @@ video {
   margin: 0.25rem;
 }
 
-.m-2 {
-  margin: 0.5rem;
-}
-
 .m-4 {
   margin: 1rem;
 }
@@ -740,6 +736,10 @@ video {
   margin: 1.25rem;
 }
 
+.m-2 {
+  margin: 0.5rem;
+}
+
 .m-0\.5 {
   margin: 0.125rem;
 }
@@ -799,14 +799,6 @@ video {
   margin-top: 1rem;
 }
 
-.mt-6 {
-  margin-top: 1.5rem;
-}
-
-.mr-1 {
-  margin-right: 0.25rem;
-}
-
 .mr-2 {
   margin-right: 0.5rem;
 }
@@ -847,6 +839,10 @@ video {
   margin-bottom: 2.5rem;
 }
 
+.mr-1 {
+  margin-right: 0.25rem;
+}
+
 .mt-0 {
   margin-top: 0px;
 }
@@ -855,6 +851,10 @@ video {
   margin-top: 2rem;
 }
 
+.mt-6 {
+  margin-top: 1.5rem;
+}
+
 .mb-8 {
   margin-bottom: 2rem;
 }
@@ -956,10 +956,6 @@ video {
   height: 3rem;
 }
 
-.h-8 {
-  height: 2rem;
-}
-
 .h-4 {
   height: 1rem;
 }
@@ -980,6 +976,10 @@ video {
   height: 1.5rem;
 }
 
+.h-8 {
+  height: 2rem;
+}
+
 .h-32 {
   height: 8rem;
 }
@@ -1004,10 +1004,6 @@ video {
   height: 12rem;
 }
 
-.max-h-7 {
-  max-height: 1.75rem;
-}
-
 .max-h-20vh {
   max-height: 20vh;
 }
@@ -1020,6 +1016,10 @@ video {
   max-height: 1rem;
 }
 
+.max-h-7 {
+  max-height: 1.75rem;
+}
+
 .max-h-8 {
   max-height: 2rem;
 }
@@ -1048,14 +1048,6 @@ video {
   width: 3rem;
 }
 
-.w-8 {
-  width: 2rem;
-}
-
-.w-1\/3 {
-  width: 33.333333%;
-}
-
 .w-4 {
   width: 1rem;
 }
@@ -1072,6 +1064,10 @@ video {
   width: 2.75rem;
 }
 
+.w-8 {
+  width: 2rem;
+}
+
 .w-min {
   width: -webkit-min-content;
   width: min-content;
@@ -1216,6 +1212,10 @@ video {
   place-content: center;
 }
 
+.content-center {
+  align-content: center;
+}
+
 .content-start {
   align-content: flex-start;
 }
@@ -1317,14 +1317,14 @@ video {
   border-radius: 9999px;
 }
 
-.rounded {
-  border-radius: 0.25rem;
-}
-
 .rounded-3xl {
   border-radius: 1.5rem;
 }
 
+.rounded {
+  border-radius: 0.25rem;
+}
+
 .rounded-md {
   border-radius: 0.375rem;
 }
@@ -1346,14 +1346,14 @@ video {
   border-bottom-left-radius: 0.25rem;
 }
 
-.border-2 {
-  border-width: 2px;
-}
-
 .border {
   border-width: 1px;
 }
 
+.border-2 {
+  border-width: 2px;
+}
+
 .border-4 {
   border-width: 4px;
 }
@@ -1414,11 +1414,6 @@ video {
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
 }
 
-.bg-gray-200 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(229 231 235 / var(--tw-bg-opacity));
-}
-
 .bg-red-400 {
   --tw-bg-opacity: 1;
   background-color: rgb(248 113 113 / var(--tw-bg-opacity));
@@ -1439,6 +1434,11 @@ video {
   background-color: rgb(0 0 0 / var(--tw-bg-opacity));
 }
 
+.bg-gray-200 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(229 231 235 / var(--tw-bg-opacity));
+}
+
 .bg-gray-100 {
   --tw-bg-opacity: 1;
   background-color: rgb(243 244 246 / var(--tw-bg-opacity));
@@ -1565,6 +1565,10 @@ video {
   padding-top: 0.125rem;
 }
 
+.pb-4 {
+  padding-bottom: 1rem;
+}
+
 .pl-6 {
   padding-left: 1.5rem;
 }
@@ -2555,14 +2559,14 @@ input {
     margin-right: auto;
   }
 
-  .sm\:mr-2 {
-    margin-right: 0.5rem;
-  }
-
   .sm\:mt-5 {
     margin-top: 1.25rem;
   }
 
+  .sm\:mr-2 {
+    margin-right: 0.5rem;
+  }
+
   .sm\:flex {
     display: flex;
   }
@@ -2700,6 +2704,10 @@ input {
     height: 3rem;
   }
 
+  .md\:w-1\/3 {
+    width: 33.333333%;
+  }
+
   .md\:w-2\/6 {
     width: 33.333333%;
   }

css/mobile.css

@@ -8,10 +8,6 @@ Contains tweaks for small screens
         display: none !important;
     }
 
-    .desktop\:max-h-65vh {
-        max-height: 65vh;
-    }
-
 }
 
 

theme.html

@@ -48,7 +48,7 @@
 </div>
 
 <div class="very-small-screen fixed inset-0 block z-above-controls" id="on-small-screen"></div>
-<div class="only-on-mobile fixed inset-0 block z-above-controls hidden hidden-on-very-small-screen" id="fullscreen"></div>
+<div class="fixed inset-0 block z-above-controls hidden hidden-on-very-small-screen md:w-1/3" style="min-width: 28rem" id="fullscreen"></div>
 <div class="z-index-above-map pointer-events-none" id="topleft-tools">
     <div class="p-3 flex flex-col items-end sm:items-start sm:flex-row sm:flex-wrap w-full sm:justify-between">
         <div class="shadow rounded-full h-min w-full overflow-hidden sm:max-w-sm pointer-events-auto"