more data-oriented implementation approach

achou11 · achou11 · commit 15e9802d4aa8 · 2024-06-28T14:47:32.000-04:00
diff --git a/packages/app/lib/locales/app_en.arb b/packages/app/lib/locales/app_en.arb
@@ -96,17 +96,7 @@
             }
         }
     },
-    "sightingLocationFieldCoordinates": "Coordinates: Lat {latitude}, Lon {longitude}",
-    "@sightingLocationFieldCoordinates": {
-        "placeholders": {
-            "latitude": { 
-                "type": "double"
-            },
-            "longitude": {
-                "type": "double"
-            }
-        }
-    },
+    "sightingLocationNoLocation": "No location set",
     "sightingScreenTitle": "Sighting",
     "sightingUnspecified": "Unknown species",
     "speciesCardTitle": "Species",
diff --git a/packages/app/lib/ui/widgets/location_field.dart b/packages/app/lib/ui/widgets/location_field.dart
@@ -1,11 +1,11 @@
 // SPDX-License-Identifier: AGPL-3.0-or-later
 
-import 'package:app/ui/colors.dart';
 import 'package:app/ui/widgets/action_buttons.dart';
 import 'package:app/ui/widgets/editable_card.dart';
 import 'package:flutter/foundation.dart';
 import 'package:flutter/gestures.dart';
 import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
 import 'package:flutter_gen/gen_l10n/app_localizations.dart';
 import 'package:maplibre_gl/maplibre_gl.dart';
 
@@ -29,16 +29,42 @@ const Coordinates BRAZIL_CENTROID_COORDINATES =
 const double DEFAULT_ZOOMED_OUT_LEVEL = 1.5;
 const double DEFAULT_ZOOMED_IN_LEVEL = 8;
 
