feat: better rendering

TeeWrath · TeeWrath · commit b127c348825c · 2025-07-31T00:24:06.000+05:30
diff --git a/lib/features/models/canvas_models/canvas_painter.dart b/lib/features/models/canvas_models/canvas_painter.dart
@@ -32,20 +32,45 @@ class CanvasPainter extends CustomPainter {
     required this.interactionMode,
   });
 
-  // Helper method to parse color from string
   Color _parseColor(String? colorString) {
     if (colorString == null) return Colors.black;
     try {
       final hex = colorString.replaceAll('#', '');
-      if (hex.length == 6) {
-        return Color(int.parse('FF$hex', radix: 16));
-      }
-      return Color(int.parse(hex, radix: 16));
+      return Color(int.parse('FF$hex', radix: 16));
     } catch (e) {
       return Colors.black;
     }
   }
 
+  // CHANGE: More robust style parsing
+  TextStyle _getTextStyle(Map<String, dynamic>? attributes) {
+    if (attributes == null) return const TextStyle(fontSize: 14.0, color: Colors.black);
+
+    double fontSize = 14.0;
+    if (attributes['header'] == 1) {
+      fontSize = 28.0;
+    } else if (attributes['header'] == 2) {
+      fontSize = 22.0;
+    } else if (attributes.containsKey('size')) {
+        // You can add more specific size handling if needed
+        fontSize = 14.0; 
+    }
+    
+    final isCode = attributes['code-block'] == true;
+
+    return TextStyle(
+      fontWeight: attributes['bold'] == true ? FontWeight.bold : FontWeight.normal,
+      fontStyle: attributes['italic'] == true ? FontStyle.italic : FontStyle.normal,
+      color: _parseColor(attributes['color'] as String?),
+      fontSize: fontSize,
+      fontFamily: isCode ? 'monospace' : (attributes['font'] as String?),
+      decoration: attributes['underline'] == true ? TextDecoration.underline : TextDecoration.none,
+      backgroundColor: attributes['background'] != null
+          ? _parseColor(attributes['background'] as String?)
+          : null,
+    );
+  }
+
   @override
   void paint(Canvas canvas, Size size) {
     for (final canvasObject in canvasObjects.values) {
@@ -54,8 +79,7 @@ class CanvasPainter extends CustomPainter {
 
       if (canvasObject is Circle) {
         canvas.drawCircle(canvasObject.center, canvasObject.radius, paint);
-        rect = Rect.fromCircle(
-            center: canvasObject.center, radius: canvasObject.radius);
+        rect = Rect.fromCircle(center: canvasObject.center, radius: canvasObject.radius);
       } else if (canvasObject is TextBoxObject) {
         rect = canvasObject.getBounds();
         if (canvasObject.color != Colors.transparent) {
@@ -68,10 +92,7 @@ class CanvasPainter extends CustomPainter {
         } else if (canvasObject is Square) {
           canvas.drawRect(rect, paint);
         } else if (canvasObject is RoundedSquare) {
-          canvas.drawRRect(
-              RRect.fromRectAndRadius(
-                  rect, Radius.circular(canvasObject.cornerRadius)),
-              paint);
+          canvas.drawRRect(RRect.fromRectAndRadius(rect, Radius.circular(canvasObject.cornerRadius)), paint);
         } else if (canvasObject is Diamond) {
           final path = Path()
             ..moveTo(rect.center.dx, rect.top)
@@ -105,134 +126,46 @@ class CanvasPainter extends CustomPainter {
           canvas.drawPath(path, paint);
         } else if (canvasObject is Cylinder) {
           final ellipseHeight = min(rect.height * 0.3, 40.0);
-          final bodyRect = Rect.fromLTRB(rect.left,
-              rect.top + ellipseHeight / 2, rect.right, rect.bottom - ellipseHeight / 2);
+          final bodyRect = Rect.fromLTRB(rect.left, rect.top + ellipseHeight / 2, rect.right, rect.bottom - ellipseHeight / 2);
           canvas.drawRect(bodyRect, paint);
-          canvas.drawOval(
-              Rect.fromCenter(
-                  center: bodyRect.topCenter,
-                  width: rect.width,
-                  height: ellipseHeight),
-              paint);
-          canvas.drawOval(
-              Rect.fromCenter(
-                  center: bodyRect.bottomCenter,
-                  width: rect.width,
-                  height: ellipseHeight),
-              paint);
+          canvas.drawOval(Rect.fromCenter(center: bodyRect.topCenter, width: rect.width, height: ellipseHeight), paint);
+          canvas.drawOval(Rect.fromCenter(center: bodyRect.bottomCenter, width: rect.width, height: ellipseHeight), paint);
         }
       }
 
-      final bool isEditingText = interactionMode == InteractionMode.editingText &&
-                                  currentlySelectedObjectId == canvasObject.id;
+      final bool isEditingText = interactionMode == InteractionMode.editingText && currentlySelectedObjectId == canvasObject.id;
 
-      // CHANGE: Rewrote text rendering logic for proper styling.
-      if (canvasObject.textDelta != null &&
-          canvasObject.textDelta!.isNotEmpty &&
-          !isEditingText) {
+      // CHANGE: Rewrote text rendering logic to be more robust.
+      if (canvasObject.textDelta != null && canvasObject.textDelta!.isNotEmpty && !isEditingText) {
         try {
-          final List<dynamic> deltaJson = jsonDecode(canvasObject.textDelta!);
-          final List<TextSpan> textSpans = [];
-          int listCounter = 1;
-
-          for (final op in deltaJson) {
-            if (op is Map && op.containsKey('insert')) {
-              String text = op['insert'];
-              final Map<String, dynamic>? attributes =
-                  op['attributes'] as Map<String, dynamic>?;
-
-              double fontSize = 14.0;
-              FontWeight fontWeight = FontWeight.normal;
-              FontStyle fontStyle = FontStyle.normal;
-              TextDecoration textDecoration = TextDecoration.none;
-              Color color = Colors.black;
-              Color? backgroundColor;
-              String? listType;
-
-              if (attributes != null) {
-                fontWeight = attributes['bold'] == true
-                    ? FontWeight.bold
-                    : FontWeight.normal;
-                fontStyle = attributes['italic'] == true
-                    ? FontStyle.italic
-                    : FontStyle.normal;
-                textDecoration = attributes['underline'] == true
-                    ? TextDecoration.underline
-                    : TextDecoration.none;
-                color = _parseColor(attributes['color'] as String?);
-                backgroundColor =
-                    _parseColor(attributes['background'] as String?);
-                if (attributes['header'] == 1) fontSize = 24.0;
-                if (attributes['header'] == 2) fontSize = 20.0;
-                if (attributes['list'] != null) {
-                  listType = attributes['list'];
-                }
-              }
-              
-              if (text.endsWith('\n') && listType != null) {
-                if (listType == 'bullet') {
-                  text = '• ${text.substring(0, text.length -1)}\n';
-                } else if (listType == 'ordered') {
-                  text = '$listCounter. ${text.substring(0, text.length -1)}\n';
-                  listCounter++;
-                }
-              } else if (listType == null) {
-                listCounter = 1; // Reset counter when not in a list
-              }
-
-              textSpans.add(
-                TextSpan(
-                  text: text,
-                  style: TextStyle(
-                    fontSize: fontSize,
-                    fontWeight: fontWeight,
-                    fontStyle: fontStyle,
-                    decoration: textDecoration,
-                    color: color,
-                    backgroundColor: backgroundColor,
-                  ),
-                ),
-              );
-            }
+          final List<dynamic> delta = jsonDecode(canvasObject.textDelta!);
+          
+          final List<InlineSpan> textSpans = [];
+          for (final op in delta) {
+            textSpans.add(TextSpan(
+              text: op['insert'],
+              style: _getTextStyle(op['attributes'] as Map<String, dynamic>?),
+            ));
           }
-
           final richText = TextSpan(children: textSpans);
+          
           final textPainter = TextPainter(
             text: richText,
             textDirection: TextDirection.ltr,
-            textAlign: TextAlign.start,
           );
-
-          double textPadding = 5.0;
-          double availableWidth = rect.width - 2 * textPadding;
-          
-          if (availableWidth <= 0) continue;
-
-          textPainter.layout(maxWidth: availableWidth);
           
-          final textOffset = Offset(
-            rect.left + textPadding,
-            rect.top + textPadding,
-          );
-
-          canvas.save();
-          canvas.clipRect(rect);
-          textPainter.paint(canvas, textOffset);
-          canvas.restore();
+          final double textPadding = 8.0;
+          final double availableWidth = rect.width - (2 * textPadding);
+          if (availableWidth > 0) {
+              textPainter.layout(maxWidth: availableWidth);
+              canvas.save();
+              canvas.clipRect(rect);
+              textPainter.paint(canvas, rect.topLeft.translate(textPadding, textPadding));
+              canvas.restore();
+          }
 
         } catch (e) {
-          print(
-              "Warning: Could not parse Quill Delta, rendering as plain text: $e");
-          // Fallback for plain text
-          final textPainter = TextPainter(
-            text: TextSpan(
-              text: canvasObject.textDelta,
-              style: const TextStyle(color: Colors.black, fontSize: 14.0),
-            ),
-            textDirection: TextDirection.ltr,
-          );
-          textPainter.layout(maxWidth: rect.width);
-          textPainter.paint(canvas, rect.topLeft);
+          print("Error painting text: $e");
         }
       }
 
@@ -251,11 +184,8 @@ class CanvasPainter extends CustomPainter {
           ..style = PaintingStyle.stroke
           ..strokeWidth = 2.0;
 
-        if (canvasObject is TextBoxObject &&
-            canvasObject.color == Colors.transparent) {
-          // Draw dashed border for transparent text box
-          final path = Path()
-            ..addRect(rect);
+        if (canvasObject is TextBoxObject && canvasObject.color == Colors.transparent) {
+          final path = Path()..addRect(rect);
           canvas.drawPath(
             dashPath(path, dashArray: CircularIntervalList<double>([5.0, 3.0])),
             borderPaint,
@@ -289,8 +219,7 @@ class CanvasPainter extends CustomPainter {
            _hasCanvasObjectsChanged(oldPainter.canvasObjects, canvasObjects);
   }
 
-  bool _hasCanvasObjectsChanged(
-      Map<String, CanvasObject> oldObjects, Map<String, CanvasObject> newObjects) {
+  bool _hasCanvasObjectsChanged(Map<String, CanvasObject> oldObjects, Map<String, CanvasObject> newObjects) {
     if (oldObjects.length != newObjects.length) return true;
     for (final id in newObjects.keys) {
       final newObj = newObjects[id];
@@ -303,11 +232,7 @@ class CanvasPainter extends CustomPainter {
   }
 }
 
-// Copied from path_drawing package to avoid adding a dependency
-Path dashPath(
-  Path source, {
-  required CircularIntervalList<double> dashArray,
-}) {
+Path dashPath(Path source, {required CircularIntervalList<double> dashArray}) {
   final Path dest = Path();
   for (final metric in source.computeMetrics()) {
     double distance = 0.0;
diff --git a/lib/features/workspace/widgets/object_text_editor.dart b/lib/features/workspace/widgets/object_text_editor.dart
@@ -110,13 +110,13 @@ class _ObjectTextEditorState extends State<ObjectTextEditor> {
                     controller: quillController,
                     config: const QuillSimpleToolbarConfig(
                       showBackgroundColorButton: true,
-                      showFontFamily: false,
-                      showLink: false,
+                      showFontFamily: true,
+                      showLink: true,
                       showSearchButton: false,
-                      showInlineCode: false,
-                      showListCheck: false,
-                      showQuote: false,
-                      showCodeBlock: false,
+                      showInlineCode: true,
+                      showListCheck: true,
+                      showQuote: true,
+                      showCodeBlock: true,
                       showListBullets: true,
                       showListNumbers: true,
                       showClearFormat: true,
