diff --git a/lib/cubit/canvas_cubit.dart b/lib/cubit/canvas_cubit.dart index 0f02ba0c..4c47f62a 100644 --- a/lib/cubit/canvas_cubit.dart +++ b/lib/cubit/canvas_cubit.dart @@ -791,18 +791,6 @@ class CanvasCubit extends Cubit { ..strokeWidth = strokeWidth * 1.5 ..filterQuality = FilterQuality.medium; break; - case BrushType.highlighter: - paint - ..color = color.withValues(alpha: 0.3) - ..strokeWidth = strokeWidth * 2.0 - ..blendMode = BlendMode.multiply; - break; - case BrushType.pencil: - paint - ..color = color - ..strokeWidth = strokeWidth * 0.8 - ..filterQuality = FilterQuality.low; - break; } return paint; } diff --git a/lib/models/draw_model.dart b/lib/models/draw_model.dart index 7b99716e..4a44240b 100644 --- a/lib/models/draw_model.dart +++ b/lib/models/draw_model.dart @@ -1,6 +1,9 @@ import 'package:flutter/material.dart'; -enum BrushType { brush, marker, highlighter, pencil } +enum BrushType { + brush, + marker, +} class DrawingPoint { final Offset offset; diff --git a/lib/ui/screens/canvas_screen.dart b/lib/ui/screens/canvas_screen.dart index 0e08d468..a1df6491 100644 --- a/lib/ui/screens/canvas_screen.dart +++ b/lib/ui/screens/canvas_screen.dart @@ -236,6 +236,7 @@ class CanvasScreen extends StatelessWidget { isDrawingMode: state.isDrawingMode, currentDrawColor: state.currentDrawColor, currentStrokeWidth: state.currentStrokeWidth, + currentBrushType: state.currentBrushType, onStartDrawing: (offset) { context.read().startNewDrawPath(offset); }, @@ -251,6 +252,9 @@ class CanvasScreen extends StatelessWidget { onStrokeWidthChanged: (width) { context.read().setStrokeWidth(width); }, + onBrushTypeChanged: (brushType) { + context.read().setBrushType(brushType); + }, onUndoDrawing: () { context.read().undoLastDrawing(); }, diff --git a/lib/ui/widgets/drawing/drawing_painter.dart b/lib/ui/widgets/drawing/drawing_painter.dart index 2c18e626..c1479c6e 100644 --- a/lib/ui/widgets/drawing/drawing_painter.dart +++ b/lib/ui/widgets/drawing/drawing_painter.dart @@ -18,25 +18,42 @@ class DrawingPainter extends CustomPainter { canvas.drawRect(Offset.zero & size, paint); continue; // Skip the regular path drawing for fill operations } + final points = path.points; if (points.isEmpty) continue; - final paint = points.first.paint; + // Use brush-specific rendering + _renderBrushStroke(canvas, path); + } + } - if (points.length == 1) { - // Draw a dot for single point - canvas.drawCircle(points.first.offset, paint.strokeWidth / 2, paint); - } else { - // Draw a path for multiple points - final drawPath = Path(); - drawPath.moveTo(points.first.offset.dx, points.first.offset.dy); + void _renderBrushStroke(Canvas canvas, DrawPath path) { + final points = path.points; + if (points.isEmpty) return; - for (int i = 1; i < points.length; i++) { - drawPath.lineTo(points[i].offset.dx, points[i].offset.dy); - } + // All brush types use standard stroke rendering + // TODO: Use this method to Add new brush type render methods here (e.g., spray, charcoal, watercolor) instead of modifying paint(). + + _renderStandardStroke(canvas, path); + } - canvas.drawPath(drawPath, paint); + void _renderStandardStroke(Canvas canvas, DrawPath path) { + final points = path.points; + final paint = points.first.paint; + + if (points.length == 1) { + // Draw a dot for single point + canvas.drawCircle(points.first.offset, paint.strokeWidth / 2, paint); + } else { + // Draw a path for multiple points + final drawPath = Path(); + drawPath.moveTo(points.first.offset.dx, points.first.offset.dy); + + for (int i = 1; i < points.length; i++) { + drawPath.lineTo(points[i].offset.dx, points[i].offset.dy); } + + canvas.drawPath(drawPath, paint); } } diff --git a/lib/ui/widgets/drawing/drawing_tools_panel.dart b/lib/ui/widgets/drawing/drawing_tools_panel.dart index 3d069bf4..ab1ac7d2 100644 --- a/lib/ui/widgets/drawing/drawing_tools_panel.dart +++ b/lib/ui/widgets/drawing/drawing_tools_panel.dart @@ -1,21 +1,44 @@ import 'package:flutter/material.dart'; import 'package:flex_color_picker/flex_color_picker.dart'; import '../../../constants/color_constants.dart'; +import '../../../models/draw_model.dart'; class DrawingToolsPanel extends StatelessWidget { final Color currentColor; final double currentStrokeWidth; + final BrushType currentBrushType; final Function(Color) onColorChanged; final Function(double) onStrokeWidthChanged; + final Function(BrushType) onBrushTypeChanged; const DrawingToolsPanel({ super.key, required this.currentColor, required this.currentStrokeWidth, + required this.currentBrushType, required this.onColorChanged, required this.onStrokeWidthChanged, + required this.onBrushTypeChanged, }); + String _getBrushTypeName(BrushType brushType) { + switch (brushType) { + case BrushType.brush: + return 'Brush'; + case BrushType.marker: + return 'Marker'; + } + } + + IconData _getBrushTypeIcon(BrushType brushType) { + switch (brushType) { + case BrushType.brush: + return Icons.brush; + case BrushType.marker: + return Icons.edit; + } + } + void _showColorPicker(BuildContext context) { showDialog( context: context, @@ -107,6 +130,79 @@ class DrawingToolsPanel extends StatelessWidget { ), ), + // Brush Type section + Text( + 'Brush Type', + style: TextStyle( + fontWeight: FontWeight.bold, + fontSize: 12, + ), + ), + const SizedBox(height: 2), + + // Brush type grid + GridView.builder( + shrinkWrap: true, + physics: const NeverScrollableScrollPhysics(), + padding: EdgeInsets.zero, + gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount( + crossAxisCount: 2, + crossAxisSpacing: 6, + mainAxisSpacing: 6, + childAspectRatio: 1.2, + ), + itemCount: 2, // Only brush and marker + itemBuilder: (context, index) { + final availableBrushTypes = [BrushType.brush, BrushType.marker]; + final brushType = availableBrushTypes[index]; + final isSelected = currentBrushType == brushType; + + return InkWell( + onTap: () => onBrushTypeChanged(brushType), + borderRadius: BorderRadius.circular(8), + child: Container( + decoration: BoxDecoration( + color: isSelected + ? ColorConstants.dialogButtonBlue.withValues(alpha: 0.1) + : ColorConstants.gray50, + borderRadius: BorderRadius.circular(8), + border: Border.all( + color: isSelected + ? ColorConstants.dialogButtonBlue + : ColorConstants.gray200, + width: isSelected ? 2 : 1, + ), + ), + child: Column( + mainAxisAlignment: MainAxisAlignment.center, + children: [ + Icon( + _getBrushTypeIcon(brushType), + size: 18, + color: isSelected + ? ColorConstants.dialogButtonBlue + : ColorConstants.gray600, + ), + Text( + _getBrushTypeName(brushType), + style: TextStyle( + fontSize: 8, + fontWeight: + isSelected ? FontWeight.w600 : FontWeight.w400, + color: isSelected + ? ColorConstants.dialogButtonBlue + : ColorConstants.gray600, + ), + textAlign: TextAlign.center, + overflow: TextOverflow.ellipsis, + ), + ], + ), + ), + ); + }, + ), + // Color picker section Text( 'Color', @@ -115,7 +211,7 @@ class DrawingToolsPanel extends StatelessWidget { fontSize: 12, ), ), - const SizedBox(height: 8), + const SizedBox(height: 2), // Color display box with color code GestureDetector( @@ -211,8 +307,6 @@ class DrawingToolsPanel extends StatelessWidget { ), ), - const SizedBox(height: 16), - // Brush size section Text( 'Size', @@ -221,7 +315,6 @@ class DrawingToolsPanel extends StatelessWidget { fontSize: 12, ), ), - const SizedBox(height: 8), // Size preview circle Container( @@ -253,8 +346,6 @@ class DrawingToolsPanel extends StatelessWidget { ), ), - const SizedBox(height: 8), - // Size slider SizedBox( width: 100, @@ -280,8 +371,6 @@ class DrawingToolsPanel extends StatelessWidget { ), ), - const SizedBox(height: 4), - // Size value display Text( '${currentStrokeWidth.round()}px', diff --git a/lib/ui/widgets/drawing_canvas.dart b/lib/ui/widgets/drawing_canvas.dart index aa9df329..fbc513b8 100644 --- a/lib/ui/widgets/drawing_canvas.dart +++ b/lib/ui/widgets/drawing_canvas.dart @@ -9,11 +9,13 @@ class DrawingCanvas extends StatefulWidget { final bool isDrawingMode; final Color currentDrawColor; final double currentStrokeWidth; + final BrushType currentBrushType; final Function(Offset) onStartDrawing; final Function(Offset) onUpdateDrawing; final Function() onEndDrawing; final Function(Color) onColorChanged; final Function(double) onStrokeWidthChanged; + final Function(BrushType) onBrushTypeChanged; final Function() onUndoDrawing; final Function() onClearDrawing; @@ -23,11 +25,13 @@ class DrawingCanvas extends StatefulWidget { required this.isDrawingMode, required this.currentDrawColor, required this.currentStrokeWidth, + required this.currentBrushType, required this.onStartDrawing, required this.onUpdateDrawing, required this.onEndDrawing, required this.onColorChanged, required this.onStrokeWidthChanged, + required this.onBrushTypeChanged, required this.onUndoDrawing, required this.onClearDrawing, }); @@ -94,8 +98,10 @@ class _DrawingCanvasState extends State { child: DrawingToolsPanel( currentColor: widget.currentDrawColor, currentStrokeWidth: widget.currentStrokeWidth, + currentBrushType: widget.currentBrushType, onColorChanged: (_) {}, // No-op in feedback onStrokeWidthChanged: (_) {}, // No-op in feedback + onBrushTypeChanged: (_) {}, // No-op in feedback ), ), ), @@ -128,8 +134,10 @@ class _DrawingCanvasState extends State { child: DrawingToolsPanel( currentColor: widget.currentDrawColor, currentStrokeWidth: widget.currentStrokeWidth, + currentBrushType: widget.currentBrushType, onColorChanged: widget.onColorChanged, onStrokeWidthChanged: widget.onStrokeWidthChanged, + onBrushTypeChanged: widget.onBrushTypeChanged, ), ), ),