+const EMPTY_SOURCE_GEOJSON_DATA = {
+  "type": "FeatureCollection",
+  // ignore: inference_failure_on_collection_literal
+  "features": []
+};
+const SOURCE_ID = 'points';
+const LAYER_ID = 'location';
+const BEE_IMAGE_ID = 'bee';
+const PLACEHOLDER_FEATURE_ID = 'placeholder';
+const FOCUSED_FEATURE_ID = 'focused';
+
+const SHOW_FOCUSED_FILTER_EXPRESSION = [
+  Expressions.equal,
+  [Expressions.id],
+  FOCUSED_FEATURE_ID,
+];
+const SHOW_ALL_FILTER_EXPRESSION = [Expressions.literal, true];
+const ICON_OPACITY_EXPRESSION = [
+  Expressions.caseExpression,
+  [
+    Expressions.equal,
+    [Expressions.id],
+    PLACEHOLDER_FEATURE_ID,
+  ],
+  0.6,
+  1
+];
+
 class _LocationFieldState extends State<LocationField> {
+  // Represents the coordinates used for the focused symbol on the map (i.e. what's centered on the map)
   late Coordinates? _coordinates;
 
   bool _isEditMode = false;
 
   MapLibreMapController? _mapController;
 
-  // The marker that uses the saved coordinates of the sighting
-  Circle? _existingMapMarker;
-
   @override
   void initState() {
     _coordinates = widget.coordinates;
@@ -52,26 +78,25 @@ class _LocationFieldState extends State<LocationField> {
     return EditableCard(
       title: t.sightingLocationFieldTitle,
       isEditMode: _isEditMode,
-      onChanged: _isEditMode
-          ? _handleCancel
-          : () {
-              setState(() {
-                _isEditMode = true;
-              });
-            },
+      onChanged: _isEditMode ? _handleCancel : _handleStartEdit,
       child: Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
         _renderMap(),
         const SizedBox(
           height: 20,
         ),
-        if (_coordinates != null) ...[
+        if (_coordinates == null)
+          Text(t.sightingLocationNoLocation)
+        else ...[
           Text(t.sightingLocationLongitude(_coordinates!.longitude),
               style: Theme.of(context).textTheme.bodyLarge),
           Text(t.sightingLocationLatitude(_coordinates!.latitude),
               style: Theme.of(context).textTheme.bodyLarge),
         ],
         if (_isEditMode)
-          ActionButtons(onCancel: _handleCancel, onAction: _handleSave)
+          Padding(
+              padding: const EdgeInsets.only(top: 10.0),
+              child:
+                  ActionButtons(onCancel: _handleCancel, onAction: _handleSave))
       ]),
     );
   }
@@ -90,121 +115,175 @@ class _LocationFieldState extends State<LocationField> {
         alignment: Alignment.center,
         height: 200,
         child: MapLibreMap(
-            initialCameraPosition: initialCameraPosition,
-            scrollGesturesEnabled: _isEditMode,
-            dragEnabled: _isEditMode,
-            zoomGesturesEnabled: _isEditMode,
-            trackCameraPosition: _isEditMode,
-            compassEnabled: false,
-            rotateGesturesEnabled: false,
-            onMapCreated: (controller) {
-              _mapController = controller;
-            },
-            gestureRecognizers: <Factory<OneSequenceGestureRecognizer>>{
-              Factory<OneSequenceGestureRecognizer>(
-                  () => EagerGestureRecognizer()),
-            },
-            onStyleLoadedCallback: () async {
-              if (_coordinates != null) {
-                _existingMapMarker = await _mapController!.addCircle(
-                    createMapCircle(
-                        latitude: _coordinates!.latitude,
-                        longitude: _coordinates!.longitude));
-              }
-            },
-            onMapClick: (_, latLng) async {
-              if (!_isEditMode) return;
-
-              final nextMarker = _mapController!.circles.where((c) {
-                return c != _existingMapMarker;
-              }).firstOrNull;
-
-              // Add the "next" marker and update the visuals of the existing marker
-              if (nextMarker == null) {
-                await _mapController!.addCircle(createMapCircle(
-                    latitude: latLng.latitude, longitude: latLng.longitude));
-
-                if (_existingMapMarker != null) {
-                  await _mapController!.updateCircle(
-                      _existingMapMarker!,
-                      const CircleOptions(
-                        circleOpacity: 0.5,
-                        circleStrokeOpacity: 0.5,
-                      ));
-                }
-              } else {
-                await _mapController!
-                    .updateCircle(nextMarker, CircleOptions(geometry: latLng));
-              }
-
-              _mapController!.animateCamera(CameraUpdate.newLatLng(latLng));
-
-              setState(() {
-                _coordinates =
-                    (latitude: latLng.latitude, longitude: latLng.longitude);
-              });
-            }));
+          initialCameraPosition: initialCameraPosition,
+          scrollGesturesEnabled: _isEditMode,
+          dragEnabled: _isEditMode,
+          zoomGesturesEnabled: _isEditMode,
+          trackCameraPosition: _isEditMode,
+          compassEnabled: false,
+          rotateGesturesEnabled: false,
+          onMapCreated: (controller) {
+            _mapController = controller;
+          },
+          gestureRecognizers: <Factory<OneSequenceGestureRecognizer>>{
+            Factory<OneSequenceGestureRecognizer>(
+                () => EagerGestureRecognizer()),
+          },
+          onStyleLoadedCallback: _handleMapStyleLoaded,
+          onMapClick: _handleMapPress,
+        ));
+  }
+
+  Future<void> _handleMapStyleLoaded() async {
+    // Load asset used for symbol marker
+    final bytes = await rootBundle.load("assets/images/meliponini.png");
+    final list = bytes.buffer.asUint8List();
+    _mapController!.addImage(BEE_IMAGE_ID, list);
+
+    // Create source
+    await _mapController!.addGeoJsonSource(
+        SOURCE_ID,
+        _coordinates == null
+            ? EMPTY_SOURCE_GEOJSON_DATA
+            : createSourceData(focusedCoord: _coordinates!));
+
+    // Create layer
+    await _mapController!.addSymbolLayer(
+        SOURCE_ID,
+        LAYER_ID,
+        const SymbolLayerProperties(
+          iconImage: BEE_IMAGE_ID,
+          iconSize: 0.07,
+          iconAllowOverlap: true,
+          iconOpacity: ICON_OPACITY_EXPRESSION,
+        ),
+        enableInteraction: false,
+        filter: SHOW_FOCUSED_FILTER_EXPRESSION);
+  }
+
+  Future<void> _handleMapPress(_, LatLng latLng) async {
+    if (!_isEditMode) return;
+
+    _mapController!.setGeoJsonSource(
+        SOURCE_ID,
+        createSourceData(focusedCoord: (
+          latitude: latLng.latitude,
+          longitude: latLng.longitude
+        ), placeholderCoord: widget.coordinates));
+
+    _mapController!.setFilter(LAYER_ID, SHOW_ALL_FILTER_EXPRESSION);
+
+    _mapController!.animateCamera(CameraUpdate.newLatLng(latLng));
+
+    setState(() {
+      _coordinates = (latitude: latLng.latitude, longitude: latLng.longitude);
+    });
+  }
+
+  Future<void> _handleStartEdit() async {
+    if (widget.coordinates == null) {
+      await _mapController!.setGeoJsonSource(SOURCE_ID,
+          createSourceData(focusedCoord: BRAZIL_CENTROID_COORDINATES));
+
+      setState(() {
+        _coordinates = (
+          latitude: BRAZIL_CENTROID_COORDINATES.latitude,
+          longitude: BRAZIL_CENTROID_COORDINATES.longitude
+        );
+      });
+    }
+
+    setState(() {
+      _isEditMode = true;
+    });
   }
 
   void _handleSave() async {
-    // Do nothing if coordinates have not changed at all
-    if (_coordinates == widget.coordinates) {
+    // Do nothing if coordinates they are not set or have not changed at all
+    if (_coordinates == null || _coordinates == widget.coordinates) {
       _handleCancel();
       return;
     }
 
     setState(() {
       _isEditMode = false;
-      if (_coordinates != null) {
-        widget.onUpdate(_coordinates!);
-      }
     });
 
-    _resetMap(coordinates: _coordinates!, zoomLevel: DEFAULT_ZOOMED_IN_LEVEL);
+    if (_coordinates != null) {
+      widget.onUpdate(_coordinates!);
+    }
+
+    await _resetMap(
+        data: createSourceData(focusedCoord: _coordinates!),
+        cameraCoordinates: _coordinates!,
+        cameraZoom: DEFAULT_ZOOMED_IN_LEVEL);
   }
 
   void _handleCancel() async {
-    if (widget.coordinates == null || _coordinates == null) {
+    setState(() {
+      _isEditMode = false;
+    });
+
+    if (widget.coordinates == null) {
       await _resetMap(
-          coordinates: BRAZIL_CENTROID_COORDINATES,
-          zoomLevel: DEFAULT_ZOOMED_OUT_LEVEL);
+          data: EMPTY_SOURCE_GEOJSON_DATA,
+          cameraCoordinates: BRAZIL_CENTROID_COORDINATES,
+          cameraZoom: DEFAULT_ZOOMED_OUT_LEVEL);
     } else {
       await _resetMap(
-          coordinates: widget.coordinates!, zoomLevel: DEFAULT_ZOOMED_IN_LEVEL);
+        data: createSourceData(focusedCoord: widget.coordinates!),
+        cameraCoordinates: widget.coordinates!,
+        cameraZoom: DEFAULT_ZOOMED_IN_LEVEL,
+      );
     }
 
     setState(() {
-      _isEditMode = false;
       _coordinates = widget.coordinates;
     });
   }
 
