Usability: give error message if WebGL is disabled

src/Logic/FeatureSource/Sources/LastClickFeatureSource.ts

@@ -13,6 +13,11 @@ import { Utils } from "../../../Utils"
 export class LastClickFeatureSource implements WritableFeatureSource {
     public readonly features: UIEventSource<Feature[]> = new UIEventSource<Feature[]>([])
 
+    private i: number = 0
+    private readonly renderings: string[]
+    private readonly has_note_layer: string
+    private readonly has_presets: string
+
     constructor(location: Store<{ lon: number; lat: number }>, layout: LayoutConfig) {
         const allPresets: BaseUIElement[] = []
         for (const layer of layout.layers)
@@ -26,35 +31,39 @@ export class LastClickFeatureSource implements WritableFeatureSource {
                 allPresets.push(html)
             }
 
-        const renderings = Utils.Dedup(
+        this.renderings = Utils.Dedup(
             allPresets.map((uiElem) =>
                 Utils.runningFromConsole ? "" : uiElem.ConstructElement().innerHTML
             )
         )
 
-        let i = 0
+        this.has_note_layer = layout.layers.some((l) => l.id === "note") ? "yes" : "no"
+
+        this.has_presets = layout.layers.some((l) => l.presets?.length > 0) ? "yes" : "no"
 
         location.addCallbackAndRunD(({ lon, lat }) => {
-            const properties = {
-                lastclick: "yes",
-                id: "last_click_" + i,
-                has_note_layer: layout.layers.some((l) => l.id === "note") ? "yes" : "no",
-                has_presets: layout.layers.some((l) => l.presets?.length > 0) ? "yes" : "no",
-                renderings: renderings.join(""),
-                number_of_presets: "" + renderings.length,
-                first_preset: renderings[0],
-            }
-            i++
-
-            const point = <Feature<Point>>{
-                type: "Feature",
-                properties,
-                geometry: {
-                    type: "Point",
-                    coordinates: [lon, lat],
-                },
-            }
-            this.features.setData([point])
+            this.features.setData([this.createFeature(lon, lat)])
         })
     }
+
+    public createFeature(lon: number, lat: number): Feature<Point> {
+        const properties = {
+            lastclick: "yes",
+            id: "last_click_" + this.i,
+            has_note_layer: this.has_note_layer,
+            has_presets: this.has_presets,
+            renderings: this.renderings.join(""),
+            number_of_presets: "" + this.renderings.length,
+            first_preset: this.renderings[0],
+        }
+        this.i++
+        return <Feature<Point>>{
+            type: "Feature",
+            properties,
+            geometry: {
+                type: "Point",
+                coordinates: [lon, lat],
+            },
+        }
+    }
 }

src/Models/ThemeViewState.ts

@@ -102,7 +102,7 @@ export default class ThemeViewState implements SpecialVisualizationState {
     readonly userRelatedState: UserRelatedState
     readonly geolocation: GeoLocationHandler
 
-    readonly lastClickObject: WritableFeatureSource
+    readonly lastClickObject: WritableFeatureSource & LastClickFeatureSource
     readonly overlayLayerStates: ReadonlyMap<
         string,
         { readonly isDisplayed: UIEventSource<boolean> }
@@ -452,9 +452,16 @@ export default class ThemeViewState implements SpecialVisualizationState {
         )
     }
 
+    public openNewItemDialog() {
+        this.selectedElement.setData(undefined)
+        this.selectedLayer.setData(this.layerState.filteredLayers.get("last_click").layerDef)
+        const { lon, lat } = this.mapProperties.location.data
+        const feature = this.lastClickObject.createFeature(lon, lat)
+        this.selectedElement.setData(feature)
+    }
     private addLastClick(last_click: LastClickFeatureSource) {
         // The last_click gets a _very_ special treatment as it interacts with various parts
-
+        /*
         const last_click_layer = this.layerState.filteredLayers.get("last_click")
         this.featureProperties.trackFeatureSource(last_click)
         this.indexedFeatures.addSource(last_click)
@@ -489,7 +496,7 @@ export default class ThemeViewState implements SpecialVisualizationState {
                 this.selectedElement.setData(feature)
                 this.selectedLayer.setData(last_click_layer.layerDef)
             },
-        })
+        }) //*/
     }
 
     /**

src/UI/ThemeViewGUI.svelte

@@ -53,62 +53,62 @@
   import Locale from "./i18n/Locale";
   import ShareScreen from "./BigComponents/ShareScreen.svelte";
 
-  export let state: ThemeViewState
-  let layout = state.layout
+  export let state: ThemeViewState;
+  let layout = state.layout;
 
-  let maplibremap: UIEventSource<MlMap> = state.map
-  let selectedElement: UIEventSource<Feature> = state.selectedElement
-  let selectedLayer: UIEventSource<LayerConfig> = state.selectedLayer
+  let maplibremap: UIEventSource<MlMap> = state.map;
+  let selectedElement: UIEventSource<Feature> = state.selectedElement;
+  let selectedLayer: UIEventSource<LayerConfig> = state.selectedLayer;
 
   const selectedElementView = selectedElement.map(
     (selectedElement) => {
       // Svelte doesn't properly reload some of the legacy UI-elements
       // As such, we _reconstruct_ the selectedElementView every time a new feature is selected
       // This is a bit wasteful, but until everything is a svelte-component, this should do the trick
-      const layer = selectedLayer.data
+      const layer = selectedLayer.data;
       if (selectedElement === undefined || layer === undefined) {
-        return undefined
+        return undefined;
       }
 
       if (!(layer.tagRenderings?.length > 0) || layer.title === undefined) {
-        return undefined
+        return undefined;
       }
 
-      const tags = state.featureProperties.getStore(selectedElement.properties.id)
-      return new SvelteUIElement(SelectedElementView, { state, layer, selectedElement, tags })
+      const tags = state.featureProperties.getStore(selectedElement.properties.id);
+      return new SvelteUIElement(SelectedElementView, { state, layer, selectedElement, tags });
     },
     [selectedLayer]
-  )
+  );
 
   const selectedElementTitle = selectedElement.map(
     (selectedElement) => {
       // Svelte doesn't properly reload some of the legacy UI-elements
       // As such, we _reconstruct_ the selectedElementView every time a new feature is selected
       // This is a bit wasteful, but until everything is a svelte-component, this should do the trick
-      const layer = selectedLayer.data
+      const layer = selectedLayer.data;
       if (selectedElement === undefined || layer === undefined) {
-        return undefined
+        return undefined;
       }
 
-      const tags = state.featureProperties.getStore(selectedElement.properties.id)
-      return new SvelteUIElement(SelectedElementTitle, { state, layer, selectedElement, tags })
+      const tags = state.featureProperties.getStore(selectedElement.properties.id);
+      return new SvelteUIElement(SelectedElementTitle, { state, layer, selectedElement, tags });
     },
     [selectedLayer]
-  )
+  );
 
-  let mapproperties: MapProperties = state.mapProperties
-  let featureSwitches: FeatureSwitchState = state.featureSwitches
-  let availableLayers = state.availableLayers
-  let userdetails = state.osmConnection.userDetails
-  let currentViewLayer = layout.layers.find((l) => l.id === "current_view")
-  let rasterLayer: Store<RasterLayerPolygon> = state.mapProperties.rasterLayer
+  let mapproperties: MapProperties = state.mapProperties;
+  let featureSwitches: FeatureSwitchState = state.featureSwitches;
+  let availableLayers = state.availableLayers;
+  let userdetails = state.osmConnection.userDetails;
+  let currentViewLayer = layout.layers.find((l) => l.id === "current_view");
+  let rasterLayer: Store<RasterLayerPolygon> = state.mapProperties.rasterLayer;
   let rasterLayerName =
-    rasterLayer.data?.properties?.name ?? AvailableRasterLayers.maplibre.properties.name
+    rasterLayer.data?.properties?.name ?? AvailableRasterLayers.maplibre.properties.name;
   onDestroy(
     rasterLayer.addCallbackAndRunD((l) => {
-      rasterLayerName = l.properties.name
+      rasterLayerName = l.properties.name;
     })
-  )
+  );
 </script>
 
 <div class="absolute top-0 left-0 h-screen w-screen overflow-hidden">
@@ -170,16 +170,32 @@
   <div class="flex w-full items-end justify-between px-4">
     <div class="flex">
       <!-- bottom left elements -->
-      <OpenBackgroundSelectorButton hideTooltip={true} {state} />
-      <a
-        class="bg-black-transparent pointer-events-auto h-fit max-h-12 cursor-pointer self-end overflow-hidden rounded-2xl pl-1 pr-2 text-white opacity-50 hover:opacity-100"
-        on:click={() => {
+      <div class="flex flex-col">
+        <If condition={state.mapProperties.zoom.map(z => z >= Constants.minZoomLevelToAddNewPoint)}>
+          <button class="primary pointer-events-auto" on:click={() => {
+          state.openNewItemDialog()
+        }}>
+            Add a new point
+          </button>
+          <button class="primary disabled" slot="else">
+            Zoom in to add a new point
+          </button>
+        </If>
+
+        <div class="flex">
+
+          <OpenBackgroundSelectorButton hideTooltip={true} {state} />
+          <a
+            class="bg-black-transparent pointer-events-auto h-fit max-h-12 cursor-pointer self-end overflow-hidden rounded-2xl pl-1 pr-2 text-white opacity-50 hover:opacity-100"
+            on:click={() => {
           state.guistate.themeViewTab.setData("copyright")
           state.guistate.themeIsOpened.setData(true)
         }}
-      >
-        © OpenStreetMap, <span class="w-24">{rasterLayerName}</span>
-      </a>
+          >
+            © OpenStreetMap, <span class="w-24">{rasterLayerName}</span>
+          </a>
+        </div>
+      </div>
     </div>
 
     <div class="flex flex-col items-end">
@@ -314,12 +330,12 @@
 
       <ToSvelte construct={() => new CopyrightPanel(state)} slot="content3" />
 
-      <div slot="title4" class="flex">
+      <div class="flex" slot="title4">
         <ToSvelte construct={Svg.share_svg().SetClass("w-4 h-4")} />
         <Tr t={Translations.t.general.sharescreen.title} />
       </div>
       <div class="m-2" slot="content4">
-        <ShareScreen {state}/>
+        <ShareScreen {state} />
       </div>
     </TabbedGroup>
   </FloatOver>

src/index.ts

@@ -7,9 +7,22 @@ import Combine from "./UI/Base/Combine"
 import { SubtleButton } from "./UI/Base/SubtleButton"
 import Svg from "./Svg"
 import { Utils } from "./Utils"
-
+function webgl_support() {
+    try {
+        var canvas = document.createElement("canvas")
+        return (
+            !!window.WebGLRenderingContext &&
+            (canvas.getContext("webgl") || canvas.getContext("experimental-webgl"))
+        )
+    } catch (e) {
+        return false
+    }
+}
 // @ts-ignore
 try {
+    if (!webgl_support()) {
+        throw "WebGL is not supported or not enabled. This is essential for MapComplete to function, please enable this."
+    }
     DetermineLayout.GetLayout()
         .then((layout) => {
             const state = new ThemeViewState(layout)