Min Max Zoom Properties, JS Compression, allways OnClick Event (#76)

* Min/Max zoom support. minor fixes.

* Fix scaleLineUnit None

* Revert "Fix scaleLineUnit None"

This reverts commit c378336.

* include version in js url to skip cache

* unused code

* trigger OnClick in any case

* js compress

* fix node version

* fix

* fix

.github/workflows/azure-static-web-apps-delightful-rock-04d533b03.yml

@@ -34,6 +34,9 @@ jobs:
           api_location: "" # Api source code path - optional
           output_location: "wwwroot" # Built app content directory - optional
           ###### End of Repository/Build Configurations ######
+        env:
+            MSBUILD_CONFIGURATION: Debug 
+            # debug to bypass js compression
 
   close_pull_request_job:
     if: github.event_name == 'pull_request' && github.event.action == 'closed'

.github/workflows/release.yml

@@ -15,7 +15,13 @@ jobs:
       uses: actions/checkout@v4
       with:
         fetch-depth: 0
-        filter: tree:0        
+        filter: tree:0
+    - name: Setup Node.js
+      uses: actions/setup-node@v2
+      with:
+        node-version: '22'
+    - name: Install uglify-js
+      run: npm install uglify-js -g
     - name: Setup .NET SDK
       uses: actions/setup-dotnet@v1
     - name: Build

.gitignore

@@ -3,6 +3,10 @@
 ##
 ## Get latest from https://github.com/github/gitignore/blob/master/VisualStudio.gitignore
 
+# 
+/src/OpenLayers.Blazor/wwwroot/openlayers_interop.min.js
+/src/OpenLayers.Blazor/wwwroot/openlayers_interop.min.js.map
+
 # User-specific files
 *.rsuser
 *.suo

src/OpenLayers.Blazor/Map.razor.cs

@@ -398,6 +398,26 @@ public bool ZoomToExtentControl
     [Parameter]
     public double InitialZoom { get; set; } = 0;
 
+    /// <summary>
+    ///    Gets or sets the minimal zoom level.
+    /// </summary>
+    [Parameter]
+    public double MinZoom
+    {
+        get => Options.MinZoom;
+        set => Options.MinZoom = value;
+    }
+
+    /// <summary>
+    ///    Gets or sets the maximal zoom level.
+    /// </summary>
+    [Parameter]
+    public double MaxZoom
+    {
+        get => Options.MaxZoom;
+        set => Options.MaxZoom = value;
+    }
+
     /// <summary>
     ///     Gets or set the default layer for shapes.
     /// </summary>
@@ -484,7 +504,12 @@ protected override async Task OnAfterRenderAsync(bool firstRender)
 
         if (firstRender)
         {
-            _module ??= await JSRuntime!.InvokeAsync<IJSObjectReference>("import", $"./_content/{Assembly.GetExecutingAssembly().GetName().Name}/openlayers_interop.js");
+#if DEBUG
+            var script = $"openlayers_interop.js";
+#else
+            var script = $"openlayers_interop.min.js?v={Assembly.GetExecutingAssembly().GetName().Version}";
+#endif
+            _module ??= await JSRuntime!.InvokeAsync<IJSObjectReference>("import", $"./_content/{Assembly.GetExecutingAssembly().GetName().Name}/{script}");
             Instance ??= DotNetObjectReference.Create(this);
 
             if (ShapesLayer != null && ShapesList.Count > 0)
@@ -578,6 +603,9 @@ public async Task OnInternalFeatureClick(Internal.Feature feature, string layerI
     [JSInvokable]
     public Task OnInternalClick(Coordinate coordinate)
     {
+#if DEBUG
+        Console.WriteLine($"OnInternalClick: {coordinate}");
+#endif
         return OnClick.InvokeAsync(coordinate);
     }
 

src/OpenLayers.Blazor/OpenLayers.Blazor.csproj

@@ -95,10 +95,13 @@
 		  <PrivateAssets>all</PrivateAssets>
 		  <IncludeAssets>runtime; build; native; contentfiles; analyzers; buildtransitive</IncludeAssets>
 		</PackageReference>
-		<PackageReference Include="MinVer" Version="5.0.0-beta.1">
+		<PackageReference Include="MinVer" Version="5.0.0">
 			<PrivateAssets>all</PrivateAssets>
 			<IncludeAssets>runtime; build; native; contentfiles; analyzers; buildtransitive</IncludeAssets>
 		</PackageReference>
 	</ItemGroup>
 
+	<Target Name="BeforeBuildStep" BeforeTargets="Build" Condition="$(Configuration)=='Release'">
+		<Exec Command="uglifyjs ./wwwroot/openlayers_interop.js -o ./wwwroot/openlayers_interop.min.js -c -m --source-map &quot;filename='./wwwroot/openlayers_interop.min.js.map'&quot;"/>
+	</Target>
 </Project>

src/OpenLayers.Blazor/Options.cs

@@ -75,4 +75,14 @@ public class Options
     ///     Gets or sets boolean if zoom to extent control is visible
     /// </summary>
     public bool ZoomToExtentControl { get; set; }
+
+    /// <summary>
+    ///    Gets or sets the minimal zoom level.
+    /// </summary>
+    public double MinZoom { get; set; } = 0;
+
+    /// <summary>
+    ///    Gets or sets the maximal zoom level.
+    /// </summary>
+    public double MaxZoom { get; set; } = 28;
 }

src/OpenLayers.Blazor/wwwroot/openlayers_interop.js

@@ -200,7 +200,9 @@ function MapOL(mapId, popupId, options, center, zoom, rotation, interactions, la
             center: viewCenter,
             extent: viewExtent,
             zoom: zoom,
-            rotation: rotation
+            rotation: rotation,
+            maxZoom: this.Options.maxZoom,
+            minZoom: this.Options.minZoom
         }),
         interactions: ol.interaction.defaults.defaults().extend([new ol.interaction.DragRotateAndZoom()])
     });