-  Future<void> _resetMap(
-      {required Coordinates coordinates, required double zoomLevel}) async {
-    final latLng = LatLng(coordinates.latitude, coordinates.longitude);
-
-    if (_existingMapMarker != null) {
-      await _mapController!.updateCircle(
-          _existingMapMarker!,
-          CircleOptions(
-              geometry: latLng, circleOpacity: 1.0, circleStrokeOpacity: 1.0));
-    }
-
-    await _mapController!.removeCircles(_mapController!.circles.where((c) {
-      return c != _existingMapMarker;
-    }));
-
-    _mapController!
-        .animateCamera(CameraUpdate.newLatLngZoom(latLng, zoomLevel));
+  Future<void> _resetMap({
+    required Map<String, dynamic> data,
+    required Coordinates cameraCoordinates,
+    required double cameraZoom,
+  }) async {
+    await _mapController!.setGeoJsonSource(SOURCE_ID, data);
+    await _mapController!.setFilter(LAYER_ID, SHOW_FOCUSED_FILTER_EXPRESSION);
+    await _mapController!.animateCamera(CameraUpdate.newLatLngZoom(
+        LatLng(cameraCoordinates.latitude, cameraCoordinates.longitude),
+        cameraZoom));
   }
 }
 
-CircleOptions createMapCircle(
-    {required double latitude, required double longitude}) {
-  return CircleOptions(
-      circleRadius: 8,
-      circleColor: MeliColors.magnolia.toHexStringRGB(),
-      circleStrokeColor: MeliColors.black.toHexStringRGB(),
-      circleStrokeWidth: 2.0,
-      geometry: LatLng(latitude, longitude));
+Map<String, dynamic> createSourceData(
+    {required Coordinates focusedCoord, Coordinates? placeholderCoord}) {
+  return {
+    "type": "FeatureCollection",
+    "features": [
+      {
+        "type": "Feature",
+        "id": FOCUSED_FEATURE_ID,
+        // ignore: inference_failure_on_collection_literal
+        "properties": {},
+        "geometry": {
+          "type": "Point",
+          "coordinates": [focusedCoord.longitude, focusedCoord.latitude]
+        }
+      },
+      if (placeholderCoord != null)
+        {
+          "type": "Feature",
+          "id": PLACEHOLDER_FEATURE_ID,
+          // ignore: inference_failure_on_collection_literal
+          "properties": {},
+          "geometry": {
+            "type": "Point",
+            "coordinates": [
+              placeholderCoord.longitude,
+              placeholderCoord.latitude
+            ]
+          }
+        }
+    ],
+  };
 }
