[Web][Example] Added web support for fills (#501)

* added web supoort for fills * added capture for drag start * changed translateFill to expect a delta vector * removed somewhat redundant comment * updated readme Co-authored-by: Tobrun <tobrun.van.nuland@gmail.com>
flutter-mapbox-gl · Feb 12, 2021 · 2209305 · 2209305
1 parent d083d12
commit 2209305
Show file tree

Hide file tree

Showing 14 changed files with 261 additions and 97 deletions.
diff --git a/README.md b/README.md
@@ -55,7 +55,7 @@ This project is available on [pub.dev](https://pub.dev/packages/mapbox_gl), foll
 | Symbol | :white_check_mark:   | :white_check_mark: | :white_check_mark: |
 | Circle | :white_check_mark:   | :white_check_mark: | :white_check_mark: |
 | Line | :white_check_mark:   | :white_check_mark: | :white_check_mark: |
-| Fill | :white_check_mark:   | :white_check_mark: |  |
+| Fill | :white_check_mark:   | :white_check_mark: | :white_check_mark: |
 
 ## Map Styles
 

diff --git a/example/lib/full_map.dart b/example/lib/full_map.dart
@@ -5,8 +5,7 @@ import 'main.dart';
 import 'page.dart';
 
 class FullMapPage extends ExamplePage {
-  FullMapPage()
-      : super(const Icon(Icons.map), 'Full screen map');
+  FullMapPage() : super(const Icon(Icons.map), 'Full screen map');
 
   @override
   Widget build(BuildContext context) {

diff --git a/example/lib/main.dart b/example/lib/main.dart
@@ -39,7 +39,6 @@ final List<ExamplePage> _allPages = <ExamplePage>[
 ];
 
 class MapsDemo extends StatelessWidget {
-
   //FIXME: Add your Mapbox access token here
   static const String ACCESS_TOKEN = "YOUR_TOKEN_HERE";
 

diff --git a/example/lib/place_fill.dart b/example/lib/place_fill.dart
@@ -74,20 +74,19 @@ class PlaceFillBodyState extends State<PlaceFillBody> {
     controller.addFill(
       FillOptions(geometry: [
         [
-          LatLng(-32.81711, 151.1447171),
-          LatLng(-32.81711, 152.2447171),
-          LatLng(-33.91711, 152.2447171),
-          LatLng(-33.91711, 151.1447171),
+          LatLng(-33.719, 151.150),
+          LatLng(-33.858, 151.150),
+          LatLng(-33.866, 151.401),
+          LatLng(-33.747, 151.328),
+          LatLng(-33.719, 151.150),
         ],
         [
-          LatLng(-32.86711, 152.1947171),
-          LatLng(-33.86711, 151.1947171),
-          LatLng(-32.86711, 151.1947171),
-          LatLng(-33.86711, 152.1947171),
+          LatLng(-33.762, 151.250),
+          LatLng(-33.827, 151.250),
+          LatLng(-33.833, 151.347),
+          LatLng(-33.762, 151.250),
         ]
-      ], 
-      fillColor: "#FF0000", 
-      fillOutlineColor: "#FF0000"),
+      ], fillColor: "#FF0000", fillOutlineColor: "#FF0000"),
     );
     setState(() {
       _fillCount += 1;
@@ -154,7 +153,8 @@ class PlaceFillBodyState extends State<PlaceFillBody> {
   }
 
   Future<void> _changeFillPattern() async {
-    String current = _selectedFill.options.fillPattern == null ? "assetImage" : null;
+    String current =
+        _selectedFill.options.fillPattern == null ? "assetImage" : null;
     _updateSelectedFill(
       FillOptions(fillPattern: current),
     );
@@ -210,9 +210,8 @@ class PlaceFillBodyState extends State<PlaceFillBody> {
                         ),
                         FlatButton(
                           child: const Text('change fill-color'),
-                          onPressed: (_selectedFill == null) 
-                              ? null 
-                              : _changeFillColor,
+                          onPressed:
+                              (_selectedFill == null) ? null : _changeFillColor,
                         ),
                         FlatButton(
                           child: const Text('change fill-outline-color'),
@@ -228,15 +227,13 @@ class PlaceFillBodyState extends State<PlaceFillBody> {
                         ),
                         FlatButton(
                           child: const Text('change position'),
-                          onPressed: (_selectedFill == null) 
-                              ? null 
-                              : _changePosition,
+                          onPressed:
+                              (_selectedFill == null) ? null : _changePosition,
                         ),
                         FlatButton(
                           child: const Text('toggle draggable'),
-                          onPressed: (_selectedFill == null) 
-                              ? null 
-                              : _changeDraggable,
+                          onPressed:
+                              (_selectedFill == null) ? null : _changeDraggable,
                         ),
                       ],
                     ),

diff --git a/lib/src/controller.dart b/lib/src/controller.dart
@@ -147,7 +147,9 @@ class MapboxMapController extends ChangeNotifier {
         onMapIdle();
       }
     });
-    MapboxGlPlatform.getInstance(_id).onUserLocationUpdatedPlatform.add((location) { 
+    MapboxGlPlatform.getInstance(_id)
+        .onUserLocationUpdatedPlatform
+        .add((location) {
       onUserLocationUpdated?.call(location);
     });
   }
@@ -779,7 +781,8 @@ class MapboxMapController extends ChangeNotifier {
   }
 
   /// Adds an image source to the style currently displayed in the map, so that it can later be referred to by the provided id.
-  Future<void> addImageSource(String imageSourceId, Uint8List bytes, LatLngQuad coordinates) {
+  Future<void> addImageSource(
+      String imageSourceId, Uint8List bytes, LatLngQuad coordinates) {
     return MapboxGlPlatform.getInstance(_id)
         .addImageSource(imageSourceId, bytes, coordinates);
   }
@@ -791,12 +794,15 @@ class MapboxMapController extends ChangeNotifier {
 
   /// Adds a Mapbox style layer to the map's style at render time.
   Future<void> addLayer(String imageLayerId, String imageSourceId) {
-    return MapboxGlPlatform.getInstance(_id).addLayer(imageLayerId, imageSourceId);
+    return MapboxGlPlatform.getInstance(_id)
+        .addLayer(imageLayerId, imageSourceId);
   }
 
   /// Adds a Mapbox style layer below the layer provided with belowLayerId to the map's style at render time,
-  Future<void> addLayerBelow(String imageLayerId, String imageSourceId, String belowLayerId) {
-    return MapboxGlPlatform.getInstance(_id).addLayerBelow(imageLayerId, imageSourceId, belowLayerId);
+  Future<void> addLayerBelow(
+      String imageLayerId, String imageSourceId, String belowLayerId) {
+    return MapboxGlPlatform.getInstance(_id)
+        .addLayerBelow(imageLayerId, imageSourceId, belowLayerId);
   }
 
   /// Removes a Mapbox style layer
@@ -821,8 +827,8 @@ class MapboxMapController extends ChangeNotifier {
 
   /// Returns the distance spanned by one pixel at the specified [latitude] and current zoom level.
   /// The distance between pixels decreases as the latitude approaches the poles. This relationship parallels the relationship between longitudinal coordinates at different latitudes.
-  Future<double> getMetersPerPixelAtLatitude(double latitude) async{
-    return MapboxGlPlatform.getInstance(_id).getMetersPerPixelAtLatitude(latitude);
+  Future<double> getMetersPerPixelAtLatitude(double latitude) async {
+    return MapboxGlPlatform.getInstance(_id)
+        .getMetersPerPixelAtLatitude(latitude);
   }
-
-}
+}
diff --git a/mapbox_gl_platform_interface/lib/src/fill.dart b/mapbox_gl_platform_interface/lib/src/fill.dart
@@ -6,8 +6,22 @@
 
 part of mapbox_gl_platform_interface;
 
+FillOptions translateFillOptions(FillOptions options, LatLng delta) {
+  if (options.geometry != null) {
+    List<List<LatLng>> newGeometry = [];
+    for (var ring in options.geometry) {
+      List<LatLng> newRing = [];
+      for (var coords in ring) {
+        newRing.add(coords + delta);
+      }
+      newGeometry.add(newRing);
+    }
+    return FillOptions(geometry: newGeometry);
+  }
+  return options;
+}
+
 class Fill {
-  @visibleForTesting
   Fill(this._id, this.options, [this._data]);
 
   /// A unique identifier for this fill.
@@ -36,14 +50,13 @@ class FillOptions {
   ///
   /// By default, every non-specified field is null, meaning no desire to change
   /// fill defaults or current configuration.
-  const FillOptions({
-    this.fillOpacity,
-    this.fillColor,
-    this.fillOutlineColor,
-    this.fillPattern,
-    this.geometry,
-    this.draggable
-  });
+  const FillOptions(
+      {this.fillOpacity,
+      this.fillColor,
+      this.fillOutlineColor,
+      this.fillPattern,
+      this.geometry,
+      this.draggable});
 
   final double fillOpacity;
   final String fillColor;
@@ -81,9 +94,13 @@ class FillOptions {
     addIfPresent('fillColor', fillColor);
     addIfPresent('fillOutlineColor', fillOutlineColor);
     addIfPresent('fillPattern', fillPattern);
-    addIfPresent('geometry',
-        geometry?.map((List<LatLng> latLngList) => latLngList.map((LatLng latLng) => latLng.toJson())?.toList())?.toList());
+    addIfPresent(
+        'geometry',
+        geometry
+            ?.map((List<LatLng> latLngList) =>
+                latLngList.map((LatLng latLng) => latLng.toJson())?.toList())
+            ?.toList());
     addIfPresent('draggable', draggable);
     return json;
   }
-}
+}
diff --git a/mapbox_gl_platform_interface/lib/src/location.dart b/mapbox_gl_platform_interface/lib/src/location.dart
@@ -26,6 +26,14 @@ class LatLng {
   /// The longitude in degrees between -180.0 (inclusive) and 180.0 (exclusive).
   final double longitude;
 
+  LatLng operator +(LatLng o) {
+    return LatLng(latitude + o.latitude, longitude + o.longitude);
+  }
+
+  LatLng operator -(LatLng o) {
+    return LatLng(latitude - o.latitude, longitude - o.longitude);
+  }
+
   dynamic toJson() {
     return <double>[latitude, longitude];
   }
@@ -107,7 +115,11 @@ class LatLngBounds {
 /// A geographical area representing a non-aligned quadrilateral
 /// This class does not wrap values to the world bounds
 class LatLngQuad {
-  const LatLngQuad({@required this.topLeft, @required this.topRight, @required this.bottomRight, @required this.bottomLeft})
+  const LatLngQuad(
+      {@required this.topLeft,
+      @required this.topRight,
+      @required this.bottomRight,
+      @required this.bottomLeft})
       : assert(topLeft != null),
         assert(topRight != null),
         assert(bottomRight != null),
@@ -122,7 +134,12 @@ class LatLngQuad {
   final LatLng bottomLeft;
 
   dynamic toList() {
-    return <dynamic>[topLeft.toJson(), topRight.toJson(), bottomRight.toJson(), bottomLeft.toJson()];
+    return <dynamic>[
+      topLeft.toJson(),
+      topRight.toJson(),
+      bottomRight.toJson(),
+      bottomLeft.toJson()
+    ];
   }
 
   @visibleForTesting
@@ -154,7 +171,6 @@ class LatLngQuad {
 
   @override
   int get hashCode => hashValues(topLeft, topRight, bottomRight, bottomLeft);
-
 }
 
 /// User's observed location

diff --git a/mapbox_gl_web/lib/mapbox_gl_web.dart b/mapbox_gl_web/lib/mapbox_gl_web.dart
@@ -26,4 +26,5 @@ part 'src/feature_manager/feature_manager.dart';
 part 'src/feature_manager/symbol_manager.dart';
 part 'src/feature_manager/line_manager.dart';
 part 'src/feature_manager/circle_manager.dart';
+part 'src/feature_manager/fill_manager.dart';
 part 'src/mapbox_map_controller.dart';
diff --git a/mapbox_gl_web/lib/src/convert.dart b/mapbox_gl_web/lib/src/convert.dart
@@ -357,4 +357,58 @@ class Convert {
     }
     return feature.copyWith(properties: properties, geometry: geometry);
   }
+
+  static List<List<List<double>>> fillGeometryToFeatureGeometry(
+      List<List<LatLng>> geom) {
+    List<List<List<double>>> convertedFill = [];
+    for (final ring in geom) {
+      List<List<double>> convertedRing = [];
+      for (final coords in ring) {
+        convertedRing.add([coords.longitude, coords.latitude]);
+      }
+      convertedFill.add(convertedRing);
+    }
+    return convertedFill;
+  }
+
+  static List<List<LatLng>> featureGeometryToFillGeometry(
+      List<List<List<double>>> geom) {
+    List<List<LatLng>> convertedFill = [];
+    for (final ring in geom) {
+      List<LatLng> convertedRing = [];
+      for (final coords in ring) {
+        convertedRing.add(LatLng(coords[1], coords[0]));
+      }
+      convertedFill.add(convertedRing);
+    }
+    return convertedFill;
+  }
+
+  static Feature intepretFillOptions(FillOptions options, Feature feature) {
+    var properties = feature.properties;
+    var geometry = feature.geometry;
+    if (options.draggable != null) {
+      properties['draggable'] = options.draggable;
+    }
+    if (options.fillColor != null) {
+      properties['fillColor'] = options.fillColor;
+    }
+    if (options.fillOpacity != null) {
+      properties['fillOpacity'] = options.fillOpacity;
+    }
+    if (options.fillOutlineColor != null) {
+      properties['fillOutlineColor'] = options.fillOutlineColor;
+    }
+    if (options.fillPattern != null) {
+      properties['fillPattern'] = options.fillPattern;
+    }
+
+    if (options.geometry != null) {
+      geometry = Geometry(
+        type: geometry.type,
+        coordinates: fillGeometryToFeatureGeometry(options.geometry),
+      );
+    }
+    return feature.copyWith(properties: properties, geometry: geometry);
+  }
 }
diff --git a/mapbox_gl_web/lib/src/feature_manager/feature_manager.dart b/mapbox_gl_web/lib/src/feature_manager/feature_manager.dart
@@ -8,6 +8,8 @@ abstract class FeatureManager<T> {
   final String layerId;
   final MapboxMap map;
   final FeatureTapCallback onTap;
+  @protected
+  LatLng dragOrigin;
 
   final Map<String, Feature> _features = {};
   num featureCounter = 1;
@@ -39,27 +41,21 @@ abstract class FeatureManager<T> {
     return '${feature.id}';
   }
 
-
   void updateFeature(Feature feature) {
     updateFeatures([feature]);
   }
 
-
   void updateFeatures(Iterable<Feature> features) {
-    features.forEach(
-        (feature) => _features['${feature.id}'] = feature
-    );
+    features.forEach((feature) => _features['${feature.id}'] = feature);
     _updateSource();
   }
-  
+
   void remove(String featureId) {
     removeAll([featureId]);
   }
 
   void removeAll(Iterable<String> featuresIds) {
-    featuresIds.forEach(
-      (featureId) => _features.remove(featureId)
-    );
+    featuresIds.forEach((featureId) => _features.remove(featureId));
     _updateSource();
   }
 
@@ -91,6 +87,8 @@ abstract class FeatureManager<T> {
         e.preventDefault();
         _draggableFeatureId = '${e.features[0].id}';
         map.getCanvas().style.cursor = 'grabbing';
+        var coords = e.lngLat;
+        dragOrigin = LatLng(coords.lat, coords.lng);
       }
     });