North-up compass and rotation lock

This commit is contained in:
stopflock
2025-10-22 15:27:28 -05:00
parent ee3906df80
commit cd2ab00042
19 changed files with 340 additions and 40 deletions
+161
View File
@@ -0,0 +1,161 @@
import 'dart:math';
import 'package:flutter/material.dart';
import 'package:flutter_map/flutter_map.dart';
import 'package:flutter_map_animations/flutter_map_animations.dart';
import 'package:provider/provider.dart';
import '../app_state.dart';
/// A compass indicator widget that shows the current map rotation and allows tapping to enable/disable north lock.
/// The compass appears in the top-right corner of the map and is disabled (non-interactive) when in follow+rotate mode.
class CompassIndicator extends StatefulWidget {
final AnimatedMapController mapController;
const CompassIndicator({
super.key,
required this.mapController,
});
@override
State<CompassIndicator> createState() => _CompassIndicatorState();
}
class _CompassIndicatorState extends State<CompassIndicator> {
double _lastRotation = 0.0;
@override
Widget build(BuildContext context) {
return Consumer<AppState>(
builder: (context, appState, child) {
// Get current map rotation in degrees
double rotationDegrees = 0.0;
try {
rotationDegrees = widget.mapController.mapController.camera.rotation;
} catch (_) {
// Map controller not ready yet
}
// Convert degrees to radians for Transform.rotate (flutter_map uses degrees)
final rotationRadians = rotationDegrees * (pi / 180);
// Check if we're in follow+rotate mode (compass should be disabled)
final isDisabled = appState.followMeMode == FollowMeMode.rotating;
final northLockEnabled = appState.northLockEnabled;
// Force rebuild when north lock changes by comparing rotation
if (northLockEnabled && rotationDegrees != _lastRotation) {
WidgetsBinding.instance.addPostFrameCallback((_) {
if (mounted) setState(() {});
});
}
_lastRotation = rotationDegrees;
return Positioned(
top: (appState.uploadMode == UploadMode.sandbox || appState.uploadMode == UploadMode.simulate) ? 60 : 18,
right: 16,
child: GestureDetector(
onTap: isDisabled ? null : () {
// Toggle north lock (but not when in follow+rotate mode)
final newNorthLockEnabled = !northLockEnabled;
appState.setNorthLockEnabled(newNorthLockEnabled);
// If enabling north lock, animate to north-up orientation
if (newNorthLockEnabled) {
try {
widget.mapController.animateTo(
dest: widget.mapController.mapController.camera.center,
zoom: widget.mapController.mapController.camera.zoom,
rotation: 0.0,
duration: const Duration(milliseconds: 500),
curve: Curves.easeOut,
);
} catch (_) {
// Controller not ready, ignore
}
}
},
child: Container(
width: 52,
height: 52,
decoration: BoxDecoration(
color: isDisabled
? Colors.grey.withOpacity(0.8)
: Colors.white.withOpacity(0.95),
shape: BoxShape.circle,
border: Border.all(
color: isDisabled
? Colors.grey.shade400
: (northLockEnabled
? Theme.of(context).colorScheme.primary
: Colors.grey.shade300),
width: northLockEnabled ? 3.0 : 2.0,
),
boxShadow: [
BoxShadow(
color: Colors.black.withOpacity(0.25),
blurRadius: 6,
offset: const Offset(0, 3),
),
],
),
child: Stack(
children: [
// Compass face with cardinal directions
Center(
child: Container(
width: 40,
height: 40,
decoration: BoxDecoration(
shape: BoxShape.circle,
color: isDisabled
? Colors.grey.shade200
: Colors.grey.shade50,
),
),
),
// North indicator that rotates with map rotation
Transform.rotate(
angle: rotationRadians, // Rotate same direction as map rotation to counter-act it
child: Center(
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
// North arrow (red triangle pointing up)
Container(
margin: const EdgeInsets.only(top: 6),
child: Icon(
Icons.keyboard_arrow_up,
size: 20,
color: isDisabled
? Colors.grey.shade600
: (northLockEnabled
? Colors.red.shade700
: Colors.red.shade600),
),
),
// Small 'N' label
Text(
'N',
style: TextStyle(
fontSize: 10,
fontWeight: FontWeight.bold,
color: isDisabled
? Colors.grey.shade600
: (northLockEnabled
? Colors.red.shade700
: Colors.red.shade600),
),
),
],
),
),
),
],
),
),
),
);
},
);
}
}
+10 -3
View File
@@ -55,7 +55,7 @@ class GpsController {
_currentLatLng != null) {
try {
if (newMode == FollowMeMode.northUp) {
if (newMode == FollowMeMode.follow) {
controller.animateTo(
dest: _currentLatLng!,
zoom: controller.mapController.camera.zoom,
@@ -89,6 +89,8 @@ class GpsController {
int proximityAlertDistance = 200,
List<OsmNode> nearbyNodes = const [],
List<NodeProfile> enabledProfiles = const [],
// Optional parameter for north lock functionality
bool northLockEnabled = false,
}) {
final latLng = LatLng(position.latitude, position.longitude);
_currentLatLng = latLng;
@@ -111,11 +113,13 @@ class GpsController {
debugPrint('[GpsController] GPS position update: ${latLng.latitude}, ${latLng.longitude}, follow-me: $followMeMode');
WidgetsBinding.instance.addPostFrameCallback((_) {
try {
if (followMeMode == FollowMeMode.northUp) {
// Follow position only, keep current rotation
if (followMeMode == FollowMeMode.follow) {
// Follow position only, keep current rotation (unless north lock is enabled)
final rotation = northLockEnabled ? 0.0 : controller.mapController.camera.rotation;
controller.animateTo(
dest: latLng,
zoom: controller.mapController.camera.zoom,
rotation: rotation,
duration: kFollowMeAnimationDuration,
curve: Curves.easeOut,
);
@@ -153,6 +157,7 @@ class GpsController {
required int Function() getProximityAlertDistance,
required List<OsmNode> Function() getNearbyNodes,
required List<NodeProfile> Function() getEnabledProfiles,
required bool Function() getNorthLockEnabled,
}) async {
final perm = await Geolocator.requestPermission();
if (perm == LocationPermission.denied ||
@@ -168,6 +173,7 @@ class GpsController {
final proximityAlertDistance = getProximityAlertDistance();
final nearbyNodes = getNearbyNodes();
final enabledProfiles = getEnabledProfiles();
final northLockEnabled = getNorthLockEnabled();
processPositionUpdate(
position: position,
@@ -178,6 +184,7 @@ class GpsController {
proximityAlertDistance: proximityAlertDistance,
nearbyNodes: nearbyNodes,
enabledProfiles: enabledProfiles,
northLockEnabled: northLockEnabled,
);
});
}
+13 -6
View File
@@ -1,16 +1,18 @@
import 'package:flutter/material.dart';
import 'package:flutter_map/flutter_map.dart';
import 'package:flutter_map_animations/flutter_map_animations.dart';
import 'package:provider/provider.dart';
import '../../app_state.dart';
import '../../dev_config.dart';
import '../../services/localization_service.dart';
import '../camera_icon.dart';
import '../compass_indicator.dart';
import 'layer_selector_button.dart';
/// Widget that renders all map overlay UI elements
class MapOverlays extends StatelessWidget {
final MapController mapController;
final AnimatedMapController mapController;
final UploadMode uploadMode;
final AddNodeSession? session;
final EditNodeSession? editSession;
@@ -82,6 +84,11 @@ class MapOverlays extends StatelessWidget {
),
),
// Compass indicator (top-right, below mode indicator)
CompassIndicator(
mapController: mapController,
),
// Zoom indicator, positioned relative to button bar
Positioned(
left: 10,
@@ -96,7 +103,7 @@ class MapOverlays extends StatelessWidget {
builder: (context) {
double zoom = 15.0; // fallback
try {
zoom = mapController.camera.zoom;
zoom = mapController.mapController.camera.zoom;
} catch (_) {
// Map controller not ready yet
}
@@ -173,8 +180,8 @@ class MapOverlays extends StatelessWidget {
heroTag: "zoom_in",
onPressed: () {
try {
final zoom = mapController.camera.zoom;
mapController.move(mapController.camera.center, zoom + 1);
final zoom = mapController.mapController.camera.zoom;
mapController.mapController.move(mapController.mapController.camera.center, zoom + 1);
} catch (_) {
// Map controller not ready yet
}
@@ -188,8 +195,8 @@ class MapOverlays extends StatelessWidget {
heroTag: "zoom_out",
onPressed: () {
try {
final zoom = mapController.camera.zoom;
mapController.move(mapController.camera.center, zoom - 1);
final zoom = mapController.mapController.camera.zoom;
mapController.mapController.move(mapController.mapController.camera.center, zoom - 1);
} catch (_) {
// Map controller not ready yet
}
+54 -2
View File
@@ -74,6 +74,9 @@ class MapViewState extends State<MapView> {
// Track map center to clear queue on significant panning
LatLng? _lastCenter;
// Track rotation to detect intentional vs accidental rotation
double? _lastRotation;
// State for proximity alert banner
bool _showProximityBanner = false;
@@ -178,6 +181,17 @@ class MapViewState extends State<MapView> {
}
return [];
},
getNorthLockEnabled: () {
if (mounted) {
try {
return context.read<AppState>().northLockEnabled;
} catch (e) {
debugPrint('[MapView] Could not read north lock enabled: $e');
return false;
}
}
return false;
},
);
// Fetch initial cameras
@@ -544,7 +558,45 @@ class MapViewState extends State<MapView> {
maxZoom: (appState.selectedTileType?.maxZoom ?? 18).toDouble(),
onPositionChanged: (pos, gesture) {
setState(() {}); // Instant UI update for zoom, etc.
if (gesture) widget.onUserGesture();
if (gesture) {
widget.onUserGesture();
// Handle north lock: prevent rotation or disable lock if user rotates significantly
if (appState.northLockEnabled) {
try {
final currentRotation = pos.rotation;
if (_lastRotation != null) {
// Calculate rotation change since last gesture
final rotationChange = (currentRotation - _lastRotation!).abs();
// If user tries to rotate significantly, disable north lock and allow it
if (rotationChange > kNorthLockDisableThresholdDegrees) {
appState.setNorthLockEnabled(false);
// Allow this rotation to proceed
} else {
// Small rotation or zoom gesture - force map back to north (0°)
if (currentRotation.abs() > 0.1) { // Only correct if actually rotated
WidgetsBinding.instance.addPostFrameCallback((_) {
try {
_controller.animateTo(
dest: pos.center,
zoom: pos.zoom,
rotation: 0.0,
duration: const Duration(milliseconds: 100), // Quick snap back
curve: Curves.easeOut,
);
} catch (_) {
// Controller not ready, ignore
}
});
}
}
}
_lastRotation = currentRotation;
} catch (_) {
// Controller not ready, ignore
}
}
}
if (session != null) {
appState.updateSession(target: pos.center);
@@ -622,7 +674,7 @@ class MapViewState extends State<MapView> {
// All map overlays (mode indicator, zoom, attribution, add pin)
MapOverlays(
mapController: _controller.mapController,
mapController: _controller,
uploadMode: appState.uploadMode,
session: session,
editSession: editSession,