[flutter] - correct pixelratio, mapview size creation and gesture conversion

tobrun · tobrun · commit 54aeafdf3963 · 2018-05-07T13:16:24.000+02:00
diff --git a/lib/overlay.dart b/lib/overlay.dart
@@ -1,5 +1,6 @@
 import 'dart:async';
 import 'dart:math';
+import 'dart:ui';
 
 import 'package:flutter/services.dart';
 import 'package:flutter/widgets.dart';
@@ -15,18 +16,28 @@ class MapboxOverlay extends StatefulWidget {
   State<StatefulWidget> createState() => new _MapboxOverlayState();
 }
 
+
+/// Manages the creation and state of the map.
+/// This includes:
+///  - maintaining the id of the used surface texture
+///  - maintaining the map transformation
+///  - handling gesture input
 class _MapboxOverlayState extends State<MapboxOverlay> {
   bool _initialized = false;
   int _textureId = -1;
   Offset _scaleStartFocal;
   double _zoom;
-  Size _size;
+  Size _size; // local coordinate system.
 
-  Future<Null> _createMapView(Size size, MapboxMapOptions options) async {
+  Future<Null> _createMapView(
+      Window window, Size size, MapboxMapOptions options) async {
     _size = size;
+
     try {
-      int textureId = await widget.controller
-          .create(width: size.width, height: size.height, options: options);
+      int textureId = await widget.controller.create(
+          width: _size.width * window.devicePixelRatio,
+          height: _size.height * window.devicePixelRatio,
+          options: options);
 
       if (!mounted) {
         return;
@@ -48,8 +59,7 @@ class _MapboxOverlayState extends State<MapboxOverlay> {
       }
 
       if (!_initialized) {
-        _createMapView(constraints.biggest, widget.options);
-
+        _createMapView(window, constraints.biggest, widget.options);
         _initialized = true;
         return new Container();
       } else {
@@ -67,25 +77,32 @@ class _MapboxOverlayState extends State<MapboxOverlay> {
     });
   }
 
+  /// Called when the user double taps the screen, results in zooming the map
   void _onDoubleTap() {
+    // TODO we currently zoom on center, this needs to be the tapped offset instead
     widget.controller.getZoom().then((zoom) {
       zoom++;
-      widget.controller.zoom(zoom, _size.width / 2, _size.height / 2, 350);
+      widget.controller.zoom(zoom, _size.width / 2 * window.devicePixelRatio,
+          _size.height / 2 * window.devicePixelRatio, 350);
     });
   }
 
+  /// Called when the user initiates a scale/pan gesture.
   void _onScaleStart(ScaleStartDetails details) {
-    _scaleStartFocal = details.focalPoint;
+    _scaleStartFocal = localToMapOffset(details.focalPoint);
     _zoom = 0.0;
   }
 
+  /// Called when the user scales or pans the map.
   void _onScaleUpdate(ScaleUpdateDetails details) {
-    final Offset delta = details.focalPoint - _scaleStartFocal;
+    Offset focalGesture = localToMapOffset(details.focalPoint);
+    final Offset delta = focalGesture - _scaleStartFocal;
     widget.controller.moveBy(delta.dx, delta.dy, 0);
 
     if (details.scale != 1.0) {
       RenderBox renderBox = context.findRenderObject();
-      Offset focalPoint = renderBox.globalToLocal(details.focalPoint);
+      Offset focalPoint =
+          localToMapOffset(renderBox.globalToLocal(details.focalPoint));
 
       double newZoom = _zoomLevel(details.scale);
       double _zoomBy = newZoom - _zoom;
@@ -94,15 +111,27 @@ class _MapboxOverlayState extends State<MapboxOverlay> {
       _zoom = newZoom;
     }
 
-    _scaleStartFocal = details.focalPoint;
+    _scaleStartFocal = localToMapOffset(details.focalPoint);
   }
 
+  /// Called when the users stops scaling the map.
   void _onScaleEnd(ScaleEndDetails details) {
     _scaleStartFocal = null;
     _zoom = null;
   }
 
+  /// Calculates a zoom value from a scale gesture detector input.
   double _zoomLevel(double scale) {
     return log(scale) / log(pi / 2);
   }
+
+  /// Flutter supports 2 coordinate systems (local and global).
+  /// You can convert between the two using box.localToGlobal/globalToLocal.
+  /// This does not match what we expect on gl-native so we need to convert
+  /// to the offset to match the input on the Android SDK
+  Offset localToMapOffset(Offset offset) {
+    // TODO replace with MatrixUtils.transformPoint
+    return new Offset(offset.dx * window.devicePixelRatio,
+        offset.dy * window.devicePixelRatio);
+  }
 }
