Skip to content

Commit

Permalink
Gesture fixes (#851)
Browse files Browse the repository at this point in the history 
* fixed gesture issues on web
* rotate now works as expected
* added option to disable double clicks
* fixed queryRenderedFeatures on web

* removed map from listview to avoid scroll issues

* pre pr refactor

* fixed formatting issue

Co-authored-by: Tobrun <tobrun.van.nuland@gmail.com>
  • Loading branch information
@felix-ht @tobrun
felix-ht and tobrun authored Jan 13, 2022
1 parent a484bc4 commit d3954e5
Show file tree
Hide file tree
Showing 6 changed files with 179 additions and 101 deletions.
63 changes: 48 additions & 15 deletions example/lib/map_ui.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@
import 'dart:math';

import 'package:flutter/material.dart';
import 'package:collection/collection.dart';
import 'package:mapbox_gl/mapbox_gl.dart';

import 'main.dart';
Expand Down Expand Up @@ -61,6 +62,7 @@ class MapUiBodyState extends State<MapUiBody> {
];
bool _rotateGesturesEnabled = true;
bool _scrollGesturesEnabled = true;
bool? _doubleClickToZoomEnabled;
bool _tiltGesturesEnabled = true;
bool _zoomGesturesEnabled = true;
bool _myLocationEnabled = true;
Expand Down Expand Up @@ -214,6 +216,28 @@ class MapUiBodyState extends State<MapUiBody> {
);
}

Widget _doubleClickToZoomToggler() {
final stateInfo = _doubleClickToZoomEnabled == null
? "disable"
: _doubleClickToZoomEnabled!
? 'unset'
: 'enable';
return TextButton(
child: Text('$stateInfo double click to zoom'),
onPressed: () {
setState(() {
if (_doubleClickToZoomEnabled == null) {
_doubleClickToZoomEnabled = false;
} else if (!_doubleClickToZoomEnabled!) {
_doubleClickToZoomEnabled = true;
} else {
_doubleClickToZoomEnabled = null;
}
});
},
);
}