@@ -581,23 +583,22 @@ MapOL.prototype.getReducedFeature = function(feature) {
 
 MapOL.prototype.onMapClick = function(evt, popup, element) {
     popup.setPosition(0, 0);
-
     var that = this;
-    var invokeMethod = true;
+    const coordinate = ol.proj.transform(evt.coordinate,
+        this.Map.getView().getProjection(),
+        this.Options.coordinatesProjection);
+    this.Instance.invokeMethodAsync("OnInternalClick", coordinate);
 
     this.Map.forEachFeatureAtPixel(evt.pixel,
         function(feature, layer) {
-
             if (!layer)
                 return; // no layer = drawing
-
             const layerId = layer.get("id");
 
-            if (feature.getGeometryName) { // shape
+            if (ol.Feature.prototype.isPrototypeOf(feature)) { // full feature
                 const shape = that.mapFeatureToShape(feature);
 
                 if (shape) {
-                    invokeMethod = false;
                     that.Instance.invokeMethodAsync("OnInternalShapeClick", shape, layerId);
                 }
 
@@ -614,25 +615,16 @@ MapOL.prototype.onMapClick = function(evt, popup, element) {
                     const coordinates = feature.getGeometry().getCoordinates();
                     popup.setPosition(coordinates);
                 }
-            } else if (feature.getType) {
+            } else if (ol.render.Feature.prototype.isPrototypeOf(feature)) { // render feature
                 const intFeature = that.mapFeatureToInternalFeature(feature);
                 if (intFeature) {
-                    invokeMethod = false;
                     that.Instance.invokeMethodAsync("OnInternalFeatureClick", intFeature, layerId);
                 }
                 if (that.Options.autoPopup) {
                     popup.setPosition(intFeature.coordinates);
                 }
             }
         });
-
-    if (invokeMethod) {
-        invokeMethod = false;
-        const coordinate = ol.proj.transform(evt.coordinate,
-            this.Map.getView().getProjection(),
-            this.Options.coordinatesProjection);
-        this.Instance.invokeMethodAsync("OnInternalClick", coordinate);
-    }
 };
 
 MapOL.prototype.showPopup = function(coordinates) {
@@ -1064,14 +1056,13 @@ MapOL.prototype.getCoordinates = function(layerId, featureId) {
     return null;
 };
 
-// Shape Style
-MapOL.prototype.getShapeStyleAsync = async function(feature, layer_id) {
-    const shape = this.mapFeatureToShape(feature);
-    const style = await this.Instance.invokeMethodAsync("OnGetShapeStyleAsync", shape, layer_id);
-    return this.mapStyleOptionsToStyle(style);
-};
 MapOL.prototype.getShapeStyle = function(feature, layer_id) {
-    const shape = this.mapFeatureToShape(feature);
+    var shape;
+    if (ol.render.Feature.prototype.isPrototypeOf(feature))
+        shape = this.mapFeatureToInternalFeature(feature);
+    else
+        shape = this.mapFeatureToShape(feature);
+    delete shape.coordinates;
     const style = this.Instance.invokeMethod("OnGetShapeStyle", shape, layer_id);
     return this.mapStyleOptionsToStyle(style);
 };