optimize hover (#67)

Co-authored-by: lolochristen <[email protected]>
lolochristen · Jul 13, 2024 · ca5e89b · ca5e89b
1 parent 2ccd43f
commit ca5e89b
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 8 deletions.
diff --git a/src/OpenLayers.Blazor.Demo.Components/Pages/EventsDemo.razor b/src/OpenLayers.Blazor.Demo.Components/Pages/EventsDemo.razor
@@ -38,7 +38,7 @@ Pointer: @_pointer
                OnFeatureClick="@((o) => AddMessage($"OnFeatureClick {o}"))"
                OnMarkerClick="@((o) => AddMessage($"OnMarkerClicked {o}"))"
                OnShapeAdded="@((o) => AddMessage($"OnShapeAdded {o}"))"
-               OnHover="@((o) => AddMessage($"OnHover {o}"))"
+               OnShapeHover="@((o) => AddMessage($"OnShapeHover {o}"))"
                OnLayerAdded="@((o) => AddMessage($"OnLayerAdded {o}"))"
                OnLayerRemoved="@((o) => AddMessage($"OnLayerRemoved {o}"))">
     <Layers>
@@ -68,6 +68,8 @@ Pointer: @_pointer
     {
         if (firstRender)
         {
+            _map.Zoom = 5;
+            _map.Center = new Coordinate(8.000, 45.896);
             _map.ShapesLayer = _layer;
             AddMessage($"Page.OnAfterRender firstRender: {firstRender}");
         }

diff --git a/src/OpenLayers.Blazor/Map.razor.cs b/src/OpenLayers.Blazor/Map.razor.cs
@@ -131,10 +131,10 @@ public ObservableCollection<Shape> ShapesList
     public EventCallback<Coordinate> OnPointerMove { get; set; }
 
     /// <summary>
-    ///     Event when the pointer hovers over a shape
+    ///     Event when the pointer hovers over a shape. Null when leaving a shape.
     /// </summary>
     [Parameter]
-    public EventCallback<Shape> OnHover { get; set; }
+    public EventCallback<Shape?> OnShapeHover { get; set; }
 
     /// <summary>
     ///     Event when the rendering is complete
@@ -559,12 +559,15 @@ public Task OnInternalPointerMove(Coordinate coordinate)
     }
 
     [JSInvokable]
-    public Task OnInternalHover(string shapeId, string layerId)
+    public Task OnInternalShapeHover(string? layerId, string? shapeId)
     {
+#if DEBUG
+        Console.WriteLine($"OnInternalShapeHover {layerId} {shapeId}");
+#endif
         var layer = LayersList.FirstOrDefault(p => p.Id == layerId);
         if (layer != null && layer.ShapesList.FirstOrDefault(p => p.Id == shapeId) is Shape shape)
-            return OnHover.InvokeAsync(shape);
-        return Task.CompletedTask;
+            return OnShapeHover.InvokeAsync(shape);
+        return OnShapeHover.InvokeAsync(null);
     }
 
     [JSInvokable]

diff --git a/src/OpenLayers.Blazor/wwwroot/openlayers_interop.js b/src/OpenLayers.Blazor/wwwroot/openlayers_interop.js
@@ -620,7 +620,7 @@ MapOL.prototype.onMapPointerMove = function(evt, element) {
         this.Options.coordinatesProjection);
     this.Instance.invokeMethodAsync("OnInternalPointerMove", coordinate);
 
-    var that = this;
+    var hoverFeatureId = null, hoverLayerId = null;
     this.Map.forEachFeatureAtPixel(evt.pixel,
         function (feature, layer) {
             if (!layer)
@@ -629,8 +629,17 @@ MapOL.prototype.onMapPointerMove = function(evt, element) {
             if (!featureId)
                 return;
             const layerId = layer.get("id");
-            that.Instance.invokeMethodAsync("OnInternalHover", featureId.toString(), layerId);
+            if (!hoverFeatureId) {
+                hoverFeatureId = featureId.toString();
+                hoverLayerId = layerId;
+            }
         });
+
+    if (this._hoverFeatureId != hoverFeatureId || this._hoverLayerId != hoverLayerId) {
+        this.Instance.invokeMethodAsync("OnInternalShapeHover", hoverLayerId, hoverFeatureId);
+        this._hoverFeatureId = hoverFeatureId;
+        this._hoverLayerId = hoverLayerId;
+    }
 };
 
 MapOL.prototype.onMapResolutionChanged = function() {