feat: Enhance drawing functionality with sender tracking and sharing capabilities

This commit is contained in:
Janez T
2025-10-15 22:41:57 +02:00
parent 317addba9e
commit 800786ec9c
12 changed files with 618 additions and 107 deletions

View File

@@ -34,14 +34,35 @@ class DrawingLayer extends StatelessWidget {
/// Create a polyline from a drawing
Polyline _createPolyline(MapDrawing drawing, {required bool isPreview}) {
final points = _getPoints(drawing);
final opacity = isPreview ? 0.6 : 1.0;
// Different styles for different drawing sources
final double opacity;
final double strokeWidth;
if (isPreview) {
// Preview drawing (currently being drawn)
opacity = 0.6;
strokeWidth = 4.0;
} else if (drawing.isReceived) {
// Received drawing from another node (thinner, more transparent)
opacity = 0.7;
strokeWidth = 3.0;
} else {
// Local drawing (solid line, normal thickness)
opacity = 1.0;
strokeWidth = 4.0;
}
return Polyline(
points: points,
color: drawing.color.withValues(alpha: opacity),
strokeWidth: 4.0,
strokeWidth: strokeWidth,
borderColor: Colors.white.withValues(alpha: opacity * 0.8),
borderStrokeWidth: 1.0,
// Use dotted pattern for received drawings
pattern: drawing.isReceived && !isPreview
? StrokePattern.dotted(spacingFactor: 2)
: const StrokePattern.solid(),
);
}
@@ -71,33 +92,60 @@ class DrawingMarkersLayer extends StatelessWidget {
@override
Widget build(BuildContext context) {
// Only show delete buttons when showDeleteButtons is true
if (!showDeleteButtons) {
return const SizedBox.shrink();
}
final List<Marker> markers = [];
// Add delete markers for each drawing (at the center point)
// Add markers for each drawing
for (final drawing in drawings) {
final centerPoint = _getCenterPoint(drawing);
if (centerPoint != null) {
markers.add(
Marker(
point: centerPoint,
width: 40,
height: 40,
child: GestureDetector(
onTap: () {
if (onDeleteDrawing != null) {
_showDeleteDialog(context, drawing);
}
},
if (showDeleteButtons) {
// Show delete button when in drawing mode
markers.add(
Marker(
point: centerPoint,
width: 40,
height: 40,
child: GestureDetector(
onTap: () {
if (onDeleteDrawing != null) {
_showDeleteDialog(context, drawing);
}
},
child: Container(
decoration: BoxDecoration(
color: drawing.color.withValues(alpha: 0.9),
shape: BoxShape.circle,
border: Border.all(color: Colors.white, width: 2),
boxShadow: [
BoxShadow(
color: Colors.black.withValues(alpha: 0.3),
blurRadius: 4,
offset: const Offset(0, 2),
),
],
),
child: const Icon(
Icons.close,
color: Colors.white,
size: 20,
),
),
),
),
);
} else if (drawing.isReceived && drawing.senderName != null) {
// Show sender badge for received drawings (when not in drawing mode)
markers.add(
Marker(
point: centerPoint,
width: 120,
height: 30,
child: Container(
padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 4),
decoration: BoxDecoration(
color: drawing.color.withValues(alpha: 0.9),
shape: BoxShape.circle,
border: Border.all(color: Colors.white, width: 2),
borderRadius: BorderRadius.circular(12),
border: Border.all(color: Colors.white, width: 1.5),
boxShadow: [
BoxShadow(
color: Colors.black.withValues(alpha: 0.3),
@@ -106,18 +154,40 @@ class DrawingMarkersLayer extends StatelessWidget {
),
],
),
child: const Icon(
Icons.close,
color: Colors.white,
size: 20,
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
const Icon(
Icons.person,
color: Colors.white,
size: 14,
),
const SizedBox(width: 4),
Flexible(
child: Text(
drawing.senderName!,
style: const TextStyle(
color: Colors.white,
fontSize: 11,
fontWeight: FontWeight.bold,
),
overflow: TextOverflow.ellipsis,
maxLines: 1,
),
),
],
),
),
),
),
);
);
}
}
}
if (markers.isEmpty) {
return const SizedBox.shrink();
}
return MarkerLayer(markers: markers);
}

View File

@@ -1,7 +1,11 @@
import 'dart:typed_data';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import '../../providers/drawing_provider.dart';
import '../../providers/connection_provider.dart';
import '../../providers/contacts_provider.dart';
import '../../models/map_drawing.dart';
import '../../models/contact.dart';
/// Toolbar for drawing controls on the map
class DrawingToolbar extends StatelessWidget {
@@ -50,8 +54,8 @@ class DrawingToolbar extends StatelessWidget {
Text(
_getTitleForMode(drawingProvider.drawingMode),
style: Theme.of(context).textTheme.titleSmall?.copyWith(
fontWeight: FontWeight.bold,
),
fontWeight: FontWeight.bold,
),
),
const SizedBox(width: 8),
IconButton(
@@ -62,30 +66,33 @@ class DrawingToolbar extends StatelessWidget {
),
],
),
const SizedBox(height: 12),
// Color picker
const SizedBox(height: 8),
// Color picker - more compact
Wrap(
spacing: 8,
spacing: 4,
runSpacing: 4,
children: DrawingColors.palette.map((color) {
final isSelected = drawingProvider.selectedColor == color;
return GestureDetector(
onTap: () => drawingProvider.setColor(color),
child: Container(
width: 32,
height: 32,
width: 24,
height: 24,
decoration: BoxDecoration(
color: color,
shape: BoxShape.circle,
border: Border.all(
color: isSelected ? Colors.white : Colors.grey.shade300,
width: isSelected ? 3 : 2,
color: isSelected
? Colors.white
: Colors.grey.shade300,
width: isSelected ? 2 : 1,
),
boxShadow: [
if (isSelected)
BoxShadow(
color: color.withValues(alpha: 0.5),
blurRadius: 8,
spreadRadius: 2,
blurRadius: 4,
spreadRadius: 1,
),
],
),
@@ -93,14 +100,14 @@ class DrawingToolbar extends StatelessWidget {
? const Icon(
Icons.check,
color: Colors.white,
size: 16,
size: 12,
)
: null,
),
);
}).toList(),
),
const SizedBox(height: 12),
const SizedBox(height: 8),
// Action buttons
Row(
mainAxisSize: MainAxisSize.min,
@@ -112,6 +119,9 @@ class DrawingToolbar extends StatelessWidget {
icon: const Icon(Icons.undo),
onPressed: () => drawingProvider.cancelCurrentDrawing(),
tooltip: 'Cancel',
iconSize: 20,
padding: const EdgeInsets.all(4),
constraints: const BoxConstraints(),
),
// Complete line drawing
if (drawingProvider.drawingMode == DrawingMode.line &&
@@ -121,31 +131,24 @@ class DrawingToolbar extends StatelessWidget {
onPressed: () => drawingProvider.completeLine(),
tooltip: 'Complete Line',
color: Colors.green,
iconSize: 20,
padding: const EdgeInsets.all(4),
constraints: const BoxConstraints(),
),
// Clear all drawings
if (drawingProvider.drawings.isNotEmpty)
IconButton(
icon: const Icon(Icons.delete_sweep),
onPressed: () => _showClearAllDialog(context, drawingProvider),
onPressed: () =>
_showClearAllDialog(context, drawingProvider),
tooltip: 'Clear All',
color: Colors.red,
iconSize: 20,
padding: const EdgeInsets.all(4),
constraints: const BoxConstraints(),
),
],
),
// Instructions
const SizedBox(height: 8),
Container(
padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 6),
decoration: BoxDecoration(
color: Theme.of(context).colorScheme.primaryContainer,
borderRadius: BorderRadius.circular(8),
),
child: Text(
_getInstructions(drawingProvider.drawingMode),
style: Theme.of(context).textTheme.bodySmall,
textAlign: TextAlign.center,
),
),
],
),
);
@@ -171,8 +174,8 @@ class DrawingToolbar extends StatelessWidget {
Text(
'Drawing Tools',
style: Theme.of(context).textTheme.titleMedium?.copyWith(
fontWeight: FontWeight.bold,
),
fontWeight: FontWeight.bold,
),
),
],
),
@@ -198,10 +201,28 @@ class DrawingToolbar extends StatelessWidget {
),
if (drawingProvider.drawings.isNotEmpty) ...[
const Divider(),
ListTile(
leading: const Icon(Icons.share, color: Colors.blue),
title: const Text('Share Drawings'),
subtitle: Text(
'Broadcast ${drawingProvider.drawings.length} drawings to team',
),
onTap: () async {
Navigator.pop(context);
// Small delay to ensure first bottom sheet is fully closed
// before opening the second one
await Future.delayed(const Duration(milliseconds: 100));
if (context.mounted) {
_showShareDrawingsDialog(context, drawingProvider);
}
},
),
ListTile(
leading: const Icon(Icons.delete_sweep, color: Colors.red),
title: const Text('Clear All Drawings'),
subtitle: Text('Remove all ${drawingProvider.drawings.length} drawings'),
subtitle: Text(
'Remove all ${drawingProvider.drawings.length} drawings',
),
onTap: () {
Navigator.pop(context);
_showClearAllDialog(context, drawingProvider);
@@ -215,7 +236,10 @@ class DrawingToolbar extends StatelessWidget {
}
/// Show clear all confirmation dialog
void _showClearAllDialog(BuildContext context, DrawingProvider drawingProvider) {
void _showClearAllDialog(
BuildContext context,
DrawingProvider drawingProvider,
) {
showDialog(
context: context,
builder: (context) => AlertDialog(
@@ -233,9 +257,7 @@ class DrawingToolbar extends StatelessWidget {
Navigator.pop(context);
drawingProvider.clearAllDrawings();
},
style: TextButton.styleFrom(
foregroundColor: Colors.red,
),
style: TextButton.styleFrom(foregroundColor: Colors.red),
child: const Text('Clear All'),
),
],
@@ -278,4 +300,262 @@ class DrawingToolbar extends StatelessWidget {
return '';
}
}
/// Show share drawings dialog
void _showShareDrawingsDialog(
BuildContext context,
DrawingProvider drawingProvider,
) {
debugPrint('🎨 [DrawingToolbar] _showShareDrawingsDialog called');
// Capture the root context BEFORE showing the modal
final rootContext = context;
// Read providers BEFORE any async operations or dialogs
// This ensures we have the correct BuildContext
final connectionProvider = Provider.of<ConnectionProvider>(context, listen: false);
final contactsProvider = Provider.of<ContactsProvider>(context, listen: false);
debugPrint(' Connection status: ${connectionProvider.deviceInfo.isConnected}');
if (!connectionProvider.deviceInfo.isConnected) {
ScaffoldMessenger.of(context).showSnackBar(
const SnackBar(
content: Text('Not connected to device'),
backgroundColor: Colors.red,
),
);
return;
}
// Get device name for sender identification
final senderName = connectionProvider.deviceInfo.selfName ?? 'Unknown';
// Filter drawings (only share local drawings, not received ones)
final localDrawings = drawingProvider.drawings
.where((d) => !d.isReceived)
.toList();
debugPrint(' Local drawings count: ${localDrawings.length}');
debugPrint(' Total drawings count: ${drawingProvider.drawings.length}');
if (localDrawings.isEmpty) {
ScaffoldMessenger.of(context).showSnackBar(
const SnackBar(
content: Text('No local drawings to share'),
backgroundColor: Colors.orange,
),
);
return;
}
// Get available rooms
final rooms = contactsProvider.rooms;
debugPrint(' Available rooms: ${rooms.length}');
debugPrint(' Showing modal bottom sheet...');
showModalBottomSheet(
context: context,
isScrollControlled: true,
builder: (sheetContext) => Container(
padding: const EdgeInsets.symmetric(vertical: 16),
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Padding(
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
child: Row(
children: [
const Icon(Icons.share),
const SizedBox(width: 12),
Expanded(
child: Text(
'Share ${localDrawings.length} Drawing${localDrawings.length > 1 ? 's' : ''}',
style: Theme.of(context).textTheme.titleMedium?.copyWith(
fontWeight: FontWeight.bold,
),
),
),
],
),
),
const Divider(),
// Option: Send to Public Channel
ListTile(
leading: const Icon(Icons.public, color: Colors.blue),
title: const Text('Public Channel'),
subtitle: const Text('Broadcast to all nearby nodes (ephemeral)'),
onTap: () async {
debugPrint('📤 [DrawingToolbar] Public Channel tapped');
// Share BEFORE popping the navigator
await _shareDrawingsToChannel(
sheetContext,
localDrawings,
connectionProvider,
senderName,
);
if (sheetContext.mounted) {
Navigator.pop(sheetContext);
}
},
),
// Option: Send to Room
if (rooms.isNotEmpty) ...[
...rooms.map(
(room) => ListTile(
leading: const Icon(Icons.meeting_room, color: Colors.green),
title: Text(room.advName),
subtitle: const Text('Stored permanently in room'),
onTap: () async {
debugPrint('📤 [DrawingToolbar] Room ${room.advName} tapped');
// Share BEFORE popping the navigator
await _shareDrawingsToRoom(
sheetContext,
localDrawings,
connectionProvider,
senderName,
room,
);
if (sheetContext.mounted) {
Navigator.pop(sheetContext);
}
},
),
),
],
],
),
),
);
}
/// Share drawings to public channel
Future<void> _shareDrawingsToChannel(
BuildContext context,
List<MapDrawing> drawings,
ConnectionProvider connectionProvider,
String senderName,
) async {
debugPrint('📤 [DrawingToolbar] _shareDrawingsToChannel called');
debugPrint(' Drawings to share: ${drawings.length}');
debugPrint(' Sender name: $senderName');
debugPrint(' Context mounted: ${context.mounted}');
if (!context.mounted) {
debugPrint('❌ Context not mounted, aborting');
return;
}
final drawingProvider = Provider.of<DrawingProvider>(context, listen: false);
int successCount = 0;
for (final drawing in drawings) {
try {
debugPrint(' Creating message for drawing ${drawing.id}...');
final message = drawingProvider.createDrawingBroadcastMessage(
drawing,
senderName,
);
debugPrint(' Message created (${message.length} chars): ${message.substring(0, message.length > 100 ? 100 : message.length)}...');
debugPrint(' Sending to channel 0...');
await connectionProvider.sendChannelMessage(
channelIdx: 0,
text: message,
);
debugPrint(' ✅ Sent successfully');
successCount++;
// Small delay between messages to avoid overwhelming the device
await Future.delayed(const Duration(milliseconds: 200));
} catch (e, stackTrace) {
debugPrint('❌ Failed to share drawing ${drawing.id}: $e');
debugPrint(' Stack trace: $stackTrace');
}
}
debugPrint(' Share complete: $successCount/${drawings.length} sent');
debugPrint(' Context mounted after send: ${context.mounted}');
if (!context.mounted) {
debugPrint('❌ Context not mounted, cannot show snackbar');
return;
}
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(
content: Text(
'Shared $successCount/${drawings.length} drawings to Public Channel',
),
backgroundColor: successCount == drawings.length
? Colors.green
: Colors.orange,
),
);
}
/// Share drawings to a specific room
Future<void> _shareDrawingsToRoom(
BuildContext context,
List<MapDrawing> drawings,
ConnectionProvider connectionProvider,
String senderName,
Contact room,
) async {
debugPrint('📤 [DrawingToolbar] _shareDrawingsToRoom called');
debugPrint(' Room: ${room.advName}');
debugPrint(' Drawings to share: ${drawings.length}');
debugPrint(' Sender name: $senderName');
debugPrint(' Context mounted: ${context.mounted}');
if (!context.mounted) {
debugPrint('❌ Context not mounted, aborting');
return;
}
final drawingProvider = Provider.of<DrawingProvider>(context, listen: false);
int successCount = 0;
for (final drawing in drawings) {
try {
debugPrint(' Creating message for drawing ${drawing.id}...');
final message = drawingProvider.createDrawingBroadcastMessage(
drawing,
senderName,
);
debugPrint(' Message created (${message.length} chars): ${message.substring(0, message.length > 100 ? 100 : message.length)}...');
debugPrint(' Sending to room ${room.advName}...');
await connectionProvider.sendTextMessage(
contactPublicKey: room.publicKey,
text: message,
);
debugPrint(' ✅ Sent successfully');
successCount++;
// Small delay between messages to avoid overwhelming the device
await Future.delayed(const Duration(milliseconds: 200));
} catch (e, stackTrace) {
debugPrint(
'❌ Failed to share drawing ${drawing.id} to ${room.advName}: $e',
);
debugPrint(' Stack trace: $stackTrace');
}
}
debugPrint(' Share complete: $successCount/${drawings.length} sent');
debugPrint(' Context mounted after send: ${context.mounted}');
if (!context.mounted) {
debugPrint('❌ Context not mounted, cannot show snackbar');
return;
}
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(
content: Text(
'Shared $successCount/${drawings.length} drawings to ${room.advName}',
),
backgroundColor: successCount == drawings.length
? Colors.green
: Colors.orange,
),
);
}
}