Refactoring: stabilize touchingFeatureSource

Logic/FeatureSource/Sources/TouchesBboxFeatureSource.ts

@@ -1,28 +1,40 @@
 import { FeatureSource, FeatureSourceForLayer } from "../FeatureSource"
 import StaticFeatureSource from "./StaticFeatureSource"
-import { GeoOperations } from "../../GeoOperations"
 import { BBox } from "../../BBox"
 import FilteredLayer from "../../../Models/FilteredLayer"
+import { Store } from "../../UIEventSource"
 
 /**
  * Results in a feature source which has all the elements that touch the given features
  */
 export default class BBoxFeatureSource extends StaticFeatureSource {
-    constructor(features: FeatureSource, mustTouch: BBox) {
+    constructor(features: FeatureSource, mustTouch: Store<BBox>) {
-        const bbox = mustTouch.asGeoJson({})
         super(
-            features.features.mapD((features) =>
+            features.features.mapD(
-                features.filter((feature) => GeoOperations.intersect(feature, bbox) !== undefined)
+                (features) => {
+                    if (mustTouch.data === undefined) {
+                        return features
+                    }
+                    console.log("UPdating touching bbox")
+                    const box = mustTouch.data
+                    return features.filter((feature) => {
+                        if (feature.geometry.type === "Point") {
+                            return box.contains(<[number, number]>feature.geometry.coordinates)
+                        }
+                        return box.overlapsWith(BBox.get(feature))
+                    })
+                },
+                [mustTouch]
             )
         )
     }
 }
 
 export class BBoxFeatureSourceForLayer extends BBoxFeatureSource implements FeatureSourceForLayer {
-    constructor(features: FeatureSourceForLayer, mustTouch: BBox) {
+    readonly layer: FilteredLayer
+
+    constructor(features: FeatureSourceForLayer, mustTouch: Store<BBox>) {
         super(features, mustTouch)
         this.layer = features.layer
     }
-
-    readonly layer: FilteredLayer
 }

Models/ThemeViewState.ts

@@ -49,6 +49,7 @@ import { EliCategory } from "./RasterLayerProperties"
 import BackgroundLayerResetter from "../Logic/Actors/BackgroundLayerResetter"
 import SaveFeatureSourceToLocalStorage from "../Logic/FeatureSource/Actors/SaveFeatureSourceToLocalStorage"
 import Hash from "../Logic/Web/Hash"
+import BBoxFeatureSource from "../Logic/FeatureSource/Sources/TouchesBboxFeatureSource"
 
 /**
  *
@@ -79,6 +80,7 @@ export default class ThemeViewState implements SpecialVisualizationState {
 
     readonly historicalUserLocations: WritableFeatureSource<Feature<Point>>
     readonly indexedFeatures: IndexedFeatureSource & LayoutSource
+    readonly featuresInView: FeatureSource
     readonly newFeatures: WritableFeatureSource
     readonly layerState: LayerState
     readonly perLayer: ReadonlyMap<string, GeoIndexedStoreForLayer>
@@ -167,6 +169,7 @@ export default class ThemeViewState implements SpecialVisualizationState {
                 (id) => self.layerState.filteredLayers.get(id).isDisplayed
             )
             this.indexedFeatures = layoutSource
+            this.featuresInView = new BBoxFeatureSource(layoutSource, this.mapProperties.bounds)
             this.dataIsLoading = layoutSource.isLoading
 
             const indexedElements = this.indexedFeatures
@@ -252,7 +255,7 @@ export default class ThemeViewState implements SpecialVisualizationState {
             })
         })
 
-        this.floors = this.indexedFeatures.features.stabilized(500).map((features) => {
+        this.floors = this.featuresInView.features.stabilized(500).map((features) => {
             if (!features) {
                 return []
             }

UI/SpecialVisualizations.ts

@@ -1188,7 +1188,7 @@ export default class SpecialVisualizations {
                             .map(
                                 (l) => {
                                     const fs = state.perLayer.get(l.id)
-                                    const bbox = state.mapProperties.bounds.data
+                                    const bbox = state.mapProperties.bounds
                                     const fsBboxed = new BBoxFeatureSourceForLayer(fs, bbox)
                                     return new StatisticsPanel(fsBboxed)
                                 },

UI/ThemeViewGUI.svelte

@@ -79,14 +79,14 @@
   <div class="float-left m-1 sm:mt-2">
     <MapControlButton on:click={() => state.guistate.themeIsOpened.setData(true)}>
       <div class="flex m-0.5 mx-1 sm:mx-1 md:mx-2 items-center cursor-pointer max-[480px]:w-full">
-        <img class="w-4 h-4 sm:w-6 sm:h-6 md:w-8 md:h-8 block mr-0.5 sm:mr-1 md:mr-2" src={layout.icon}>
+        <img class="w-6 h-6 md:w-8 md:h-8 block mr-0.5 sm:mr-1 md:mr-2" src={layout.icon}>
         <b class="mr-1">
           <Tr t={layout.title}></Tr>
         </b>
       </div>
     </MapControlButton>
     <MapControlButton on:click={() =>state.guistate.menuIsOpened.setData(true)}>
-      <MenuIcon class="w-6 h-6 md:w-8 md:h-8 cursor-pointer"></MenuIcon>
+      <MenuIcon class="w-8 h-8 cursor-pointer"></MenuIcon>
     </MapControlButton>
     <If condition={state.featureSwitchIsTesting}>
     <span class="alert">
@@ -108,15 +108,15 @@
     </div>
   </If>
   <MapControlButton on:click={() => mapproperties.zoom.update(z => z+1)}>
-    <img src="./assets/svg/plus.svg" class="w-6 h-6 md:w-8 md:h-8"/>
+    <img src="./assets/svg/plus.svg" class="w-8 h-8"/>
   </MapControlButton>
   <MapControlButton on:click={() => mapproperties.zoom.update(z => z-1)}>
-    <img src="./assets/svg/min.svg" class="w-6 h-6 md:w-8 md:h-8"/>
+    <img src="./assets/svg/min.svg" class="w-8 h-8"/>
   </MapControlButton>
   <If condition={featureSwitches.featureSwitchGeolocation}>
     <MapControlButton>
       <ToSvelte
-        construct={new GeolocationControl(state.geolocation, mapproperties).SetClass("block w-6 h-6 md:w-8 md:h-8")}></ToSvelte>
+        construct={new GeolocationControl(state.geolocation, mapproperties).SetClass("block w-8 h-8")}></ToSvelte>
     </MapControlButton>
   </If>
 </div>