Widget _tiltToggler() {
return TextButton(
child: Text('${_tiltGesturesEnabled ? 'disable' : 'enable'} tilt'),
Expand Down Expand Up @@ -282,10 +306,11 @@ class MapUiBodyState extends State<MapUiBody> {
}

_drawFill(List<dynamic> features) async {
Map<String, dynamic> feature = features[0];
if (feature['geometry']['type'] == 'Polygon') {
var coordinates = feature['geometry']['coordinates'];
List<List<LatLng>> geometry = coordinates
Map<String, dynamic>? feature =
features.firstWhereOrNull((f) => f['geometry']['type'] == 'Polygon');

if (feature != null) {
List<List<LatLng>> geometry = feature['geometry']['coordinates']
.map(
(ll) => ll.map((l) => LatLng(l[1], l[0])).toList().cast<LatLng>())
.toList()
Expand Down Expand Up @@ -317,6 +342,7 @@ class MapUiBodyState extends State<MapUiBody> {
scrollGesturesEnabled: _scrollGesturesEnabled,
tiltGesturesEnabled: _tiltGesturesEnabled,
zoomGesturesEnabled: _zoomGesturesEnabled,
doubleClickZoomEnabled: _doubleClickToZoomEnabled,
myLocationEnabled: _myLocationEnabled,
myLocationTrackingMode: _myLocationTrackingMode,
myLocationRenderMode: MyLocationRenderMode.GPS,
Expand Down Expand Up @@ -365,15 +391,7 @@ class MapUiBodyState extends State<MapUiBody> {
},
);

final List<Widget> listViewChildren = <Widget>[
Center(
child: SizedBox(
width: _mapExpanded ? null : 300.0,
height: 200.0,
child: mapboxMap,
),
),
];
final List<Widget> listViewChildren = <Widget>[];

if (mapController != null) {
listViewChildren.addAll(
Expand All @@ -393,6 +411,7 @@ class MapUiBodyState extends State<MapUiBody> {
_zoomBoundsToggler(),
_rotateToggler(),
_scrollToggler(),
_doubleClickToZoomToggler(),
_tiltToggler(),
_zoomToggler(),
_myLocationToggler(),
Expand All @@ -401,8 +420,22 @@ class MapUiBodyState extends State<MapUiBody> {
],
);
}
return ListView(
children: listViewChildren,
return Column(
mainAxisSize: MainAxisSize.min,
children: [
Center(
child: SizedBox(
width: _mapExpanded ? null : 300.0,
height: 200.0,
child: mapboxMap,
),
),
Expanded(
child: ListView(
children: listViewChildren,
),
)
],
);
}

Expand Down
1 change: 1 addition & 0 deletions lib/mapbox_gl.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ import 'package:flutter/foundation.dart';
import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:collection/collection.dart';
import 'package:mapbox_gl_platform_interface/mapbox_gl_platform_interface.dart';

export 'package:mapbox_gl_platform_interface/mapbox_gl_platform_interface.dart'
Expand Down
61 changes: 49 additions & 12 deletions lib/src/mapbox_map.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@ class MapboxMap extends StatefulWidget {
this.scrollGesturesEnabled = true,
this.zoomGesturesEnabled = true,
this.tiltGesturesEnabled = true,
this.doubleClickZoomEnabled,
this.trackCameraPosition = false,
this.myLocationEnabled = false,
this.myLocationTrackingMode = MyLocationTrackingMode.None,
Expand Down Expand Up @@ -115,6 +116,12 @@ class MapboxMap extends StatefulWidget {
/// True if the map view should respond to tilt gestures.
final bool tiltGesturesEnabled;

/// Set to true to forcefully disable/enable if map should respond to double
/// click to zoom.
///
/// This takes presedence over zoomGesturesEnabled. Only supported for web.
final bool? doubleClickZoomEnabled;

/// True if you want to be notified of map camera movements by the MapboxMapController. Default is false.
///
/// If this is set to true and the user pans/zooms/rotates the map, MapboxMapController (which is a ChangeNotifier)
Expand Down Expand Up @@ -311,11 +318,12 @@ class _MapboxMapOptions {
this.cameraTargetBounds,
this.styleString,
this.minMaxZoomPreference,
this.rotateGesturesEnabled,
this.scrollGesturesEnabled,
this.tiltGesturesEnabled,
required this.rotateGesturesEnabled,
required this.scrollGesturesEnabled,
required this.tiltGesturesEnabled,
required this.zoomGesturesEnabled,
required this.doubleClickZoomEnabled,
this.trackCameraPosition,
this.zoomGesturesEnabled,
this.myLocationEnabled,
this.myLocationTrackingMode,
this.myLocationRenderMode,
Expand All @@ -337,6 +345,8 @@ class _MapboxMapOptions {
tiltGesturesEnabled: map.tiltGesturesEnabled,
trackCameraPosition: map.trackCameraPosition,
zoomGesturesEnabled: map.zoomGesturesEnabled,
doubleClickZoomEnabled:
map.doubleClickZoomEnabled ?? map.zoomGesturesEnabled,
myLocationEnabled: map.myLocationEnabled,
myLocationTrackingMode: map.myLocationTrackingMode,
myLocationRenderMode: map.myLocationRenderMode,
Expand All @@ -356,15 +366,17 @@ class _MapboxMapOptions {

final MinMaxZoomPreference? minMaxZoomPreference;

final bool? rotateGesturesEnabled;
final bool rotateGesturesEnabled;

final bool? scrollGesturesEnabled;
final bool scrollGesturesEnabled;

final bool? tiltGesturesEnabled;
final bool tiltGesturesEnabled;

final bool? trackCameraPosition;
final bool zoomGesturesEnabled;

final bool doubleClickZoomEnabled;

final bool? zoomGesturesEnabled;
final bool? trackCameraPosition;

final bool? myLocationEnabled;

Expand All @@ -382,6 +394,14 @@ class _MapboxMapOptions {

final Point? attributionButtonMargins;

final _gestureGroup = {
'rotateGesturesEnabled',
'scrollGesturesEnabled',
'tiltGesturesEnabled',
'zoomGesturesEnabled',
'doubleClickZoomEnabled'
};

Map<String, dynamic> toMap() {
final Map<String, dynamic> optionsMap = <String, dynamic>{};

Expand All @@ -403,10 +423,13 @@ class _MapboxMapOptions {
addIfNonNull('cameraTargetBounds', cameraTargetBounds?.toJson());
addIfNonNull('styleString', styleString);
addIfNonNull('minMaxZoomPreference', minMaxZoomPreference?.toJson());

addIfNonNull('rotateGesturesEnabled', rotateGesturesEnabled);
addIfNonNull('scrollGesturesEnabled', scrollGesturesEnabled);
addIfNonNull('tiltGesturesEnabled', tiltGesturesEnabled);
addIfNonNull('zoomGesturesEnabled', zoomGesturesEnabled);
addIfNonNull('doubleClickZoomEnabled', doubleClickZoomEnabled);

addIfNonNull('trackCameraPosition', trackCameraPosition);
addIfNonNull('myLocationEnabled', myLocationEnabled);
addIfNonNull('myLocationTrackingMode', myLocationTrackingMode?.index);
Expand All @@ -422,8 +445,22 @@ class _MapboxMapOptions {

Map<String, dynamic> updatesMap(_MapboxMapOptions newOptions) {
final Map<String, dynamic> prevOptionsMap = toMap();
return newOptions.toMap()
..removeWhere(
(String key, dynamic value) => prevOptionsMap[key] == value);
final newOptionsMap = newOptions.toMap();

// if any gesture is updated also all other gestures have to the saved to
// the update

final gesturesRequireUpdate =
_gestureGroup.any((key) => newOptionsMap[key] != prevOptionsMap[key]);

return newOptionsMap
..removeWhere((String key, dynamic value) {
if (_gestureGroup.contains(key)) return !gesturesRequireUpdate;
final oldValue = prevOptionsMap[key];
if (oldValue is List && value is List) {
return listEquals(oldValue, value);
}
return oldValue == value;
});
}
}
24 changes: 13 additions & 11 deletions mapbox_gl_web/lib/src/convert.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,21 +26,23 @@ class Convert {
sink.setMinMaxZoomPreference(options['minMaxZoomPreference'][0],
options['minMaxZoomPreference'][1]);
}
if (options.containsKey('rotateGesturesEnabled')) {
sink.setRotateGesturesEnabled(options['rotateGesturesEnabled']);
}
if (options.containsKey('scrollGesturesEnabled')) {
sink.setScrollGesturesEnabled(options['scrollGesturesEnabled']);
}
if (options.containsKey('tiltGesturesEnabled')) {
sink.setTiltGesturesEnabled(options['tiltGesturesEnabled']);
if (options['rotateGesturesEnabled'] != null &&
options['scrollGesturesEnabled'] != null &&
options['tiltGesturesEnabled'] != null &&
options['zoomGesturesEnabled'] != null &&
options['doubleClickZoomEnabled'] != null) {
sink.setGestures(
rotateGesturesEnabled: options['rotateGesturesEnabled'],
scrollGesturesEnabled: options['scrollGesturesEnabled'],
tiltGesturesEnabled: options['tiltGesturesEnabled'],
zoomGesturesEnabled: options['zoomGesturesEnabled'],
doubleClickZoomEnabled: options['doubleClickZoomEnabled']);
}

if (options.containsKey('trackCameraPosition')) {
sink.setTrackCameraPosition(options['trackCameraPosition']);
}
if (options.containsKey('zoomGesturesEnabled')) {
sink.setZoomGesturesEnabled(options['zoomGesturesEnabled']);
}

if (options.containsKey('myLocationEnabled')) {
sink.setMyLocationEnabled(options['myLocationEnabled']);
}
Expand Down
Loading

0 comments on commit d3954e5

Please sign in to comment.